chore: snapshots

packages/image-shrink/.gitignore

@@ -1 +1,2 @@
 LICENSE
+src/test/snapshots

packages/image-shrink/package.json

@@ -20,6 +20,7 @@
     "prepack": "cp ../../LICENSE ./LICENSE",
     "clean": "rimraf dist",
     "test": "npx playwright install-deps chromium && vitest --run",
+    "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",
@@ -44,8 +45,10 @@
   ],
   "devDependencies": {
     "@imagemagick/magick-wasm": "^0.0.28",
+    "@types/content-type": "^1.1.8",
     "@vitest/browser": "^1.2.2",
     "playwright": "^1.41.2",
+    "raw-body": "^2.5.2",
     "ts-node": "^10.8.1",
     "vitest": "^1.2.2"
   }

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/shrinkFile.test.ts

@@ -1,28 +1,35 @@
 /// <reference types="vite/client" />
 import { describe, expect, it } from 'vitest'
 import { getImageAttributes } from '../test/helpers/getImageAttributes'
-import { readMagickImage } from '../test/helpers/readMagickImage'
 import { loadImageAsBlob } from '../test/helpers/loadImageAsBlob'
+import { readMagickImage } from '../test/helpers/readMagickImage'
+import { uploadImage } from '../test/helpers/uploadImage'
 import { shrinkFile } from './shrinkFile'
-import { type IMagickImage } from '@imagemagick/magick-wasm'
 
 describe('shrinkFile', () => {
-  it('should shrink the image', async () => {
+  it('should shrink the image', async (ctx) => {
     const originalFile = await loadImageAsBlob(
       () => import('../test/samples/2000x2000.jpeg')
     )
     const shrinkedBlob = await shrinkFile(originalFile, {
-      size: 100
+      size: 500 * 500,
+      quality: 0.1
     })
+
+    await Promise.all([
+      uploadImage(originalFile, 'original', ctx),
+      uploadImage(shrinkedBlob, 'shrinked', ctx)
+    ])
+
     expect(shrinkedBlob.size).toBeLessThan(originalFile.size)
-    expect(shrinkedBlob.size).toBeLessThan(1000)
+    expect(shrinkedBlob.size).toBeLessThan(5000)
 
     const { width, height } = await readMagickImage(shrinkedBlob, (image) => ({
       width: image.width,
       height: image.height
     }))
-    expect(width).toBe(10)
-    expect(height).toBe(10)
+    expect(width).toBe(500)
+    expect(height).toBe(500)
   })
 
   it("should skip shrink if it's not required", async () => {
@@ -35,14 +42,19 @@ describe('shrinkFile', () => {
     expect(promise).rejects.toThrowError('Not required')
   })
 
-  it('should keep transparent PNG as PNG', async () => {
+  it('should keep transparent PNG as PNG', async (ctx) => {
     const originalFile = await loadImageAsBlob(
       () => import('../test/samples/transparent.png')
     )
     const shrinkedBlob = await shrinkFile(originalFile, {
-      size: 100
+      size: 100 * 100
     })
 
+    await Promise.all([
+      uploadImage(originalFile, 'original', ctx),
+      uploadImage(shrinkedBlob, 'shrinked', ctx)
+    ])
+
     const { hasAlpha, format } = await readMagickImage(
       shrinkedBlob,
       (image) => ({
@@ -54,14 +66,19 @@ describe('shrinkFile', () => {
     expect(format).toBe('PNG')
   })
 
-  it('should convert non-transparent PNG to JPEG', async () => {
+  it('should convert non-transparent PNG to JPEG', async (ctx) => {
     const originalFile = await loadImageAsBlob(
       () => import('../test/samples/not-transparent.png')
     )
     const shrinkedBlob = await shrinkFile(originalFile, {
-      size: 100
+      size: 100 * 100
     })
 
+    await Promise.all([
+      uploadImage(originalFile, 'original', ctx),
+      uploadImage(shrinkedBlob, 'shrinked', ctx)
+    ])
+
     const { hasAlpha, format } = await readMagickImage(
       shrinkedBlob,
       (image) => ({
@@ -73,13 +90,19 @@ describe('shrinkFile', () => {
     expect(format).toBe('JPEG')
   })
 
-  it('should keep EXIF', async () => {
+  it('should keep EXIF', async (ctx) => {
     const originalFile = await loadImageAsBlob(
       () => import('../test/samples/exif-without-orientation.jpg')
     )
     const shrinkedBlob = await shrinkFile(originalFile, {
-      size: 2
+      size: 50 * 50
     })
+
+    await Promise.all([
+      uploadImage(originalFile, 'original', ctx),
+      uploadImage(shrinkedBlob, 'shrinked', ctx)
+    ])
+
     const filterExifAttributes = (attrs: Record<string, string>) =>
       Object.fromEntries(
         Object.entries(attrs).filter(([key]) => key.startsWith('exif:'))
@@ -92,14 +115,19 @@ describe('shrinkFile', () => {
     expect(originalExif).toEqual(shrinkedExif)
   })
 
-  it('should keep ICC', async () => {
+  it('should keep ICC', async (ctx) => {
     const originalFile = await loadImageAsBlob(
       () => import('../test/samples/with-icc-profile.jpg')
     )
     const shrinkedBlob = await shrinkFile(originalFile, {
-      size: 2
+      size: 100 * 100
     })
 
+    await Promise.all([
+      uploadImage(originalFile, 'original', ctx),
+      uploadImage(shrinkedBlob, 'shrinked', ctx)
+    ])
+
     const filterIccAttributes = (attrs: Record<string, string>) =>
       Object.fromEntries(
         Object.entries(attrs).filter(([key]) => key.startsWith('icc:'))
@@ -111,28 +139,4 @@ describe('shrinkFile', () => {
 
     expect(originalIccAttributes).toEqual(shrinkedIccAttributes)
   })
-
-  it.skip('should not apply existing ICC when shrinking image', async () => {
-    const originalFile = await loadImageAsBlob(
-      () => import('../test/samples/icc-strip-test.jpg')
-    )
-    const shrinkedBlob = await shrinkFile(originalFile, {
-      size: 300 * 300,
-      quality: 1
-    })
-
-    const readTopLeftPixel = (image: IMagickImage) => {
-      return new Promise((resolve) => {
-        image.getPixels((pixelsCollection) => {
-          resolve(pixelsCollection.getPixel(0, 0))
-          pixelsCollection.dispose()
-        })
-      })
-    }
-
-    const originalPixel = await readMagickImage(originalFile, readTopLeftPixel)
-    const shrinkedPixel = await readMagickImage(shrinkedBlob, readTopLeftPixel)
-
-    expect(originalPixel).toEqual(shrinkedPixel)
-  })
 })

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

@@ -1,14 +1,14 @@
-import { shrinkImage } from './shrinkImage'
+import { getIccProfile } from './IccProfile/getIccProfile'
+import { replaceIccProfile } from './IccProfile/replaceIccProfile'
 import { stripIccProfile } from './IccProfile/stripIccProfile'
-import { shouldSkipShrink } from './shouldSkipShrink'
 import { canvasToBlob } from './canvas/canvasToBlob'
 import { hasTransparency } from './canvas/hasTransparency'
-import { isBrowserApplyExifOrientation } from './exif/isBrowserApplyExif'
 import { getExif } from './exif/getExif'
-import { getIccProfile } from './IccProfile/getIccProfile'
+import { isBrowserApplyExifOrientation } from './exif/isBrowserApplyExif'
 import { replaceExif } from './exif/replaceExif'
-import { replaceIccProfile } from './IccProfile/replaceIccProfile'
 import { imageLoader } from './image/imageLoader'
+import { shouldSkipShrink } from './shouldSkipShrink'
+import { shrinkImage } from './shrinkImage'
 
 export type TSetting = {
   size: number
@@ -45,6 +45,7 @@ export const shrinkFile = async (
     const inputBlobWithoutIcc = await stripIccProfile(inputBlob).catch(
       () => inputBlob
     )
+
     const image = await imageLoader(URL.createObjectURL(inputBlobWithoutIcc))
     URL.revokeObjectURL(image.src)
 

packages/image-shrink/vitest.config.ts

@@ -1,8 +1,38 @@
 /// <reference types="vitest" />
-import { defineConfig } from 'vite'
+import { defineConfig, type PluginOption } from 'vite'
+import url from 'url'
+import path from 'path'
+import getRawBody from 'raw-body'
+import { writeFile } from 'fs/promises'
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+
+const uploadPlugin = (): PluginOption => ({
+  name: 'upload-server',
+  configureServer(server) {
+    server.middlewares.use(async (req, res, next) => {
+      if (req.method === 'POST' && req.url?.startsWith('/upload-image')) {
+        const { filename } = url.parse(req.url, true).query as {
+          filename: string
+        }
+        const body = await getRawBody(req)
+        await writeFile(
+          path.resolve(__dirname, './src/test/snapshots/', filename),
+          body
+        )
+        res.statusCode = 200
+        res.end('ok')
+        return
+      }
+      next()
+    })
+  }
+})
 
 export default defineConfig({
+  plugins: [uploadPlugin()],
   test: {
+    testTimeout: 100000,
     browser: {
       enabled: true,
       name: 'chromium',