-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
OutlinedInput.test.js
86 lines (77 loc) · 2.79 KB
/
OutlinedInput.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
import * as React from 'react';
import { expect } from 'chai';
import { createRenderer, describeConformance } from 'test/utils';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import OutlinedInput, { outlinedInputClasses as classes } from '@mui/material/OutlinedInput';
import InputBase from '@mui/material/InputBase';
describe('<OutlinedInput />', () => {
const { render } = createRenderer();
describeConformance(<OutlinedInput />, () => ({
classes,
inheritComponent: InputBase,
render,
refInstanceof: window.HTMLDivElement,
muiName: 'MuiOutlinedInput',
testDeepOverrides: { slotName: 'input', slotClassName: classes.input },
testVariantProps: { variant: 'contained', fullWidth: true },
testStateOverrides: { prop: 'size', value: 'small', styleKey: 'sizeSmall' },
skip: ['componentProp', 'componentsProp'],
}));
it('should render a NotchedOutline', () => {
const { container } = render(
<OutlinedInput classes={{ notchedOutline: 'notched-outlined' }} />,
);
expect(container.querySelector('.notched-outlined')).not.to.equal(null);
});
it('should set correct label prop on outline', () => {
const { container } = render(
<OutlinedInput
classes={{ notchedOutline: 'notched-outlined' }}
label={<div data-testid="label">label</div>}
required
/>,
);
const notchOutlined = container.querySelector('.notched-outlined legend');
expect(notchOutlined).to.have.text('label\xa0*');
});
it('should forward classes to InputBase', () => {
render(<OutlinedInput error classes={{ error: 'error' }} />);
expect(document.querySelector('.error')).not.to.equal(null);
});
it('should respects the componentsProps if passed', () => {
render(<OutlinedInput componentsProps={{ root: { 'data-test': 'test' } }} />);
expect(document.querySelector('[data-test=test]')).not.to.equal(null);
});
it('should respect the classes coming from InputBase', () => {
render(
<OutlinedInput
data-test="test"
multiline
sx={{ [`&.${classes.multiline}`]: { mt: '10px' } }}
/>,
);
expect(document.querySelector('[data-test=test]')).toHaveComputedStyle({ marginTop: '10px' });
});
it('should have ownerState in the theme style overrides', () => {
expect(() =>
render(
<ThemeProvider
theme={createTheme({
components: {
MuiOutlinedInput: {
styleOverrides: {
root: ({ ownerState }) => ({
// test that ownerState is not undefined
...(ownerState.disabled && {}),
}),
},
},
},
})}
>
<OutlinedInput />
</ThemeProvider>,
),
).not.to.throw();
});
});