Skip to content

Commit

Permalink
Add stories and tests to Switch component (#68)
Browse files Browse the repository at this point in the history
# Add stories and tests to Switch component


## ⚙️ Release Notes 
* Add stories and tests to Switch component


![image](https://github.com/user-attachments/assets/bda2065f-92af-44f3-88c5-88851ced9231)

### 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
arkadiuszbachorski authored Oct 15, 2024
1 parent 1edfc57 commit 112e0d5
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 0 deletions.
39 changes: 39 additions & 0 deletions packages/design-system/src/components/Switch/Switch.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
//
// 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, type StoryObj } from '@storybook/react'
import { fn } from '@storybook/test'
import { useState } from 'react'
import { SideLabel } from '@/packages/design-system/src/components/SideLabel'
import { Switch } from './Switch'

const meta: Meta<typeof Switch> = {
title: 'Components/Switch',
component: Switch,
args: {
onCheckedChange: fn(),
},
}

export default meta

type Story = StoryObj<typeof Switch>

export const Unchecked: Story = { args: { checked: false } }

export const Checked: Story = { args: { checked: true } }

export const Functional = () => {
const [checked, setChecked] = useState(false)
return <Switch checked={checked} onCheckedChange={setChecked} />
}

export const Labeled = () => (
<SideLabel label="Show unread only">
<Switch checked />
</SideLabel>
)
30 changes: 30 additions & 0 deletions packages/design-system/src/components/Switch/Switch.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
//
// 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 { fireEvent, render, screen } from '@testing-library/react'
import { vitest } from 'vitest'
import { Switch } from '.'

describe('Switch', () => {
it('renders functional switch element', () => {
const onCheckedChange = vitest.fn()

render(
<Switch
checked={true}
onCheckedChange={onCheckedChange}
aria-label="Toggle"
/>,
)

const element = screen.getByLabelText('Toggle')
fireEvent.click(element)

const newCheckedValue = false
expect(onCheckedChange).toHaveBeenCalledWith(newCheckedValue)
})
})

0 comments on commit 112e0d5

Please sign in to comment.