@aquera/nile-elements 2.0.4 → 2.0.6

package/src/nile-app-shell/nile-app-shell.test.ts

@@ -0,0 +1,536 @@
+import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
+import './nile-app-shell';
+import '../nile-app-shell-nav-toggle/nile-app-shell-nav-toggle';
+import '../nile-side-bar/nile-side-bar';
+import type { NileAppShell } from './nile-app-shell';
+import type { NileAppShellNavToggle } from '../nile-app-shell-nav-toggle/nile-app-shell-nav-toggle';
+
+/**
+ * The shell derives its chrome from its own width, so most tests size the host
+ * explicitly and wait for the ResizeObserver to land.
+ */
+const sized = async (width: number) => {
+  const el = await fixture<NileAppShell>(html`
+    <nile-app-shell style="width: ${width}px; height: 600px;">
+      <nav slot="side-nav">nav</nav>
+      <span slot="top-bar">Title</span>
+      <p>page</p>
+      <div slot="panel">assistant</div>
+    </nile-app-shell>
+  `);
+  await waitUntil(() => el.hasAttribute('has-panel'));
+  return el;
+};
+
+/** The same shell with an overlay drawer opted into, which is not the default. */
+const overlaying = async (width: number) => {
+  const el = await fixture<NileAppShell>(html`
+    <nile-app-shell
+      style="width: ${width}px; height: 600px;"
+      overlay-breakpoint="1280"
+    >
+      <nav slot="side-nav">nav</nav>
+      <span slot="top-bar">Title</span>
+      <p>page</p>
+      <div slot="panel">assistant</div>
+    </nile-app-shell>
+  `);
+  await waitUntil(() => el.hasAttribute('has-panel'));
+  return el;
+};
+
+/**
+ * The side-nav track animates, so a width read straight after a state change
+ * catches the row mid-transition and sees room that is about to go away. Waits
+ * for two consecutive frames to agree before geometry is asserted.
+ */
+const settled = async (el: NileAppShell) => {
+  const section = el.shadowRoot!.querySelector('.content-section')!;
+  let last = -1;
+  await waitUntil(
+    () => {
+      const width = Math.round(section.getBoundingClientRect().width);
+      const same = width === last;
+      last = width;
+      return same;
+    },
+    'the shell never settled',
+    { timeout: 3000, interval: 60 }
+  );
+};
+
+const part = (el: NileAppShell, name: string) =>
+  el.shadowRoot!.querySelector(`[part~="${name}"]`) as HTMLElement | null;
+
+describe('NileAppShell — regions', () => {
+  it('1. defaults to an expanded nav, a closed docked panel and a fluid body', async () => {
+    const el = await sized(1440);
+    expect(el.navCollapsed).to.be.false;
+    expect(el.panelOpen).to.be.false;
+    expect(el.panelMode).to.equal('docked');
+    expect(el.contentAlign).to.equal('fluid');
+    expect(el.rail).to.be.false;
+  });
+
+  it('2. mounts only the regions that have slotted content', async () => {
+    const el = await sized(1440);
+    expect(el.hasAttribute('has-side-nav')).to.be.true;
+    expect(el.hasAttribute('has-top-bar')).to.be.true;
+    expect(el.hasAttribute('has-panel')).to.be.true;
+    expect(el.hasAttribute('has-banner')).to.be.false;
+    expect(el.hasAttribute('has-aside')).to.be.false;
+  });
+
+  it('3. reports no panel when the panel slot is empty', async () => {
+    const el = await fixture<NileAppShell>(
+      html`<nile-app-shell><p>page</p></nile-app-shell>`
+    );
+    expect(el.panelAvailable).to.be.false;
+    expect(el.hasAttribute('has-panel')).to.be.false;
+  });
+
+  it('4. renders the top bar inside the container by default', async () => {
+    const el = await sized(1440);
+    expect(part(el, 'container')!.contains(part(el, 'top-bar'))).to.be.true;
+  });
+
+  it('5. spans the shell with the top bar when asked', async () => {
+    const el = await sized(1440);
+    el.topBarPlacement = 'shell';
+    await el.updateComplete;
+    const bar = part(el, 'top-bar')!;
+    expect(bar.classList.contains('shell-top-bar')).to.be.true;
+    expect(part(el, 'container')!.contains(bar)).to.be.false;
+  });
+});
+
+describe('NileAppShell — nav', () => {
+  it('6. collapseNav()/expandNav() drive the rail and reflect it', async () => {
+    const el = await sized(1440);
+    el.collapseNav();
+    await el.updateComplete;
+    expect(el.navCollapsed).to.be.true;
+    expect(el.hasAttribute('rail')).to.be.true;
+
+    el.expandNav();
+    await el.updateComplete;
+    expect(el.hasAttribute('rail')).to.be.false;
+  });
+
+  it('7. toggleNav() flips, and accepts a forced state', async () => {
+    const el = await sized(1440);
+    el.toggleNav();
+    await el.updateComplete;
+    expect(el.navCollapsed).to.be.true;
+    el.toggleNav(true);
+    await el.updateComplete;
+    expect(el.navCollapsed).to.be.true;
+  });
+
+  it('8. emits nile-nav-toggle with the collapsed state', async () => {
+    const el = await sized(1440);
+    const toggled = oneEvent(el, 'nile-nav-toggle');
+    el.collapseNav();
+    const event = await toggled;
+    expect(event.detail.collapsed).to.be.true;
+    expect(event.detail.locked).to.be.false;
+  });
+
+  it('9. mirrors the effective rail onto a slotted nile-side-bar', async () => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell style="width: 1440px; height: 600px;">
+        <nile-side-bar slot="side-nav"></nile-side-bar>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+    const bar = el.querySelector('nile-side-bar')!;
+    el.collapseNav();
+    await el.updateComplete;
+    expect(bar.hasAttribute('collapsed')).to.be.true;
+  });
+
+  it('10. the built-in toggle is disabled, not hidden, while the rail is forced', async () => {
+    const el = await sized(1000);
+    el.openPanel();
+    await waitUntil(() => el.navLocked);
+    const button = part(el, 'nav-toggle') as HTMLButtonElement;
+    expect(button).to.exist;
+    expect(button.disabled).to.be.true;
+    expect(el.hasAttribute('rail')).to.be.true;
+  });
+});
+
+describe('NileAppShell — Ask Aquera panel', () => {
+  it('11. openPanel()/closePanel() drive panel-open', async () => {
+    const el = await sized(1440);
+    el.openPanel();
+    await el.updateComplete;
+    expect(el.panelOpen).to.be.true;
+    expect(el.hasAttribute('panel-open')).to.be.true;
+
+    el.closePanel();
+    await el.updateComplete;
+    expect(el.panelOpen).to.be.false;
+  });
+
+  it('12. openPanel() is a no-op when the route opts out', async () => {
+    const el = await sized(1440);
+    el.noPanel = true;
+    await el.updateComplete;
+    el.openPanel();
+    await el.updateComplete;
+    expect(el.panelOpen).to.be.false;
+    expect(el.hasAttribute('has-panel')).to.be.false;
+  });
+
+  it('13. emits nile-panel-toggle with the open state and mode', async () => {
+    const el = await sized(1440);
+    const toggled = oneEvent(el, 'nile-panel-toggle');
+    el.openPanel();
+    const event = await toggled;
+    expect(event.detail.open).to.be.true;
+    expect(event.detail.mode).to.equal('docked');
+  });
+
+  it('14. pushes rather than overlays, however narrow the shell is', async () => {
+    for (const width of [1000, 820]) {
+      const el = await sized(width);
+      el.openPanel();
+      await el.updateComplete;
+      await settled(el);
+      expect(el.panelMode).to.equal('docked');
+      expect(el.getAttribute('panel-mode')).to.equal('docked');
+      const container = el.shadowRoot!.querySelector('.container')!;
+      const panel = el.shadowRoot!.querySelector('.panel')!;
+      // Beside the page, not over it.
+      expect(container.getBoundingClientRect().right).to.be.at.most(
+        Math.round(panel.getBoundingClientRect().left) + 1
+      );
+    }
+  });
+
+  it("14b. overlays below an author's breakpoint when one is set", async () => {
+    const el = await overlaying(1000);
+    await waitUntil(() => el.panelMode === 'overlay');
+    expect(el.getAttribute('panel-mode')).to.equal('overlay');
+  });
+
+  it('15. an open docked panel forces the rail below the docked breakpoint', async () => {
+    const el = await sized(1360);
+    await waitUntil(() => el.panelMode === 'docked');
+    expect(el.navLocked).to.be.false;
+
+    el.openPanel();
+    await waitUntil(() => el.navLocked);
+    expect(el.hasAttribute('rail')).to.be.true;
+
+    el.closePanel();
+    await waitUntil(() => !el.navLocked);
+    expect(el.hasAttribute('rail')).to.be.false;
+  });
+
+  it('16. the panel close button closes it', async () => {
+    const el = await sized(1440);
+    el.openPanel();
+    await el.updateComplete;
+    (part(el, 'panel-close') as HTMLButtonElement).click();
+    await el.updateComplete;
+    expect(el.panelOpen).to.be.false;
+  });
+
+  it('17. labels the panel and its default heading from panel-label', async () => {
+    const el = await sized(1440);
+    el.panelLabel = 'Ask Aquera';
+    await el.updateComplete;
+    expect(part(el, 'panel')!.getAttribute('aria-label')).to.equal(
+      'Ask Aquera'
+    );
+    expect(part(el, 'panel-title')!.textContent!.trim()).to.equal('Ask Aquera');
+  });
+
+  it('18. Cmd/Ctrl+J toggles the panel', async () => {
+    const el = await sized(1440);
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'j', ctrlKey: true })
+    );
+    await el.updateComplete;
+    expect(el.panelOpen).to.be.true;
+  });
+
+  it('19. Escape closes an overlay panel but leaves a docked one alone', async () => {
+    const docked = await sized(1440);
+    docked.openPanel();
+    await docked.updateComplete;
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await docked.updateComplete;
+    expect(docked.panelOpen).to.be.true;
+
+    const overlay = await overlaying(1000);
+    await waitUntil(() => overlay.panelMode === 'overlay');
+    overlay.openPanel();
+    await overlay.updateComplete;
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await overlay.updateComplete;
+    expect(overlay.panelOpen).to.be.false;
+  });
+
+  it('20. no-panel-shortcut drops the keyboard handling', async () => {
+    const el = await sized(1440);
+    el.noPanelShortcut = true;
+    await el.updateComplete;
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'j', metaKey: true })
+    );
+    await el.updateComplete;
+    expect(el.panelOpen).to.be.false;
+  });
+});
+
+describe('NileAppShell — content container', () => {
+  it('23. content-container makes the slotted page root a size container', async () => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell style="width: 1440px; height: 600px;" content-container>
+        <div class="page">page</div>
+      </nile-app-shell>
+    `);
+    const page = el.querySelector('.page')!;
+    expect(getComputedStyle(page).containerType).to.equal('inline-size');
+
+    el.contentContainer = false;
+    await el.updateComplete;
+    expect(getComputedStyle(page).containerType).to.equal('normal');
+  });
+});
+
+describe('NileAppShellNavToggle', () => {
+  it('21. drives the nearest shell and mirrors its rail state', async () => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell style="width: 1440px; height: 600px;" no-nav-toggle>
+        <nav slot="side-nav">nav</nav>
+        <nile-app-shell-nav-toggle slot="top-bar"></nile-app-shell-nav-toggle>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+    const toggle = el.querySelector<NileAppShellNavToggle>(
+      'nile-app-shell-nav-toggle'
+    )!;
+    await waitUntil(() => toggle.appShell === el);
+
+    // The control is a nile-button, so the raw <button> is a shadow root
+    // deeper. The part is the contract either way.
+    const button = () =>
+      toggle.shadowRoot!.querySelector<HTMLElement & { disabled: boolean }>(
+        '[part~="button"]'
+      )!;
+    button().click();
+    await el.updateComplete;
+    expect(el.navCollapsed).to.be.true;
+
+    await toggle.updateComplete;
+    expect(button().getAttribute('aria-expanded')).to.equal('false');
+  });
+
+  it('22. disables itself while the shell holds the rail', async () => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell
+        style="width: 1000px; height: 600px;"
+        no-nav-toggle
+        panel-open
+      >
+        <nav slot="side-nav">nav</nav>
+        <nile-app-shell-nav-toggle slot="top-bar"></nile-app-shell-nav-toggle>
+        <div slot="panel">assistant</div>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+    const toggle = el.querySelector<NileAppShellNavToggle>(
+      'nile-app-shell-nav-toggle'
+    )!;
+    await waitUntil(() => el.navLocked);
+    await toggle.updateComplete;
+    expect(
+      toggle.shadowRoot!.querySelector<HTMLElement & { disabled: boolean }>(
+        '[part~="button"]'
+      )!.disabled
+    ).to.be.true;
+  });
+});
+
+/**
+ * The row is nav + container + aside + panel. When the sum of what a route
+ * mounts exceeds the shell, something has to give — and the one thing that may
+ * not give is the row overflowing into :host's clip, which silently cuts the
+ * panel off the right edge.
+ */
+describe('NileAppShell — the content row never overflows', () => {
+  const withAside = async (width: number) => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell style="width: ${width}px; height: 600px;" panel-open>
+        <nav slot="side-nav">nav</nav>
+        <span slot="top-bar">Title</span>
+        <p>page</p>
+        <div slot="aside">aside</div>
+        <div slot="panel">assistant</div>
+      </nile-app-shell>
+    `);
+    await waitUntil(() => el.hasAttribute('has-aside'));
+    return el;
+  };
+
+  /** Overflow of the flex row past the box that clips it. */
+  const overflow = (el: NileAppShell) => {
+    const section = el.shadowRoot!.querySelector('.content-section')!;
+    return (
+      section.scrollWidth - Math.round(section.getBoundingClientRect().width)
+    );
+  };
+
+  it('23. tightens the side columns rather than covering the page', async () => {
+    // 232px short of what the row prefers, so the panel and the aside give
+    // some width back — and the page still sits beside the panel, not under.
+    const el = await withAside(1500);
+    await waitUntil(() => el.navLocked);
+    await settled(el);
+    expect(el.panelMode).to.equal('docked');
+    const panel = el.shadowRoot!.querySelector('.panel')!;
+    const width = panel.getBoundingClientRect().width;
+    expect(width).to.be.below(480);
+    expect(width).to.be.at.least(360);
+    expect(overflow(el)).to.equal(0);
+  });
+
+  it('24. rails the nav rather than clip the row', async () => {
+    // 1600 fits the docked panel over a rail, not over the expanded track.
+    const el = await withAside(1600);
+    await waitUntil(() => el.navLocked);
+    await settled(el);
+    expect(el.panelMode).to.equal('docked');
+    expect(overflow(el)).to.equal(0);
+  });
+
+  it('25. holds the container floor while the row has room for it', async () => {
+    const el = await withAside(1800);
+    await waitUntil(() => el.panelMode === 'docked');
+    await settled(el);
+    const container = el.shadowRoot!.querySelector('.container')!;
+    expect(container.getBoundingClientRect().width).to.be.at.least(640);
+    expect(el.navLocked).to.be.false;
+    expect(overflow(el)).to.equal(0);
+  });
+
+  it('26. asks the page for room last, and only after the floors are met', async () => {
+    const el = await withAside(820);
+    await waitUntil(() => el.navLocked);
+    await settled(el);
+    const px = (sel: string) =>
+      el.shadowRoot!.querySelector(sel)!.getBoundingClientRect().width;
+    // Both side columns sit on their floors before the page gives anything.
+    expect(Math.round(px('.panel'))).to.equal(360);
+    expect(Math.round(px('.aside'))).to.equal(240);
+    expect(px('.container')).to.be.below(640);
+    expect(overflow(el)).to.equal(0);
+  });
+
+  it('27. keeps the page above its floor at ordinary widths', async () => {
+    const el = await sized(1300);
+    el.openPanel();
+    await el.updateComplete;
+    await settled(el);
+    expect(el.panelMode).to.equal('docked');
+    const container = el.shadowRoot!.querySelector('.container')!;
+    expect(container.getBoundingClientRect().width).to.be.at.least(640);
+    expect(overflow(el)).to.equal(0);
+  });
+});
+
+/**
+ * An empty flex item is not a free one: it still takes the row's gap before
+ * it, which is enough to pull the bar's content short of its padding edge.
+ */
+describe('NileAppShell — the top bar reaches its padding edge', () => {
+  it('28. an empty actions group reserves no gap', async () => {
+    const el = await sized(1440);
+    // The Ask button lives in that group, so drop it to leave it truly empty.
+    el.noAsk = true;
+    await settled(el);
+    expect(el.hasAttribute('has-top-bar-actions')).to.be.false;
+    expect(el.hasAttribute('has-ask')).to.be.false;
+    const bar = el.shadowRoot!.querySelector('.top-bar') as HTMLElement;
+    const content = el.shadowRoot!.querySelector('.top-bar-content')!;
+    const padEnd = parseFloat(getComputedStyle(bar).paddingInlineEnd);
+    const shortfall =
+      bar.getBoundingClientRect().right - content.getBoundingClientRect().right;
+    expect(Math.round(shortfall)).to.equal(Math.round(padEnd));
+  });
+
+  it('29. slotted actions mount the group', async () => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell style="width: 1440px; height: 600px;">
+        <nav slot="side-nav">nav</nav>
+        <span slot="top-bar">Title</span>
+        <button slot="top-bar-actions">Save</button>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+    await waitUntil(() => el.hasAttribute('has-top-bar-actions'));
+    const actions = el.shadowRoot!.querySelector('.top-bar-actions')!;
+    expect(getComputedStyle(actions).display).to.not.equal('none');
+    expect(actions.getBoundingClientRect().width).to.be.greaterThan(0);
+  });
+});
+
+/**
+ * The Ask door moved onto the shell when nile-app-shell-header became a slot.
+ * It is the one control in the bar that cannot be slotted markup: it turns on
+ * whether a panel is mounted for this route, and it calls openPanel().
+ */
+describe('NileAppShell — the built-in Ask button', () => {
+  const ask = (el: NileAppShell) => part(el, 'ask') as HTMLButtonElement | null;
+
+  it('30. opens the panel', async () => {
+    const el = await sized(1440);
+    expect(el.panelOpen).to.be.false;
+    ask(el)!.click();
+    await el.updateComplete;
+    expect(el.panelOpen).to.be.true;
+  });
+
+  it('31. is absent when the route mounts no panel', async () => {
+    const el = await fixture<NileAppShell>(html`
+      <nile-app-shell style="width: 1440px; height: 600px;">
+        <nav slot="side-nav">nav</nav>
+        <span slot="top-bar">Title</span>
+        <p>page</p>
+      </nile-app-shell>
+    `);
+    await el.updateComplete;
+    expect(el.askVisible).to.be.false;
+    expect(ask(el)).to.be.null;
+  });
+
+  it('32. no-ask drops it for a bar that renders its own', async () => {
+    const el = await sized(1440);
+    el.noAsk = true;
+    await el.updateComplete;
+    expect(el.askVisible).to.be.false;
+    expect(ask(el)).to.be.null;
+  });
+
+  it('33. takes its label from ask-label', async () => {
+    const el = await sized(1440);
+    el.askLabel = 'Ask Aquera';
+    await el.updateComplete;
+    expect(ask(el)!.textContent!.trim()).to.equal('Ask Aquera');
+  });
+
+  it('34. keeps the actions group mounted on its own', async () => {
+    const el = await sized(1440);
+    await settled(el);
+    // Nothing is slotted into top-bar-actions, but the Ask button lives there.
+    expect(el.hasAttribute('has-top-bar-actions')).to.be.false;
+    expect(el.hasAttribute('has-ask')).to.be.true;
+    const actions = el.shadowRoot!.querySelector('.top-bar-actions')!;
+    expect(getComputedStyle(actions).display).to.not.equal('none');
+    expect(actions.getBoundingClientRect().width).to.be.greaterThan(0);
+  });
+});