@operato/popup 10.29.39 → 10.29.40

package/test/ox-popup-list-late-options.test.ts

@@ -0,0 +1,38 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html, render } from 'lit'
+
+import '../src/ox-popup-list.js'
+import type { OxPopupList } from '../src/ox-popup-list.js'
+
+/**
+ * A value can arrive before the options that hold it - a filter's year choices are read from the server after the
+ * address has named the year. The list marked its choice only when its value changed, so options that came later were
+ * never marked: the dropdown opened with nothing chosen, and its owner showed the raw value.
+ */
+describe('ox-popup-list with options that arrive after its value', () => {
+  const chosen = (list: OxPopupList) =>
+    Array.from(list.querySelectorAll('[option]'))
+      .filter(option => option.hasAttribute('selected'))
+      .map(option => option.getAttribute('value'))
+
+  it('marks the option of its value once that option arrives', async () => {
+    const list = await fixture<OxPopupList>(html`<ox-popup-list></ox-popup-list>`)
+    list.value = '2026'
+    await list.updateComplete
+    render(html`<div option value="2027">2027</div><div option value="2026">2026</div>`, list)
+    await new Promise(resolve => setTimeout(resolve))
+    await list.updateComplete
+    expect(chosen(list)).to.deep.equal(['2026'])
+  })
+
+  it('tells its owner the options changed, after marking them', async () => {
+    const list = await fixture<OxPopupList>(html`<ox-popup-list></ox-popup-list>`)
+    list.value = '10'
+    await list.updateComplete
+    let labels: unknown
+    list.addEventListener('options-change', () => (labels = list.getSelectedLabels()))
+    render(html`<div option value="9">9월</div><div option value="10">10월</div>`, list)
+    await new Promise(resolve => setTimeout(resolve))
+    expect(labels).to.equal('10월')
+  })
+})