svelte-declarative-testing 0.2.0 → 0.3.1

package/examples/basic/Basic.test.svelte

@@ -1,35 +1,46 @@
 <script>
+  import { fireEvent } from '@testing-library/svelte';
   import { Test, Describe, Check } from '../../src/components/testing-library';
 </script>
 
-<Describe label="Basic test">
-  {#snippet tests()}
-    <Test it="finds the rendered component">
-      <button>Click me</button>
+<Test it="finds the rendered component">
+  {#snippet mount()}
+    <button>Click me</button>
+  {/snippet}
 
-      {#snippet checks()}
-        <Check
-          fn={({ getByRole }) => {
-            expect(getByRole('button', { name: 'Click me' })).not.toBe(null);
-          }}
-        />
-      {/snippet}
-    </Test>
+  <Check
+    fn={({ getByRole }) => {
+      expect(getByRole('button', { name: 'Click me' })).not.toBe(null);
+    }}
+  />
+</Test>
 
-    <Describe label="Nested describe">
-      {#snippet tests()}
-      <Test it="also passes">
-        <button>Click me</button>
+<Describe label="Basic test suite">
+  {#snippet mount()}
+    <button>Click me</button>
+  {/snippet}
 
-        {#snippet checks()}
-          <Check
-            fn={({ getByRole }) => {
-              expect(getByRole('button', { name: 'Click me' })).not.toBe(null);
-            }}
-          />
-        {/snippet}
-      </Test>
+  <Describe label="Nested describe">
+    <Test it="mounts the test's snippet instead of the describe's snippet">
+      {#snippet mount()}
+        <button>No, click me</button>
       {/snippet}
-    </Describe>
-  {/snippet}
+
+      <Check
+        fn={({ queryByRole }) => {
+          expect(queryByRole('button', { name: 'Click me' })).toBe(null);
+          expect(queryByRole('button', { name: 'No, click me' })).not.toBe(null);
+        }}
+      />
+    </Test>
+
+    <Test it="mounts the describe's snippet if the test doesn't have its own snippet">
+      <Check
+        fn={({ queryByRole }) => {
+          expect(queryByRole('button', { name: 'Click me' })).not.toBe(null);
+          expect(queryByRole('button', { name: 'No, click me' })).toBe(null);
+        }}
+      />
+    </Test>
+  </Describe>
 </Describe>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-declarative-testing",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "A way to mount your Svelte test components declaratively",
   "type": "module",
   "module": "src/index.js",

package/src/components/core/Check.svelte

@@ -1,6 +1,6 @@
 <script>
   /**@import { CheckProps } from './' */
-  import { getAddCheck } from './context.js';
+  import { getAddCheck } from './context';
 
   /**@type {CheckProps} */
   const { fn } = $props();

package/src/components/core/Describe.svelte

@@ -1,22 +1,27 @@
 <script>
   /** @import { DescribeProps } from './' */
   import { describe } from 'vitest';
-  import { setAddTest, setSuiteRenderSnippet } from './context.js';
+  import { getAddDescribeChild, setAddDescribeChild, setSuiteRenderSnippet } from './context';
+  import tryFn from '../../utils/tryFn.js';
 
   /**@type {DescribeProps}*/
-  const { label, todo, only, skip, skipIf, runIf, children, tests } = $props();
+  const { label, todo, only, skip, skipIf, runIf, children, mount } = $props();
 
-  /**@type {((result: unknown) => void | Promise<void>)[]} */
-  const testFns = [];
+  /**@type {(() => void | Promise<void>)[]} */
+  const childFns = [];
 
-  setAddTest((fn) => {
-    testFns.push(fn);
+  const addDescribeToParent = tryFn(getAddDescribeChild);
+
+  setAddDescribeChild((fn) => {
+    childFns.push(fn);
   });
 
   // svelte-ignore state_referenced_locally
-  setSuiteRenderSnippet(children);
+  if (mount) {
+    setSuiteRenderSnippet(mount);
+  }
 
-  $effect(() => {
+  const setupDescribe = () => {
     const describeFn = () => {
       if (skip) return describe.skip;
       if (skipIf) return describe.skipIf(skipIf());
@@ -27,11 +32,17 @@
     };
 
     describeFn()(label, async () => {
-      for (const test of testFns) {
-        await test();
+      for (const child of childFns) {
+        await child();
       }
     });
+  };
+
+  addDescribeToParent?.(setupDescribe);
+
+  $effect(() => {
+    if (!addDescribeToParent) setupDescribe();
   });
 </script>
 
-{@render tests()}
+{@render children()}

package/src/components/core/Test.svelte

@@ -1,18 +1,18 @@
 <script>
   /**@import { TestProps } from './index.js' */
   import { test } from 'vitest';
-  import { getAddTest, setAddCheck, getSuiteRenderSnippet } from './context.js';
+  import { setAddCheck, getSuiteRenderSnippet, getAddDescribeChild } from './context';
   import Wrapper from './Wrapper.svelte';
+  import tryFn from '../../utils/tryFn.js';
 
   /**@type {TestProps} */
-  const { it, fails, todo, only, skip, skipIf, runIf, children, checks, render } = $props();
+  const { it, fails, todo, only, skip, skipIf, runIf, children, mount, render } = $props();
 
   /**@type {((result: unknown) => void | Promise<void>)[]} */
   const checkFns = [];
 
-  const addTest = getAddTest();
-
-  const suiteRenderSnippet = getSuiteRenderSnippet();
+  const addTest = tryFn(getAddDescribeChild);
+  const suiteRenderSnippet = tryFn(getSuiteRenderSnippet);
 
   setAddCheck((fn) => {
     checkFns.push(fn);
@@ -30,7 +30,7 @@
     };
 
     testFn()(it, async () => {
-      const result = await render(Wrapper, { children: children ?? suiteRenderSnippet });
+      const result = await render(Wrapper, { children: mount ?? suiteRenderSnippet });
 
       try {
         if (!checkFns.length) {
@@ -53,4 +53,4 @@
   });
 </script>
 
-{@render checks()}
+{@render children()}

package/src/components/core/Wrapper.svelte

@@ -1,8 +1,8 @@
 <script>
-  /**@import type { Snippet } from 'svelte';*/
+  /**@import { Snippet } from 'svelte';*/
 
   /**@type {{ children: Snippet }}*/
   const { children } = $props();
 </script>
 
-{@render children()}
+{@render children?.()}

package/src/components/core/context.js

@@ -0,0 +1,14 @@
+/**@import { Snippet } from 'svelte' */
+/**@typedef {(fn: () => void} AddTestOrDescribeFn */
+/**@typedef {(fn: (renderResult: unknown) => void | Promise<void>} AddCheckFn */
+
+import { createContext } from 'svelte';
+
+/**@type {[() => AddTestOrDescribeFn | undefined, (fn: AddTestOrDescribeFn) => void]} */
+export const [getAddDescribeChild, setAddDescribeChild] = createContext(null);
+
+/**@type {[() => AddCheckFn | undefined, (fn: AddCheckFn) => void]} */
+export const [getAddCheck, setAddCheck] = createContext();
+
+/**@type {[() => Snippet<[]> | undefined, (snippet: Snippet<[]> | undefined) => void]} */
+export const [getSuiteRenderSnippet, setSuiteRenderSnippet] = createContext();

package/src/components/core/index.d.ts

@@ -10,28 +10,31 @@ export type ModifierProps = XOR<
   { runIf: () => unknown }
 >;
 
-export type DescribeProps =
-  | {
-      label: string;
-      children?: Snippet;
-      tests: Snippet;
-    }
-  | ModifierProps;
+export type DescribeProps = {
+  label: string;
+  children: Snippet;
+  mount?: Snippet;
+} & ModifierProps;
 
-export type BaseTestProps =
-  | {
-      it: string;
-      children?: Snippet;
-      checks: Snippet;
-    }
-  | XOR<ModifierProps, { fails: boolean }>;
+export type BaseTestProps = {
+  it: string;
+  children: Snippet;
+  mount?: Snippet;
+} & XOR<ModifierProps, { fails: boolean }>;
+
+type RenderResult = {
+  unmount: () => void | Promise<void>;
+};
 
 export type TestProps = BaseTestProps & {
-  render: (result: unknown) => void | Promise<void>;
+  render: (
+    component: Component<any, any>, //eslint-disable-line @typescript-eslint/no-explicit-any
+    options: unknown,
+  ) => RenderResult | Promise<RenderResult>;
 };
 
 export type CheckProps = {
-  fn: (result: unknown) => void | Promise<void>;
+  fn: (renderResult: any) => void | Promise<void>; //eslint-disable-line @typescript-eslint/no-explicit-any
 };
 
 export declare const Describe: Component<DescribeProps>;

package/src/plugins/__snapshots__/vitest.test.ts.snap

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`vitest post plugin > produces code that mounts the component and returns a render result 1`] = `"export default function AComponent() {};import { mount } from "svelte"; mount((await import(import.meta.url)).default, { target: document.body });"`;
+
+exports[`vitest pre plugin > produces code with a dummy test suite 1`] = `
+"
+<script>
+  import { Describe, Test, Check } from '../components/core';
+</script>
+<Describe label="A test suite">
+  <Test it="A test case">
+    <Check fn={() => {}} />
+  </Test>
+  <Describe label="A nested test suite">
+    <Test it="A nested test case">
+      <Check fn={() => {}} />
+    </Test>
+  </Describe>
+</Describe>
+<Describe label="Another test suite">
+  <Test it="Another test case">
+    <Check fn={() => {}} />
+  </Test>
+</Describe>
+
+{#if globalThis[Symbol()]}{function () {
+describe("A test suite", () => {
+test("A test case", () => {})
+describe("A nested test suite", () => {
+test("A nested test case", () => {})
+})
+})
+describe("Another test suite", () => {
+test("Another test case", () => {})
+})
+}}{/if}"
+`;

package/src/plugins/vitest.js

@@ -18,13 +18,13 @@ import { SourceMapGenerator, SourceMapConsumer } from 'source-map';
  */
 
 const mountCode =
-  'import { mount } from "svelte"; mount((await import(import.meta.url)).default, { target: document.body });';
+  ';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)';
+  node.attributes.find((a) => a.name === attr)?.value?.[0]?.data ?? '(unnamed)';
 
-const pre = /**@returns {Plugin}*/ () => ({
+const pre = () => ({
   name: 'transform-svelte-declarative-test',
   filter: {
     id: testFileRegex,
@@ -110,7 +110,7 @@ const pre = /**@returns {Plugin}*/ () => ({
   },
 });
 
-const post = /**@returns {Plugin}*/ () => ({
+const post = () => ({
   name: 'transform-svelte-declarative-test',
   filter: {
     id: testFileRegex,
@@ -131,6 +131,7 @@ const post = /**@returns {Plugin}*/ () => ({
   },
 });
 
+/**@returns {import('vitest/config').Plugin[]} */
 export default function getPlugins() {
   return [pre(), post()];
 }

package/src/plugins/vitest.test.ts

@@ -1,3 +1,229 @@
+import { SourceMapConsumer } from 'source-map';
+import getPlugins from './vitest.js';
+
+const dummyTestFile = `
+<script>
+  import { Describe, Test, Check } from '../components/core';
+</script>
+<Describe label="A test suite">
+  <Test it="A test case">
+    <Check fn={() => {}} />
+  </Test>
+  <Describe label="A nested test suite">
+    <Test it="A nested test case">
+      <Check fn={() => {}} />
+    </Test>
+  </Describe>
+</Describe>
+<Describe label="Another test suite">
+  <Test it="Another test case">
+    <Check fn={() => {}} />
+  </Test>
+</Describe>
+`;
+
+const findLineAndColumn = (code: string, substring: string) => {
+  const index = code.indexOf(substring);
+  if (index === -1) {
+    throw new Error(`Substring "${substring}" not found in code.`);
+  }
+
+  const lines = code.slice(0, index).split('\n');
+  const line = lines.length;
+  const column = lines[lines.length - 1].length + 1;
+
+  return { line, column };
+};
+
 describe('vitest pre plugin', () => {
-  test.fails('transforms test files to mount the component', () => {});
+  it('does not transform non-test files', async () => {
+    const [pre] = getPlugins();
+
+    expect(await pre.transform(`<h1>Not a test file</h1>`, 'AComponent.svelte')).toBeUndefined();
+  });
+
+  it('transforms .test.svelte files', async () => {
+    const [pre] = getPlugins();
+
+    expect(await pre.transform(dummyTestFile, 'AComponent.test.svelte')).not.toBeUndefined();
+  });
+
+  it('transforms .spec.svelte files', async () => {
+    const [pre] = getPlugins();
+
+    expect(await pre.transform(dummyTestFile, 'AComponent.spec.svelte')).not.toBeUndefined();
+  });
+
+  it('produces code with a dummy test suite', async () => {
+    const [pre] = getPlugins();
+    const result = await pre.transform(dummyTestFile, 'AComponent.test.svelte');
+
+    expect(result?.code).toMatchSnapshot();
+  });
+
+  it('produces a source map with mappings that point to the Describe and Test components', async () => {
+    const [pre] = getPlugins();
+    const result = (await pre.transform(dummyTestFile, 'AComponent.test.svelte')) as {
+      code: string;
+      map: string;
+    };
+
+    const map = await new SourceMapConsumer(result?.map);
+    const describePosition = findLineAndColumn(result.code, 'describe("A test suite"');
+    const testPosition = findLineAndColumn(result.code, 'test("A test case"');
+    const nestedDescribePosition = findLineAndColumn(result.code, 'describe("A nested test suite"');
+    const nestedTestPosition = findLineAndColumn(result.code, 'test("A nested test case"');
+    const anotherDescribePosition = findLineAndColumn(result.code, 'describe("Another test suite"');
+    const anotherTestPosition = findLineAndColumn(result.code, 'test("Another test case"');
+
+    expect(map.originalPositionFor(describePosition)).toEqual(
+      expect.objectContaining({
+        line: 5,
+        column: 1,
+      }),
+    );
+    expect(map.originalPositionFor(testPosition)).toEqual(
+      expect.objectContaining({
+        line: 6,
+        column: 3,
+      }),
+    );
+    expect(map.originalPositionFor(nestedDescribePosition)).toEqual(
+      expect.objectContaining({
+        line: 9,
+        column: 3,
+      }),
+    );
+    expect(map.originalPositionFor(nestedTestPosition)).toEqual(
+      expect.objectContaining({
+        line: 10,
+        column: 5,
+      }),
+    );
+    expect(map.originalPositionFor(anotherDescribePosition)).toEqual(
+      expect.objectContaining({
+        line: 15,
+        column: 1,
+      }),
+    );
+    expect(map.originalPositionFor(anotherTestPosition)).toEqual(
+      expect.objectContaining({
+        line: 16,
+        column: 3,
+      }),
+    );
+  });
+
+  it('produces (unnamed) suite names for Describe', async () => {
+    const [pre] = getPlugins();
+    const result = (await pre.transform(
+      `
+        <Describe>
+          <Test it="A test case">
+            <Check fn={() => {}} />
+          </Test>
+        </Describe>
+      `,
+      'AComponent.test.svelte',
+    )) as { code: string };
+
+    expect(result.code).toContain('describe("(unnamed)"');
+  });
+
+  it('produces (unnamed) test names for Test', async () => {
+    const [pre] = getPlugins();
+    const result = (await pre.transform(
+      `
+        <Describe label="A test suite">
+          <Test>
+            <Check fn={() => {}} />
+          </Test>
+        </Describe>
+      `,
+      'AComponent.test.svelte',
+    )) as { code: string };
+
+    expect(result.code).toContain('test("(unnamed)"');
+  });
+
+  it('produces (unnamed) suite names when Describe has dynamic label', async () => {
+    const [pre] = getPlugins();
+    const result = (await pre.transform(
+      `
+        <Describe label={someVariable}>
+          <Test it="A test case">
+            <Check fn={() => {}} />
+          </Test>
+        </Describe>
+      `,
+      'AComponent.test.svelte',
+    )) as { code: string };
+
+    expect(result.code).toContain('describe("(unnamed)"');
+  });
+
+  it('produces (unnamed) test names when Test has dynamic name', async () => {
+    const [pre] = getPlugins();
+    const result = (await pre.transform(
+      `
+        <Describe label="A test suite">
+          <Test it={someVariable}>
+            <Check fn={() => {}} />
+          </Test>
+        </Describe>
+      `,
+      'AComponent.test.svelte',
+    )) as { code: string };
+
+    expect(result.code).toContain('test("(unnamed)"');
+  });
+
+  it('does not produce descibe or test calls when no Describe or Test components are present', async () => {
+    const [pre] = getPlugins();
+    const result = (await pre.transform(
+      `
+        <Header>Not a test file</Header>
+      `,
+      'AComponent.test.svelte',
+    )) as { code: string };
+
+    expect(result.code).not.toContain('describe(');
+    expect(result.code).not.toContain('test(');
+  });
+});
+
+describe('vitest post plugin', () => {
+  it('does not transform non-test files', async () => {
+    const [, post] = getPlugins();
+
+    expect(
+      await post.transform(`export default function AComponent() {}`, 'AComponent.svelte'),
+    ).toBeUndefined();
+  });
+
+  it('transforms .test.svelte files to mount the component', async () => {
+    const [, post] = getPlugins();
+
+    expect(
+      await post.transform(`export default function AComponent() {}`, 'AComponent.test.svelte'),
+    ).not.toBeUndefined();
+  });
+
+  it('transforms .spec.svelte files to mount the component', async () => {
+    const [, post] = getPlugins();
+
+    expect(
+      await post.transform(`export default function AComponent() {}`, 'AComponent.spec.svelte'),
+    ).not.toBeUndefined();
+  });
+
+  it('produces code that mounts the component and returns a render result', async () => {
+    const [, post] = getPlugins();
+    const result = await post.transform(
+      `export default function AComponent() {}`,
+      'AComponent.test.svelte',
+    );
+
+    expect(result?.code).toMatchSnapshot();
+  });
 });

package/src/utils/tryFn.js

@@ -0,0 +1,14 @@
+/**
+ * Tries to execute a function and returns its result or undefined if an error occurs.
+ * @template T
+ * @param {T extends (...args: any[]) => any} fn
+ * @returns {ReturnType<T> | undefined}
+ */
+export default function tryFn(fn, ...args) {
+  try {
+    return fn(...args);
+    //eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (error) {
+    return undefined;
+  }
+}

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "lib": ["DOM", "ESNext"],
     "types": ["vitest/globals"],
     "noEmit": true,
     "rewriteRelativeImportExtensions": true,

package/vitest.config.ts

@@ -7,6 +7,22 @@ export default defineConfig({
   logLevel: 'warn',
   plugins: [svelte(), svelteTesting(), getPlugins()],
   test: {
+    projects: [
+      {
+        extends: './vitest.config.ts',
+        test: {
+          name: 'unit',
+          include: ['src/**/*.{test,spec}.ts'],
+        },
+      },
+      {
+        extends: './vitest.config.ts',
+        test: {
+          name: 'examples',
+          include: ['examples/**/*.{test,spec}.svelte'],
+        },
+      },
+    ],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'html'],
@@ -16,6 +32,5 @@ export default defineConfig({
       requireAssertions: true,
     },
     globals: true,
-    include: ['examples/**/*.{test,spec}.svelte', 'src/**/*.{test,spec}.ts'],
   },
 });