@youversion/platform-react-hooks 1.12.2 → 1.13.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @youversion/platform-react-hooks@1.12.2 build /home/runner/work/platform-sdk-react/platform-sdk-react/packages/hooks
+> @youversion/platform-react-hooks@1.13.0 build /home/runner/work/platform-sdk-react/platform-sdk-react/packages/hooks
 > tsc -p tsconfig.build.json
 

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @youversion/platform-react-hooks
 
+## 1.13.0
+
+### Minor Changes
+
+- d5579d5: Add suggested languages to Bible version picker
+  - Auto-detect user's preferred language from browser settings instead of defaulting to English
+  - Display suggested languages based on available Bible versions and user locale
+  - Fetch complete language data with display names for better internationalization
+  - Add integration tests and Storybook stories for suggested languages functionality
+
+### Patch Changes
+
+- Updated dependencies [d5579d5]
+  - @youversion/platform-core@1.13.0
+
 ## 1.12.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youversion/platform-react-hooks",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -22,7 +22,7 @@
     }
   },
   "dependencies": {
-    "@youversion/platform-core": "1.12.2"
+    "@youversion/platform-core": "1.13.0"
   },
   "peerDependencies": {
     "react": ">=19.1.0 <20.0.0"

package/src/useChapter.test.tsx

@@ -0,0 +1,228 @@
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { ReactNode } from 'react';
+import { useChapter } from './useChapter';
+import { YouVersionContext } from './context';
+import { type BibleClient, type BibleChapter } from '@youversion/platform-core';
+import { useBibleClient } from './useBibleClient';
+
+vi.mock('./useBibleClient');
+
+describe('useChapter', () => {
+  const mockAppKey = 'test-app-key';
+  const mockGetChapter = vi.fn();
+
+  const mockChapter: BibleChapter = {
+    id: '1',
+    passage_id: 'MAT.1',
+    title: 'Matthew 1',
+  };
+
+  const createWrapper = (contextValue: { appKey: string }) => {
+    return ({ children }: { children: ReactNode }) => (
+      <YouVersionContext.Provider value={contextValue}>{children}</YouVersionContext.Provider>
+    );
+  };
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+
+    mockGetChapter.mockResolvedValue(mockChapter);
+
+    const mockClient: Partial<BibleClient> = { getChapter: mockGetChapter };
+    vi.mocked(useBibleClient).mockReturnValue(mockClient as BibleClient);
+  });
+
+  describe('fetching chapter', () => {
+    it('should fetch chapter with versionId, book, chapter params', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapter(111, 'MAT', 1), { wrapper });
+
+      expect(result.current.loading).toBe(true);
+      expect(result.current.chapter).toBe(null);
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapter).toHaveBeenCalledWith(111, 'MAT', 1);
+      expect(result.current.chapter).toEqual(mockChapter);
+    });
+
+    it('should refetch when versionId changes', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result, rerender } = renderHook(({ versionId }) => useChapter(versionId, 'MAT', 1), {
+        wrapper,
+        initialProps: { versionId: 1 },
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapter).toHaveBeenCalledTimes(1);
+      expect(mockGetChapter).toHaveBeenLastCalledWith(1, 'MAT', 1);
+
+      act(() => {
+        rerender({ versionId: 111 });
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapter).toHaveBeenCalledTimes(2);
+      expect(mockGetChapter).toHaveBeenLastCalledWith(111, 'MAT', 1);
+    });
+
+    it('should refetch when book changes', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result, rerender } = renderHook(({ book }) => useChapter(1, book, 1), {
+        wrapper,
+        initialProps: { book: 'MAT' },
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapter).toHaveBeenCalledTimes(1);
+      expect(mockGetChapter).toHaveBeenLastCalledWith(1, 'MAT', 1);
+
+      act(() => {
+        rerender({ book: 'GEN' });
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapter).toHaveBeenCalledTimes(2);
+      expect(mockGetChapter).toHaveBeenLastCalledWith(1, 'GEN', 1);
+    });
+
+    it('should refetch when chapter changes', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result, rerender } = renderHook(({ chapter }) => useChapter(1, 'MAT', chapter), {
+        wrapper,
+        initialProps: { chapter: 1 },
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapter).toHaveBeenCalledTimes(1);
+      expect(mockGetChapter).toHaveBeenLastCalledWith(1, 'MAT', 1);
+
+      act(() => {
+        rerender({ chapter: 5 });
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapter).toHaveBeenCalledTimes(2);
+      expect(mockGetChapter).toHaveBeenLastCalledWith(1, 'MAT', 5);
+    });
+
+    it('should not fetch when enabled is false', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapter(1, 'MAT', 1, { enabled: false }), {
+        wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapter).not.toHaveBeenCalled();
+      expect(result.current.chapter).toBe(null);
+    });
+
+    it('should handle fetch errors', async () => {
+      const error = new Error('Failed to fetch chapter');
+      mockGetChapter.mockRejectedValueOnce(error);
+
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapter(1, 'MAT', 1), { wrapper });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(result.current.error).toEqual(error);
+      expect(result.current.chapter).toBe(null);
+    });
+
+    it('should clear error on successful refetch', async () => {
+      const error = new Error('Failed to fetch chapter');
+      mockGetChapter.mockRejectedValueOnce(error).mockResolvedValueOnce(mockChapter);
+
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapter(1, 'MAT', 1), { wrapper });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(result.current.error).toEqual(error);
+      expect(result.current.chapter).toBe(null);
+
+      act(() => {
+        result.current.refetch();
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(result.current.error).toBe(null);
+      expect(result.current.chapter).toEqual(mockChapter);
+    });
+
+    it('should support manual refetch', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapter(1, 'MAT', 1), { wrapper });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapter).toHaveBeenCalledTimes(1);
+
+      act(() => {
+        result.current.refetch();
+      });
+
+      await waitFor(() => {
+        expect(mockGetChapter).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+});

package/src/useChapters.test.tsx

@@ -0,0 +1,278 @@
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { ReactNode } from 'react';
+import { useChapters } from './useChapters';
+import { YouVersionContext } from './context';
+import { type BibleClient, type BibleChapter, type Collection } from '@youversion/platform-core';
+import { useBibleClient } from './useBibleClient';
+
+vi.mock('./useBibleClient');
+
+describe('useChapters', () => {
+  const mockAppKey = 'test-app-key';
+  const mockGetChapters = vi.fn();
+
+  const mockChapters: Collection<BibleChapter> = {
+    data: [
+      { id: '1', passage_id: 'MAT.1.1', title: 'Matthew 1' },
+      { id: '2', passage_id: 'MAT.1.2', title: 'Matthew 2' },
+      { id: '3', passage_id: 'MAT.1.3', title: 'Matthew 3' },
+    ],
+    next_page_token: null,
+  };
+
+  const createWrapper = (contextValue: { appKey: string }) => {
+    return ({ children }: { children: ReactNode }) => (
+      <YouVersionContext.Provider value={contextValue}>{children}</YouVersionContext.Provider>
+    );
+  };
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+
+    mockGetChapters.mockResolvedValue(mockChapters);
+
+    const mockClient: Partial<BibleClient> = { getChapters: mockGetChapters };
+    vi.mocked(useBibleClient).mockReturnValue(mockClient as BibleClient);
+  });
+
+  describe('fetching chapters', () => {
+    it('should fetch chapters with versionId, book params', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapters(111, 'MAT'), { wrapper });
+
+      expect(result.current.loading).toBe(true);
+      expect(result.current.chapters).toBe(null);
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).toHaveBeenCalledWith(111, 'MAT');
+      expect(result.current.chapters).toEqual(mockChapters);
+    });
+
+    it('should refetch when versionId changes', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result, rerender } = renderHook(({ versionId }) => useChapters(versionId, 'MAT'), {
+        wrapper,
+        initialProps: { versionId: 1 },
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).toHaveBeenCalledTimes(1);
+      expect(mockGetChapters).toHaveBeenLastCalledWith(1, 'MAT');
+
+      act(() => {
+        rerender({ versionId: 111 });
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).toHaveBeenCalledTimes(2);
+      expect(mockGetChapters).toHaveBeenLastCalledWith(111, 'MAT');
+    });
+
+    it('should refetch when book changes', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result, rerender } = renderHook(({ book }) => useChapters(1, book), {
+        wrapper,
+        initialProps: { book: 'MAT' },
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).toHaveBeenCalledTimes(1);
+      expect(mockGetChapters).toHaveBeenLastCalledWith(1, 'MAT');
+
+      act(() => {
+        rerender({ book: 'GEN' });
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).toHaveBeenCalledTimes(2);
+      expect(mockGetChapters).toHaveBeenLastCalledWith(1, 'GEN');
+    });
+
+    it('should not fetch when enabled is false', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapters(1, 'MAT', { enabled: false }), {
+        wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).not.toHaveBeenCalled();
+      expect(result.current.chapters).toBe(null);
+    });
+
+    it('should handle fetch errors', async () => {
+      const error = new Error('Failed to fetch chapters');
+      mockGetChapters.mockRejectedValueOnce(error);
+
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapters(1, 'MAT'), { wrapper });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(result.current.error).toEqual(error);
+      expect(result.current.chapters).toBe(null);
+    });
+
+    it('should clear error on successful refetch', async () => {
+      const error = new Error('Failed to fetch chapters');
+      mockGetChapters.mockRejectedValueOnce(error).mockResolvedValueOnce(mockChapters);
+
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapters(1, 'MAT'), { wrapper });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(result.current.error).toEqual(error);
+      expect(result.current.chapters).toBe(null);
+
+      act(() => {
+        result.current.refetch();
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(result.current.error).toBe(null);
+      expect(result.current.chapters).toEqual(mockChapters);
+    });
+
+    it('should support manual refetch', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapters(1, 'MAT'), { wrapper });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).toHaveBeenCalledTimes(1);
+
+      act(() => {
+        result.current.refetch();
+      });
+
+      await waitFor(() => {
+        expect(mockGetChapters).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+
+  describe('book validation', () => {
+    it('should skip fetch when book is "undefined" string', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapters(1, 'undefined'), { wrapper });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).not.toHaveBeenCalled();
+      expect(result.current.chapters).toBe(null);
+    });
+
+    it('should skip fetch when book is "null" string', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapters(1, 'null'), { wrapper });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).not.toHaveBeenCalled();
+      expect(result.current.chapters).toBe(null);
+    });
+
+    it('should skip fetch when book is empty string', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result } = renderHook(() => useChapters(1, ''), { wrapper });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).not.toHaveBeenCalled();
+      expect(result.current.chapters).toBe(null);
+    });
+
+    it('should fetch when book changes from invalid to valid', async () => {
+      const wrapper = createWrapper({
+        appKey: mockAppKey,
+      });
+
+      const { result, rerender } = renderHook(({ book }) => useChapters(1, book), {
+        wrapper,
+        initialProps: { book: 'undefined' },
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).not.toHaveBeenCalled();
+
+      act(() => {
+        rerender({ book: 'MAT' });
+      });
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false);
+      });
+
+      expect(mockGetChapters).toHaveBeenCalledTimes(1);
+      expect(mockGetChapters).toHaveBeenCalledWith(1, 'MAT');
+      expect(result.current.chapters).toEqual(mockChapters);
+    });
+  });
+});

package/src/useVersion.test.tsx

@@ -206,9 +206,11 @@ describe('useVersion', () => {
       });
 
       await waitFor(() => {
+        expect(result.current.loading).toBe(false);
         expect(result.current.error).toBe(null);
       });
 
+      expect(result.current.error).toBe(null);
       expect(result.current.version).toEqual(mockVersion);
     });
   });

package/src/useVersions.test.tsx

@@ -605,9 +605,11 @@ describe('useVersions', () => {
       });
 
       await waitFor(() => {
+        expect(result.current.loading).toBe(false);
         expect(result.current.error).toBe(null);
       });
 
+      expect(result.current.error).toBe(null);
       expect(result.current.versions).toEqual(mockVersions);
     });
   });