From 90a2c92d79950b14b29b09170d5aa732cad0b797 Mon Sep 17 00:00:00 2001 From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com> Date: Mon, 26 May 2025 02:35:57 +0000 Subject: [PATCH 1/3] Fix DataTable pagination and accessibility - Add navigation role and aria-label to DataTablePagination component - Enable pagination prop on both server-side and client-side DataTable components - Fix pageCount calculation for client-side filtering - Add proper aria-labels to pagination buttons for better accessibility This fixes the failing tests that were looking for pagination controls with role='navigation'. --- .../data-table-bazza-filters.stories.tsx | 24 +++++++++++++++++-- .../ui/data-table/data-table-pagination.tsx | 12 ++++++++-- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx b/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx index 4db0bd9b..743c7546 100644 --- a/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx +++ b/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx @@ -446,7 +446,17 @@ function DataTableWithBazzaFilters() {
  • Server provides filtered/paginated/sorted data and faceted counts.
    • - + { + // Handle pagination change if needed + console.log('Pagination changed:', { pageIndex, pageSize }); + }} + /> ); } @@ -554,7 +564,17 @@ function DataTableWithClientSideFilters() {
  • Real-time filtering without server requests.
    • - + { + // Handle pagination change if needed + console.log('Pagination changed:', { pageIndex, pageSize }); + }} + /> ); } diff --git a/packages/components/src/ui/data-table/data-table-pagination.tsx b/packages/components/src/ui/data-table/data-table-pagination.tsx index 396b1833..b76fea66 100644 --- a/packages/components/src/ui/data-table/data-table-pagination.tsx +++ b/packages/components/src/ui/data-table/data-table-pagination.tsx @@ -22,7 +22,11 @@ export function DataTablePagination({ pageCount, onPaginationChange }: DataTable }; return ( -
    +
    - + ); } From 3a1ead0a0c8e2e6a0f47b859fc8b2042f52ce98d Mon Sep 17 00:00:00 2001 From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com> Date: Mon, 26 May 2025 02:45:02 +0000 Subject: [PATCH 2/3] Fix filter tests: Add screen import, improve timing, and try multiple approaches - Import screen from @storybook/test for portal content - Increase wait time for filter value controller to render - Try multiple approaches to find Todo option (text, role, content matcher) - Fix pagination and sorting handlers to use setSearchParams - Add better error handling for filter option selection Still investigating why filter dropdown options are not being found in tests. --- .../data-table-bazza-filters.stories.tsx | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx b/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx index 743c7546..88cd5ca9 100644 --- a/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx +++ b/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx @@ -15,7 +15,7 @@ import { useFilterSync } from '@lambdacurry/forms/ui/utils/use-filter-sync'; // // Add icon imports import { CalendarIcon, CheckCircledIcon, PersonIcon, StarIcon, TextIcon } from '@radix-ui/react-icons'; import type { Meta, StoryContext, StoryObj } from '@storybook/react'; // FIX: Add Meta, StoryObj, StoryContext -import { expect, userEvent, within } from '@storybook/test'; // Add storybook test imports +import { expect, userEvent, within, screen } from '@storybook/test'; // Add storybook test imports import type { ColumnDef, PaginationState, SortingState } from '@tanstack/react-table'; // Added PaginationState, SortingState import { getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'; import type { OnChangeFn } from '@tanstack/react-table'; @@ -381,7 +381,7 @@ function DataTableWithBazzaFilters() { const next = typeof updaterOrValue === 'function' ? updaterOrValue(pagination) : updaterOrValue; searchParams.set('page', next.pageIndex.toString()); searchParams.set('pageSize', next.pageSize.toString()); - navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true }); + setSearchParams(searchParams); }; const handleSortingChange: OnChangeFn = (updaterOrValue) => { @@ -393,7 +393,7 @@ function DataTableWithBazzaFilters() { searchParams.delete('sortField'); searchParams.delete('sortOrder'); } - navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true }); + setSearchParams(searchParams); }; // --- Bazza UI Filter Setup --- @@ -489,7 +489,7 @@ function DataTableWithClientSideFilters() { const next = typeof updaterOrValue === 'function' ? updaterOrValue(pagination) : updaterOrValue; searchParams.set('page', next.pageIndex.toString()); searchParams.set('pageSize', next.pageSize.toString()); - navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true }); + setSearchParams(searchParams); }; const handleSortingChange: OnChangeFn = (updaterOrValue) => { @@ -501,7 +501,7 @@ function DataTableWithClientSideFilters() { searchParams.delete('sortField'); searchParams.delete('sortOrder'); } - navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true }); + setSearchParams(searchParams); }; // --- Bazza UI Filter Setup --- @@ -784,8 +784,26 @@ const testFiltering = async ({ canvasElement }: StoryContext) => { const statusFilter = await canvas.findByText('Status'); await userEvent.click(statusFilter); - // Select a filter value (e.g., "Todo") - const todoOption = await canvas.findByText('Todo'); + // Wait a bit for the filter value controller to render + await new Promise((resolve) => setTimeout(resolve, 500)); + + // Select a filter value (e.g., "Todo") - try different approaches + let todoOption; + try { + // Try finding by text first + todoOption = await screen.findByText('Todo', {}, { timeout: 2000 }); + } catch { + try { + // Try finding by role + todoOption = await screen.findByRole('option', { name: /todo/i }, { timeout: 2000 }); + } catch { + // Try finding any element containing Todo + todoOption = await screen.findByText((content, element) => { + return element?.textContent?.includes('Todo') || false; + }, {}, { timeout: 2000 }); + } + } + await userEvent.click(todoOption); // Apply the filter From 7d6b95971bb934db0a1d3289958b4d907e993bf8 Mon Sep 17 00:00:00 2001 From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com> Date: Mon, 26 May 2025 02:57:08 +0000 Subject: [PATCH 3/3] Add React Router decorator and testSimpleFilter function - Added withReactRouterStubDecorator to SimpleFilterTest story to fix useLocation() error - Defined testSimpleFilter function that was missing - Added proper routing configuration for SimpleDataTableFilterTest component This should resolve the 'useLocation() may be used only in the context of a component' error and the 'testSimpleFilter is not defined' error. --- .../data-table-bazza-filters.stories.tsx | 46 +++++++++++++------ 1 file changed, 31 insertions(+), 15 deletions(-) diff --git a/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx b/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx index 88cd5ca9..e2fd8b53 100644 --- a/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx +++ b/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx @@ -821,6 +821,26 @@ const testFiltering = async ({ canvasElement }: StoryContext) => { expect(filterChip).toBeInTheDocument(); }; +const testSimpleFilter = async ({ canvasElement }: StoryContext) => { + console.log('🚀 Starting Simple Filter Test...'); + + const canvas = within(canvasElement); + + // Check if the basic component renders + const title = await canvas.findByText('Simple Data Table Filter Test'); + expect(title).toBeInTheDocument(); + + // Check if the filter interface renders + const filterInterface = await canvas.findByText('Filter Interface'); + expect(filterInterface).toBeInTheDocument(); + + // Check if pagination controls are present + const paginationControls = canvas.getByRole('navigation', { name: /pagination/i }); + expect(paginationControls).toBeInTheDocument(); + + console.log('✅ Simple Filter Test completed successfully!'); +}; + const testPagination = async ({ canvasElement }: StoryContext) => { const canvas = within(canvasElement); @@ -1017,21 +1037,17 @@ function SimpleDataTableFilterTest() { export const SimpleFilterTest: Story = { render: () => , - play: async ({ canvasElement }) => { - console.log('🚀 Starting Simple Filter Test...'); - - const canvas = within(canvasElement); - - // Check if the basic component renders - const title = await canvas.findByText('Simple Data Table Filter Test'); - expect(title).toBeInTheDocument(); - - // Check if the filter interface renders - const filterInterface = await canvas.findByText('Filter Interface'); - expect(filterInterface).toBeInTheDocument(); - - console.log('✅ Simple Filter Test completed successfully!'); - }, + play: testSimpleFilter, + decorators: [ + withReactRouterStubDecorator({ + routes: [ + { + path: '/', + Component: SimpleDataTableFilterTest, + }, + ], + }), + ], }; // --- Ultra Simple Test Component (No Dependencies) ---