Add tests for accordion

Add story and playground to guideline

src/lib/components/accordion/accordion.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import React, { useState } from 'react';
+import Accordion from './accordion.component';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+// export function mockOffsetSize(width: number, height: number) {
+//   const originalFunction = window.getComputedStyle;
+//   const spyGetComputedStyle = jest.spyOn(window, 'getComputedStyle');
+//   spyGetComputedStyle.mockImplementation((elt, _) => {
+//     const originalStyle = originalFunction(elt);
+//     originalStyle.fontSize = '14px';
+//     originalStyle.paddingLeft = '0px';
+//     originalStyle.paddingRight = '0px';
+//     originalStyle.paddingTop = '0px';
+//     originalStyle.paddingBottom = '0px';
+//     return originalStyle;
+//   });
+// }
+
+describe('Accordion', () => {
+  //   beforeAll(() => {
+  //     mockOffsetSize(1000, 1000);
+  //   });
+  const selectors = {
+    accordionToggle: () => screen.getByRole('button'),
+    accordionContainer: () => screen.getByRole('region'),
+    accordionContent: () => screen.queryByText(/Test content/i),
+  };
+  const renderAccordion = () => {
+    const queryClient = new QueryClient();
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Accordion title="Advanced Testings" id="test-accordion">
+          <div>Test content</div>
+        </Accordion>
+      </QueryClientProvider>,
+    );
+  };
+  it('should render the Accordion component with title and content', () => {
+    renderAccordion();
+
+    const accordionToggle = selectors.accordionToggle();
+    expect(accordionToggle).toBeInTheDocument();
+    const accordionContent = selectors.accordionContent();
+    expect(accordionContent).toBeInTheDocument();
+  });
+
+  it('should toggle the content when clicking on the accordion header', () => {
+    renderAccordion();
+    const accordionToggle = selectors.accordionToggle();
+    const accordionContent = selectors.accordionContent();
+    expect(accordionContent).not.toBeVisible();
+    userEvent.click(accordionToggle);
+    expect(accordionContent).toBeVisible();
+  });
+
+  it('should toggle the content when pressing the enter key or space key on the accordion header', () => {
+    renderAccordion();
+    const accordionToggle = selectors.accordionToggle();
+    const accordionContent = selectors.accordionContent();
+    expect(accordionContent).not.toBeVisible();
+    accordionToggle.focus();
+    userEvent.keyboard('{enter}');
+    expect(accordionContent).toBeVisible();
+    userEvent.keyboard('{space}');
+    expect(accordionContent).not.toBeVisible();
+  });
+});

stories/Accordion/accordion.guideline.mdx

@@ -16,5 +16,11 @@ import * as Stories from './accordion.stories';
 
 # Accordion
 
-Accordions are used to toggle the visibility of content.
+Accordions are used to toggle the visibility of content.  
 It is used to hide non essential information or to reduce the amount of information displayed on the screen.
+
+## Playground
+
+<Canvas of={Stories.Playground} layout="fullscreen" />
+
+<Controls of={Stories.Playground} />

stories/Accordion/accordion.stories.tsx

@@ -16,13 +16,49 @@ const meta: Meta<AccordionProps> = {
     title: 'Accordion title',
     children: (
       <Stack direction="vertical" gap="r8">
-        <div>This the subtitle explaining the content of the accordion.</div>
         <div>This is the content of the accordion.</div>
+        <Button label={'Check'} onClick={() => console.log('click')}></Button>
       </Stack>
     ),
   },
+  argTypes: {
+    children: {
+      control: { disable: true },
+      description: 'Content of the accordion',
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    title: {
+      control: { type: 'text' },
+      description: 'Title of the accordion',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    style: {
+      control: { disable: true },
+      description: 'Use this to style the accordion content container',
+      table: { type: { summary: 'CSSProperties' } },
+    },
+    id: {
+      control: { disable: true },
+      table: { type: { summary: 'string' } },
+      description: 'Unique id for the accordion content container',
+    },
+  },
 };
 
 export default meta;
 
 export const Playground: AccordionStory = {};
+
+export const Stacked: AccordionStory = {
+  render: (args) => (
+    <Stack direction="vertical" gap="r8">
+      <Accordion {...args} />
+      <Accordion {...args} />
+      <Accordion {...args} style={{ backgroundColor: 'grey' }} />
+    </Stack>
+  ),
+};