feat: publish HoloLake model-native living system source

product-source/hololake-platform/src/hooks/useThemeMode.test.ts

@@ -0,0 +1,113 @@
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { THEME_MODE_STORAGE_KEY } from '../lib/themeMode'
+import { useThemeMode } from './useThemeMode'
+
+function createStorageMock(): Storage {
+  const values = new Map<string, string>()
+  return {
+    get length() { return values.size },
+    clear: vi.fn(() => { values.clear() }),
+    getItem: vi.fn((key: string) => values.get(key) ?? null),
+    key: vi.fn((index: number) => Array.from(values.keys())[index] ?? null),
+    removeItem: vi.fn((key: string) => { values.delete(key) }),
+    setItem: vi.fn((key: string, value: string) => { values.set(key, value) }),
+  }
+}
+
+describe('useThemeMode', () => {
+  const localStorageMock = createStorageMock()
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'localStorage', { value: localStorageMock, configurable: true })
+    installMatchMedia(false)
+    document.documentElement.removeAttribute('data-theme')
+    document.documentElement.classList.remove('dark')
+    window.localStorage.clear()
+  })
+
+  it('waits until settings have loaded', () => {
+    renderHook(() => useThemeMode('dark', false))
+
+    expect(document.documentElement).not.toHaveAttribute('data-theme')
+  })
+
+  it('applies and mirrors the loaded settings mode', () => {
+    renderHook(() => useThemeMode('dark', true))
+
+    expect(document.documentElement).toHaveAttribute('data-theme', 'dark')
+    expect(document.documentElement).toHaveClass('dark')
+    expect(window.localStorage.getItem(THEME_MODE_STORAGE_KEY)).toBe('dark')
+  })
+
+  it('uses the storage mirror when persisted settings are empty', () => {
+    window.localStorage.setItem(THEME_MODE_STORAGE_KEY, 'dark')
+
+    renderHook(() => useThemeMode(null, true))
+
+    expect(document.documentElement).toHaveAttribute('data-theme', 'dark')
+  })
+
+  it('keeps system stored while applying the resolved OS appearance', () => {
+    installMatchMedia(true)
+
+    renderHook(() => useThemeMode('system', true))
+
+    expect(document.documentElement).toHaveAttribute('data-theme', 'dark')
+    expect(document.documentElement).toHaveClass('dark')
+    expect(window.localStorage.getItem(THEME_MODE_STORAGE_KEY)).toBe('system')
+  })
+
+  it('updates the document theme when the OS appearance changes in system mode', () => {
+    const media = installMatchMedia(true)
+
+    const { unmount } = renderHook(() => useThemeMode('system', true))
+
+    act(() => media.setMatches(false))
+    expect(document.documentElement).toHaveAttribute('data-theme', 'light')
+    expect(document.documentElement).not.toHaveClass('dark')
+
+    unmount()
+    act(() => media.setMatches(true))
+    expect(document.documentElement).toHaveAttribute('data-theme', 'light')
+  })
+})
+
+function installMatchMedia(initialMatches: boolean) {
+  let matches = initialMatches
+  const listeners = new Set<(event: MediaQueryListEvent) => void>()
+  const media = '(prefers-color-scheme: dark)'
+  const mediaQueryList: MediaQueryList = {
+    get matches() { return matches },
+    media,
+    onchange: null,
+    addEventListener: (_type, listener) => {
+      if (_type !== 'change' || typeof listener !== 'function') return
+      listeners.add(listener)
+    },
+    removeEventListener: (_type, listener) => {
+      if (_type !== 'change' || typeof listener !== 'function') return
+      listeners.delete(listener)
+    },
+    addListener: (listener) => listeners.add(listener),
+    removeListener: (listener) => listeners.delete(listener),
+    dispatchEvent: () => true,
+  }
+
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    value: vi.fn(() => mediaQueryList),
+  })
+
+  return {
+    setMatches(nextMatches: boolean) {
+      matches = nextMatches
+      const event = new Event('change') as MediaQueryListEvent
+      Object.defineProperties(event, {
+        matches: { value: nextMatches },
+        media: { value: media },
+      })
+      for (const listener of listeners) listener(event)
+    },
+  }
+}