Skip to content

Commit

Permalink
test: extract data provider filtering tests (#7464)
Browse files Browse the repository at this point in the history
  • Loading branch information
vursen authored May 31, 2024
1 parent bfaac80 commit 878f9fa
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 98 deletions.
5 changes: 5 additions & 0 deletions packages/combo-box/test/data-provider-filtering-lit.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import './not-animated-styles.js';
import '@vaadin/text-field/vaadin-lit-text-field.js';
import '../src/vaadin-lit-combo-box-light.js';
import '../src/vaadin-lit-combo-box.js';
import './data-provider-filtering.common.js';
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import './not-animated-styles.js';
import '@vaadin/text-field/vaadin-text-field.js';
import '../vaadin-combo-box-light.js';
import '../vaadin-combo-box.js';
import './data-provider-filtering.common.js';
132 changes: 132 additions & 0 deletions packages/combo-box/test/data-provider-filtering.common.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import { expect } from '@esm-bundle/chai';
import { aTimeout, fixtureSync, nextRender } from '@vaadin/testing-helpers';
import sinon from 'sinon';
import { setInputValue } from './helpers.js';

const TEMPLATES = {
'vaadin-combo-box': `
<vaadin-combo-box></vaadin-combo-box>
`,
'vaadin-combo-box-light': `
<vaadin-combo-box-light>
<vaadin-text-field></vaadin-text-field>
</vaadin-combo-box-light>
`,
};

['vaadin-combo-box', 'vaadin-combo-box-light'].forEach((tag) => {
describe(`data provider filtering - ${tag}`, () => {
let comboBox;

describe('basic', () => {
beforeEach(async () => {
comboBox = fixtureSync(TEMPLATES[tag]);
await nextRender();

comboBox.dataProvider = sinon.spy(async (params, callback) => {
const items = ['Item 1', 'Item 2', 'Item 3'];
const filteredItems = items.filter((item) => item.includes(params.filter));
await aTimeout(0);
callback(filteredItems, filteredItems.length);
});
comboBox.opened = true;
await aTimeout(0);
});

it('should make request with empty filter when opened', () => {
const params = comboBox.dataProvider.lastCall.args[0];
expect(params.filter).to.equal('');
});

it('should make request with entered filter on filter change', () => {
comboBox.dataProvider.resetHistory();
setInputValue(comboBox, 'Item');
expect(comboBox.dataProvider).to.be.called;
const params = comboBox.dataProvider.lastCall.args[0];
expect(params.filter).to.equal('Item');
});

it('should make request with empty filter on value change', async () => {
setInputValue(comboBox, 'Item');
await aTimeout(0);
comboBox.dataProvider.resetHistory();
comboBox.value = 'Item 2';
const params = comboBox.dataProvider.lastCall.args[0];
expect(params.filter).to.equal('');
});

it('should make request with empty filter after partial filter & cancel & reopen', async () => {
setInputValue(comboBox, 'It');
await aTimeout(0);
comboBox.dataProvider.resetHistory();
comboBox.cancel();
comboBox.opened = true;
await aTimeout(0);
const params = comboBox.dataProvider.lastCall.args[0];
expect(params.filter).to.equal('');
});

it('should clear filter on value clear', async () => {
setInputValue(comboBox, 'Item');
await aTimeout(0);
comboBox.value = 'Item 1';
comboBox.value = '';
expect(comboBox.filter).to.equal('');
});

it('should clear filter on close', async () => {
setInputValue(comboBox, 'Item');
await aTimeout(0);
comboBox.opened = false;
expect(comboBox.filter).to.equal('');
});
});

describe('dropdown behaviour', () => {
let openedSpy;

beforeEach(async () => {
comboBox = fixtureSync(TEMPLATES[tag]);
await nextRender();

comboBox.dataProvider = sinon.spy((_params, callback) => {
const items = ['Item 1', 'Item 2', 'Item 3'];
const filteredItems = items.filter((item) => item.includes(comboBox.filter));
callback(filteredItems, filteredItems.length);
});
comboBox.opened = true;
comboBox.dataProvider.resetHistory();

openedSpy = sinon.spy();
comboBox.addEventListener('vaadin-combo-box-dropdown-opened', openedSpy);
});

it('should not toggle between opened and closed when filtering', () => {
// Filter for something that should return results
comboBox.filter = 'Item';
// Verify data provider has been called
expect(comboBox.dataProvider).to.be.calledOnce;
// Dropdown should not have been closed and re-opened
expect(openedSpy).to.be.not.called;
});

it('should not toggle between opened and closed when setting a value', () => {
// Filter for something that should return results
comboBox.filter = 'Item';
// Set a value
comboBox.value = 'Item 1';
// Dropdown should not have been closed and re-opened
expect(openedSpy).to.be.not.called;
});

it('should close when there are no items after filtering', () => {
// Filter for something that doesn't exist
comboBox.filter = 'doesnotexist';
// Verify data provider has been called
expect(comboBox.dataProvider).to.be.calledOnce;
// Dropdown should close
expect(comboBox.$.overlay.opened).to.be.false;
});
});
});
});
98 changes: 0 additions & 98 deletions packages/combo-box/test/data-provider.common.js
Original file line number Diff line number Diff line change
Expand Up @@ -221,45 +221,6 @@ const TEMPLATES = {
expect(pages).to.contain(2);
});

it('should request with empty filter', () => {
comboBox.dataProvider = spyDataProvider;
const params = spyDataProvider.lastCall.args[0];
expect(params.filter).to.equal('');
});

it('should request on filter change with user’s filter', () => {
comboBox.dataProvider = spyDataProvider;
spyDataProvider.resetHistory();
setInputValue(comboBox, 'item 1');
expect(spyDataProvider.called).to.be.true;
const params = spyDataProvider.lastCall.args[0];
expect(params.filter).to.equal('item 1');
});

it('should clear filter on value change', () => {
comboBox.dataProvider = spyDataProvider;
setInputValue(comboBox, 'item 1');
spyDataProvider.resetHistory();
comboBox.value = 'foo';
const params = spyDataProvider.lastCall.args[0];
expect(params.filter).to.equal('');
});

it('should clear filter on value clear', () => {
comboBox.dataProvider = dataProvider;
setInputValue(comboBox, 'item 1');
comboBox.value = 'item 1';
comboBox.value = '';
expect(comboBox.filter).to.equal('');
});

it('should clear filter on opened change', () => {
comboBox.dataProvider = dataProvider;
setInputValue(comboBox, 'item 1');
comboBox.opened = false;
expect(comboBox.filter).to.equal('');
});

it('should not request on value change', () => {
comboBox.dataProvider = spyDataProvider;
spyDataProvider.resetHistory();
Expand All @@ -286,16 +247,6 @@ const TEMPLATES = {
};
});

it('should request page after partial filter & cancel & reopen', () => {
comboBox.dataProvider = spyDataProvider;
setInputValue(comboBox, 'it');
spyDataProvider.resetHistory();
comboBox.cancel();
comboBox.opened = true;
const params = spyDataProvider.lastCall.args[0];
expect(params.filter).to.equal('');
});

it('should not request loaded page again', () => {
comboBox.dataProvider = spyDataProvider;
comboBox.open();
Expand Down Expand Up @@ -413,15 +364,6 @@ const TEMPLATES = {
expect(spyAsyncDataProvider.calledOnce).to.be.true;
});

it('should be invoked with correct filter parameter', async () => {
comboBox.dataProvider = spyAsyncDataProvider;
setInputValue(comboBox, '1');
// Wait for the async data provider to respond
await aTimeout(0);
expect(spyAsyncDataProvider.calledOnce).to.be.true;
expect(spyAsyncDataProvider.firstCall.args[0].filter).to.equal('1');
});

it('should be invoked on open with pre-defined size', () => {
comboBox.size = SIZE;
comboBox.dataProvider = spyAsyncDataProvider;
Expand Down Expand Up @@ -1176,45 +1118,5 @@ const TEMPLATES = {
expect(comboBox.value).to.equal('other value');
});
});

describe('dropdown behaviour when filtering', () => {
let openedSpy;

beforeEach(() => {
comboBox.dataProvider = spyDataProvider;
comboBox.opened = true;
spyDataProvider.resetHistory();

openedSpy = sinon.spy();
comboBox.addEventListener('vaadin-combo-box-dropdown-opened', openedSpy);
});

it('should not toggle between opened and closed when filtering', () => {
// Filter for something that should return results
comboBox.filter = 'item';
// Verify data provider has been called
expect(spyDataProvider.calledOnce).to.be.true;
// Dropdown should not have been closed and re-opened
expect(openedSpy.called).to.be.false;
});

it('should not toggle between opened and closed when setting a value', () => {
// Filter for something that should return results
comboBox.filter = 'item';
// Set a value
comboBox.value = 'item 1';
// Dropdown should not have been closed and re-opened
expect(openedSpy.called).to.be.false;
});

it('should close when there are no items', () => {
// Filter for something that doesn't exist
comboBox.filter = 'doesnotexist';
// Verify data provider has been called
expect(spyDataProvider.calledOnce).to.be.true;
// Dropdown should close
expect(comboBox.$.overlay.opened).to.be.false;
});
});
});
});

0 comments on commit 878f9fa

Please sign in to comment.