1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '@testing-library/react';
import { Legend } from '../../../atoms';
import { Switch, type SwitchOption } from './switch';
const doNothing = () => {
/* Do nothing. */
};
const items: [SwitchOption, SwitchOption] = [
{ id: 'item-1', label: 'Option 1', value: 'option-1' },
{ id: 'item-2', label: 'Option 2', value: 'option-2' },
];
describe('Switch', () => {
it('renders a radio group with two choices', () => {
const legend = 'Options:';
render(
<Switch
items={items}
legend={<Legend>{legend}</Legend>}
name="possimus"
onSwitch={doNothing}
value={items[0].value}
/>
);
expect(
rtlScreen.getByRole('radiogroup', { name: legend })
).toBeInTheDocument();
expect(rtlScreen.getAllByRole('radio')).toHaveLength(items.length);
});
it('can render a disabled switch', () => {
render(
<Switch
isDisabled
items={items}
name="architecto"
onSwitch={doNothing}
value={items[1].value}
/>
);
const radios = rtlScreen.getAllByRole<HTMLInputElement>('radio');
expect(radios.every((radio) => radio.disabled)).toBe(true);
expect(rtlScreen.getByRole('radiogroup')).toBeDisabled();
});
});
|
