@aquera/nile-elements 2.0.12 → 2.0.14

package/src/nile-virtual-select/nile-virtual-select.test.ts

@@ -1,5 +1,6 @@
-import { aTimeout, expect, fixture, html, nextFrame } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, nextFrame, waitUntil } from '@open-wc/testing';
 import './nile-virtual-select';
+import '../nile-input/nile-input';
 import type { NileVirtualSelect } from './nile-virtual-select';
 
 describe('NileVirtualSelect', () => {
@@ -140,7 +141,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
   it('V1. multiple + no max-options-visible + autoResize=false renders fitted chips', async () => {
     const host = await fixture<HTMLElement>(
       html`<div style="width: 320px">
-        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
       </div>`
     );
@@ -156,7 +157,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
   it('V2. multiple + no max-options-visible + autoResize=true refits when the container resizes', async () => {
     const host = await fixture<HTMLElement>(
       html`<div style="width: 480px">
-        <nile-virtual-select multiple autoresize .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple autoresize .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
       </div>`
     );
@@ -177,7 +178,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
   it('V3. explicit max-options-visible switches to fixed-count layout', async () => {
     const host = await fixture<HTMLElement>(
       html`<div style="width: 320px">
-        <nile-virtual-select
+        <nile-virtual-select showtooltip
           multiple
           max-options-visible="2"
           .data=${DATA}
@@ -197,7 +198,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
   it('V3b. max-options-visible set as a property also switches to fixed-count layout', async () => {
     const host = await fixture<HTMLElement>(
       html`<div style="width: 320px">
-        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
       </div>`
     );
@@ -215,7 +216,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
   it('V3c. the default max-options-visible is still 3 and reading it does not opt out', async () => {
     const host = await fixture<HTMLElement>(
       html`<div style="width: 320px">
-        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
       </div>`
     );
@@ -272,9 +273,9 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
   it('V7. nile-select and nile-virtual-select agree on when fitting is active', async () => {
     const host = await fixture<HTMLElement>(
       html`<div style="width: 320px">
-        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
-        <nile-virtual-select
+        <nile-virtual-select showtooltip
           multiple
           max-options-visible="2"
           .data=${DATA}
@@ -321,7 +322,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
       }).length;
   }
 
-  it('V12. without showtooltip a fitted chip is never truncated', async () => {
+  it('V12. without showtooltip the pre-2.0.9 chip row is used', async () => {
     const host = await fixture<HTMLElement>(
       html`<div style="width: 480px">
         <nile-virtual-select multiple .data=${DATA} .value=${LABELS}></nile-virtual-select>
@@ -329,11 +330,16 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
     );
     const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
     await settle(el);
+    await aTimeout(20);
+    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);
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.false;
+    expect(el.shadowRoot!.querySelector('button.select__tags-count')).to.not.exist;
+    expect(chips(el).every(chip => !chip.style.maxWidth)).to.be.true;
+    const overflowCount = el.shadowRoot!.querySelector('span.select__tags-count');
+    expect(overflowCount).to.exist;
+    expect(overflowCount!.textContent).to.contain('More');
   });
 
   it('V13. showtooltip is what allows a fitted chip to be truncated', async () => {
@@ -354,7 +360,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
     expect(clippedChipCount(el)).to.be.greaterThan(0);
   });
 
-  it('V8. no showtooltip attribute hides the chip tooltip', async () => {
+  it('V8. no showtooltip attribute renders no chip tooltips', async () => {
     const host = await fixture<HTMLElement>(
       html`<div style="width: 200px">
         <nile-virtual-select multiple .data=${DATA} .value=${LABELS}></nile-virtual-select>
@@ -365,8 +371,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
 
     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);
+    expect(tips(el).length).to.equal(0);
   });
 
   it('V9. showtooltip shows the chip tooltip', async () => {
@@ -411,7 +416,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
   it('V11. the overflow button label and text never disagree, including first paint', async () => {
     const host = await fixture<HTMLElement>(
       html`<div style="width: 220px">
-        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
       </div>`
     );
@@ -454,4 +459,387 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
     expect(el.shadowRoot!.querySelector('button.select__tags-count')).to.not
       .exist;
   });
+
+  it('G1. default chips are not capped by the 2.0.9 chip styles; showtooltip caps them', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 480px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS.slice(0, 2)}></nile-virtual-select>
+        <nile-virtual-select multiple showtooltip .data=${DATA} .value=${LABELS.slice(0, 2)}></nile-virtual-select>
+      </div>`
+    );
+    const [plain, tooltip] = Array.from(
+      host.querySelectorAll('nile-virtual-select')
+    ) as NileVirtualSelect[];
+    await settle(plain);
+    await settle(tooltip);
+
+    const [plainChip] = chips(plain);
+    const [tooltipChip] = chips(tooltip);
+    expect(plainChip, 'plain select rendered no chips').to.exist;
+    expect(tooltipChip, 'tooltip select rendered no chips').to.exist;
+    expect(getComputedStyle(plainChip).maxWidth).to.equal('none');
+    expect(getComputedStyle(tooltipChip).maxWidth).to.not.equal('none');
+  });
+});
+
+describe('NileVirtualSelect chipMinWidth / chipMaxWidth attributes', () => {
+  const LABELS = ['Engineering Operations Team', 'Human Resources Department'];
+  const DATA = LABELS.map(label => ({ label, value: label }));
+
+  async function settle(el: NileVirtualSelect) {
+    await el.updateComplete;
+    await nextFrame();
+    await nextFrame();
+    await el.updateComplete;
+  }
+
+  const firstChip = (el: NileVirtualSelect) =>
+    el.shadowRoot!.querySelector('.select__tags nile-tag') as HTMLElement;
+
+  it('R4a. defaults are 110 / 180 and are not written to the host', async () => {
+    const el = await fixture<NileVirtualSelect>(html`<nile-virtual-select multiple .data=${DATA}></nile-virtual-select>`);
+    await settle(el);
+
+    expect(el.chipMinWidth).to.equal(110);
+    expect(el.chipMaxWidth).to.equal(180);
+    expect(el.hasAttribute('chipminwidth')).to.be.false;
+    expect(el.hasAttribute('chipmaxwidth')).to.be.false;
+  });
+
+  it('R4b. attributes still set the properties; properties do not add attributes', async () => {
+    const el = await fixture<NileVirtualSelect>(
+      html`<nile-virtual-select multiple .data=${DATA} chipminwidth="90" chipmaxwidth="150"></nile-virtual-select>`
+    );
+    await settle(el);
+    expect(el.chipMinWidth).to.equal(90);
+    expect(el.chipMaxWidth).to.equal(150);
+
+    const plain = await fixture<NileVirtualSelect>(html`<nile-virtual-select multiple .data=${DATA}></nile-virtual-select>`);
+    plain.chipMaxWidth = 140;
+    await settle(plain);
+    expect(plain.chipMaxWidth).to.equal(140);
+    expect(plain.hasAttribute('chipmaxwidth')).to.be.false;
+  });
+
+  it('R4c. showtooltip still caps squeezed chips at chipMaxWidth', async () => {
+    const host = await fixture<HTMLElement>(html`<div style="width: 300px">
+      <nile-virtual-select multiple showtooltip chipmaxwidth="150" .data=${DATA} .value=${LABELS}></nile-virtual-select>
+    </div>`);
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    const chip = firstChip(el);
+    expect(chip, 'select rendered no chips').to.exist;
+    expect(chip.getBoundingClientRect().width).to.be.within(1, 150.5);
+
+    el.chipMaxWidth = 120;
+    await settle(el);
+    await nextFrame();
+    expect(firstChip(el).getBoundingClientRect().width).to.be.within(1, 120.5);
+  });
+});
+
+describe('NileVirtualSelect footer width with and without noWidthSync', () => {
+  const DATA = [{ label: 'a', value: 'a' }, { label: 'b', value: 'b' }];
+
+  async function openSelect(width: number, noWidthSync: boolean, portal = false) {
+    const host = await fixture<HTMLElement>(html`<div style="width: ${width}px">
+      <nile-virtual-select multiple .noWidthSync=${noWidthSync} .portal=${portal} .data=${DATA} .value=${['a']}></nile-virtual-select>
+    </div>`);
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await el.updateComplete;
+    el.open = true;
+    const listbox = () =>
+      (portal
+        ? document.body.querySelector('.nile-virtual-select-portal-append #listbox')
+        : el.shadowRoot!.querySelector('#listbox')) as HTMLElement | null;
+    await waitUntil(() => (listbox()?.getBoundingClientRect().width ?? 0) > 0, 'listbox never opened');
+    await nextFrame();
+    const box = listbox()!;
+    const footer = box.querySelector('.select__footer') as HTMLElement;
+    const combobox = el.shadowRoot!.querySelector('[part~="combobox"]') as HTMLElement;
+    return { el, listbox: box, footer, combobox };
+  }
+
+  const labelShown = (footer: HTMLElement, selector: string) =>
+    getComputedStyle(footer.querySelector(selector) as HTMLElement).display !== 'none';
+
+  before(() => document.documentElement.style.setProperty('--nile-display-flex', 'flex'));
+  after(() => document.documentElement.style.removeProperty('--nile-display-flex'));
+
+  afterEach(async () => {
+    document.body.querySelectorAll('.nile-virtual-select-portal-append').forEach(n => n.remove());
+    document.head.querySelectorAll('style[id^="nile-virtual-select-styles-"]').forEach(n => n.remove());
+  });
+
+  for (const width of [120, 400]) {
+    it(`R3a. noWidthSync + multiple at ${width}px does not collapse and shows the whole footer`, async () => {
+      const { listbox, footer } = await openSelect(width, true);
+
+      expect(listbox.offsetWidth).to.be.greaterThan(60);
+      expect(listbox.offsetWidth).to.be.at.least(footer.offsetWidth);
+      expect(footer.scrollWidth).to.be.at.most(footer.clientWidth + 1);
+      expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.true;
+      expect(labelShown(footer, '.select__footer-action .select__footer-label')).to.be.true;
+    });
+  }
+
+  it('R3b. width sync at normal width keeps the dropdown as wide as the trigger', async () => {
+    const { listbox, combobox, footer } = await openSelect(400, false);
+
+    expect(Math.abs(listbox.offsetWidth - combobox.offsetWidth)).to.be.below(2);
+    expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.true;
+  });
+
+  it('R3c. width sync at a narrow width still collapses the footer labels (container queries kept)', async () => {
+    const { listbox, combobox, footer } = await openSelect(130, false);
+
+    expect(Math.abs(listbox.offsetWidth - combobox.offsetWidth)).to.be.below(2);
+    expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.false;
+  });
+
+  for (const noWidthSync of [false, true]) {
+    it(`R3d. portal (noWidthSync=${noWidthSync}) pins the width and keeps the narrow-footer queries`, async () => {
+      const { el, listbox, combobox, footer } = await openSelect(130, noWidthSync, true);
+
+      expect(listbox.offsetWidth).to.be.within(combobox.offsetWidth - 8, combobox.offsetWidth);
+      expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.false;
+
+      el.open = false;
+      await waitUntil(() => !document.body.querySelector('.nile-virtual-select-portal-append'), 'portal not cleaned up');
+    });
+  }
+});
+
+describe('NileVirtualSelect showtooltip chip layout taken while hidden', () => {
+  const LABELS = ['Engineering Operations Team', 'Human Resources Department'];
+  const DATA = LABELS.map(label => ({ label, value: label }));
+
+  async function frames(n = 3) {
+    for (let i = 0; i < n; i++) await nextFrame();
+  }
+
+  const chipsOf = (el: NileVirtualSelect) =>
+    Array.from(el.shadowRoot!.querySelectorAll('.select__tags nile-tag')) as HTMLElement[];
+
+  async function hiddenSelect(showTooltip: boolean) {
+    const host = await fixture<HTMLElement>(html`<div style="display: none; width: 600px">
+      <nile-virtual-select multiple ?showtooltip=${showTooltip} .data=${DATA} .value=${LABELS}></nile-virtual-select>
+    </div>`);
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await el.updateComplete;
+    await frames();
+    await el.updateComplete;
+    return { host, el };
+  }
+
+  it('R5a. showtooltip chips measured while hidden get real widths once shown', async () => {
+    const { host, el } = await hiddenSelect(true);
+
+    host.style.display = 'block';
+    await frames(4);
+    await el.updateComplete;
+
+    const chips = chipsOf(el);
+    expect(chips.length).to.equal(2);
+    for (const chip of chips) {
+      expect(chip.style.width).to.not.equal('0px');
+      expect(chip.offsetWidth).to.be.greaterThan(50);
+    }
+  });
+
+  it('R5c. without showtooltip a hidden-then-shown select is unaffected (no inline widths)', async () => {
+    const { host, el } = await hiddenSelect(false);
+
+    host.style.display = 'block';
+    await frames(4);
+
+    for (const chip of chipsOf(el)) {
+      expect(chip.style.width).to.equal('');
+      expect(chip.offsetWidth).to.be.greaterThan(50);
+    }
+  });
+});
+
+describe('NileVirtualSelect 2.0.8 compatibility matrix', () => {
+  const DATA = ['a', 'b', 'c'].map(v => ({ label: `L${v}`, value: v }));
+
+  async function settle(el: NileVirtualSelect) {
+    await el.updateComplete;
+    await nextFrame();
+    await nextFrame();
+    await el.updateComplete;
+  }
+
+  const chipCount = (el: NileVirtualSelect) => el.shadowRoot!.querySelectorAll('.select__tags nile-tag').length;
+
+  function record(el: EventTarget, names: string[]) {
+    const seen: string[] = [];
+    names.forEach(name => el.addEventListener(name, () => seen.push(name)));
+    return seen;
+  }
+
+  it('CV1. a value set before data arrives is kept, and survives the data being replaced', async () => {
+    const el = await fixture<NileVirtualSelect>(html`<nile-virtual-select multiple .value=${['b']}></nile-virtual-select>`);
+    await settle(el);
+    el.data = DATA;
+    await settle(el);
+    expect(el.value).to.deep.equal(['b']);
+    expect(chipCount(el)).to.equal(1);
+
+    el.data = [...DATA];
+    await settle(el);
+    expect(el.value).to.deep.equal(['b']);
+    expect(chipCount(el)).to.equal(1);
+  });
+
+  it('CV2. programmatic value updates the chips', async () => {
+    const el = await fixture<NileVirtualSelect>(html`<nile-virtual-select multiple .data=${DATA}></nile-virtual-select>`);
+    await settle(el);
+    el.value = ['a', 'c'];
+    await settle(el);
+    expect(chipCount(el)).to.equal(2);
+    el.value = [];
+    await settle(el);
+    expect(chipCount(el)).to.equal(0);
+  });
+
+  it('CV3. removing a chip updates the value and emits tag-remove', async () => {
+    const el = await fixture<NileVirtualSelect>(html`<nile-virtual-select multiple .data=${DATA} .value=${['a', 'b']}></nile-virtual-select>`);
+    await settle(el);
+    const seen = record(el, ['nile-tag-remove']);
+
+    const chip = el.shadowRoot!.querySelector('.select__tags nile-tag') as HTMLElement;
+    expect(chip, 'select rendered no chips').to.exist;
+    chip.dispatchEvent(new CustomEvent('nile-remove', { bubbles: true, composed: true }));
+    await settle(el);
+
+    expect(el.value).to.deep.equal(['b']);
+    expect(seen).to.deep.equal(['nile-tag-remove']);
+  });
+
+  it('CV4. the clear button empties the value and emits nile-clear', async () => {
+    const el = await fixture<NileVirtualSelect>(html`<nile-virtual-select multiple clearable .data=${DATA} .value=${['a', 'b']}></nile-virtual-select>`);
+    await settle(el);
+    const seen = record(el, ['nile-clear']);
+
+    const clear = el.shadowRoot!.querySelector('[part~="clear-button"]') as HTMLElement;
+    expect(clear, 'clear button rendered').to.exist;
+    clear.click();
+    await settle(el);
+
+    expect(el.value).to.deep.equal([]);
+    expect(chipCount(el)).to.equal(0);
+    expect(seen).to.include('nile-clear');
+  });
+
+  it('CV5. form reset restores the value attribute', async () => {
+    const form = await fixture<HTMLFormElement>(html`<form>
+      <nile-virtual-select name="s" multiple .data=${DATA} value="a"></nile-virtual-select>
+    </form>`);
+    const el = form.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    el.value = ['c'];
+    await settle(el);
+    form.reset();
+    await settle(el);
+
+    expect(el.value).to.deep.equal(['a']);
+  });
+
+  it('CV6. portal + search: typing in the portalled search keeps the value', async () => {
+    const el = await fixture<NileVirtualSelect>(html`<nile-virtual-select multiple portal searchEnabled .data=${DATA} .value=${['a']}></nile-virtual-select>`);
+    await settle(el);
+    el.open = true;
+    await waitUntil(() => document.body.querySelector('.nile-virtual-select-portal-append .select__search nile-input'), 'portal search never rendered');
+    const search = document.body.querySelector('.nile-virtual-select-portal-append .select__search nile-input') as any;
+    await search.updateComplete;
+
+    const input = search.shadowRoot.querySelector('input') as HTMLInputElement;
+    input.value = 'Lb';
+    input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    await settle(el);
+    expect(el.value).to.deep.equal(['a']);
+
+    el.open = false;
+    await waitUntil(() => !document.body.querySelector('.nile-virtual-select-portal-append'), 'portal not cleaned up');
+  });
+
+  it('CV7. reconnecting without showtooltip keeps value and chips', async () => {
+    const host = await fixture<HTMLElement>(html`<div style="width: 500px">
+      <nile-virtual-select multiple .data=${DATA} .value=${['a', 'b']}></nile-virtual-select>
+    </div>`);
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    el.remove();
+    host.appendChild(el);
+    await settle(el);
+
+    expect(el.value).to.deep.equal(['a', 'b']);
+    expect(chipCount(el)).to.equal(2);
+  });
+});
+
+describe('NileVirtualSelect showtooltip tooltip on sub-pixel truncation', () => {
+  const A = 'Engineering Operations';
+  const B = 'Human Resources Department And Payroll';
+
+  async function frames(n = 5) {
+    for (let i = 0; i < n; i++) await nextFrame();
+  }
+
+  async function mount(width: number, chipMaxWidth: number) {
+    const host = await fixture<HTMLElement>(html`<div style="width: ${width}px">
+      <nile-virtual-select multiple showtooltip chipminwidth="40" chipmaxwidth=${chipMaxWidth} .data=${[A, B].map(v => ({ label: v, value: v }))} .value=${[A, B]}></nile-virtual-select>
+    </div>`);
+    const el = host.querySelector('nile-virtual-select') as any;
+    await el.updateComplete;
+    await frames();
+    await el.updateComplete;
+    await frames(2);
+    return el;
+  }
+
+  function visiblyCut(chip: HTMLElement) {
+    const content = chip.shadowRoot!.querySelector('[part="content"]') as HTMLSlotElement;
+    const text = content.assignedNodes({ flatten: true }).find(n => n.textContent?.trim())!;
+    const range = document.createRange();
+    range.selectNodeContents(text);
+    const over = range.getBoundingClientRect().right - content.getBoundingClientRect().right;
+    return { cut: over > 1 / 64, over, pxGap: content.scrollWidth - content.clientWidth };
+  }
+
+  function chipsAndTips(el: any) {
+    const chips = Array.from(el.shadowRoot.querySelectorAll('.select__tags nile-tag')) as HTMLElement[];
+    const tips = Array.from(el.shadowRoot.querySelectorAll('.select__tags nile-lite-tooltip')) as HTMLElement[];
+    return chips
+      .map((chip, i) => ({ chip, tipOn: !!tips[i] && !tips[i].hasAttribute('disabled') }))
+      .filter(({ chip }) => chip.style.display !== 'none');
+  }
+
+  it('TT1. every visibly cut chip has its tooltip, every uncut chip has none (sweep across the edge)', async () => {
+    const wide = await mount(900, 400);
+    const natural = chipsAndTips(wide)[0].chip.offsetWidth;
+
+    let subPixelCuts = 0;
+    for (let max = natural - 4; max <= natural + 1; max += 0.25) {
+      const el = await mount(330, max);
+      for (const { chip, tipOn } of chipsAndTips(el)) {
+        const { cut, pxGap } = visiblyCut(chip);
+        expect(tipOn, `chipMaxWidth ${max}: tooltip ${tipOn} but cut ${cut}`).to.equal(cut);
+        if (cut && pxGap <= 1) subPixelCuts++;
+      }
+    }
+    expect(subPixelCuts, 'sweep reached the sub-pixel truncation window').to.be.greaterThan(0);
+  });
+
+  it('TT2. chips at their natural width get no tooltip', async () => {
+    const el = await mount(900, 400);
+    for (const { chip, tipOn } of chipsAndTips(el)) {
+      expect(visiblyCut(chip).cut).to.be.false;
+      expect(tipOn).to.be.false;
+    }
+  });
 });