svelte-declarative-testing 0.3.1 → 0.3.3

package/README.md

@@ -45,25 +45,25 @@ Your tests can look like this:
 </script>
 
 <Test it="opens the menu when the trigger is clicked">
-  <!-- children of the Test are rendered automatically -->
-  <Popover>
-    <PopoverTrigger>Open Menu</PopoverTrigger>
-    <PopoverMenu>
-      <PopoverMenuItem href="/account">Account</PopoverMenuItem>
-      <PopoverMenuItem href="/logout">Log out</PopoverMenuItem>
-    </PopoverMenu>
-  </Popover>
+  <!-- Anything passed via the mount() snippet is rendered for each test -->
+  {#snippet mount()}
+    <Popover>
+      <PopoverTrigger>Open Menu</PopoverTrigger>
+      <PopoverMenu>
+        <PopoverMenuItem href="/account">Account</PopoverMenuItem>
+        <PopoverMenuItem href="/logout">Log out</PopoverMenuItem>
+      </PopoverMenu>
+    </Popover>
+  {/snippet}
 
   <!-- one or more test functions can be provided as checks -->
-  {#snippet checks()}
-    <Check
-      fn={async (screen) => {
-        expect(screen.getByRole('menu', { includeHidden: true })).not.toBeVisible();
-        await screen.getByRole('button', { name: 'Open Menu' }).click();
-        expect(screen.getByRole('menu')).toBeVisible();
-      }}
-    />
-  {/snippet}
+  <Check
+    fn={async (screen) => {
+      expect(screen.getByRole('menu', { includeHidden: true })).not.toBeVisible();
+      await screen.getByRole('button', { name: 'Open Menu' }).click();
+      expect(screen.getByRole('menu')).toBeVisible();
+    }}
+  />
 </Test>
 ```
 
@@ -173,8 +173,8 @@ rendered for each test.
 | Properties | Type       | Description                                                                           |
 | ---------- | ---------- | ------------------------------------------------------------------------------------- |
 | `label`    | `string`   | The descriptive label for the test suite                                              |
-| `children` | `Snippet`  | Any component(s) that you wish to render for the tests                                |
-| `tests`    | `Snippet`  | A snippet block containing one or more `<Test>` elements                              |
+| `mount`    | `Snippet`  | Any component(s) that you wish to render for the tests                                |
+| `children` | `Snippet`  | A snippet block containing one or more `<Test>` elements                              |
 | `skip`     | `any`      | Skips the suite if truthy, just like `describe.skip()`                                |
 | `only`     | `any`      | Only run this suite if truthy, just like `describe.only()`                            |
 | `todo`     | `any`      | Mark the suite as todo if truthy, just like `describe.todo()`                         |
@@ -184,17 +184,17 @@ rendered for each test.
 
 ```svelte
 <Describe label="My Integration Tests">
-  <Button>My button</Button>
+  {#snippet mount()}
+    <Button>My button</Button>
+  {/snippet}
 
-  {#snippet tests()}
-    <Test it="renders an accessible button">
-      <!-- Test body goes here -->
-    </Test>
+  <Test it="renders an accessible button">
+    <!-- Test body goes here -->
+  </Test>
 
-    <Test it="does something when I click the button">
-      <!-- Test body goes here -->
-    </Test>
-  {/snippet}
+  <Test it="does something when I click the button">
+    <!-- Test body goes here -->
+  </Test>
 </Describe>
 ```
 
@@ -213,8 +213,8 @@ parent `<Describe>` are rendered.
 | Properties | Type       | Description                                                                      |
 | ---------- | ---------- | -------------------------------------------------------------------------------- |
 | `it`       | `string`   | The description of the test                                                      |
-| `children` | `Snippet`  | Any component(s) that you wish to render for the test                            |
-| `checks`   | `Snippet`  | A snippet block containing one or more `<Check>` elements                        |
+| `mount`    | `Snippet`  | Any component(s) that you wish to render for the test                            |
+| `children` | `Snippet`  | A snippet block containing one or more `<Check>` elements                        |
 | `skip`     | `any`      | Skips the test if truthy, just like `test.skip()`                                |
 | `only`     | `any`      | Only run this test if truthy, just like `test.only()`                            |
 | `todo`     | `any`      | Mark the test as todo if truthy, just like `test.todo()`                         |
@@ -255,7 +255,7 @@ You can provide as many checks as you like and they will run sequentially.
   {#snippet checks()}
     <Check fn={({queryByRole}) => {
       expect(queryByRole("button")).toBeIntheDocument();
-    }/>
+    }}/>
   {/snippet}
 </Describe>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-declarative-testing",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "A way to mount your Svelte test components declaratively",
   "type": "module",
   "module": "src/index.js",
@@ -37,7 +37,6 @@
   "dependencies": {
     "magic-string": "^0.30.21",
     "source-map": "^0.7.6",
-    "ts-essentials": "^10.1.1",
     "zimmerframe": "^1.1.4"
   },
   "devDependencies": {

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

@@ -1,26 +1,41 @@
 import type { Snippet, Component } from 'svelte';
-import { XOR } from 'ts-essentials';
 
-export type ModifierProps = XOR<
-  /* These are all mutually exclusive */
-  { only: boolean },
-  { todo: boolean },
-  { skip: boolean },
-  { skipIf: () => unknown },
-  { runIf: () => unknown }
->;
+type KeysAsExclusiveUnion<T> = {
+  [K in keyof T]: { [P in K]: T[P] } & { [P in Exclude<keyof T, K>]?: never };
+}[keyof T];
+
+export type ModifierProps = {
+  /* These are all mutually exclusive on Describe and Test */
+  only?: boolean;
+  todo?: boolean;
+  skip?: boolean;
+  skipIf?: () => boolean;
+  runIf?: () => boolean;
+  fails?: boolean;
+};
+
+type ModifiersWithoutFails = Omit<ModifierProps, 'fails'>;
+
+type DescribeModifierProps =
+  | KeysAsExclusiveUnion<ModifiersWithoutFails>
+  | { [K in keyof ModifiersWithoutFails]?: never };
+
+type TestModifierProps =
+  | KeysAsExclusiveUnion<ModifierProps>
+  | { [K in keyof ModifierProps]?: never };
 
 export type DescribeProps = {
   label: string;
   children: Snippet;
   mount?: Snippet;
-} & ModifierProps;
+  fails?: never;
+} & DescribeModifierProps;
 
 export type BaseTestProps = {
   it: string;
   children: Snippet;
   mount?: Snippet;
-} & XOR<ModifierProps, { fails: boolean }>;
+} & TestModifierProps;
 
 type RenderResult = {
   unmount: () => void | Promise<void>;

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

@@ -1,6 +1,6 @@
 // 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 post plugin > produces code that mounts the component and returns a render result 1`] = `"export default function AComponent() {};import { mount as svelte_declarative_testing_mount } from "svelte";svelte_declarative_testing_mount(AComponent_test, { target: document.body });"`;
 
 exports[`vitest pre plugin > produces code with a dummy test suite 1`] = `
 "

package/src/plugins/index.d.ts

@@ -0,0 +1,3 @@
+import { type Plugin } from 'vitest/config';
+
+export default function getPlugins(): Plugin[];

package/src/plugins/vitest.js

@@ -17,8 +17,8 @@ import { SourceMapGenerator, SourceMapConsumer } from 'source-map';
  *    imported so that the tests run.
  */
 
-const mountCode =
-  ';import { mount } from "svelte"; mount((await import(import.meta.url)).default, { target: document.body });';
+const getMountCode = (/**@type {string}*/ name) =>
+  `;import { mount as svelte_declarative_testing_mount } from "svelte";svelte_declarative_testing_mount(${name}, { target: document.body });`;
 
 const testFileRegex = /\.(?:test|spec)\.svelte$/;
 const getNameFromAttr = (node, attr) =>
@@ -123,9 +123,10 @@ const post = () => ({
 
     const s = new MagicString(code);
 
-    // We mount by reimporting the default export of the Svelte file (the
-    // component). This is the magic that runs the tests.
-    s.append(mountCode);
+    // TODO: find a more robust way to get the component name
+    const name = id.split('/').pop().replace('.svelte', '').replace(/\./g, '_');
+
+    s.append(getMountCode(name));
 
     return { code: s.toString() };
   },

package/.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "svelte.svelte-vscode",
-    "vitest.explorer",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
-  ]
-}