chore: init tests

Author: PatrickDinh

package-lock.json

@@ -47,6 +47,8 @@
     "@makerx/prettier-config": "^2.0.0",
     "@makerx/ts-config": "^1.0.1",
     "@tauri-apps/cli": "^1.5.11",
+    "@testing-library/react": "^14.2.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.11.26",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
@@ -62,6 +64,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-tailwindcss": "^3.15.1",
+    "happy-dom": "^14.4.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",

package.json

@@ -10,7 +10,7 @@ export function ThemeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="default" size="icon">
+        <Button variant="default" size="icon" data-testid="theme-toggle-menu">
           <Sun className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>

src/features/theme/components/theme-toggle.tsx

@@ -0,0 +1,152 @@
+interface MediaQueryList {
+  readonly matches: boolean
+  readonly media: string
+  onchange: ((this: MediaQueryList, ev: MediaQueryListEvent) => unknown) | null
+  /** @deprecated */
+  addListener(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => unknown) | null): void
+  /** @deprecated */
+  removeListener(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => unknown) | null): void
+  addEventListener<K extends keyof MediaQueryListEventMap>(
+    type: K,
+    listener: (this: MediaQueryList, ev: MediaQueryListEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions
+  ): void
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void
+  removeEventListener<K extends keyof MediaQueryListEventMap>(
+    type: K,
+    listener: (this: MediaQueryList, ev: MediaQueryListEventMap[K]) => unknown,
+    options?: boolean | EventListenerOptions
+  ): void
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void
+}
+
+type MediaQueryListener = (this: MediaQueryList, ev: MediaQueryListEvent) => void
+
+export default class MatchMediaMock {
+  private mediaQueries: {
+    [key: string]: MediaQueryListener[]
+  } = {}
+
+  private mediaQueryList!: MediaQueryList
+
+  private currentMediaQuery!: string
+
+  constructor() {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      configurable: true,
+      value: (query: string): MediaQueryList => {
+        this.mediaQueryList = {
+          matches: query === this.currentMediaQuery,
+          media: query,
+          onchange: null,
+          addListener: (listener: MediaQueryListener) => {
+            this.addListener(query, listener)
+          },
+          removeListener: (listener: MediaQueryListener) => {
+            this.removeListener(query, listener)
+          },
+          addEventListener: (type: string, listener: EventListener) => {
+            if (type !== 'change') return
+
+            this.addListener(query, listener)
+          },
+          removeEventListener: (type: string, listener: EventListener) => {
+            if (type !== 'change') return
+
+            this.removeListener(query, listener)
+          },
+        }
+
+        return this.mediaQueryList
+      },
+    })
+  }
+
+  /**
+   * Adds a new listener function for the specified media query
+   * @private
+   */
+  private addListener(mediaQuery: string, listener: MediaQueryListener): void {
+    if (!this.mediaQueries[mediaQuery]) {
+      this.mediaQueries[mediaQuery] = []
+    }
+
+    const query = this.mediaQueries[mediaQuery]
+    const listenerIndex = query.indexOf(listener)
+
+    if (listenerIndex !== -1) return
+    query.push(listener)
+  }
+
+  /**
+   * Removes a previously added listener function for the specified media query
+   * @private
+   */
+  private removeListener(mediaQuery: string, listener: MediaQueryListener): void {
+    if (!this.mediaQueries[mediaQuery]) return
+
+    const query = this.mediaQueries[mediaQuery]
+    const listenerIndex = query.indexOf(listener)
+
+    if (listenerIndex === -1) return
+    query.splice(listenerIndex, 1)
+  }
+
+  /**
+   * Updates the currently used media query,
+   * and calls previously added listener functions registered for this media query
+   * @public
+   */
+  public useMediaQuery(mediaQuery: string): never | void {
+    if (typeof mediaQuery !== 'string') throw new Error('Media Query must be a string')
+
+    this.currentMediaQuery = mediaQuery
+
+    if (!this.mediaQueries[mediaQuery]) return
+
+    const mqListEvent: Partial<MediaQueryListEvent> = {
+      matches: true,
+      media: mediaQuery,
+    }
+
+    this.mediaQueries[mediaQuery].forEach((listener) => {
+      listener.call(this.mediaQueryList, mqListEvent as MediaQueryListEvent)
+    })
+  }
+
+  /**
+   * Returns an array listing the media queries for which the matchMedia has registered listeners
+   * @public
+   */
+  public getMediaQueries(): string[] {
+    return Object.keys(this.mediaQueries)
+  }
+
+  /**
+   * Returns a copy of the array of listeners for the specified media query
+   * @public
+   */
+  public getListeners(mediaQuery: string): MediaQueryListener[] {
+    if (!this.mediaQueries[mediaQuery]) return []
+    return this.mediaQueries[mediaQuery].slice()
+  }
+
+  /**
+   * Clears all registered media queries and their listeners
+   * @public
+   */
+  public clear(): void {
+    this.mediaQueries = {}
+    this.currentMediaQuery = ''
+  }
+
+  /**
+   * Clears all registered media queries and their listeners,
+   * and destroys the implementation of `window.matchMedia`
+   * @public
+   */
+  public destroy(): void {
+    this.clear()
+  }
+}

src/tests/mock-match-media.tsx

@@ -0,0 +1,51 @@
+import { LayoutProvider } from '@/features/layout/context/layout-provider'
+import { ThemeProvider } from '@/features/theme/context/theme-provider'
+import { TooltipProvider } from '@radix-ui/react-tooltip'
+import { queries, render, renderHook, screen, within } from '@testing-library/react'
+import type { createStore } from 'jotai'
+import { Provider as JotaiProvider } from 'jotai'
+import type { PropsWithChildren } from 'react'
+import { MemoryRouter } from 'react-router'
+
+const allQueries = {
+  ...queries,
+}
+
+const customScreen = {
+  ...within(document.body, allQueries),
+  debug: screen.debug,
+}
+
+type JotaiStore = ReturnType<typeof createStore>
+
+// eslint-disable-next-line react-refresh/only-export-components
+const Providers =
+  (store?: JotaiStore) =>
+  ({ children }: PropsWithChildren) => {
+    return (
+      <JotaiProvider store={store}>
+        <ThemeProvider>
+          <TooltipProvider>
+            <LayoutProvider>
+              <MemoryRouter>{children}</MemoryRouter>
+            </LayoutProvider>
+          </TooltipProvider>
+        </ThemeProvider>
+      </JotaiProvider>
+    )
+  }
+
+const customRender = (ui: Parameters<typeof render>[0], options?: Parameters<typeof render>[1], store?: ReturnType<typeof createStore>) =>
+  render(ui, { wrapper: Providers(store), ...options })
+
+const customRenderHook = (
+  ui: Parameters<typeof renderHook>[0],
+  options?: Parameters<typeof renderHook>[1],
+  store?: ReturnType<typeof createStore>
+) => renderHook(ui, { wrapper: Providers(store), ...options })
+
+// re-export everything
+// eslint-disable-next-line react-refresh/only-export-components
+export * from '@testing-library/react'
+// override render method
+export { customRender as render, customRenderHook as renderHook, customScreen as screen }

src/tests/testing-library.tsx

@@ -0,0 +1,40 @@
+import { describe, it, expect, beforeAll } from 'vitest'
+import { render, waitFor, screen } from '../src/tests/testing-library'
+import MatchMediaMock from '@/tests/mock-match-media'
+import { afterEach } from 'node:test'
+import { ThemeToggle } from '@/features/theme/components/theme-toggle'
+import userEvent from '@testing-library/user-event'
+
+describe('when using the default system light theme', () => {
+  beforeAll(() => {
+    render(<ThemeToggle />)
+  })
+
+  it('the theme is set to light', async () => {
+    await waitFor(() => expect(document.documentElement.classList.contains('light')).toBe(true))
+  })
+
+  describe('when the theme is toggled to dark', () => {
+    it('the theme is set to dark', async () => {
+      userEvent.click(await screen.findByTestId('theme-toggle-menu'))
+      userEvent.click(await screen.findByText('Dark'))
+
+      await waitFor(() => expect(document.documentElement.classList.contains('dark')).toBe(true))
+    })
+  })
+})
+
+describe('when using the default system dark theme', () => {
+  const matchMediaMock = new MatchMediaMock()
+
+  beforeAll(() => {
+    // Set system theme to dark
+    matchMediaMock.useMediaQuery('(prefers-color-scheme: dark)')
+    render(<ThemeToggle />)
+  })
+  afterEach(() => matchMediaMock.clear())
+
+  it('the theme is set to dark', async () => {
+    await waitFor(() => expect(document.documentElement.classList.contains('dark')).toBe(true))
+  })
+})

tests/theme.test.tsx

@@ -25,6 +25,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"],
+  "include": ["src", "tests"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.json

@@ -8,6 +8,7 @@ export default defineConfig({
   plugins: [react()],
   test: {
     root: 'tests',
+    environment: 'happy-dom',
   },
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`