@aquera/nile-elements 2.0.8 → 2.0.10

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

@@ -1,5 +1,6 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, nextFrame } from '@open-wc/testing';
 import './nile-select';
+import '../nile-option/nile-option';
 describe('NileSelect', () => {
     it('1. renders', async () => { const el = await fixture(html `<nile-select></nile-select>`); expect(el).to.exist; });
     it('2. shadow root', async () => { const el = await fixture(html `<nile-select></nile-select>`); expect(el.shadowRoot).to.not.be.null; });
@@ -105,4 +106,344 @@ describe('NileSelect', () => {
     it('99. no nile-card', async () => { const el = await fixture(html `<nile-select></nile-select>`); expect(el.shadowRoot.querySelector('nile-card')).to.be.null; });
     it('100. full integration', async () => { const el = await fixture(html `<nile-select class="sl" id="sl1"></nile-select>`); expect(el.id).to.equal('sl1'); expect(el.shadowRoot).to.not.be.null; expect(el.shadowRoot.querySelector('slot:not([name])')).to.exist; });
 });
+describe('NileSelect chip fitting behaviour matrix', () => {
+    const LABELS = [
+        'Engineering Operations Team',
+        'Human Resources Department',
+        'Finance And Accounting Group',
+        'Customer Success Organisation',
+        'Product Design Studio Unit'
+    ];
+    const options = () => LABELS.map(label => html `<nile-option value=${label}>${label}</nile-option>`);
+    async function settle(el) {
+        await el.updateComplete;
+        await nextFrame();
+        await nextFrame();
+        await el.updateComplete;
+    }
+    function tagsRoot(el) {
+        return el.shadowRoot.querySelector('.select__tags');
+    }
+    function chips(el) {
+        return Array.from(el.shadowRoot.querySelectorAll('.select__tags nile-tag'));
+    }
+    function hiddenChips(el) {
+        return chips(el).filter(chip => chip.style.display === 'none');
+    }
+    it('M1. multiple + no max-options-visible + autoResize=false renders fitted chips', async () => {
+        const host = await fixture(html `<div style="width: 320px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(el.autoResize).to.be.false;
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.true;
+        expect(el.shadowRoot.querySelector('button.select__tags-count')).to.exist;
+        expect(chips(el).length).to.equal(LABELS.length);
+    });
+    it('M2. multiple + no max-options-visible + autoResize=true refits when the container resizes', async () => {
+        const host = await fixture(html `<div style="width: 480px">
+        <nile-select multiple autoresize .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(el.autoResize).to.be.true;
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.true;
+        const wideHidden = hiddenChips(el).length;
+        host.style.width = '180px';
+        await aTimeout(200);
+        await settle(el);
+        expect(hiddenChips(el).length).to.be.at.least(wideHidden);
+    });
+    it('M3. explicit max-options-visible switches to fixed-count layout', async () => {
+        const host = await fixture(html `<div style="width: 320px">
+        <nile-select multiple max-options-visible="2" .value=${LABELS}>
+          ${options()}
+        </nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(el.maxOptionsVisible).to.equal(2);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.false;
+        expect(chips(el).length).to.equal(2);
+        expect(el.shadowRoot.querySelector('span.select__tags-count')).to.exist;
+    });
+    it('M3b. max-options-visible set as a property also switches to fixed-count layout', async () => {
+        const host = await fixture(html `<div style="width: 320px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.true;
+        el.maxOptionsVisible = 1;
+        await settle(el);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.false;
+        expect(chips(el).length).to.equal(1);
+    });
+    it('M3c. the default max-options-visible is still 3 and reading it does not opt out', async () => {
+        const host = await fixture(html `<div style="width: 320px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(el.maxOptionsVisible).to.equal(3);
+        expect(el.maxOptionsVisible).to.equal(3);
+        await settle(el);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.true;
+    });
+    it('M5. autoresize works as a markup attribute', async () => {
+        const b = await fixture(html `<nile-select multiple autoresize></nile-select>`);
+        await b.updateComplete;
+        expect(b.autoResize).to.be.true;
+        const c = await fixture(html `<nile-select multiple></nile-select>`);
+        await c.updateComplete;
+        expect(c.autoResize).to.be.false;
+    });
+    it('M8. virtual-scroll mode keeps fitted chips when max-options-visible was never set', async () => {
+        const host = await fixture(html `<div style="width: 320px">
+        <nile-select
+          multiple
+          enable-virtual-scroll
+          .enableVirtualScroll=${true}
+          .data=${LABELS.map(label => ({ label, value: label }))}
+          .value=${LABELS}
+        ></nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        const inner = el.shadowRoot.querySelector('nile-virtual-select');
+        expect(inner, 'inner nile-virtual-select should render').to.exist;
+        await inner.updateComplete;
+        await nextFrame();
+        const innerTags = inner.shadowRoot.querySelector('.select__tags');
+        expect(innerTags.classList.contains('select__tags--fitted')).to.be.true;
+    });
+    it('M9. virtual-scroll mode forwards an explicit max-options-visible', async () => {
+        const host = await fixture(html `<div style="width: 320px">
+        <nile-select
+          multiple
+          max-options-visible="2"
+          .enableVirtualScroll=${true}
+          .data=${LABELS.map(label => ({ label, value: label }))}
+          .value=${LABELS}
+        ></nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        const inner = el.shadowRoot.querySelector('nile-virtual-select');
+        await inner.updateComplete;
+        await nextFrame();
+        expect(inner.maxOptionsVisible).to.equal(2);
+        expect(inner.shadowRoot
+            .querySelector('.select__tags')
+            .classList.contains('select__tags--fitted')).to.be.false;
+    });
+    it('M10. autoResize reflects to the autoresize attribute', async () => {
+        const el = await fixture(html `<nile-select multiple></nile-select>`);
+        await el.updateComplete;
+        expect(el.hasAttribute('autoresize')).to.be.false;
+        el.autoResize = true;
+        await el.updateComplete;
+        expect(el.hasAttribute('autoresize')).to.be.true;
+        el.autoResize = false;
+        await el.updateComplete;
+        expect(el.hasAttribute('autoresize')).to.be.false;
+    });
+    it('M11. toggling max-options-visible does not leak resize observers or lose the observed container', async () => {
+        const host = await fixture(html `<div style="width: 480px">
+        <nile-select multiple autoresize .value=${LABELS}>
+          ${options()}
+        </nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        el.maxOptionsVisible = 2;
+        await settle(el);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.false;
+        const observed = el.observedTagsContainer;
+        expect(observed, 'observer detached in fixed-count mode').to.be.undefined;
+    });
+    it('M6. the +N button count matches the number of hidden chips', async () => {
+        const host = await fixture(html `<div style="width: 220px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        const overflow = el.shadowRoot.querySelector('button.select__tags-count');
+        const hidden = hiddenChips(el).length;
+        if (hidden > 0) {
+            expect(overflow).to.exist;
+            expect(overflow.textContent.trim()).to.equal(`+${hidden}`);
+            expect(overflow.getAttribute('aria-label')).to.equal(`${hidden} more selected`);
+        }
+        else {
+            // Nothing overflows, so the button is not rendered at all.
+            expect(overflow).to.not.exist;
+        }
+    });
+    // The tooltip is opt-in: `showtooltip` present, and the chip's text clipped.
+    function tips(el) {
+        return Array.from(el.shadowRoot.querySelectorAll('.select__tag-tip'));
+    }
+    function liveTips(el) {
+        return tips(el).filter(tip => !tip.hasAttribute('disabled'));
+    }
+    it('M12. no showtooltip attribute hides the chip tooltip', async () => {
+        const host = await fixture(html `<div style="width: 200px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(el.showTooltip).to.be.false;
+        expect(el.hasAttribute('showtooltip')).to.be.false;
+        expect(tips(el).length).to.be.greaterThan(0);
+        expect(liveTips(el).length).to.equal(0);
+    });
+    it('M13. showtooltip shows the chip tooltip', async () => {
+        const host = await fixture(html `<div style="width: 200px">
+        <nile-select multiple showtooltip .value=${LABELS}>
+          ${options()}
+        </nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(el.showTooltip).to.be.true;
+        expect(liveTips(el).length).to.be.greaterThan(0);
+    });
+    // Truncation is bound to the tooltip: a clipped chip is only acceptable when
+    // something can reveal the value it hid. A chip wider than the whole field is
+    // the one exception - there is nowhere for it to go.
+    function chipContent(chip) {
+        return chip.shadowRoot.querySelector('[part~="content"]');
+    }
+    function clippedChipCount(el) {
+        return chips(el)
+            .filter(chip => chip.style.display !== 'none')
+            .filter(chip => {
+            const content = chipContent(chip);
+            return content.scrollWidth > content.clientWidth + 1;
+        }).length;
+    }
+    it('M16. without showtooltip a fitted chip is never truncated', async () => {
+        const host = await fixture(html `<div style="width: 480px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(el.showTooltip).to.be.false;
+        expect(clippedChipCount(el)).to.equal(0);
+        // The chips that could not fit went into the +N button, not into an ellipsis.
+        expect(hiddenChips(el).length).to.be.greaterThan(0);
+    });
+    it('M17. showtooltip is what allows a fitted chip to be truncated', async () => {
+        const host = await fixture(html `<div style="width: 480px">
+        <nile-select multiple showtooltip .value=${LABELS}>
+          ${options()}
+        </nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(el.showTooltip).to.be.true;
+        expect(clippedChipCount(el)).to.be.greaterThan(0);
+    });
+    it('M14. removing showtooltip hides the chip tooltip again', async () => {
+        const host = await fixture(html `<div style="width: 200px">
+        <nile-select multiple showtooltip .value=${LABELS}>
+          ${options()}
+        </nile-select>
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const [el, control] = Array.from(host.querySelectorAll('nile-select'));
+        await settle(el);
+        await settle(control);
+        expect(liveTips(el).length).to.be.greaterThan(0);
+        el.removeAttribute('showtooltip');
+        await settle(el);
+        expect(el.showTooltip).to.be.false;
+        expect(liveTips(el).length).to.equal(0);
+        // Removing the attribute must land back on the default.
+        expect(tips(el).map(tip => tip.hasAttribute('disabled'))).to.deep.equal(tips(control).map(tip => tip.hasAttribute('disabled')));
+    });
+    it('M15. the overflow button label and text never disagree, including first paint', async () => {
+        const host = await fixture(html `<div style="width: 220px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        // Before the layout frame runs, no button may claim a count it cannot back up.
+        await el.updateComplete;
+        const early = el.shadowRoot.querySelector('button.select__tags-count');
+        if (early) {
+            const shown = early.textContent.trim().replace('+', '');
+            expect(early.getAttribute('aria-label')).to.equal(`${shown} more selected`);
+        }
+        await settle(el);
+        const overflow = el.shadowRoot.querySelector('button.select__tags-count');
+        expect(overflow).to.exist;
+        const shown = overflow.textContent.trim().replace('+', '');
+        expect(overflow.getAttribute('aria-label')).to.equal(`${shown} more selected`);
+        expect(Number(shown)).to.equal(hiddenChips(el).length);
+    });
+    it('M16. no overflow button is rendered when every chip fits', async () => {
+        const host = await fixture(html `<div style="width: 1200px">
+        <nile-select multiple .value=${LABELS.slice(0, 1)}>
+          ${options()}
+        </nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(hiddenChips(el).length).to.equal(0);
+        expect(el.shadowRoot.querySelector('button.select__tags-count')).to.not
+            .exist;
+    });
+    // `<nile-select enableVirtualScroll>` renders a nile-virtual-select in its own
+    // shadow root and hands it the public API by hand. Anything added to one and
+    // not to that list is silently dead on the wrapper form, which is how
+    // showTooltip / chipMinWidth / chipMaxWidth were missed - so assert the whole
+    // chip-fitting surface crosses over, defaults included.
+    function innerVirtual(el) {
+        return el.shadowRoot.querySelector('nile-virtual-select');
+    }
+    it('M17. enableVirtualScroll forwards the chip-fitting properties inward', async () => {
+        const el = await fixture(html `<nile-select
+        multiple
+        enableVirtualScroll
+        showtooltip
+        autoresize
+        chipminwidth="90"
+        chipmaxwidth="160"
+      ></nile-select>`);
+        await el.updateComplete;
+        const inner = innerVirtual(el);
+        expect(inner).to.exist;
+        expect(el.showTooltip).to.be.true;
+        expect(el.chipMinWidth).to.equal(90);
+        expect(el.chipMaxWidth).to.equal(160);
+        expect(el.autoResize).to.be.true;
+        expect(inner.showTooltip).to.equal(el.showTooltip);
+        expect(inner.chipMinWidth).to.equal(el.chipMinWidth);
+        expect(inner.chipMaxWidth).to.equal(el.chipMaxWidth);
+        expect(inner.autoResize).to.equal(el.autoResize);
+    });
+    it('M18. enableVirtualScroll forwards the chip-fitting defaults too', async () => {
+        const el = await fixture(html `<nile-select multiple enableVirtualScroll></nile-select>`);
+        await el.updateComplete;
+        const inner = innerVirtual(el);
+        expect(inner).to.exist;
+        // chipMinWidth defaults to 110 on both sides, so a missing forward looks
+        // correct here - the other two are what actually catch a dropped property.
+        expect(inner.showTooltip).to.be.false;
+        expect(inner.chipMinWidth).to.equal(110);
+        expect(inner.chipMaxWidth).to.equal(180);
+    });
+    it('M19. changing a chip property after first render reaches the inner select', async () => {
+        const el = await fixture(html `<nile-select multiple enableVirtualScroll></nile-select>`);
+        await el.updateComplete;
+        el.showTooltip = true;
+        el.chipMaxWidth = 240;
+        await el.updateComplete;
+        const inner = innerVirtual(el);
+        expect(inner.showTooltip).to.be.true;
+        expect(inner.chipMaxWidth).to.equal(240);
+    });
+});
 //# sourceMappingURL=nile-select.test.js.map