refactor(components): merge HeadingButton and Widget components

The HeadingButton component was only used inside Widget component and
it is not very useful on its own so I merge the two components in a
new Collapsible component.

1 files changed, 83 insertions, 0 deletions

diff --git a/src/components/molecules/collapsible/collapsible.test.tsx b/src/components/molecules/collapsible/collapsible.test.tsx
new file mode 100644
index 0000000..52fbdd0
--- /dev/null
+++ b/src/components/molecules/collapsible/collapsible.test.tsx
@@ -0,0 +1,83 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { Collapsible } from './collapsible';
+import { Heading } from 'src/components/atoms';
+
+const body =
+  'Error autem numquam vero quo cum qui voluptatem est qui. Quasi id rem molestiae. Velit voluptatum dolores et officia. Ut voluptatem quae ut quaerat vel nulla.';
+const heading = 'sed minima sed';
+
+describe('Collapsible', () => {
+  it('renders the collapsible heading and body', () => {
+    const headingLevel = 2;
+
+    render(
+      <Collapsible heading={<Heading level={headingLevel}>{heading}</Heading>}>
+        {body}
+      </Collapsible>
+    );
+
+    expect(
+      rtlScreen.getByRole('heading', { level: headingLevel })
+    ).toHaveTextContent(heading);
+    expect(rtlScreen.getByText(body)).toBeInTheDocument();
+  });
+
+  it('can be collapsed by default', () => {
+    render(
+      <Collapsible heading={<Heading level={3}>{heading}</Heading>} isCollapsed>
+        {body}
+      </Collapsible>
+    );
+
+    expect(rtlScreen.getByRole('button').parentElement).toHaveClass(
+      'wrapper--collapsed'
+    );
+    // Neither toBeVisible or toHaveStyle are working.
+    // expect(rtlScreen.getByText(body)).toHaveStyle({ visibility: 'hidden' });
+    // expect(rtlScreen.getByText(body)).not.toBeVisible();
+  });
+
+  it('can be expanded by default', () => {
+    render(
+      <Collapsible
+        heading={<Heading level={3}>{heading}</Heading>}
+        isCollapsed={false}
+      >
+        {body}
+      </Collapsible>
+    );
+
+    expect(rtlScreen.getByRole('button').parentElement).toHaveClass(
+      'wrapper--expanded'
+    );
+    expect(rtlScreen.getByText(body)).toBeVisible();
+  });
+
+  it('can be collapsed and/or expanded by the user', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Collapsible heading={<Heading level={3}>{heading}</Heading>}>
+        {body}
+      </Collapsible>
+    );
+
+    expect(rtlScreen.getByRole('button').parentElement).toHaveClass(
+      'wrapper--expanded'
+    );
+
+    await user.click(rtlScreen.getByRole('button', { name: heading }));
+
+    expect(rtlScreen.getByRole('button').parentElement).toHaveClass(
+      'wrapper--collapsed'
+    );
+
+    await user.click(rtlScreen.getByRole('button', { name: heading }));
+
+    expect(rtlScreen.getByRole('button').parentElement).toHaveClass(
+      'wrapper--expanded'
+    );
+  });
+});