Skip to content

Commit 0efd099

Browse files
chrisronlinechrisronline
authoredDec 14, 2017
Form tests - Phase 1 (#196)
* Checkbox tests * Checkbox group tests * Add comments for mock vs unmock * Use a delimiter * Field number tests * Field password tests * Remove comment * Field search tests * Field test tests * Simplify some tests * PR feedback
·
v101.1.0v0.0.6
1 parent 0285d08 commit 0efd099

13 files changed

+751
-80
lines changed
 

‎src/components/form/checkbox/__snapshots__/checkbox.test.js.snap

+86
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,89 @@ exports[`EuiCheckbox is rendered 1`] = `
2020
</div>
2121
</div>
2222
`;
23+
24+
exports[`EuiCheckbox props check is rendered 1`] = `
25+
<div
26+
class="euiCheckbox"
27+
>
28+
<input
29+
checked=""
30+
class="euiCheckbox__input"
31+
id="id"
32+
type="checkbox"
33+
/>
34+
<div
35+
class="euiCheckbox__square"
36+
>
37+
<div
38+
class="euiCheckbox__check"
39+
/>
40+
</div>
41+
</div>
42+
`;
43+
44+
exports[`EuiCheckbox props disabled disabled is rendered 1`] = `
45+
<div
46+
class="euiCheckbox"
47+
>
48+
<input
49+
class="euiCheckbox__input"
50+
disabled=""
51+
id="id"
52+
type="checkbox"
53+
/>
54+
<div
55+
class="euiCheckbox__square"
56+
>
57+
<div
58+
class="euiCheckbox__check"
59+
/>
60+
</div>
61+
</div>
62+
`;
63+
64+
exports[`EuiCheckbox props label is rendered 1`] = `
65+
<div
66+
class="euiCheckbox"
67+
>
68+
<input
69+
class="euiCheckbox__input"
70+
id="id"
71+
type="checkbox"
72+
/>
73+
<div
74+
class="euiCheckbox__square"
75+
>
76+
<div
77+
class="euiCheckbox__check"
78+
/>
79+
</div>
80+
<label
81+
class="euiCheckbox__label"
82+
for="id"
83+
>
84+
<span>
85+
Label
86+
</span>
87+
</label>
88+
</div>
89+
`;
90+
91+
exports[`EuiCheckbox props type inList is rendered 1`] = `
92+
<div
93+
class="euiCheckbox euiCheckbox--inList"
94+
>
95+
<input
96+
class="euiCheckbox__input"
97+
id="id"
98+
type="checkbox"
99+
/>
100+
<div
101+
class="euiCheckbox__square"
102+
>
103+
<div
104+
class="euiCheckbox__check"
105+
/>
106+
</div>
107+
</div>
108+
`;

‎src/components/form/checkbox/__snapshots__/checkbox_group.test.js.snap

+50-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,58 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`EuiCheckboxGroup is rendered 1`] = `
3+
exports[`EuiCheckboxGroup (mocked checkbox) disabled is rendered 1`] = `
4+
<div>
5+
<eui_checkbox
6+
checked=""
7+
class="euiCheckboxGroup__item"
8+
disabled=""
9+
id="1"
10+
label="kibana"
11+
/>
12+
<eui_checkbox
13+
class="euiCheckboxGroup__item"
14+
disabled=""
15+
id="2"
16+
label="elastic"
17+
/>
18+
</div>
19+
`;
20+
21+
exports[`EuiCheckboxGroup (mocked checkbox) idToSelectedMap is rendered 1`] = `
22+
<div>
23+
<eui_checkbox
24+
checked=""
25+
class="euiCheckboxGroup__item"
26+
id="1"
27+
label="kibana"
28+
/>
29+
<eui_checkbox
30+
class="euiCheckboxGroup__item"
31+
id="2"
32+
label="elastic"
33+
/>
34+
</div>
35+
`;
36+
37+
exports[`EuiCheckboxGroup (mocked checkbox) is rendered 1`] = `
438
<div
539
aria-label="aria-label"
640
class="testClass1 testClass2"
741
data-test-subj="test subject string"
842
/>
943
`;
44+
45+
exports[`EuiCheckboxGroup (mocked checkbox) options are rendered 1`] = `
46+
<div>
47+
<eui_checkbox
48+
class="euiCheckboxGroup__item"
49+
id="1"
50+
label="kibana"
51+
/>
52+
<eui_checkbox
53+
class="euiCheckboxGroup__item"
54+
id="2"
55+
label="elastic"
56+
/>
57+
</div>
58+
`;

‎src/components/form/checkbox/checkbox.test.js

+90-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,103 @@
11
import React from 'react';
22
import { render } from 'enzyme';
3-
import { requiredProps } from '../../../test/required_props';
3+
import {
4+
requiredProps,
5+
startThrowingReactWarnings,
6+
stopThrowingReactWarnings,
7+
} from '../../../test';
48

5-
import { EuiCheckbox } from './checkbox';
9+
import {
10+
EuiCheckbox,
11+
TYPES,
12+
} from './checkbox';
13+
14+
beforeAll(startThrowingReactWarnings);
15+
afterAll(stopThrowingReactWarnings);
16+
17+
const checkboxRequiredProps = {
18+
id: 'id',
19+
onChange: () => {},
20+
};
621

722
describe('EuiCheckbox', () => {
823
test('is rendered', () => {
924
const component = render(
10-
<EuiCheckbox id="id" onChange={() => {}} {...requiredProps} />
25+
<EuiCheckbox
26+
id="id"
27+
onChange={() => {}}
28+
{...requiredProps}
29+
/>
1130
);
1231

1332
expect(component)
1433
.toMatchSnapshot();
1534
});
35+
36+
describe('props', () => {
37+
test('id is required', () => {
38+
expect(
39+
() => <EuiCheckbox checked={true} onChange={() => {}}/>
40+
).toThrow();
41+
});
42+
43+
test('onChange is required', () => {
44+
expect(
45+
() => <EuiCheckbox id="id" checked={true}/>
46+
).toThrow();
47+
});
48+
49+
test('check is rendered', () => {
50+
const component = render(
51+
<EuiCheckbox
52+
{...checkboxRequiredProps}
53+
checked
54+
/>
55+
);
56+
57+
expect(component)
58+
.toMatchSnapshot();
59+
});
60+
61+
test('label is rendered', () => {
62+
const component = render(
63+
<EuiCheckbox
64+
{...checkboxRequiredProps}
65+
label={<span>Label</span>}
66+
/>
67+
);
68+
69+
expect(component)
70+
.toMatchSnapshot();
71+
});
72+
73+
describe('type', () => {
74+
TYPES.forEach(value => {
75+
test(`${value} is rendered`, () => {
76+
const component = render(
77+
<EuiCheckbox
78+
{...checkboxRequiredProps}
79+
type={value}
80+
/>
81+
);
82+
83+
expect(component)
84+
.toMatchSnapshot();
85+
});
86+
});
87+
});
88+
89+
describe('disabled', () => {
90+
test(`disabled is rendered`, () => {
91+
const component = render(
92+
<EuiCheckbox
93+
{...checkboxRequiredProps}
94+
disabled
95+
/>
96+
);
97+
98+
expect(component)
99+
.toMatchSnapshot();
100+
});
101+
});
102+
});
16103
});

‎src/components/form/checkbox/checkbox_group.behavior.test.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
import sinon from 'sinon';
4+
5+
import { EuiCheckboxGroup } from './checkbox_group';
6+
7+
// This exists because we need to run the following tests
8+
// without mocking the Checkbox component, such as testing
9+
// an interaction that is handled by the Checkbox component.
10+
describe('EuiCheckboxGroup behavior', () => {
11+
test('id is bound to onChange', () => {
12+
const onChangeHandler = sinon.stub();
13+
const component = mount(
14+
<EuiCheckboxGroup
15+
options={[
16+
{ id: '1', label: 'kibana', disabled: false },
17+
]}
18+
idToSelectedMap={{
19+
'1': true,
20+
}}
21+
onChange={onChangeHandler}
22+
/>
23+
);
24+
25+
component.find('input[type="checkbox"]').simulate('change');
26+
sinon.assert.calledWith(onChangeHandler, '1');
27+
});
28+
});

‎src/components/form/checkbox/checkbox_group.test.js

+57-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import { requiredProps } from '../../../test/required_props';
44

55
import { EuiCheckboxGroup } from './checkbox_group';
66

7-
describe('EuiCheckboxGroup', () => {
7+
jest.mock('./checkbox', () => ({ EuiCheckbox: 'eui_checkbox' }));
8+
9+
describe('EuiCheckboxGroup (mocked checkbox)', () => {
810
test('is rendered', () => {
911
const component = render(
1012
<EuiCheckboxGroup onChange={() => {}} {...requiredProps} />
@@ -13,4 +15,58 @@ describe('EuiCheckboxGroup', () => {
1315
expect(component)
1416
.toMatchSnapshot();
1517
});
18+
19+
test('options are rendered', () => {
20+
const component = render(
21+
<EuiCheckboxGroup
22+
options={[
23+
{ id: '1', label: 'kibana' },
24+
{ id: '2', label: 'elastic' },
25+
]}
26+
onChange={() => {}}
27+
/>
28+
);
29+
30+
expect(component)
31+
.toMatchSnapshot();
32+
});
33+
34+
test('idToSelectedMap is rendered', () => {
35+
const component = render(
36+
<EuiCheckboxGroup
37+
options={[
38+
{ id: '1', label: 'kibana' },
39+
{ id: '2', label: 'elastic' },
40+
]}
41+
idToSelectedMap={{
42+
'1': true,
43+
'2': false,
44+
}}
45+
onChange={() => {}}
46+
/>
47+
);
48+
49+
expect(component)
50+
.toMatchSnapshot();
51+
});
52+
53+
test('disabled is rendered', () => {
54+
const component = render(
55+
<EuiCheckboxGroup
56+
options={[
57+
{ id: '1', label: 'kibana' },
58+
{ id: '2', label: 'elastic' },
59+
]}
60+
idToSelectedMap={{
61+
'1': true,
62+
'2': false,
63+
}}
64+
onChange={() => {}}
65+
disabled
66+
/>
67+
);
68+
69+
expect(component)
70+
.toMatchSnapshot();
71+
});
1672
});

‎src/components/form/field_number/__snapshots__/field_number.test.js.snap

+64-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,68 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`EuiFieldNumber is rendered 1`] = `
4-
<div
5-
class="euiFormControlLayout"
6-
>
7-
<input
8-
aria-label="aria-label"
9-
class="euiFieldNumber testClass1 testClass2"
10-
data-test-subj="test subject string"
11-
type="number"
12-
/>
13-
</div>
4+
<eui-form-control-layout
5+
fullwidth="false"
6+
icon="alert"
7+
isloading="false"
8+
>
9+
<eui-validatable-control>
10+
<input
11+
aria-label="aria-label"
12+
class="euiFieldNumber testClass1 testClass2 euiFieldNumber--withIcon"
13+
data-test-subj="test subject string"
14+
id="1"
15+
max="8"
16+
min="1"
17+
name="elastic"
18+
step="1"
19+
type="number"
20+
value="1"
21+
/>
22+
</eui-validatable-control>
23+
</eui-form-control-layout>
24+
`;
25+
26+
exports[`EuiFieldNumber props fullWidth is rendered 1`] = `
27+
<eui-form-control-layout
28+
fullwidth="true"
29+
isloading="false"
30+
>
31+
<eui-validatable-control>
32+
<input
33+
class="euiFieldNumber euiFieldNumber--fullWidth"
34+
type="number"
35+
/>
36+
</eui-validatable-control>
37+
</eui-form-control-layout>
38+
`;
39+
40+
exports[`EuiFieldNumber props isInvalid is rendered 1`] = `
41+
<eui-form-control-layout
42+
fullwidth="false"
43+
isloading="false"
44+
>
45+
<eui-validatable-control
46+
isinvalid="true"
47+
>
48+
<input
49+
class="euiFieldNumber"
50+
type="number"
51+
/>
52+
</eui-validatable-control>
53+
</eui-form-control-layout>
54+
`;
55+
56+
exports[`EuiFieldNumber props isLoading is rendered 1`] = `
57+
<eui-form-control-layout
58+
fullwidth="false"
59+
isloading="true"
60+
>
61+
<eui-validatable-control>
62+
<input
63+
class="euiFieldNumber euiFieldNumber-isLoading"
64+
type="number"
65+
/>
66+
</eui-validatable-control>
67+
</eui-form-control-layout>
1468
`;

‎src/components/form/field_number/field_number.test.js

+49-1
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,61 @@ import { requiredProps } from '../../../test/required_props';
44

55
import { EuiFieldNumber } from './field_number';
66

7+
jest.mock('../form_control_layout', () => ({ EuiFormControlLayout: 'eui-form-control-layout' }));
8+
jest.mock('../validatable_control', () => ({ EuiValidatableControl: 'eui-validatable-control' }));
9+
710
describe('EuiFieldNumber', () => {
811
test('is rendered', () => {
912
const component = render(
10-
<EuiFieldNumber {...requiredProps} />
13+
<EuiFieldNumber
14+
id="1"
15+
name="elastic"
16+
min={1}
17+
max={8}
18+
step={1}
19+
value={1}
20+
icon="alert"
21+
onChange={() => {}}
22+
{...requiredProps}
23+
/>
1124
);
1225

1326
expect(component)
1427
.toMatchSnapshot();
1528
});
29+
30+
describe('props', () => {
31+
test(`isInvalid is rendered`, () => {
32+
const component = render(
33+
<EuiFieldNumber
34+
isInvalid
35+
/>
36+
);
37+
38+
expect(component)
39+
.toMatchSnapshot();
40+
});
41+
42+
test(`fullWidth is rendered`, () => {
43+
const component = render(
44+
<EuiFieldNumber
45+
fullWidth
46+
/>
47+
);
48+
49+
expect(component)
50+
.toMatchSnapshot();
51+
});
52+
53+
test(`isLoading is rendered`, () => {
54+
const component = render(
55+
<EuiFieldNumber
56+
isLoading
57+
/>
58+
);
59+
60+
expect(component)
61+
.toMatchSnapshot();
62+
});
63+
});
1664
});

‎src/components/form/field_password/__snapshots__/field_password.test.js.snap

+62-26
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,69 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`EuiFieldPassword is rendered 1`] = `
4-
<div
5-
class="euiFormControlLayout"
4+
<eui-form-control-layout
5+
fullwidth="false"
6+
icon="lock"
7+
isloading="false"
68
>
7-
<input
8-
aria-label="aria-label"
9-
class="euiFieldPassword testClass1 testClass2"
10-
data-test-subj="test subject string"
11-
type="password"
12-
/>
13-
<svg
14-
class="euiIcon euiFormControlLayout__icon euiIcon--medium"
15-
height="16"
16-
viewBox="0 0 16 16"
17-
width="16"
18-
xlink="http://www.w3.org/1999/xlink"
19-
xmlns="http://www.w3.org/2000/svg"
9+
<eui-validatable-control>
10+
<input
11+
aria-label="aria-label"
12+
class="euiFieldPassword testClass1 testClass2"
13+
data-test-subj="test subject string"
14+
id="1"
15+
name="elastic"
16+
placeholder="Placeholder"
17+
type="password"
18+
value="1"
19+
/>
20+
</eui-validatable-control>
21+
</eui-form-control-layout>
22+
`;
23+
24+
exports[`EuiFieldPassword props fullWidth is rendered 1`] = `
25+
<eui-form-control-layout
26+
fullwidth="true"
27+
icon="lock"
28+
isloading="false"
29+
>
30+
<eui-validatable-control>
31+
<input
32+
class="euiFieldPassword euiFieldPassword--fullWidth"
33+
type="password"
34+
/>
35+
</eui-validatable-control>
36+
</eui-form-control-layout>
37+
`;
38+
39+
exports[`EuiFieldPassword props isInvalid is rendered 1`] = `
40+
<eui-form-control-layout
41+
fullwidth="false"
42+
icon="lock"
43+
isloading="false"
44+
>
45+
<eui-validatable-control
46+
isinvalid="true"
2047
>
21-
<defs>
22-
<path
23-
d="M3 5a5 5 0 0 1 10 0h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1zm6.33 6.493L10 13H6l.67-1.507a2 2 0 1 1 2.66 0zM2 15h12V6H2v9zM8 1C5.794 1 4 2.794 4 5h8c0-2.206-1.794-4-4-4z"
24-
id="lock-a"
25-
/>
26-
</defs>
27-
<use
28-
fill-rule="evenodd"
29-
href="#lock-a"
48+
<input
49+
class="euiFieldPassword"
50+
type="password"
51+
/>
52+
</eui-validatable-control>
53+
</eui-form-control-layout>
54+
`;
55+
56+
exports[`EuiFieldPassword props isLoading is rendered 1`] = `
57+
<eui-form-control-layout
58+
fullwidth="false"
59+
icon="lock"
60+
isloading="true"
61+
>
62+
<eui-validatable-control>
63+
<input
64+
class="euiFieldPassword euiFieldPassword-isLoading"
65+
type="password"
3066
/>
31-
</svg>
32-
</div>
67+
</eui-validatable-control>
68+
</eui-form-control-layout>
3369
`;

‎src/components/form/field_password/field_password.test.js

+46-1
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,58 @@ import { requiredProps } from '../../../test/required_props';
44

55
import { EuiFieldPassword } from './field_password';
66

7+
jest.mock('../form_control_layout', () => ({ EuiFormControlLayout: 'eui-form-control-layout' }));
8+
jest.mock('../validatable_control', () => ({ EuiValidatableControl: 'eui-validatable-control' }));
9+
710
describe('EuiFieldPassword', () => {
811
test('is rendered', () => {
912
const component = render(
10-
<EuiFieldPassword {...requiredProps} />
13+
<EuiFieldPassword
14+
name="elastic"
15+
id="1"
16+
placeholder="Placeholder"
17+
value="1"
18+
onChange={() => {}}
19+
{...requiredProps}
20+
/>
1121
);
1222

1323
expect(component)
1424
.toMatchSnapshot();
1525
});
26+
27+
describe('props', () => {
28+
test(`isInvalid is rendered`, () => {
29+
const component = render(
30+
<EuiFieldPassword
31+
isInvalid
32+
/>
33+
);
34+
35+
expect(component)
36+
.toMatchSnapshot();
37+
});
38+
39+
test(`fullWidth is rendered`, () => {
40+
const component = render(
41+
<EuiFieldPassword
42+
fullWidth
43+
/>
44+
);
45+
46+
expect(component)
47+
.toMatchSnapshot();
48+
});
49+
50+
test(`isLoading is rendered`, () => {
51+
const component = render(
52+
<EuiFieldPassword
53+
isLoading
54+
/>
55+
);
56+
57+
expect(component)
58+
.toMatchSnapshot();
59+
});
60+
});
1661
});

‎src/components/form/field_search/__snapshots__/field_search.test.js.snap

+62-25
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,69 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`EuiFieldSearch is rendered 1`] = `
4-
<div
5-
class="euiFormControlLayout"
4+
<eui-form-control-layout
5+
fullwidth="false"
6+
icon="search"
7+
isloading="false"
68
>
7-
<input
8-
aria-label="aria-label"
9-
class="euiFieldSearch testClass1 testClass2"
10-
data-test-subj="test subject string"
11-
type="search"
12-
/>
13-
<svg
14-
class="euiIcon euiFormControlLayout__icon euiIcon--medium"
15-
height="16"
16-
viewBox="0 0 16 16"
17-
width="16"
18-
xlink="http://www.w3.org/1999/xlink"
19-
xmlns="http://www.w3.org/2000/svg"
9+
<eui-validatable-control>
10+
<input
11+
aria-label="aria-label"
12+
class="euiFieldSearch testClass1 testClass2"
13+
data-test-subj="test subject string"
14+
id="1"
15+
name="elastic"
16+
placeholder="Placeholder"
17+
type="search"
18+
value="1"
19+
/>
20+
</eui-validatable-control>
21+
</eui-form-control-layout>
22+
`;
23+
24+
exports[`EuiFieldSearch props fullWidth is rendered 1`] = `
25+
<eui-form-control-layout
26+
fullwidth="true"
27+
icon="search"
28+
isloading="false"
29+
>
30+
<eui-validatable-control>
31+
<input
32+
class="euiFieldSearch euiFieldSearch--fullWidth"
33+
type="search"
34+
/>
35+
</eui-validatable-control>
36+
</eui-form-control-layout>
37+
`;
38+
39+
exports[`EuiFieldSearch props isInvalid is rendered 1`] = `
40+
<eui-form-control-layout
41+
fullwidth="false"
42+
icon="search"
43+
isloading="false"
44+
>
45+
<eui-validatable-control
46+
isinvalid="true"
2047
>
21-
<defs>
22-
<path
23-
d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
24-
id="search-a"
25-
/>
26-
</defs>
27-
<use
28-
href="#search-a"
48+
<input
49+
class="euiFieldSearch"
50+
type="search"
51+
/>
52+
</eui-validatable-control>
53+
</eui-form-control-layout>
54+
`;
55+
56+
exports[`EuiFieldSearch props isLoading is rendered 1`] = `
57+
<eui-form-control-layout
58+
fullwidth="false"
59+
icon="search"
60+
isloading="true"
61+
>
62+
<eui-validatable-control>
63+
<input
64+
class="euiFieldSearch euiFieldSearch-isLoading"
65+
type="search"
2966
/>
30-
</svg>
31-
</div>
67+
</eui-validatable-control>
68+
</eui-form-control-layout>
3269
`;

‎src/components/form/field_search/field_search.test.js

+46-1
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,58 @@ import { requiredProps } from '../../../test/required_props';
44

55
import { EuiFieldSearch } from './field_search';
66

7+
jest.mock('../form_control_layout', () => ({ EuiFormControlLayout: 'eui-form-control-layout' }));
8+
jest.mock('../validatable_control', () => ({ EuiValidatableControl: 'eui-validatable-control' }));
9+
710
describe('EuiFieldSearch', () => {
811
test('is rendered', () => {
912
const component = render(
10-
<EuiFieldSearch {...requiredProps} />
13+
<EuiFieldSearch
14+
name="elastic"
15+
id="1"
16+
placeholder="Placeholder"
17+
value="1"
18+
onChange={() => {}}
19+
{...requiredProps}
20+
/>
1121
);
1222

1323
expect(component)
1424
.toMatchSnapshot();
1525
});
26+
27+
describe('props', () => {
28+
test(`isInvalid is rendered`, () => {
29+
const component = render(
30+
<EuiFieldSearch
31+
isInvalid
32+
/>
33+
);
34+
35+
expect(component)
36+
.toMatchSnapshot();
37+
});
38+
39+
test(`fullWidth is rendered`, () => {
40+
const component = render(
41+
<EuiFieldSearch
42+
fullWidth
43+
/>
44+
);
45+
46+
expect(component)
47+
.toMatchSnapshot();
48+
});
49+
50+
test(`isLoading is rendered`, () => {
51+
const component = render(
52+
<EuiFieldSearch
53+
isLoading
54+
/>
55+
);
56+
57+
expect(component)
58+
.toMatchSnapshot();
59+
});
60+
});
1661
});

‎src/components/form/field_text/__snapshots__/field_text.test.js.snap

+62-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,66 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`EuiFieldText is rendered 1`] = `
4-
<div
5-
class="euiFormControlLayout"
6-
>
7-
<input
8-
aria-label="aria-label"
9-
class="euiFieldText testClass1 testClass2"
10-
data-test-subj="test subject string"
11-
type="text"
12-
/>
13-
</div>
4+
<eui-form-control-layout
5+
fullwidth="false"
6+
icon="foo"
7+
isloading="false"
8+
>
9+
<eui-validatable-control>
10+
<input
11+
aria-label="aria-label"
12+
class="euiFieldText testClass1 testClass2 euiFieldText--withIcon"
13+
data-test-subj="test subject string"
14+
id="1"
15+
name="elastic"
16+
placeholder="Placeholder"
17+
type="text"
18+
value="1"
19+
/>
20+
</eui-validatable-control>
21+
</eui-form-control-layout>
22+
`;
23+
24+
exports[`EuiFieldText props fullWidth is rendered 1`] = `
25+
<eui-form-control-layout
26+
fullwidth="true"
27+
isloading="false"
28+
>
29+
<eui-validatable-control>
30+
<input
31+
class="euiFieldText euiFieldText--fullWidth"
32+
type="text"
33+
/>
34+
</eui-validatable-control>
35+
</eui-form-control-layout>
36+
`;
37+
38+
exports[`EuiFieldText props isInvalid is rendered 1`] = `
39+
<eui-form-control-layout
40+
fullwidth="false"
41+
isloading="false"
42+
>
43+
<eui-validatable-control
44+
isinvalid="true"
45+
>
46+
<input
47+
class="euiFieldText"
48+
type="text"
49+
/>
50+
</eui-validatable-control>
51+
</eui-form-control-layout>
52+
`;
53+
54+
exports[`EuiFieldText props isLoading is rendered 1`] = `
55+
<eui-form-control-layout
56+
fullwidth="false"
57+
isloading="true"
58+
>
59+
<eui-validatable-control>
60+
<input
61+
class="euiFieldText euiFieldText-isLoading"
62+
type="text"
63+
/>
64+
</eui-validatable-control>
65+
</eui-form-control-layout>
1466
`;

‎src/components/form/field_text/field_text.test.js

+49-1
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,61 @@ import { requiredProps } from '../../../test/required_props';
44

55
import { EuiFieldText } from './field_text';
66

7+
jest.mock('../form_control_layout', () => ({ EuiFormControlLayout: 'eui-form-control-layout' }));
8+
jest.mock('../validatable_control', () => ({ EuiValidatableControl: 'eui-validatable-control' }));
9+
710
describe('EuiFieldText', () => {
811
test('is rendered', () => {
912
const component = render(
10-
<EuiFieldText {...requiredProps} />
13+
<EuiFieldText
14+
name="elastic"
15+
id="1"
16+
placeholder="Placeholder"
17+
value="1"
18+
icon="foo"
19+
inputRef={() => {}}
20+
onChange={() => {}}
21+
{...requiredProps}
22+
/>
1123
);
1224

1325
expect(component)
1426
.toMatchSnapshot();
1527
});
28+
29+
describe('props', () => {
30+
test(`isInvalid is rendered`, () => {
31+
const component = render(
32+
<EuiFieldText
33+
isInvalid
34+
/>
35+
);
36+
37+
expect(component)
38+
.toMatchSnapshot();
39+
});
40+
41+
test(`fullWidth is rendered`, () => {
42+
const component = render(
43+
<EuiFieldText
44+
fullWidth
45+
/>
46+
);
47+
48+
expect(component)
49+
.toMatchSnapshot();
50+
});
51+
52+
test(`isLoading is rendered`, () => {
53+
const component = render(
54+
<EuiFieldText
55+
isLoading
56+
/>
57+
);
58+
59+
expect(component)
60+
.toMatchSnapshot();
61+
});
62+
});
1663
});
64+

0 commit comments

Comments
 (0)
Please sign in to comment.