Skip to content

Commit d4b2285

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #1061 from rvsia/addTestsForCommon
Add tests for common package
2 parents b26f3c7 + ad93810 commit d4b2285

File tree

11 files changed

+1993
-39
lines changed

11 files changed

+1993
-39
lines changed

‎packages/common/src/test/dual-list-select/dual-list-select.test.js

Lines changed: 642 additions & 0 deletions
Large diffs are not rendered by default.

‎packages/common/src/test/form-template/form-template.test.js

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
/* eslint-disable react/prop-types */
2+
import React from 'react';
3+
import { act } from 'react-dom/test-utils';
4+
import { FormRenderer, componentTypes, useFieldApi, FormError as ERROR } from '@data-driven-forms/react-form-renderer';
5+
import { mount } from 'enzyme';
6+
7+
import FormTemplate from '../../form-template/form-template';
8+
9+
describe('FormTemplate', () => {
10+
let wrapper;
11+
12+
const DummyField = (props) => {
13+
const { input } = useFieldApi(props);
14+
15+
return <input {...input} />;
16+
};
17+
18+
const fields = [
19+
{ name: 'field1', component: componentTypes.TEXT_FIELD },
20+
{ name: 'field2', component: componentTypes.TEXT_FIELD }
21+
];
22+
23+
const FormError = ({ formError }) => <span className="formError">{formError}</span>;
24+
25+
const Form = (props) => <form {...props} />;
26+
27+
const Button = ({ label, children, buttonType, ...props }) => (
28+
<button {...props} id={buttonType}>
29+
{label}
30+
{children}
31+
</button>
32+
);
33+
const ButtonGroup = (props) => <span className="buttonGroup" {...props} />;
34+
35+
const Title = (props) => <h1 {...props}>{props.children}</h1>;
36+
37+
const Description = (props) => <small {...props} />;
38+
39+
const FormTemplateTest = (props) => (
40+
<FormTemplate
41+
BeforeError={FormError}
42+
FormWrapper={Form}
43+
Button={Button}
44+
ButtonGroup={ButtonGroup}
45+
Title={Title}
46+
Description={Description}
47+
{...props}
48+
/>
49+
);
50+
51+
const rendererProps = {
52+
onSubmit: jest.fn(),
53+
FormTemplate: FormTemplateTest,
54+
componentMapper: { [componentTypes.TEXT_FIELD]: DummyField },
55+
schema: {
56+
fields
57+
}
58+
};
59+
60+
it('Renders correctly', async () => {
61+
await act(async () => {
62+
wrapper = mount(<FormRenderer {...rendererProps} />);
63+
});
64+
wrapper.update();
65+
66+
expect(wrapper.find(Form)).toHaveLength(1);
67+
expect(wrapper.find(FormError)).toHaveLength(1);
68+
expect(wrapper.find(Button)).toHaveLength(1);
69+
70+
expect(wrapper.find('button').map((b) => b.text())).toEqual(['Submit']);
71+
72+
expect(wrapper.find(ButtonGroup)).toHaveLength(1);
73+
expect(wrapper.find(Title)).toHaveLength(0);
74+
expect(wrapper.find(Description)).toHaveLength(0);
75+
76+
expect(wrapper.find(DummyField)).toHaveLength(2);
77+
});
78+
79+
it('Renders correctly - fully enabled', async () => {
80+
await act(async () => {
81+
wrapper = mount(
82+
<FormRenderer
83+
{...rendererProps}
84+
onCancel={jest.fn()}
85+
schema={{
86+
title: 'some-title',
87+
description: 'some-description',
88+
fields
89+
}}
90+
FormTemplate={(props) => <FormTemplateTest {...props} canReset />}
91+
/>
92+
);
93+
});
94+
wrapper.update();
95+
96+
expect(wrapper.find(Form)).toHaveLength(1);
97+
expect(wrapper.find(FormError)).toHaveLength(1);
98+
expect(wrapper.find(Button)).toHaveLength(3);
99+
100+
expect(wrapper.find('button').map((b) => b.text())).toEqual(['Submit', 'Reset', 'Cancel']);
101+
102+
expect(wrapper.find(ButtonGroup)).toHaveLength(1);
103+
expect(wrapper.find(Title).text()).toEqual('some-title');
104+
expect(wrapper.find(Description).text()).toEqual('some-description');
105+
});
106+
107+
it('Renders correctly - with label', async () => {
108+
await act(async () => {
109+
wrapper = mount(
110+
<FormRenderer
111+
{...rendererProps}
112+
onCancel={jest.fn()}
113+
schema={{
114+
label: 'some-title',
115+
fields
116+
}}
117+
FormTemplate={(props) => <FormTemplateTest {...props} canReset />}
118+
/>
119+
);
120+
});
121+
wrapper.update();
122+
123+
expect(wrapper.find(Title).text()).toEqual('some-title');
124+
});
125+
126+
it('Calls submit', async () => {
127+
const spy = jest.fn();
128+
129+
await act(async () => {
130+
wrapper = mount(<FormRenderer {...rendererProps} onSubmit={spy} />);
131+
});
132+
wrapper.update();
133+
134+
await act(async () => {
135+
wrapper.find('#submit').simulate('submit');
136+
});
137+
wrapper.update();
138+
139+
expect(spy).toHaveBeenCalled();
140+
});
141+
142+
it('Calls reset', async () => {
143+
await act(async () => {
144+
wrapper = mount(<FormRenderer {...rendererProps} FormTemplate={(props) => <FormTemplateTest {...props} canReset />} />);
145+
});
146+
wrapper.update();
147+
148+
await act(async () => {
149+
wrapper
150+
.find('input')
151+
.first()
152+
.instance().value = 'y';
153+
wrapper
154+
.find('input')
155+
.first()
156+
.simulate('change');
157+
});
158+
wrapper.update();
159+
160+
await act(async () => {
161+
wrapper.find('#reset').simulate('click');
162+
});
163+
wrapper.update();
164+
165+
expect(wrapper.find('input').first().value).toEqual();
166+
});
167+
168+
it('Calls cancel', async () => {
169+
const spy = jest.fn();
170+
171+
await act(async () => {
172+
wrapper = mount(<FormRenderer {...rendererProps} onCancel={spy} />);
173+
});
174+
wrapper.update();
175+
176+
await act(async () => {
177+
wrapper.find('#cancel').simulate('click');
178+
});
179+
wrapper.update();
180+
181+
expect(spy).toHaveBeenCalled();
182+
});
183+
184+
it('Changes button order', async () => {
185+
await act(async () => {
186+
wrapper = mount(
187+
<FormRenderer
188+
{...rendererProps}
189+
onCancel={jest.fn()}
190+
FormTemplate={(props) => <FormTemplateTest {...props} canReset buttonOrder={['cancel', 'submit', 'reset']} />}
191+
/>
192+
);
193+
});
194+
wrapper.update();
195+
196+
expect(wrapper.find('button').map((b) => b.text())).toEqual(['Cancel', 'Submit', 'Reset']);
197+
});
198+
199+
it('Changes button order - default', async () => {
200+
await act(async () => {
201+
wrapper = mount(
202+
<FormRenderer {...rendererProps} onCancel={jest.fn()} FormTemplate={(props) => <FormTemplateTest {...props} canReset buttonOrder={[]} />} />
203+
);
204+
});
205+
wrapper.update();
206+
207+
expect(wrapper.find('button').map((b) => b.text())).toEqual(['Submit', 'Reset', 'Cancel']);
208+
});
209+
210+
it('Changes labels', async () => {
211+
await act(async () => {
212+
wrapper = mount(
213+
<FormRenderer
214+
{...rendererProps}
215+
onCancel={jest.fn()}
216+
FormTemplate={(props) => <FormTemplateTest {...props} canReset submitLabel="save" cancelLabel="discard" resetLabel="retry" />}
217+
/>
218+
);
219+
});
220+
wrapper.update();
221+
222+
expect(wrapper.find('button').map((b) => b.text())).toEqual(['save', 'retry', 'discard']);
223+
});
224+
225+
it('Changes button className', async () => {
226+
await act(async () => {
227+
wrapper = mount(
228+
<FormRenderer
229+
{...rendererProps}
230+
onCancel={jest.fn()}
231+
FormTemplate={(props) => <FormTemplateTest {...props} buttonClassName="custom-button-classname" />}
232+
/>
233+
);
234+
});
235+
wrapper.update();
236+
237+
expect(
238+
wrapper
239+
.find(ButtonGroup)
240+
.find('span')
241+
.props().className
242+
).toEqual('custom-button-classname');
243+
});
244+
245+
it('Hide form controls', async () => {
246+
await act(async () => {
247+
wrapper = mount(
248+
<FormRenderer
249+
{...rendererProps}
250+
onCancel={jest.fn()}
251+
FormTemplate={(props) => <FormTemplateTest {...props} canReset showFormControls={false} />}
252+
/>
253+
);
254+
});
255+
wrapper.update();
256+
257+
expect(wrapper.find(Button)).toHaveLength(0);
258+
expect(wrapper.find(ButtonGroup)).toHaveLength(0);
259+
expect(wrapper.find(DummyField)).toHaveLength(2);
260+
});
261+
262+
it('Custom buttons', async () => {
263+
await act(async () => {
264+
wrapper = mount(
265+
<FormRenderer
266+
{...rendererProps}
267+
onCancel={jest.fn()}
268+
FormTemplate={(props) => <FormTemplateTest {...props} FormButtons={() => <div id="custom-buttons" />} />}
269+
/>
270+
);
271+
});
272+
wrapper.update();
273+
274+
expect(wrapper.find(Button)).toHaveLength(0);
275+
expect(wrapper.find(ButtonGroup)).toHaveLength(0);
276+
expect(wrapper.find(DummyField)).toHaveLength(2);
277+
expect(wrapper.find('#custom-buttons')).toHaveLength(1);
278+
});
279+
280+
it('shows form error', async () => {
281+
await act(async () => {
282+
wrapper = mount(
283+
<FormRenderer
284+
{...rendererProps}
285+
onSubmit={() => ({
286+
[ERROR]: 'form error'
287+
})}
288+
/>
289+
);
290+
});
291+
wrapper.update();
292+
293+
expect(wrapper.find(FormError).text()).toEqual('');
294+
295+
await act(async () => {
296+
wrapper.find('form').simulate('submit');
297+
});
298+
299+
wrapper.update();
300+
301+
expect(wrapper.find(FormError).text()).toEqual('form error');
302+
});
303+
});

‎packages/common/src/test/hooks/use-is-mounted.test.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { useEffect } from 'react';
2+
import { act } from 'react-dom/test-utils';
3+
import { mount } from 'enzyme';
4+
import useIsMounted from '../../hooks';
5+
6+
describe('useIsMounted', () => {
7+
it('mounts and unmounts', async () => {
8+
expect.assertions(2);
9+
10+
let wrapper;
11+
const isMountedSpy = ({ current }) => current;
12+
13+
const Dummy = () => {
14+
const isMounted = useIsMounted();
15+
16+
useEffect(() => {
17+
expect(isMountedSpy(isMounted)).toEqual(true);
18+
19+
return () => {
20+
expect(isMountedSpy(isMounted)).toEqual(false);
21+
};
22+
});
23+
24+
return <span>Dummy</span>;
25+
};
26+
27+
await act(async () => {
28+
wrapper = mount(<Dummy />);
29+
});
30+
wrapper.update();
31+
32+
await act(async () => {
33+
wrapper.unmount();
34+
});
35+
wrapper.update();
36+
});
37+
});

0 commit comments

Comments
 (0)