generated from StanfordBDHG/NextJSTemplate
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add tests and stories to Tabs component (#71)
# Add tests and stories to Tabs component ## ⚙️ Release Notes * Add tests and stories to Tabs component  Closes #23 ### Code of Conduct & Contributing Guidelines By submitting creating this pull request, you agree to follow our [Code of Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md) and [Contributing Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md): - [x] I agree to follow the [Code of Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md) and [Contributing Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).
- Loading branch information
1 parent
29e4fea
commit c918e05
Showing
7 changed files
with
233 additions
and
60 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| // | ||
| // This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project | ||
| // | ||
| // SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md) | ||
| // | ||
| // SPDX-License-Identifier: MIT | ||
| // | ||
| import { TabsContent, TabsList, TabsTrigger } from './Tabs' | ||
|
|
||
| export enum Tab { | ||
| lorem = 'lorem', | ||
| ipsum = 'ipsum', | ||
| dolor = 'dolor', | ||
| } | ||
|
|
||
| export const elements = { | ||
| triggers: ( | ||
| <TabsList> | ||
| <TabsTrigger value={Tab.lorem}>Lorem</TabsTrigger> | ||
| <TabsTrigger value={Tab.ipsum}>Ipsum</TabsTrigger> | ||
| <TabsTrigger value={Tab.dolor}>Dolor</TabsTrigger> | ||
| </TabsList> | ||
| ), | ||
| content: ( | ||
| <> | ||
| <TabsContent value={Tab.lorem}> | ||
| <h1 className="text-xl">Lorem content</h1> | ||
| Accusantium debitis dignissimos eaque explicabo impedit minima, modi | ||
| nisi pariatur praesentium voluptatem! Aliquam corporis enim error iste | ||
| pariatur sed vel, voluptas voluptates. | ||
| </TabsContent> | ||
| <TabsContent value={Tab.ipsum}> | ||
| <h1 className="text-xl">Ipsum content</h1> | ||
| Alias animi corporis ea facilis magnam nulla obcaecati omnis possimus | ||
| quis voluptatum. Consectetur enim expedita facilis fugiat molestiae odio | ||
| officiis, placeat! Harum. | ||
| </TabsContent> | ||
| <TabsContent value={Tab.dolor}> | ||
| <h1 className="text-xl">Dolor content</h1> | ||
| Ab aperiam autem blanditiis culpa deleniti earum expedita, harum ipsa | ||
| ipsum itaque molestias neque nesciunt nisi odio pariatur quibusdam sequi | ||
| tempora vel? | ||
| </TabsContent> | ||
| </> | ||
| ), | ||
| } |
60 changes: 60 additions & 0 deletions
60
packages/design-system/src/components/Tabs/Tabs.stories.tsx
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,60 @@ | ||
| // | ||
| // This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project | ||
| // | ||
| // SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md) | ||
| // | ||
| // SPDX-License-Identifier: MIT | ||
| // | ||
| import { type Meta } from '@storybook/react' | ||
| import { useState } from 'react' | ||
| import { Tabs, TabsList, TabsTrigger } from './Tabs' | ||
| import { elements, Tab } from './Tabs.mocks' | ||
|
|
||
| const meta: Meta<typeof Tabs> = { | ||
| title: 'Components/Tabs', | ||
| component: Tabs, | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| export const Default = () => ( | ||
| <Tabs defaultValue={Tab.lorem}> | ||
| {elements.triggers} | ||
| {elements.content} | ||
| </Tabs> | ||
| ) | ||
|
|
||
| export const Controlled = () => { | ||
| const [tab, setTab] = useState(Tab.lorem) | ||
| return ( | ||
| <Tabs value={tab} onValueChange={(value) => setTab(value as Tab)}> | ||
| {elements.triggers} | ||
| <p>active tab: {tab}</p> | ||
| {elements.content} | ||
| </Tabs> | ||
| ) | ||
| } | ||
|
|
||
| export const CustomPositioning = () => { | ||
| const [tab, setTab] = useState(Tab.lorem) | ||
| return ( | ||
| <> | ||
| <Tabs value={tab} onValueChange={(value) => setTab(value as Tab)}> | ||
| <nav className="fixed left-0 top-0">{elements.triggers}</nav> | ||
| {elements.content} | ||
| </Tabs> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export const TriggerGrow = () => ( | ||
| <div className="w-96"> | ||
| <Tabs defaultValue={Tab.lorem}> | ||
| <TabsList grow> | ||
| <TabsTrigger value={Tab.lorem}>Lorem</TabsTrigger> | ||
| <TabsTrigger value={Tab.ipsum}>Ipsum</TabsTrigger> | ||
| <TabsTrigger value={Tab.dolor}>Dolor</TabsTrigger> | ||
| </TabsList> | ||
| </Tabs> | ||
| </div> | ||
| ) |
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,47 @@ | ||
| // | ||
| // This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project | ||
| // | ||
| // SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md) | ||
| // | ||
| // SPDX-License-Identifier: MIT | ||
| // | ||
| import { render, screen } from '@testing-library/react' | ||
| import { userEvent } from '@testing-library/user-event' | ||
| import { elements, Tab } from './Tabs.mocks' | ||
| import { Tabs } from '.' | ||
|
|
||
| describe('Tabs', () => { | ||
| it('renders no content if no default value provided', () => { | ||
| render( | ||
| <Tabs> | ||
| {elements.triggers} | ||
| {elements.content} | ||
| </Tabs>, | ||
| ) | ||
|
|
||
| const contentElement = screen.queryByText(/content/) | ||
| expect(contentElement).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('renders correct tab', () => { | ||
| render(<Tabs value={Tab.dolor}>{elements.content}</Tabs>) | ||
|
|
||
| const contentElement = screen.getByText(/Dolor content/) | ||
| expect(contentElement).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('switches tabs', async () => { | ||
| render( | ||
| <Tabs> | ||
| {elements.triggers} | ||
| {elements.content} | ||
| </Tabs>, | ||
| ) | ||
|
|
||
| const ipsumTab = screen.getByRole('tab', { name: /Ipsum/ }) | ||
| await userEvent.click(ipsumTab) | ||
|
|
||
| const ipsumContent = screen.getByText(/Ipsum content/) | ||
| expect(ipsumContent).toBeInTheDocument() | ||
| }) | ||
| }) |
Oops, something went wrong.