tests

[mayank99]

trafficstars

currently there is no testing strategy, making it extremely easy for things to break 😳

options to consider:

• vitest - the obvious one, it would be easy to set up, but it's kinda fake as it won't run in the browser.
• playwright - this runs in a real browser and has built-in support for screenshots. there is experimental vite support.

[stephenwf]

I cloned down and got vitest hooked up quite easily - running vite directly, compiling and comparing snapshots.

Example test

describe('Simple parsing', () => {

	test('Example build', async () => {
		const vite = await import('../node_modules/vite/dist/node');

		const { output } = await vite.build({
			root: resolve(__dirname, 'build-stub'),
			mode: 'production',
			build: { modulePreload: false, write: false, minify: false },
			logLevel: 'silent',
			plugins: [
				ecsstatic(),
				virtualFile('entry.js', `
					import { css } from '@acab/ecsstatic';
					const test = css\`color: blue;\`;
					console.log(test);
				`),
			],
		}) as import('vite').RollupOutput;

		expect(output.find(e => e.name === 'index.css').source).toMatchInlineSnapshot(`
			"
			.🎈-qjmeyb{color: blue}"
		`);

		expect(output.find(e => e.name === 'index').code).toMatchInlineSnapshot(`
			"const __Qjmeyb_acab = \\"\\";
			const test = \\"🎈-qjmeyb\\";
			console.log(test);
			"
		`);

	});
});

Some problems with testing like this:

• Vite plugins don't get picked up by the optional esbuild processing when it hits a template literals.
• Tests don't re-run when source is changed (not huge issue)
• Can't test the CSS itself and how it's applied
• Nested and escaped back-ticks don't look great for easily reading a test, especially when you add template literals.

[mayank99]

hey, thanks for looking into this!

• Vite plugins don't get picked up by the optional esbuild processing when it hits a template literals.

this might be possible to work around by using a real file instead of virtual file. since you're running vite.build, it should know how to read the file system so you could create a small vite app and build that.

• Can't test the CSS itself and how it's applied

hmm... i think you should be able to read the CSS file produced after vite.build and check its contents?

• Nested and escaped back-ticks don't look great for easily reading a test, especially when you add template literals.

this should be partly solved by reading a real project.