Skip to content

Commit 1989e39

Browse files
dev-javascriptdev-javascript
committed
write test for moreButtonPlugin/button
1 parent 5b9d20d commit 1989e39

File tree

4 files changed

+683
-101
lines changed

4 files changed

+683
-101
lines changed

‎src/plugins/moreButtonPlugin/button/__snapshots__/button.test.js.snap

Lines changed: 298 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,323 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Default show more button structure : default 1`] = `
4-
<div
5-
className="rc-dyn-tabs-tab rc-dyn-tabs-showmorebutton-container"
6-
>
3+
exports[`DISABLE ACCESIBILITY : DEFAULT: 1`] = `
4+
<div>
75
<div
86
className="rc-dyn-tabs-title rc-dyn-tabs-showmorebutton"
97
onClick={[Function]}
108
>
11-
<svg
12-
height="1em"
13-
viewBox="0 0 512 512"
14-
xmlns="http://www.w3.org/2000/svg"
15-
>
16-
<path
17-
d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"
18-
fill="gray"
19-
/>
20-
</svg>
9+
<div
10+
instance={
11+
Object {
12+
"close": [Function],
13+
"getCopyData": [Function],
14+
"getCopyPerviousData": [Function],
15+
"getData": [Function],
16+
"getOption": [Function],
17+
"getPreviousData": [Function],
18+
"getTab": [Function],
19+
"isOpen": [Function],
20+
"isSelected": [Function],
21+
"off": [Function],
22+
"on": [Function],
23+
"one": [Function],
24+
"open": [Function],
25+
"refresh": [Function],
26+
"select": [Function],
27+
"setOption": [Function],
28+
"setTab": [Function],
29+
"sort": [Function],
30+
}
31+
}
32+
>
33+
more button mock icon
34+
</div>
2135
</div>
2236
</div>
2337
`;
2438

25-
exports[`Default show more button structure : different hiddenTabIDs 1`] = `
26-
<div
27-
className="rc-dyn-tabs-tab rc-dyn-tabs-showmorebutton-container"
28-
>
39+
exports[`Enable Accesibility : DEFAULT: 1`] = `
40+
<div>
2941
<div
42+
aria-controls="rc-dyn-tabs-popupcontainer_0"
43+
aria-expanded={false}
44+
aria-haspopup="true"
3045
className="rc-dyn-tabs-title rc-dyn-tabs-showmorebutton"
46+
id="rc-dyn-tabs-more-button-0"
3147
onClick={[Function]}
48+
role="button"
49+
tabIndex={0}
3250
>
33-
<svg
34-
height="1em"
35-
viewBox="0 0 512 512"
36-
xmlns="http://www.w3.org/2000/svg"
37-
>
38-
<path
39-
d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"
40-
fill="gray"
41-
/>
42-
</svg>
51+
<div
52+
instance={
53+
Object {
54+
"close": [Function],
55+
"getCopyData": [Function],
56+
"getCopyPerviousData": [Function],
57+
"getData": [Function],
58+
"getOption": [Function],
59+
"getPreviousData": [Function],
60+
"getTab": [Function],
61+
"isOpen": [Function],
62+
"isSelected": [Function],
63+
"off": [Function],
64+
"on": [Function],
65+
"one": [Function],
66+
"open": [Function],
67+
"refresh": [Function],
68+
"select": [Function],
69+
"setOption": [Function],
70+
"setTab": [Function],
71+
"sort": [Function],
72+
}
73+
}
74+
>
75+
more button mock icon
76+
</div>
4377
</div>
4478
</div>
4579
`;
4680

47-
exports[`Default show more button structure : rtl mode 1`] = `
48-
<div
49-
className="rc-dyn-tabs-tab rc-dyn-tabs-showmorebutton-container"
50-
>
81+
exports[`Enable Accesibility : MULTIPLE BUTTON SHOULD NOT HAVE SAME ID: 1`] = `
82+
<div>
83+
<div
84+
aria-controls="rc-dyn-tabs-popupcontainer_1"
85+
aria-expanded={false}
86+
aria-haspopup="true"
87+
className="rc-dyn-tabs-title rc-dyn-tabs-showmorebutton"
88+
id="rc-dyn-tabs-more-button-1"
89+
onClick={[Function]}
90+
role="button"
91+
tabIndex={0}
92+
>
93+
<div
94+
instance={
95+
Object {
96+
"close": [Function],
97+
"getCopyData": [Function],
98+
"getCopyPerviousData": [Function],
99+
"getData": [Function],
100+
"getOption": [Function],
101+
"getPreviousData": [Function],
102+
"getTab": [Function],
103+
"isOpen": [Function],
104+
"isSelected": [Function],
105+
"off": [Function],
106+
"on": [Function],
107+
"one": [Function],
108+
"open": [Function],
109+
"refresh": [Function],
110+
"select": [Function],
111+
"setOption": [Function],
112+
"setTab": [Function],
113+
"sort": [Function],
114+
}
115+
}
116+
>
117+
more button mock icon
118+
</div>
119+
</div>
51120
<div
121+
aria-controls="rc-dyn-tabs-popupcontainer_2"
122+
aria-expanded={false}
123+
aria-haspopup="true"
52124
className="rc-dyn-tabs-title rc-dyn-tabs-showmorebutton"
125+
id="rc-dyn-tabs-more-button-2"
53126
onClick={[Function]}
127+
role="button"
128+
tabIndex={0}
54129
>
55-
<svg
56-
height="1em"
57-
viewBox="0 0 512 512"
58-
xmlns="http://www.w3.org/2000/svg"
59-
>
60-
<path
61-
d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"
62-
fill="gray"
63-
/>
64-
</svg>
130+
<div
131+
instance={
132+
Object {
133+
"close": [Function],
134+
"getCopyData": [Function],
135+
"getCopyPerviousData": [Function],
136+
"getData": [Function],
137+
"getOption": [Function],
138+
"getPreviousData": [Function],
139+
"getTab": [Function],
140+
"isOpen": [Function],
141+
"isSelected": [Function],
142+
"off": [Function],
143+
"on": [Function],
144+
"one": [Function],
145+
"open": [Function],
146+
"refresh": [Function],
147+
"select": [Function],
148+
"setOption": [Function],
149+
"setTab": [Function],
150+
"sort": [Function],
151+
}
152+
}
153+
>
154+
more button mock icon
155+
</div>
65156
</div>
66157
</div>
67158
`;
159+
160+
exports[`TABS COMPONENT: ltr: 1`] = `
161+
<ul
162+
aria-labelledby="rc-dyn-tabs-more-button-8"
163+
className="rc-dyn-tabs-tablist rc-dyn-tabs-ltr rc-dyn-tabs-vertical"
164+
id="rc-dyn-tabs-popupcontainer_8"
165+
role="menu"
166+
>
167+
<li
168+
aria-label="tab1"
169+
className="rc-dyn-tabs-tab rc-dyn-tabs-selected"
170+
onClick={[Function]}
171+
role="menuitem"
172+
tab-id="1"
173+
tabIndex={0}
174+
title="tab1"
175+
>
176+
<button
177+
className="rc-dyn-tabs-title"
178+
role="presentation"
179+
tab-id="1"
180+
tabIndex={-1}
181+
>
182+
tab1
183+
</button>
184+
<span
185+
className="rc-dyn-tabs-close"
186+
role="button"
187+
>
188+
×
189+
</span>
190+
</li>
191+
<li
192+
aria-label="tab2"
193+
className="rc-dyn-tabs-tab"
194+
onClick={[Function]}
195+
role="menuitem"
196+
tab-id="2"
197+
tabIndex={-1}
198+
title="tab2"
199+
>
200+
<button
201+
className="rc-dyn-tabs-title"
202+
role="presentation"
203+
tab-id="2"
204+
tabIndex={-1}
205+
>
206+
tab2
207+
</button>
208+
<span
209+
className="rc-dyn-tabs-close"
210+
role="button"
211+
>
212+
×
213+
</span>
214+
</li>
215+
</ul>
216+
`;
217+
218+
exports[`TABS COMPONENT: rtl: 1`] = `
219+
<ul
220+
aria-labelledby="rc-dyn-tabs-more-button-9"
221+
className="rc-dyn-tabs-tablist rc-dyn-tabs-rtl rc-dyn-tabs-vertical"
222+
id="rc-dyn-tabs-popupcontainer_9"
223+
role="menu"
224+
>
225+
<li
226+
aria-label="tab1"
227+
className="rc-dyn-tabs-tab rc-dyn-tabs-selected"
228+
onClick={[Function]}
229+
role="menuitem"
230+
tab-id="1"
231+
tabIndex={0}
232+
title="tab1"
233+
>
234+
<button
235+
className="rc-dyn-tabs-title"
236+
role="presentation"
237+
tab-id="1"
238+
tabIndex={-1}
239+
>
240+
tab1
241+
</button>
242+
<span
243+
className="rc-dyn-tabs-close"
244+
role="button"
245+
>
246+
×
247+
</span>
248+
</li>
249+
<li
250+
aria-label="tab2"
251+
className="rc-dyn-tabs-tab"
252+
onClick={[Function]}
253+
role="menuitem"
254+
tab-id="2"
255+
tabIndex={-1}
256+
title="tab2"
257+
>
258+
<button
259+
className="rc-dyn-tabs-title"
260+
role="presentation"
261+
tab-id="2"
262+
tabIndex={-1}
263+
>
264+
tab2
265+
</button>
266+
<span
267+
className="rc-dyn-tabs-close"
268+
role="button"
269+
>
270+
×
271+
</span>
272+
</li>
273+
</ul>
274+
`;
275+
276+
exports[`TABS COMPONENT: trun off accesibility: 1`] = `
277+
<ul
278+
className="rc-dyn-tabs-tablist rc-dyn-tabs-ltr rc-dyn-tabs-vertical"
279+
>
280+
<li
281+
className="rc-dyn-tabs-tab rc-dyn-tabs-selected"
282+
onClick={[Function]}
283+
tab-id="1"
284+
tabIndex={0}
285+
title="tab1"
286+
>
287+
<button
288+
className="rc-dyn-tabs-title"
289+
role="presentation"
290+
tab-id="1"
291+
tabIndex={-1}
292+
>
293+
tab1
294+
</button>
295+
<span
296+
className="rc-dyn-tabs-close"
297+
>
298+
×
299+
</span>
300+
</li>
301+
<li
302+
className="rc-dyn-tabs-tab"
303+
onClick={[Function]}
304+
tab-id="2"
305+
tabIndex={-1}
306+
title="tab2"
307+
>
308+
<button
309+
className="rc-dyn-tabs-title"
310+
role="presentation"
311+
tab-id="2"
312+
tabIndex={-1}
313+
>
314+
tab2
315+
</button>
316+
<span
317+
className="rc-dyn-tabs-close"
318+
>
319+
×
320+
</span>
321+
</li>
322+
</ul>
323+
`;

0 commit comments

Comments
 (0)