Skip to content

Commit 0fbbd9e

Browse files
dev-javascriptdev-javascript
committed
fix show-more-tabs.test.js
1 parent f204c7f commit 0fbbd9e

File tree

1 file changed

+175
-72
lines changed

1 file changed

+175
-72
lines changed

‎src/plugins/moreButtonPlugin/show-more-tabs/show-more-tabs.test.js

Lines changed: 175 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,21 @@ const ctx = new Ctx({
2323
* render the app
2424
* @param {boolean} snapshot - if true then returns the element
2525
* @param {Object} props - {ctx,openTabIDs,selectedTabID}
26-
* @param {Object} ins - ref.current
26+
* @param {Object} insProperties - ref.current
2727
* @param {Object} deps - { resizeDetectorIns, getInstance:(ctx, setHiddenTabIDs) => ins }
28+
* @param {Object} props2 - {ctx,openTabIDs,selectedTabID}
2829
*/
2930
let renderApp;
3031
beforeAll(() => {
3132
document.body.appendChild(container);
3233
});
3334
beforeEach(() => {
34-
renderApp = (snapshot, props = {}, api = {}, deps = {}) => {
35-
props.ins = props.ins || {};
35+
renderApp = (snapshot, props, insProperties = {}, deps = {}, props2) => {
36+
props = props || {
37+
ctx,
38+
openTabIDs: ['1', '2'],
39+
selectedTabID: '1',
40+
};
3641
const getInstance =
3742
deps.getInstance ||
3843
function (ctx, setHiddenTabIDs) {
@@ -45,7 +50,7 @@ beforeEach(() => {
4550
},
4651
ctx,
4752
}),
48-
api,
53+
insProperties,
4954
);
5055
};
5156
const resizeDetectorIns = deps.resizeDetectorIns || {};
@@ -55,6 +60,7 @@ beforeEach(() => {
5560
}
5661
return act(() => {
5762
render(<ShowMoreButton {...props}></ShowMoreButton>, container);
63+
props2 && render(<ShowMoreButton {...props2}></ShowMoreButton>, container);
5864
});
5965
};
6066
});
@@ -73,7 +79,7 @@ describe('BUTTON CONTAINER STRUCTURE : ', () => {
7379
true,
7480
{openTabIDs: ['1', '2'], selectedTabID: '1', ctx},
7581
{
76-
setEls: () => {},
82+
setResizer: () => {},
7783
installResizer: () => {},
7884
uninstallResizer: () => {},
7985
resize: () => {},
@@ -90,7 +96,7 @@ describe('resize method should be called when tabs are changed : ', () => {
9096
false,
9197
{openTabIDs: ['1', '2'], selectedTabID: '1', ctx},
9298
{
93-
setEls: () => {},
99+
setResizer: () => {},
94100
installResizer: () => {},
95101
uninstallResizer: () => {},
96102
resize,
@@ -101,129 +107,226 @@ describe('resize method should be called when tabs are changed : ', () => {
101107
test('resize method should not be called when refreshing tabs.', () => {
102108
const resize = jest.fn(() => {});
103109
renderApp(
110+
false,
104111
{
105-
onLoad: function () {
106-
this.refresh();
107-
},
112+
openTabIDs: ['1', '2'],
113+
selectedTabID: '1',
114+
ctx,
115+
},
116+
{
117+
setResizer: () => {},
118+
installResizer: () => {},
119+
uninstallResizer: () => {},
120+
resize,
108121
},
109122
undefined,
110-
undefined,
111-
{resize},
123+
{
124+
openTabIDs: ['1', '2'],
125+
selectedTabID: '1',
126+
ctx,
127+
},
112128
);
113129
expect(resize.mock.calls.length).toBe(1);
114130
});
115131
test('resize method should be called when switching tabs.', () => {
116132
const resize = jest.fn(() => {});
117133
renderApp(
134+
false,
118135
{
119-
onLoad: function () {
120-
this.select('2');
121-
},
136+
openTabIDs: ['1', '2'],
137+
selectedTabID: '1',
138+
ctx,
139+
},
140+
{
141+
setResizer: () => {},
142+
installResizer: () => {},
143+
uninstallResizer: () => {},
144+
resize,
122145
},
123146
undefined,
124-
undefined,
125-
{resize},
147+
{
148+
openTabIDs: ['1', '2'],
149+
selectedTabID: '2',
150+
ctx,
151+
},
126152
);
127153
expect(resize.mock.calls.length).toBe(2);
128154
});
129155
test('resize method should be called when opening a new tab.', () => {
130156
const resize = jest.fn(() => {});
131157
renderApp(
158+
false,
132159
{
133-
onLoad: function () {
134-
this.open({id: '3'});
135-
},
160+
openTabIDs: ['1', '2'],
161+
selectedTabID: '1',
162+
ctx,
163+
},
164+
{
165+
setResizer: () => {},
166+
installResizer: () => {},
167+
uninstallResizer: () => {},
168+
resize,
136169
},
137170
undefined,
138-
undefined,
139-
{resize},
171+
{
172+
openTabIDs: ['1', '2', '3'],
173+
selectedTabID: '1',
174+
ctx,
175+
},
140176
);
141177
expect(resize.mock.calls.length).toBe(2);
142178
});
143179
test('resize method should be called when closing a tab.', () => {
144180
const resize = jest.fn(() => {});
145-
let ready;
146181
renderApp(
147-
{},
182+
false,
183+
{
184+
openTabIDs: ['1', '2'],
185+
selectedTabID: '1',
186+
ctx,
187+
},
188+
{
189+
setResizer: () => {},
190+
installResizer: () => {},
191+
uninstallResizer: () => {},
192+
resize,
193+
},
148194
undefined,
149-
(_ready) => {
150-
ready = _ready;
195+
{
196+
openTabIDs: ['1'],
197+
selectedTabID: '1',
198+
ctx,
151199
},
152-
{resize},
153200
);
154-
act(() => {
155-
let ins;
156-
ready((_ins) => {
157-
ins = _ins;
158-
});
159-
ins.close('2', false);
160-
});
161201
expect(resize.mock.calls.length).toBe(2);
162202
});
163203
test('resize method should be called when sorting tabs.', () => {
164204
const resize = jest.fn(() => {});
165-
let ready;
166205
renderApp(
167-
{},
206+
false,
207+
{
208+
openTabIDs: ['1', '2'],
209+
selectedTabID: '1',
210+
ctx,
211+
},
212+
{
213+
setResizer: () => {},
214+
installResizer: () => {},
215+
uninstallResizer: () => {},
216+
resize,
217+
},
168218
undefined,
169-
(_ready) => {
170-
ready = _ready;
219+
{
220+
openTabIDs: ['2', '1'],
221+
selectedTabID: '1',
222+
ctx,
171223
},
172-
{resize},
173224
);
174-
act(() => {
175-
let ins;
176-
ready((_ins) => {
177-
ins = _ins;
178-
});
179-
ins.sort(['2', '1']);
180-
});
181225
expect(resize.mock.calls.length).toBe(2);
182226
});
183227
});
184228
describe('resize detector should be called correctly : ', () => {
185-
test('installResizer method should be called at mount.', () => {
229+
test('installResizer and uninstallResizer methods should be called at mount.', () => {
186230
const installResizer = jest.fn(() => {});
187-
renderApp({}, undefined, undefined, {installResizer});
188-
expect(installResizer.mock.calls.length).toBe(1);
189-
});
190-
test('uninstallResizer method should be called at unmount.', () => {
191231
const uninstallResizer = jest.fn(() => {});
192-
renderApp({}, undefined, undefined, {uninstallResizer});
193-
expect(uninstallResizer.mock.calls.length).toBe(0);
232+
renderApp(false, undefined, {
233+
setResizer: () => {},
234+
installResizer,
235+
uninstallResizer,
236+
resize: () => {},
237+
});
238+
expect(installResizer.mock.calls.length).toBe(1);
194239
act(() => {
195240
unmountComponentAtNode(container);
196241
});
197242
expect(uninstallResizer.mock.calls.length).toBe(1);
198243
});
199244
});
200245
describe('button component : ', () => {
201-
test('default button component should be rendered when moreButtonPlugin_buttonComponent option is not provided', () => {
202-
renderApp({});
203-
expect(document.getElementById('built-in-button') != null).toBe(true);
204-
});
205-
test('user button component should be rendered when moreButtonPlugin_buttonComponent option is provided', () => {
206-
renderApp({moreButtonPlugin_buttonComponent: () => <button id="user-button" />});
207-
expect(document.getElementById('built-in-button') != null).toBe(false);
208-
expect(document.getElementById('user-button') != null).toBe(true);
246+
test('button component should render moreButtonPlugin_buttonComponent option as a button', () => {
247+
renderApp(
248+
false,
249+
{
250+
openTabIDs: ['1', '2'],
251+
selectedTabID: '1',
252+
ctx,
253+
},
254+
{
255+
setResizer: () => {},
256+
installResizer: () => {},
257+
uninstallResizer: () => {},
258+
resize: () => {},
259+
},
260+
);
261+
expect(document.getElementById('user-more-button') == null).toBe(true);
262+
const moreButtonPlugin_buttonComponent = ctx.getOption('moreButtonPlugin_buttonComponent');
263+
ctx.setOption('moreButtonPlugin_buttonComponent', (props) => (
264+
<div {...props} id="user-more-button">
265+
{props.children}
266+
</div>
267+
));
268+
renderApp(
269+
false,
270+
{
271+
openTabIDs: ['1', '2'],
272+
selectedTabID: '1',
273+
ctx,
274+
},
275+
{
276+
setResizer: () => {},
277+
installResizer: () => {},
278+
uninstallResizer: () => {},
279+
resize: () => {},
280+
},
281+
);
282+
expect(document.getElementById('user-more-button') == null).toBe(false);
283+
ctx.setOption('moreButtonPlugin_buttonComponent', moreButtonPlugin_buttonComponent);
209284
});
210285
test('moreButtonPlugin_buttonComponent option should be a function component and not a React element', () => {
211-
renderApp({moreButtonPlugin_buttonComponent: () => <button id="user-button" />});
212-
expect(document.getElementById('user-button') != null).toBe(true);
213-
renderApp({moreButtonPlugin_buttonComponent: <button id="user-button-element" />});
214-
expect(document.getElementById('user-button-element') != null).toBe(false);
215-
expect(document.getElementById('built-in-button') != null).toBe(true);
286+
const moreButtonPlugin_buttonComponent = ctx.getOption('moreButtonPlugin_buttonComponent');
287+
ctx.setOption('moreButtonPlugin_buttonComponent', <div id="user-more-button"></div>);
288+
try {
289+
renderApp(
290+
false,
291+
{
292+
openTabIDs: ['1', '2'],
293+
selectedTabID: '1',
294+
ctx,
295+
},
296+
{
297+
setResizer: () => {},
298+
installResizer: () => {},
299+
uninstallResizer: () => {},
300+
resize: () => {},
301+
},
302+
);
303+
} catch (e) {
304+
expect(document.getElementById('user-more-button') == null).toBe(true);
305+
}
306+
ctx.setOption('moreButtonPlugin_buttonComponent', moreButtonPlugin_buttonComponent);
216307
});
217308
});
218309
describe('mounting : ', () => {
219-
test('at first the setEls method should be called then installResizer and then resize method', () => {
310+
test('at first the setResizer method should be called then installResizer and then resize method', () => {
220311
const installResizer = jest.fn(() => {});
221312
const resize = jest.fn(() => {});
222-
const setEls = jest.fn(() => {});
223-
const api = {installResizer, resize, setEls};
224-
renderApp({}, null, (ins) => {}, api);
225-
expect(api.setEls).toHaveBeenCalledBefore(api.installResizer);
226-
expect(api.installResizer).toHaveBeenCalledBefore(api.resize);
227-
expect(api.resize.mock.calls.length).toBe(1);
313+
const setResizer = jest.fn(() => {});
314+
renderApp(
315+
false,
316+
{
317+
openTabIDs: ['1', '2'],
318+
selectedTabID: '1',
319+
ctx,
320+
},
321+
{
322+
setResizer,
323+
installResizer,
324+
uninstallResizer: () => {},
325+
resize,
326+
},
327+
);
328+
expect(setResizer).toHaveBeenCalledBefore(installResizer);
329+
expect(installResizer).toHaveBeenCalledBefore(resize);
330+
expect(resize.mock.calls.length).toBe(1);
228331
});
229332
});

0 commit comments

Comments
 (0)