Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/components/challenge-transcript.test.tsx (TypeScript)

Code before:
    render(<ChallengeTranscript {...baseProps} />);
    fireEvent.click(screen.getByText('learn.transcript'));
    expect(setSpy).not.toHaveBeenCalled();
    setSpy.mockRestore();
  });

  it('should render the transcript as a table when isDialogue is true', () => {
    store.set('fcc-transcript-expanded', true);

    render(
      <ChallengeTranscript
        {...baseProps}
        transcript={'Hello\nWorld'}
        shouldPersistExpanded={true}
        isDialogue={true}
      />
    );
    const table = screen.getByRole('table');
    expect(table).toBeVisible();
    expect(screen.getByRole('cell', { name: 'Hello' })).toBeVisible();
    expect(screen.getByRole('cell', { name: 'World' })).toBeVisible();
  });

  it('should render the transcript with PrismFormatted when isDialogue is false', () => {
    store.set('fcc-transcript-expanded', true);

    render(
      <ChallengeTranscript
        {...baseProps}
        transcript='<pre><code class="language-js">console.log("hi")</code></pre>'
        shouldPersistExpanded={true}
        isDialogue={false}
      />
    );

    const preElement = screen.getByRole('region');
    expect(preElement).toBeVisible();
    expect(preElement.tagName).toBe('PRE');

    // eslint-disable-next-line testing-library/no-node-access
    const codeElement = preElement.querySelector('code');
    expect(codeElement).toBeInTheDocument();
    expect(preElement).toHaveTextContent('console.log("hi")');
  });
});


Review comment (suggestion):
These tag name assertions are probably redundant, since the `ChallengeTranscript` component just renders the HTML directly without modification. Though, they provide a safeguard against regressions in case the rendering logic evolves.

Code after:
    render(<ChallengeTranscript {...baseProps} />);
    fireEvent.click(screen.getByText('learn.transcript'));
    expect(setSpy).not.toHaveBeenCalled();
    setSpy.mockRestore();
  });

  it('should render the transcript as paragraphs when isDialogue is true', () => {
    store.set('fcc-transcript-expanded', true);

    render(
      <ChallengeTranscript
        {...baseProps}
        transcript={'<p><b>Alice</b>: Hello</p><p><b>Bob</b>: World</p>'}
        shouldPersistExpanded={true}
        isDialogue={true}
      />
    );

    /* eslint-disable testing-library/no-node-access */
    const aliceB = screen.getByText('Alice');
    expect(aliceB).toBeVisible();
    expect(aliceB.tagName).toBe('B');

    const aliceP = aliceB.parentElement;
    expect(aliceP?.tagName).toBe('P');
    expect(aliceP?.textContent).toBe('Alice: Hello');

    const bobB = screen.getByText('Bob');
    expect(bobB).toBeVisible();
    expect(bobB.tagName).toBe('B');

    const bobP = bobB.parentElement;
    expect(bobP?.tagName).toBe('P');
    expect(bobP?.textContent).toBe('Bob: World');
    /* eslint-enable testing-library/no-node-access */
  });

  it('should render the transcript with PrismFormatted when isDialogue is false', () => {
    store.set('fcc-transcript-expanded', true);

    render(
      <ChallengeTranscript
        {...baseProps}
        transcript='<pre><code class="language-js">console.log("hi")</code></pre>'
        shouldPersistExpanded={true}
        isDialogue={false}
      />
    );

    const preElement = screen.getByRole('region');
    expect(preElement).toBeVisible();