@astryxdesign/core 0.2.0 → 0.3.0-canary.0b5a38e

package/src/Pagination/Pagination.test.tsx

@@ -119,6 +119,44 @@ describe('Pagination', () => {
       ).toBeInTheDocument();
     });
 
+    it('gives the prev/next carets a hover tooltip matching their accessible name', () => {
+      // The carets are icon-only, so sighted users need a visible label on
+      // hover, not just the accessible name. The tooltip reuses the same
+      // localized string, so it is reachable via aria-describedby.
+      render(<Pagination page={3} onChange={() => {}} totalPages={5} />);
+      const prev = screen.getByRole('button', {name: 'Go to previous page'});
+      const next = screen.getByRole('button', {name: 'Go to next page'});
+      const tooltips = screen.getAllByRole('tooltip', {hidden: true});
+      const tooltipIds = new Set(tooltips.map(el => el.id));
+      expect(
+        prev
+          .getAttribute('aria-describedby')
+          ?.split(' ')
+          .some(id => tooltipIds.has(id)),
+      ).toBe(true);
+      expect(
+        next
+          .getAttribute('aria-describedby')
+          ?.split(' ')
+          .some(id => tooltipIds.has(id)),
+      ).toBe(true);
+    });
+
+    it('renders the prev/next caret icons without an extra mirror wrapper span', () => {
+      // Regression: the RTL mirror used to wrap each chevron in a
+      // display:contents span, which dropped the icon out of the button's
+      // flex-centering context and offset the glyph vertically. The mirror now
+      // rides on the Icon via xstyle, so the icon renders as a direct centered
+      // child. jsdom has no layout engine to assert the pixel centering, but we
+      // can assert the structural fix: the icon carries its own class and is
+      // not the lone child of a bare wrapper span. (Centering is verified
+      // visually in Storybook.)
+      render(<Pagination page={3} onChange={() => {}} totalPages={5} />);
+      const next = screen.getByRole('button', {name: 'Go to next page'});
+      const icon = next.querySelector('.astryx-icon');
+      expect(icon).not.toBeNull();
+    });
+
     it('renders with data-testid', () => {
       render(
         <Pagination
@@ -517,6 +555,445 @@ describe('Pagination', () => {
     });
   });
 
+  // ---------------------------------------------------------------------------
+  // Variant: input
+  // ---------------------------------------------------------------------------
+
+  describe('variant: input', () => {
+    it('renders "Page [ n ] / N" with an editable box in page mode', () => {
+      render(
+        <Pagination
+          page={3}
+          onChange={() => {}}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+        />,
+      );
+      const box = screen.getByRole('spinbutton', {name: 'Go to page'});
+      expect(box).toBeInTheDocument();
+      expect(box).toHaveValue(3);
+      // Visible leading "Page" label and trailing "/ N" total (10 pages).
+      expect(screen.getByText('Page')).toBeInTheDocument();
+      expect(screen.getByText('/ 10')).toBeInTheDocument();
+      // No page-number buttons and no range readout ("Showing 1–N of M").
+      expect(
+        screen.queryByRole('button', {name: /Go to page \d/}),
+      ).not.toBeInTheDocument();
+      expect(screen.queryByText(/Showing/i)).not.toBeInTheDocument();
+      // Flanked by first/prev/next/last.
+      expect(
+        screen.getByRole('button', {name: 'Go to first page'}),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Go to previous page'}),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Go to next page'}),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Go to last page'}),
+      ).toBeInTheDocument();
+    });
+
+    it('bounds the editable box to [1, totalPages] via a NumberInput', () => {
+      render(
+        <Pagination
+          page={3}
+          onChange={() => {}}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+        />,
+      );
+      // The box is a NumberInput (a spinbutton) whose min/max clamp entries to
+      // the valid page range without hand-rolled parsing in Pagination.
+      const box = screen.getByRole('spinbutton', {name: 'Go to page'});
+      expect(box).toHaveAttribute('min', '1');
+      expect(box).toHaveAttribute('max', '10');
+    });
+
+    it('commits a typed page on Enter and rejects an over-range entry', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination
+          page={1}
+          onChange={onChange}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+        />,
+      );
+      const box = screen.getByRole('spinbutton', {name: 'Go to page'});
+      await user.clear(box);
+      await user.type(box, '4{Enter}');
+      expect(onChange).toHaveBeenCalledWith(4);
+
+      onChange.mockClear();
+      await user.clear(box);
+      // The box is a NumberInput bounded to [1, totalPages]: an over-max entry
+      // is rejected and never navigates past the last page.
+      await user.type(box, '99{Enter}');
+      expect(onChange).not.toHaveBeenCalledWith(99);
+    });
+
+    it('commits on blur', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination
+          page={1}
+          onChange={onChange}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+        />,
+      );
+      const box = screen.getByRole('spinbutton', {name: 'Go to page'});
+      await user.clear(box);
+      await user.type(box, '5');
+      await user.tab();
+      expect(onChange).toHaveBeenCalledWith(5);
+    });
+
+    it('reverts to the current page on an invalid or empty entry', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination
+          page={3}
+          onChange={onChange}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+        />,
+      );
+      const box = screen.getByRole('spinbutton', {name: 'Go to page'});
+      // A number input rejects non-numeric characters, so an invalid entry
+      // never navigates and reverts to the committed page on blur.
+      await user.clear(box);
+      await user.type(box, 'abc');
+      await user.tab();
+      expect(onChange).not.toHaveBeenCalled();
+      expect(box).toHaveValue(3);
+
+      // Emptying the box and blurring reverts to the committed page too.
+      await user.clear(box);
+      await user.tab();
+      expect(onChange).not.toHaveBeenCalled();
+      expect(box).toHaveValue(3);
+    });
+
+    it('announces the committed page to screen readers', async () => {
+      const user = userEvent.setup();
+      render(
+        <Pagination
+          page={1}
+          onChange={() => {}}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+        />,
+      );
+      const box = screen.getByRole('spinbutton', {name: 'Go to page'});
+      await user.clear(box);
+      await user.type(box, '4{Enter}');
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('Page 4 of 10');
+      });
+    });
+
+    it('is disabled and does not commit when isDisabled', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination
+          page={2}
+          onChange={onChange}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+          isDisabled
+        />,
+      );
+      const box = screen.getByRole('spinbutton', {name: 'Go to page'});
+      expect(box).toBeDisabled();
+      // Disabled input never fires a change.
+      await user.type(box, '5{Enter}');
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('rejects a below-range entry rather than navigating out of range', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination
+          page={5}
+          onChange={onChange}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+        />,
+      );
+      const box = screen.getByRole('spinbutton', {name: 'Go to page'});
+      await user.clear(box);
+      // The box is bounded to [1, totalPages]: 0 (and negatives) are below the
+      // minimum, so they are rejected and never navigate.
+      await user.type(box, '0{Enter}');
+      expect(onChange).not.toHaveBeenCalledWith(0);
+    });
+
+    it('disables the input when the total is unknown (cursor/hasMore)', () => {
+      render(
+        <Pagination page={2} onChange={() => {}} hasMore variant="input" />,
+      );
+      // With no known page count there is no range to clamp against, so the
+      // editable box is inert rather than accepting entries it can't resolve.
+      expect(
+        screen.getByRole('spinbutton', {name: 'Go to page'}),
+      ).toBeDisabled();
+    });
+
+    it('renders the localized "Page" label by default and a custom pageLabel', () => {
+      const {rerender} = render(
+        <Pagination
+          page={2}
+          onChange={() => {}}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+        />,
+      );
+      // Default: the localized "Page" noun precedes the box.
+      expect(screen.getByText('Page')).toBeInTheDocument();
+
+      // A custom pageLabel relabels the box without changing navigation.
+      rerender(
+        <Pagination
+          page={2}
+          onChange={() => {}}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+          pageLabel="Row"
+        />,
+      );
+      expect(screen.getByText('Row')).toBeInTheDocument();
+      expect(screen.queryByText('Page')).not.toBeInTheDocument();
+      // The trailing "/ N" total stays regardless of the label.
+      expect(screen.getByText('/ 10')).toBeInTheDocument();
+    });
+
+    it('navigates by page (via onChange) even with a custom pageLabel', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination
+          page={1}
+          onChange={onChange}
+          totalItems={100}
+          pageSize={10}
+          variant="input"
+          pageLabel="Row"
+        />,
+      );
+      const box = screen.getByRole('spinbutton', {name: 'Go to page'});
+      // The box holds the page number, and committing drives page navigation.
+      expect(box).toHaveValue(1);
+      await user.clear(box);
+      await user.type(box, '4{Enter}');
+      expect(onChange).toHaveBeenCalledWith(4);
+    });
+
+    // -------------------------------------------------------------------------
+    // First / Last buttons
+    // -------------------------------------------------------------------------
+
+    describe('first/last buttons', () => {
+      it('first jumps to page 1, last jumps to the final page', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(
+          <Pagination
+            page={5}
+            onChange={onChange}
+            totalItems={100}
+            pageSize={10}
+            variant="input"
+          />,
+        );
+        await user.click(
+          screen.getByRole('button', {name: 'Go to first page'}),
+        );
+        expect(onChange).toHaveBeenCalledWith(1);
+
+        onChange.mockClear();
+        await user.click(screen.getByRole('button', {name: 'Go to last page'}));
+        // 100 items / 10 per page → 10 pages.
+        expect(onChange).toHaveBeenCalledWith(10);
+      });
+
+      it('disables first on the first page and last on the last page', () => {
+        const {rerender} = render(
+          <Pagination
+            page={1}
+            onChange={() => {}}
+            totalItems={100}
+            pageSize={10}
+            variant="input"
+          />,
+        );
+        expect(
+          screen.getByRole('button', {name: 'Go to first page'}),
+        ).toBeDisabled();
+        expect(
+          screen.getByRole('button', {name: 'Go to last page'}),
+        ).not.toBeDisabled();
+
+        rerender(
+          <Pagination
+            page={10}
+            onChange={() => {}}
+            totalItems={100}
+            pageSize={10}
+            variant="input"
+          />,
+        );
+        expect(
+          screen.getByRole('button', {name: 'Go to last page'}),
+        ).toBeDisabled();
+        expect(
+          screen.getByRole('button', {name: 'Go to first page'}),
+        ).not.toBeDisabled();
+      });
+
+      it('hides first/last when hasFirstLast is false', () => {
+        render(
+          <Pagination
+            page={3}
+            onChange={() => {}}
+            totalItems={100}
+            pageSize={10}
+            variant="input"
+            hasFirstLast={false}
+          />,
+        );
+        expect(
+          screen.queryByRole('button', {name: 'Go to first page'}),
+        ).not.toBeInTheDocument();
+        expect(
+          screen.queryByRole('button', {name: 'Go to last page'}),
+        ).not.toBeInTheDocument();
+        // prev/next still present.
+        expect(
+          screen.getByRole('button', {name: 'Go to previous page'}),
+        ).toBeInTheDocument();
+        expect(
+          screen.getByRole('button', {name: 'Go to next page'}),
+        ).toBeInTheDocument();
+      });
+
+      it('omits first/last when the total page count is unknown', () => {
+        render(
+          <Pagination page={2} onChange={() => {}} hasMore variant="input" />,
+        );
+        expect(
+          screen.queryByRole('button', {name: 'Go to first page'}),
+        ).not.toBeInTheDocument();
+        expect(
+          screen.queryByRole('button', {name: 'Go to last page'}),
+        ).not.toBeInTheDocument();
+      });
+
+      it('renders the double-chevron icons for first/last', () => {
+        const {container} = render(
+          <Pagination
+            page={3}
+            onChange={() => {}}
+            totalItems={100}
+            pageSize={10}
+            variant="input"
+          />,
+        );
+        // Each default double-chevron icon draws two chevron paths in one <path>
+        // ("M...M..."); assert both first and last render an svg with two moves.
+        const first = screen.getByRole('button', {name: 'Go to first page'});
+        const last = screen.getByRole('button', {name: 'Go to last page'});
+        for (const btn of [first, last]) {
+          const path = btn.querySelector('svg path');
+          expect(path).not.toBeNull();
+          const d = path?.getAttribute('d') ?? '';
+          expect((d.match(/M/g) ?? []).length).toBe(2);
+        }
+        expect(container).toBeTruthy();
+      });
+
+      it('does not add first/last to other variants (e.g. pages)', () => {
+        render(
+          <Pagination
+            page={3}
+            onChange={() => {}}
+            totalItems={100}
+            pageSize={10}
+            variant="pages"
+          />,
+        );
+        expect(
+          screen.queryByRole('button', {name: 'Go to first page'}),
+        ).not.toBeInTheDocument();
+        expect(
+          screen.queryByRole('button', {name: 'Go to last page'}),
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    // -------------------------------------------------------------------------
+    // Custom label via pageLabel
+    // -------------------------------------------------------------------------
+
+    describe('pageLabel', () => {
+      it('renders a custom noun while keeping the "/ N" total', () => {
+        render(
+          <Pagination
+            page={3}
+            onChange={() => {}}
+            totalItems={200}
+            pageSize={20}
+            variant="input"
+            pageLabel="Row"
+          />,
+        );
+        // The custom noun replaces the default "Page"; the total stays.
+        expect(screen.getByText('Row')).toBeInTheDocument();
+        expect(screen.queryByText('Page')).not.toBeInTheDocument();
+        expect(screen.getByText('/ 10')).toBeInTheDocument();
+        // The box still holds the 1-based page number.
+        expect(
+          screen.getByRole('spinbutton', {name: 'Go to page'}),
+        ).toHaveValue(3);
+      });
+
+      it('keeps the input page-navigating with a custom label', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(
+          <Pagination
+            page={1}
+            onChange={onChange}
+            totalPages={10}
+            variant="input"
+            pageLabel="Row"
+          />,
+        );
+        const box = screen.getByRole('spinbutton', {name: 'Go to page'});
+        await user.clear(box);
+        await user.type(box, '5{Enter}');
+        expect(onChange).toHaveBeenCalledWith(5);
+      });
+    });
+  });
+
   // ---------------------------------------------------------------------------
   // Page change callbacks
   // ---------------------------------------------------------------------------
@@ -596,6 +1073,111 @@ describe('Pagination', () => {
     });
   });
 
+  describe('step', () => {
+    it('advances next by step pages', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination page={1} onChange={onChange} totalPages={20} step={5} />,
+      );
+      await user.click(
+        screen.getByRole('button', {name: 'Go forward 5 pages'}),
+      );
+      expect(onChange).toHaveBeenCalledWith(6);
+    });
+
+    it('moves previous by step pages', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination page={11} onChange={onChange} totalPages={20} step={5} />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Go back 5 pages'}));
+      expect(onChange).toHaveBeenCalledWith(6);
+    });
+
+    it('clamps a next step that would overshoot to the last page', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination page={18} onChange={onChange} totalPages={20} step={5} />,
+      );
+      await user.click(
+        screen.getByRole('button', {name: 'Go forward 5 pages'}),
+      );
+      expect(onChange).toHaveBeenCalledWith(20);
+    });
+
+    it('clamps a previous step that would undershoot to the first page', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination page={3} onChange={onChange} totalPages={20} step={5} />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Go back 5 pages'}));
+      expect(onChange).toHaveBeenCalledWith(1);
+    });
+
+    it('falls back to a single-page step for non-integer or < 1 values', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      const {rerender} = render(
+        <Pagination page={5} onChange={onChange} totalPages={20} step={0} />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Go to next page'}));
+      expect(onChange).toHaveBeenLastCalledWith(6);
+
+      rerender(
+        <Pagination page={5} onChange={onChange} totalPages={20} step={2.5} />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Go to next page'}));
+      expect(onChange).toHaveBeenLastCalledWith(6);
+    });
+
+    it('steps the input variant by step pages', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      render(
+        <Pagination
+          page={1}
+          onChange={onChange}
+          totalItems={500}
+          pageSize={25}
+          variant="input"
+          step={5}
+        />,
+      );
+      await user.click(
+        screen.getByRole('button', {name: 'Go forward 5 pages'}),
+      );
+      expect(onChange).toHaveBeenCalledWith(6);
+    });
+
+    it('names the prev/next buttons for the stride when step > 1', () => {
+      render(
+        <Pagination page={5} onChange={() => {}} totalPages={20} step={5} />,
+      );
+      expect(
+        screen.getByRole('button', {name: 'Go forward 5 pages'}),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Go back 5 pages'}),
+      ).toBeInTheDocument();
+    });
+
+    it('keeps the single-page names when step is 1', () => {
+      render(
+        <Pagination page={5} onChange={() => {}} totalPages={20} step={1} />,
+      );
+      expect(
+        screen.getByRole('button', {name: 'Go to next page'}),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Go to previous page'}),
+      ).toBeInTheDocument();
+    });
+  });
+
   // ---------------------------------------------------------------------------
   // changeAction (interruptible, optimistic)
   // ---------------------------------------------------------------------------