feat(cli): pnpm config in pnpm-workspace.yaml (& update tests) (#717)

Co-authored-by: CokaKoala <[email protected]>
Co-authored-by: Manuel <[email protected]>
Co-authored-by: AdrianGonz97 <[email protected]>

Author: 3 people

.changeset/nasty-towns-crash.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+fix(tailwindcss): add `@tailwindcss/oxide` to approve-builds in `pnpm`

.changeset/solid-dragons-trade.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat(cli): pnpm config will now be stored in `pnpm-workspace.yaml` (e.g. `onlyBuiltDependencies`)

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

@@ -4,25 +4,31 @@ import { fixture, setupTest } from './setup/suite.js';
 import addon from '../src/index.js';
 
 const id = addon.id;
-const { test, variants, prepareServer } = setupTest({ [id]: addon });
+const { test, addonTestCases, prepareServer } = setupTest(
+	{ [id]: addon },
+	{ kinds: [{ type: 'default', options: { [id]: { demo: true } } }] }
+);
 
-test.concurrent.for(variants)('demo - %s', async (variant, { page, ...ctx }) => {
-	const cwd = await ctx.run(variant, { [id]: { demo: true } });
+test.concurrent.for(addonTestCases)(
+	'community-addon $variant',
+	async (addonTestCase, { page, ...ctx }) => {
+		const cwd = ctx.cwd(addonTestCase);
 
-	// ...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 });
-	}
+		// ...add files
+		if (addonTestCase.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());
+		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 Addon Template demo!');
-});
+		// expectations
+		const textContent = await page.getByTestId('demo').textContent();
+		expect(textContent).toContain('This is a text file made by the Community Addon Template demo!');
+	}
+);

community-addon-template/tests/setup/global.ts

@@ -2,8 +2,8 @@ import { fileURLToPath } from 'node:url';
 import { setup, type ProjectVariant } from 'sv/testing';
 import type { TestProject } 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));
+const variants: ProjectVariant[] = ['kit-js', 'kit-ts', 'vite-js', 'vite-ts'];
 
 export default async function ({ provide }: TestProject) {
 	// global setup (e.g. spin up docker containers)

community-addon-template/tests/setup/suite.ts

@@ -4,13 +4,13 @@ import { execSync } from 'node:child_process';
 import * as vitest from 'vitest';
 import { installAddon, type AddonMap, type OptionMap } from 'sv';
 import {
-	addPnpmBuildDependencies,
 	createProject,
 	startPreview,
+	addPnpmBuildDependencies,
 	type CreateProject,
 	type ProjectVariant
 } from 'sv/testing';
-import { chromium, type Browser, type Page } from '@playwright/test';
+import { chromium, type Browser, type BrowserContext, type Page } from '@playwright/test';
 import { fileURLToPath } from 'node:url';
 
 const cwd = vitest.inject('testDir');
@@ -19,26 +19,52 @@ const variants = vitest.inject('variants');
 
 const SETUP_DIR = fileURLToPath(new URL('.', import.meta.url));
 
-type Fixtures<Addons extends AddonMap> = {
+type Fixtures = {
 	page: Page;
-	run(variant: ProjectVariant, options: OptionMap<Addons>): Promise<string>;
+	cwd(addonTestCase: AddonTestCase<any>): string;
+};
+
+type AddonTestCase<Addons extends AddonMap> = {
+	variant: ProjectVariant;
+	kind: { type: string; options: OptionMap<Addons> };
 };
 
-export function setupTest<Addons extends AddonMap>(addons: Addons) {
+export function setupTest<Addons extends AddonMap>(
+	addons: Addons,
+	options?: {
+		kinds: Array<AddonTestCase<Addons>['kind']>;
+		filter?: (addonTestCase: AddonTestCase<Addons>) => boolean;
+		browser?: boolean;
+	}
+) {
+	const test = vitest.test.extend<Fixtures>({} as any);
+
+	const withBrowser = options?.browser ?? true;
+
 	let create: CreateProject;
 	let browser: Browser;
 
-	const test = vitest.test.extend<Fixtures<Addons>>({} as any);
-
-	vitest.beforeAll(async () => {
-		browser = await chromium.launch();
-		return async () => {
-			await browser.close();
-		};
-	});
+	if (withBrowser) {
+		vitest.beforeAll(async () => {
+			browser = await chromium.launch();
+			return async () => {
+				await browser.close();
+			};
+		});
+	}
 
-	vitest.beforeAll(({ name }) => {
-		const testName = path.parse(name).name.replace('.test', '');
+	const addonTestCases: Array<AddonTestCase<Addons>> = [];
+	for (const kind of options?.kinds ?? []) {
+		for (const variant of variants) {
+			const addonTestCase = { variant, kind };
+			if (!options?.filter || options?.filter?.(addonTestCase)) {
+				addonTestCases.push(addonTestCase);
+			}
+		}
+	}
+	let testName: string;
+	vitest.beforeAll(async ({ name }) => {
+		testName = path.dirname(name).split('/').at(-1)!;
 
 		// constructs a builder for create test projects
 		create = createProject({ cwd, templatesDir, testName });
@@ -58,61 +84,79 @@ export function setupTest<Addons extends AddonMap>(addons: Addons) {
 				private: true
 			})
 		);
-	});
 
-	// runs before each test case
-	vitest.beforeEach<Fixtures<Addons>>(async (ctx) => {
-		const browserCtx = await browser.newContext();
-		ctx.page = await browserCtx.newPage();
-		ctx.run = async (variant, options) => {
-			const cwd = create({ testId: ctx.task.id, variant });
+		for (const { variant, kind } of addonTestCases) {
+			const cwd = create({ testId: `${kind.type}-${variant}`, variant });
 
 			// test metadata
 			const metaPath = path.resolve(cwd, 'meta.json');
-			fs.writeFileSync(metaPath, JSON.stringify({ variant, options }, null, '\t'), 'utf8');
+			fs.writeFileSync(metaPath, JSON.stringify({ variant, kind }, null, '\t'), 'utf8');
 
-			// run addon
 			const { pnpmBuildDependencies } = await installAddon({
 				cwd,
 				addons,
-				options,
+				options: kind.options,
 				packageManager: 'pnpm'
 			});
-			addPnpmBuildDependencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
+			await addPnpmBuildDependencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
+		}
+
+		execSync('pnpm install', { cwd: path.resolve(cwd, testName), stdio: 'pipe' });
+	});
 
-			return cwd;
+	// runs before each test case
+	vitest.beforeEach<Fixtures>(async (ctx) => {
+		let browserCtx: BrowserContext;
+		if (withBrowser) {
+			browserCtx = await browser.newContext();
+			ctx.page = await browserCtx.newPage();
+		}
+
+		ctx.cwd = (addonTestCase) => {
+			return path.join(cwd, testName, `${addonTestCase.kind.type}-${addonTestCase.variant}`);
 		};
 
 		return async () => {
-			await browserCtx.close();
+			if (withBrowser) {
+				await browserCtx.close();
+			}
 			// ...other tear downs
 		};
 	});
 
-	return {
-		test,
-		variants,
-		prepareServer
-	};
+	return { test, addonTestCases, prepareServer };
 }
 
-/**
- * Installs dependencies, builds the project, and spins up the preview server
- */
-async function prepareServer({ cwd, page }: { cwd: string; page: Page }) {
-	// install deps
-	execSync('pnpm install --no-frozen-lockfile', { cwd, stdio: 'pipe' });
-
-	// ...do commands and any other extra stuff
-
+type PrepareServerOptions = {
+	cwd: string;
+	page: Page;
+	buildCommand?: string;
+	previewCommand?: string;
+};
+// installs dependencies, builds the project, and spins up the preview server
+async function prepareServer({
+	cwd,
+	page,
+	buildCommand = 'pnpm build',
+	previewCommand = 'pnpm preview'
+}: PrepareServerOptions) {
 	// build project
-	execSync('npm run build', { cwd, stdio: 'pipe' });
+	if (buildCommand) execSync(buildCommand, { cwd, stdio: 'pipe' });
+
+	// start preview server
+	const { url, close } = await startPreview({ cwd, command: previewCommand });
 
-	// start preview server `vite preview`
-	const { url, close } = await startPreview({ cwd });
+	// increases timeout as 30s is not always enough when running the full suite
+	page.setDefaultNavigationTimeout(60_000);
 
-	// navigate to the page
-	await page.goto(url);
+	try {
+		// navigate to the page
+		await page.goto(url);
+	} catch (e) {
+		// cleanup in the instance of a timeout
+		await close();
+		throw e;
+	}
 
 	return { url, close };
 }

package.json

@@ -39,10 +39,5 @@
 		"typescript-eslint": "^8.34.1",
 		"vitest": "4.0.0-beta.6"
 	},
-	"packageManager": "[email protected]",
-	"pnpm": {
-		"onlyBuiltDependencies": [
-			"esbuild"
-		]
-	}
+	"packageManager": "[email protected]"
 }