Skip to content

Commit 878f9fa

Browse files
authored
test: extract data provider filtering tests (#7464)
1 parent bfaac80 commit 878f9fa

File tree

4 files changed

+142
-98
lines changed

4 files changed

+142
-98
lines changed
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import './not-animated-styles.js';
2+
import '@vaadin/text-field/vaadin-lit-text-field.js';
3+
import '../src/vaadin-lit-combo-box-light.js';
4+
import '../src/vaadin-lit-combo-box.js';
5+
import './data-provider-filtering.common.js';
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import './not-animated-styles.js';
2+
import '@vaadin/text-field/vaadin-text-field.js';
3+
import '../vaadin-combo-box-light.js';
4+
import '../vaadin-combo-box.js';
5+
import './data-provider-filtering.common.js';
Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { expect } from '@esm-bundle/chai';
2+
import { aTimeout, fixtureSync, nextRender } from '@vaadin/testing-helpers';
3+
import sinon from 'sinon';
4+
import { setInputValue } from './helpers.js';
5+
6+
const TEMPLATES = {
7+
'vaadin-combo-box': `
8+
<vaadin-combo-box></vaadin-combo-box>
9+
`,
10+
'vaadin-combo-box-light': `
11+
<vaadin-combo-box-light>
12+
<vaadin-text-field></vaadin-text-field>
13+
</vaadin-combo-box-light>
14+
`,
15+
};
16+
17+
['vaadin-combo-box', 'vaadin-combo-box-light'].forEach((tag) => {
18+
describe(`data provider filtering - ${tag}`, () => {
19+
let comboBox;
20+
21+
describe('basic', () => {
22+
beforeEach(async () => {
23+
comboBox = fixtureSync(TEMPLATES[tag]);
24+
await nextRender();
25+
26+
comboBox.dataProvider = sinon.spy(async (params, callback) => {
27+
const items = ['Item 1', 'Item 2', 'Item 3'];
28+
const filteredItems = items.filter((item) => item.includes(params.filter));
29+
await aTimeout(0);
30+
callback(filteredItems, filteredItems.length);
31+
});
32+
comboBox.opened = true;
33+
await aTimeout(0);
34+
});
35+
36+
it('should make request with empty filter when opened', () => {
37+
const params = comboBox.dataProvider.lastCall.args[0];
38+
expect(params.filter).to.equal('');
39+
});
40+
41+
it('should make request with entered filter on filter change', () => {
42+
comboBox.dataProvider.resetHistory();
43+
setInputValue(comboBox, 'Item');
44+
expect(comboBox.dataProvider).to.be.called;
45+
const params = comboBox.dataProvider.lastCall.args[0];
46+
expect(params.filter).to.equal('Item');
47+
});
48+
49+
it('should make request with empty filter on value change', async () => {
50+
setInputValue(comboBox, 'Item');
51+
await aTimeout(0);
52+
comboBox.dataProvider.resetHistory();
53+
comboBox.value = 'Item 2';
54+
const params = comboBox.dataProvider.lastCall.args[0];
55+
expect(params.filter).to.equal('');
56+
});
57+
58+
it('should make request with empty filter after partial filter & cancel & reopen', async () => {
59+
setInputValue(comboBox, 'It');
60+
await aTimeout(0);
61+
comboBox.dataProvider.resetHistory();
62+
comboBox.cancel();
63+
comboBox.opened = true;
64+
await aTimeout(0);
65+
const params = comboBox.dataProvider.lastCall.args[0];
66+
expect(params.filter).to.equal('');
67+
});
68+
69+
it('should clear filter on value clear', async () => {
70+
setInputValue(comboBox, 'Item');
71+
await aTimeout(0);
72+
comboBox.value = 'Item 1';
73+
comboBox.value = '';
74+
expect(comboBox.filter).to.equal('');
75+
});
76+
77+
it('should clear filter on close', async () => {
78+
setInputValue(comboBox, 'Item');
79+
await aTimeout(0);
80+
comboBox.opened = false;
81+
expect(comboBox.filter).to.equal('');
82+
});
83+
});
84+
85+
describe('dropdown behaviour', () => {
86+
let openedSpy;
87+
88+
beforeEach(async () => {
89+
comboBox = fixtureSync(TEMPLATES[tag]);
90+
await nextRender();
91+
92+
comboBox.dataProvider = sinon.spy((_params, callback) => {
93+
const items = ['Item 1', 'Item 2', 'Item 3'];
94+
const filteredItems = items.filter((item) => item.includes(comboBox.filter));
95+
callback(filteredItems, filteredItems.length);
96+
});
97+
comboBox.opened = true;
98+
comboBox.dataProvider.resetHistory();
99+
100+
openedSpy = sinon.spy();
101+
comboBox.addEventListener('vaadin-combo-box-dropdown-opened', openedSpy);
102+
});
103+
104+
it('should not toggle between opened and closed when filtering', () => {
105+
// Filter for something that should return results
106+
comboBox.filter = 'Item';
107+
// Verify data provider has been called
108+
expect(comboBox.dataProvider).to.be.calledOnce;
109+
// Dropdown should not have been closed and re-opened
110+
expect(openedSpy).to.be.not.called;
111+
});
112+
113+
it('should not toggle between opened and closed when setting a value', () => {
114+
// Filter for something that should return results
115+
comboBox.filter = 'Item';
116+
// Set a value
117+
comboBox.value = 'Item 1';
118+
// Dropdown should not have been closed and re-opened
119+
expect(openedSpy).to.be.not.called;
120+
});
121+
122+
it('should close when there are no items after filtering', () => {
123+
// Filter for something that doesn't exist
124+
comboBox.filter = 'doesnotexist';
125+
// Verify data provider has been called
126+
expect(comboBox.dataProvider).to.be.calledOnce;
127+
// Dropdown should close
128+
expect(comboBox.$.overlay.opened).to.be.false;
129+
});
130+
});
131+
});
132+
});

packages/combo-box/test/data-provider.common.js

Lines changed: 0 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -221,45 +221,6 @@ const TEMPLATES = {
221221
expect(pages).to.contain(2);
222222
});
223223

224-
it('should request with empty filter', () => {
225-
comboBox.dataProvider = spyDataProvider;
226-
const params = spyDataProvider.lastCall.args[0];
227-
expect(params.filter).to.equal('');
228-
});
229-
230-
it('should request on filter change with user’s filter', () => {
231-
comboBox.dataProvider = spyDataProvider;
232-
spyDataProvider.resetHistory();
233-
setInputValue(comboBox, 'item 1');
234-
expect(spyDataProvider.called).to.be.true;
235-
const params = spyDataProvider.lastCall.args[0];
236-
expect(params.filter).to.equal('item 1');
237-
});
238-
239-
it('should clear filter on value change', () => {
240-
comboBox.dataProvider = spyDataProvider;
241-
setInputValue(comboBox, 'item 1');
242-
spyDataProvider.resetHistory();
243-
comboBox.value = 'foo';
244-
const params = spyDataProvider.lastCall.args[0];
245-
expect(params.filter).to.equal('');
246-
});
247-
248-
it('should clear filter on value clear', () => {
249-
comboBox.dataProvider = dataProvider;
250-
setInputValue(comboBox, 'item 1');
251-
comboBox.value = 'item 1';
252-
comboBox.value = '';
253-
expect(comboBox.filter).to.equal('');
254-
});
255-
256-
it('should clear filter on opened change', () => {
257-
comboBox.dataProvider = dataProvider;
258-
setInputValue(comboBox, 'item 1');
259-
comboBox.opened = false;
260-
expect(comboBox.filter).to.equal('');
261-
});
262-
263224
it('should not request on value change', () => {
264225
comboBox.dataProvider = spyDataProvider;
265226
spyDataProvider.resetHistory();
@@ -286,16 +247,6 @@ const TEMPLATES = {
286247
};
287248
});
288249

289-
it('should request page after partial filter & cancel & reopen', () => {
290-
comboBox.dataProvider = spyDataProvider;
291-
setInputValue(comboBox, 'it');
292-
spyDataProvider.resetHistory();
293-
comboBox.cancel();
294-
comboBox.opened = true;
295-
const params = spyDataProvider.lastCall.args[0];
296-
expect(params.filter).to.equal('');
297-
});
298-
299250
it('should not request loaded page again', () => {
300251
comboBox.dataProvider = spyDataProvider;
301252
comboBox.open();
@@ -413,15 +364,6 @@ const TEMPLATES = {
413364
expect(spyAsyncDataProvider.calledOnce).to.be.true;
414365
});
415366

416-
it('should be invoked with correct filter parameter', async () => {
417-
comboBox.dataProvider = spyAsyncDataProvider;
418-
setInputValue(comboBox, '1');
419-
// Wait for the async data provider to respond
420-
await aTimeout(0);
421-
expect(spyAsyncDataProvider.calledOnce).to.be.true;
422-
expect(spyAsyncDataProvider.firstCall.args[0].filter).to.equal('1');
423-
});
424-
425367
it('should be invoked on open with pre-defined size', () => {
426368
comboBox.size = SIZE;
427369
comboBox.dataProvider = spyAsyncDataProvider;
@@ -1176,45 +1118,5 @@ const TEMPLATES = {
11761118
expect(comboBox.value).to.equal('other value');
11771119
});
11781120
});
1179-
1180-
describe('dropdown behaviour when filtering', () => {
1181-
let openedSpy;
1182-
1183-
beforeEach(() => {
1184-
comboBox.dataProvider = spyDataProvider;
1185-
comboBox.opened = true;
1186-
spyDataProvider.resetHistory();
1187-
1188-
openedSpy = sinon.spy();
1189-
comboBox.addEventListener('vaadin-combo-box-dropdown-opened', openedSpy);
1190-
});
1191-
1192-
it('should not toggle between opened and closed when filtering', () => {
1193-
// Filter for something that should return results
1194-
comboBox.filter = 'item';
1195-
// Verify data provider has been called
1196-
expect(spyDataProvider.calledOnce).to.be.true;
1197-
// Dropdown should not have been closed and re-opened
1198-
expect(openedSpy.called).to.be.false;
1199-
});
1200-
1201-
it('should not toggle between opened and closed when setting a value', () => {
1202-
// Filter for something that should return results
1203-
comboBox.filter = 'item';
1204-
// Set a value
1205-
comboBox.value = 'item 1';
1206-
// Dropdown should not have been closed and re-opened
1207-
expect(openedSpy.called).to.be.false;
1208-
});
1209-
1210-
it('should close when there are no items', () => {
1211-
// Filter for something that doesn't exist
1212-
comboBox.filter = 'doesnotexist';
1213-
// Verify data provider has been called
1214-
expect(spyDataProvider.calledOnce).to.be.true;
1215-
// Dropdown should close
1216-
expect(comboBox.$.overlay.opened).to.be.false;
1217-
});
1218-
});
12191121
});
12201122
});

0 commit comments

Comments
 (0)