@douglasneuroinformatics/libui 2.5.2 → 2.6.0

package/src/hooks/useTheme.test.ts

@@ -0,0 +1,74 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { mockMatchMedia, mockStorage } from '../testing/mocks.js';
+import { isBrowser } from '../utils.js';
+import { DEFAULT_THEME, SYS_DARK_MEDIA_QUERY, THEME_ATTRIBUTE, THEME_KEY, useTheme } from './useTheme.js';
+
+mockStorage('localStorage');
+
+vi.mock('../utils.js', () => ({ isBrowser: vi.fn(() => true) }));
+
+describe('useTheme', () => {
+  beforeEach(() => {
+    vi.spyOn(window, 'matchMedia');
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+    window.localStorage.clear();
+  });
+  it('should return the default theme if running on the server', () => {
+    vi.mocked(isBrowser).mockReturnValue(false);
+    const { result } = renderHook(() => useTheme());
+    expect(result.current[0]).toBe(DEFAULT_THEME);
+  });
+  it('should return the saved light theme if it exists', () => {
+    window.localStorage.setItem(THEME_KEY, 'light');
+    const { result } = renderHook(() => useTheme());
+    expect(result.current[0]).toBe('light');
+  });
+  it('should return the saved dark theme if it exists', () => {
+    window.localStorage.setItem(THEME_KEY, 'dark');
+    const { result } = renderHook(() => useTheme());
+    expect(result.current[0]).toBe('dark');
+  });
+  it('should return the result of the media query (dark) if there is no saved theme', () => {
+    mockMatchMedia((query) => query === SYS_DARK_MEDIA_QUERY);
+    const { result } = renderHook(() => useTheme());
+    expect(result.current[0]).toBe('dark');
+  });
+  it('should return the result of the media query (light) if there is no saved theme', () => {
+    mockMatchMedia(false);
+    const { result } = renderHook(() => useTheme());
+    expect(result.current[0]).toBe('light');
+  });
+
+  it('should change the theme when updated', async () => {
+    window.localStorage.setItem(THEME_KEY, 'light');
+    const { result } = renderHook(() => useTheme());
+    await act(async () => {
+      result.current[1]('dark');
+      return Promise.resolve();
+    });
+    expect(result.current[0]).toBe('dark');
+  });
+
+  it('should save the theme to localStorage', async () => {
+    window.localStorage.setItem(THEME_KEY, 'light');
+    const { result } = renderHook(() => useTheme());
+    await act(async () => {
+      result.current[1]('dark');
+      return Promise.resolve();
+    });
+    expect(window.localStorage.getItem(THEME_KEY)).toBe('dark');
+  });
+  it('should print to stderr if there is an unexpected theme mutation', async () => {
+    renderHook(() => useTheme());
+    vi.spyOn(console, 'error');
+    await act(async () => {
+      document.documentElement.setAttribute(THEME_ATTRIBUTE, 'INVALID_THEME');
+      return Promise.resolve();
+    });
+    expect(console.error).toHaveBeenLastCalledWith(expect.stringContaining('INVALID_THEME'));
+  });
+});

package/src/hooks/useWindowSize.test.ts

@@ -0,0 +1,57 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { useWindowSize } from './useWindowSize.js';
+
+const setupHook = () => renderHook(() => useWindowSize());
+
+const windowResize = (dimension: 'height' | 'width', value: number): void => {
+  if (dimension === 'width') {
+    window.innerWidth = value;
+  }
+
+  if (dimension === 'height') {
+    window.innerHeight = value;
+  }
+
+  window.dispatchEvent(new Event('resize'));
+};
+
+describe('useElementSize()', () => {
+  it('should initialize', () => {
+    const { result } = setupHook();
+    const { height, width } = result.current;
+    expect(typeof height).toBe('number');
+    expect(typeof width).toBe('number');
+  });
+
+  it('should return the corresponding height', () => {
+    const { result } = setupHook();
+
+    act(() => {
+      windowResize('height', 420);
+    });
+    expect(result.current.height).toBe(420);
+
+    act(() => {
+      windowResize('height', 2196);
+    });
+
+    expect(result.current.height).toBe(2196);
+  });
+
+  it('should return the corresponding width', () => {
+    const { result } = setupHook();
+    act(() => {
+      windowResize('width', 420);
+    });
+
+    expect(result.current.width).toBe(420);
+
+    act(() => {
+      windowResize('width', 2196);
+    });
+
+    expect(result.current.width).toBe(2196);
+  });
+});

package/src/i18n.ts

@@ -22,7 +22,7 @@ export type TranslatedResource<T = EmptyObject> = {
 };
 
 export function transformTranslations<T extends { [key: string]: any }>(translations: T, locale: string) {
-  if (!isPlainObject) {
+  if (!isPlainObject(translations)) {
     throw new Error('Invalid format of translations: must be plain object');
   }
   const result: { [key: string]: unknown } = {};