Skip to content

Commit 7880c23

Browse files
mortalYoungmortalYoung
committed
test(modal): add unit tests
1 parent a762fb8 commit 7880c23

File tree

9 files changed

+503
-15
lines changed

9 files changed

+503
-15
lines changed

‎src/float/__tests__/__snapshots__/index.test.tsx.snap

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Float Component should match snapshot 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="dtc-float-container test-class react-draggable"
7+
style="color: red; transform: translate(0px,0px);"
8+
>
9+
Test
10+
</div>
11+
</DocumentFragment>
12+
`;

‎src/float/__tests__/index.test.tsx

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react';
2+
import { cleanup, fireEvent, render } from '@testing-library/react';
3+
import '@testing-library/jest-dom/extend-expect';
4+
5+
import Float, { IFloatProps } from '../index';
6+
7+
function dragFromTo(
8+
ele: HTMLElement,
9+
from: NonNullable<IFloatProps['position']>,
10+
to: NonNullable<IFloatProps['position']>
11+
) {
12+
fireEvent.mouseDown(ele, { clientX: from.x, clientY: from.y });
13+
fireEvent.mouseMove(document, { clientX: to.x, clientY: to.y });
14+
return {
15+
mouseUp: () => fireEvent.mouseUp(ele, { clientX: to.x, clientY: to.y }),
16+
};
17+
}
18+
19+
describe('Float Component', () => {
20+
const defaultProps: IFloatProps = {
21+
className: 'test-class',
22+
style: { color: 'red' },
23+
draggable: true,
24+
position: { x: 0, y: 0 },
25+
};
26+
27+
beforeEach(() => {
28+
cleanup();
29+
});
30+
31+
it('should match snapshot', () => {
32+
const { asFragment } = render(<Float {...defaultProps}>Test</Float>);
33+
expect(asFragment()).toMatchSnapshot();
34+
});
35+
36+
it('should handle drag events', () => {
37+
const fn = jest.fn();
38+
const { container } = render(
39+
<Float {...defaultProps} onChange={fn}>
40+
Test
41+
</Float>
42+
);
43+
const floatContainer = container.firstChild as HTMLElement;
44+
const { mouseUp } = dragFromTo(floatContainer, { x: 0, y: 0 }, { x: 100, y: 100 });
45+
expect(floatContainer).toHaveClass('dtc-float-container__dragging');
46+
47+
mouseUp();
48+
49+
expect(fn.mock.calls[0][1]).toEqual(expect.objectContaining({ x: 100, y: 100 }));
50+
expect(floatContainer).not.toHaveClass('dtc-float-container__dragging');
51+
});
52+
53+
it('should disable dragging when draggable is set to false', () => {
54+
const fn = jest.fn();
55+
const { container } = render(
56+
<Float {...defaultProps} draggable={false} onChange={fn}>
57+
Test
58+
</Float>
59+
);
60+
const floatContainer = container.firstChild as HTMLElement;
61+
dragFromTo(floatContainer, { x: 0, y: 0 }, { x: 100, y: 100 }).mouseUp();
62+
63+
expect(fn).not.toHaveBeenCalled();
64+
});
65+
66+
it('should support pass through draggable options', () => {
67+
const fn = jest.fn();
68+
const { container } = render(
69+
<Float
70+
{...defaultProps}
71+
draggable={{
72+
onDrag: fn,
73+
}}
74+
>
75+
Test
76+
</Float>
77+
);
78+
79+
const floatContainer = container.firstChild as HTMLElement;
80+
dragFromTo(floatContainer, { x: 0, y: 0 }, { x: 100, y: 100 }).mouseUp();
81+
82+
expect(fn).toBeCalled();
83+
});
84+
});

‎src/modal/__tests__/__snapshots__/handle.test.tsx.snap

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Handler Component should match snapshot 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="dt-modal-resize-handle handle-x"
7+
data-testid="handler"
8+
/>
9+
</DocumentFragment>
10+
`;

‎src/modal/__tests__/__snapshots__/modal.test.tsx.snap

+248-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ exports[`Test Modal Component Should Match snapshot 1`] = `
1717
aria-modal="true"
1818
class="ant-modal dtc-modal"
1919
role="dialog"
20-
style="width: 520px;"
20+
style="height: auto; width: 520px;"
2121
>
2222
<div
2323
aria-hidden="true"
@@ -110,3 +110,250 @@ exports[`Test Modal Component Should Match snapshot 1`] = `
110110
</div>
111111
</DocumentFragment>
112112
`;
113+
114+
exports[`Test Modal Component Should support banner Should match snapshot for draggable modal 1`] = `
115+
<DocumentFragment>
116+
<div
117+
class="ant-modal-root"
118+
>
119+
<div
120+
class="ant-modal-mask"
121+
/>
122+
<div
123+
class="ant-modal-wrap"
124+
tabindex="-1"
125+
>
126+
<div
127+
aria-labelledby="test-id"
128+
aria-modal="true"
129+
class="ant-modal dtc-modal dtc-modal__draggable"
130+
role="dialog"
131+
style="height: auto; width: 520px;"
132+
>
133+
<div
134+
aria-hidden="true"
135+
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
136+
tabindex="0"
137+
/>
138+
<div
139+
class="dtc-float-container react-draggable"
140+
style="width: 520px; height: auto; transform: translate(0px,0px);"
141+
>
142+
<div
143+
class="ant-modal-content"
144+
>
145+
<button
146+
aria-label="Close"
147+
class="ant-modal-close"
148+
type="button"
149+
>
150+
<span
151+
class="ant-modal-close-x"
152+
>
153+
<span
154+
aria-label="close"
155+
class="anticon anticon-close ant-modal-close-icon"
156+
role="img"
157+
>
158+
<svg
159+
aria-hidden="true"
160+
data-icon="close"
161+
fill="currentColor"
162+
fill-rule="evenodd"
163+
focusable="false"
164+
height="1em"
165+
viewBox="64 64 896 896"
166+
width="1em"
167+
>
168+
<path
169+
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
170+
/>
171+
</svg>
172+
</span>
173+
</span>
174+
</button>
175+
<div
176+
class="ant-modal-header"
177+
>
178+
<div
179+
class="ant-modal-title"
180+
id="test-id"
181+
>
182+
title
183+
</div>
184+
</div>
185+
<div
186+
class="ant-modal-body"
187+
style="padding: 0px;"
188+
>
189+
<section
190+
class="dtc-modal-body"
191+
>
192+
test
193+
</section>
194+
</div>
195+
<div
196+
class="ant-modal-footer"
197+
>
198+
<button
199+
class="ant-btn ant-btn-default"
200+
type="button"
201+
>
202+
<span>
203+
Cancel
204+
</span>
205+
</button>
206+
<button
207+
class="ant-btn ant-btn-primary"
208+
type="button"
209+
>
210+
<span>
211+
OK
212+
</span>
213+
</button>
214+
</div>
215+
</div>
216+
</div>
217+
<div
218+
aria-hidden="true"
219+
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
220+
tabindex="0"
221+
/>
222+
</div>
223+
</div>
224+
</div>
225+
</DocumentFragment>
226+
`;
227+
228+
exports[`Test Modal Component Should support banner Should match snapshot for resizable modal 1`] = `
229+
<DocumentFragment>
230+
<div
231+
class="ant-modal-root"
232+
>
233+
<div
234+
class="ant-modal-mask"
235+
/>
236+
<div
237+
class="ant-modal-wrap"
238+
tabindex="-1"
239+
>
240+
<div
241+
aria-labelledby="test-id"
242+
aria-modal="true"
243+
class="ant-modal dtc-modal dtc-modal__resizable"
244+
role="dialog"
245+
style="height: 600px; width: 620px;"
246+
>
247+
<div
248+
aria-hidden="true"
249+
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
250+
tabindex="0"
251+
/>
252+
<div
253+
class="ant-modal-content"
254+
>
255+
<button
256+
aria-label="Close"
257+
class="ant-modal-close"
258+
type="button"
259+
>
260+
<span
261+
class="ant-modal-close-x"
262+
>
263+
<span
264+
aria-label="close"
265+
class="anticon anticon-close ant-modal-close-icon"
266+
role="img"
267+
>
268+
<svg
269+
aria-hidden="true"
270+
data-icon="close"
271+
fill="currentColor"
272+
fill-rule="evenodd"
273+
focusable="false"
274+
height="1em"
275+
viewBox="64 64 896 896"
276+
width="1em"
277+
>
278+
<path
279+
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
280+
/>
281+
</svg>
282+
</span>
283+
</span>
284+
</button>
285+
<div
286+
class="ant-modal-header"
287+
>
288+
<div
289+
class="ant-modal-title"
290+
id="test-id"
291+
>
292+
title
293+
</div>
294+
</div>
295+
<div
296+
class="ant-modal-body"
297+
style="padding: 0px;"
298+
>
299+
<section
300+
class="dtc-modal-body"
301+
>
302+
test
303+
</section>
304+
</div>
305+
<div
306+
class="ant-modal-footer"
307+
>
308+
<button
309+
class="ant-btn ant-btn-default"
310+
type="button"
311+
>
312+
<span>
313+
Cancel
314+
</span>
315+
</button>
316+
<button
317+
class="ant-btn ant-btn-primary"
318+
type="button"
319+
>
320+
<span>
321+
OK
322+
</span>
323+
</button>
324+
</div>
325+
</div>
326+
<div
327+
class="dt-modal-resize-handle handle-s"
328+
/>
329+
<div
330+
class="dt-modal-resize-handle handle-w"
331+
/>
332+
<div
333+
class="dt-modal-resize-handle handle-e"
334+
/>
335+
<div
336+
class="dt-modal-resize-handle handle-n"
337+
/>
338+
<div
339+
class="dt-modal-resize-handle handle-ne"
340+
/>
341+
<div
342+
class="dt-modal-resize-handle handle-nw"
343+
/>
344+
<div
345+
class="dt-modal-resize-handle handle-sw"
346+
/>
347+
<div
348+
class="dt-modal-resize-handle handle-se"
349+
/>
350+
<div
351+
aria-hidden="true"
352+
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
353+
tabindex="0"
354+
/>
355+
</div>
356+
</div>
357+
</div>
358+
</DocumentFragment>
359+
`;

‎src/modal/__tests__/handle.test.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import '@testing-library/jest-dom/extend-expect';
4+
5+
import Handler from '../handle';
6+
7+
describe('Handler Component', () => {
8+
it('should match snapshot', () => {
9+
const { asFragment } = render(<Handler data-testid="handler" handleAxis="x" />);
10+
expect(asFragment()).toMatchSnapshot();
11+
});
12+
13+
it('should forward ref to the div element', () => {
14+
const ref = React.createRef<HTMLDivElement>();
15+
render(<Handler handleAxis="y" ref={ref} />);
16+
expect(ref.current).toBeInstanceOf(HTMLDivElement);
17+
expect(ref.current).toHaveClass('dt-modal-resize-handle handle-y');
18+
});
19+
});

0 commit comments

Comments
 (0)