test: add simple typing tests (#298)

* test: add simple typing tests

---------

Co-authored-by: Yanick Champoux <[email protected]>

Author: mcous

.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',

.github/workflows/release.yml

@@ -36,9 +36,13 @@ jobs:
           npm install --no-package-lock
           npm install --no-save svelte@${{ matrix.svelte }}
 
-      - name: ▶️ Run validate script
+      - name: ▶️ Run tests
         run: npm run test:${{ matrix.test-runner }}
 
+      - name: ▶️ Run type-checks
+        if: ${{ matrix.node == '20' && matrix.svelte == '4' }}
+        run: npm run types
+
       - name: ⬆️ Upload coverage report
         uses: codecov/codecov-action@v3
 

package.json

@@ -52,13 +52,14 @@
     "format:delta": "npm-run-all format:prettier:delta format:eslint:delta",
     "format:prettier:delta": "prettier --write `./scripts/changed-files`",
     "format:eslint:delta": "eslint --fix `./scripts/changed-files`",
+    "setup": "npm install && npm run validate",
     "test": "vitest run --coverage",
     "test:watch": "vitest",
     "test:update": "vitest run --update",
     "test:vitest:jsdom": "vitest run --coverage --environment jsdom",
     "test:vitest:happy-dom": "vitest run --coverage --environment happy-dom",
-    "setup": "npm install && npm run validate",
-    "validate": "npm-run-all test:vitest:*",
+    "types": "svelte-check",
+    "validate": "npm-run-all test:vitest:* types",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate"
   },
@@ -86,12 +87,14 @@
     "eslint-plugin-simple-import-sort": "10.0.0",
     "eslint-plugin-svelte": "2.35.1",
     "eslint-plugin-vitest-globals": "1.4.0",
+    "expect-type": "^0.17.3",
     "happy-dom": "^13.3.1",
     "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "3.2.4",
     "prettier-plugin-svelte": "3.1.2",
     "svelte": "^3 || ^4",
+    "svelte-check": "^3.6.3",
     "svelte-jester": "^3.0.0",
     "typescript": "^5.3.3",
     "vite": "^4.3.9",

src/__tests__/fixtures/Simple.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let name: string
+</script>
+
+<h1>hello {name}</h1>

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"],
+}

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]>()
+  })
+})