forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ChipDelete.test.js
99 lines (91 loc) · 3.03 KB
/
ChipDelete.test.js
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
import { createRenderer, describeConformance, act, fireEvent } from 'test/utils';
import { ThemeProvider } from '@mui/joy/styles';
import Chip from '@mui/joy/Chip';
import ChipDelete, { chipDeleteClasses as classes } from '@mui/joy/ChipDelete';
describe('<ChipDelete />', () => {
const { render } = createRenderer();
describeConformance(<ChipDelete />, () => ({
classes,
inheritComponent: 'button',
render,
ThemeProvider,
muiName: 'JoyChipDelete',
refInstanceof: window.HTMLButtonElement,
testComponentPropWith: 'span',
testVariantProps: { variant: 'soft' },
testCustomVariant: true,
skip: ['classesRoot', 'componentsProp'],
}));
describe('Chip context', () => {
it('disabled', () => {
const { getByRole } = render(
<Chip disabled>
<ChipDelete />
</Chip>,
);
expect(getByRole('button')).to.have.attr('disabled');
});
it('change variant according to the Chip', () => {
const { getByRole } = render(
<Chip variant="soft">
<ChipDelete />
</Chip>,
);
expect(getByRole('button')).to.have.class(classes.variantSolid);
});
it('use variant prop if provided', () => {
const { getByRole } = render(
<Chip variant="soft">
<ChipDelete variant="outlined" />
</Chip>,
);
expect(getByRole('button')).to.have.class(classes.variantOutlined);
});
it('change color according to the Chip', () => {
const { getByRole } = render(
<Chip color="danger">
<ChipDelete />
</Chip>,
);
expect(getByRole('button')).to.have.class(classes.colorDanger);
});
it('use color prop if provided', () => {
const { getByRole } = render(
<Chip color="danger">
<ChipDelete color="neutral" />
</Chip>,
);
expect(getByRole('button')).to.have.class(classes.colorNeutral);
});
});
describe('Chip onDelete', () => {
it('should call onDelete function when backspace, enter or delete is pressed', () => {
const handleDelete = spy();
const { getByRole } = render(<ChipDelete onDelete={handleDelete} onClick={() => {}} />);
const chipDelete = getByRole('button');
act(() => {
chipDelete.focus();
});
fireEvent.keyDown(chipDelete, { key: 'Backspace' });
fireEvent.keyDown(chipDelete, { key: 'Enter' });
fireEvent.keyDown(chipDelete, { key: 'Delete' });
fireEvent.click(chipDelete);
expect(handleDelete.callCount).to.equal(4);
});
it('should not call onDelete function when ChipDelete is disabled', () => {
const handleDelete = spy();
const { getByRole } = render(
<ChipDelete disabled onDelete={handleDelete} onClick={() => {}} />,
);
const chipDelete = getByRole('button');
act(() => {
chipDelete.focus();
});
fireEvent.click(chipDelete);
expect(handleDelete.callCount).to.equal(0);
});
});
});