feat: default learning language based on UI language

rgilks · rgilks · commit 182fa205eb5b · 2025-05-06T10:36:06.000+01:00
diff --git a/app/components/TextGenerator/TextGeneratorContainer.test.tsx b/app/components/TextGenerator/TextGeneratorContainer.test.tsx
@@ -17,20 +17,38 @@ vi.mock('./ProgressTracker', () => ({ default: () => <div>ProgressTracker</div>
 vi.mock('./Generator', () => ({ default: () => <div>Generator</div> }));
 
 describe('TextGeneratorContainer', () => {
+  const mockFetchProgress = vi.fn();
+  const mockSetPassageLanguage = vi.fn();
+
+  const mockStoreState = {
+    loading: false,
+    quizData: null,
+    showContent: false,
+    isAnswered: false,
+    fetchProgress: mockFetchProgress,
+    passageLanguage: 'en',
+    setPassageLanguage: mockSetPassageLanguage,
+    // Add other state properties if needed by the component
+  };
+
   beforeEach(() => {
     vi.clearAllMocks();
     (useLanguage as any).mockReturnValue({ language: 'en' });
-    (useTextGeneratorStore as any).mockReturnValue({
-      loading: false,
-      quizData: null,
-      showContent: false,
-      isAnswered: false,
-      fetchProgress: vi.fn(),
-    });
+
+    // Mock the hook return value
+    (useTextGeneratorStore as any).mockReturnValue(mockStoreState);
+
+    // Mock the getState method on the mocked store module
+    (useTextGeneratorStore as any).getState = vi.fn(() => mockStoreState);
   });
 
   it('renders all static child components', () => {
     (useSession as any).mockReturnValue({ status: 'unauthenticated' });
+    // Update mocks if specific state is needed for this test
+    const specificState = { ...mockStoreState, loading: false };
+    (useTextGeneratorStore as any).mockReturnValue(specificState);
+    (useTextGeneratorStore as any).getState = vi.fn(() => specificState);
+
     render(<TextGeneratorContainer />);
     expect(screen.getByText('LanguageSelector')).toBeInTheDocument();
     expect(screen.getByText('LoginPrompt')).toBeInTheDocument();
@@ -39,65 +57,191 @@ describe('TextGeneratorContainer', () => {
   });
 
   it('shows QuizSkeleton when loading and no quizData', () => {
-    (useTextGeneratorStore as any).mockReturnValue({
-      loading: true,
-      quizData: null,
-      showContent: false,
-      isAnswered: false,
-      fetchProgress: vi.fn(),
-    });
+    const specificState = { ...mockStoreState, loading: true, quizData: null };
+    (useTextGeneratorStore as any).mockReturnValue(specificState);
+    (useTextGeneratorStore as any).getState = vi.fn(() => specificState);
     render(<TextGeneratorContainer />);
     expect(screen.getByText('QuizSkeleton')).toBeInTheDocument();
   });
 
   it('shows generated content when quizData and showContent', () => {
-    (useTextGeneratorStore as any).mockReturnValue({
+    const specificState = {
+      ...mockStoreState,
       loading: false,
       quizData: { id: 1 },
       showContent: true,
-      isAnswered: false,
-      fetchProgress: vi.fn(),
-    });
+    };
+    (useTextGeneratorStore as any).mockReturnValue(specificState);
+    (useTextGeneratorStore as any).getState = vi.fn(() => specificState);
     render(<TextGeneratorContainer />);
     expect(screen.getByText('ReadingPassage')).toBeInTheDocument();
     expect(screen.getByText('QuizSection')).toBeInTheDocument();
   });
 
   it('shows ProgressTracker when isAnswered', () => {
-    (useTextGeneratorStore as any).mockReturnValue({
-      loading: false,
-      quizData: { id: 1 },
-      showContent: false,
-      isAnswered: true,
-      fetchProgress: vi.fn(),
-    });
+    const specificState = { ...mockStoreState, isAnswered: true };
+    (useTextGeneratorStore as any).mockReturnValue(specificState);
+    (useTextGeneratorStore as any).getState = vi.fn(() => specificState);
     render(<TextGeneratorContainer />);
     expect(screen.getByText('ProgressTracker')).toBeInTheDocument();
   });
 
   it('shows ProgressTracker when not content visible and not loading', () => {
-    (useTextGeneratorStore as any).mockReturnValue({
+    const specificState = {
+      ...mockStoreState,
       loading: false,
       quizData: null,
       showContent: false,
       isAnswered: false,
-      fetchProgress: vi.fn(),
-    });
+    };
+    (useTextGeneratorStore as any).mockReturnValue(specificState);
+    (useTextGeneratorStore as any).getState = vi.fn(() => specificState);
     render(<TextGeneratorContainer />);
     expect(screen.getByText('ProgressTracker')).toBeInTheDocument();
   });
 
   it('fetches user progress when authenticated', () => {
-    const fetchProgress = vi.fn();
+    const specificState = { ...mockStoreState, fetchProgress: mockFetchProgress }; // Ensure fetchProgress is the mock
     (useSession as any).mockReturnValue({ status: 'authenticated' });
-    (useTextGeneratorStore as any).mockReturnValue({
-      loading: false,
-      quizData: null,
-      showContent: false,
-      isAnswered: false,
-      fetchProgress,
-    });
+    (useTextGeneratorStore as any).mockReturnValue(specificState);
+    (useTextGeneratorStore as any).getState = vi.fn(() => specificState);
     render(<TextGeneratorContainer />);
-    expect(fetchProgress).toHaveBeenCalled();
+    expect(mockFetchProgress).toHaveBeenCalled();
+  });
+
+  describe('Default Passage Language Logic', () => {
+    it('sets passageLanguage to "es" if UI language is "en" and current passageLanguage is not "es"', () => {
+      (useLanguage as any).mockReturnValue({ language: 'en' });
+      const initialPassageLang = 'de'; // Different from 'es'
+      const specificInitialState = {
+        ...mockStoreState,
+        passageLanguage: initialPassageLang,
+        setPassageLanguage: mockSetPassageLanguage,
+      };
+      (useTextGeneratorStore as any).mockReturnValue(specificInitialState);
+      (useTextGeneratorStore as any).getState = vi.fn(() => specificInitialState);
+
+      render(<TextGeneratorContainer />);
+      expect(mockSetPassageLanguage).toHaveBeenCalledWith('es');
+      expect(mockSetPassageLanguage).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not change passageLanguage if UI language is "en" and current passageLanguage is already "es"', () => {
+      (useLanguage as any).mockReturnValue({ language: 'en' });
+      const initialPassageLang = 'es'; // Already 'es'
+      const specificInitialState = {
+        ...mockStoreState,
+        passageLanguage: initialPassageLang,
+        setPassageLanguage: mockSetPassageLanguage,
+      };
+      (useTextGeneratorStore as any).mockReturnValue(specificInitialState);
+      (useTextGeneratorStore as any).getState = vi.fn(() => specificInitialState);
+
+      render(<TextGeneratorContainer />);
+      // It might be called with 'es' if the initial state in mockStoreState was different before override,
+      // but the crucial part is that it shouldn't be called to *change* it from 'es' due to the component's internal check.
+      // Given our logic `if (currentPassageLanguage !== 'es')`, it should not be called.
+      expect(mockSetPassageLanguage).not.toHaveBeenCalled();
+    });
+
+    it('sets passageLanguage to "en" if UI language is not "en" and current passageLanguage is not "en"', () => {
+      (useLanguage as any).mockReturnValue({ language: 'fr' }); // Non-'en' UI language
+      const initialPassageLang = 'de'; // Different from 'en'
+      const specificInitialState = {
+        ...mockStoreState,
+        passageLanguage: initialPassageLang,
+        setPassageLanguage: mockSetPassageLanguage,
+      };
+
+      (useTextGeneratorStore as any).mockReturnValue(specificInitialState);
+      (useTextGeneratorStore as any).getState = vi.fn(() => specificInitialState);
+
+      render(<TextGeneratorContainer />);
+      expect(mockSetPassageLanguage).toHaveBeenCalledWith('en');
+      expect(mockSetPassageLanguage).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not change passageLanguage if UI language is not "en" and current passageLanguage is already "en"', () => {
+      (useLanguage as any).mockReturnValue({ language: 'fr' }); // Non-'en' UI language
+      const initialPassageLang = 'en'; // Already 'en'
+      const specificInitialState = {
+        ...mockStoreState,
+        passageLanguage: initialPassageLang,
+        setPassageLanguage: mockSetPassageLanguage,
+      };
+      (useTextGeneratorStore as any).mockReturnValue(specificInitialState);
+      (useTextGeneratorStore as any).getState = vi.fn(() => specificInitialState);
+
+      render(<TextGeneratorContainer />);
+      // Given our logic `if (currentPassageLanguage !== 'en')`, it should not be called.
+      expect(mockSetPassageLanguage).not.toHaveBeenCalled();
+    });
+
+    it('calls setPassageLanguage only once even with multiple relevant state changes in dependencies', () => {
+      (useLanguage as any).mockReturnValue({ language: 'en' });
+      const initialPassageLang = 'de';
+      const specificInitialState = {
+        ...mockStoreState,
+        passageLanguage: initialPassageLang,
+        setPassageLanguage: mockSetPassageLanguage,
+        fetchProgress: mockFetchProgress,
+      };
+      (useTextGeneratorStore as any).mockReturnValue(specificInitialState);
+      (useTextGeneratorStore as any).getState = vi.fn(() => specificInitialState);
+
+      const { rerender } = render(<TextGeneratorContainer />);
+      expect(mockSetPassageLanguage).toHaveBeenCalledWith('es');
+      expect(mockSetPassageLanguage).toHaveBeenCalledTimes(1);
+
+      // Simulate a change in another dependency of the useEffect, like session status
+      // This specific mock change won't directly cause TextGeneratorContainer's useEffect to re-evaluate setPassageLanguage
+      // because the useRef defaultLanguageAppliedRef prevents it.
+      // We are verifying that the internal ref logic works.
+      (useSession as any).mockReturnValue({ status: 'authenticated' });
+      // To trigger re-render and thus the effect with new `status` prop
+      // we need to ensure a state that TextGeneratorContainer itself uses from store changes,
+      // or a prop changes. Here, we re-render with potentially different session status.
+      // However, the default language setting part of the effect is guarded by defaultLanguageAppliedRef.
+
+      // Let's mock a change that would re-run the effect if not for the ref guard.
+      // For example, changing contextLanguage.
+      (useLanguage as any).mockReturnValue({ language: 'fr' }); // Change UI language
+      // Important: we need to update the store mocks to reflect that setPassageLanguage has already run and changed passageLanguage
+      // and that the setPassageLanguage mock itself is the same instance for subsequent calls.
+      // The critical part is the defaultLanguageAppliedRef.current check.
+
+      rerender(<TextGeneratorContainer />); // Re-render with potentially new contextLanguage
+
+      // Even if contextLanguage changes, the default setting should have already occurred and not repeat.
+      // The setPassageLanguage('es') was from the first render.
+      // If contextLanguage changed to 'fr', and assuming 'es' was set, new logic would be:
+      // contextLanguage = 'fr', currentPassageLanguage = 'es' (set by previous run)
+      // if ('fr' === 'en') -> false. else if ('es' !== 'en') -> true. setPassageLanguage('en')
+      // This shows the default logic might run again if contextLanguage changes *after* initial setup
+      // The current implementation applies default once on mount. If UI lang changes later, it might re-default.
+      // The current tests are for the *initial* defaulting.
+      // For this "once" test, let's simplify: ensure after first call, subsequent renders with same initial conditions don't recall.
+      // The ref ensures that for the *same initial conditions*, it won't run again.
+
+      // Resetting for a cleaner "once" check with stable contextLanguage
+      vi.clearAllMocks(); // Clear calls for this specific check
+      (useLanguage as any).mockReturnValue({ language: 'en' });
+      const rerenderState = {
+        ...mockStoreState,
+        passageLanguage: 'de',
+        setPassageLanguage: mockSetPassageLanguage,
+      };
+      (useTextGeneratorStore as any).mockReturnValue(rerenderState);
+      (useTextGeneratorStore as any).getState = vi.fn(() => rerenderState);
+      // First render
+      const { rerender: rerender2 } = render(<TextGeneratorContainer />);
+      expect(mockSetPassageLanguage).toHaveBeenCalledWith('es');
+      expect(mockSetPassageLanguage).toHaveBeenCalledTimes(1);
+
+      // Subsequent render (e.g., due to unrelated parent re-render or minor state change not affecting default logic)
+      // The component's internal ref should prevent calling setPassageLanguage again for defaulting.
+      rerender2(<TextGeneratorContainer />);
+      expect(mockSetPassageLanguage).toHaveBeenCalledTimes(1); // Still 1, not 2
+    });
   });
 });
diff --git a/app/components/TextGenerator/TextGeneratorContainer.tsx b/app/components/TextGenerator/TextGeneratorContainer.tsx
@@ -4,6 +4,7 @@ import React, { useRef, useEffect } from 'react';
 import { useLanguage } from '@/hooks/useLanguage';
 import { useSession } from 'next-auth/react';
 import useTextGeneratorStore from '@/store/textGeneratorStore';
+import { type LearningLanguage } from '@/lib/domain/language';
 import LanguageSelector from './LanguageSelector';
 import LoginPrompt from './LoginPrompt';
 import ErrorDisplay from './ErrorDisplay';
@@ -16,10 +17,12 @@ import Generator from './Generator';
 const TextGeneratorContainer = () => {
   const { language: contextLanguage } = useLanguage();
   const { status } = useSession();
-  const { loading, quizData, showContent, isAnswered, fetchProgress } = useTextGeneratorStore();
+  const { loading, quizData, showContent, isAnswered, fetchProgress, setPassageLanguage } =
+    useTextGeneratorStore();
 
   const contentContainerRef = useRef<HTMLDivElement>(null);
   const generatedContentRef = useRef<HTMLDivElement>(null);
+  const defaultLanguageAppliedRef = useRef(false);
 
   const isContentVisible = !!(quizData && !loading && showContent);
 
@@ -41,8 +44,22 @@ const TextGeneratorContainer = () => {
       void fetchProgress();
     }
 
+    if (!defaultLanguageAppliedRef.current) {
+      const currentPassageLanguage = useTextGeneratorStore.getState().passageLanguage;
+      if (contextLanguage === 'en') {
+        if (currentPassageLanguage !== 'es') {
+          setPassageLanguage('es' as LearningLanguage);
+        }
+      } else {
+        if (currentPassageLanguage !== 'en') {
+          setPassageLanguage('en' as LearningLanguage);
+        }
+      }
+      defaultLanguageAppliedRef.current = true;
+    }
+
     useTextGeneratorStore.setState({ generatedQuestionLanguage: contextLanguage });
-  }, [status, fetchProgress, contextLanguage]);
+  }, [status, fetchProgress, contextLanguage, setPassageLanguage]);
 
   return (
     <div
