-
Notifications
You must be signed in to change notification settings - Fork 11.7k
/
ButtonSelect.test.tsx
56 lines (44 loc) · 1.57 KB
/
ButtonSelect.test.tsx
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
51
52
53
54
55
56
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { SelectableValue } from '@grafana/data';
import { ButtonSelect } from './ButtonSelect';
const OPTIONS: SelectableValue[] = [
{
label: 'Hello',
value: 'a',
},
{
label: 'World',
value: 'b',
},
];
describe('ButtonSelect', () => {
it('initially renders the selected value with the menu closed', () => {
const selected = OPTIONS[0];
render(<ButtonSelect value={selected} options={OPTIONS} onChange={() => {}} />);
expect(screen.getByText('Hello')).toBeInTheDocument();
expect(screen.queryAllByRole('menuitemradio')).toHaveLength(0);
});
it('opens the menu when clicking the button', async () => {
const selected = OPTIONS[0];
render(<ButtonSelect value={selected} options={OPTIONS} onChange={() => {}} />);
const button = screen.getByText('Hello');
await userEvent.click(button);
expect(screen.queryAllByRole('menuitemradio')).toHaveLength(2);
});
it('closes the menu when clicking an option', async () => {
const selected = OPTIONS[0];
const onChange = jest.fn();
render(<ButtonSelect value={selected} options={OPTIONS} onChange={onChange} />);
const button = screen.getByText('Hello');
await userEvent.click(button);
const option = screen.getByText('World');
await userEvent.click(option);
expect(screen.queryAllByRole('menuitemradio')).toHaveLength(0);
expect(onChange).toHaveBeenCalledWith({
label: 'World',
value: 'b',
});
});
});