test(vanillin): test the TestHelpers auto mode

Author: Sebastian Schürmann

packages/vanillin/src/test-helper.ts

@@ -76,15 +76,15 @@ export class TestHelper {
      * @returns Promise resolving to a {@link MountContext}
      * @throws Error if the compiler host is undefined
      */
-    async compileAndMountAsScript(tagName: string, fileName: string, compilerOptions: CompilerOptions): Promise<MountContext> {
+    async compileAndMountAsScript(tagName: string, fileName: string, compilerOptions: CompilerOptions = Compiler.DEFAULT_COMPILER_OPTIONS): Promise<MountContext> {
         const compiler = await Compiler.withVirtualFs([fileName], compilerOptions);
         compiler.emit();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const { host } = compiler as any;
         if (!host) {
             throw new Error('Host is undefined');
         }
-        const outFile = `/dist/${basename(fileName).replace('.ts', '.js')}`;
+        const outFile = `${compilerOptions.outDir}/${basename(fileName).replace('.ts', '.js')}`;
         const compiledCode = host.volume.readFileSync(outFile, 'utf8');
         return this.mountAsScript(tagName, compiledCode);
     }

packages/vanillin/test/fixtures/my-circle.ts

@@ -0,0 +1,62 @@
+class MyCircle extends HTMLElement {
+    private _size: number = 50;
+    private _color: string = 'red';
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    static get observedAttributes() {
+        return ['size', 'color'];
+    }
+
+    get size() {
+        return this._size;
+    }
+
+    set size(value: number) {
+        this._size = value;
+        this.render();
+    }
+
+    get color() {
+        return this._color;
+    }
+
+    set color(value: string) {
+        this._color = value;
+        this.render();
+    }
+
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+        if (oldValue === newValue) return;
+
+        switch (name) {
+            case 'size':
+                this.size = parseInt(newValue || '50');
+                break;
+            case 'color':
+                this.color = newValue || 'red';
+                break;
+        }
+    }
+
+    private render() {
+        if (!this.shadowRoot) return;
+
+        this.shadowRoot.innerHTML = `
+            <svg width="${this._size * 2}" height="${this._size * 2}" viewBox="0 0 ${this._size * 2} ${this._size * 2}">
+                <circle 
+                    cx="${this._size}" 
+                    cy="${this._size}" 
+                    r="${this._size}" 
+                    fill="${this._color}"
+                />
+            </svg>
+        `;
+    }
+}
+
+customElements.define('my-circle', MyCircle);

packages/vanillin/test/test-helper.mount-and-compile.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, beforeEach, afterEach } from 'node:test';
+import assert from 'node:assert';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { readFileSync } from 'fs';
+import { TestHelper, MountContext } from '../src/test-helper.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const myCircleJs = readFileSync(resolve(__dirname, './fixtures/my-circle.js'), 'utf8');
+
+describe('TestHelper.compileAndMountAsScript', () => {
+    
+        var buildResult: MountContext;
+        beforeEach(async () => {
+            const helper = new TestHelper();
+            helper.compileAndMountAsScript('my-circle', resolve(__dirname, './fixtures/my-circle.ts'));
+            buildResult = await helper.mountAsScript('my-circle', myCircleJs); 
+        });
+
+        afterEach(async () => {
+            const { jsdom } = buildResult;
+            jsdom.window.close();
+        });
+
+        it('returns a document', async() => {
+            const { document } = buildResult;
+            assert.ok(document);
+        });
+
+       
+    
+});