Skip to content

Commit f845cfc

Browse files
benderabendera
committed
Fix tests
1 parent 08f72a0 commit f845cfc

4 files changed

Lines changed: 76 additions & 137 deletions

File tree

‎src/includes/vscode-select/OptionListController.ts‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,20 @@ export class OptionListController implements ReactiveController {
103103
}
104104
}
105105

106+
set multiSelectValue(newValue: string[]) {
107+
const valueList = (newValue as string[])
108+
.map((v) => this._indexByValue.get(v))
109+
.filter((v) => v !== undefined);
110+
111+
this._selectedIndexes = new Set(valueList);
112+
}
113+
114+
get multiSelectValue(): string[] {
115+
return this._selectedIndexes.size > 0
116+
? Array.from(this._selectedIndexes).map((v) => this._options[v].value)
117+
: [];
118+
}
119+
106120
get filterPattern() {
107121
return this._filterPattern;
108122
}
@@ -242,6 +256,17 @@ export class OptionListController implements ReactiveController {
242256
}
243257
}
244258

259+
toggleOptionSelected(optIndex: number) {
260+
const checked = this._selectedIndexes.has(optIndex);
261+
this._options[optIndex].selected = !this._options[optIndex].selected;
262+
263+
if (checked) {
264+
this._selectedIndexes.delete(optIndex);
265+
} else {
266+
this._selectedIndexes.add(optIndex);
267+
}
268+
}
269+
245270
getActiveOption(): InternalOption | null {
246271
return this._options[this._activeIndex] ?? null;
247272
}
@@ -384,9 +409,6 @@ export class OptionListController implements ReactiveController {
384409
this._options.forEach((_, i) => {
385410
this._options[i].visible = true;
386411
});
387-
388-
this._host.requestUpdate();
389-
return;
390412
}
391413

392414
let filteredListNextIndex = -1;

‎src/vscode-multi-select/vscode-multi-select.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ describe('vscode-multi-select', () => {
249249
const el = await fixture<VscodeMultiSelect>(
250250
html`<vscode-multi-select></vscode-multi-select>`
251251
);
252-
el.value = 'dolor';
252+
el.value = ['dolor'];
253253
const op1 = document.createElement('vscode-option');
254254
const op2 = document.createElement('vscode-option');
255255
const op3 = document.createElement('vscode-option');

‎src/vscode-multi-select/vscode-multi-select.ts‎

Lines changed: 24 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -69,45 +69,17 @@ export class VscodeMultiSelect
6969

7070
@property({type: Array, attribute: false})
7171
set selectedIndexes(val: number[]) {
72-
const newIndexes: number[] = [];
73-
74-
val.forEach((v) => {
75-
if (typeof this._options[v] !== 'undefined') {
76-
if (!newIndexes.includes(v)) {
77-
this._options[v].selected = true;
78-
newIndexes.push(v);
79-
}
80-
}
81-
});
82-
83-
this._selectedIndexes = newIndexes;
72+
this._opts.selectedIndexes = val;
8473
}
8574
get selectedIndexes(): number[] {
86-
return this._selectedIndexes;
75+
return this._opts.selectedIndexes;
8776
}
8877

8978
@property({type: Array})
90-
set value(val: string[] | string) {
91-
const sanitizedVal = Array.isArray(val)
92-
? val.map((v) => String(v))
93-
: [String(val)];
94-
this._values = [];
95-
96-
this._selectedIndexes.forEach((i) => {
97-
this._options[i].selected = false;
98-
});
99-
100-
this._selectedIndexes = [];
101-
102-
sanitizedVal.forEach((v) => {
103-
if (typeof this._valueOptionIndexMap[v] === 'number') {
104-
this._selectedIndexes.push(this._valueOptionIndexMap[v]);
105-
this._options[this._valueOptionIndexMap[v]].selected = true;
106-
this._values.push(v);
107-
}
108-
});
79+
set value(val: string[]) {
80+
this._opts.multiSelectValue = val;
10981

110-
if (this._selectedIndexes.length > 0) {
82+
if (this._opts.selectedIndexes.length > 0) {
11183
this._requestedValueToSetLater = [];
11284
} else {
11385
this._requestedValueToSetLater = Array.isArray(val) ? val : [val];
@@ -117,7 +89,7 @@ export class VscodeMultiSelect
11789
this._manageRequired();
11890
}
11991
get value(): string[] {
120-
return this._values;
92+
return this._opts.multiSelectValue;
12193
}
12294

12395
get form() {
@@ -202,8 +174,8 @@ export class VscodeMultiSelect
202174
this.dispatchEvent(
203175
new CustomEvent('vsc-change', {
204176
detail: {
205-
selectedIndexes: this._selectedIndexes,
206-
value: this._values,
177+
selectedIndexes: this._opts.selectedIndexes,
178+
value: this._opts.multiSelectValue,
207179
},
208180
})
209181
);
@@ -270,15 +242,26 @@ export class VscodeMultiSelect
270242
super._onSlotChange();
271243

272244
if (this._requestedValueToSetLater.length > 0) {
273-
this.options.forEach((o, i) => {
245+
console.log('aa', this._opts.value, this._requestedValueToSetLater);
246+
247+
const prevValue = this._opts.value as string[];
248+
249+
this._opts.value = [
250+
...this._opts.value,
251+
...this._requestedValueToSetLater,
252+
];
253+
254+
console.log(this._opts.value);
255+
256+
/* this.options.forEach((o, i) => {
274257
if (this._requestedValueToSetLater.includes(o.value)) {
275258
this._selectedIndexes.push(i);
276259
this._values.push(o.value);
277260
this._options[i].selected = true;
278261
this._requestedValueToSetLater =
279262
this._requestedValueToSetLater.filter((v) => v !== o.value);
280263
}
281-
});
264+
}); */
282265
}
283266
}
284267

@@ -307,23 +290,7 @@ export class VscodeMultiSelect
307290

308291
const index = Number((optEl as HTMLElement).dataset.index);
309292

310-
if (this._options[index]) {
311-
if (this._options[index].disabled) {
312-
return;
313-
}
314-
315-
this._options[index].selected = !this._options[index].selected;
316-
}
317-
318-
this._selectedIndexes = [];
319-
this._values = [];
320-
321-
this._options.forEach((op) => {
322-
if (op.selected) {
323-
this._selectedIndexes.push(op.index);
324-
this._values.push(op.value);
325-
}
326-
});
293+
this._opts.toggleOptionSelected(index);
327294

328295
this._setFormValue();
329296
this._manageRequired();
@@ -348,15 +315,15 @@ export class VscodeMultiSelect
348315
}
349316

350317
private _onMultiDeselectAllClick(): void {
351-
this._selectedIndexes = [];
318+
this._opts.selectedIndexes = [];
352319
this._values = [];
353320
this._options = this._options.map((op) => ({...op, selected: false}));
354321
this._manageRequired();
355322
this._dispatchChangeEvent();
356323
}
357324

358325
private _onMultiSelectAllClick(): void {
359-
this._selectedIndexes = [];
326+
this._opts.selectedIndexes = [];
360327
this._values = [];
361328
this._options = this._options.map((op) => ({...op, selected: true}));
362329
this._options.forEach((op, index) => {

‎src/vscode-single-select/vscode-single-select.test.ts‎

Lines changed: 26 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ describe('vscode-single-select', () => {
271271

272272
//#region keyboard interactions
273273

274-
it('the value should be changed when the arrow down key pressed while the dropdown is closed', async () => {
274+
it('the dropdown should be opened when the arrow down key pressed while the dropdown is closed', async () => {
275275
const el = (await fixture(html`
276276
<vscode-single-select>
277277
<vscode-option selected>Lorem</vscode-option>
@@ -280,27 +280,15 @@ describe('vscode-single-select', () => {
280280
</vscode-single-select>
281281
`)) as VscodeSingleSelect;
282282

283-
const spy = sinon.spy(el, 'dispatchEvent');
284-
285-
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
286-
await el.updateComplete;
283+
el.focus();
284+
await sendKeys({press: 'ArrowDown'});
287285

288286
const dropdown = el.shadowRoot?.querySelector('.dropdown');
289287

290-
expect(dropdown?.classList.contains('open')).to.be.false;
291-
expect(el.value).to.eq('Ipsum');
292-
expect(el.selectedIndex).to.eq(1);
293-
294-
const dispatchedEvent = spy.args[1][0] as CustomEvent;
295-
296-
expect(dispatchedEvent.type).to.eq('vsc-change');
297-
expect(dispatchedEvent.detail).to.eql({
298-
selectedIndex: 1,
299-
value: 'Ipsum',
300-
});
288+
expect(dropdown?.classList.contains('open')).to.be.true;
301289
});
302290

303-
it('the value should be changed when the arrow up key pressed while the dropdown is closed', async () => {
291+
it('the dropdown should be opened when the arrow up key pressed while the dropdown is closed', async () => {
304292
const el = (await fixture(html`
305293
<vscode-single-select>
306294
<vscode-option>Lorem</vscode-option>
@@ -309,26 +297,12 @@ describe('vscode-single-select', () => {
309297
</vscode-single-select>
310298
`)) as VscodeSingleSelect;
311299

312-
const spy = sinon.spy(el, 'dispatchEvent');
313-
314-
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowUp'}));
315-
await el.updateComplete;
300+
el.focus();
301+
await sendKeys({press: 'ArrowUp'});
316302

317303
const dropdown = el.shadowRoot?.querySelector('.dropdown');
318-
const text = el.shadowRoot?.querySelector('.text');
319-
320-
expect(dropdown?.classList.contains('open')).to.be.false;
321-
expect(text).lightDom.to.eq('Ipsum');
322-
expect(el.value).to.eq('Ipsum');
323-
expect(el.selectedIndex).to.eq(1);
324-
325-
const dispatchedEvent = spy.args[1][0] as CustomEvent;
326304

327-
expect(dispatchedEvent.type).to.eq('vsc-change');
328-
expect(dispatchedEvent.detail).to.eql({
329-
selectedIndex: 1,
330-
value: 'Ipsum',
331-
});
305+
expect(dropdown?.classList.contains('open')).to.be.true;
332306
});
333307

334308
it('dropdown should be opened when "Space" key pressed', async () => {
@@ -352,13 +326,14 @@ describe('vscode-single-select', () => {
352326
</vscode-single-select>
353327
`)) as VscodeSingleSelect;
354328

355-
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
356-
await el.updateComplete;
329+
el.focus();
330+
await sendKeys({press: 'Enter'});
357331

358332
const dropdown = el.shadowRoot?.querySelector('.dropdown');
333+
const combobox = el.shadowRoot?.querySelector('[role="combobox"]');
359334

360335
expect(dropdown?.classList.contains('open')).to.be.true;
361-
expect(el.getAttribute('aria-expanded')).to.eq('true');
336+
expect(combobox?.getAttribute('aria-expanded')).to.eq('true');
362337
});
363338

364339
it('dropdown should be closed and selected option should be changed when "Enter" key pressed', async () => {
@@ -373,18 +348,13 @@ describe('vscode-single-select', () => {
373348
const spy = sinon.spy();
374349
el.addEventListener('change', spy);
375350

376-
el.dispatchEvent(new MouseEvent('click'));
377-
await el.updateComplete;
378-
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
379-
await el.updateComplete;
380-
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
381-
await el.updateComplete;
382-
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
383-
await el.updateComplete;
384-
385-
const text = el.shadowRoot?.querySelector('.text');
351+
el.focus();
352+
await sendKeys({press: 'ArrowDown'});
353+
await sendKeys({press: 'ArrowDown'});
354+
await sendKeys({press: 'ArrowDown'});
355+
await sendKeys({press: 'Enter'});
386356

387-
expect(text).lightDom.to.eq('Dolor');
357+
expect(el.shadowRoot?.querySelector('.text')).lightDom.to.eq('Dolor');
388358
expect(el.value).to.eq('Dolor');
389359
expect(el.selectedIndex).to.eq(2);
390360
expect(spy.calledWithMatch({type: 'change'})).to.be.true;
@@ -508,18 +478,11 @@ describe('vscode-single-select', () => {
508478
<vscode-option>Austria</vscode-option>
509479
</vscode-single-select>
510480
`)) as VscodeSingleSelect;
511-
await el.updateComplete;
512481

513-
const input = el.shadowRoot?.querySelector(
514-
'.combobox-input'
515-
) as HTMLInputElement;
516-
input.value = 'au';
517-
input.dispatchEvent(new InputEvent('input'));
518-
await el.updateComplete;
519-
520-
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
521-
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
522-
await el.updateComplete;
482+
el.focus();
483+
await sendKeys({type: 'au'});
484+
await sendKeys({down: 'ArrowDown'});
485+
await sendKeys({down: 'ArrowDown'});
523486

524487
const options = Array.from(
525488
el.shadowRoot?.querySelectorAll(
@@ -540,27 +503,14 @@ describe('vscode-single-select', () => {
540503
<vscode-option>Austria</vscode-option>
541504
</vscode-single-select>
542505
`)) as VscodeSingleSelect;
543-
await el.updateComplete;
544-
545-
const spy = sinon.spy(el, 'dispatchEvent');
546-
547-
const input = el.shadowRoot?.querySelector(
548-
'.combobox-input'
549-
) as HTMLInputElement;
550-
input.value = 'au';
551-
input.dispatchEvent(new InputEvent('input'));
552-
await el.updateComplete;
553506

554-
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
555-
await el.updateComplete;
556-
557-
el.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
558-
await el.updateComplete;
507+
el.focus();
559508

560-
const dispatchedChangeEvent = spy.args[2][0] as Event;
509+
await sendKeys({type: 'au'});
510+
await sendKeys({down: 'ArrowDown'});
511+
await sendKeys({down: 'Enter'});
561512

562513
expect(el.value).to.eq('Antigua and Barbuda');
563-
expect(dispatchedChangeEvent.type).to.eq('change');
564514
});
565515

566516
it('select an option with the arrow down key, opens the dropdown with the enter key, scroll to the selected option', async () => {

0 commit comments

Comments
 (0)