fix(Pagination): デザイン修正 (#1407)

* fix(Pagination): PaginationコンポーネントをFigmaに合わせて追加しTablePaginationから使うように修正 * Fix pagination position * Add Pagination story * Add change log * Add test for Pagination * Fix to use toHaveAccessibleErrorMessage since toHaveErrorMessage will be deprecated * Fmt * Fix to apply className to root of Table
4-design · Jul 25, 2023 · 82f912c · 82f912c
1 parent 96ae898
commit 82f912c
Show file tree

Hide file tree

Showing 7 changed files with 356 additions and 33 deletions.
diff --git a/.changeset/great-suns-look.md b/.changeset/great-suns-look.md
@@ -0,0 +1,5 @@
+---
+"@4design/for-ui": patch
+---
+
+fix(Pagination): デザイン修正
diff --git a/packages/for-ui/src/table/Table.stories.tsx b/packages/for-ui/src/table/Table.stories.tsx
@@ -10,6 +10,7 @@ import { PersonData, StaticPersonData } from '../utils/makeData';
 import { ColumnDef } from './ColumnDef';
 import { Table, TableBody, TableFrame, TableHead, TableRow } from './Table';
 import { TableCell } from './TableCell';
+import { Pagination } from './TablePagination';
 import { TableScroller } from './TableScroller';
 
 export default {
@@ -247,3 +248,5 @@ export const WithoutReactTable: Story = () => (
     </TableBody>
   </TableFrame>
 );
+
+export const _Pagination: Story = () => <Pagination total={100} defaultPage={50} />;
diff --git a/packages/for-ui/src/table/Table.tsx b/packages/for-ui/src/table/Table.tsx
@@ -1,4 +1,15 @@
-import { FC, forwardRef, Fragment, MouseEvent, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import {
+  FC,
+  forwardRef,
+  Fragment,
+  MouseEvent,
+  useCallback,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   ColumnDef,
   ColumnSort,
@@ -65,10 +76,10 @@ export const Table = <T extends RowData>({
   defaultPage = 1,
   onChangePage,
 }: TableProps<T>) => {
-  // const { data, disablePagination, defaultSortColumn, onSelectRow, onSelectRows, onRowClick, rowRenderer } = props;
   const [sorting, setSorting] = useState<SortingState>(defaultSortColumn ? [defaultSortColumn] : []);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const prevRowSelection = useRef<RowSelectionState>({});
+  const tableId = useId();
 
   const onRowSelectionChange: OnChangeFn<RowSelectionState> = useCallback(
     (updater) => {
@@ -192,8 +203,8 @@ export const Table = <T extends RowData>({
   }, [table, pageSize]);
 
   return (
-    <Fragment>
-      <TableFrame className={className}>
+    <div className={fsx(`flex flex-col gap-2`, className)}>
+      <TableFrame id={tableId}>
         <TableHead>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id} className="table-row">
@@ -233,9 +244,17 @@ export const Table = <T extends RowData>({
         </TableBody>
       </TableFrame>
       {!disablePagination && (
-        <TablePagination page={page} defaultPage={defaultPage} onChangePagination={onChangePage} table={table} />
+        <div className={fsx(`flex w-full justify-center`)}>
+          <TablePagination
+            page={page}
+            defaultPage={defaultPage}
+            onChangePage={onChangePage}
+            table={table}
+            aria-controls={tableId}
+          />
+        </div>
       )}
-    </Fragment>
+    </div>
   );
 };
 

diff --git a/packages/for-ui/src/table/TablePagination.test.tsx b/packages/for-ui/src/table/TablePagination.test.tsx
@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Pagination } from './TablePagination';
+
+describe('Pagination', () => {
+  it('is rendered with first, last, prev, next, and current page buttons', async () => {
+    render(<Pagination total={100} page={50} />);
+    expect(screen.queryByRole('button', { name: '最初のページへ移動' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: '最後のページへ移動' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: '前のページへ移動' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: '次のページへ移動' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'ページ1へ移動' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'ページ100へ移動' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: '現在のページ ページ50' })).toBeInTheDocument();
+  });
+  it('calls event handlers when first page button is clicked', async () => {
+    const user = userEvent.setup();
+    const onChangePage = vi.fn((page: number) => page);
+    const onClickFirstPageButton = vi.fn();
+    render(
+      <Pagination
+        total={100}
+        defaultPage={50}
+        onChangePage={onChangePage}
+        onClickFirstPageButton={onClickFirstPageButton}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: '最初のページへ移動' }));
+    expect(onChangePage).toHaveBeenCalledOnce();
+    expect(onChangePage).toHaveLastReturnedWith(1);
+    expect(onClickFirstPageButton).toHaveBeenCalledOnce();
+  });
+  it('calls event handlers when last page button is clicked', async () => {
+    const user = userEvent.setup();
+    const onChangePage = vi.fn((page: number) => page);
+    const onClickLastPageButton = vi.fn();
+    render(
+      <Pagination
+        total={100}
+        defaultPage={50}
+        onChangePage={onChangePage}
+        onClickLastPageButton={onClickLastPageButton}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: '最後のページへ移動' }));
+    expect(onChangePage).toHaveBeenCalledOnce();
+    expect(onChangePage).toHaveLastReturnedWith(100);
+    expect(onClickLastPageButton).toHaveBeenCalledOnce();
+  });
+  it('calls event handlers when previous page button is clicked', async () => {
+    const user = userEvent.setup();
+    const onChangePage = vi.fn((page: number) => page);
+    const onClickPreviousPageButton = vi.fn();
+    render(
+      <Pagination
+        total={100}
+        defaultPage={50}
+        onChangePage={onChangePage}
+        onClickPreviousPageButton={onClickPreviousPageButton}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: '前のページへ移動' }));
+    expect(onChangePage).toHaveBeenCalledOnce();
+    expect(onChangePage).toHaveLastReturnedWith(49);
+    expect(onClickPreviousPageButton).toHaveBeenCalledOnce();
+  });
+  it('calls event handlers when next page button is clicked', async () => {
+    const user = userEvent.setup();
+    const onChangePage = vi.fn((page: number) => page);
+    const onClickNextPageButton = vi.fn();
+    render(
+      <Pagination
+        total={100}
+        defaultPage={50}
+        onChangePage={onChangePage}
+        onClickNextPageButton={onClickNextPageButton}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: '次のページへ移動' }));
+    expect(onChangePage).toHaveBeenCalledOnce();
+    expect(onChangePage).toHaveLastReturnedWith(51);
+    expect(onClickNextPageButton).toHaveBeenCalledOnce();
+  });
+});