test: add missing tests on Accordion

Signed-off-by: Théo Mesnil <[email protected]>

package.json

@@ -34,7 +34,7 @@
     "pre-build": "yarn icons:collect",
     "release": "yarn lerna version --conventional-commits --no-private",
     "start": "yarn docs:dev",
-    "test": "node --expose-gc ./node_modules/.bin/jest ./packages --logHeapUsage",
+    "test": "yarn jest packages/* --logHeapUsage",
     "watch": "onchange 'packages/**/*.ts*' -e '**/dist/**' -- node -r esm scripts/watch.js {{changed}}",
     "webfont:build": "node -r esm scripts/webfont-build.js --force && yarn build:packages --scope @welcome-ui/icons.font",
     "webfont:deploy": "./scripts/webfont-deploy.sh",

packages/Accordion/src/index.tsx

@@ -18,16 +18,20 @@ export interface AccordionOptions {
 export type AccordionProps = CreateWuiProps<'div', AccordionOptions>
 
 export const Accordion = forwardRef<'div', AccordionProps>(
-  ({ children, icon = <RightIcon />, title, store, ...rest }, ref) => {
+  ({ children, icon = <RightIcon />, title, store, dataTestId, ...rest }, ref) => {
     const isOpen = store?.useState('open')
 
     return (
-      <S.Accordion ref={ref} {...rest}>
-        <S.Disclosure store={store}>
+      <S.Accordion data-testid={dataTestId} ref={ref} {...rest}>
+        <S.Disclosure data-testid={dataTestId ? `${dataTestId}-title` : undefined} store={store}>
           {title}
           <S.Icon isOpen={isOpen}>{cloneElement(icon, { size: 'sm' })}</S.Icon>
         </S.Disclosure>
-        <S.Content isOpen={isOpen} store={store}>
+        <S.Content
+          data-testid={dataTestId ? `${dataTestId}-content` : undefined}
+          isOpen={isOpen}
+          store={store}
+        >
           <AnimateHeight animateOpacity duration={200} height={isOpen ? 'auto' : 0}>
             {children}
           </AnimateHeight>

packages/Accordion/tests/index.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { render, renderHook } from '../../../utils/tests'
+import { fireEvent, render, renderHook, screen } from '../../../utils/tests'
 import { Accordion, useAccordionStore } from '../src'
 
 const content = 'content'
@@ -12,13 +12,41 @@ describe('<Accordion>', () => {
       result: { current: store },
     } = renderHook(() => useAccordionStore())
 
-    const { container } = render(
-      <Accordion store={store} title={title}>
+    render(
+      <Accordion dataTestId="accordion" store={store} title={title}>
         {content}
       </Accordion>
     )
 
-    expect(container).toHaveTextContent(content)
-    expect(container).toHaveTextContent(title)
+    const button = screen.getByTestId('accordion-title')
+    const children = screen.getByTestId('accordion-content')
+
+    expect(button).toHaveTextContent(title)
+    expect(button).toHaveAttribute('aria-expanded', 'false')
+    expect(children).toHaveTextContent(content)
+    expect(children).toHaveAttribute('hidden')
+
+    fireEvent.click(button)
+
+    expect(button).toHaveAttribute('aria-expanded', 'true')
+    expect(children).not.toHaveAttribute('hidden')
+  })
+
+  it('should render correctly on open at start', () => {
+    const {
+      result: { current: store },
+    } = renderHook(() => useAccordionStore({ defaultOpen: true }))
+
+    render(
+      <Accordion dataTestId="accordion" store={store} title={title}>
+        {content}
+      </Accordion>
+    )
+
+    const button = screen.getByTestId('accordion-title')
+    const children = screen.getByTestId('accordion-content')
+
+    expect(button).toHaveAttribute('aria-expanded', 'true')
+    expect(children).not.toHaveAttribute('hidden')
   })
 })