Skip to content

Commit bed9ee5

Browse files
EranNLEranNL
committed
Added input tests
1 parent b84ef51 commit bed9ee5

File tree

11 files changed

+354
-41
lines changed

11 files changed

+354
-41
lines changed

‎__tests__/FieldBase.test.tsx

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import React from 'react';
2+
import { mount, render } from 'enzyme';
3+
import FieldBase from '@/components/Field/FieldBase';
4+
import { Variant } from '@/components';
5+
import { FieldContext } from '@/components/Field/FieldContext';
6+
7+
describe('FieldBase test', () => {
8+
it('should render field base', () => {
9+
const container = render(
10+
<div>
11+
<FieldBase />
12+
</div>
13+
);
14+
15+
expect(container.find('.form-field-base').length).toBe(1);
16+
});
17+
18+
it('should set variant', () => {
19+
const container = render(
20+
<div>
21+
<FieldBase
22+
variant={Variant.PRIMARY}
23+
/>
24+
</div>
25+
);
26+
27+
expect(container.find('.form-field-base.form-field-primary').length).toBe(1);
28+
});
29+
30+
it('should set variant', () => {
31+
const container = render(
32+
<div>
33+
<FieldBase
34+
variant={Variant.PRIMARY}
35+
/>
36+
</div>
37+
);
38+
39+
expect(container.find('.form-field-base.form-field-primary').length).toBe(1);
40+
});
41+
42+
it('should make floating label component', () => {
43+
const container = render(
44+
<div>
45+
<FieldBase
46+
label={<strong>test</strong>}
47+
/>
48+
</div>
49+
);
50+
51+
expect(container.find('.form-field-base').hasClass('floating-label')).toBeTruthy();
52+
expect(container.find('.form-field-base .form-field-label-floating strong').text())
53+
.toBe('test');
54+
});
55+
56+
it('should make invalid state icon', () => {
57+
const container = render(
58+
<div>
59+
<FieldBase
60+
label={<strong>test</strong>}
61+
valid={false}
62+
>
63+
<FieldContext.Consumer>
64+
{({ stateIcon }) => stateIcon}
65+
</FieldContext.Consumer>
66+
</FieldBase>
67+
</div>
68+
);
69+
70+
expect(container.find('.field-state-icon .icon-close-circle').length).toBe(1);
71+
})
72+
73+
it('should make valid state icon', () => {
74+
const container = render(
75+
<div>
76+
<FieldBase
77+
label={<strong>test</strong>}
78+
valid={true}
79+
>
80+
<FieldContext.Consumer>
81+
{({ stateIcon }) => stateIcon}
82+
</FieldContext.Consumer>
83+
</FieldBase>
84+
</div>
85+
);
86+
87+
expect(container.find('.field-state-icon .icon-checkmark-circle-2').length).toBe(1);
88+
})
89+
90+
it('should change focus and value', () => {
91+
const container = mount(
92+
<div>
93+
<FieldBase>
94+
<FieldContext.Consumer>
95+
{({ changeFocus, changeValue }) => {
96+
changeFocus(true);
97+
changeValue(true);
98+
return undefined
99+
}}
100+
</FieldContext.Consumer>
101+
</FieldBase>
102+
</div>
103+
);
104+
105+
console.log(container.html());
106+
107+
expect(container.find('.form-field-base.focused.has-value').length).toBe(1);
108+
})
109+
110+
it('should render actions', () => {
111+
const container = mount(
112+
<div>
113+
<FieldBase actions={<span>foo</span>} />
114+
</div>
115+
);
116+
117+
expect(container.find('.form-field-base .form-field-actions span').text()).toBe('foo');
118+
});
119+
});

‎__tests__/FieldContainer.test.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { render } from 'enzyme';
2+
import React from 'react';
3+
import FieldContainer from '@/components/Field/FieldContainer';
4+
5+
describe('FieldBase test', () => {
6+
it('should render field container', () => {
7+
const container = render(
8+
<div>
9+
<FieldContainer/>
10+
</div>
11+
);
12+
13+
expect(container.find('.form-field-container').length).toBe(1);
14+
});
15+
16+
it('should render field container toggle', () => {
17+
const container = render(
18+
<div>
19+
<FieldContainer toggles />
20+
</div>
21+
);
22+
23+
expect(container.find('.form-field-container.toggles').length).toBe(1);
24+
});
25+
});

‎__tests__/Selectfield.test.tsx

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { mount, render } from 'enzyme';
2+
import React from 'react';
3+
import { SelectField } from '@/components';
4+
5+
describe('SelectField test', () => {
6+
it('should render text input', () => {
7+
const container = render(
8+
<div>
9+
<SelectField />
10+
</div>
11+
);
12+
13+
expect(container.find('.form-field-base select').length).toBe(1);
14+
});
15+
16+
it('Should set initial value with value prop', () => {
17+
const fn = jest.fn();
18+
19+
const container = mount(
20+
<SelectField value="foo" onChange={() => fn()}>
21+
<option value="" />
22+
<option value="foo">bar</option>
23+
</SelectField>
24+
);
25+
26+
expect(container.find('select').props().value).toBe('foo');
27+
});
28+
29+
it('Should set initial value with defaultValue prop', () => {
30+
const fn = jest.fn();
31+
32+
const container = mount(
33+
<SelectField defaultValue="foo" onChange={() => fn()}>
34+
<option value="" />
35+
<option value="foo">bar</option>
36+
</SelectField>
37+
);
38+
39+
expect(container.find('select').props().value).toBe('foo');
40+
});
41+
42+
it('Should set initial value based on selected option', () => {
43+
const fn = jest.fn();
44+
45+
const container = mount(
46+
<SelectField onChange={() => fn()}>
47+
<option value="" />
48+
<option value="foo" selected>bar</option>
49+
</SelectField>
50+
);
51+
52+
expect(container.find('select').props().value).toBe('foo');
53+
});
54+
55+
it('should give focus class when focused', () => {
56+
const container = mount(
57+
<SelectField/>
58+
);
59+
60+
container.find('select').simulate('focus');
61+
62+
expect(container.find('.form-field-base').hasClass('focused')).toBeTruthy();
63+
});
64+
65+
it('should not have focus class when blurred after focus', () => {
66+
const container = mount(
67+
<SelectField/>
68+
);
69+
70+
container.find('select').simulate('focus').simulate('blur');
71+
72+
expect(container.find('.form-field-base').hasClass('focused')).toBeFalsy();
73+
});
74+
75+
it('should call onChange method when changing', () => {
76+
const fn = jest.fn();
77+
78+
const container = mount(
79+
<SelectField onChange={() => fn()}/>
80+
);
81+
82+
container.find('select').simulate('change');
83+
84+
expect(fn).toHaveBeenCalled();
85+
});
86+
87+
it('should not call onChange method when ommited', () => {
88+
const fn = jest.fn();
89+
90+
const container = mount(
91+
<SelectField/>
92+
);
93+
94+
container.find('select').simulate('change');
95+
96+
expect(fn).not.toHaveBeenCalled();
97+
});
98+
99+
it('should ignore invalid react elements and select last selected option', () => {
100+
101+
const container = mount(
102+
<SelectField>
103+
{undefined}
104+
<div />
105+
<option selected value="foo"></option>
106+
<option selected value="bar"></option>
107+
</SelectField>
108+
);
109+
110+
expect(container.find('select').props().value).toBe('bar');
111+
});
112+
});

‎__tests__/TextField.test.tsx renamed to ‎__tests__/Textfield.test.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ describe('TextField test', () => {
66
it('should render text input', () => {
77
const container = render(
88
<div>
9-
<TextField />
9+
<TextField/>
1010
</div>
1111
);
1212

13-
expect(container.find('.form-field-base .form-field').length).toBe(1);
13+
expect(container.find('.form-field-base input').length).toBe(1);
1414
});
1515

1616
it('should render variant class', () => {
@@ -27,7 +27,7 @@ describe('TextField test', () => {
2727

2828
it('should give focus class when focused', () => {
2929
const container = mount(
30-
<TextField />
30+
<TextField/>
3131
);
3232

3333
container.find('input').simulate('focus');
@@ -37,7 +37,7 @@ describe('TextField test', () => {
3737

3838
it('should not have focus class when blurred after focus', () => {
3939
const container = mount(
40-
<TextField />
40+
<TextField/>
4141
);
4242

4343
container.find('input').simulate('focus').simulate('blur');
@@ -49,7 +49,7 @@ describe('TextField test', () => {
4949
const fn = jest.fn();
5050

5151
const container = mount(
52-
<TextField onChange={() => fn()} />
52+
<TextField onChange={() => fn()}/>
5353
);
5454

5555
container.find('input').simulate('change');
@@ -61,7 +61,7 @@ describe('TextField test', () => {
6161
const fn = jest.fn();
6262

6363
const container = mount(
64-
<TextField />
64+
<TextField/>
6565
);
6666

6767
container.find('input').simulate('change');
@@ -73,12 +73,12 @@ describe('TextField test', () => {
7373
const fn = jest.fn();
7474

7575
const container = mount(
76-
<TextField value="Test" onChange={() => fn()} />
76+
<TextField value="Test" onChange={() => fn()}/>
7777
);
7878

7979
expect(container.find('input').prop('value')).toBe('Test');
8080

81-
container.find('input').simulate('change', { target: { value: 'Foo' } });
81+
container.find('input').simulate('change', {target: {value: 'Foo'}});
8282

8383
expect(container.find('input').prop('value')).toBe('Foo');
8484
expect(fn).toHaveBeenCalled();
@@ -87,7 +87,7 @@ describe('TextField test', () => {
8787
it('should render floating label', () => {
8888
const container = mount(
8989
<div>
90-
<TextField label="Username" />
90+
<TextField label="Username"/>
9191
</div>
9292
);
9393

@@ -99,7 +99,7 @@ describe('TextField test', () => {
9999
it('should render valid fields', () => {
100100
const container = mount(
101101
<div>
102-
<TextField valid={true} />
102+
<TextField valid={true}/>
103103
</div>
104104
);
105105

@@ -110,7 +110,7 @@ describe('TextField test', () => {
110110
it('should render invalid fields', () => {
111111
const container = mount(
112112
<div>
113-
<TextField valid={false} />
113+
<TextField valid={false}/>
114114
</div>
115115
);
116116

@@ -121,7 +121,7 @@ describe('TextField test', () => {
121121
it('should render field actions', () => {
122122
const container = mount(
123123
<div>
124-
<TextField actions={[<Button key={1} variant={Variant.PRIMARY} />]} />
124+
<TextField actions={[<Button key={1} variant={Variant.PRIMARY}/>]}/>
125125
</div>
126126
);
127127

‎src/components/Field/FieldBase.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,15 +81,17 @@ const FieldBaseProps = ({
8181
);
8282
};
8383

84-
FieldBaseProps.displayName = 'FieldBase';
85-
FieldBaseProps.propTypes = {
84+
export const propTypes = {
8685
actions: PropTypes.node,
8786
children: PropTypes.node,
8887
label: PropTypes.node,
8988
onChange: PropTypes.func,
9089
valid: PropTypes.bool,
9190
value: PropTypes.string,
92-
variant: PropTypes.string
91+
variant: PropTypes.string,
9392
}
9493

94+
FieldBaseProps.displayName = 'FieldBase';
95+
FieldBaseProps.propTypes = propTypes;
96+
9597
export default FieldBaseProps;

0 commit comments

Comments
 (0)