diff --git a/packages/ui/components/combobox/test/lion-combobox.test.js b/packages/ui/components/combobox/test/lion-combobox.test.js index 34682ae55..0a31c0892 100644 --- a/packages/ui/components/combobox/test/lion-combobox.test.js +++ b/packages/ui/components/combobox/test/lion-combobox.test.js @@ -1,4 +1,4 @@ -import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing'; +import { defineCE, expect, fixture, html, unsafeStatic, waitUntil } from '@open-wc/testing'; import { Required, Unparseable } from '@lion/ui/form-core.js'; import { sendKeys } from '@web/test-runner-commands'; import { LionCombobox } from '@lion/ui/combobox.js'; @@ -48,6 +48,80 @@ async function fruitFixture({ autocomplete, matchMode } = {}) { } describe('lion-combobox', () => { + describe('Rendering on API change', () => { + it('renders when options changed', async () => { + const entries = [ + { + id: '1', + label: 'Apple', + }, + { + id: '2', + label: 'Artichoke', + }, + { + id: '3', + label: 'Asparagus', + }, + { + id: '4', + label: 'Banana', + }, + { + id: '5', + label: 'Pineapple', + }, + ]; + + class Wrapper extends LitElement { + static properties = { + ...super.properties, + entries: { type: Array }, + }; + + constructor() { + super(); + this.entries = entries; + } + + render() { + return html` + ${this.entries.map( + entry => html`${entry.label}`, + )} + `; + } + } + + const tagString = defineCE(Wrapper); + const tag = unsafeStatic(tagString); + const wrapperElement = /** @type {Wrapper} */ (await fixture(html`<${tag}>`)); + await waitUntil( + () => + wrapperElement?.shadowRoot?.querySelector('lion-options')?.querySelectorAll('lion-option') + .length === entries.length, + ); + + wrapperElement.entries = [ + { + id: '4', + label: 'Banana', + }, + ]; + + await waitUntil( + () => + wrapperElement?.shadowRoot?.querySelector('lion-options')?.querySelectorAll('lion-option') + .length === wrapperElement.entries.length, + ); + + const optionElements = wrapperElement.shadowRoot?.querySelectorAll('lion-option'); + expect(optionElements?.length).to.equal(wrapperElement.entries.length); + const optionElement = optionElements?.item(0); + expect(optionElement?.textContent).to.equal('Banana'); + }); + }); + describe('Options visibility', () => { it('hides options when text in input node is cleared after typing something by default', async () => { const el = /** @type {LionCombobox} */ (