Skip to content

Commit c3a0bb1

Browse files
dev-javascriptdev-javascript
committed
update tab.test.js : test custom tab component
1 parent d5aef83 commit c3a0bb1

File tree

1 file changed

+152
-116
lines changed

1 file changed

+152
-116
lines changed

‎src/tab/tab.test.js‎

Lines changed: 152 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,19 @@ import Tab from "./tab";
44
import { act } from "react-dom/test-utils";
55
import renderer from 'react-test-renderer';
66
import DefaultTabInner from './defaulTabInner.js';
7+
import Api from '../utils/api/api.js';
78
let container = document.createElement("div"), realUseContext;
89
const getDefaultApi = () => ({
9-
getTab: jest.fn((id) => ({
10-
title: "",
11-
tooltip: "",
12-
panelComponent: null,
13-
closable: true,
14-
iconClass: "",
15-
disable: false,
16-
id: 1
17-
})),
18-
eventHandlerFactory: jest.fn(({ e, id }) => { }),
19-
getOption: jest.fn(opName => DefaultTabInner),
20-
userProxy: {},
21-
optionsManager: {
22-
options: {
23-
accessibility: true, direction: 'ltr'
24-
},
25-
setting: {
26-
tabClass: 'rc-dyn-tabs-tab',
27-
titleClass: 'rc-dyn-tabs-title',
28-
iconClass: 'rc-dyn-tabs-icon',
29-
selectedClass: 'rc-dyn-tabs-selected',
30-
closeClass: 'rc-dyn-tabs-close',
31-
disableClass: 'rc-dyn-tabs-disable',
32-
panelIdTemplate: jest.fn(id => `rc-dyn-tabs-p-${id}`),
33-
ariaLabelledbyIdTemplate: jest.fn(id => `rc-dyn-tabs-l-${id}`)
34-
}
35-
}
36-
})
37-
, setMockUseContext = (api) => {
38-
React.useContext = jest.fn(() => Object.assign({}, getDefaultApi(), api || {}));
39-
};
10+
tabs: [
11+
{ id: '1', title: 'tab1', tooltip: 'tab1 tootltip', closable: false },
12+
{ id: '2', title: 'tab2', iconClass: 'ui-icon ui-icon-disk' },
13+
{ id: '3', title: 'tab3', disable: true },
14+
{ id: '4', title: 'tab4', panelComponent: props => <div>tab4</div> }
15+
]
16+
});
17+
const setMockUseContext = (op = {}) => {
18+
React.useContext = jest.fn(() => new (Api)({ options: Object.assign({}, getDefaultApi(), op) }));
19+
};
4020
beforeAll(() => {
4121
document.body.appendChild(container);
4222
realUseContext = React.useContext;
@@ -55,7 +35,25 @@ afterAll(() => {
5535
});
5636
describe('tab structure with default options : ', () => {
5737
test('default tab data', () => {
58-
setMockUseContext();
38+
setMockUseContext({
39+
tabs: [{
40+
title: "",
41+
tooltip: "",
42+
panelComponent: null,
43+
closable: true,
44+
iconClass: "",
45+
disable: false,
46+
id: '1'
47+
}, {
48+
title: "",
49+
tooltip: "",
50+
panelComponent: null,
51+
closable: true,
52+
iconClass: "",
53+
disable: false,
54+
id: '2'
55+
}]
56+
});
5957
const tree = renderer
6058
.create(<div>
6159
<Tab id="1" selectedTabID="1"></Tab>
@@ -66,15 +64,26 @@ describe('tab structure with default options : ', () => {
6664
});
6765
test('none closable tab', () => {
6866
setMockUseContext({
69-
getTab: jest.fn((id) => ({
70-
title: "",
71-
tooltip: "",
72-
panelComponent: null,
73-
closable: false,
74-
iconClass: "",
75-
disable: false,
76-
id: 1
77-
}))
67+
tabs: [
68+
{
69+
title: "",
70+
tooltip: "",
71+
panelComponent: null,
72+
closable: false,
73+
iconClass: "",
74+
disable: false,
75+
id: '1'
76+
},
77+
{
78+
title: "",
79+
tooltip: "",
80+
panelComponent: null,
81+
closable: false,
82+
iconClass: "",
83+
disable: false,
84+
id: '2'
85+
}
86+
]
7887
});
7988
const tree = renderer
8089
.create(<div>
@@ -86,15 +95,23 @@ describe('tab structure with default options : ', () => {
8695
});
8796
test('disabled tab', () => {
8897
setMockUseContext({
89-
getTab: jest.fn((id) => ({
98+
tabs: [{
9099
title: "",
91100
tooltip: "",
92101
panelComponent: null,
93102
closable: true,
94103
iconClass: "",
95104
disable: true,
96-
id: 1
97-
}))
105+
id: '1'
106+
}, {
107+
title: "",
108+
tooltip: "",
109+
panelComponent: null,
110+
closable: true,
111+
iconClass: "",
112+
disable: true,
113+
id: '2'
114+
}]
98115
});
99116
const tree = renderer
100117
.create(<div>
@@ -106,15 +123,23 @@ describe('tab structure with default options : ', () => {
106123
});
107124
test('tab with provided tooltip and iconClass', () => {
108125
setMockUseContext({
109-
getTab: jest.fn((id) => ({
126+
tabs: [{
127+
title: "tab title",
128+
tooltip: "tab tooltip",
129+
panelComponent: null,
130+
closable: true,
131+
iconClass: "ui-icon ui-icon-heart",
132+
disable: false,
133+
id: '1'
134+
}, {
110135
title: "tab title",
111136
tooltip: "tab tooltip",
112137
panelComponent: null,
113138
closable: true,
114139
iconClass: "ui-icon ui-icon-heart",
115140
disable: false,
116-
id: 1
117-
}))
141+
id: '2'
142+
}]
118143
});
119144
const tree = renderer
120145
.create(<div>
@@ -128,21 +153,24 @@ describe('tab structure with default options : ', () => {
128153
describe('tab structure with rtl and none accessibility options : ', () => {
129154
test('default tab data', () => {
130155
setMockUseContext({
131-
optionsManager: {
132-
options: {
133-
accessibility: false, direction: 'rtl'
134-
},
135-
setting: {
136-
tabClass: 'rc-dyn-tabs-tab',
137-
titleClass: 'rc-dyn-tabs-title',
138-
iconClass: 'rc-dyn-tabs-icon',
139-
selectedClass: 'rc-dyn-tabs-selected',
140-
closeClass: 'rc-dyn-tabs-close',
141-
disableClass: 'rc-dyn-tabs-disable',
142-
panelIdTemplate: jest.fn(id => `rc-dyn-tabs-p-${id}`),
143-
ariaLabelledbyIdTemplate: jest.fn(id => `rc-dyn-tabs-l-${id}`)
144-
}
145-
}
156+
accessibility: false, direction: 'rtl',
157+
tabs: [{
158+
title: "",
159+
tooltip: "",
160+
panelComponent: null,
161+
closable: true,
162+
iconClass: "",
163+
disable: false,
164+
id: '1'
165+
}, {
166+
title: "",
167+
tooltip: "",
168+
panelComponent: null,
169+
closable: true,
170+
iconClass: "",
171+
disable: false,
172+
id: '2'
173+
}]
146174
});
147175
const tree = renderer
148176
.create(<div>
@@ -154,30 +182,24 @@ describe('tab structure with rtl and none accessibility options : ', () => {
154182
});
155183
test('none closable tab', () => {
156184
setMockUseContext({
157-
optionsManager: {
158-
options: {
159-
accessibility: false, direction: 'rtl'
160-
},
161-
setting: {
162-
tabClass: 'rc-dyn-tabs-tab',
163-
titleClass: 'rc-dyn-tabs-title',
164-
iconClass: 'rc-dyn-tabs-icon',
165-
selectedClass: 'rc-dyn-tabs-selected',
166-
closeClass: 'rc-dyn-tabs-close',
167-
disableClass: 'rc-dyn-tabs-disable',
168-
panelIdTemplate: jest.fn(id => `rc-dyn-tabs-p-${id}`),
169-
ariaLabelledbyIdTemplate: jest.fn(id => `rc-dyn-tabs-l-${id}`)
170-
}
171-
},
172-
getTab: jest.fn((id) => ({
185+
accessibility: false, direction: 'rtl',
186+
tabs: [{
187+
title: "",
188+
tooltip: "",
189+
panelComponent: null,
190+
closable: false,
191+
iconClass: "",
192+
disable: false,
193+
id: '1'
194+
}, {
173195
title: "",
174196
tooltip: "",
175197
panelComponent: null,
176198
closable: false,
177199
iconClass: "",
178200
disable: false,
179-
id: 1
180-
}))
201+
id: '2'
202+
}]
181203
});
182204
const tree = renderer
183205
.create(<div>
@@ -189,30 +211,24 @@ describe('tab structure with rtl and none accessibility options : ', () => {
189211
});
190212
test('disabled tab', () => {
191213
setMockUseContext({
192-
optionsManager: {
193-
options: {
194-
accessibility: false, direction: 'rtl'
195-
},
196-
setting: {
197-
tabClass: 'rc-dyn-tabs-tab',
198-
titleClass: 'rc-dyn-tabs-title',
199-
iconClass: 'rc-dyn-tabs-icon',
200-
selectedClass: 'rc-dyn-tabs-selected',
201-
closeClass: 'rc-dyn-tabs-close',
202-
disableClass: 'rc-dyn-tabs-disable',
203-
panelIdTemplate: jest.fn(id => `rc-dyn-tabs-p-${id}`),
204-
ariaLabelledbyIdTemplate: jest.fn(id => `rc-dyn-tabs-l-${id}`)
205-
}
206-
},
207-
getTab: jest.fn((id) => ({
214+
accessibility: false, direction: 'rtl',
215+
tabs: [{
208216
title: "",
209217
tooltip: "",
210218
panelComponent: null,
211219
closable: true,
212220
iconClass: "",
213221
disable: true,
214-
id: 1
215-
}))
222+
id: '1'
223+
}, {
224+
title: "",
225+
tooltip: "",
226+
panelComponent: null,
227+
closable: true,
228+
iconClass: "",
229+
disable: true,
230+
id: '2'
231+
}]
216232
});
217233
const tree = renderer
218234
.create(<div>
@@ -224,30 +240,24 @@ describe('tab structure with rtl and none accessibility options : ', () => {
224240
});
225241
test('tab with provided tooltip and iconClass', () => {
226242
setMockUseContext({
227-
optionsManager: {
228-
options: {
229-
accessibility: false, direction: 'rtl'
230-
},
231-
setting: {
232-
tabClass: 'rc-dyn-tabs-tab',
233-
titleClass: 'rc-dyn-tabs-title',
234-
iconClass: 'rc-dyn-tabs-icon',
235-
selectedClass: 'rc-dyn-tabs-selected',
236-
closeClass: 'rc-dyn-tabs-close',
237-
disableClass: 'rc-dyn-tabs-disable',
238-
panelIdTemplate: jest.fn(id => `rc-dyn-tabs-p-${id}`),
239-
ariaLabelledbyIdTemplate: jest.fn(id => `rc-dyn-tabs-l-${id}`)
240-
}
241-
},
242-
getTab: jest.fn((id) => ({
243+
accessibility: false, direction: 'rtl',
244+
tabs: [{
243245
title: "tab title",
244246
tooltip: "tab tooltip",
245247
panelComponent: null,
246248
closable: true,
247249
iconClass: "ui-icon ui-icon-heart",
248250
disable: false,
249-
id: 1
250-
}))
251+
id: '1'
252+
}, {
253+
title: "tab title",
254+
tooltip: "tab tooltip",
255+
panelComponent: null,
256+
closable: true,
257+
iconClass: "ui-icon ui-icon-heart",
258+
disable: false,
259+
id: '2'
260+
}]
251261
});
252262
const tree = renderer
253263
.create(<div>
@@ -258,5 +268,31 @@ describe('tab structure with rtl and none accessibility options : ', () => {
258268
expect(tree).toMatchSnapshot();
259269
});
260270
});
271+
describe('tab structure with custom tab component : ', () => {
272+
test('default options', () => {
273+
setMockUseContext({ tabComponent: DefaultTabInner });
274+
const tree = renderer
275+
.create(<div>
276+
<Tab id="1" selectedTabID="1"></Tab>
277+
<Tab id="2" selectedTabID="1"></Tab>
278+
<Tab id="3" selectedTabID="1"></Tab>
279+
<Tab id="4" selectedTabID="1"></Tab>
280+
</div>)
281+
.toJSON();
282+
expect(tree).toMatchSnapshot();
283+
});
284+
test('rtl and none accessibility options', () => {
285+
setMockUseContext({ tabComponent: DefaultTabInner, direction: 'rtl', accessibility: false });
286+
const tree = renderer
287+
.create(<div>
288+
<Tab id="1" selectedTabID="1"></Tab>
289+
<Tab id="2" selectedTabID="1"></Tab>
290+
<Tab id="3" selectedTabID="1"></Tab>
291+
<Tab id="4" selectedTabID="1"></Tab>
292+
</div>)
293+
.toJSON();
294+
expect(tree).toMatchSnapshot();
295+
});
296+
});
261297

262298

0 commit comments

Comments
 (0)