feat: simple testing library (#275)

Co-authored-by: Manuel Serret <mserret99@gmail.com>

Author: AdrianGonz97

.github/workflows/ci.yml

@@ -39,7 +39,10 @@ jobs:
       - run: pnpm build
       - run: pnpm check
   test:
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macOS-latest]
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -48,5 +51,6 @@ jobs:
           node-version: 18
           cache: pnpm
       - run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install chromium
       - run: pnpm build
       - run: pnpm test

.gitignore

@@ -6,4 +6,4 @@ package-lock.json
 yarn.lock
 vite.config.js.timestamp-*
 /packages/create-svelte/template/CHANGELOG.md
-.test-tmp
+.test-output

.prettierignore

@@ -1,3 +1,4 @@
 node_modules
 temp
 .outputs
+.test-output

community-adder-template/.gitignore

@@ -2,25 +2,28 @@
 	"name": "community-adder-template",
 	"private": true,
 	"version": "0.0.0",
-	"license": "MIT",
 	"type": "module",
-	"exports": "./src/index.js",
-	"keywords": [
-		"svelte-add-on",
-		"sv"
-	],
+	"license": "MIT",
 	"scripts": {
+		"create-temp": "sv create temp --types ts --template minimal --no-add-ons --no-install",
 		"start": "sv add -C temp --community file:../",
-		"create-temp": "sv create temp --check-types typescript --template skeleton --no-adders --no-install"
+		"test": "vitest run"
 	},
+	"files": [
+		"src",
+		"!src/**/*.test.*"
+	],
+	"exports": "./src/index.js",
 	"dependencies": {
 		"@sveltejs/cli-core": "workspace:*"
 	},
 	"devDependencies": {
-		"sv": "workspace:*"
+		"@playwright/test": "^1.48.2",
+		"sv": "workspace:*",
+		"vitest": "^2.1.4"
 	},
-	"files": [
-		"src",
-		"!src/**/*.test.*"
+	"keywords": [
+		"svelte-add-on",
+		"sv"
 	]
 }

community-adder-template/package.json

@@ -1,17 +1,17 @@
 import { defineAdder, defineAdderOptions } from '@sveltejs/cli-core';
 import { imports } from '@sveltejs/cli-core/js';
-import { parseScript } from '@sveltejs/cli-core/parsers';
+import { parseSvelte } 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({
-	id: 'community-adder-template',
+export default defineAdder({
+	id: 'community-addon',
 	environments: { kit: true, svelte: true },
 	options,
 	packages: [],
@@ -27,10 +27,11 @@ export const adder = defineAdder({
 		},
 		{
 			name: () => 'src/DemoComponent.svelte',
-			content: ({ content }) => {
-				const { ast, generateCode } = parseScript(content);
-				imports.addDefault(ast, '../adder-template-demo.txt?raw', 'Demo');
-				return generateCode();
+			content: ({ content, options, typescript }) => {
+				if (!options.demo) return content;
+				const { script, generateCode } = parseSvelte(content, { typescript });
+				imports.addDefault(script.ast, '../adder-template-demo.txt?raw', 'demo');
+				return generateCode({ script: script.generateCode(), template: '{demo}' });
 			}
 		}
 	]

community-adder-template/src/index.js

@@ -0,0 +1,28 @@
+import path from 'node:path';
+import { expect } from '@playwright/test';
+import { fixture, setupTest } from './setup/suite.js';
+import addon from '../src/index.js';
+
+const id = addon.id;
+const { test, variants, prepareServer } = setupTest({ [id]: addon });
+
+test.concurrent.for(variants)('demo - %s', async (variant, { page, ...ctx }) => {
+	const cwd = await ctx.run(variant, { [id]: { demo: true } });
+
+	// ...add files
+	if (variant.startsWith('kit')) {
+		const target = path.resolve(cwd, 'src', 'routes', '+page.svelte');
+		fixture({ name: '+page.svelte', target });
+	} else {
+		const target = path.resolve(cwd, 'src', 'App.svelte');
+		fixture({ name: 'App.svelte', target });
+	}
+
+	const { close } = await prepareServer({ cwd, page });
+	// kill server process when we're done
+	ctx.onTestFinished(async () => await close());
+
+	// expectations
+	const textContent = await page.getByTestId('demo').textContent();
+	expect(textContent).toContain('This is a text file made by the Community Adder Template demo!');
+});

community-adder-template/tests/custom-addon.test.ts

@@ -0,0 +1,5 @@
+<script>
+	import demo from '../../adder-template-demo.txt?raw';
+</script>
+
+<span data-testid="demo">{demo}</span>

community-adder-template/tests/fixtures/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import demo from '../adder-template-demo.txt?raw';
+</script>
+
+<span data-testid="demo">{demo}</span>

community-adder-template/tests/fixtures/App.svelte

@@ -0,0 +1,29 @@
+import { fileURLToPath } from 'node:url';
+import { setup, type ProjectVariant } from 'sv/testing';
+import type { GlobalSetupContext } from 'vitest/node';
+
+const variants: ProjectVariant[] = ['kit-js', 'kit-ts', 'vite-js', 'vite-ts'];
+const TEST_DIR = fileURLToPath(new URL('../../.test-output/', import.meta.url));
+
+export default async function ({ provide }: GlobalSetupContext) {
+	// global setup (e.g. spin up docker containers)
+
+	// downloads different project configurations (sveltekit, js/ts, vite-only, etc)
+	const { templatesDir } = await setup({ cwd: TEST_DIR, variants, clean: true });
+
+	provide('testDir', TEST_DIR);
+	provide('templatesDir', templatesDir);
+	provide('variants', variants);
+
+	return async () => {
+		// tear down... (e.g. cleanup docker containers)
+	};
+}
+
+declare module 'vitest' {
+	export interface ProvidedContext {
+		testDir: string;
+		templatesDir: string;
+		variants: ProjectVariant[];
+	}
+}