fix(client): allow transcript expanded state to not persist (#62492)

client/src/templates/Challenges/components/challenge-transcript.test.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import store from 'store';
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import ChallengeTranscript from './challenge-transcript';
 
 const baseProps = {
-  transcript: 'Sample transcript text'
+  transcript: 'Sample transcript text',
+  shouldPersistExpanded: false
 };
 
 describe('<ChallengeTranscript />', () => {
-  beforeEach(() => {
+  afterEach(() => {
     store.clearAll();
   });
 
@@ -35,10 +36,26 @@ describe('<ChallengeTranscript />', () => {
     expect(screen.getByText('Sample transcript text')).not.toBeVisible();
   });
 
-  it("renders expanded when 'fcc-transcript-expanded = true'", () => {
+  it("renders expanded when 'fcc-transcript-expanded = true' and shouldPersistExpanded = true", () => {
     store.set('fcc-transcript-expanded', true);
-    render(<ChallengeTranscript {...baseProps} />);
+    render(<ChallengeTranscript {...baseProps} shouldPersistExpanded={true} />);
     expect(screen.getByTestId('challenge-transcript')).toHaveAttribute('open');
     expect(screen.getByText('Sample transcript text')).toBeVisible();
   });
+
+  it('writes to localstorage when shouldPersistExpanded = true', () => {
+    const setSpy = vi.spyOn(store, 'set');
+    render(<ChallengeTranscript {...baseProps} shouldPersistExpanded={true} />);
+    fireEvent.click(screen.getByText('learn.transcript'));
+    expect(setSpy).toHaveBeenCalledWith('fcc-transcript-expanded', true);
+    setSpy.mockRestore();
+  });
+
+  it('does not write to localstorage when shouldPersistExpanded = false', () => {
+    const setSpy = vi.spyOn(store, 'set');
+    render(<ChallengeTranscript {...baseProps} />);
+    fireEvent.click(screen.getByText('learn.transcript'));
+    expect(setSpy).not.toHaveBeenCalled();
+    setSpy.mockRestore();
+  });
 });

client/src/templates/Challenges/components/challenge-transcript.tsx

@@ -7,21 +7,27 @@ import './challenge-transcript.css';
 
 interface ChallengeTranscriptProps {
   transcript: string;
+  shouldPersistExpanded?: boolean;
 }
 
 function ChallengeTranscript({
-  transcript
+  transcript,
+  shouldPersistExpanded
 }: ChallengeTranscriptProps): JSX.Element {
   const { t } = useTranslation();
 
   // default to collapsed
-  const [isOpen, setIsOpen] = useState(
-    () => (store.get('fcc-transcript-expanded') as boolean | null) ?? false
+  const [isOpen, setIsOpen] = useState(() =>
+    shouldPersistExpanded
+      ? (store.get('fcc-transcript-expanded') as boolean | null) ?? false
+      : false
   );
 
   function toggleExpandedState(e: React.MouseEvent<HTMLDetailsElement>) {
     e.preventDefault();
-    store.set('fcc-transcript-expanded', !isOpen);
+    if (shouldPersistExpanded) {
+      store.set('fcc-transcript-expanded', !isOpen);
+    }
     setIsOpen(!isOpen);
   }