1import { fireEvent, render } from '@testing-library/react';
2
3import { Collapsible, DETAILS, SUMMARY } from '.';
4
5import { P } from '~/ui/components/Text';
6
7describe(Collapsible, () => {
8  it('hides content by default', () => {
9    const { getByText } = render(<Collapsible summary="Summary">Content</Collapsible>);
10    expect(getByText('Summary')).toBeVisible();
11    expect(getByText('Content')).not.toBeVisible();
12  });
13
14  it('shows content when opened', () => {
15    const { getByText } = render(<Collapsible summary="Summary">Content</Collapsible>);
16    fireEvent.click(getByText('Summary'));
17    expect(getByText('Summary')).toBeVisible();
18    expect(getByText('Content')).toBeVisible();
19  });
20
21  it('shows content when rendered with open', () => {
22    const { getByText } = render(
23      <Collapsible summary="Summary" open>
24        Content
25      </Collapsible>
26    );
27    expect(getByText('Summary')).toBeVisible();
28    expect(getByText('Content')).toBeVisible();
29  });
30});
31
32// TODO(cedric): remove everything below this line once we switch to MDX v2
33describe(DETAILS, () => {
34  it('renders without summary', () => {
35    const { getByText } = render(
36      <DETAILS>
37        <P>Content</P>
38      </DETAILS>
39    );
40    expect(getByText('Content')).toBeInTheDocument();
41  });
42
43  it('renders with hidden and separated content', () => {
44    const { getByTestId } = render(
45      <DETAILS testID="parent">
46        {/* @ts-ignore - We have to fake MDX v1's original type prop here, thats what we use to find it */}
47        <SUMMARY testID="summary" originalType="summary">
48          Summary
49        </SUMMARY>
50        <P testID="content">Content</P>
51      </DETAILS>
52    );
53    expect(getByTestId('summary').parentNode).toBe(getByTestId('parent'));
54    expect(getByTestId('content').parentNode).not.toBe(getByTestId('parent'));
55  });
56});
57