forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
IconButton.test.js
122 lines (104 loc) · 4.1 KB
/
IconButton.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import * as React from 'react';
import { expect } from 'chai';
import PropTypes from 'prop-types';
import { createRenderer, describeConformance } from 'test/utils';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import IconButton, { iconButtonClasses as classes } from '@mui/material/IconButton';
import Icon from '@mui/material/Icon';
import ButtonBase from '@mui/material/ButtonBase';
describe('<IconButton />', () => {
const { render } = createRenderer();
describeConformance(<IconButton>book</IconButton>, () => ({
classes,
inheritComponent: ButtonBase,
render,
refInstanceof: window.HTMLButtonElement,
muiName: 'MuiIconButton',
testVariantProps: { edge: 'end', disabled: true },
skip: ['componentProp', 'componentsProp'],
}));
it('should render Icon children with right classes', () => {
const childClassName = 'child-woof';
const iconChild = <Icon data-testid="icon" className={childClassName} />;
const { getByTestId } = render(<IconButton>{iconChild}</IconButton>);
expect(getByTestId('icon')).to.have.class(childClassName);
});
it('should have a ripple by default', () => {
const { container } = render(
<IconButton TouchRippleProps={{ className: 'touch-ripple' }}>book</IconButton>,
);
expect(container.querySelector('.touch-ripple')).not.to.equal(null);
});
it('can disable the ripple and hover effect', () => {
const { container } = render(
<IconButton disableRipple TouchRippleProps={{ className: 'touch-ripple' }}>
book
</IconButton>,
);
expect(container.querySelector('.touch-ripple')).to.equal(null);
});
describe('prop: size', () => {
it('should render the right class', () => {
let root;
root = render(<IconButton size="small">book</IconButton>).container.firstChild;
expect(root).to.have.class(classes.sizeSmall);
root = render(<IconButton size="medium">book</IconButton>).container.firstChild;
expect(root).not.to.have.class(classes.sizeSmall);
root = render(<IconButton size="large">book</IconButton>).container.firstChild;
expect(root).to.have.class(classes.sizeLarge);
root = render(<IconButton>book</IconButton>).container.firstChild;
expect(root).not.to.have.class(classes.sizeSmall);
expect(root).not.to.have.class(classes.sizeLarge);
});
});
describe('prop: edge', () => {
it('edge="start" should render the right class', () => {
const { container } = render(<IconButton edge="start">book</IconButton>);
expect(container.firstChild).to.have.class(classes.edgeStart);
});
it('edge="end" should render the right class', () => {
const { container } = render(<IconButton edge="end">book</IconButton>);
expect(container.firstChild).to.have.class(classes.edgeEnd);
});
it('no edge should render the right class', () => {
const { container } = render(<IconButton>book</IconButton>);
expect(container.firstChild).not.to.have.class(classes.edgeStart);
expect(container.firstChild).not.to.have.class(classes.edgeEnd);
});
});
describe('prop: disabled', () => {
it('should disable the component', () => {
const { getByRole } = render(<IconButton disabled>book</IconButton>);
const button = getByRole('button');
expect(button).to.have.property('disabled', true);
expect(button).to.have.class(classes.disabled);
});
});
it('should raise a warning about onClick in children because of Firefox', () => {
expect(() => {
PropTypes.checkPropTypes(
IconButton.propTypes,
{ classes: {}, children: <svg onClick={() => {}} /> },
'prop',
'MockedName',
);
}).toErrorDev(['MUI: You are providing an onClick event listener']);
});
it('should not throw error for a custom color', () => {
expect(() => (
<ThemeProvider
theme={createTheme({
components: {
MuiIconButton: {
defaultProps: {
color: 'custom',
},
},
},
})}
>
<IconButton />
</ThemeProvider>
)).not.to.throw();
});
});