Skip to content

Commit

Permalink
chore: update tests
Browse files Browse the repository at this point in the history
  • Loading branch information
rmanole authored and Westbrook Johnson committed May 8, 2024
1 parent f398e14 commit 8af69ea
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 142 deletions.
1 change: 0 additions & 1 deletion packages/combobox/src/Combobox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,6 @@ export class Combobox extends Textfield {
if (!this.activeDescendant) {
return;
}
this.value = this.activeDescendant.itemText;

const activeEl = this.shadowRoot.getElementById(
this.activeDescendant.value
Expand Down
34 changes: 0 additions & 34 deletions packages/combobox/test/combobox-a11y.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,38 +354,4 @@ describe('Combobox accessibility', () => {

expect(el.open).to.be.false;
});
it('manages keyboard navigation and selection', async () => {
const el = await comboboxFixture();

await elementUpdated(el);

expect(el.activeDescendant).to.be.undefined;

el.focus();
await elementUpdated(el);

await sendKeys({
press: 'ArrowDown',
});
await elementUpdated(el);

expect(el.activeDescendant).to.not.be.undefined;
expect(el.activeDescendant.value).to.equal('apple');

const activeDescendant = el.shadowRoot.querySelector(
'#apple'
) as MenuItem;

await elementUpdated(activeDescendant);
await nextFrame();
await nextFrame();

const change = oneEvent(el, 'change');
await sendKeys({
press: 'Enter',
});

await change;
expect(el.value).to.equal('Apple');
});
});
217 changes: 110 additions & 107 deletions packages/combobox/test/combobox.data.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
expect,
html,
nextFrame,
oneEvent,
waitUntil,
} from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands';
Expand Down Expand Up @@ -51,18 +52,16 @@ describe('Combobox Data', () => {
expect(el.options).to.deep.equal(options);
});
it('accepts options as html', async () => {
const el = await fixture<TestableCombobox>(
html`
<sp-combobox>
Combobox Test
<sp-menu-item value="pineapple">Pineapple</sp-menu-item>
<sp-menu-item value="yuzu">Yuzu</sp-menu-item>
<sp-menu-item value="kumquat">Kumquat</sp-menu-item>
<sp-menu-item value="lychee">Lychee</sp-menu-item>
<sp-menu-item value="durian">Durian</sp-menu-item>
</sp-combobox>
`
);
const el = await fixture<TestableCombobox>(html`
<sp-combobox>
Combobox Test
<sp-menu-item value="pineapple">Pineapple</sp-menu-item>
<sp-menu-item value="yuzu">Yuzu</sp-menu-item>
<sp-menu-item value="kumquat">Kumquat</sp-menu-item>
<sp-menu-item value="lychee">Lychee</sp-menu-item>
<sp-menu-item value="durian">Durian</sp-menu-item>
</sp-combobox>
`);
await elementUpdated(el);

const processedOptions = el.availableOptions.map(
Expand Down Expand Up @@ -95,20 +94,18 @@ describe('Combobox Data', () => {
]);
});
it('accepts additional options as html', async () => {
const el = await fixture<TestableCombobox>(
html`
<sp-combobox>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</sp-combobox>
`
);
const el = await fixture<TestableCombobox>(html`
<sp-combobox>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</sp-combobox>
`);
await elementUpdated(el);

let processedOptions = el.availableOptions.map(
Expand Down Expand Up @@ -140,20 +137,18 @@ describe('Combobox Data', () => {
expect(processedOptions).to.deep.equal([...options, newOption]);
});
it('accepts updated value as html', async () => {
const el = await fixture<TestableCombobox>(
html`
<sp-combobox>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</sp-combobox>
`
);
const el = await fixture<TestableCombobox>(html`
<sp-combobox>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</sp-combobox>
`);
await elementUpdated(el);

let processedOptions = el.availableOptions.map(
Expand Down Expand Up @@ -192,20 +187,18 @@ describe('Combobox Data', () => {
expect(processedOptions).to.deep.equal(newOptions);
});
it('accepts updated id as html', async () => {
const el = await fixture<TestableCombobox>(
html`
<sp-combobox>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</sp-combobox>
`
);
const el = await fixture<TestableCombobox>(html`
<sp-combobox>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</sp-combobox>
`);
await elementUpdated(el);

let processedOptions = el.availableOptions.map(
Expand Down Expand Up @@ -243,20 +236,18 @@ describe('Combobox Data', () => {
expect(processedOptions).to.deep.equal(newOptions);
});
it('accepts replacement options as html', async () => {
const el = await fixture<TestableCombobox>(
html`
<sp-combobox>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</sp-combobox>
`
);
const el = await fixture<TestableCombobox>(html`
<sp-combobox>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</sp-combobox>
`);
await elementUpdated(el);

let processedOptions = el.availableOptions.map(
Expand Down Expand Up @@ -299,20 +290,18 @@ describe('Combobox Data', () => {
expect(processedOptions).to.deep.equal(options);
});
it('accepts options through slots', async () => {
const test = await fixture<SpectrumElement>(
html`
<combobox-slot-test-el>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</combobox-slot-test-el>
`
);
const test = await fixture<SpectrumElement>(html`
<combobox-slot-test-el>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</combobox-slot-test-el>
`);
const el = test.shadowRoot.querySelector(
'sp-combobox'
) as unknown as TestableCombobox;
Expand All @@ -333,20 +322,18 @@ describe('Combobox Data', () => {
expect(processedOptions).to.deep.equal(options);
});
it('accepts adding through slots', async function () {
const test = await fixture<SpectrumElement>(
html`
<combobox-slot-test-el>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</combobox-slot-test-el>
`
);
const test = await fixture<SpectrumElement>(html`
<combobox-slot-test-el>
Combobox Test
${options.map((option) => {
return html`
<sp-menu-item value=${option.value}>
${option.itemText}
</sp-menu-item>
`;
})}
</combobox-slot-test-el>
`);
const el = test.shadowRoot.querySelector(
'sp-combobox'
) as unknown as TestableCombobox;
Expand Down Expand Up @@ -390,16 +377,16 @@ describe('Combobox Data', () => {
expect(processedOptions).to.deep.equal([...options, newOption]);
});
it('accepts numeric values as html', async () => {
const el = await fixture<TestableCombobox>(
html`
<sp-combobox>
Combobox Test
<sp-menu-item value="1">Mambo no. 1</sp-menu-item>
<sp-menu-item value="2">Mambo no. 2</sp-menu-item>
<sp-menu-item value="3">Mambo no. 5</sp-menu-item>
</sp-combobox>
`
);
const el = await fixture<TestableCombobox>(html`
<sp-combobox>
Combobox Test
<sp-menu-item value="1">Mambo no. 1</sp-menu-item>
<sp-menu-item value="2">Mambo no. 2</sp-menu-item>
<sp-menu-item value="3">Mambo no. 3</sp-menu-item>
<sp-menu-item value="4">Mambo no. 4</sp-menu-item>
<sp-menu-item value="5">Mambo no. 5</sp-menu-item>
</sp-combobox>
`);
await elementUpdated(el);

expect(el.activeDescendant).to.be.undefined;
Expand All @@ -413,6 +400,22 @@ describe('Combobox Data', () => {
await elementUpdated(el);

expect(el.activeDescendant).to.not.be.undefined;
expect(el.activeDescendant.value).to.equal('1');
expect(el.activeDescendant.value).to.equal('1');

const activeDescendant = el.shadowRoot.getElementById('#1') as MenuItem;

await elementUpdated(activeDescendant);
await nextFrame();
await nextFrame();

const change = oneEvent(el, 'change');
await sendKeys({
press: 'Enter',
});

await change;
expect(el.open).to.be.false;
expect(el.activeDescendant).to.be.undefined;
expect(el.value).to.equal('Mambo no. 1');
});
});

0 comments on commit 8af69ea

Please sign in to comment.