1import { fireEvent, render, screen } from '@testing-library/react';
2import GithubSlugger from 'github-slugger';
3import { PropsWithChildren } from 'react';
4
5import { Collapsible } from '.';
6
7import { HeadingManager } from '~/common/headingManager';
8import { HeadingsContext } from '~/components/page-higher-order/withHeadingManager';
9
10const prepareHeadingManager = () => {
11  const headingManager = new HeadingManager(new GithubSlugger(), { headings: [] });
12
13  return headingManager;
14};
15
16const WrapWithContext = ({ children }: PropsWithChildren) => {
17  const headingManager = prepareHeadingManager();
18  return <HeadingsContext.Provider value={headingManager}>{children}</HeadingsContext.Provider>;
19};
20
21describe('Collapsible', () => {
22  it('hides content by default', () => {
23    render(
24      <WrapWithContext>
25        <Collapsible summary="Summary">Content</Collapsible>
26      </WrapWithContext>
27    );
28    expect(screen.getByText('Summary')).toBeVisible();
29    expect(screen.getByText('Content')).not.toBeVisible();
30  });
31
32  it('shows content when opened', () => {
33    render(
34      <WrapWithContext>
35        <Collapsible summary="Summary">Content</Collapsible>
36      </WrapWithContext>
37    );
38    fireEvent.click(screen.getByText('Summary'));
39    expect(screen.getByText('Summary')).toBeVisible();
40    expect(screen.getByText('Content')).toBeVisible();
41  });
42
43  it('shows content when rendered with open', () => {
44    render(
45      <WrapWithContext>
46        <Collapsible summary="Summary" open>
47          Content
48        </Collapsible>
49      </WrapWithContext>
50    );
51    expect(screen.getByText('Summary')).toBeVisible();
52    expect(screen.getByText('Content')).toBeVisible();
53  });
54});
55