diff --git a/client/src/templates/Challenges/components/challenge-transcript.test.tsx b/client/src/templates/Challenges/components/challenge-transcript.test.tsx index e4b888f84d9..644e998dec2 100644 --- a/client/src/templates/Challenges/components/challenge-transcript.test.tsx +++ b/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('', () => { - beforeEach(() => { + afterEach(() => { store.clearAll(); }); @@ -35,10 +36,26 @@ describe('', () => { 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(); + render(); 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(); + 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(); + fireEvent.click(screen.getByText('learn.transcript')); + expect(setSpy).not.toHaveBeenCalled(); + setSpy.mockRestore(); + }); }); diff --git a/client/src/templates/Challenges/components/challenge-transcript.tsx b/client/src/templates/Challenges/components/challenge-transcript.tsx index 9bc54727a84..0ee53c12550 100644 --- a/client/src/templates/Challenges/components/challenge-transcript.tsx +++ b/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) { e.preventDefault(); - store.set('fcc-transcript-expanded', !isOpen); + if (shouldPersistExpanded) { + store.set('fcc-transcript-expanded', !isOpen); + } setIsOpen(!isOpen); }