|
1 | | -import { useEffect, useState } from 'react' |
2 | 1 | import { render, screen, waitFor } from '@testing-library/react' |
3 | 2 | import userEvent from '@testing-library/user-event' |
4 | 3 | import Toggle from '../Toggle' |
5 | 4 |
|
6 | 5 | describe('<Toggle />', () => { |
7 | | - // eslint-disable-next-line react/prop-types |
8 | | - function ToggleDummy({ toggleMock, enabled, ...otherProps }) { |
9 | | - const [isEnabled, setEnabled] = useState(enabled ?? false) |
10 | | - |
11 | | - useEffect(() => toggleMock(isEnabled), [isEnabled]) |
12 | | - |
13 | | - return ( |
14 | | - <Toggle id='test' enabled={isEnabled} onToggle={setEnabled} {...otherProps} /> |
15 | | - ) |
16 | | - } |
17 | | - |
18 | 6 | it('should correctly toggle between states', async () => { |
19 | 7 | const toggleMock = vi.fn() |
| 8 | + render(<Toggle id='test' enabled={false} onToggle={toggleMock} />) |
20 | 9 |
|
21 | | - render(<ToggleDummy toggleMock={toggleMock} />) |
| 10 | + const { click } = userEvent.setup() |
22 | 11 |
|
23 | | - await userEvent.click(screen.getByRole('checkbox')) |
24 | | - await waitFor(() => expect(toggleMock).toHaveBeenLastCalledWith(true)) |
| 12 | + await click(screen.getByRole('checkbox')) |
| 13 | + await waitFor(() => expect(screen.getByRole('checkbox')).toBeChecked()) |
| 14 | + expect(toggleMock).toHaveBeenLastCalledWith(true) |
25 | 15 |
|
26 | | - await userEvent.click(screen.getByRole('checkbox')) |
27 | | - await waitFor(() => expect(toggleMock).toHaveBeenLastCalledWith(false)) |
| 16 | + await click(screen.getByRole('checkbox')) |
| 17 | + await waitFor(() => expect(screen.getByRole('checkbox')).not.toBeChecked()) |
| 18 | + expect(toggleMock).toHaveBeenLastCalledWith(false) |
28 | 19 | }) |
29 | 20 |
|
30 | 21 | it('should correctly render the disabled state', () => { |
31 | | - render(<ToggleDummy toggleMock={vi.fn()} disabled={true} />) |
| 22 | + render(<Toggle id='test' enabled={false} disabled={true} onToggle={vi.fn()} />) |
| 23 | + |
32 | 24 | expect(screen.getByRole('checkbox')).toBeDisabled() |
33 | 25 | expect(screen.getByRole('checkbox')).not.toBeChecked() |
34 | 26 | }) |
35 | 27 |
|
36 | 28 | it('should correctly render a toggled disabled state', async () => { |
37 | | - render(<ToggleDummy toggleMock={vi.fn()} enabled={true} disabled={true} />) |
| 29 | + render(<Toggle id='test' enabled={true} disabled={true} onToggle={vi.fn()} />) |
| 30 | + |
38 | 31 | expect(screen.getByRole('checkbox')).toBeDisabled() |
39 | 32 | await waitFor(() => expect(screen.getByRole('checkbox')).toBeChecked()) |
40 | 33 | }) |
|
0 commit comments