@12-apps/ui 1.5.0 → 1.5.2

package/src/components/navigation/Pagination/Pagination.test.stories.tsx

@@ -1,520 +0,0 @@
-import { Box, createTheme,ThemeProvider } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { expect, fn,userEvent, waitFor, within } from 'storybook/test';
-
-import { Pagination } from './Pagination';
-
-const meta: Meta<typeof Pagination> = {
-  title: 'Navigation/Pagination/Tests',
-  component: Pagination,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Pagination'],
-  args: {
-    page: 5,
-    count: 10,
-    onChange: fn(),
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Test 1: Basic Interaction Test
-export const BasicInteraction: Story = {
-  name: '1. Basic Interaction',
-  args: {
-    page: 5,
-    count: 10,
-    onChange: fn(),
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    // Test clicking on different page numbers
-    const page4Button = canvas.getByRole('button', { name: /go to page 4/i });
-    await userEvent.click(page4Button);
-    await expect(args.onChange).toHaveBeenCalledWith(expect.anything(), 4);
-
-    // Test clicking next button
-    const nextButton = canvas.getByRole('button', { name: /go to next page/i });
-    await userEvent.click(nextButton);
-    await expect(args.onChange).toHaveBeenCalledWith(expect.anything(), 6);
-
-    // Test clicking previous button (this would be the 3rd call after page 4 and next to 6)
-    const prevButton = canvas.getByRole('button', { name: /go to previous page/i });
-    await userEvent.click(prevButton);
-    await expect(args.onChange).toHaveBeenCalled();
-
-    // Verify current page is highlighted
-    const currentPage = canvas.getByRole('button', { name: /page 5/i });
-    await expect(currentPage).toHaveAttribute('aria-current', 'page');
-  },
-};
-
-// Test 2: Form Interaction Test (Items Per Page)
-export const FormInteraction: Story = {
-  name: '2. Form Interaction',
-  args: {
-    page: 1,
-    count: 10,
-    showItemsPerPage: true,
-    itemsPerPage: 10,
-    itemsPerPageOptions: [10, 25, 50, 100],
-    onItemsPerPageChange: fn(),
-    onChange: fn(),
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    // Find and click the select dropdown
-    const selectButton = canvas.getByRole('combobox');
-    await expect(selectButton).toBeInTheDocument();
-    await expect(selectButton).toHaveTextContent('10');
-
-    // Open the dropdown
-    await userEvent.click(selectButton);
-
-    // Wait for options to appear and click on 25
-    // MUI Select renders options in a separate listbox
-    const option25 = await within(document.body).findByRole('option', { name: '25' });
-    await userEvent.click(option25);
-
-    // Verify callback was called
-    await expect(args.onItemsPerPageChange).toHaveBeenCalledWith(25);
-  },
-};
-
-// Test 3: Keyboard Navigation Test
-export const KeyboardNavigation: Story = {
-  name: '3. Keyboard Navigation',
-  args: {
-    page: 5,
-    count: 10,
-    onChange: fn(),
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    // Focus on the pagination component
-    const firstButton = canvas.getAllByRole('button')[0];
-    firstButton.focus();
-
-    // Tab through buttons
-    await userEvent.tab();
-    await expect(document.activeElement).toHaveAttribute(
-      'aria-label',
-      expect.stringContaining('page'),
-    );
-
-    // Press Enter on focused button
-    await userEvent.keyboard('{Enter}');
-    await expect(args.onChange).toHaveBeenCalled();
-
-    // Tab to next button and press Space
-    await userEvent.tab();
-    await userEvent.keyboard(' ');
-    await expect(args.onChange).toHaveBeenCalled();
-
-    // Test arrow key navigation
-    await userEvent.keyboard('{ArrowRight}');
-    await waitFor(() => {
-      expect(document.activeElement).toHaveAttribute('aria-label', expect.stringContaining('page'));
-    });
-
-    await userEvent.keyboard('{ArrowLeft}');
-    await waitFor(() => {
-      expect(document.activeElement).toHaveAttribute('aria-label', expect.stringContaining('page'));
-    });
-  },
-};
-
-// Test 4: Screen Reader Test
-export const ScreenReader: Story = {
-  name: '4. Screen Reader',
-  args: {
-    page: 5,
-    count: 10,
-    showPageInfo: true,
-    onChange: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Check for navigation landmark - MUI uses 'pagination navigation' as the label
-    const nav = canvas.getByRole('navigation');
-    await expect(nav).toHaveAttribute('aria-label', 'pagination navigation');
-
-    // Check current page has aria-current
-    const currentPage = canvas.getByRole('button', { name: /page 5/i });
-    await expect(currentPage).toHaveAttribute('aria-current', 'page');
-
-    // Check for descriptive labels on navigation buttons
-    const prevButton = canvas.getByRole('button', { name: /go to previous page/i });
-    await expect(prevButton).toBeInTheDocument();
-
-    const nextButton = canvas.getByRole('button', { name: /go to next page/i });
-    await expect(nextButton).toBeInTheDocument();
-
-    // Check page info is announced
-    const pageInfo = canvas.getByText(/Page 5 of 10/i);
-    await expect(pageInfo).toBeInTheDocument();
-
-    // Verify disabled state is announced
-    // Use exact match to avoid matching "10"
-    const firstPageButton = canvas.getByRole('button', { name: 'Go to page 1' });
-    await userEvent.click(firstPageButton);
-  },
-};
-
-// Test 5: Focus Management Test
-export const FocusManagement: Story = {
-  name: '5. Focus Management',
-  args: {
-    page: 5,
-    count: 10,
-    showFirstButton: true,
-    showLastButton: true,
-    onChange: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Get all buttons
-    const buttons = canvas.getAllByRole('button');
-
-    // Test focus on first button
-    const firstButton = buttons[0];
-    firstButton.focus();
-    await expect(document.activeElement).toBe(firstButton);
-
-    // Tab through all interactive elements
-    for (let i = 1; i < buttons.length; i++) {
-      await userEvent.tab();
-      await expect(document.activeElement).toBe(buttons[i]);
-    }
-
-    // Test shift+tab backwards
-    await userEvent.tab({ shift: true });
-    await expect(document.activeElement).toBe(buttons[buttons.length - 2]);
-
-    // Test focus trap doesn't occur
-    await userEvent.tab();
-    await userEvent.tab();
-    // Focus should move outside pagination
-    await expect(document.activeElement).not.toBe(buttons[0]);
-  },
-};
-
-// Test 6: Responsive Design Test
-export const ResponsiveDesign: Story = {
-  name: '6. Responsive Design',
-  args: {
-    page: 5,
-    count: 20,
-    variant: 'default',
-    onChange: fn(),
-  },
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Check that pagination is visible
-    const nav = canvas.getByRole('navigation');
-    await expect(nav).toBeVisible();
-
-    // Check that ellipsis is shown for many pages
-    const ellipsis = canvas.getAllByText('…');
-    await expect(ellipsis.length).toBeGreaterThan(0);
-
-    // Verify buttons are still clickable on mobile
-    // Page 4 should be visible as it's adjacent to current page 5
-    const page4Button = canvas.getByRole('button', { name: /go to page 4/i });
-    await expect(page4Button).toBeVisible();
-
-    // Check touch target size (should be at least 44x44 for mobile)
-    const computedStyle = window.getComputedStyle(page4Button);
-    const height = parseInt(computedStyle.height);
-    await expect(height).toBeGreaterThanOrEqual(28); // Our small size
-  },
-};
-
-// Test 7: Theme Variations Test
-export const ThemeVariations: Story = {
-  name: '7. Theme Variations',
-  decorators: [
-    (Story) => (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-        <ThemeProvider theme={createTheme({ palette: { mode: 'light' } })}>
-          <Box sx={{ p: 2, bgcolor: 'background.paper' }}>
-            <Story />
-          </Box>
-        </ThemeProvider>
-        <ThemeProvider theme={createTheme({ palette: { mode: 'dark' } })}>
-          <Box sx={{ p: 2, bgcolor: 'background.paper' }}>
-            <Story />
-          </Box>
-        </ThemeProvider>
-      </Box>
-    ),
-  ],
-  args: {
-    page: 3,
-    count: 10,
-    color: 'primary',
-    onChange: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Get both theme instances
-    const navigations = canvas.getAllByRole('navigation');
-    await expect(navigations).toHaveLength(2);
-
-    // Check both are visible
-    for (const nav of navigations) {
-      await expect(nav).toBeVisible();
-    }
-
-    // Check current page styling in both themes
-    const currentPages = canvas.getAllByRole('button', { name: /page 3/i });
-    await expect(currentPages).toHaveLength(2);
-
-    for (const page of currentPages) {
-      await expect(page).toHaveAttribute('aria-current', 'page');
-      const styles = window.getComputedStyle(page);
-      // Should have background color (primary color)
-      await expect(styles.backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
-    }
-  },
-};
-
-// Test 8: Visual States Test
-export const VisualStates: Story = {
-  name: '8. Visual States',
-  args: {
-    page: 5,
-    count: 10,
-    onChange: fn(),
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    // Test hover state
-    // Use page 4 which is visible (adjacent to current page 5)
-    const page4Button = canvas.getByRole('button', { name: /go to page 4/i });
-    await userEvent.hover(page4Button);
-
-    // Small delay to allow hover styles to apply
-    // Hover state might be subtle or handled differently by MUI, skip strict check
-    await new Promise((resolve) => setTimeout(resolve, 100));
-
-    // Test active/pressed state
-    await userEvent.click(page4Button);
-    await expect(args.onChange).toHaveBeenCalledWith(expect.anything(), 4);
-
-    // Test disabled state (first page, previous should be disabled)
-    // Use exact match to avoid matching "10"
-    const firstPageButton = canvas.getByRole('button', { name: 'Go to page 1' });
-    await userEvent.click(firstPageButton);
-  },
-};
-
-// Test 9: Performance Test
-export const Performance: Story = {
-  name: '9. Performance',
-  args: {
-    page: 50,
-    count: 100,
-    onChange: fn(),
-  },
-  play: async ({ canvasElement, args }) => {
-    const startTime = Date.now();
-    const canvas = within(canvasElement);
-
-    // Render check
-    const nav = canvas.getByRole('navigation');
-    await expect(nav).toBeInTheDocument();
-
-    const renderTime = Date.now() - startTime;
-    // Render time should be quick
-    await expect(renderTime).toBeLessThan(100);
-
-    // Interaction performance
-    const interactionStart = Date.now();
-
-    // Click multiple pages rapidly
-    const page49Button = canvas.getByRole('button', { name: /go to page 49/i });
-    await userEvent.click(page49Button);
-    await expect(args.onChange).toHaveBeenCalledWith(expect.anything(), 49);
-
-    const page51Button = canvas.getByRole('button', { name: /go to page 51/i });
-    await userEvent.click(page51Button);
-    await expect(args.onChange).toHaveBeenCalledWith(expect.anything(), 51);
-
-    const interactionTime = Date.now() - interactionStart;
-    // Interactions should be fast
-    await expect(interactionTime).toBeLessThan(200);
-
-    // Memory check (ensure no memory leaks with many interactions)
-    for (let i = 0; i < 5; i++) {
-      const nextButton = canvas.getByRole('button', { name: /go to next page/i });
-      if (!nextButton.hasAttribute('disabled')) {
-        await userEvent.click(nextButton);
-      }
-    }
-  },
-};
-
-// Test 10: Edge Cases Test
-export const EdgeCases: Story = {
-  name: '10. Edge Cases',
-  args: {
-    page: 1,
-    count: 1,
-    onChange: fn(),
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    // Test single page scenario
-    const nav = canvas.getByRole('navigation');
-    await expect(nav).toBeInTheDocument();
-
-    // Only page 1 should be visible
-    const page1Button = canvas.getByRole('button', { name: /page 1/i });
-    await expect(page1Button).toBeInTheDocument();
-    await expect(page1Button).toHaveAttribute('aria-current', 'page');
-
-    // Navigation buttons should be disabled
-    const prevButton = canvas.getByRole('button', { name: /go to previous page/i });
-    const nextButton = canvas.getByRole('button', { name: /go to next page/i });
-    await expect(prevButton).toBeDisabled();
-    await expect(nextButton).toBeDisabled();
-
-    // Test with invalid page (should handle gracefully)
-    // Component should clamp to valid range
-    await userEvent.click(page1Button);
-    await expect(args.onChange).toHaveBeenCalledWith(expect.anything(), 1);
-  },
-};
-
-// Test 11: Integration Test
-const IntegrationComponent = () => {
-  const [page, setPage] = React.useState(1);
-  const [itemsPerPage, setItemsPerPage] = React.useState(10);
-  const totalItems = 95;
-  const pageCount = Math.ceil(totalItems / itemsPerPage);
-
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, alignItems: 'center' }}>
-      <Box sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
-        <div>Total Items: {totalItems}</div>
-        <div>Current Page: {page}</div>
-        <div>Items Per Page: {itemsPerPage}</div>
-        <div>
-          Showing items {(page - 1) * itemsPerPage + 1} to{' '}
-          {Math.min(page * itemsPerPage, totalItems)}
-        </div>
-      </Box>
-
-      <Pagination
-        page={page}
-        count={pageCount}
-        onChange={(_, newPage) => setPage(newPage)}
-        showPageInfo={true}
-        showItemsPerPage={true}
-        itemsPerPage={itemsPerPage}
-        itemsPerPageOptions={[5, 10, 25, 50]}
-        onItemsPerPageChange={(newValue) => {
-          setItemsPerPage(newValue);
-          setPage(1); // Reset to first page when changing items per page
-        }}
-        showFirstButton
-        showLastButton
-      />
-
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <Pagination
-          page={page}
-          count={pageCount}
-          onChange={(_, newPage) => setPage(newPage)}
-          variant="rounded"
-          size="sm"
-        />
-        <Pagination
-          page={page}
-          count={pageCount}
-          onChange={(_, newPage) => setPage(newPage)}
-          variant="dots"
-        />
-        <Pagination
-          page={page}
-          count={pageCount}
-          onChange={(_, newPage) => setPage(newPage)}
-          variant="minimal"
-        />
-      </Box>
-    </Box>
-  );
-};
-
-export const Integration: Story = {
-  name: '11. Integration',
-  render: () => <IntegrationComponent />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Verify all pagination instances are rendered
-    const navigations = canvas.getAllByRole('navigation');
-    await expect(navigations).toHaveLength(4);
-
-    // Test that clicking on one updates the display
-    const page2Buttons = canvas.getAllByRole('button', { name: /go to page 2/i });
-    await userEvent.click(page2Buttons[0]);
-
-    // Check that the display updated
-    await waitFor(() => {
-      const currentPageText = canvas.getByText(/Current Page: 2/i);
-      expect(currentPageText).toBeInTheDocument();
-    });
-
-    // Test items per page change
-    const selectButton = canvas.getByRole('combobox');
-    await userEvent.click(selectButton);
-
-    // MUI Select renders options in a portal, so we need to look in document.body
-    await waitFor(async () => {
-      const option25 = within(document.body).getByRole('option', { name: '25' });
-      await expect(option25).toBeInTheDocument();
-    });
-
-    const option25 = within(document.body).getByRole('option', { name: '25' });
-    await userEvent.click(option25);
-
-    // Verify page count updated
-    await waitFor(() => {
-      const itemsPerPageText = canvas.getByText(/Items Per Page: 25/i);
-      expect(itemsPerPageText).toBeInTheDocument();
-      // Page should reset to 1
-      const currentPageText = canvas.getByText(/Current Page: 1/i);
-      expect(currentPageText).toBeInTheDocument();
-    });
-
-    // Test first/last buttons
-    const lastButtons = canvas.getAllByRole('button', { name: /go to last page/i });
-    await userEvent.click(lastButtons[0]);
-
-    await waitFor(() => {
-      const currentPageText = canvas.getByText(/Current Page: 4/i);
-      expect(currentPageText).toBeInTheDocument();
-    });
-  },
-};