feat(DRAFT): reintroduce adder tests

.gitignore

@@ -7,3 +7,5 @@ yarn.lock
 vite.config.js.timestamp-*
 /packages/create-svelte/template/CHANGELOG.md
 .test-tmp
+.outputs-e2e
+.outputs-snapshots

.prettierignore

@@ -1,2 +1,3 @@
 packages/core/tests/**/input.*
 packages/core/tests/**/output.*
+packages/adder-tests/_snapshots

community-adder-template/package.json

@@ -13,13 +13,17 @@
 	],
 	"scripts": {
 		"start": "sv add -C temp --community file:../",
-		"create-temp": "sv create temp --check-types typescript --template skeleton --no-adders --no-install"
+		"create-temp": "sv create temp --check-types typescript --template skeleton --no-adders --no-install",
+		"dev:test": "vitest",
+		"test": "vitest run"
 	},
 	"dependencies": {
 		"@sveltejs/cli-core": "workspace:*"
 	},
 	"devDependencies": {
-		"sv": "workspace:*"
+		"@sveltejs/adder-testing-library": "workspace:*",
+		"sv": "workspace:*",
+		"vitest": "^2.1.2"
 	},
 	"files": [
 		"src",

community-adder-template/src/index.js

@@ -3,14 +3,14 @@ import { imports } from '@sveltejs/cli-core/js';
 import { parseScript } from '@sveltejs/cli-core/parsers';
 
 export const options = defineAdderOptions({
-    demo: {
-        question: 'Do you want to use a demo?',
-        type: 'boolean',
-        default: false
-    }
+	demo: {
+		question: 'Do you want to use a demo?',
+		type: 'boolean',
+		default: false
+	}
 });
 
-export const adder = defineAdder({
+export default defineAdder({
 	id: 'community-adder-template',
 	environments: { kit: true, svelte: true },
 	options,

community-adder-template/tests/end2end.js

@@ -0,0 +1,13 @@
+import { test, describe, beforeAll, afterAll } from 'vitest';
+import { runEndToEndTests } from '@sveltejs/adder-testing-library';
+import adder from '../src/index.js';
+import { tests } from './tests.js';
+
+runEndToEndTests(
+	'.outputs-e2e',
+	[{ config: adder, tests }],
+	describe,
+	test.concurrent,
+	beforeAll,
+	afterAll
+);

community-adder-template/tests/snapshot.js

@@ -0,0 +1,14 @@
+import { test, describe, beforeAll, afterAll } from 'vitest';
+import { runSnapshotTests } from '@sveltejs/adder-testing-library';
+import adder from '../src/index.js';
+import { tests } from './tests.js';
+
+runSnapshotTests(
+	'.outputs-snapshots',
+	'_snapshot',
+	[{ config: adder, tests }],
+	describe,
+	test.concurrent,
+	beforeAll,
+	afterAll
+);

community-adder-template/tests/tests.js

@@ -2,9 +2,20 @@ import { defineAdderTests } from '@sveltejs/cli-core';
 import { options } from '../src/index.js';
 
 export const tests = defineAdderTests({
-	files: [],
 	options,
 	optionValues: [{ demo: true }],
+	files: [
+		{
+			name: ({ kit }) => `${kit?.routesDirectory}/+page.svelte`,
+			condition: ({ kit }) => Boolean(kit),
+			content: () => '<div class="test"></div>'
+		},
+		{
+			name: () => 'src/App.svelte',
+			condition: ({ kit }) => !kit,
+			content: () => '<div class="test"></div>'
+		}
+	],
 	tests: [
 		{
 			name: 'demo test',

community-adder-template/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig, type UserConfig } from 'vitest/config';
+
+export default defineConfig({
+	test: {
+		include: ['./tests/**/*.js'],
+		exclude: ['./tests/tests.js'],
+		testTimeout: 1000 * 60 * 2, // 2 minutes
+		hookTimeout: 1000 * 60 * 3, // 3 minutes
+		pool: 'threads'
+	}
+}) as UserConfig;

eslint.config.js

@@ -31,6 +31,8 @@ export default [
 			'.test-tmp/**/*',
 			'**/dist/*',
 			'packages/**/tests/**/{output,input}.ts',
+			'packages/**/.outputs-*/**/*',
+			'packages/**/_snapshots/**/*',
 			'rollup.config.js'
 		]
 	}

package.json

@@ -1,17 +1,20 @@
 {
 	"name": "sv-monorepo",
-	"version": "0.0.1",
-	"description": "monorepo for sv and friends",
 	"private": true,
+	"version": "0.0.1",
 	"type": "module",
+	"description": "monorepo for sv and friends",
+	"engines": {
+		"pnpm": "^9.0.0"
+	},
 	"scripts": {
+		"build": "rollup -c",
+		"changeset:publish": "changeset publish",
 		"check": "pnpm --parallel check",
-		"lint": "pnpm --parallel lint && eslint --cache --cache-location node_modules/.eslintcache",
-		"format": "pnpm --parallel format",
 		"dev": "rollup --config --watch",
-		"build": "rollup -c",
-		"test": "pnpm --parallel test",
-		"changeset:publish": "changeset publish"
+		"format": "pnpm --parallel format",
+		"lint": "pnpm --parallel lint && eslint --cache --cache-location node_modules/.eslintcache",
+		"test": "pnpm --parallel test"
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.27.9",
@@ -23,7 +26,7 @@
 		"@sveltejs/eslint-config": "^8.1.0",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
 		"@types/node": "^22.3.0",
-		"@vitest/ui": "^2.0.5",
+		"@vitest/ui": "^2.1.2",
 		"eslint": "^9.10.0",
 		"magic-string": "^0.30.11",
 		"prettier": "^3.3.3",
@@ -37,10 +40,7 @@
 		"typescript": "^5.6.2",
 		"typescript-eslint": "^8.5.0",
 		"unplugin-isolated-decl": "^0.6.5",
-		"vitest": "^2.0.5"
+		"vitest": "^2.1.2"
 	},
-	"packageManager": "[email protected]",
-	"engines": {
-		"pnpm": "^9.0.0"
-	}
+	"packageManager": "[email protected]"
 }

packages/adder-testing-library/browser.ts

@@ -0,0 +1,27 @@
+import { chromium, type Browser, type Page } from 'playwright';
+
+let browser: Browser;
+const headless = true;
+
+export async function startBrowser(): Promise<void> {
+	browser = await chromium.launch({ headless });
+	console.log('browser started');
+}
+
+export async function openPage(url: string): Promise<Page> {
+	const page = await browser.newPage();
+
+	await page.goto(url, { timeout: 60_000 });
+	await page.waitForLoadState('networkidle');
+
+	// always use light mode. Otherwise the tests might depend on the OS setting
+	// of each developer and thus leads to inconsistent test results.
+	await page.emulateMedia({ colorScheme: 'light' });
+
+	return page;
+}
+
+export async function stopBrowser(): Promise<void> {
+	if (!browser) return;
+	await browser.close();
+}

packages/adder-testing-library/index.ts

@@ -0,0 +1,168 @@
+import type { AdderTestConfig, AdderWithoutExplicitArgs, TestType } from '@sveltejs/cli-core';
+import path from 'node:path';
+import fs from 'node:fs';
+import process from 'node:process';
+import { openPage, stopBrowser } from './browser.ts';
+import {
+	generateTestCases,
+	prepareEndToEndTests,
+	prepareSnapshotTests,
+	runAdder,
+	startDevServer,
+	stopDevServer,
+	type TestCase
+} from './utils.ts';
+import { startTests } from './tests.ts';
+
+const templatesDirectoryName = 'templates';
+const addersDirectoryName = 'adders';
+
+export type AdderWithTests = {
+	config: AdderWithoutExplicitArgs;
+	tests: AdderTestConfig<Record<string, any>>;
+};
+
+export function runEndToEndTests(
+	outputDirectory: string,
+	adders: AdderWithTests[],
+	describe: (name: string, testFactory: () => void) => void,
+	test: (name: string, testFunction: (args: TestArguments) => Promise<void> | void) => void,
+	beforeAll: (fn: () => void) => void,
+	afterAll: (fn: () => void) => void
+): void {
+	const outputPath = path.join(process.cwd(), outputDirectory);
+	const templatesPath = path.join(outputPath, templatesDirectoryName);
+	const addersOutputPath = path.join(outputPath, addersDirectoryName);
+	const testCases = generateTestCases(adders, addersOutputPath, { ignoreEmptyTests: true });
+
+	runTests(adders, testCases, 'end2end', {
+		describe,
+		test,
+		beforeAll,
+		afterAll,
+		prepare: async () => {
+			await prepareEndToEndTests(outputPath, templatesPath, addersOutputPath, adders, testCases);
+		},
+		run: async (testCase, adder) => {
+			const cmd = adder.tests!.command ?? 'dev';
+			const { url, devServer } = await startDevServer(testCase.cwd, cmd);
+			const page = await openPage(url);
+
+			try {
+				const errorOcurred = await page.$('vite-error-overlay');
+				if (errorOcurred)
+					throw new Error('Dev server failed to start correctly. Vite errors present');
+
+				await startTests(page, adder, testCase.options);
+			} finally {
+				await page.close();
+				await stopDevServer(devServer);
+			}
+		},
+		tearDown: async () => {
+			await stopBrowser();
+		}
+	});
+}
+
+type TestArguments = {
+	expect: (content: string) => {
+		toMatchFileSnapshot: (filePath: string, message?: string) => void;
+	};
+};
+
+export function runSnapshotTests(
+	outputDirectory: string,
+	snapshotDirectory: string,
+	adders: AdderWithTests[],
+	describe: (name: string, testFactory: () => void) => void,
+	test: (name: string, testFunction: (args: TestArguments) => Promise<void> | void) => void,
+	beforeAll: (fn: () => void) => void,
+	afterAll: (fn: () => void) => void
+): void {
+	const outputPath = path.join(process.cwd(), outputDirectory);
+	const templatesPath = path.join(outputPath, templatesDirectoryName);
+	const addersOutputPath = path.join(outputPath, addersDirectoryName);
+	const testCases = generateTestCases(adders, addersOutputPath, { ignoreEmptyTests: false });
+
+	runTests(adders, testCases, 'snapshot', {
+		describe,
+		test,
+		beforeAll,
+		afterAll,
+		prepare: async () => {
+			await prepareSnapshotTests(outputPath, templatesPath, addersOutputPath, testCases);
+		},
+		run: (testCase, _, { expect }) => {
+			const filesToFormat = runAdder(testCase.adder, testCase.cwd, testCase.options, adders);
+
+			for (const changedFile of filesToFormat) {
+				const fullFilePath = path.join(testCase.cwd, changedFile);
+				const content = fs.readFileSync(fullFilePath).toString();
+
+				const relativeTestCasePath = testCase.cwd.replace(addersOutputPath, '');
+				const snapshotPath = path.join(
+					process.cwd(),
+					snapshotDirectory,
+					relativeTestCasePath,
+					changedFile
+				);
+
+				expect(content).toMatchFileSnapshot(snapshotPath, changedFile);
+			}
+		},
+		tearDown: async () => {}
+	});
+}
+
+function runTests(
+	adders: AdderWithTests[],
+	testCases: Map<string, TestCase[]>,
+	testType: TestType,
+	options: {
+		describe: (name: string, testFactory: () => void) => void;
+		test: (name: string, testFunction: (args: TestArguments) => Promise<void> | void) => void;
+		beforeAll: (fn: () => void) => void;
+		afterAll: (fn: () => void) => void;
+		prepare: () => Promise<void>;
+		run: (testCase: TestCase, adder: AdderWithTests, args: TestArguments) => Promise<void> | void;
+		tearDown: () => Promise<void>;
+	}
+) {
+	options.beforeAll(async () => {
+		await options.prepare();
+	});
+
+	for (const [adderId, adderTestCases] of testCases) {
+		options.describe(adderId, () => {
+			const adder = adders.find((x) => x.config.id == adderId)!;
+			if (!adder) throw new Error('failed to find ' + adderId);
+			const adderTestDetails = adder.tests!;
+			options.beforeAll(async () => {
+				if (adderTestDetails.beforeAll) await adderTestDetails.beforeAll(testType);
+			});
+
+			for (const testCase of adderTestCases) {
+				options.test(testCase.testName, async (testArgs) => {
+					if (!adder.tests) return;
+
+					if (adder.tests.beforeEach) await adder.tests.beforeEach(testCase.cwd, testType);
+
+					try {
+						await options.run(testCase, adder, testArgs);
+					} finally {
+						if (adder.tests.afterEach) await adder.tests.afterEach(testCase.cwd, testType);
+					}
+				});
+			}
+
+			options.afterAll(async () => {
+				if (adderTestDetails.afterAll) await adderTestDetails.afterAll(testType);
+			});
+		});
+	}
+
+	options.afterAll(async () => {
+		await options.tearDown();
+	});
+}

packages/adder-testing-library/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "@sveltejs/adder-testing-library",
+	"private": true,
+	"version": "1.0.0",
+	"type": "module",
+	"scripts": {
+		"check": "tsc",
+		"format": "pnpm lint --write",
+		"postinstall": "pnpm exec playwright install chromium",
+		"lint": "prettier --check . --config ../../.prettierrc --ignore-path ../../.gitignore --ignore-path .gitignore --ignore-path ../../.prettierignore"
+	},
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		}
+	},
+	"dependencies": {
+		"@sveltejs/cli-core": "workspace:*",
+		"playwright": "^1.44.1",
+		"sv": "workspace:*",
+		"terminate": "^2.8.0",
+		"tiged": "3.0.0-rc.0"
+	}
+}