svelte-declarative-testing 0.1.0 → 0.2.0

package/id-test.code

@@ -0,0 +1,44 @@
+<script>
+  import { Test, Describe, Check } from '../../src/components/testing-library';
+</script>
+
+<Describe label="Basic test">
+  {#snippet tests()}
+    <Test it="passes">
+      <button>Click me</button>
+
+      {#snippet checks()}
+        <Check
+          fn={({ getByRole }) => {
+            expect(getByRole('button', { name: 'Click me' })).not.toBe(null);
+          }}
+        />
+      {/snippet}
+    </Test>
+
+    <Describe label="Nested describe">
+      {#snippet tests()}
+      <Test it="also passes">
+        <button>Click me</button>
+
+        {#snippet checks()}
+          <Check
+            fn={({ getByRole }) => {
+              expect(getByRole('button', { name: 'Click me' })).not.toBe(null);
+            }}
+          />
+        {/snippet}
+      </Test>
+      {/snippet}
+    </Describe>
+  {/snippet}
+</Describe>
+{globalThis[Symbol()] ? function () {
+describe("Basic test", () => {
+test("passes", () => {})
+describe("Nested describe", () => {
+test("also passes", () => {})
+
+})
+})
+} : ""}

package/id-test.map

@@ -0,0 +1 @@
+{"version":3,"sources":[""],"sourcesContent":["<script>\n  import { Test, Describe, Check } from '../../src/components/testing-library';\n</script>\n\n<Describe label=\"Basic test\">\n  {#snippet tests()}\n    <Test it=\"passes\">\n      <button>Click me</button>\n\n      {#snippet checks()}\n        <Check\n          fn={({ getByRole }) => {\n            expect(getByRole('button', { name: 'Click me' })).not.toBe(null);\n          }}\n        />\n      {/snippet}\n    </Test>\n\n    <Describe label=\"Nested describe\">\n      {#snippet tests()}\n      <Test it=\"also passes\">\n        <button>Click me</button>\n\n        {#snippet checks()}\n          <Check\n            fn={({ getByRole }) => {\n              expect(getByRole('button', { name: 'Click me' })).not.toBe(null);\n            }}\n          />\n        {/snippet}\n      </Test>\n      {/snippet}\n    </Describe>\n  {/snippet}\n</Describe>\n"],"names":[],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA,IAAI;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAI;AACJ;AACA,MAAM;AACN;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-declarative-testing",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A way to mount your Svelte test components declaratively",
   "type": "module",
   "module": "src/index.js",
@@ -24,7 +24,7 @@
     }
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "DEBUG= vitest"
   },
   "keywords": [
     "svelte",
@@ -36,13 +36,23 @@
   "license": "ISC",
   "dependencies": {
     "magic-string": "^0.30.21",
+    "source-map": "^0.7.6",
     "ts-essentials": "^10.1.1",
     "zimmerframe": "^1.1.4"
   },
   "devDependencies": {
+    "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^9.39.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.14.0",
+    "globals": "^17.3.0",
+    "happy-dom": "^20.5.0",
     "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.4.1"
+    "prettier-plugin-svelte": "^3.4.1",
+    "typescript-eslint": "^8.54.0"
   },
   "peerDependencies": {
     "@testing-library/svelte": "^5.3.1",

package/src/components/core/Check.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
   /**@import { CheckProps } from './' */
   import { getAddCheck } from './context.js';
 

package/src/components/testing-library/index.d.ts

@@ -2,6 +2,7 @@ import { RenderResult } from '@testing-library/svelte';
 import { Component } from 'svelte';
 import type { BaseTestProps, DescribeProps } from '../core';
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export type CheckFn = (result: RenderResult<Component<any, any>>) => void | Promise<void>;
 
 export type CheckProps = {

package/src/components/vitest-browser-svelte/index.d.ts

@@ -2,6 +2,7 @@ import { RenderResult } from 'vitest-browser-svelte';
 import { Component } from 'svelte';
 import type { BaseTestProps, DescribeProps } from '../core';
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export type CheckFn = (result: RenderResult<Component<any, any>>) => void | Promise<void>;
 
 export type CheckProps = {

package/src/plugins/vitest.js

@@ -2,91 +2,134 @@
 import { parse } from 'svelte/compiler';
 import { walk } from 'zimmerframe';
 import MagicString from 'magic-string';
+import { SourceMapGenerator, SourceMapConsumer } from 'source-map';
 
-const pre = () =>
-  /**@type {Plugin}*/ ({
-    name: 'transform-svelte-declarative-test',
-    enforce: 'pre',
-    transform(code, id) {
-      if (!/\.(?:test|spec)\.svelte$/.test(id)) {
-        return;
+/**
+ * This plugin has two parts:
+ *
+ * 1. A pre-transform that looks for <Test> and <Describe> components in
+ *    .test.svelte files and generates corresponding test/describe blocks, while
+ *    tracking source locations for accurate source maps. The generated code
+ *    here has no purpose and does not run, it just allows Vitest to find the
+ *    tests when it goes looking, and is an import part of VSCode Vitest compatibility.
+ *
+ * 2. A post-transform that mounts the Svelte component to the DOM when it is
+ *    imported so that the tests run.
+ */
+
+const mountCode =
+  'import { mount } from "svelte"; mount((await import(import.meta.url)).default, { target: document.body });';
+
+const testFileRegex = /\.(?:test|spec)\.svelte$/;
+const getNameFromAttr = (node, attr) =>
+  node.attributes.find((a) => a.name === attr)?.value?.[0]?.data ?? '(unnamed test)';
+
+const pre = /**@returns {Plugin}*/ () => ({
+  name: 'transform-svelte-declarative-test',
+  filter: {
+    id: testFileRegex,
+  },
+  enforce: 'pre',
+  async transform(code, id) {
+    if (!testFileRegex.test(id)) {
+      return;
+    }
+
+    const mappings = [];
+
+    let appendedCode = [''];
+    let currentLine = code.split('\n').length;
+
+    const addLine = (lineCode, location) => {
+      if (location) {
+        mappings.push({
+          generatedLine: currentLine,
+          generatedColumn: 0,
+          sourceLine: location.line - 1,
+          sourceColumn: location.column,
+        });
       }
+      appendedCode.push(lineCode);
+      currentLine++;
+    };
+
+    // We wrap generated test code in a Svelte if block that checks the global
+    // object for something we know doesn't exist. This ensures the generated
+    // code is never executed, but still allows Vitest to find the
+    // test/describe blocks when it parses the file.
+    //
+    // Note: we could just write `{#if false}` but if the Svelte parser is
+    // updated to optimize away dead code, it might remove our generated blocks entirely,
+    addLine('{#if globalThis[Symbol()]}{function () {');
+
+    const s = new MagicString(code);
+    const ast = parse(code, { modern: true });
+
+    // We walk the AST looking for our custom <Test> and <Describe>
+    // components, and generate corresponding test/describe blocks. We also
+    // track the original location of each node so we can create accurate
+    // source map mappings later.
+    walk(
+      ast.fragment,
+      {},
+      {
+        Component(node, { visit }) {
+          if (node.name === 'Test') {
+            const name = getNameFromAttr(node, 'it');
+            addLine(`test("${name}", () => {})`, node.name_loc.start);
+          } else if (node.name === 'Describe') {
+            const name = getNameFromAttr(node, 'label');
+            addLine(`describe("${name}", () => {`, node.name_loc.start);
 
-      const s = new MagicString(code);
-      const ast = parse(code);
-      walk(
-        ast.html,
-        {},
-        {
-          InlineComponent(node, { visit }) {
-            if (node.name === 'Test') {
-              for (const attr of node.attributes) {
-                if (attr.name === 'it') {
-                  const name =
-                    attr.value?.[0]?.data?.replace(/"/g, '\\"') ?? '(dynamically named test)';
-
-                  s.appendLeft(
-                    attr.start,
-                    `data-test-code={function () { test("${name}", () => {}) }} `,
-                  );
-                }
-              }
-
-              return;
-            } else if (node.name === 'Describe') {
-              for (const attr of node.attributes) {
-                if (attr.name === 'label') {
-                  const name =
-                    attr.value?.[0]?.data?.replace(/"/g, '\\"') ?? '(dynamically named test suite)';
-
-                  s.appendLeft(
-                    attr.start,
-                    `data-describe-code={function () { describe("${name}", () => {}) }} `,
-                  );
-                }
-              }
-
-              for (const child of node.children) {
-                if (child.type === 'SnippetBlock') {
-                  visit(child);
-                }
-              }
-            }
-          },
-          SnippetBlock(node, { visit }) {
-            for (const child of node.children) {
-              if (child.type === 'InlineComponent') {
-                visit(child);
-              }
-            }
-          },
+            // Look through children for nested tests/describes
+            visit(node.fragment);
+
+            addLine(`})`, null);
+          }
         },
-      );
-
-      console.log(s.toString());
-      return { code: s.toString(), map: s.generateMap({ hires: true }) };
-    },
-  });
-
-const post = () =>
-  /**@type {Plugin}*/ ({
-    name: 'transform-svelte-declarative-test',
-    enforce: 'post',
-    transform(code, id) {
-      if (!/\.(?:test|spec)\.svelte$/.test(id)) {
-        return;
-      }
+      },
+    );
+
+    addLine(`}}{/if}`, null);
+
+    s.append(appendedCode.join('\n'));
+
+    const originalMap = s.generateMap({ source: id, includeContent: true, hires: true });
+    const consumer = await new SourceMapConsumer(originalMap);
+    const generator = SourceMapGenerator.fromSourceMap(consumer);
+
+    for (const mapping of mappings) {
+      generator.addMapping({
+        generated: { line: mapping.generatedLine + 1, column: mapping.generatedColumn },
+        source: id,
+        original: { line: mapping.sourceLine + 1, column: mapping.sourceColumn },
+      });
+    }
+
+    return { code: s.toString(), map: generator.toString() };
+  },
+});
+
+const post = /**@returns {Plugin}*/ () => ({
+  name: 'transform-svelte-declarative-test',
+  filter: {
+    id: testFileRegex,
+  },
+  enforce: 'post',
+  transform(code, id) {
+    if (!testFileRegex.test(id)) {
+      return;
+    }
+
+    const s = new MagicString(code);
 
-      const s = new MagicString(code);
-      const componentName = id.split('/').pop()?.split('.').slice(0, -1).join('_');
-      s.append(`
-          import { mount } from 'svelte';
-          mount(${componentName}, { target: document.body });
-        `);
+    // We mount by reimporting the default export of the Svelte file (the
+    // component). This is the magic that runs the tests.
+    s.append(mountCode);
 
-      return { code: s.toString(), map: s.generateMap({ hires: true }) };
-    },
-  });
+    return { code: s.toString() };
+  },
+});
 
 export default function getPlugins() {
   return [pre(), post()];

package/src/plugins/vitest.test.ts

@@ -0,0 +1,3 @@
+describe('vitest pre plugin', () => {
+  test.fails('transforms test files to mount the component', () => {});
+});

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+    "noEmit": true,
+    "rewriteRelativeImportExtensions": true,
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "module": "preserve",
+    "moduleResolution": "bundler"
+  },
+  "include": [
+    "./types/**/$types.d.ts",
+    "./vite.config.js",
+    "./vite.config.ts",
+    "./src/**/*.js",
+    "./src/**/*.ts",
+    "./src/**/*.svelte",
+    "./tests/**/*.js",
+    "./tests/**/*.ts",
+    "./tests/**/*.svelte"
+  ],
+  "exclude": ["./node_modules/**"]
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+  //
+  // To make changes to top-level options such as include and exclude, we recommend extending
+  // the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

package/vitest.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vitest/config';
+import { svelteTesting } from '@testing-library/svelte/vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import getPlugins from './src/plugins/vitest';
+
+export default defineConfig({
+  logLevel: 'warn',
+  plugins: [svelte(), svelteTesting(), getPlugins()],
+  test: {
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'html'],
+    },
+    environment: 'happy-dom',
+    expect: {
+      requireAssertions: true,
+    },
+    globals: true,
+    include: ['examples/**/*.{test,spec}.svelte', 'src/**/*.{test,spec}.ts'],
+  },
+});