Skip to content

Commit 5b1d6e5

Browse files
dev-javascriptdev-javascript
committed
create tabList.test.js.snap
1 parent 45d750d commit 5b1d6e5

File tree

2 files changed

+246
-4
lines changed

2 files changed

+246
-4
lines changed

‎src/tabList/__snapshots__/tabList.test.js.snap

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`TabList structure : default options 1`] = `
4+
<div>
5+
<ul
6+
className="rc-dyn-tabs-tablist rc-dyn-tabs-ltr"
7+
role="tablist"
8+
>
9+
<li
10+
aria-controls="rc-dyn-tabs-p-1"
11+
aria-expanded={true}
12+
aria-labelledby="rc-dyn-tabs-l-1"
13+
aria-selected={true}
14+
className="rc-dyn-tabs-tab rc-dyn-tabs-selected"
15+
onClick={[Function]}
16+
role="tab"
17+
tab-id="1"
18+
tabIndex={0}
19+
>
20+
<button
21+
className="rc-dyn-tabs-title"
22+
id="rc-dyn-tabs-l-1"
23+
role="presentation"
24+
tab-id="1"
25+
tabIndex={-1}
26+
title=""
27+
>
28+
tab1
29+
</button>
30+
<span
31+
className="rc-dyn-tabs-close"
32+
role="presentation"
33+
>
34+
×
35+
</span>
36+
</li>
37+
<li
38+
aria-controls="rc-dyn-tabs-p-2"
39+
aria-expanded={false}
40+
aria-labelledby="rc-dyn-tabs-l-2"
41+
aria-selected={false}
42+
className="rc-dyn-tabs-tab"
43+
onClick={[Function]}
44+
role="tab"
45+
tab-id="2"
46+
tabIndex={-1}
47+
>
48+
<button
49+
className="rc-dyn-tabs-title"
50+
id="rc-dyn-tabs-l-2"
51+
role="presentation"
52+
tab-id="2"
53+
tabIndex={-1}
54+
title=""
55+
>
56+
tab2
57+
</button>
58+
<span
59+
className="rc-dyn-tabs-close"
60+
role="presentation"
61+
>
62+
×
63+
</span>
64+
</li>
65+
</ul>
66+
</div>
67+
`;
68+
69+
exports[`TabList structure : none accessibility option 1`] = `
70+
<div>
71+
<ul
72+
className="rc-dyn-tabs-tablist rc-dyn-tabs-ltr"
73+
>
74+
<li
75+
className="rc-dyn-tabs-tab rc-dyn-tabs-selected"
76+
onClick={[Function]}
77+
tab-id="1"
78+
tabIndex={0}
79+
>
80+
<button
81+
className="rc-dyn-tabs-title"
82+
tab-id="1"
83+
tabIndex={-1}
84+
title=""
85+
>
86+
tab1
87+
</button>
88+
<span
89+
className="rc-dyn-tabs-close"
90+
>
91+
×
92+
</span>
93+
</li>
94+
<li
95+
className="rc-dyn-tabs-tab"
96+
onClick={[Function]}
97+
tab-id="2"
98+
tabIndex={-1}
99+
>
100+
<button
101+
className="rc-dyn-tabs-title"
102+
tab-id="2"
103+
tabIndex={-1}
104+
title=""
105+
>
106+
tab2
107+
</button>
108+
<span
109+
className="rc-dyn-tabs-close"
110+
>
111+
×
112+
</span>
113+
</li>
114+
</ul>
115+
</div>
116+
`;
117+
118+
exports[`TabList structure : rtl option 1`] = `
119+
<div>
120+
<ul
121+
className="rc-dyn-tabs-tablist rc-dyn-tabs-rtl"
122+
role="tablist"
123+
>
124+
<li
125+
aria-controls="rc-dyn-tabs-p-1"
126+
aria-expanded={true}
127+
aria-labelledby="rc-dyn-tabs-l-1"
128+
aria-selected={true}
129+
className="rc-dyn-tabs-tab rc-dyn-tabs-selected"
130+
onClick={[Function]}
131+
role="tab"
132+
tab-id="1"
133+
tabIndex={0}
134+
>
135+
<button
136+
className="rc-dyn-tabs-title"
137+
id="rc-dyn-tabs-l-1"
138+
role="presentation"
139+
tab-id="1"
140+
tabIndex={-1}
141+
title=""
142+
>
143+
tab1
144+
</button>
145+
<span
146+
className="rc-dyn-tabs-close"
147+
role="presentation"
148+
>
149+
×
150+
</span>
151+
</li>
152+
<li
153+
aria-controls="rc-dyn-tabs-p-2"
154+
aria-expanded={false}
155+
aria-labelledby="rc-dyn-tabs-l-2"
156+
aria-selected={false}
157+
className="rc-dyn-tabs-tab"
158+
onClick={[Function]}
159+
role="tab"
160+
tab-id="2"
161+
tabIndex={-1}
162+
>
163+
<button
164+
className="rc-dyn-tabs-title"
165+
id="rc-dyn-tabs-l-2"
166+
role="presentation"
167+
tab-id="2"
168+
tabIndex={-1}
169+
title=""
170+
>
171+
tab2
172+
</button>
173+
<span
174+
className="rc-dyn-tabs-close"
175+
role="presentation"
176+
>
177+
×
178+
</span>
179+
</li>
180+
</ul>
181+
</div>
182+
`;

‎src/tabList/tabList.test.js

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
1-
describe("tablist classes", () => {
2-
test(`tablist classes : default`, () => {
3-
1+
import React from "react"
2+
import { unmountComponentAtNode } from "react-dom";
3+
import TabList from "./tabList.js";
4+
import renderer from 'react-test-renderer';
5+
import Api from '../utils/api/api.js';
6+
let container = document.createElement("div"), realUseContext;
7+
const getDefaultApi = () => ({
8+
tabs: [
9+
{ id: '1', title: 'tab1' },
10+
{ id: '2', title: 'tab2' },
11+
],
12+
selectedTabID: '1'
13+
});
14+
const setMockUseContext = (op = {}) => {
15+
const defaultOp = getDefaultApi();
16+
const instance = new (Api)({ options: Object.assign({}, defaultOp, op) });
17+
instance.openTabIDs = ['1', '2'];
18+
instance.selectedTabID = '1';
19+
React.useContext = jest.fn(() => instance);
20+
};
21+
beforeAll(() => {
22+
document.body.appendChild(container);
23+
realUseContext = React.useContext;
24+
});
25+
beforeEach(() => { });
26+
afterEach(() => {
27+
unmountComponentAtNode(container);
28+
container.innerHTML = "";
29+
React.useContext = realUseContext;
30+
});
31+
afterAll(() => {
32+
document.body.removeChild(container);
33+
container = null;
34+
});
35+
describe('TabList structure : ', () => {
36+
test('default options', () => {
37+
setMockUseContext();
38+
const tree = renderer
39+
.create(<div>
40+
<TabList></TabList>
41+
</div>)
42+
.toJSON();
43+
expect(tree).toMatchSnapshot();
44+
});
45+
test('rtl option', () => {
46+
setMockUseContext({ direction: 'rtl' });
47+
const tree = renderer
48+
.create(<div>
49+
<TabList></TabList>
50+
</div>)
51+
.toJSON();
52+
expect(tree).toMatchSnapshot();
53+
});
54+
test('none accessibility option', () => {
55+
setMockUseContext({ accessibility: false });
56+
const tree = renderer
57+
.create(<div>
58+
<TabList></TabList>
59+
</div>)
60+
.toJSON();
61+
expect(tree).toMatchSnapshot();
462
});
5-
});
63+
});
64+
65+

0 commit comments

Comments
 (0)