From 4cc2fcec111fa126f5cd450926446b661ead1fe7 Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael.cousins@viam.com>
Date: Mon, 29 Jan 2024 13:12:30 +1100
Subject: [PATCH] test: add simple typing tests

---
 .eslintrc.cjs                        |  7 ++++
 package.json                         |  5 ++-
 src/__tests__/fixtures/Simple.svelte |  5 +++
 tsconfig.json                        | 10 +++++
 types/types.test-d.ts                | 58 ++++++++++++++++++++++++++++
 5 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/__tests__/fixtures/Simple.svelte
 create mode 100644 tsconfig.json
 create mode 100644 types/types.test-d.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 0bd04ba..5a18bf8 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -16,6 +16,13 @@ module.exports = {
     'simple-import-sort/imports': 'error',
   },
   overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
     {
       files: ['*.ts'],
       parser: '@typescript-eslint/parser',
diff --git a/package.json b/package.json
index afe5e54..c18c0e8 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,9 @@
     "test": "vitest run --coverage",
     "test:watch": "vitest",
     "test:update": "vitest run --update",
+    "types": "svelte-check",
     "setup": "npm install && npm run validate",
-    "validate": "npm-run-all lint test",
+    "validate": "npm-run-all lint test types",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate"
   },
@@ -79,6 +80,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-svelte": "^2.32.0",
     "eslint-plugin-vitest-globals": "^1.3.1",
+    "expect-type": "^0.17.3",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "lint-staged": "^13.2.3",
@@ -86,6 +88,7 @@
     "prettier": "^3.0.0",
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.0.1",
+    "svelte-check": "^3.6.3",
     "svelte-jester": "^3.0.0",
     "typescript": "^5.3.3",
     "vite": "^4.3.9",
diff --git a/src/__tests__/fixtures/Simple.svelte b/src/__tests__/fixtures/Simple.svelte
new file mode 100644
index 0000000..3fa20ce
--- /dev/null
+++ b/src/__tests__/fixtures/Simple.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let name: string
+</script>
+
+<h1>hello {name}</h1>
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..504b256
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "module": "node16",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "types": ["svelte", "vite/client", "vitest", "vitest/globals"],
+  },
+  "include": ["src", "types"],
+}
diff --git a/types/types.test-d.ts b/types/types.test-d.ts
new file mode 100644
index 0000000..bfb8f85
--- /dev/null
+++ b/types/types.test-d.ts
@@ -0,0 +1,58 @@
+import { expectTypeOf } from 'expect-type'
+import type { ComponentProps, SvelteComponent } from 'svelte'
+import { describe, test } from 'vitest'
+
+import Simple from '../src/__tests__/fixtures/Simple.svelte'
+import * as subject from './index.js'
+
+describe('types', () => {
+  test('render is a function that accepts a Svelte component', () => {
+    subject.render(Simple, { name: 'Alice' })
+    subject.render(Simple, { props: { name: 'Alice' } })
+  })
+
+  test('invalid prop types are rejected', () => {
+    // @ts-expect-error: name should be a string
+    subject.render(Simple, { name: 42 })
+
+    // @ts-expect-error: name should be a string
+    subject.render(Simple, { props: { name: 42 } })
+  })
+
+  test('render result has container and component', () => {
+    const result = subject.render(Simple, { name: 'Alice' })
+
+    expectTypeOf(result).toMatchTypeOf<{
+      container: HTMLElement
+      component: SvelteComponent<{ name: string }>
+      debug: (el?: HTMLElement) => void
+      rerender: (options: ComponentProps<Simple>) => void
+      unmount: () => void
+    }>()
+  })
+
+  test('render result has default queries', () => {
+    const result = subject.render(Simple, { name: 'Alice' })
+
+    expectTypeOf(result.getByRole).parameters.toMatchTypeOf<
+      [role: subject.ByRoleMatcher, options?: subject.ByRoleOptions]
+    >()
+  })
+
+  test('render result can have custom queries', () => {
+    const [getByVibes] = subject.buildQueries(
+      (_container: HTMLElement, vibes: string) => {
+        throw new Error(`unimplemented ${vibes}`)
+      },
+      () => '',
+      () => ''
+    )
+    const result = subject.render(
+      Simple,
+      { name: 'Alice' },
+      { queries: { getByVibes } }
+    )
+
+    expectTypeOf(result.getByVibes).parameters.toMatchTypeOf<[vibes: string]>()
+  })
+})