Skip to content

Commit dd336f5

Browse files
web-padawanweb-padawan
authored
test: update MSCB tests to use shared helpers for items (#9809)
1 parent c4a4303 commit dd336f5

File tree

5 files changed

+35
-32
lines changed

5 files changed

+35
-32
lines changed

‎packages/multi-select-combo-box/test/accessibility.test.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { sendKeys } from '@vaadin/test-runner-commands';
33
import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
44
import sinon from 'sinon';
55
import '../src/vaadin-multi-select-combo-box.js';
6+
import { getAllItems, getFirstItem } from './helpers.js';
67

78
describe('accessibility', () => {
89
let comboBox, inputElement;
@@ -102,7 +103,7 @@ describe('accessibility', () => {
102103
comboBox.selectedItems = ['Apple', 'Lemon'];
103104
comboBox.inputElement.click();
104105
scroller = comboBox.$.comboBox._scroller;
105-
items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
106+
items = getAllItems(comboBox);
106107
});
107108

108109
it('should set aria-multiselectable attribute on the scroller', () => {
@@ -157,7 +158,7 @@ describe('accessibility', () => {
157158
it('should announce when selecting an item', () => {
158159
inputElement.click();
159160

160-
const item = document.querySelector('vaadin-multi-select-combo-box-item');
161+
const item = getFirstItem(comboBox);
161162
item.click();
162163

163164
clock.tick(150);
@@ -169,7 +170,7 @@ describe('accessibility', () => {
169170
comboBox.selectedItems = [apple, banana, lemon];
170171
inputElement.click();
171172

172-
const item = document.querySelector('vaadin-multi-select-combo-box-item');
173+
const item = getFirstItem(comboBox);
173174
item.click();
174175

175176
clock.tick(150);

‎packages/multi-select-combo-box/test/basic.test.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import sinon from 'sinon';
55
import './multi-select-combo-box-test-styles.js';
66
import '../src/vaadin-multi-select-combo-box.js';
77
import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
8+
import { getFirstItem } from './helpers.js';
89

910
describe('basic', () => {
1011
let comboBox, internal, inputElement;
@@ -328,15 +329,15 @@ describe('basic', () => {
328329

329330
it('should clear input element value after clicking matching value', async () => {
330331
await sendKeys({ type: 'ora' });
331-
const item = document.querySelector('vaadin-multi-select-combo-box-item');
332+
const item = getFirstItem(comboBox);
332333
item.click();
333334
expect(internal.value).to.equal('');
334335
expect(inputElement.value).to.equal('');
335336
});
336337

337338
it('should clear filter property after clicking matching value', async () => {
338339
await sendKeys({ type: 'ora' });
339-
const item = document.querySelector('vaadin-multi-select-combo-box-item');
340+
const item = getFirstItem(comboBox);
340341
item.click();
341342
expect(comboBox.filter).to.equal('');
342343
});
@@ -442,7 +443,7 @@ describe('basic', () => {
442443
};
443444
comboBox.opened = true;
444445

445-
const item = document.querySelector('vaadin-multi-select-combo-box-item');
446+
const item = getFirstItem(comboBox);
446447
expect(item.textContent.trim()).to.equal('apple 0');
447448
});
448449

@@ -475,7 +476,7 @@ describe('basic', () => {
475476
};
476477
comboBox.opened = true;
477478

478-
const item = document.querySelector('vaadin-multi-select-combo-box-item');
479+
const item = getFirstItem(comboBox);
479480
expect(item.textContent).to.equal('APPLE');
480481

481482
comboBox.renderer = null;
@@ -486,7 +487,7 @@ describe('basic', () => {
486487
it('should clear the old content after assigning a new renderer', () => {
487488
comboBox.opened = true;
488489
comboBox.renderer = () => {};
489-
const item = document.querySelector('vaadin-multi-select-combo-box-item');
490+
const item = getFirstItem(comboBox);
490491
expect(item.textContent).to.equal('');
491492
});
492493
});

‎packages/multi-select-combo-box/test/lit-renderer-directives.test.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import '../src/vaadin-multi-select-combo-box.js';
55
import { html, render } from 'lit';
66
import { flushComboBox } from '@vaadin/combo-box/test/helpers.js';
77
import { multiSelectComboBoxRenderer } from '../lit.js';
8+
import { getFirstItem } from './helpers.js';
89

910
async function renderComboBox(container, { items }) {
1011
render(
@@ -44,15 +45,15 @@ describe('lit renderer directives', () => {
4445

4546
it('should render items with the renderer when the combo-box is opened', () => {
4647
comboBox.opened = true;
47-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
48-
expect(items[0].textContent).to.equal('Item');
48+
const item = getFirstItem(comboBox);
49+
expect(item.textContent).to.equal('Item');
4950
});
5051

5152
it('should re-render items when the combo-box is opened and a renderer dependency changes', async () => {
5253
comboBox.opened = true;
5354
await renderComboBox(container, { items: ['New Item'] });
54-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
55-
expect(items[0].textContent).to.equal('New Item');
55+
const item = getFirstItem(comboBox);
56+
expect(item.textContent).to.equal('New Item');
5657
});
5758
});
5859

‎packages/multi-select-combo-box/test/readonly.test.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { sendKeys } from '@vaadin/test-runner-commands';
33
import { aTimeout, fixtureSync, nextRender } from '@vaadin/testing-helpers';
44
import sinon from 'sinon';
55
import '../src/vaadin-multi-select-combo-box.js';
6-
import { getAsyncDataProvider } from './helpers.js';
6+
import { getAllItems, getAsyncDataProvider, getFirstItem } from './helpers.js';
77

88
describe('readonly', () => {
99
let comboBox, inputElement, internal;
@@ -78,20 +78,20 @@ describe('readonly', () => {
7878
it('should not set item focus-ring attribute on Arrow Down', async () => {
7979
await sendKeys({ down: 'ArrowDown' });
8080
await sendKeys({ down: 'ArrowDown' });
81-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
82-
expect(items[0].hasAttribute('focus-ring')).to.be.false;
81+
const item = getFirstItem(comboBox);
82+
expect(item.hasAttribute('focus-ring')).to.be.false;
8383
});
8484

8585
it('should not set item focus-ring attribute on Arrow Up', async () => {
8686
await sendKeys({ down: 'ArrowDown' });
8787
await sendKeys({ down: 'ArrowDown' });
88-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
88+
const items = getAllItems(comboBox);
8989
expect(items[1].hasAttribute('focus-ring')).to.be.false;
9090
});
9191

9292
it('should only render selected items in the dropdown when readonly', () => {
9393
inputElement.click();
94-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
94+
const items = getAllItems(comboBox);
9595
expect(items.length).to.equal(2);
9696
expect(items[0].textContent).to.equal('apple');
9797
expect(items[1].textContent).to.equal('orange');
@@ -100,7 +100,7 @@ describe('readonly', () => {
100100
it('should render regular items in the dropdown when readonly is off', () => {
101101
comboBox.readonly = false;
102102
inputElement.click();
103-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
103+
const items = getAllItems(comboBox);
104104
expect(items.length).to.equal(4);
105105
expect(items[0].textContent).to.equal('apple');
106106
expect(items[1].textContent).to.equal('banana');
@@ -112,28 +112,28 @@ describe('readonly', () => {
112112
comboBox.selectedItems = [];
113113
comboBox.selectedItems = ['lemon'];
114114
inputElement.click();
115-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
115+
const items = getAllItems(comboBox);
116116
expect(items.length).to.equal(1);
117117
expect(items[0].textContent).to.equal('lemon');
118118
});
119119

120120
it('should not set selected attribute on the dropdown items', () => {
121121
inputElement.click();
122-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
122+
const items = getAllItems(comboBox);
123123
expect(items[0].hasAttribute('selected')).to.be.false;
124124
expect(items[1].hasAttribute('selected')).to.be.false;
125125
});
126126

127127
it('should set readonly attribute on the dropdown items', () => {
128128
inputElement.click();
129-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
129+
const items = getAllItems(comboBox);
130130
expect(items[0].hasAttribute('readonly')).to.be.true;
131131
expect(items[1].hasAttribute('readonly')).to.be.true;
132132
});
133133

134134
it('should not un-select item on click when readonly', () => {
135135
inputElement.click();
136-
const item = document.querySelector('vaadin-multi-select-combo-box-item');
136+
const item = getFirstItem(comboBox);
137137
item.click();
138138
expect(comboBox.selectedItems.length).to.equal(2);
139139
});
@@ -180,7 +180,7 @@ describe('readonly', () => {
180180
inputElement.click();
181181
// Wait for the async data provider timeout
182182
await aTimeout(0);
183-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
183+
const items = getAllItems(comboBox);
184184
expect(items.length).to.equal(2);
185185
expect(items[0].textContent).to.equal('apple');
186186
expect(items[1].textContent).to.equal('orange');
@@ -191,7 +191,7 @@ describe('readonly', () => {
191191
inputElement.click();
192192
// Wait for the async data provider timeout
193193
await aTimeout(0);
194-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
194+
const items = getAllItems(comboBox);
195195
expect(items.length).to.equal(4);
196196
expect(items[0].textContent).to.equal('apple');
197197
expect(items[1].textContent).to.equal('banana');
@@ -204,7 +204,7 @@ describe('readonly', () => {
204204
// Wait for the async data provider timeout
205205
await aTimeout(0);
206206
comboBox.size = 4;
207-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
207+
const items = getAllItems(comboBox);
208208
expect(items.length).to.equal(2);
209209
expect(items[0].textContent).to.equal('apple');
210210
expect(items[1].textContent).to.equal('orange');
@@ -224,7 +224,7 @@ describe('readonly', () => {
224224
inputElement.click();
225225
// Wait for the async data provider timeout
226226
await aTimeout(0);
227-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
227+
const items = getAllItems(comboBox);
228228
expect(items.length).to.equal(2);
229229
expect(items[0].textContent).to.equal('apple');
230230
expect(items[1].textContent).to.equal('orange');
@@ -250,7 +250,7 @@ describe('readonly', () => {
250250
comboBox.inputElement.click();
251251
// Wait for the async data provider timeout
252252
await aTimeout(0);
253-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
253+
const items = getAllItems(comboBox);
254254
expect(items.length).to.equal(2);
255255
expect(items[0].textContent).to.equal('new item 1');
256256
expect(items[1].textContent).to.equal('new item 2');
@@ -270,7 +270,7 @@ describe('readonly', () => {
270270

271271
it('should only render selected items in the dropdown when readonly', () => {
272272
inputElement.click();
273-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
273+
const items = getAllItems(comboBox);
274274
expect(items.length).to.equal(2);
275275
expect(items[0].textContent).to.equal('apple');
276276
expect(items[1].textContent).to.equal('orange');
@@ -279,7 +279,7 @@ describe('readonly', () => {
279279
it('should render regular items in the dropdown when readonly is off', () => {
280280
comboBox.readonly = false;
281281
inputElement.click();
282-
const items = document.querySelectorAll('vaadin-multi-select-combo-box-item');
282+
const items = getAllItems(comboBox);
283283
expect(items.length).to.equal(4);
284284
expect(items[0].textContent).to.equal('apple');
285285
expect(items[1].textContent).to.equal('banana');

‎packages/multi-select-combo-box/test/selecting-items.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe('selecting items', () => {
4545

4646
it('should update selectedItems when selecting an item on click', async () => {
4747
await sendKeys({ down: 'ArrowDown' });
48-
const item = document.querySelector('vaadin-multi-select-combo-box-item');
48+
const item = getFirstItem(comboBox);
4949
item.click();
5050
expect(comboBox.selectedItems).to.deep.equal(['apple']);
5151
});
@@ -108,15 +108,15 @@ describe('selecting items', () => {
108108
await sendKeys({ down: 'ArrowDown' });
109109
await sendKeys({ down: 'ArrowDown' });
110110
await sendKeys({ down: 'Enter' });
111-
const item = document.querySelector('vaadin-multi-select-combo-box-item');
111+
const item = getFirstItem(comboBox);
112112
expect(item.hasAttribute('focused')).to.be.true;
113113
});
114114

115115
it('should keep overlay focused index when entering and committing', async () => {
116116
await sendKeys({ down: 'ArrowDown' });
117117
await sendKeys({ type: 'banana' });
118118
await sendKeys({ down: 'Enter' });
119-
const item = document.querySelectorAll('vaadin-multi-select-combo-box-item')[1];
119+
const item = getAllItems(comboBox)[1];
120120
expect(item.hasAttribute('focused')).to.be.true;
121121
});
122122

0 commit comments

Comments
 (0)