@youversion/platform-react-hooks 1.18.1 → 1.20.0

package/src/useLanguage.test.tsx

@@ -26,8 +26,6 @@ describe('useLanguage', () => {
   };
 
   beforeEach(() => {
-    vi.resetAllMocks();
-
     mockGetLanguage.mockResolvedValue(mockLanguage);
 
     const mockClient: Partial<LanguagesClient> = { getLanguage: mockGetLanguage };
@@ -45,8 +43,8 @@ describe('useLanguage', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(mockGetLanguage).toHaveBeenCalledWith('en');
-      expect(result.current.language).toEqual(mockLanguage);
+      expect.soft(mockGetLanguage).toHaveBeenCalledWith('en');
+      expect.soft(result.current.language).toEqual(mockLanguage);
     });
 
     it('should refetch when languageId changes', async () => {
@@ -58,8 +56,8 @@ describe('useLanguage', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(mockGetLanguage).toHaveBeenCalledTimes(1);
-      expect(mockGetLanguage).toHaveBeenCalledWith('en');
+      expect.soft(mockGetLanguage).toHaveBeenCalledTimes(1);
+      expect.soft(mockGetLanguage).toHaveBeenCalledWith('en');
 
       rerender({ languageId: 'es' });
 
@@ -77,8 +75,8 @@ describe('useLanguage', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(mockGetLanguage).not.toHaveBeenCalled();
-      expect(result.current.language).toBe(null);
+      expect.soft(mockGetLanguage).not.toHaveBeenCalled();
+      expect.soft(result.current.language).toBe(null);
     });
 
     it('should handle fetch errors', async () => {
@@ -91,8 +89,8 @@ describe('useLanguage', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(result.current.error).toEqual(error);
-      expect(result.current.language).toBe(null);
+      expect.soft(result.current.error).toEqual(error);
+      expect.soft(result.current.language).toBe(null);
     });
 
     it('should support manual refetch', async () => {

package/src/useLanguageClient.test.tsx

@@ -1,11 +1,11 @@
 import { renderHook } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, expect, vi, beforeEach, it } from 'vitest';
 import type { ReactNode } from 'react';
 import { useLanguagesClient } from './useLanguageClient';
 import { YouVersionContext } from './context';
 import { LanguagesClient, ApiClient } from '@youversion/platform-core';
+import { createYVWrapper } from './test/utils';
 
-// Mock the core package
 vi.mock('@youversion/platform-core', async () => {
   const actual = await vi.importActual('@youversion/platform-core');
   return {
@@ -20,17 +20,7 @@ vi.mock('@youversion/platform-core', async () => {
 });
 
 describe('useLanguagesClient', () => {
-  const mockAppKey = 'test-app-key';
-
-  const createWrapper = (contextValue: { appKey: string }) => {
-    return ({ children }: { children: ReactNode }) => (
-      <YouVersionContext.Provider value={contextValue}>{children}</YouVersionContext.Provider>
-    );
-  };
-
   beforeEach(() => {
-    vi.resetAllMocks();
-
     vi.mocked(LanguagesClient).mockImplementation(function () {
       const mockClient: Partial<LanguagesClient> = { getLanguages: vi.fn() };
       return mockClient;
@@ -50,9 +40,9 @@ describe('useLanguagesClient', () => {
     });
 
     it('should throw error when appKey is missing', () => {
-      const wrapper = createWrapper({
-        appKey: '',
-      });
+      const wrapper = ({ children }: { children: ReactNode }) => (
+        <YouVersionContext.Provider value={{ appKey: '' }}>{children}</YouVersionContext.Provider>
+      );
 
       expect(() => renderHook(() => useLanguagesClient(), { wrapper })).toThrow(
         'YouVersion context not found. Make sure your component is wrapped with YouVersionProvider and an API key is provided.',
@@ -62,23 +52,17 @@ describe('useLanguagesClient', () => {
 
   describe('client creation', () => {
     it('should create LanguagesClient with correct ApiClient config', () => {
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
+      const wrapper = createYVWrapper();
       renderHook(() => useLanguagesClient(), { wrapper });
 
       expect(ApiClient).toHaveBeenCalledWith({
-        appKey: mockAppKey,
+        appKey: 'test-app-key',
       });
       expect(LanguagesClient).toHaveBeenCalledWith(expect.objectContaining({ isApiClient: true }));
     });
 
     it('should memoize LanguagesClient instance', () => {
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
+      const wrapper = createYVWrapper();
       const { rerender } = renderHook(() => useLanguagesClient(), { wrapper });
 
       rerender();
@@ -87,7 +71,7 @@ describe('useLanguagesClient', () => {
     });
 
     it('should create new LanguagesClient when context values change', () => {
-      let currentAppKey = mockAppKey;
+      let currentAppKey = 'test-app-key';
 
       const wrapper = ({ children }: { children: ReactNode }) => (
         <YouVersionContext.Provider

package/src/useLanguages.test.tsx

@@ -1,8 +1,6 @@
 import { renderHook, waitFor, act } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import type { ReactNode } from 'react';
+import { describe, expect, vi, beforeEach, it } from 'vitest';
 import { useLanguages } from './useLanguages';
-import { YouVersionContext } from './context';
 import {
   type LanguagesClient,
   type Collection,
@@ -10,11 +8,11 @@ import {
   type GetLanguagesOptions,
 } from '@youversion/platform-core';
 import { useLanguagesClient } from './useLanguageClient';
+import { createYVWrapper } from './test/utils';
 
 vi.mock('./useLanguageClient');
 
 describe('useLanguages', () => {
-  const mockAppKey = 'test-app-key';
   const mockGetLanguages = vi.fn();
 
   const mockLanguages: Collection<Language> = {
@@ -59,15 +57,7 @@ describe('useLanguages', () => {
     next_page_token: null,
   };
 
-  const createWrapper = (contextValue: { appKey: string }) => {
-    return ({ children }: { children: ReactNode }) => (
-      <YouVersionContext.Provider value={contextValue}>{children}</YouVersionContext.Provider>
-    );
-  };
-
   beforeEach(() => {
-    vi.resetAllMocks();
-
     mockGetLanguages.mockResolvedValue(mockLanguages);
 
     const mockClient: Partial<LanguagesClient> = { getLanguages: mockGetLanguages };
@@ -76,10 +66,7 @@ describe('useLanguages', () => {
 
   describe('fetching languages', () => {
     it('should fetch languages without country filter', async () => {
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
+      const wrapper = createYVWrapper();
       const { result } = renderHook(() => useLanguages(), { wrapper });
 
       expect(result.current.loading).toBe(true);
@@ -89,15 +76,12 @@ describe('useLanguages', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(mockGetLanguages).toHaveBeenCalledWith({});
-      expect(result.current.languages).toEqual(mockLanguages);
+      expect.soft(mockGetLanguages).toHaveBeenCalledWith({});
+      expect.soft(result.current.languages).toEqual(mockLanguages);
     });
 
     it('should fetch languages with provided country', async () => {
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
+      const wrapper = createYVWrapper();
       const { result } = renderHook(() => useLanguages({ country: 'US' }), { wrapper });
 
       expect(result.current.loading).toBe(true);
@@ -107,15 +91,12 @@ describe('useLanguages', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(mockGetLanguages).toHaveBeenCalledWith({ country: 'US' });
-      expect(result.current.languages).toEqual(mockLanguages);
+      expect.soft(mockGetLanguages).toHaveBeenCalledWith({ country: 'US' });
+      expect.soft(result.current.languages).toEqual(mockLanguages);
     });
 
     it('should fetch languages with all options', async () => {
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
+      const wrapper = createYVWrapper();
       const options: GetLanguagesOptions = {
         country: 'US',
         page_size: 10,
@@ -128,15 +109,12 @@ describe('useLanguages', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(mockGetLanguages).toHaveBeenCalledWith(options);
-      expect(result.current.languages).toEqual(mockLanguages);
+      expect.soft(mockGetLanguages).toHaveBeenCalledWith(options);
+      expect.soft(result.current.languages).toEqual(mockLanguages);
     });
 
     it('should refetch when options change', async () => {
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
+      const wrapper = createYVWrapper();
       const { result, rerender } = renderHook(({ options }) => useLanguages(options), {
         wrapper,
         initialProps: { options: { country: 'US' } },
@@ -154,15 +132,12 @@ describe('useLanguages', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(mockGetLanguages).toHaveBeenCalledTimes(2);
-      expect(mockGetLanguages).toHaveBeenLastCalledWith({ country: 'ES' });
+      expect.soft(mockGetLanguages).toHaveBeenCalledTimes(2);
+      expect.soft(mockGetLanguages).toHaveBeenLastCalledWith({ country: 'ES' });
     });
 
     it('should not fetch when enabled is false', async () => {
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
+      const wrapper = createYVWrapper();
       const { result } = renderHook(() => useLanguages({ country: 'US' }, { enabled: false }), {
         wrapper,
       });
@@ -171,33 +146,27 @@ describe('useLanguages', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(mockGetLanguages).not.toHaveBeenCalled();
-      expect(result.current.languages).toBe(null);
+      expect.soft(mockGetLanguages).not.toHaveBeenCalled();
+      expect.soft(result.current.languages).toBe(null);
     });
 
     it('should handle fetch errors', async () => {
+      const wrapper = createYVWrapper();
       const error = new Error('Failed to fetch languages');
       mockGetLanguages.mockRejectedValueOnce(error);
 
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
       const { result } = renderHook(() => useLanguages({ country: 'US' }), { wrapper });
 
       await waitFor(() => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(result.current.error).toEqual(error);
-      expect(result.current.languages).toBe(null);
+      expect.soft(result.current.error).toEqual(error);
+      expect.soft(result.current.languages).toBe(null);
     });
 
     it('should support manual refetch', async () => {
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
+      const wrapper = createYVWrapper();
       const { result } = renderHook(() => useLanguages({ country: 'US' }), { wrapper });
 
       await waitFor(() => {
@@ -216,10 +185,7 @@ describe('useLanguages', () => {
     });
 
     it('should fetch languages with fields filter', async () => {
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
+      const wrapper = createYVWrapper();
       const options: GetLanguagesOptions = {
         fields: ['id', 'language', 'script'],
         page_size: '*',
@@ -231,15 +197,12 @@ describe('useLanguages', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(mockGetLanguages).toHaveBeenCalledWith(options);
-      expect(result.current.languages).toEqual(mockLanguages);
+      expect.soft(mockGetLanguages).toHaveBeenCalledWith(options);
+      expect.soft(result.current.languages).toEqual(mockLanguages);
     });
 
     it('should refetch when fields change', async () => {
-      const wrapper = createWrapper({
-        appKey: mockAppKey,
-      });
-
+      const wrapper = createYVWrapper();
       const { result, rerender } = renderHook(({ options }) => useLanguages(options), {
         wrapper,
         initialProps: { options: { fields: ['id', 'language'] } as GetLanguagesOptions },
@@ -257,8 +220,8 @@ describe('useLanguages', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(mockGetLanguages).toHaveBeenCalledTimes(2);
-      expect(mockGetLanguages).toHaveBeenLastCalledWith({
+      expect.soft(mockGetLanguages).toHaveBeenCalledTimes(2);
+      expect.soft(mockGetLanguages).toHaveBeenLastCalledWith({
         fields: ['id', 'language', 'script'],
       });
     });

package/src/usePassage.test.tsx

@@ -0,0 +1,304 @@
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { describe, expect, vi, beforeEach, it } from 'vitest';
+import { usePassage } from './usePassage';
+import { type BibleClient } from '@youversion/platform-core';
+import { useBibleClient } from './useBibleClient';
+import { createYVWrapper } from './test/utils';
+import { createMockPassage } from './__tests__/mocks/bibles';
+
+vi.mock('./useBibleClient');
+
+describe('usePassage', () => {
+  const mockGetPassage = vi.fn();
+  const mockPassage = createMockPassage();
+
+  beforeEach(() => {
+    mockGetPassage.mockResolvedValue(mockPassage);
+
+    const mockClient: Partial<BibleClient> = { getPassage: mockGetPassage };
+    vi.mocked(useBibleClient).mockReturnValue(mockClient as BibleClient);
+  });
+
+  describe('basic fetching', () => {
+    it('should show loading then passage data', async () => {
+      const wrapper = createYVWrapper();
+      const { result } = renderHook(() => usePassage({ versionId: 3034, usfm: 'JHN.3.16' }), {
+        wrapper,
+      });
+
+      expect(result.current.loading).toBe(true);
+      expect(result.current.passage).toBe(null);
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(result.current.passage).toEqual(mockPassage);
+    });
+
+    it('should call getPassage with correct default args', async () => {
+      const wrapper = createYVWrapper();
+      const { result } = renderHook(() => usePassage({ versionId: 3034, usfm: 'JHN.3.16' }), {
+        wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(mockGetPassage).toHaveBeenCalledWith(3034, 'JHN.3.16', 'html', false, false);
+    });
+  });
+
+  describe('USFM validation', () => {
+    it.each(['', 'undefined', 'null'])('should skip fetch when usfm is "%s"', async (usfm) => {
+      const wrapper = createYVWrapper();
+      const { result } = renderHook(() => usePassage({ versionId: 3034, usfm }), { wrapper });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(mockGetPassage).not.toHaveBeenCalled();
+      expect.soft(result.current.passage).toBe(null);
+    });
+  });
+
+  describe('format options', () => {
+    it('should fetch with format text when specified', async () => {
+      const wrapper = createYVWrapper();
+      const { result } = renderHook(
+        () => usePassage({ versionId: 3034, usfm: 'JHN.3.16', format: 'text' }),
+        { wrapper },
+      );
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(mockGetPassage).toHaveBeenCalledWith(3034, 'JHN.3.16', 'text', false, false);
+    });
+  });
+
+  describe('heading and notes options', () => {
+    it('should pass include_headings=true', async () => {
+      const wrapper = createYVWrapper();
+      const { result } = renderHook(
+        () => usePassage({ versionId: 3034, usfm: 'JHN.3.16', include_headings: true }),
+        { wrapper },
+      );
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(mockGetPassage).toHaveBeenCalledWith(3034, 'JHN.3.16', 'html', true, false);
+    });
+
+    it('should pass include_notes=true', async () => {
+      const wrapper = createYVWrapper();
+      const { result } = renderHook(
+        () => usePassage({ versionId: 3034, usfm: 'JHN.3.16', include_notes: true }),
+        { wrapper },
+      );
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(mockGetPassage).toHaveBeenCalledWith(3034, 'JHN.3.16', 'html', false, true);
+    });
+
+    it('should pass all options combined', async () => {
+      const wrapper = createYVWrapper();
+      const { result } = renderHook(
+        () =>
+          usePassage({
+            versionId: 3034,
+            usfm: 'JHN.3',
+            format: 'text',
+            include_headings: true,
+            include_notes: true,
+          }),
+        { wrapper },
+      );
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(mockGetPassage).toHaveBeenCalledWith(3034, 'JHN.3', 'text', true, true);
+    });
+  });
+
+  describe('parameter change refetching', () => {
+    it.each([
+      {
+        param: 'versionId',
+        HookFn: ({ val }: { val: number | string }) =>
+          usePassage({ versionId: val as number, usfm: 'JHN.3.16' }),
+        initial: { val: 1 },
+        updated: { val: 3034 },
+        expectedInitial: [1, 'JHN.3.16', 'html', false, false],
+        expectedUpdated: [3034, 'JHN.3.16', 'html', false, false],
+      },
+      {
+        param: 'usfm',
+        HookFn: ({ val }: { val: number | string }) =>
+          usePassage({ versionId: 3034, usfm: val as string }),
+        initial: { val: 'JHN.3.16' },
+        updated: { val: 'GEN.1.1' },
+        expectedInitial: [3034, 'JHN.3.16', 'html', false, false],
+        expectedUpdated: [3034, 'GEN.1.1', 'html', false, false],
+      },
+      {
+        param: 'format',
+        HookFn: ({ val }: { val: number | string }) =>
+          usePassage({ versionId: 3034, usfm: 'JHN.3.16', format: val as 'html' | 'text' }),
+        initial: { val: 'html' },
+        updated: { val: 'text' },
+        expectedInitial: [3034, 'JHN.3.16', 'html', false, false],
+        expectedUpdated: [3034, 'JHN.3.16', 'text', false, false],
+      },
+    ])(
+      'should refetch when $param changes',
+      async ({ HookFn, initial, updated, expectedInitial, expectedUpdated }) => {
+        const wrapper = createYVWrapper();
+        const { result, rerender } = renderHook(HookFn, {
+          wrapper,
+          initialProps: initial,
+        });
+
+        await waitFor(() => {
+          expect(result.current.loading).toBe(false);
+        });
+
+        expect.soft(mockGetPassage).toHaveBeenCalledTimes(1);
+        expect.soft(mockGetPassage).toHaveBeenLastCalledWith(...expectedInitial);
+
+        act(() => {
+          rerender(updated);
+        });
+
+        await waitFor(() => {
+          expect(result.current.loading).toBe(false);
+        });
+
+        expect.soft(mockGetPassage).toHaveBeenCalledTimes(2);
+        expect.soft(mockGetPassage).toHaveBeenLastCalledWith(...expectedUpdated);
+      },
+    );
+  });
+
+  describe('enabled option', () => {
+    it('should not fetch when enabled is false', async () => {
+      const wrapper = createYVWrapper();
+      const { result } = renderHook(
+        () =>
+          usePassage({
+            versionId: 3034,
+            usfm: 'JHN.3.16',
+            options: { enabled: false },
+          }),
+        { wrapper },
+      );
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(mockGetPassage).not.toHaveBeenCalled();
+      expect.soft(result.current.passage).toBe(null);
+    });
+
+    it('should not fetch when both enabled is false and usfm is invalid', async () => {
+      const wrapper = createYVWrapper();
+      const { result } = renderHook(
+        () =>
+          usePassage({
+            versionId: 3034,
+            usfm: '',
+            options: { enabled: false },
+          }),
+        { wrapper },
+      );
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(mockGetPassage).not.toHaveBeenCalled();
+      expect.soft(result.current.passage).toBe(null);
+    });
+  });
+
+  describe('error handling', () => {
+    it('should surface fetch errors', async () => {
+      const wrapper = createYVWrapper();
+      const error = new Error('Failed to fetch passage');
+      mockGetPassage.mockRejectedValueOnce(error);
+
+      const { result } = renderHook(() => usePassage({ versionId: 3034, usfm: 'JHN.3.16' }), {
+        wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(result.current.error).toEqual(error);
+      expect.soft(result.current.passage).toBe(null);
+    });
+
+    it('should clear error on successful refetch', async () => {
+      const wrapper = createYVWrapper();
+      const error = new Error('Failed to fetch passage');
+      mockGetPassage.mockRejectedValueOnce(error).mockResolvedValueOnce(mockPassage);
+
+      const { result } = renderHook(() => usePassage({ versionId: 3034, usfm: 'JHN.3.16' }), {
+        wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(result.current.error).toEqual(error);
+      expect.soft(result.current.passage).toBe(null);
+
+      act(() => {
+        result.current.refetch();
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect.soft(result.current.error).toBe(null);
+      expect.soft(result.current.passage).toEqual(mockPassage);
+    });
+  });
+
+  describe('refetch', () => {
+    it('should support manual refetch', async () => {
+      const wrapper = createYVWrapper();
+      const { result } = renderHook(() => usePassage({ versionId: 3034, usfm: 'JHN.3.16' }), {
+        wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetPassage).toHaveBeenCalledTimes(1);
+
+      act(() => {
+        result.current.refetch();
+      });
+
+      await waitFor(() => {
+        expect(mockGetPassage).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+});

package/src/useTheme.test.tsx

@@ -0,0 +1,32 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { useTheme } from './useTheme';
+import { createYVWrapper } from './test/utils';
+
+describe('useTheme', () => {
+  it('should return light when used outside provider', () => {
+    const { result } = renderHook(() => useTheme());
+    expect(result.current).toBe('light');
+  });
+
+  it('should return light when theme is undefined in provider', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createYVWrapper(),
+    });
+    expect(result.current).toBe('light');
+  });
+
+  it('should return light when theme is light', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createYVWrapper('test-app-key', { theme: 'light' }),
+    });
+    expect(result.current).toBe('light');
+  });
+
+  it('should return dark when theme is dark', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: createYVWrapper('test-app-key', { theme: 'dark' }),
+    });
+    expect(result.current).toBe('dark');
+  });
+});