@aquera/nile-elements 2.0.17 → 2.0.19

package/dist/src/nile-select/nile-select.test.js

@@ -1,4 +1,4 @@
-import { aTimeout, expect, fixture, html, nextFrame, waitUntil } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, nextFrame, oneEvent, waitUntil } from '@open-wc/testing';
 import './nile-select';
 import '../nile-option/nile-option';
 import '../nile-input/nile-input';
@@ -507,12 +507,13 @@ describe('NileSelect chip fitting behaviour matrix', () => {
         expect(el.shadowRoot.querySelector('button.select__tags-count')).to.not.exist;
     });
 });
-describe('NileSelect enableVirtualScroll value sync', () => {
+describe('NileSelect enableVirtualScroll value sync (showTooltip)', () => {
     const ROLES = ['Administrators', 'Users', 'Guests', 'Print Operators'];
     const DATA = ROLES.map(role => ({ label: role, value: role }));
     async function virtualSelect(tpl = html `<nile-select
       multiple
       .enableVirtualScroll=${true}
+      .showTooltip=${true}
       .data=${DATA}
       .value=${[]}
     ></nile-select>`) {
@@ -546,6 +547,7 @@ describe('NileSelect enableVirtualScroll value sync', () => {
         const { el, inner } = await virtualSelect(html `<nile-select
       multiple
       .enableVirtualScroll=${true}
+      .showTooltip=${true}
       .data=${DATA}
       .value=${['Administrators', 'Users', 'Guests']}
     ></nile-select>`);
@@ -569,6 +571,7 @@ describe('NileSelect enableVirtualScroll value sync', () => {
     it('V5. single-select virtual mode keeps the wrapper value in sync', async () => {
         const { el, inner } = await virtualSelect(html `<nile-select
       .enableVirtualScroll=${true}
+      .showTooltip=${true}
       .data=${DATA}
     ></nile-select>`);
         inner.handleOptionSelection({ value: 'Users' });
@@ -580,7 +583,8 @@ describe('NileSelect enableVirtualScroll value sync', () => {
     });
     it('V6. resizing the host does not re-render the wrapper without autoResize', async () => {
         const host = await fixture(html `<div style="width: 400px">
-      <nile-select multiple .enableVirtualScroll=${true} .data=${DATA}></nile-select>
+      <nile-select multiple .enableVirtualScroll=${true}
+      .showTooltip=${true} .data=${DATA}></nile-select>
     </div>`);
         const el = host.querySelector('nile-select');
         await el.updateComplete;
@@ -599,7 +603,7 @@ describe('NileSelect enableVirtualScroll value sync', () => {
         expect(updates).to.equal(0);
     });
 });
-describe('NileSelect enableVirtualScroll + searchEnabled value sync', () => {
+describe('NileSelect enableVirtualScroll + searchEnabled value sync (showTooltip)', () => {
     const ROLES = ['Administrators', 'Users', 'Guests', 'Print Operators'];
     const DATA = ROLES.map(role => ({ label: role, value: role }));
     async function settle(el, inner) {
@@ -615,6 +619,7 @@ describe('NileSelect enableVirtualScroll + searchEnabled value sync', () => {
       ?multiple=${multiple}
       .searchEnabled=${true}
       .enableVirtualScroll=${true}
+      .showTooltip=${true}
       .portal=${portal}
       .data=${DATA}
       .value=${value}
@@ -1251,7 +1256,7 @@ describe('NileSelect 2.0.8 compatibility matrix', () => {
         expect(inner.value).to.deep.equal(['b']);
         expect(inner.shadowRoot.querySelectorAll('.select__tags nile-tag').length).to.equal(1);
     });
-    it('C9. enableVirtualScroll: programmatic value and clear-all reach both selects', async () => {
+    it('C9. enableVirtualScroll: programmatic value reaches the inner select; clear-all leaves the outer value alone (pre-2.0.9)', async () => {
         const el = await fixture(html `<nile-select multiple .enableVirtualScroll=${true} .data=${DATA}></nile-select>`);
         await settle(el);
         const inner = el.shadowRoot.querySelector('nile-virtual-select');
@@ -1263,6 +1268,21 @@ describe('NileSelect 2.0.8 compatibility matrix', () => {
         await inner.updateComplete;
         await settle(el);
         expect(inner.value).to.deep.equal([]);
+        // Without showTooltip the inner select owns the selection; the outer value is not written back.
+        expect(el.value).to.deep.equal(['a', 'c']);
+    });
+    it('C9b. enableVirtualScroll + showTooltip: programmatic value and clear-all reach both selects', async () => {
+        const el = await fixture(html `<nile-select multiple showTooltip .enableVirtualScroll=${true} .data=${DATA}></nile-select>`);
+        await settle(el);
+        const inner = el.shadowRoot.querySelector('nile-virtual-select');
+        el.value = ['a', 'c'];
+        await settle(el);
+        await inner.updateComplete;
+        expect(inner.value).to.deep.equal(['a', 'c']);
+        inner.unSelectAll();
+        await inner.updateComplete;
+        await settle(el);
+        expect(inner.value).to.deep.equal([]);
         expect(el.value).to.deep.equal([]);
     });
 });
@@ -1325,4 +1345,409 @@ describe('NileSelect showtooltip tooltip on sub-pixel truncation', () => {
         }
     });
 });
+const vsMounted = [];
+const VS_OPTIONS = Array.from({ length: 300 }, (_, i) => ({ value: `option-${i + 1}`, label: `Option ${i + 1}` }));
+function vsRoots(inner) {
+    const portal = document.body.querySelector('.nile-virtual-select-portal-append');
+    return [inner.shadowRoot, ...(portal ? [portal] : [])];
+}
+function vsAll(inner, selector) {
+    return vsRoots(inner).flatMap(root => Array.from(root.querySelectorAll(selector)));
+}
+async function vsMount({ showTooltip = false, multiple = true, search = false, portal = false, value = undefined, data = VS_OPTIONS, } = {}) {
+    const initial = value ?? (multiple ? [] : '');
+    const el = await fixture(html `<nile-select
+    ?multiple=${multiple}
+    ?searchEnabled=${search}
+    ?showTooltip=${showTooltip}
+    .enableVirtualScroll=${true}
+    .portal=${portal}
+    .data=${data}
+    .value=${initial}
+  ></nile-select>`);
+    await el.updateComplete;
+    const inner = el.shadowRoot.querySelector('nile-virtual-select');
+    await inner.updateComplete;
+    vsMounted.push(inner);
+    let updates = 0;
+    const update = el.update;
+    el.update = function (changed) {
+        updates++;
+        return update.call(this, changed);
+    };
+    return { el, inner, updates: () => updates, resetUpdates: () => (updates = 0) };
+}
+async function vsSettle(el, inner) {
+    await inner.updateComplete;
+    await el.updateComplete;
+    await inner.updateComplete;
+    await aTimeout(30);
+}
+async function vsOpen(inner) {
+    const shown = oneEvent(inner, 'nile-after-show');
+    inner.shadowRoot.querySelector('[part="combobox"]').dispatchEvent(new MouseEvent('mousedown', { bubbles: true, composed: true, button: 0 }));
+    await shown;
+    await aTimeout(50);
+}
+async function vsPick(el, inner, value) {
+    await waitUntil(() => vsAll(inner, 'nile-option').find(o => o.value === value), `option ${value} was not rendered`);
+    const option = vsAll(inner, 'nile-option').find(o => o.value === value);
+    option.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, composed: true, button: 0 }));
+    await vsSettle(el, inner);
+}
+async function vsToggleSelected(el, inner) {
+    vsAll(inner, '.select__footer nile-checkbox')[0].click();
+    await vsSettle(el, inner);
+}
+async function vsType(el, inner, text) {
+    const input = vsAll(inner, '.select__search nile-input')[0].shadowRoot.querySelector('input');
+    input.value = text;
+    input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    await vsSettle(el, inner);
+}
+async function vsRemoveChip(el, inner, index = 0) {
+    const tag = inner.shadowRoot.querySelectorAll('nile-tag')[index];
+    const remove = tag.shadowRoot.querySelector('[part="remove-button"], nile-icon-button, button');
+    (remove.shadowRoot?.querySelector('button') ?? remove).click();
+    await vsSettle(el, inner);
+}
+const VS_SEARCH = 'Option 99';
+const VS_SEARCH_HITS = VS_OPTIONS.filter(o => o.label.includes(VS_SEARCH)).length;
+const vsDataValues = (inner) => inner.data.map(item => item.value);
+// Known, pre-existing noise from @lit-labs/virtualizer, unrelated to these tests: a "ResizeObserver loop" notice
+// while a list is laid out, and a detached-list error when the visible list swaps between a short and a long data
+// set (for example leaving the Selected view). The browser raises them as window errors, which would fail
+// whichever test happens to be running. Only the new virtual-scroll describes below install this filter; their
+// assertions still decide pass or fail.
+// The virtualizer-only errors are matched on message AND on a `virtualizer` frame in the stack, so the same message
+// thrown from anywhere else still fails the test. "ResizeObserver loop" is a browser notice with no stack.
+const VS_VIRTUALIZER_ERRORS = ['ChildPart` has no `parentNode`', "reading 'insertBefore'"];
+function vsIsKnownVirtualizerNoise(message, error) {
+    if (typeof message !== 'string')
+        return false;
+    if (message.includes('ResizeObserver loop'))
+        return true;
+    return (VS_VIRTUALIZER_ERRORS.some(known => message.includes(known)) &&
+        !!error?.stack &&
+        error.stack.toLowerCase().includes('virtualizer'));
+}
+function vsIgnoreKnownVirtualizerErrors() {
+    const previous = window.onerror;
+    window.onerror = (message, source, lineno, colno, error) => {
+        if (vsIsKnownVirtualizerNoise(message, error))
+            return true;
+        return previous ? previous.call(window, message, source, lineno, colno, error) : false;
+    };
+    return () => {
+        window.onerror = previous;
+    };
+}
+// Close every dropdown and let it finish hiding before its fixture goes away, so the virtualizer is not
+// still laying out a list that has already been detached. Registered per describe below, not file-wide.
+async function vsCloseDropdowns() {
+    const mounted = vsMounted.splice(0);
+    for (const inner of mounted) {
+        if (!inner.open)
+            continue;
+        const hidden = oneEvent(inner, 'nile-after-hide');
+        inner.open = false;
+        await Promise.race([hidden, aTimeout(1500)]);
+    }
+    if (mounted.length) {
+        await nextFrame();
+        await nextFrame();
+        await aTimeout(250);
+    }
+    document.body.querySelectorAll('.nile-virtual-select-portal-append').forEach(n => n.remove());
+}
+describe('NileSelect enableVirtualScroll without showTooltip keeps the pre-2.0.9 behaviour', () => {
+    let restoreOnError;
+    before(() => {
+        restoreOnError = vsIgnoreKnownVirtualizerErrors();
+    });
+    after(() => {
+        restoreOnError();
+    });
+    afterEach(vsCloseDropdowns);
+    it('L1. a pick does not write the outer value', async () => {
+        const { el, inner } = await vsMount();
+        await vsOpen(inner);
+        await vsPick(el, inner, 'option-1');
+        expect(inner.value).to.deep.equal(['option-1']);
+        expect(el.value).to.deep.equal([]);
+    });
+    it('L2. a normal pick, uncheck and chip removal cause no outer update', async () => {
+        const { el, inner, updates, resetUpdates } = await vsMount({ value: ['option-9'] });
+        await vsOpen(inner);
+        resetUpdates();
+        await vsPick(el, inner, 'option-1');
+        await vsPick(el, inner, 'option-1');
+        await vsRemoveChip(el, inner, 0);
+        expect(updates()).to.equal(0);
+    });
+    it('L3. a parent re-render pushes the stale outer value back over the selection', async () => {
+        const { el, inner } = await vsMount();
+        await vsOpen(inner);
+        await vsPick(el, inner, 'option-1');
+        expect(inner.value).to.deep.equal(['option-1']);
+        el.requestUpdate();
+        await vsSettle(el, inner);
+        expect(inner.value).to.deep.equal([]);
+    });
+    it('L4. nile-input / nile-change from the inner select are not synced (no sync listeners)', async () => {
+        const { el, inner } = await vsMount({ value: ['option-1'] });
+        const fire = (name, value) => inner.dispatchEvent(new CustomEvent(name, { detail: { value }, bubbles: true, composed: true }));
+        fire('nile-input', ['option-2']);
+        fire('nile-change', ['option-3']);
+        await vsSettle(el, inner);
+        expect(el.value).to.deep.equal(['option-1']);
+    });
+    it('L5. a direct syncValueFromVirtualSelect call does not change the outer value', async () => {
+        const { el, inner } = await vsMount({ value: ['option-1'] });
+        const event = new CustomEvent('nile-change', { detail: { value: ['option-2'] } });
+        Object.defineProperty(event, 'currentTarget', { value: inner });
+        Object.defineProperty(event, 'composedPath', { value: () => [inner] });
+        el.syncValueFromVirtualSelect(event);
+        await vsSettle(el, inner);
+        expect(el.value).to.deep.equal(['option-1']);
+    });
+    it('L6. Selected stays filtered through a normal uncheck', async () => {
+        const { el, inner } = await vsMount();
+        await vsOpen(inner);
+        await vsPick(el, inner, 'option-1');
+        await vsPick(el, inner, 'option-2');
+        await vsPick(el, inner, 'option-3');
+        await vsToggleSelected(el, inner);
+        expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2', 'option-3']);
+        await vsPick(el, inner, 'option-2');
+        expect(inner.showSelected).to.be.true;
+        expect(inner.value).to.deep.equal(['option-1', 'option-3']);
+        expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2', 'option-3']);
+    });
+    it('L7. search stays filtered through a pick and an unpick', async () => {
+        const { el, inner } = await vsMount({ search: true });
+        await vsOpen(inner);
+        await vsType(el, inner, VS_SEARCH);
+        expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+        await vsPick(el, inner, 'option-99');
+        expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+        expect(inner.searchValue).to.equal(VS_SEARCH);
+        await vsPick(el, inner, 'option-99');
+        expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+        expect(inner.value).to.deep.equal([]);
+    });
+    it('L9. the wrapper pushes maxOptionsVisible to the inner select (pre-2.0.9 binding)', async () => {
+        const { el, inner } = await vsMount({ value: ['option-1'] });
+        const writes = [];
+        const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(inner), 'maxOptionsVisible');
+        Object.defineProperty(inner, 'maxOptionsVisible', {
+            configurable: true,
+            get() {
+                return descriptor.get.call(this);
+            },
+            set(value) {
+                writes.push(value);
+                descriptor.set.call(this, value);
+            },
+        });
+        el.maxOptionsVisible = 5;
+        await vsSettle(el, inner);
+        expect(writes).to.include(5);
+    });
+    it('L10. the untouched default maxOptionsVisible is not pushed, so the inner select is not pinned as explicit', async () => {
+        const { inner } = await vsMount();
+        expect(inner.maxOptionsVisibleExplicit).to.be.false;
+    });
+    it('L8. data is re-applied on every wrapper render (plain binding, pre-2.0.9)', async () => {
+        const { el, inner } = await vsMount({ value: ['option-1'] });
+        await vsOpen(inner);
+        // After opening, the inner select holds its own copy of the list.
+        expect(inner.data).to.not.equal(el.data);
+        el.requestUpdate();
+        await vsSettle(el, inner);
+        expect(inner.data).to.equal(el.data);
+    });
+});
+describe('NileSelect enableVirtualScroll with showTooltip: guarded data and external value updates', () => {
+    let restoreOnError;
+    before(() => {
+        restoreOnError = vsIgnoreKnownVirtualizerErrors();
+    });
+    after(() => {
+        restoreOnError();
+    });
+    afterEach(vsCloseDropdowns);
+    it('T1. Selected + uncheck stays filtered', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true });
+        await vsOpen(inner);
+        await vsPick(el, inner, 'option-1');
+        await vsPick(el, inner, 'option-2');
+        await vsPick(el, inner, 'option-3');
+        await vsToggleSelected(el, inner);
+        expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2', 'option-3']);
+        await vsPick(el, inner, 'option-2');
+        expect(inner.showSelected).to.be.true;
+        expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2', 'option-3']);
+        expect(el.value).to.deep.equal(['option-1', 'option-3']);
+    });
+    it('T2. search + pick/unpick stays filtered', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true, search: true });
+        await vsOpen(inner);
+        await vsType(el, inner, VS_SEARCH);
+        expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+        await vsPick(el, inner, 'option-99');
+        expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+        expect(inner.searchValue).to.equal(VS_SEARCH);
+        expect(el.value).to.deep.equal(['option-99']);
+        await vsPick(el, inner, 'option-99');
+        expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+        expect(el.value).to.deep.equal([]);
+    });
+    it('T3. chip removal while Selected stays filtered', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2', 'option-3'] });
+        await vsOpen(inner);
+        await vsToggleSelected(el, inner);
+        expect(inner.data.length).to.equal(3);
+        await vsRemoveChip(el, inner, 0);
+        expect(inner.showSelected).to.be.true;
+        expect(inner.data.length).to.equal(3);
+        expect(el.value).to.deep.equal(['option-2', 'option-3']);
+    });
+    it('T4. portal: Selected + uncheck stays filtered', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true, portal: true });
+        await vsOpen(inner);
+        await waitUntil(() => document.body.querySelector('.nile-virtual-select-portal-append #listbox'), 'listbox never portalled');
+        await vsPick(el, inner, 'option-1');
+        await vsPick(el, inner, 'option-2');
+        await vsToggleSelected(el, inner);
+        expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2']);
+        await vsPick(el, inner, 'option-2');
+        expect(inner.showSelected).to.be.true;
+        expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2']);
+        expect(el.value).to.deep.equal(['option-1']);
+    });
+    it('T5. picking, removing a chip and clearing sync the outer value; nile-change listeners see it', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true });
+        const seen = [];
+        el.addEventListener('nile-change', () => seen.push(el.value));
+        await vsOpen(inner);
+        await vsPick(el, inner, 'option-1');
+        await vsPick(el, inner, 'option-2');
+        expect(el.value).to.deep.equal(['option-1', 'option-2']);
+        expect(seen[0]).to.deep.equal(['option-1']);
+        await vsRemoveChip(el, inner, 0);
+        expect(el.value).to.deep.equal(['option-2']);
+        vsAll(inner, '.select__clear')[0].click();
+        await vsSettle(el, inner);
+        expect(el.value).to.deep.equal([]);
+    });
+    it('T6. an external value replace while Selected recomputes the list', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+        await vsOpen(inner);
+        await vsToggleSelected(el, inner);
+        el.value = ['option-5'];
+        await vsSettle(el, inner);
+        expect(inner.showSelected).to.be.true;
+        expect(vsDataValues(inner)).to.deep.equal(['option-5']);
+    });
+    it('T7. an external value that adds an item while Selected shows the new item', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+        await vsOpen(inner);
+        await vsToggleSelected(el, inner);
+        el.value = ['option-1', 'option-2', 'option-7'];
+        await vsSettle(el, inner);
+        expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2', 'option-7']);
+    });
+    it('T8. an external value that removes an item while Selected drops it from the list', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+        await vsOpen(inner);
+        await vsToggleSelected(el, inner);
+        el.value = ['option-1'];
+        await vsSettle(el, inner);
+        expect(vsDataValues(inner)).to.deep.equal(['option-1']);
+    });
+    it('T9. an external empty value leaves the Selected view', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+        await vsOpen(inner);
+        await vsToggleSelected(el, inner);
+        el.value = [];
+        await vsSettle(el, inner);
+        expect(inner.showSelected).to.be.false;
+        expect(inner.data.length).to.equal(VS_OPTIONS.length);
+    });
+    it('T10. a normal pick after an external value update still keeps the item listed', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+        await vsOpen(inner);
+        await vsToggleSelected(el, inner);
+        el.value = ['option-5', 'option-6'];
+        await vsSettle(el, inner);
+        await vsPick(el, inner, 'option-5');
+        expect(inner.value).to.deep.equal(['option-6']);
+        expect(el.value).to.deep.equal(['option-6']);
+        expect(inner.showSelected).to.be.true;
+        expect(vsDataValues(inner)).to.deep.equal(['option-5', 'option-6']);
+    });
+    it('T11. a normal pick does not re-send the data array', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+        await vsOpen(inner);
+        await vsToggleSelected(el, inner);
+        const before = inner.data;
+        await vsPick(el, inner, 'option-2');
+        expect(inner.data).to.equal(before);
+    });
+    it('T12. turning showTooltip on at runtime keeps the selection', async () => {
+        const { el, inner } = await vsMount({ showTooltip: false });
+        await vsOpen(inner);
+        await vsPick(el, inner, 'option-1');
+        await vsPick(el, inner, 'option-2');
+        expect(el.value).to.deep.equal([]);
+        expect(inner.value).to.deep.equal(['option-1', 'option-2']);
+        el.showTooltip = true;
+        await vsSettle(el, inner);
+        expect(el.value).to.deep.equal(['option-1', 'option-2']);
+        expect(inner.value).to.deep.equal(['option-1', 'option-2']);
+    });
+    it('T15. turning showTooltip on at runtime engages the fitted chip row', async () => {
+        const { el, inner } = await vsMount({
+            showTooltip: false,
+            value: ['option-1', 'option-2', 'option-3', 'option-4', 'option-5'],
+        });
+        const fitted = () => !!inner.shadowRoot.querySelector('.select__tags--fitted');
+        expect(fitted()).to.be.false;
+        el.showTooltip = true;
+        await vsSettle(el, inner);
+        await waitUntil(fitted, 'the fitted chip row never engaged');
+        expect(el.value).to.deep.equal(['option-1', 'option-2', 'option-3', 'option-4', 'option-5']);
+    });
+    it('T16. changing showTooltip and value in the same update keeps the consumer value', async () => {
+        const { el, inner } = await vsMount({ showTooltip: false });
+        await vsOpen(inner);
+        await vsPick(el, inner, 'option-1');
+        expect(inner.value).to.deep.equal(['option-1']);
+        expect(el.value).to.deep.equal([]);
+        el.value = ['option-7'];
+        el.showTooltip = true;
+        await vsSettle(el, inner);
+        expect(el.value).to.deep.equal(['option-7']);
+        expect(inner.value).to.deep.equal(['option-7']);
+    });
+    it('T13. assigning a new data array propagates', async () => {
+        const { el, inner } = await vsMount({ showTooltip: true });
+        await vsOpen(inner);
+        el.data = [...VS_OPTIONS.slice(0, 10), { value: 'extra', label: 'Extra' }];
+        await vsSettle(el, inner);
+        expect(inner.data.length).to.equal(11);
+        expect(vsDataValues(inner)).to.include('extra');
+    });
+    it('T14. mutating data in place (data.push) is not propagated; assign a new array instead', async () => {
+        const data = VS_OPTIONS.slice(0, 20);
+        const { el, inner } = await vsMount({ showTooltip: true, data });
+        await vsOpen(inner);
+        data.push({ value: 'extra', label: 'Extra' });
+        el.requestUpdate();
+        await vsSettle(el, inner);
+        expect(inner.data.length).to.equal(20);
+        expect(vsDataValues(inner)).to.not.include('extra');
+    });
+});
 //# sourceMappingURL=nile-select.test.js.map