This repository has been archived by the owner on Oct 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add test, aria labels, update storybook
1 parent
da73fec
commit de1e01f
Showing
6 changed files
with
142 additions
and
182 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
import React from 'react'; | ||
import '@testing-library/jest-dom'; | ||
import { render, screen } from '@testing-library/react'; | ||
import userEvent from '@testing-library/user-event'; | ||
|
||
import { ThemeProvider } from 'styled-components'; | ||
import { themes } from '../../themes'; | ||
import { Accordion } from './Accordion'; | ||
|
||
describe('Accordion', () => { | ||
it('renders accordion', () => { | ||
render( | ||
<ThemeProvider theme={themes['light']}> | ||
<Accordion> | ||
<Accordion.Item /> | ||
</Accordion> | ||
</ThemeProvider> | ||
); | ||
|
||
const accordion = screen.getByRole('button'); | ||
expect(accordion).toBeInTheDocument(); | ||
}); | ||
|
||
it('triggers and expands accordion item when clicking the header', () => { | ||
render( | ||
<ThemeProvider theme={themes['light']}> | ||
<Accordion> | ||
<Accordion.Item /> | ||
</Accordion> | ||
</ThemeProvider> | ||
); | ||
|
||
const accordion = screen.getByRole('button'); | ||
userEvent.click(accordion).then(() => { | ||
const content = screen.getByRole('heading'); | ||
expect(content).toBeInTheDocument(); | ||
}); | ||
}); | ||
|
||
it('can receive text as title and subcopy props and render them', () => { | ||
render( | ||
<ThemeProvider theme={themes['light']}> | ||
<Accordion> | ||
<Accordion.Item | ||
title="Accordion item title" | ||
subcopy="Accordion item subcopy" | ||
/> | ||
</Accordion> | ||
</ThemeProvider> | ||
); | ||
|
||
const title = screen.getByText('Accordion item title'); | ||
const subcopy = screen.getByText('Accordion item subcopy'); | ||
expect(title).toBeInTheDocument(); | ||
expect(subcopy).toBeInTheDocument(); | ||
}); | ||
|
||
it('can receive children component and render them', () => { | ||
render( | ||
<ThemeProvider theme={themes['light']}> | ||
<Accordion> | ||
<Accordion.Item> | ||
<div>Child component</div> | ||
</Accordion.Item> | ||
</Accordion> | ||
</ThemeProvider> | ||
); | ||
|
||
const accordion = screen.getByRole('button'); | ||
userEvent.click(accordion).then(() => { | ||
const childComponentContent = | ||
screen.getByText('Child component'); | ||
expect(childComponentContent).toBeInTheDocument(); | ||
}); | ||
}); | ||
|
||
it('does not render children when disabled prop is true', () => { | ||
render( | ||
<ThemeProvider theme={themes['light']}> | ||
<Accordion> | ||
<Accordion.Item disabled={true}> | ||
<div>Child component</div> | ||
</Accordion.Item> | ||
</Accordion> | ||
</ThemeProvider> | ||
); | ||
|
||
const accordion = screen.getByRole('button'); | ||
userEvent.click(accordion).then(() => { | ||
const childComponentContent = | ||
screen.getByText('Child component'); | ||
expect(childComponentContent).not.toBeInTheDocument(); | ||
}); | ||
}); | ||
}); |