Fix unit tests and add GitHub action (#4107)

Author: katspaugh

.github/workflows/unit-tests.yml

@@ -0,0 +1,11 @@
+name: Unit Tests
+on: [pull_request]
+
+jobs:
+  jest:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/workflows/yarn
+      - name: Run unit tests
+        run: yarn test:unit

src/__tests__/draggable.test.ts

@@ -1,6 +1,27 @@
 import { makeDraggable } from '../draggable.js'
 
 describe('makeDraggable', () => {
+  beforeAll(() => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockReturnValue({
+        matches: false,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+      }),
+    })
+    if (typeof window.PointerEvent === 'undefined') {
+      class FakePointerEvent extends MouseEvent {
+        constructor(type: string, props: any) {
+          super(type, props)
+        }
+      }
+      // @ts-ignore
+      window.PointerEvent = FakePointerEvent
+      // @ts-ignore
+      global.PointerEvent = FakePointerEvent
+    }
+  })
   test('invokes callbacks on drag', () => {
     const el = document.createElement('div')
     document.body.appendChild(el)

src/__tests__/fetcher.test.ts

@@ -1,11 +1,27 @@
 import Fetcher from '../fetcher.js'
+import { TextEncoder } from 'util'
+import { Blob as NodeBlob } from 'buffer'
 
 describe('Fetcher', () => {
   test('fetchBlob returns blob and reports progress', async () => {
     const data = 'hello'
-    const response = new Response(data, {
-      headers: { 'Content-Length': data.length.toString() },
-    })
+    const reader = {
+      read: jest
+        .fn()
+        .mockResolvedValueOnce({ done: false, value: new TextEncoder().encode(data) })
+        .mockResolvedValueOnce({ done: true, value: undefined }),
+    }
+    const response = {
+      status: 200,
+      statusText: 'OK',
+      headers: new Headers({ 'Content-Length': data.length.toString() }),
+      body: { getReader: () => reader },
+      clone() {
+        return this
+      },
+      blob: async () => new NodeBlob([data]),
+    } as unknown as Response
+
     global.fetch = jest.fn().mockResolvedValue(response)
 
     const progress = jest.fn()

src/__tests__/timer.test.ts

@@ -5,10 +5,14 @@ describe('Timer', () => {
     const timer = new Timer()
     const tick = jest.fn()
     timer.on('tick', tick)
-    global.requestAnimationFrame = (cb: FrameRequestCallback) => {
-      cb(0)
-      return 1
-    }
+    const raf = jest
+      .fn()
+      .mockImplementationOnce((cb: FrameRequestCallback) => {
+        cb(0)
+        return 1
+      })
+      .mockImplementation(() => 1)
+    global.requestAnimationFrame = raf
     timer.start()
     expect(tick).toHaveBeenCalledTimes(2)
   })

src/dom.ts

@@ -12,11 +12,12 @@ function renderNode(tagName: string, content: TreeNode): HTMLElement | SVGElemen
 
   for (const [key, value] of Object.entries(content)) {
     if (key === 'children') {
-      for (const [key, value] of Object.entries(content)) {
-        if (typeof value === 'string') {
-          element.appendChild(document.createTextNode(value))
+      const children = value as TreeNode
+      for (const [childTag, childValue] of Object.entries(children)) {
+        if (typeof childValue === 'string') {
+          element.appendChild(document.createTextNode(childValue))
         } else {
-          element.appendChild(renderNode(key, value as TreeNode))
+          element.appendChild(renderNode(childTag, childValue as TreeNode))
         }
       }
     } else if (key === 'style') {

src/timer.ts

@@ -18,6 +18,7 @@ class Timer extends EventEmitter<TimerEvents> {
 
   stop() {
     this.unsubscribe()
+    this.unAll()
   }
 
   destroy() {