Add types test

.github/workflows/qc-check.yml

@@ -51,6 +51,10 @@ jobs:
       working-directory: ./server
       run: npm test
 
+    - name: Test Types
+      working-directory: ./server
+      run: npm run test:types
+
   test-client:
     runs-on: ubuntu-latest
 
@@ -70,3 +74,7 @@ jobs:
     - name: Run Tests
       working-directory: ./client
       run: npm test -- run
+
+    - name: Test Types
+      working-directory: ./client
+      run: npm run test:types

client/package.json

@@ -10,7 +10,8 @@
     "dev": "vite",
     "build": "vue-tsc -p tsconfig.build.json && vite build",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "test:types": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@heroicons/vue": "^2.1.1",

client/src/__tests__/setup.ts

@@ -1,16 +1,37 @@
 import createFetchMock from 'vitest-fetch-mock'
-import { vi } from 'vitest'
+import { expect, vi } from 'vitest'
 const fetchMocker = createFetchMock(vi)
-import { VueWrapper } from '@vue/test-utils'
+import { DOMWrapper, VueWrapper } from '@vue/test-utils'
 
 fetchMocker.enableMocks()
 
-HTMLCanvasElement.prototype.getContext = () => {
-  // return whatever getContext has to return
-}
-
 // Vue Wrapper helpers
 
-VueWrapper.prototype.byTestId = function (this: VueWrapper, id: string)  {
+VueWrapper.prototype.byTestId = function<NodeType extends Node> (
+  this: VueWrapper<NodeType>,
+  id: string
+): DOMWrapper<Element> {
   return this.find(`[data-testid="${id}"]`)
 }
+
+// Custom matchers
+
+expect.extend({
+  toBeValue: function (wrapper: DOMWrapper<Element>, value: string) {
+    const element = wrapper.element
+    if (!(element instanceof HTMLInputElement)) {
+      return {
+        pass: false,
+        message: () => 'element is not an input',
+      }
+    }
+
+    const { isNot } = this
+
+    return {
+      pass : element.value === value,
+      message: () =>
+        `expected ${element.value}${isNot ? ' not' : ''} to be ${value}`,
+    }
+  },
+})

client/src/__tests__/test-extensions.d.ts

@@ -1,7 +1,18 @@
-import { VueWrapper } from '@vue/test-utils' // eslint-disable-line
+import { DOMWrapper } from '@vue/test-utils'
+import 'vitest'
 
 declare module '@vue/test-utils' {
-  interface VueWrapper<VM, T> {
-    byTestId(id: string): VueWrapper<VM, T>;
+  interface VueWrapper {
+    byTestId(id: string): DOMWrapper<Element>;
   }
 }
+
+
+interface CustomMatchers<R = unknown> {
+  toBeValue: (value: string) => R
+}
+
+declare module 'vitest' {
+  interface Assertion<T = any> extends CustomMatchers<T> {} // eslint-disable-line
+  interface AsymmetricMatchersContaining extends CustomMatchers {} // eslint-disable-line
+}

client/src/components/__tests__/Notifications.spec.ts

@@ -1,14 +1,14 @@
 /** @vitest-environment jsdom */
 
 import { beforeEach, describe, expect, it } from 'vitest'
-import { VueWrapper, mount } from '@vue/test-utils'
+import { DOMWrapper, VueWrapper, mount } from '@vue/test-utils'
 import Notifications from '@components/Notifications.vue'
 import { notifications } from '@client/state/notificationState'
 import { nextTick } from 'vue'
 import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from '@heroicons/vue/24/solid'
 
 let wrapper: VueWrapper
-let notification: VueWrapper
+let notification: DOMWrapper<Element>
 
 describe('default', () => {
   beforeEach(() => {
@@ -119,6 +119,7 @@ describe('message open', () => {
 describe('Message called via query param', () => {
   beforeEach(async () => {
     window.location = {
+      ...window.location,
       search: '?message=Hello%20World',
     }
     wrapper = mount(Notifications)
@@ -137,6 +138,7 @@ describe('Message called via query param', () => {
 describe('Message called via query param with type', () => {
   beforeEach(async () => {
     window.location = {
+      ...window.location,
       search: '?message=Hello%20World&type=success',
     }
     wrapper = mount(Notifications)

client/src/components/__tests__/RsvpModal.spec.ts

@@ -23,8 +23,8 @@ describe('name and email already set', () => {
     rsvpModal.open(week)
     const wrapper = mount(RsvpModal)
 
-    expect(wrapper.byTestId('input-name').element.value).toEqual('John Doe')
-    expect(wrapper.byTestId('input-email').element.value).toEqual('jdoe@example.com')
+    expect(wrapper.byTestId('input-name')).toBeValue('John Doe')
+    expect(wrapper.byTestId('input-email')).toBeValue('jdoe@example.com')
   })
 })
 
@@ -52,11 +52,11 @@ describe('only name input', () => {
 
 describe('rsvp submit', () => {
   beforeEach(async () => {
-    fetch.doMock()
+    window.fetch.doMock()
     vi.mock(import('@client/utilities/confetti'), () => ({
       fireConfetti: vi.fn(),
     }))
-    fetch.mockResponseOnce(JSON.stringify({}))
+    window.fetch.mockResponseOnce(JSON.stringify({}))
     const week = new WeekFactory().build({
       weekId: '2020-01-01',
     })
@@ -69,11 +69,11 @@ describe('rsvp submit', () => {
   })
 
   it('calls api with the correct data', async () => {
-    expect(fetch.requests().length).toEqual(1)
-    const request = fetch.requests()[0]
+    expect(window.fetch.requests().length).toEqual(1)
+    const request = window.fetch.requests()[0]
     expect(request.method).toEqual('POST')
     expect(request.url).toEqual('/api/weeks/2020-01-01/rsvp')
-    expect(JSON.parse(request.body)).toEqual({
+    expect(await request.json()).toEqual({
       name: 'John Doe',
       email: 'jdoe@example.com',
       plusOne: false,

client/src/global.d.ts

@@ -1,5 +1,7 @@
 import { FetchMock } from 'vitest-fetch-mock'
 
 declare global {
-  let fetch: FetchMock
+  interface Window {
+    fetch: FetchMock
+  }
 }

package.json

@@ -18,7 +18,8 @@
     "start": "node built/server/src/index.js",
     "test": "npm run test:server && npm run test:client",
     "test:server": "npm run --prefix server test",
-    "test:client": "npm run --prefix client test -- run"
+    "test:client": "npm run --prefix client test -- run",
+    "test:types": "npm run --prefix server test:types && npm run --prefix client test:types"
   },
   "keywords": [
     "notion",

server/__tests__/support/notionHelpers.ts

@@ -129,6 +129,7 @@ export const pageObjectResponse = (
     object: 'user',
   },
   url: '',
+  in_trash: false,
 })
 
 export type QueryBody = {

server/package.json

@@ -12,6 +12,7 @@
     "postbuild": "cp -R node_modules ../built/node_modules",
     "test": "jest",
     "test-watch": "jest --watch",
+    "test:types": "tsc --noEmit",
     "coverage": "jest --coverage"
   },
   "nodemonConfig": {