@aquera/nile-elements 2.0.18 → 2.0.20

package/dist/src/nile-virtual-select/nile-virtual-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-virtual-select';
 import '../nile-input/nile-input';
 describe('NileVirtualSelect', () => {
@@ -672,4 +672,118 @@ describe('NileVirtualSelect showtooltip tooltip on sub-pixel truncation', () =>
         }
     });
 });
+describe('NileVirtualSelect external value while Selected is open', () => {
+    const OPTIONS = Array.from({ length: 200 }, (_, i) => ({ value: `option-${i + 1}`, label: `Option ${i + 1}` }));
+    let mounted;
+    // Let the dropdown finish hiding before the fixture is torn down, so the virtualizer is not still laying out
+    // a list that has already been detached.
+    afterEach(async () => {
+        if (mounted?.open) {
+            const hidden = oneEvent(mounted, 'nile-after-hide');
+            mounted.open = false;
+            await Promise.race([hidden, aTimeout(1500)]);
+            await nextFrame();
+            await nextFrame();
+        }
+        mounted = undefined;
+    });
+    // Known, pre-existing noise from @lit-labs/virtualizer (a "ResizeObserver loop" notice, and a detached-list error
+    // when the visible list swaps between a short and a long data set). The browser raises them as window errors,
+    // which would fail whichever test is running; the assertions below still decide pass or fail. The detached-list
+    // errors are matched on message AND a `virtualizer` frame in the stack, so the same message from anywhere else
+    // still fails the test. "ResizeObserver loop" is a browser notice with no stack.
+    const virtualizerErrors = ['ChildPart` has no `parentNode`', "reading 'insertBefore'"];
+    let previousOnError;
+    before(() => {
+        previousOnError = window.onerror;
+        window.onerror = (message, source, lineno, colno, error) => {
+            if (typeof message === 'string') {
+                if (message.includes('ResizeObserver loop'))
+                    return true;
+                if (virtualizerErrors.some(known => message.includes(known)) && error?.stack?.toLowerCase().includes('virtualizer')) {
+                    return true;
+                }
+            }
+            return previousOnError ? previousOnError.call(window, message, source, lineno, colno, error) : false;
+        };
+    });
+    after(() => {
+        window.onerror = previousOnError;
+    });
+    async function mount(showTooltip, value = ['option-1', 'option-2']) {
+        const el = await fixture(html `<nile-virtual-select
+      multiple
+      ?showTooltip=${showTooltip}
+      .data=${OPTIONS}
+      .value=${value}
+    ></nile-virtual-select>`);
+        await el.updateComplete;
+        const shown = oneEvent(el, 'nile-after-show');
+        el.shadowRoot.querySelector('[part="combobox"]').dispatchEvent(new MouseEvent('mousedown', { bubbles: true, composed: true, button: 0 }));
+        await shown;
+        await aTimeout(50);
+        mounted = el;
+        return el;
+    }
+    async function toggleSelected(el) {
+        el.shadowRoot.querySelector('.select__footer nile-checkbox').click();
+        await el.updateComplete;
+        await aTimeout(30);
+    }
+    // The standalone select has no sized container here, so its options are not laid out; drive the same
+    // selection handler the option click uses.
+    async function pick(el, value) {
+        el.handleOptionSelection({ value });
+        await el.updateComplete;
+        await aTimeout(30);
+    }
+    const values = (el) => el.data.map((item) => item.value);
+    it('E1. showtooltip: an external value replace recomputes the Selected list', async () => {
+        const el = await mount(true);
+        await toggleSelected(el);
+        expect(values(el)).to.deep.equal(['option-1', 'option-2']);
+        el.value = ['option-5'];
+        await el.updateComplete;
+        await aTimeout(30);
+        expect(el.showSelected).to.be.true;
+        expect(values(el)).to.deep.equal(['option-5']);
+    });
+    it('E2. showtooltip: an external value that adds or removes items follows the Selected list', async () => {
+        const el = await mount(true);
+        await toggleSelected(el);
+        el.value = ['option-1', 'option-2', 'option-7'];
+        await el.updateComplete;
+        await aTimeout(30);
+        expect(values(el)).to.deep.equal(['option-1', 'option-2', 'option-7']);
+        el.value = ['option-2'];
+        await el.updateComplete;
+        await aTimeout(30);
+        expect(values(el)).to.deep.equal(['option-2']);
+    });
+    it('E3. showtooltip: an external empty value leaves the Selected view', async () => {
+        const el = await mount(true);
+        await toggleSelected(el);
+        el.value = [];
+        await el.updateComplete;
+        await aTimeout(30);
+        expect(el.showSelected).to.be.false;
+        expect(el.data.length).to.equal(200);
+    });
+    it('E4. showtooltip: a normal uncheck in the Selected view is not treated as external', async () => {
+        const el = await mount(true);
+        await toggleSelected(el);
+        await pick(el, 'option-2');
+        expect(el.value).to.deep.equal(['option-1']);
+        expect(values(el)).to.deep.equal(['option-1', 'option-2']);
+    });
+    it('E5. without showtooltip an external value leaves the Selected list as it was (pre-2.0.9)', async () => {
+        const el = await mount(false);
+        await toggleSelected(el);
+        el.value = ['option-5'];
+        await el.updateComplete;
+        await aTimeout(30);
+        expect(el.showSelected).to.be.true;
+        expect(values(el)).to.deep.equal(['option-1', 'option-2']);
+    });
+});
 //# sourceMappingURL=nile-virtual-select.test.js.map