Merge pull request #520 from uploadcare/chore/image-shrink-tests

chore: testing setup for image shrink

packages/image-shrink/.gitignore

@@ -1 +1,3 @@
 LICENSE
+src/test/snapshots
+coverage

packages/image-shrink/package.json

@@ -19,7 +19,8 @@
   "scripts": {
     "prepack": "cp ../../LICENSE ./LICENSE",
     "clean": "rimraf dist",
-    "test": "node --experimental-vm-modules ../../node_modules/jest/bin/jest.js",
+    "test": "npx playwright install-deps chromium && vitest --run  --coverage",
+    "test:watch": "npx playwright install-deps chromium && vitest",
     "prebuild": "npm run clean",
     "build": "npm run build:types && npm run build:compile",
     "build:types": "dts-bundle-generator --project tsconfig.dts.json -o dist/index.d.ts src/index.ts",
@@ -43,7 +44,13 @@
     "signature"
   ],
   "devDependencies": {
-    "ts-node": "^10.8.1"
-  },
-  "dependencies": {}
+    "@imagemagick/magick-wasm": "^0.0.28",
+    "@types/content-type": "^1.1.8",
+    "@vitest/browser": "^1.2.2",
+    "@vitest/coverage-istanbul": "^1.3.0",
+    "playwright": "^1.41.2",
+    "raw-body": "^2.5.2",
+    "ts-node": "^10.8.1",
+    "vitest": "^1.2.2"
+  }
 }

packages/image-shrink/src/test/helpers/getImageAttributes.ts

@@ -0,0 +1,12 @@
+import { readMagickImage } from './readMagickImage'
+
+export const getImageAttributes = async (inputBlob: Blob) => {
+  return readMagickImage(inputBlob, (image) => {
+    return image.attributeNames.reduce((acc, name) => {
+      return {
+        ...acc,
+        [name]: image.getAttribute(name)
+      }
+    }, {})
+  })
+}

packages/image-shrink/src/test/helpers/loadImageAsBlob.ts

@@ -0,0 +1,10 @@
+export const loadImageAsBlob = async (
+  moduleResolver: () => Promise<{ default: string }>
+) => {
+  const imageUrl = await moduleResolver().then((module) => module.default)
+  const response = await fetch(imageUrl)
+  const buffer = await response.arrayBuffer()
+  return new Blob([buffer], {
+    type: response.headers.get('content-type') ?? 'application/octet-stream'
+  })
+}

packages/image-shrink/src/test/helpers/loadImageMagick.ts

@@ -0,0 +1,17 @@
+/// <reference types="vite/client" />
+import {
+  ImageMagick,
+  Magick,
+  MagickFormat,
+  Quantum,
+  initializeImageMagick
+} from '@imagemagick/magick-wasm'
+// eslint-disable-next-line import/no-unresolved
+import wasmUrl from '@imagemagick/magick-wasm/magick.wasm?url'
+
+export const loadImageMagick = async () => {
+  const wasmBytes = await fetch(wasmUrl).then((res) => res.arrayBuffer())
+  await initializeImageMagick(wasmBytes)
+
+  return { Magick, MagickFormat, Quantum, ImageMagick }
+}

packages/image-shrink/src/test/helpers/readMagickImage.ts

@@ -0,0 +1,15 @@
+import { loadImageMagick } from './loadImageMagick'
+import { type IMagickImage } from '@imagemagick/magick-wasm'
+
+export const readMagickImage = async <T>(
+  inputBlob: Blob,
+  func: (image: IMagickImage) => T
+): Promise<T> => {
+  const { ImageMagick } = await loadImageMagick()
+  const blobArray = new Uint8Array(await inputBlob.arrayBuffer())
+  return new Promise<T>((resolve) => {
+    ImageMagick.read(blobArray, (image) => {
+      resolve(func(image))
+    })
+  })
+}

packages/image-shrink/src/test/helpers/uploadImage.ts

@@ -0,0 +1,13 @@
+import { TaskContext } from 'vitest'
+
+export const uploadImage = (blob: Blob, variant: string, ctx?: TaskContext) => {
+  const ext = blob.type.replace('image/', '')
+  let filename = `${variant}.${ext}`
+  if (ctx) {
+    filename = `${ctx.task.suite.name}__${ctx.task.name}__${variant}.${ext}`
+  }
+  return fetch(`/upload-image?filename=${filename}`, {
+    method: 'POST',
+    body: blob
+  })
+}

packages/image-shrink/src/utils/IccProfile/getIccProfile.ts

@@ -4,21 +4,20 @@ export const getIccProfile = async (blob: Blob) => {
   const iccProfile: DataView[] = []
   const { promiseReadJpegChunks, stack } = readJpegChunks()
 
-  return await promiseReadJpegChunks(blob)
-    .then(() => {
-      stack.forEach(({ marker, view }) => {
-        if (marker === 0xe2) {
-          if (
-            // check for "ICC_PROFILE\0"
-            view.getUint32(0) === 0x4943435f &&
-            view.getUint32(4) === 0x50524f46 &&
-            view.getUint32(8) === 0x494c4500
-          ) {
-            iccProfile.push(view)
-          }
-        }
-      })
-      return iccProfile
-    })
-    .catch(() => iccProfile)
+  await promiseReadJpegChunks(blob)
+
+  stack.forEach(({ marker, view }) => {
+    if (marker === 0xe2) {
+      if (
+        // check for "ICC_PROFILE\0"
+        view.getUint32(0) === 0x4943435f &&
+        view.getUint32(4) === 0x50524f46 &&
+        view.getUint32(8) === 0x494c4500
+      ) {
+        iccProfile.push(view)
+      }
+    }
+  })
+
+  return iccProfile
 }

packages/image-shrink/src/utils/exif/getExif.ts

@@ -4,23 +4,23 @@ export const getExif = async (blob: Blob) => {
   let exif: DataView | null = null
 
   const { promiseReadJpegChunks, stack } = readJpegChunks()
-  return promiseReadJpegChunks(blob)
-    .then(() => {
-      stack.forEach(({ marker, view }) => {
-        if (!exif && marker === 0xe1) {
-          if (view.byteLength >= 14) {
-            if (
-              // check for "Exif\0"
-              view.getUint32(0) === 0x45786966 &&
-              view.getUint16(4) === 0
-            ) {
-              exif = view
-              return
-            }
-          }
+
+  await promiseReadJpegChunks(blob)
+
+  stack.forEach(({ marker, view }) => {
+    if (!exif && marker === 0xe1) {
+      if (view.byteLength >= 14) {
+        if (
+          // check for "Exif\0"
+          view.getUint32(0) === 0x45786966 &&
+          view.getUint16(4) === 0
+        ) {
+          exif = view
+          return
         }
-      })
-      return exif
-    })
-    .catch(() => exif)
+      }
+    }
+  })
+
+  return exif
 }

packages/image-shrink/src/utils/image/JPEG/readJpegChunks.ts

@@ -5,6 +5,7 @@ type TChunk = {
   view: DataView
 }
 
+// TODO: unwrap promises
 export const readJpegChunks = () => {
   const stack: TChunk[] = []
   const promiseReadJpegChunks = (blob: Blob) =>
@@ -37,7 +38,6 @@ export const readJpegChunks = () => {
               break
             }
           }
-
           readNextChunk()
         })
 
@@ -50,7 +50,7 @@ export const readJpegChunks = () => {
             return
           }
 
-          const marker = view?.getUint8(1)
+          const marker = view.getUint8(1)
 
           if (marker === 0xda) {
             resolve(true)

packages/image-shrink/src/utils/image/JPEG/replaceJpegChunk.ts

@@ -1,52 +1,47 @@
 import { readJpegChunks } from './readJpegChunks'
 
-export const replaceJpegChunk = (
+export const replaceJpegChunk = async (
   blob: Blob,
   marker: number,
   chunks: ArrayBuffer[]
 ) => {
-  return new Promise<Blob>((resolve, reject) => {
+  {
     const oldChunkPos: number[] = []
     const oldChunkLength: number[] = []
 
     const { promiseReadJpegChunks, stack } = readJpegChunks()
 
-    return promiseReadJpegChunks(blob)
-      .then(() => {
-        stack.forEach((chunk) => {
-          if (chunk.marker === marker) {
-            oldChunkPos.push(chunk.startPos)
-            return oldChunkLength.push(chunk.length)
-          }
-        })
-      })
-      .then(() => {
-        const newChunks: (ArrayBuffer | Blob)[] = [blob.slice(0, 2)]
-
-        for (const chunk of chunks) {
-          const intro = new DataView(new ArrayBuffer(4))
-          intro.setUint16(0, 0xff00 + marker)
-          intro.setUint16(2, chunk.byteLength + 2)
-          newChunks.push(intro.buffer)
-          newChunks.push(chunk)
-        }
-
-        let pos = 2
-        for (let i = 0; i < oldChunkPos.length; i++) {
-          if (oldChunkPos[i] > pos) {
-            newChunks.push(blob.slice(pos, oldChunkPos[i]))
-          }
-          pos = oldChunkPos[i] + oldChunkLength[i] + 4
-        }
-
-        newChunks.push(blob.slice(pos, blob.size))
-
-        resolve(
-          new Blob(newChunks, {
-            type: blob.type
-          })
-        )
-      })
-      .catch(() => reject(blob))
-  }).catch(() => blob)
+    await promiseReadJpegChunks(blob)
+
+    stack.forEach((chunk) => {
+      if (chunk.marker === marker) {
+        oldChunkPos.push(chunk.startPos)
+        return oldChunkLength.push(chunk.length)
+      }
+    })
+
+    const newChunks: (ArrayBuffer | Blob)[] = [blob.slice(0, 2)]
+
+    for (const chunk of chunks) {
+      const intro = new DataView(new ArrayBuffer(4))
+      intro.setUint16(0, 0xff00 + marker)
+      intro.setUint16(2, chunk.byteLength + 2)
+      newChunks.push(intro.buffer)
+      newChunks.push(chunk)
+    }
+
+    let pos = 2
+    for (let i = 0; i < oldChunkPos.length; i++) {
+      if (oldChunkPos[i] > pos) {
+        newChunks.push(blob.slice(pos, oldChunkPos[i]))
+      }
+      pos = oldChunkPos[i] + oldChunkLength[i] + 4
+    }
+
+    newChunks.push(blob.slice(pos, blob.size))
+
+    return new Blob(newChunks, {
+      type: blob.type
+    })
+  }
 }

packages/image-shrink/src/utils/image/imageLoader.ts

@@ -14,7 +14,7 @@ export const processImage = (
         resolve(image)
       })
       image.addEventListener('error', () => {
-        reject(image)
+        reject(new Error('Failed to load image. Probably not an image.'))
       })
     }
   })