@blotch/dolan 22.2.3 → 22.2.5

package/dist/ui/components/pagination/pagination.test.ts

@@ -1,110 +1,170 @@
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+  within,
+} from '@blotch/angular-lynx-testing-library';
 import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
 import { ICON_LIGHT_COLORS } from '../icon/icon-theme';
 import { UiPagination } from './pagination';
 
+@Component({
+  imports: [UiPagination],
+  template: `
+    <ui-pagination
+      [(page)]="page"
+      [totalPages]="totalPages()"
+      [siblingCount]="siblingCount()"
+      class="mt-4"
+    />
+  `,
+})
+class PaginationHost {
+  readonly page = signal(1);
+  readonly totalPages = signal(5);
+  readonly siblingCount = signal(1);
+}
+
+@Component({
+  imports: [UiPagination],
+  template: `
+    <ui-pagination
+      [totalPages]="2"
+      previousLabel="Back"
+      nextLabel="Forward"
+      [pageLabel]="resultsLabel"
+    />
+  `,
+})
+class LabeledPaginationHost {
+  readonly resultsLabel = (page: number, current: boolean): string =>
+    current ? `Results ${page}, showing` : `Results ${page}`;
+}
+
 /**
- * The screen reader labels of the row's buttons, in order.
+ * Renders the row at a page of a total, with `siblingCount` pages on each
+ * side of the current one.
  */
-const labels = (container: Element): (string | null)[] =>
-  Array.from(container.querySelectorAll('[accessibility-element]')).map((el) =>
-    el.getAttribute('accessibility-label'),
+const renderPagination = async (
+  totalPages: number,
+  page = 1,
+  siblingCount = 1,
+) => {
+  const result = await render(PaginationHost);
+  const host = result.componentRef.instance as PaginationHost;
+  host.totalPages.set(totalPages);
+  host.siblingCount.set(siblingCount);
+  host.page.set(page);
+  await waitForUpdate();
+  return {
+    ...result,
+    host,
+    /** The button a screen reader reads as `label`. */
+    button: (label: string) => result.getByRole('button', { name: label }),
+  };
+};
+
+/**
+ * What the row shows between its arrows, in order: page numbers and gaps.
+ */
+const shown = (container: Element): (string | null)[] =>
+  Array.from(container.querySelectorAll('text')).map(
+    (el) => el.textContent?.trim() ?? null,
   );
 
-describe('UiPagination', () => {
-  const setup = async (totalPages: number, page = 1, siblingCount = 1) => {
-    const { componentRef, container } = await render(UiPagination);
-    const inst = componentRef.instance as UiPagination;
-    setInputSignal(inst.totalPages, totalPages);
-    setInputSignal(inst.siblingCount, siblingCount);
-    inst.page.set(page);
-    await waitForUpdate();
-    return { inst, container };
-  };
+/**
+ * The screen reader labels of the row's buttons, in order. getAllByRole()
+ * finds only what a screen reader reaches as a button, so this also checks
+ * each one's traits and accessibility-element.
+ */
+const labels = (container: Element): (string | null)[] =>
+  within(container as HTMLElement)
+    .getAllByRole('button')
+    .map((button) => button.getAttribute('accessibility-label'));
 
-  it('renders the pagination controls', async () => {
-    const { container } = await setup(5, 2);
-    expect(container).toBeTruthy();
+describe('UiPagination', () => {
+  it('lists every page when they all fit, with the given class', async () => {
+    // With one sibling, up to 5 + 1 * 2 = 7 pages fit without gaps.
+    const { container } = await renderPagination(7, 3);
+    expect(shown(container)).toEqual(['1', '2', '3', '4', '5', '6', '7']);
+    expect(container.querySelector('.gap-1')?.classList).toContain('mt-4');
   });
 
-  it('lists every page when total fits the un-truncated window', async () => {
-    // With siblings=1 the threshold is 5+2 = 7, so a total of 5 stays inline.
-    const { container } = await setup(5, 3);
-    // Each page should render its numeric label.
-    const text = container.textContent ?? '';
-    expect(text).toContain('1');
-    expect(text).toContain('5');
-    expect(text).not.toContain('...');
+  it('leaves a gap before the last page near the start', async () => {
+    const { container } = await renderPagination(10, 2);
+    expect(shown(container)).toEqual(['1', '2', '3', '...', '10']);
   });
 
-  it('inserts a trailing ellipsis when the window is near the start', async () => {
-    // total=10, page=2, siblings=1 → rangeStart=2, rangeEnd=3; gap on right only.
-    const { container } = await setup(10, 2);
-    expect(container.textContent ?? '').toContain('...');
+  it('leaves a gap after the first page near the end', async () => {
+    const { container } = await renderPagination(10, 9);
+    expect(shown(container)).toEqual(['1', '...', '8', '9', '10']);
   });
 
-  it('inserts a leading ellipsis when the window is near the end', async () => {
-    // total=10, page=9, siblings=1 → rangeStart=8, rangeEnd=9; gap on left only.
-    const { container } = await setup(10, 9);
-    expect(container.textContent ?? '').toContain('...');
+  it('leaves gaps on both sides in the middle', async () => {
+    const { container } = await renderPagination(10, 5);
+    expect(shown(container)).toEqual(['1', '...', '4', '5', '6', '...', '10']);
   });
 
-  it('inserts leading and trailing ellipses when the window sits in the middle', async () => {
-    // total=10, page=5, siblings=1 → rangeStart=4, rangeEnd=6; gaps on both sides.
-    const { container } = await setup(10, 5);
-    // Two ellipses in the DOM as separate <text> nodes.
-    expect(
-      container.textContent?.match(/\.\.\./g)?.length,
-    ).toBeGreaterThanOrEqual(1);
+  it('widens the window around the current page with more siblings', async () => {
+    const { container } = await renderPagination(12, 6, 2);
+    expect(shown(container)).toEqual([
+      '1',
+      '...',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '...',
+      '12',
+    ]);
   });
 
-  it('prev() decrements page when > 1', async () => {
-    const { inst } = await setup(5, 3);
-    (inst as unknown as { prev: () => void }).prev();
-    await waitForUpdate();
-    expect(inst.page()).toBe(2);
+  it('highlights the current page', async () => {
+    const { button } = await renderPagination(3, 2);
+    expect(button('Page 2, current page').classList).toContain('bg-primary');
+    expect(button('Page 1').classList).toContain('bg-transparent');
+    expect(button('Page 2, current page').textContent?.trim()).toBe('2');
   });
 
-  it('prev() is a no-op at page 1', async () => {
-    const { inst } = await setup(5, 1);
-    (inst as unknown as { prev: () => void }).prev();
+  it('goes to a tapped page', async () => {
+    const { host, button } = await renderPagination(5, 1);
+    fireEvent.tap(button('Page 4'));
     await waitForUpdate();
-    expect(inst.page()).toBe(1);
+    expect(host.page()).toBe(4);
+    expect(button('Page 4, current page').classList).toContain('bg-primary');
   });
 
-  it('next() increments page when < totalPages', async () => {
-    const { inst } = await setup(5, 3);
-    (inst as unknown as { next: () => void }).next();
+  it('steps back and forward with the arrows', async () => {
+    const { host, button } = await renderPagination(5, 3);
+    fireEvent.tap(button('Previous page'));
     await waitForUpdate();
-    expect(inst.page()).toBe(4);
-  });
+    expect(host.page()).toBe(2);
 
-  it('next() is a no-op at the last page', async () => {
-    const { inst } = await setup(5, 5);
-    (inst as unknown as { next: () => void }).next();
+    fireEvent.tap(button('Next page'));
+    fireEvent.tap(button('Next page'));
     await waitForUpdate();
-    expect(inst.page()).toBe(5);
+    expect(host.page()).toBe(4);
   });
 
-  it('goTo() jumps the page directly', async () => {
-    const { inst } = await setup(5, 1);
-    (inst as unknown as { goTo: (n: number) => void }).goTo(4);
+  it("dims the arrow that can't go further, and ignores its taps", async () => {
+    const first = await renderPagination(5, 1);
+    expect(first.button('Previous page').classList).toContain('opacity-50');
+    expect(first.button('Next page').classList).not.toContain('opacity-50');
+    fireEvent.tap(first.button('Previous page'));
     await waitForUpdate();
-    expect(inst.page()).toBe(4);
-  });
+    expect(first.host.page()).toBe(1);
 
-  it('active page carries the primary variant class', async () => {
-    const { container } = await setup(3, 2);
-    // The active page's tile background is bg-primary; the others are transparent.
-    const primary = Array.from(container.querySelectorAll('view')).find((el) =>
-      el.getAttribute('class')?.includes('bg-primary'),
-    );
-    expect(primary).toBeTruthy();
+    const last = await renderPagination(5, 5);
+    expect(last.button('Next page').classList).toContain('opacity-50');
+    fireEvent.tap(last.button('Next page'));
+    await waitForUpdate();
+    expect(last.host.page()).toBe(5);
   });
 
   it('labels every button for screen readers', async () => {
-    const { container } = await setup(3, 2);
+    const { container } = await renderPagination(3, 2);
     expect(labels(container)).toEqual([
       'Previous page',
       'Page 1',
@@ -112,20 +172,10 @@ describe('UiPagination', () => {
       'Page 3',
       'Next page',
     ]);
-    const buttons = container.querySelectorAll('[accessibility-element]');
-    for (const button of Array.from(buttons)) {
-      expect(button.getAttribute('accessibility-traits')).toBe('button');
-    }
   });
 
   it('takes its own labels', async () => {
-    const { inst, container } = await setup(2, 1);
-    setInputSignal(inst.previousLabel, 'Back');
-    setInputSignal(inst.nextLabel, 'Forward');
-    setInputSignal(inst.pageLabel, (page: number, current: boolean) =>
-      current ? `Results ${page}, showing` : `Results ${page}`,
-    );
-    await waitForUpdate();
+    const { container } = await render(LabeledPaginationHost);
     expect(labels(container)).toEqual([
       'Back',
       'Results 1, showing',
@@ -135,7 +185,7 @@ describe('UiPagination', () => {
   });
 
   it('hides the gaps from screen readers', async () => {
-    const { container } = await setup(10, 5);
+    const { container } = await renderPagination(10, 5);
     const gaps = Array.from(container.querySelectorAll('text'))
       .filter((el) => el.textContent === '...')
       .map((el) =>
@@ -145,7 +195,7 @@ describe('UiPagination', () => {
   });
 
   it("draws the arrows in the theme's foreground", async () => {
-    const { container } = await setup(3, 2);
+    const { container } = await renderPagination(3, 2);
     const arrows = Array.from(container.querySelectorAll('svg')).map((el) =>
       el.getAttribute('content'),
     );

package/dist/ui/components/popover/index.ts

@@ -0,0 +1,9 @@
+export { UiPopover, UiPopoverContent, UiPopoverTrigger } from './popover';
+export {
+  ARROW_HEIGHT,
+  ARROW_WIDTH,
+  UiPopoverPanel,
+  popoverArrow,
+  type PopoverAnchor,
+  type PopoverPhase,
+} from './popover-panel';