chore: add integration tests for enhanced-img

benmccann · benmccann · commit 267b0dd66e49 · 2025-10-28T06:10:40.000-07:00
diff --git a/packages/adapter-static/test/apps/spa/package.json b/packages/adapter-static/test/apps/spa/package.json
@@ -9,7 +9,6 @@
 		"test": "playwright test"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-node": "workspace:^",
 		"@sveltejs/kit": "workspace:^",
 		"@sveltejs/vite-plugin-svelte": "catalog:",
 		"sirv-cli": "catalog:",
diff --git a/packages/enhanced-img/package.json b/packages/enhanced-img/package.json
@@ -24,7 +24,9 @@
 		"lint": "prettier --check .",
 		"check": "tsc",
 		"format": "prettier --write .",
-		"test": "vitest run"
+		"test": "pnpm test:unit && pnpm test:integration",
+		"test:unit": "vitest run",
+		"test:integration": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test"
 	},
 	"files": [
 		"src",
diff --git a/packages/enhanced-img/test/apps/basics/.gitignore b/packages/enhanced-img/test/apps/basics/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+/.svelte-kit
+/build
+/functions
diff --git a/packages/enhanced-img/test/apps/basics/.npmrc b/packages/enhanced-img/test/apps/basics/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/packages/enhanced-img/test/apps/basics/jsconfig.json b/packages/enhanced-img/test/apps/basics/jsconfig.json
@@ -0,0 +1,4 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/packages/enhanced-img/test/apps/basics/package.json b/packages/enhanced-img/test/apps/basics/package.json
@@ -0,0 +1,19 @@
+{
+	"name": "enhanced-img-basics",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"test": "playwright test"
+	},
+	"devDependencies": {
+		"@sveltejs/enhanced-img": "workspace:^",
+		"@sveltejs/kit": "workspace:^",
+		"@sveltejs/vite-plugin-svelte": "catalog:",
+		"svelte": "catalog:",
+		"vite": "catalog:"
+	},
+	"type": "module"
+}
diff --git a/packages/enhanced-img/test/apps/basics/playwright.config.js b/packages/enhanced-img/test/apps/basics/playwright.config.js
@@ -0,0 +1 @@
+export { config as default } from '../../utils.js';
diff --git a/packages/enhanced-img/test/apps/basics/src/app.html b/packages/enhanced-img/test/apps/basics/src/app.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div>%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/packages/enhanced-img/test/apps/basics/src/routes/+error.svelte b/packages/enhanced-img/test/apps/basics/src/routes/+error.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { page } from '$app/state';
+</script>
+
+<h1>{page.status}</h1>
diff --git a/packages/enhanced-img/test/apps/basics/src/routes/+layout.svelte b/packages/enhanced-img/test/apps/basics/src/routes/+layout.svelte
@@ -0,0 +1,6 @@
+<script>
+	/** @type {{children?: import('svelte').Snippet}} */
+	let { children } = $props();
+</script>
+
+{@render children?.()}
diff --git a/packages/enhanced-img/test/apps/basics/src/routes/+page.svelte b/packages/enhanced-img/test/apps/basics/src/routes/+page.svelte
@@ -0,0 +1,8 @@
+<script>
+  import logo from './logo.png';
+</script>
+
+<enhanced:img id="birds" src="./birds.jpg" alt="birds" />
+<!--
+<enhanced:img id="logo" src={logo} alt="Svelte logo" />
+-->
diff --git a/packages/enhanced-img/test/apps/basics/src/routes/birds.jpg b/packages/enhanced-img/test/apps/basics/src/routes/birds.jpg
diff --git a/packages/enhanced-img/test/apps/basics/src/routes/logo.png b/packages/enhanced-img/test/apps/basics/src/routes/logo.png
diff --git a/packages/enhanced-img/test/apps/basics/svelte.config.js b/packages/enhanced-img/test/apps/basics/svelte.config.js
@@ -0,0 +1,7 @@
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+	}
+};
+
+export default config;
diff --git a/packages/enhanced-img/test/apps/basics/test/test.js b/packages/enhanced-img/test/apps/basics/test/test.js
@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test';
+
+test('images are properly rendered', async ({ page }) => {
+	await page.goto('/');
+
+	const birdsImg = page.locator('#birds');
+	await expect(birdsImg).toBeVisible();
+	await expect(birdsImg).toHaveAttribute('alt', 'birds');
+
+//	const logoImg = page.locator('#logo');
+//	await expect(logoImg).toBeVisible();
+//	await expect(logoImg).toHaveAttribute('alt', 'Svelte logo');
+});
diff --git a/packages/enhanced-img/test/apps/basics/vite.config.js b/packages/enhanced-img/test/apps/basics/vite.config.js
@@ -0,0 +1,18 @@
+import * as path from 'node:path';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { enhancedImages } from '../../../src/index.js';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	build: {
+		minify: false
+	},
+	plugins: [enhancedImages(), sveltekit()],
+	server: {
+		fs: {
+			allow: [path.resolve('../../../../kit/src')]
+		}
+	}
+};
+
+export default config;
diff --git a/packages/enhanced-img/test/utils.js b/packages/enhanced-img/test/utils.js
@@ -0,0 +1,28 @@
+import { devices } from '@playwright/test';
+import process from 'node:process';
+
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+export const config = {
+	forbidOnly: !!process.env.CI,
+	// generous timeouts on CI
+	timeout: process.env.CI ? 45000 : 15000,
+	webServer: {
+		command: 'pnpm build && pnpm preview',
+		port: 4173
+	},
+	retries: process.env.CI ? 2 : 0,
+	projects: [
+		{
+			name: 'chromium'
+		}
+	],
+	use: {
+		...devices['Desktop Chrome'],
+		screenshot: 'only-on-failure',
+		trace: 'retain-on-failure'
+	},
+	workers: process.env.CI ? 2 : undefined,
+	reporter: 'list',
+	testDir: 'test',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -3,6 +3,7 @@ packages:
   - packages/adapter-cloudflare/test/apps/*
   - packages/adapter-netlify/test/apps/*
   - packages/adapter-static/test/apps/*
+  - packages/enhanced-img/test/apps/*
   - packages/kit/test/apps/*
   - packages/kit/test/prerendering/*
   - packages/kit/test/build-errors/**

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +	"extends": "./.svelte-kit/tsconfig.json",
 +	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { config as default } from '../../utils.js';`