Update tests

playwright.config.js

@@ -1,15 +1,12 @@
-import detect from 'is-port-reachable'
-
-const reuseExistingServer = await detect(5173, { host: 'localhost' })
-
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
+  testDir: 'tests',
+  testMatch: '**/*.js',
   webServer: {
     command: 'npm run dev',
     port: 5173,
-    reuseExistingServer
-  },
-  testDir: 'tests'
+    reuseExistingServer: true
+  }
 }
 
 export default config

tests/test.js

@@ -1,36 +1,36 @@
 import { expect, test } from '@playwright/test'
 
-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('basic - variants are generated', async ({ page }) => {
+  await page.goto('/')
+  const sources = page.locator('.test-basic picture source')
+  await expect(sources).toHaveCount(3)
+  const img = page.locator('.test-basic img')
+  expect(await img.getAttribute('style')).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('dominant colour lqip', async ({ page }) => {
+  await page.goto('/')
+  const img = page.locator('.test-1px')
+  expect(await img.getAttribute('style')).toContain('rgb(')
 })
 
-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)
+test('single image does not render picture', async ({ page }) => {
+  await page.goto('/')
+  expect(await page.locator('.test-single picture').count()).toBe(0)
 })
 
-test('returns a path by default', async ({ page }) => {
-  await page.goto('/test')
-  const data = JSON.parse((await page.getByTestId('default').textContent()) || '')
-  expect(data).toBe(`/src/routes/cat01.jpg`)
+test('lqip can be disabled', async ({ page }) => {
+  await page.goto('/')
+  expect(await page.locator('.test-single img').getAttribute('style')).toBeNull
 })
+
+test('falls back to standard imagetools without run directive', async ({ page }) => {
+  await page.goto('/')
+  expect(await page.locator('.test-fallback').innerText()).toContain('@imagetools')
+})
+
+/*
+test('', async ({ page }) => {
+  await page.goto('/')
+})
+*/