Add imagetools tests

Author: zerodevx

playwright.config.js

@@ -1,8 +1,13 @@
+import detect from 'is-port-reachable'
+
+const reuseExistingServer = await detect(5173, { host: 'localhost' })
+
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
   webServer: {
-    command: 'npm run build && npm run preview',
-    port: 4173
+    command: 'npm run dev',
+    port: 5173,
+    reuseExistingServer
   },
   testDir: 'tests'
 }

src/routes/test/+page.js

@@ -0,0 +1 @@
+export const prerender = false

src/routes/test/+page.svelte

@@ -0,0 +1,32 @@
+<script>
+import testBasic from '../cat01.jpg?run'
+import testNoLqip from '../cat01.jpg?lqip=0&run'
+import testWidthOverride from '../cat01.jpg?width=480;1024&run'
+
+const s = (obj = {}) => JSON.stringify(obj)
+
+const tests = [
+  { id: 'basic', name: 'default variants are generated', view: s(testBasic) },
+  { id: 'nolqip', name: 'no lqip', view: s(testNoLqip) },
+  { id: 'width', name: 'width override', view: s(testWidthOverride) }
+]
+</script>
+
+<svelte:head>
+  <meta name="robots" content="noindex" />
+</svelte:head>
+
+<div class="prose container mx-auto">
+  <h1>Tests</h1>
+  <section>
+    <h2>Imagetools</h2>
+    <ol>
+      {#each tests as { id, name, view }}
+        <li>
+          {name}
+          <pre><code data-testid={id} class="whitespace-normal">{@html view}</code></pre>
+        </li>
+      {/each}
+    </ol>
+  </section>
+</div>

tests/test.js

@@ -1,6 +1,30 @@
 import { expect, test } from '@playwright/test'
 
-test('index page has expected h1', async ({ page }) => {
-  await page.goto('/')
-  expect(await page.textContent('h1')).toBe('Welcome to SvelteKit')
+test('default variants are generated', async ({ page }) => {
+  await page.goto('/test')
+  const data = JSON.parse((await page.getByTestId('basic').textContent()) || '')
+  expect(data.length).toBe(10)
+  expect(data.filter((i) => i.format === 'jpg').length).toBe(3)
+  expect(data.filter((i) => i.format === 'avif').length).toBe(3)
+  expect(data.filter((i) => i.format === 'webp').length).toBe(4)
+  expect(data.filter((i) => i.width === 480).length).toBe(3)
+  expect(data.filter((i) => i.width === 1024).length).toBe(3)
+  expect(data.filter((i) => i.width === 1920).length).toBe(3)
+  const { base64 } = data.find((i) => i.format === 'webp' && i.width === 16)
+  expect(base64).toContain('data:image/webp;base64')
+})
+
+test('no lqip', async ({ page }) => {
+  await page.goto('/test')
+  const data = JSON.parse((await page.getByTestId('nolqip').textContent()) || '')
+  expect(data.length).toBe(9)
+  expect(data.find((/** @type {{ base64: any; }} */ i) => i.base64)).toBe(undefined)
+})
+
+test('width override', async ({ page }) => {
+  await page.goto('/test')
+  const data = JSON.parse((await page.getByTestId('width').textContent()) || '')
+  expect(data.length).toBe(7)
+  expect(data.filter((i) => i.width === 480).length).toBe(3)
+  expect(data.filter((i) => i.width === 1024).length).toBe(3)
 })