tests

[mayank99]

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

```ts 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.