Skip to content

Commit ee3b659

Browse files
ravichdevravichdev
committed
Add JS snapshot test
1 parent 46e0ebe commit ee3b659

File tree

2 files changed

+326
-0
lines changed

2 files changed

+326
-0
lines changed

‎plugin/tests/js/common/components/__snapshots__/dialog.test.js.snap‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Common Components: Dialog should match snapshot 1`] = `
4+
Object {
5+
"asFragment": [Function],
6+
"baseElement": <body>
7+
<div>
8+
<div
9+
class="mdc-dialog mdc-dialog--open"
10+
>
11+
<div
12+
class="mdc-dialog__container"
13+
>
14+
<div
15+
aria-describedby="dialog-content-0"
16+
aria-labelledby="dialog-title-0"
17+
aria-modal="true"
18+
class="mdc-dialog__surface"
19+
role="alertdialog"
20+
>
21+
<h2
22+
class="mdc-dialog__title"
23+
id="dialog-title-0"
24+
>
25+
&lt;h3&gt;Dialog Title&lt;/h3&gt;
26+
</h2>
27+
<div
28+
class="mdc-dialog__content"
29+
id="dialog-content-0"
30+
>
31+
&lt;p&gt;Dialog Content&lt;/p&gt;
32+
</div>
33+
<div
34+
class="mdc-dialog__actions"
35+
>
36+
&lt;button&gt;Save&lt;/button&gt;
37+
</div>
38+
</div>
39+
</div>
40+
<div
41+
class="mdc-dialog__scrim"
42+
/>
43+
</div>
44+
</div>
45+
</body>,
46+
"container": <div>
47+
<div
48+
class="mdc-dialog mdc-dialog--open"
49+
>
50+
<div
51+
class="mdc-dialog__container"
52+
>
53+
<div
54+
aria-describedby="dialog-content-0"
55+
aria-labelledby="dialog-title-0"
56+
aria-modal="true"
57+
class="mdc-dialog__surface"
58+
role="alertdialog"
59+
>
60+
<h2
61+
class="mdc-dialog__title"
62+
id="dialog-title-0"
63+
>
64+
&lt;h3&gt;Dialog Title&lt;/h3&gt;
65+
</h2>
66+
<div
67+
class="mdc-dialog__content"
68+
id="dialog-content-0"
69+
>
70+
&lt;p&gt;Dialog Content&lt;/p&gt;
71+
</div>
72+
<div
73+
class="mdc-dialog__actions"
74+
>
75+
&lt;button&gt;Save&lt;/button&gt;
76+
</div>
77+
</div>
78+
</div>
79+
<div
80+
class="mdc-dialog__scrim"
81+
/>
82+
</div>
83+
</div>,
84+
"debug": [Function],
85+
"findAllByAltText": [Function],
86+
"findAllByDisplayValue": [Function],
87+
"findAllByLabelText": [Function],
88+
"findAllByPlaceholderText": [Function],
89+
"findAllByRole": [Function],
90+
"findAllByTestId": [Function],
91+
"findAllByText": [Function],
92+
"findAllByTitle": [Function],
93+
"findByAltText": [Function],
94+
"findByDisplayValue": [Function],
95+
"findByLabelText": [Function],
96+
"findByPlaceholderText": [Function],
97+
"findByRole": [Function],
98+
"findByTestId": [Function],
99+
"findByText": [Function],
100+
"findByTitle": [Function],
101+
"getAllByAltText": [Function],
102+
"getAllByDisplayValue": [Function],
103+
"getAllByLabelText": [Function],
104+
"getAllByPlaceholderText": [Function],
105+
"getAllByRole": [Function],
106+
"getAllByTestId": [Function],
107+
"getAllByText": [Function],
108+
"getAllByTitle": [Function],
109+
"getByAltText": [Function],
110+
"getByDisplayValue": [Function],
111+
"getByLabelText": [Function],
112+
"getByPlaceholderText": [Function],
113+
"getByRole": [Function],
114+
"getByTestId": [Function],
115+
"getByText": [Function],
116+
"getByTitle": [Function],
117+
"queryAllByAltText": [Function],
118+
"queryAllByDisplayValue": [Function],
119+
"queryAllByLabelText": [Function],
120+
"queryAllByPlaceholderText": [Function],
121+
"queryAllByRole": [Function],
122+
"queryAllByTestId": [Function],
123+
"queryAllByText": [Function],
124+
"queryAllByTitle": [Function],
125+
"queryByAltText": [Function],
126+
"queryByDisplayValue": [Function],
127+
"queryByLabelText": [Function],
128+
"queryByPlaceholderText": [Function],
129+
"queryByRole": [Function],
130+
"queryByTestId": [Function],
131+
"queryByText": [Function],
132+
"queryByTitle": [Function],
133+
"rerender": [Function],
134+
"unmount": [Function],
135+
}
136+
`;
137+
138+
exports[`Common Components: Dialog should match snapshot when dialog is not open 1`] = `
139+
Object {
140+
"asFragment": [Function],
141+
"baseElement": <body>
142+
<div>
143+
<div
144+
class="mdc-dialog"
145+
>
146+
<div
147+
class="mdc-dialog__container"
148+
>
149+
<div
150+
aria-describedby="dialog-content-1"
151+
aria-labelledby="dialog-title-1"
152+
aria-modal="true"
153+
class="mdc-dialog__surface"
154+
role="alertdialog"
155+
>
156+
<h2
157+
class="mdc-dialog__title"
158+
id="dialog-title-1"
159+
>
160+
&lt;h3&gt;Dialog Title&lt;/h3&gt;
161+
</h2>
162+
<div
163+
class="mdc-dialog__content"
164+
id="dialog-content-1"
165+
>
166+
&lt;p&gt;Dialog Content&lt;/p&gt;
167+
</div>
168+
<div
169+
class="mdc-dialog__actions"
170+
>
171+
&lt;button&gt;Save&lt;/button&gt;
172+
</div>
173+
</div>
174+
</div>
175+
<div
176+
class="mdc-dialog__scrim"
177+
/>
178+
</div>
179+
</div>
180+
</body>,
181+
"container": <div>
182+
<div
183+
class="mdc-dialog"
184+
>
185+
<div
186+
class="mdc-dialog__container"
187+
>
188+
<div
189+
aria-describedby="dialog-content-1"
190+
aria-labelledby="dialog-title-1"
191+
aria-modal="true"
192+
class="mdc-dialog__surface"
193+
role="alertdialog"
194+
>
195+
<h2
196+
class="mdc-dialog__title"
197+
id="dialog-title-1"
198+
>
199+
&lt;h3&gt;Dialog Title&lt;/h3&gt;
200+
</h2>
201+
<div
202+
class="mdc-dialog__content"
203+
id="dialog-content-1"
204+
>
205+
&lt;p&gt;Dialog Content&lt;/p&gt;
206+
</div>
207+
<div
208+
class="mdc-dialog__actions"
209+
>
210+
&lt;button&gt;Save&lt;/button&gt;
211+
</div>
212+
</div>
213+
</div>
214+
<div
215+
class="mdc-dialog__scrim"
216+
/>
217+
</div>
218+
</div>,
219+
"debug": [Function],
220+
"findAllByAltText": [Function],
221+
"findAllByDisplayValue": [Function],
222+
"findAllByLabelText": [Function],
223+
"findAllByPlaceholderText": [Function],
224+
"findAllByRole": [Function],
225+
"findAllByTestId": [Function],
226+
"findAllByText": [Function],
227+
"findAllByTitle": [Function],
228+
"findByAltText": [Function],
229+
"findByDisplayValue": [Function],
230+
"findByLabelText": [Function],
231+
"findByPlaceholderText": [Function],
232+
"findByRole": [Function],
233+
"findByTestId": [Function],
234+
"findByText": [Function],
235+
"findByTitle": [Function],
236+
"getAllByAltText": [Function],
237+
"getAllByDisplayValue": [Function],
238+
"getAllByLabelText": [Function],
239+
"getAllByPlaceholderText": [Function],
240+
"getAllByRole": [Function],
241+
"getAllByTestId": [Function],
242+
"getAllByText": [Function],
243+
"getAllByTitle": [Function],
244+
"getByAltText": [Function],
245+
"getByDisplayValue": [Function],
246+
"getByLabelText": [Function],
247+
"getByPlaceholderText": [Function],
248+
"getByRole": [Function],
249+
"getByTestId": [Function],
250+
"getByText": [Function],
251+
"getByTitle": [Function],
252+
"queryAllByAltText": [Function],
253+
"queryAllByDisplayValue": [Function],
254+
"queryAllByLabelText": [Function],
255+
"queryAllByPlaceholderText": [Function],
256+
"queryAllByRole": [Function],
257+
"queryAllByTestId": [Function],
258+
"queryAllByText": [Function],
259+
"queryAllByTitle": [Function],
260+
"queryByAltText": [Function],
261+
"queryByDisplayValue": [Function],
262+
"queryByLabelText": [Function],
263+
"queryByPlaceholderText": [Function],
264+
"queryByRole": [Function],
265+
"queryByTestId": [Function],
266+
"queryByText": [Function],
267+
"queryByTitle": [Function],
268+
"rerender": [Function],
269+
"unmount": [Function],
270+
}
271+
`;

‎plugin/tests/js/common/components/dialog.test.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* Copyright 2021 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import '@testing-library/jest-dom/extend-expect';
21+
import { render } from '@testing-library/react';
22+
23+
/**
24+
* Internal dependencies
25+
*/
26+
import Dialog from '../../../../assets/src/common/components/dialog';
27+
28+
/**
29+
* Render the component.
30+
*
31+
* @param {Object} props - Component props
32+
* @return {Function} A functional component.
33+
*/
34+
const setup = props => {
35+
return render( <Dialog { ...props } /> );
36+
};
37+
38+
const baseProps = {
39+
open: true,
40+
title: '<h3>Dialog Title</h3>',
41+
content: '<p>Dialog Content</p>',
42+
actions: '<button>Save</button>',
43+
};
44+
45+
describe( 'Common Components: Dialog', () => {
46+
it( 'should match snapshot', () => {
47+
const wrapper = setup( baseProps );
48+
expect( wrapper ).toMatchSnapshot();
49+
} );
50+
51+
it( 'should match snapshot when dialog is not open', () => {
52+
const wrapper = setup( { ...baseProps, ...{ open: false } } );
53+
expect( wrapper ).toMatchSnapshot();
54+
} );
55+
} );

0 commit comments

Comments
 (0)