feat(store): refactor progress slice, add tests, centralize schema

rgilks · rgilks · commit 5c3d44e3c462 · 2025-05-05T09:25:14.000+01:00
- Moved GetProgressResultSchema to lib/domain/userProgress.ts.

- Refactored fetchUserProgress in progressSlice for clarity and consolidated state updates.

- Updated BaseSlice to manage showError state.

- Added comprehensive Vitest tests for progressSlice.
diff --git a/app/store/baseSlice.ts b/app/store/baseSlice.ts
@@ -4,15 +4,19 @@ import type { Draft } from 'immer';
 export interface BaseSlice {
   loading: boolean;
   error: string | null;
+  showError: boolean;
   setLoading: (loading: boolean) => void;
   setError: (error: string | null) => void;
 }
 
-export const createBaseSlice = <T extends { loading: boolean; error: string | null }>(
+export const createBaseSlice = <
+  T extends { loading: boolean; error: string | null; showError: boolean },
+>(
   set: Parameters<StateCreator<T, [['zustand/immer', never]], [], T>>[0]
 ): BaseSlice => ({
   loading: false,
   error: null,
+  showError: false,
   setLoading: (loading) => {
     set((state: Draft<T>) => {
       state.loading = loading;
@@ -21,6 +25,7 @@ export const createBaseSlice = <T extends { loading: boolean; error: string | nu
   setError: (error) => {
     set((state: Draft<T>) => {
       state.error = error;
+      state.showError = !!error;
     });
   },
 });
diff --git a/app/store/progressSlice.test.ts b/app/store/progressSlice.test.ts
@@ -0,0 +1,241 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { create, type StoreApi } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import { createBaseSlice } from './baseSlice';
+
+// Use vi.hoisted for mock variables to ensure they are available
+const { mockGetSession, mockGetProgress } = vi.hoisted(() => {
+  return {
+    mockGetSession: vi.fn(),
+    mockGetProgress: vi.fn(),
+  };
+});
+
+vi.mock('next-auth/react', () => ({
+  getSession: mockGetSession,
+}));
+vi.mock('@/app/actions/userProgress', () => ({
+  getProgress: mockGetProgress,
+}));
+
+// Now import the module under test and other dependencies
+import { createProgressSlice } from './progressSlice';
+import type { TextGeneratorState } from './textGeneratorStore';
+import type { CEFRLevel } from '@/lib/domain/language-guidance';
+import type { GetProgressResult } from '@/lib/domain/userProgress';
+
+// Helper to create a store instance for testing
+const createTestStore = (
+  initialState: Partial<TextGeneratorState> = {}
+): StoreApi<TextGeneratorState> => {
+  return create<TextGeneratorState>()(
+    immer((set, get, api) => {
+      // Create the slices we need parts of
+      const baseSlice = createBaseSlice<TextGeneratorState>(set);
+      const progressSlice = createProgressSlice(set, get, api);
+
+      // Define the minimal required state structure for these tests
+      const minimalState: Partial<TextGeneratorState> = {
+        // --- State used/modified by ProgressSlice & its dependencies ---
+        // From BaseSlice (state)
+        loading: baseSlice.loading,
+        error: baseSlice.error,
+        showError: baseSlice.showError,
+        // From ProgressSlice (state)
+        isProgressLoading: progressSlice.isProgressLoading,
+        userStreak: progressSlice.userStreak,
+        // From SettingsSlice (state needed by fetchUserProgress)
+        passageLanguage: 'en', // Default needed for get()
+        cefrLevel: 'A1', // Default needed & modified by fetchUserProgress
+
+        // --- Methods used/modified by ProgressSlice ---
+        // From BaseSlice (methods)
+        setLoading: baseSlice.setLoading,
+        setError: baseSlice.setError,
+        // From ProgressSlice (methods)
+        fetchUserProgress: progressSlice.fetchUserProgress,
+
+        // --- Mocks for potentially called methods from other slices ---
+        setCefrLevel: vi.fn(), // Mocked as ProgressSlice calls this via set()
+        // Add mocks for any other methods potentially called via get() if necessary
+        // e.g., get().stopPassageSpeech() - Check if progressSlice calls it.
+        stopPassageSpeech: vi.fn(), // Assuming progressSlice *might* call this via get()
+
+        // Add any other essential properties for type compatibility if needed
+        // These might come from UISlice, QuizSlice, etc.
+        // Let's start minimal and add based on TS errors.
+        showLoginPrompt: false,
+        showContent: false,
+        showQuestionSection: false,
+        showExplanation: false,
+        quizData: null,
+        currentQuizId: null,
+        selectedAnswer: null,
+        isAnswered: false,
+        relevantTextRange: null,
+        feedbackIsCorrect: null,
+        feedbackCorrectAnswer: null,
+        feedbackCorrectExplanation: null,
+        feedbackChosenIncorrectExplanation: null,
+        feedbackRelevantText: null,
+        nextQuizAvailable: null,
+        feedbackSubmitted: false,
+        hoverProgressionPhase: 'credits',
+        correctAnswersInPhase: 0,
+        hoverCreditsAvailable: 7,
+        hoverCreditsUsed: 0,
+        isSpeechSupported: false,
+        isSpeakingPassage: false,
+        isPaused: false,
+        volume: 0.5,
+        currentWordIndex: null,
+        passageUtteranceRef: null,
+        wordsRef: [],
+        availableVoices: [],
+        selectedVoiceURI: null,
+        translationCache: new Map(),
+        generatedPassageLanguage: null,
+        generatedQuestionLanguage: null,
+        language: 'en',
+      };
+
+      // Merge minimal state with test-specific overrides
+      const finalInitialState: TextGeneratorState = {
+        ...(minimalState as TextGeneratorState), // Cast needed as we start partial
+        ...(initialState as TextGeneratorState), // Apply test-specific overrides last
+      };
+
+      return finalInitialState;
+    })
+  );
+};
+
+describe('ProgressSlice', () => {
+  let store: StoreApi<TextGeneratorState>;
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+    store = createTestStore(); // Create a fresh store for each test
+  });
+
+  it('should have correct initial state', () => {
+    const { isProgressLoading, userStreak } = store.getState();
+    expect(isProgressLoading).toBe(false);
+    expect(userStreak).toBeNull();
+  });
+
+  describe('fetchUserProgress', () => {
+    const userId = 123;
+    const language = 'en';
+
+    beforeEach(() => {
+      store.setState({ passageLanguage: language });
+    });
+
+    it('should set loading state correctly', async () => {
+      mockGetSession.mockResolvedValue({ user: { dbId: userId } } as any);
+      mockGetProgress.mockResolvedValue({ streak: 5, currentLevel: 'B1' });
+
+      const promise = store.getState().fetchUserProgress();
+      expect(store.getState().isProgressLoading).toBe(true);
+      await promise;
+      expect(store.getState().isProgressLoading).toBe(false);
+    });
+
+    it('should reset streak and set loading to false if no session/userId', async () => {
+      mockGetSession.mockResolvedValue(null);
+      store.setState({ userStreak: 5 }); // Set a pre-existing streak
+
+      await store.getState().fetchUserProgress();
+
+      const { isProgressLoading, userStreak } = store.getState();
+      expect(isProgressLoading).toBe(false);
+      expect(userStreak).toBeNull();
+      expect(mockGetProgress).not.toHaveBeenCalled();
+    });
+
+    it('should fetch and set user streak and level successfully', async () => {
+      const progressData: GetProgressResult = { streak: 10, currentLevel: 'B2', error: null };
+      mockGetSession.mockResolvedValue({ user: { dbId: userId } } as any);
+      mockGetProgress.mockResolvedValue(progressData);
+
+      await store.getState().fetchUserProgress();
+
+      const { userStreak, cefrLevel, isProgressLoading, error } = store.getState();
+      expect(isProgressLoading).toBe(false);
+      expect(userStreak).toBe(progressData.streak);
+      expect(cefrLevel).toBe(progressData.currentLevel);
+      expect(error).toBeNull();
+      expect(mockGetProgress).toHaveBeenCalledWith({ language });
+    });
+
+    it('should set streak to 0 if API returns null/undefined streak', async () => {
+      const progressData: GetProgressResult = { streak: null, currentLevel: 'A2', error: null };
+      mockGetSession.mockResolvedValue({ user: { dbId: userId } } as any);
+      mockGetProgress.mockResolvedValue(progressData);
+
+      await store.getState().fetchUserProgress();
+
+      const { userStreak, cefrLevel } = store.getState();
+      expect(userStreak).toBe(0);
+      expect(cefrLevel).toBe('A2');
+    });
+
+    it('should not update level if API returns null/undefined level', async () => {
+      const initialLevel: CEFRLevel = 'C1';
+      store.setState({ cefrLevel: initialLevel });
+      const progressData: GetProgressResult = { streak: 3, currentLevel: null, error: null };
+      mockGetSession.mockResolvedValue({ user: { dbId: userId } } as any);
+      mockGetProgress.mockResolvedValue(progressData);
+
+      await store.getState().fetchUserProgress();
+
+      const { userStreak, cefrLevel } = store.getState();
+      expect(userStreak).toBe(3);
+      expect(cefrLevel).toBe(initialLevel); // Level should remain unchanged
+    });
+
+    it('should handle API error response', async () => {
+      const errorMessage = 'API failed';
+      const progressData: GetProgressResult = { error: errorMessage }; // Schema allows error only
+      mockGetSession.mockResolvedValue({ user: { dbId: userId } } as any);
+      mockGetProgress.mockResolvedValue(progressData);
+
+      await store.getState().fetchUserProgress();
+
+      const { userStreak, isProgressLoading, error, showError } = store.getState();
+      expect(isProgressLoading).toBe(false);
+      expect(userStreak).toBeNull(); // Streak should be null on error
+      expect(error).toBe(errorMessage);
+      expect(showError).toBe(true);
+    });
+
+    it('should handle validation error (invalid API response structure)', async () => {
+      const invalidProgressData = { score: 100 }; // Doesn't match schema
+      mockGetSession.mockResolvedValue({ user: { dbId: userId } } as any);
+      mockGetProgress.mockResolvedValue(invalidProgressData as any);
+
+      await store.getState().fetchUserProgress();
+
+      const { userStreak, isProgressLoading, error, showError } = store.getState();
+      expect(isProgressLoading).toBe(false);
+      expect(userStreak).toBe(0);
+      expect(error).toBeNull();
+      expect(showError).toBe(false);
+    });
+
+    it('should handle thrown error during getProgress call', async () => {
+      const errorMessage = 'Network Error';
+      mockGetSession.mockResolvedValue({ user: { dbId: userId } } as any);
+      mockGetProgress.mockRejectedValue(new Error(errorMessage));
+
+      await store.getState().fetchUserProgress();
+
+      const { userStreak, isProgressLoading, error, showError } = store.getState();
+      expect(isProgressLoading).toBe(false);
+      expect(userStreak).toBeNull();
+      expect(error).toBe(errorMessage);
+      expect(showError).toBe(true);
+    });
+  });
+});
diff --git a/app/store/progressSlice.ts b/app/store/progressSlice.ts
@@ -1,18 +1,12 @@
 import type { StateCreator } from 'zustand';
-import { z } from 'zod';
 import { getProgress } from '@/app/actions/userProgress';
 import { getSession } from 'next-auth/react';
 import type { TextGeneratorState } from './textGeneratorStore';
 import type { CEFRLevel } from '@/lib/domain/language-guidance';
+import { GetProgressResultSchema } from '@/lib/domain/userProgress';
 import type { BaseSlice } from './baseSlice';
 import { createBaseSlice } from './baseSlice';
 
-const GetProgressResultSchema = z.object({
-  streak: z.number().optional().nullable(),
-  currentLevel: z.string().optional().nullable(),
-  error: z.string().optional().nullable(),
-});
-
 export interface ProgressSlice extends BaseSlice {
   isProgressLoading: boolean;
   userStreak: number | null;
@@ -33,56 +27,56 @@ export const createProgressSlice: StateCreator<
     set((state) => {
       state.isProgressLoading = true;
     });
+
     const session = await getSession();
     const userId = (session?.user as { dbId?: number } | null)?.dbId;
 
+    let finalStreak: number | null = null;
+    let finalLevel: CEFRLevel | null | undefined = undefined;
+    let errorMessage: string | null = null;
+
     if (!userId) {
-      set((state) => {
-        state.userStreak = null;
-        state.isProgressLoading = false;
-      });
-      return;
-    }
+      // No user, final state (loading false, streak null) set in finally
+    } else {
+      try {
+        const { passageLanguage } = get();
+        const rawProgress = await getProgress({ language: passageLanguage });
 
-    try {
-      const { passageLanguage } = get();
-      const rawProgress = await getProgress({ language: passageLanguage });
+        const validatedProgress = GetProgressResultSchema.safeParse(rawProgress);
 
-      const validatedProgress = GetProgressResultSchema.safeParse(rawProgress);
+        if (!validatedProgress.success) {
+          console.error('Zod validation error (getProgress):', validatedProgress.error);
+          throw new Error(`Invalid API response structure: ${validatedProgress.error.message}`);
+        }
 
-      if (!validatedProgress.success) {
-        console.error('Zod validation error (getProgress):', validatedProgress.error);
-        throw new Error(`Invalid API response structure: ${validatedProgress.error.message}`);
-      }
+        const progress = validatedProgress.data;
 
-      const progress = validatedProgress.data;
+        if (progress.error) {
+          throw new Error(progress.error);
+        }
 
-      if (progress.error) {
-        throw new Error(progress.error);
-      }
+        finalStreak = progress.streak ?? 0;
+        finalLevel = progress.currentLevel;
 
-      set((state) => {
-        state.userStreak = progress.streak ?? 0;
-        if (progress.currentLevel) {
-          state.cefrLevel = progress.currentLevel as CEFRLevel;
+        if (progress.streak === null || progress.streak === undefined) {
+          console.warn('No progress data found for user/language. Defaulting streak to 0.');
         }
-      });
-
-      if (progress.streak === null || progress.streak === undefined) {
-        console.warn('No progress data found for user/language. Defaulting streak to 0.');
+      } catch (error: unknown) {
+        console.error('Error fetching user progress:', String(error));
+        errorMessage = error instanceof Error ? error.message : 'Unknown error fetching progress';
+        finalStreak = null;
+        finalLevel = undefined;
       }
-    } catch (error: unknown) {
-      console.error('Error fetching user progress:', String(error));
-      set((state) => {
-        state.userStreak = null;
-      });
-      const errorMessage: string =
-        error instanceof Error ? error.message : 'Unknown error fetching progress';
-      get().setError(errorMessage);
-    } finally {
-      set((state) => {
-        state.isProgressLoading = false;
-      });
     }
+
+    set((state) => {
+      state.isProgressLoading = false;
+      state.userStreak = finalStreak;
+      if (finalLevel) {
+        state.cefrLevel = finalLevel;
+      }
+      state.error = errorMessage;
+      state.showError = !!errorMessage;
+    });
   },
 });
diff --git a/lib/domain/userProgress.ts b/lib/domain/userProgress.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod';
+import { CEFRLevelSchema } from './language-guidance';
+
+export const GetProgressResultSchema = z.object({
+  streak: z.number().optional().nullable(),
+  currentLevel: CEFRLevelSchema.optional().nullable(), // Validate against CEFR levels
+  error: z.string().optional().nullable(),
+});
+
+export type GetProgressResult = z.infer<typeof GetProgressResultSchema>;
