Skip to content

Fix Bazza UI Filter Tests - Comprehensive Test Improvements #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaruesink merged 3 commits into from
May 26, 2025
Merged

Fix Bazza UI Filter Tests - Comprehensive Test Improvements #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
90a2c92
Fix DataTable pagination and accessibility
codegen-sh[bot] May 26, 2025
3a1ead0
Fix filter tests: Add screen import, improve timing, and try multiple…
codegen-sh[bot] May 26, 2025
7d6b959
Add React Router decorator and testSimpleFilter function
codegen-sh[bot] May 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 78 additions & 24 deletions apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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<SortingState> = (updaterOrValue) => {
Expand All @@ -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 ---
Expand Down Expand Up @@ -446,7 +446,17 @@ function DataTableWithBazzaFilters() {
<li>Server provides filtered/paginated/sorted data and faceted counts.</li>
</ul>
<DataTableFilter columns={filterColumns} filters={filters} actions={actions} strategy={strategy} />
<DataTable className="mt-4" table={table} columns={columns.length} />
<DataTable
className="mt-4"
table={table}
columns={columns.length}
pagination={true}
pageCount={pageCount}
onPaginationChange={(pageIndex, pageSize) => {
// Handle pagination change if needed
console.log('Pagination changed:', { pageIndex, pageSize });
}}
/>
</div>
);
}
Expand Down Expand Up @@ -479,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<SortingState> = (updaterOrValue) => {
Expand All @@ -491,7 +501,7 @@ function DataTableWithClientSideFilters() {
searchParams.delete('sortField');
searchParams.delete('sortOrder');
}
navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
setSearchParams(searchParams);
};

// --- Bazza UI Filter Setup ---
Expand Down Expand Up @@ -554,7 +564,17 @@ function DataTableWithClientSideFilters() {
<li>Real-time filtering without server requests.</li>
</ul>
<DataTableFilter columns={filterColumns} filters={filters} actions={actions} strategy={strategy} />
<DataTable className="mt-4" table={table} columns={columns.length} />
<DataTable
className="mt-4"
table={table}
columns={columns.length}
pagination={true}
pageCount={pageCount}
onPaginationChange={(pageIndex, pageSize) => {
// Handle pagination change if needed
console.log('Pagination changed:', { pageIndex, pageSize });
}}
/>
</div>
);
}
Expand Down Expand Up @@ -764,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
Expand All @@ -783,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);

Expand Down Expand Up @@ -979,21 +1037,17 @@ function SimpleDataTableFilterTest() {

export const SimpleFilterTest: Story = {
render: () => <SimpleDataTableFilterTest />,
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) ---
Expand Down
12 changes: 10 additions & 2 deletions packages/components/src/ui/data-table/data-table-pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ export function DataTablePagination({ pageCount, onPaginationChange }: DataTable
};

return (
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between px-2 py-2">
<nav
role="navigation"
aria-label="Data table pagination"
className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between px-2 py-2"
>
<div className="flex-1 text-sm text-muted-foreground">
{pageSize} rows per page
</div>
Expand Down Expand Up @@ -52,6 +56,7 @@ export function DataTablePagination({ pageCount, onPaginationChange }: DataTable
className="h-8 w-8 p-0"
onClick={() => updateParams(0, pageSize)}
disabled={page === 0}
aria-label="Go to first page"
>
<span className="sr-only">Go to first page</span>
<DoubleArrowLeftIcon className="h-4 w-4" />
Expand All @@ -61,6 +66,7 @@ export function DataTablePagination({ pageCount, onPaginationChange }: DataTable
className="h-8 w-8 p-0"
onClick={() => updateParams(page - 1, pageSize)}
disabled={page === 0}
aria-label="Go to previous page"
>
<span className="sr-only">Go to previous page</span>
<ChevronLeftIcon className="h-4 w-4" />
Expand All @@ -70,6 +76,7 @@ export function DataTablePagination({ pageCount, onPaginationChange }: DataTable
className="h-8 w-8 p-0"
onClick={() => updateParams(page + 1, pageSize)}
disabled={page === pageCount - 1}
aria-label="Go to next page"
>
<span className="sr-only">Go to next page</span>
<ChevronRightIcon className="h-4 w-4" />
Expand All @@ -79,12 +86,13 @@ export function DataTablePagination({ pageCount, onPaginationChange }: DataTable
className="h-8 w-8 p-0"
onClick={() => updateParams(pageCount - 1, pageSize)}
disabled={page === pageCount - 1}
aria-label="Go to last page"
>
<span className="sr-only">Go to last page</span>
<DoubleArrowRightIcon className="h-4 w-4" />
</Button>
</div>
</div>
</div>
</nav>
);
}