Skip to content

Commit 1f59b6d

Browse files
benderabendera
committed
Fix tests
1 parent 1c3d5a1 commit 1f59b6d

5 files changed

Lines changed: 57 additions & 42 deletions

File tree

‎dev/vscode-single-select/basic-example.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,10 @@
2626
<body>
2727
<main>
2828
<vscode-demo>
29-
<vscode-single-select label="Single Select example">
29+
<vscode-single-select label="Single Select example" combobox creatable>
3030
<vscode-option>Lorem</vscode-option>
3131
<vscode-option>Ipsum</vscode-option>
3232
<vscode-option>Dolor</vscode-option>
33-
<vscode-option>Sit</vscode-option>
3433
</vscode-single-select>
3534
<button type="button">focus</button>
3635
</vscode-demo>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,10 @@ export class OptionListController implements ReactiveController {
124124
return this._options;
125125
}
126126

127+
get filteredOptions(): InternalOption[] {
128+
return this._options.filter((o) => o.visible);
129+
}
130+
127131
get numOfVisibleOptions() {
128132
return this._options.filter((o) => o.visible).length;
129133
}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -629,9 +629,7 @@ export class VscodeSelectBase extends VscElement {
629629

630630
//#region render functions
631631
protected _renderOptions(): TemplateResult | TemplateResult[] {
632-
const list = this._opts.options;
633-
634-
//aria-multiselectable=${this._multiple ? 'true' : 'false'}
632+
const list = this._opts.filteredOptions;
635633

636634
return html`
637635
<ul

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

Lines changed: 49 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@ import {VscodeSingleSelect} from './index.js';
55
import {aTimeout, expect, fixture, html} from '@open-wc/testing';
66
import sinon from 'sinon';
77

8+
const ignoredAttributes = [
9+
'aria-label',
10+
'aria-selected',
11+
'data-filtered-index',
12+
'data-index',
13+
'id',
14+
'role',
15+
];
16+
817
describe('vscode-single-select', () => {
918
it('is defined', () => {
1019
const el = document.createElement('vscode-single-select');
@@ -433,31 +442,22 @@ describe('vscode-single-select', () => {
433442

434443
const dropdown = el.shadowRoot?.querySelector('.dropdown');
435444

436-
expect(dropdown).lightDom.to.eq(`
445+
expect(dropdown).lightDom.to.eq(
446+
`
437447
<ul class="options">
438-
<li
439-
class="option"
440-
data-filtered-index="0"
441-
data-index="0"
442-
>
448+
<li class="option">
443449
<b>A</b>ntig<b>u</b>a and Barbuda
444450
</li>
445-
<li
446-
class="option"
447-
data-filtered-index="1"
448-
data-index="3"
449-
>
451+
<li class="option">
450452
<b>A</b><b>u</b>stralia
451453
</li>
452-
<li
453-
class="option"
454-
data-filtered-index="2"
455-
data-index="4"
456-
>
454+
<li class="option">
457455
<b>A</b><b>u</b>stria
458456
</li>
459457
</ul>
460-
`);
458+
`,
459+
{ignoreAttributes: ignoredAttributes}
460+
);
461461
expect(dropdown?.classList.contains('open')).to.be.true;
462462
});
463463

@@ -488,7 +488,7 @@ describe('vscode-single-select', () => {
488488
<li class="option">App<b>l</b><b>e</b></li>
489489
<li class="option active"><b>L</b><b>e</b>mon</li>
490490
`,
491-
{ignoreAttributes: ['data-filtered-index', 'data-index']}
491+
{ignoreAttributes: ignoredAttributes}
492492
);
493493
});
494494

@@ -673,13 +673,16 @@ describe('vscode-single-select', () => {
673673

674674
const dropdown = el.shadowRoot?.querySelector('.dropdown');
675675

676-
expect(dropdown).lightDom.to.eq(`
676+
expect(dropdown).lightDom.to.eq(
677+
`
677678
<ul class="options">
678679
<li class="no-options">
679680
No options
680681
</li>
681682
</ul>
682-
`);
683+
`,
684+
{ignoreAttributes: ignoredAttributes}
685+
);
683686
});
684687

685688
it('shows suggested option below the options', async () => {
@@ -691,8 +694,8 @@ describe('vscode-single-select', () => {
691694
</vscode-single-select>
692695
`)) as VscodeSingleSelect;
693696

694-
el.shadowRoot?.querySelector('.combobox-input');
695-
await clickOnElement(el);
697+
el.focus();
698+
await el.updateComplete;
696699
await sendKeys({type: 'lo'});
697700

698701
const dropdown = el.shadowRoot?.querySelector('.dropdown');
@@ -710,7 +713,14 @@ describe('vscode-single-select', () => {
710713
</ul>
711714
`,
712715
{
713-
ignoreAttributes: ['data-filtered-index', 'data-index'],
716+
ignoreAttributes: [
717+
'aria-label',
718+
'aria-selected',
719+
'data-filtered-index',
720+
'data-index',
721+
'id',
722+
'role',
723+
],
714724
}
715725
);
716726
});
@@ -724,25 +734,31 @@ describe('vscode-single-select', () => {
724734
</vscode-single-select>
725735
`)) as VscodeSingleSelect;
726736

727-
el.shadowRoot?.querySelector('.combobox-input');
728-
await clickOnElement(el);
737+
el.focus();
738+
await el.updateComplete;
729739
await sendKeys({type: 'Sit'});
730740

731741
const dropdown = el.shadowRoot?.querySelector('.dropdown');
732742

733743
expect(dropdown).lightDom.to.eq(
734744
`
735-
<ul class="options">
736-
<li class="option placeholder">Add "Sit"</li>
737-
</ul>
738-
`,
745+
<ul class="options">
746+
<li class="option placeholder">Add "Sit"</li>
747+
</ul>
748+
`,
739749
{
740-
ignoreAttributes: ['data-filtered-index', 'data-index'],
750+
ignoreAttributes: [
751+
'aria-label',
752+
'data-filtered-index',
753+
'data-index',
754+
'id',
755+
'role',
756+
],
741757
}
742758
);
743759
});
744760

745-
it.only('selects the suggested option', async () => {
761+
it('selects the suggested option', async () => {
746762
const el = (await fixture(html`
747763
<vscode-single-select combobox creatable>
748764
<vscode-option>Lorem</vscode-option>
@@ -751,8 +767,6 @@ describe('vscode-single-select', () => {
751767
</vscode-single-select>
752768
`)) as VscodeSingleSelect;
753769

754-
// el.shadowRoot?.querySelector('.combobox-input');
755-
756770
el.focus();
757771
await el.updateComplete;
758772
await sendKeys({type: 'dol'});
@@ -793,8 +807,8 @@ describe('vscode-single-select', () => {
793807
const spy = sinon.spy();
794808
el.addEventListener('vsc-single-select-create-option', spy);
795809

796-
el.shadowRoot?.querySelector('.combobox-input');
797-
await clickOnElement(el);
810+
el.focus();
811+
await el.updateComplete;
798812
await sendKeys({type: 'Sit'});
799813

800814
await sendKeys({down: 'ArrowDown'});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -209,11 +209,11 @@ export class VscodeSingleSelect
209209

210210
await this.updateComplete;
211211

212-
this.selectedIndex = nextIndex;
212+
this._opts.selectedIndex = nextIndex;
213213
this._dispatchChangeEvent();
214214
const opCreateEvent: VscSingleSelectCreateOptionEvent = new CustomEvent(
215215
'vsc-single-select-create-option',
216-
{detail: {value: this._options[nextIndex]?.value ?? ''}}
216+
{detail: {value: this._opts.getOptionByIndex(nextIndex)?.value ?? ''}}
217217
);
218218
this.dispatchEvent(opCreateEvent);
219219
this.open = false;

0 commit comments

Comments
 (0)