@12-apps/ui 1.5.0 → 1.5.2

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

@@ -1,1008 +0,0 @@
-import AccountTree from '@mui/icons-material/AccountTree';
-import Article from '@mui/icons-material/Article';
-import Code from '@mui/icons-material/Code';
-import Dashboard from '@mui/icons-material/Dashboard';
-import Folder from '@mui/icons-material/Folder';
-import Home from '@mui/icons-material/Home';
-import Settings from '@mui/icons-material/Settings';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, fn,userEvent, waitFor, within } from 'storybook/test';
-
-import { Breadcrumbs } from './Breadcrumbs';
-import type { BreadcrumbItem } from './Breadcrumbs.types';
-
-const meta: Meta<typeof Breadcrumbs> = {
-  title: 'Navigation/Breadcrumbs/Tests',
-  component: Breadcrumbs,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Breadcrumbs', 'checked'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Test data with preventDefault to avoid navigation
-const createHandler = () =>
-  fn((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-  });
-
-const basicItems: BreadcrumbItem[] = [
-  { label: 'Home', href: '#home', onClick: createHandler() },
-  { label: 'Products', href: '#products', onClick: createHandler() },
-  { label: 'Electronics', href: '#electronics', onClick: createHandler() },
-  { label: 'Laptops' },
-];
-
-const itemsWithIcons: BreadcrumbItem[] = [
-  {
-    label: 'Dashboard',
-    href: '#dashboard',
-    icon: <Dashboard fontSize="small" />,
-    onClick: createHandler(),
-  },
-  {
-    label: 'Projects',
-    href: '#projects',
-    icon: <Folder fontSize="small" />,
-    onClick: createHandler(),
-  },
-  {
-    label: 'Settings',
-    href: '#settings',
-    icon: <Settings fontSize="small" />,
-    onClick: createHandler(),
-  },
-  { label: 'Profile' },
-];
-
-// ============================
-// 7.2 Interaction Tests
-// ============================
-
-export const BasicInteraction: Story = {
-  name: '🧪 Basic Interaction Test',
-  args: {
-    items: basicItems,
-    variant: 'default',
-    separatorType: 'arrow',
-    maxItems: undefined, // Don't set maxItems to avoid collapsing
-  },
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial render verification', async () => {
-      const nav = canvas.getByRole('navigation', { name: /breadcrumb/i });
-      await expect(nav).toBeInTheDocument();
-
-      // Verify breadcrumb structure
-      const list = within(nav).getByRole('list');
-      await expect(list).toBeInTheDocument();
-
-      // Check for items (should include separators in the count)
-      const listItems = within(list).getAllByRole('listitem');
-      await expect(listItems.length).toBeGreaterThan(0);
-    });
-
-    await step('Check for collapsed vs expanded state', async () => {
-      const nav = canvas.getByRole('navigation');
-      const showMoreButton = within(nav).queryByRole('button', { name: /more/i });
-
-      if (showMoreButton) {
-        await step('Handle collapsed breadcrumb', async () => {
-          // Click show more to expand
-          await userEvent.click(showMoreButton);
-
-          // Wait for menu to appear
-          await waitFor(() => {
-            const menu = canvas.queryByRole('menu') || canvas.queryByRole('list');
-            expect(menu || showMoreButton).toBeInTheDocument();
-          });
-        });
-      }
-    });
-
-    await step('Click interaction on visible breadcrumb items', async () => {
-      // Test home link (should always be visible)
-      const homeLink = canvas.getByRole('link', { name: /home/i });
-      await userEvent.click(homeLink);
-      // Verify navigation was prevented
-      await expect(window.location.hash).not.toBe('#home');
-
-      // Try to find and click other links
-      const allLinks = canvas.getAllByRole('link');
-      if (allLinks.length > 1) {
-        // Click the second link if available
-        await userEvent.click(allLinks[1]);
-        // Verify the appropriate onClick handler was called
-        const secondItem = args.items.find(
-          (item: BreadcrumbItem, index: number) =>
-            index > 0 && item.onClick && allLinks[1].textContent?.includes(item.label),
-        );
-        if (secondItem?.onClick) {
-          await expect(secondItem.onClick).toHaveBeenCalledTimes(1);
-        }
-      }
-    });
-
-    await step('Hover interaction', async () => {
-      const homeLink = canvas.getByRole('link', { name: /home/i });
-      await userEvent.hover(homeLink);
-
-      // Check if hover styles are applied
-      const computedStyle = window.getComputedStyle(homeLink);
-      await expect(computedStyle.backgroundColor || computedStyle.background).toBeTruthy();
-    });
-
-    await step('Verify last item is not clickable', async () => {
-      // The last item in breadcrumbs should be the current page
-      // It may not always be visible if the component is collapsed
-      const nav = canvas.getByRole('navigation');
-      const allTexts = within(nav).queryAllByText(/Laptops|Current Page|Level \d+/);
-
-      // If we can find the last item text
-      if (allTexts.length > 0) {
-        const lastItemText = allTexts[allTexts.length - 1];
-
-        // Verify it's not a link (current page shouldn't be clickable)
-        const parentLink = lastItemText.closest('a');
-        await expect(parentLink).toBeNull();
-      } else {
-        // If items are collapsed, just verify navigation exists
-        await expect(nav).toBeInTheDocument();
-      }
-    });
-  },
-};
-
-export const CollapsedItemsInteraction: Story = {
-  name: '📦 Collapsed Items Interaction Test',
-  args: {
-    items: [
-      { label: 'Level 1', href: '#level1', onClick: createHandler() },
-      { label: 'Level 2', href: '#level2', onClick: createHandler() },
-      { label: 'Level 3', href: '#level3', onClick: createHandler() },
-      { label: 'Level 4', href: '#level4', onClick: createHandler() },
-      { label: 'Level 5', href: '#level5', onClick: createHandler() },
-      { label: 'Level 6', href: '#level6', onClick: createHandler() },
-      { label: 'Current Page' },
-    ],
-    maxItems: 4,
-    collapseBehavior: 'menu',
-    variant: 'glass',
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify collapsed items indicator', async () => {
-      // Check if ellipsis or menu button is present
-      const nav = canvas.getByRole('navigation');
-      const menuButton = within(nav).queryByRole('button', { name: /more/i });
-
-      if (menuButton) {
-        await expect(menuButton).toBeInTheDocument();
-
-        await step('Open collapsed items menu', async () => {
-          await userEvent.click(menuButton);
-
-          // Wait for menu to open
-          await waitFor(() => {
-            const menu = canvas.queryByRole('menu');
-            expect(menu).toBeInTheDocument();
-          });
-        });
-      }
-    });
-  },
-};
-
-// ============================
-// 7.3 Accessibility Tests
-// ============================
-
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  args: {
-    items: basicItems,
-    variant: 'default',
-    showHomeIcon: true,
-    maxItems: undefined, // Prevent collapsing
-  },
-  parameters: {
-    a11y: {
-      element: '#storybook-root',
-      config: {
-        rules: [
-          { id: 'color-contrast', enabled: true },
-          { id: 'aria-required-attr', enabled: true },
-          { id: 'aria-roles', enabled: true },
-          { id: 'aria-valid-attr-value', enabled: true },
-          { id: 'link-name', enabled: true },
-          { id: 'duplicate-id', enabled: true },
-          { id: 'label', enabled: true },
-        ],
-      },
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Tab navigation forward', async () => {
-      const links = canvas.getAllByRole('link');
-
-      // This story renders a fixed trail, so assert the shape up front and then
-      // walk it unconditionally. The old version guarded every assertion behind
-      // a length check, so a breadcrumb that rendered one link would have passed
-      // the whole step without testing any navigation.
-      await expect(links.length).toBeGreaterThanOrEqual(3);
-
-      await userEvent.tab();
-      await waitFor(() => expect(links[0]).toHaveFocus());
-
-      await userEvent.tab();
-      await waitFor(() => expect(links[1]).toHaveFocus());
-
-      await userEvent.tab();
-      await waitFor(() => expect(links[2]).toHaveFocus());
-    });
-
-    await step('Tab navigation backward', async () => {
-      const links = canvas.getAllByRole('link');
-
-      // Focus is on the third link from the previous step; shift-tab steps back
-      // to the second one.
-      await userEvent.tab({ shift: true });
-      await waitFor(() => expect(links[1]).toHaveFocus());
-    });
-
-    await step('Enter key activation', async () => {
-      const homeLink = canvas.getByRole('link', { name: /home/i });
-
-      // Shift-tab back to the first link rather than calling .focus() on it.
-      await userEvent.tab({ shift: true });
-      await waitFor(() => expect(homeLink).toHaveFocus());
-
-      await userEvent.keyboard('{Enter}');
-      // Verify navigation was prevented
-      await expect(window.location.pathname).not.toContain('home');
-    });
-
-    await step('Focus visible on keyboard navigation', async () => {
-      const link = canvas.getAllByRole('link')[0];
-      // Focus is already on the first link from the previous step.
-      await waitFor(() => expect(link).toHaveFocus());
-
-      const computedStyle = window.getComputedStyle(link);
-      // Check for focus outline
-      await expect(computedStyle.outline || computedStyle.boxShadow).toBeTruthy();
-    });
-  },
-};
-
-export const ScreenReaderTest: Story = {
-  name: '🔊 Screen Reader Test',
-  args: {
-    items: itemsWithIcons,
-    ariaLabel: 'Main navigation breadcrumb',
-    variant: 'elevated',
-    showHomeIcon: false,
-    maxItems: undefined, // Prevent collapsing
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify ARIA labels', async () => {
-      const nav = canvas.getByRole('navigation');
-      await expect(nav).toHaveAttribute('aria-label', 'Main navigation breadcrumb');
-    });
-
-    await step('Verify navigation structure', async () => {
-      const nav = canvas.getByRole('navigation');
-      const list = within(nav).getByRole('list');
-      await expect(list).toBeInTheDocument();
-
-      const listItems = within(list).getAllByRole('listitem');
-      // Should have at least some items (breadcrumbs + separators)
-      // The exact count may vary based on collapse state
-      await expect(listItems.length).toBeGreaterThan(0);
-
-      // If not collapsed, should have 7 items (4 breadcrumbs + 3 separators)
-      // If collapsed, will have fewer
-      if (listItems.length === 7) {
-        // Full display mode
-        await expect(listItems).toHaveLength(7);
-      } else {
-        // Collapsed mode - just verify we have some items
-        await expect(listItems.length).toBeGreaterThanOrEqual(2);
-      }
-    });
-
-    await step('Verify current page indication', async () => {
-      // Try to find the last item (Profile)
-      const lastItem = canvas.queryByText('Profile');
-
-      if (lastItem) {
-        const parentLi = lastItem.closest('li');
-
-        // Last item should have aria-current
-        if (parentLi) {
-          const hasAriaCurrent = parentLi.querySelector('[aria-current]');
-          await expect(hasAriaCurrent || lastItem).toBeTruthy();
-        }
-      } else {
-        // If collapsed, just verify navigation exists
-        const nav = canvas.getByRole('navigation');
-        await expect(nav).toBeInTheDocument();
-      }
-    });
-
-    await step('Verify link descriptions', async () => {
-      const links = canvas.getAllByRole('link');
-
-      for (const link of links) {
-        // Each link should have accessible text
-        const text = link.textContent;
-        await expect(text).toBeTruthy();
-        await expect(text?.length).toBeGreaterThan(0);
-      }
-    });
-  },
-};
-
-export const FocusManagement: Story = {
-  name: '🎯 Focus Management Test',
-  args: {
-    items: basicItems,
-    variant: 'glass',
-    elevation: 2,
-    maxItems: undefined, // Prevent collapsing
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Focus order verification', async () => {
-      const links = canvas.getAllByRole('link');
-      const tabIndexes: number[] = [];
-
-      links.forEach((link) => {
-        const tabIndex = link.getAttribute('tabindex');
-        tabIndexes.push(tabIndex ? parseInt(tabIndex) : 0);
-      });
-
-      // All interactive elements should be in tab order
-      tabIndexes.forEach((index) => {
-        expect(index).toBeGreaterThanOrEqual(0);
-      });
-    });
-
-    await step('Focus trap prevention', async () => {
-      const links = canvas.getAllByRole('link');
-      await expect(links.length).toBeGreaterThanOrEqual(3);
-      const lastLink = links[links.length - 1];
-
-      // Tab through every link to reach the last one, then once more: focus must
-      // leave the breadcrumb rather than wrap back to the start.
-      for (let i = 0; i < links.length; i++) {
-        await userEvent.tab();
-      }
-      await waitFor(() => expect(lastLink).toHaveFocus());
-
-      await userEvent.tab();
-      await waitFor(() => expect(lastLink).not.toHaveFocus());
-    });
-
-    await step('Focus restoration after interaction', async () => {
-      const links = canvas.getAllByRole('link');
-      // Find a link with "products" or use the first available link
-      const link = links.find((l) => l.textContent?.toLowerCase().includes('products')) || links[0];
-
-      await expect(link).toBeInTheDocument();
-
-      // Clicking a link focuses it, so the pre-focus this step used to do only
-      // asserted that focus() works. Click, then check focus landed and stayed.
-      await userEvent.click(link);
-      await waitFor(() => expect(link).toHaveFocus());
-    });
-  },
-};
-
-// ============================
-// 7.4 Visual Tests
-// ============================
-
-export const ResponsiveDesign: Story = {
-  name: '📱 Responsive Design Test',
-  args: {
-    items: [
-      { label: 'Home', href: '#home', icon: <Home fontSize="small" />, onClick: createHandler() },
-      {
-        label: 'Documents',
-        href: '#documents',
-        icon: <Article fontSize="small" />,
-        onClick: createHandler(),
-      },
-      {
-        label: 'Projects',
-        href: '#projects',
-        icon: <AccountTree fontSize="small" />,
-        onClick: createHandler(),
-      },
-      {
-        label: 'Development',
-        href: '#development',
-        icon: <Code fontSize="small" />,
-        onClick: createHandler(),
-      },
-      { label: 'Current' },
-    ],
-    variant: 'glass',
-    mobileMaxItems: 3,
-  },
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: {
-          name: 'Mobile',
-          styles: { width: '375px', height: '667px' },
-          type: 'mobile',
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: { width: '768px', height: '1024px' },
-          type: 'tablet',
-        },
-        desktop: {
-          name: 'Desktop',
-          styles: { width: '1920px', height: '1080px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'mobile',
-    },
-    chromatic: {
-      viewports: [375, 768, 1920],
-      delay: 300,
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify mobile layout', async () => {
-      const nav = canvas.getByRole('navigation');
-      const items = within(nav).getAllByRole('listitem');
-
-      // Font size should be legible regardless of the runner's window size. The
-      // old `window.innerWidth <= 768` guard meant this assertion simply did not
-      // run on a wider viewport, so the story silently tested nothing there.
-      const computedStyle = window.getComputedStyle(items[0]);
-      const fontSize = parseFloat(computedStyle.fontSize);
-      await expect(fontSize).toBeGreaterThanOrEqual(14);
-    });
-
-    await step('Verify touch target sizes', async () => {
-      const links = canvas.getAllByRole('link');
-
-      // for...of rather than forEach(async …): the old callbacks returned
-      // promises nobody awaited, so a failed assertion surfaced as an unhandled
-      // rejection instead of a failing step.
-      //
-      // The assertion is that each link renders with a real box. The previous
-      // 20px touch-target check ran only when the runner's window happened to be
-      // ≤768px wide, and its own comment notes MUI's breadcrumb targets can be
-      // smaller than that — so making it unconditional would have asserted
-      // something the component does not actually promise.
-      for (const link of links) {
-        const rect = link.getBoundingClientRect();
-        await expect(rect.height).toBeGreaterThan(0);
-      }
-    });
-  },
-};
-
-export const ThemeVariations: Story = {
-  name: '🎨 Theme Variations Test',
-  args: {
-    items: basicItems,
-    variant: 'glass',
-    color: 'primary',
-  },
-  parameters: {
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'dark', value: '#1a1a1a' },
-      ],
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify theme colors', async () => {
-      const nav = canvas.getByRole('navigation');
-      const computedStyle = window.getComputedStyle(nav);
-
-      // Check if component adapts to theme
-      await expect(computedStyle.backgroundColor || computedStyle.background).toBeTruthy();
-    });
-
-    await step('Verify contrast ratios', async () => {
-      const links = canvas.getAllByRole('link');
-
-      links.forEach(async (link) => {
-        const style = window.getComputedStyle(link);
-        const color = style.color;
-
-        // Ensure text is visible
-        await expect(color).not.toBe('rgba(0, 0, 0, 0)');
-        await expect(color).not.toBe('transparent');
-      });
-    });
-  },
-};
-
-//
-export const VisualStates: Story = {
-  name: '👁️ Visual States Test',
-  args: {
-    items: [
-      { label: 'Active', href: '#active', active: true, onClick: createHandler() },
-      { label: 'Normal', href: '#normal', onClick: createHandler() },
-      { label: 'Hover Me', href: '#hover', onClick: createHandler() },
-      { label: 'Current' },
-    ],
-    variant: 'elevated',
-    elevation: 3,
-    maxItems: undefined, // Prevent collapsing
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Default state', async () => {
-      // First check if links exist, handle collapsed state
-      const links = canvas.queryAllByRole('link');
-      const normalLink = links.find((link) => link.textContent?.includes('Normal'));
-      if (!normalLink) {
-        throw new Error('Normal link not found, possibly due to collapsed state.');
-      }
-
-      const style = window.getComputedStyle(normalLink);
-      await expect(style.opacity).toBe('1');
-    });
-
-    await step('Active state', async () => {
-      const activeItem = canvas.queryByText('Active');
-      if (!activeItem) {
-        throw new Error('Active item not found, possibly due to collapsed state.');
-      }
-
-      const style = window.getComputedStyle(activeItem);
-      // Active item should have different styling
-      await expect(style.fontWeight).toBeTruthy();
-    });
-
-    await step('Current/Last item state', async () => {
-      const currentItem = canvas.queryByText('Current');
-      if (!currentItem) {
-        throw new Error('Current item not found, possibly due to collapsed state.');
-      }
-
-      const style = window.getComputedStyle(currentItem);
-
-      // Last item should have distinct styling
-      await expect(parseInt(style.fontWeight) >= 400).toBe(true);
-
-      // Should not be a link
-      const parentElement = currentItem.closest('a');
-      await expect(parentElement).toBeNull();
-    });
-
-    await step('Hover state', async () => {
-      const links = canvas.queryAllByRole('link');
-      const hoverLink =
-        links.find((l) => l.textContent?.toLowerCase().includes('hover')) ?? links[0];
-
-      // baseline
-      const before = window.getComputedStyle(hoverLink);
-      const beforeBg = before.backgroundColor;
-      const beforeColor = before.color;
-
-      // deterministic hover (works in any env)
-      hoverLink.setAttribute('data-hover', 'true');
-
-      await waitFor(() => {
-        const after = window.getComputedStyle(hoverLink);
-        // pass if either bg OR text color changed
-        expect(after.backgroundColor !== beforeBg || after.color !== beforeColor).toBe(true);
-      });
-    });
-  },
-};
-
-// ============================
-// 7.5 Performance Tests
-// ============================
-
-export const PerformanceTest: Story = {
-  name: '⚡ Performance Test',
-  args: {
-    items: Array.from({ length: 20 }, (_, i) => ({
-      label: `Level ${i + 1}`,
-      href: i < 19 ? `#level${i + 1}` : undefined,
-      onClick: i < 19 ? createHandler() : undefined,
-    })),
-    maxItems: 8,
-    variant: 'default',
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify component renders efficiently', async () => {
-      const nav = canvas.getByRole('navigation');
-      const items = within(nav).getAllByRole('listitem');
-
-      // Assert component renders with expected DOM structure
-      await expect(nav).toBeInTheDocument();
-      await expect(items.length).toBeGreaterThan(0);
-    });
-
-    await step('Test interaction responsiveness', async () => {
-      const links = canvas.getAllByRole('link');
-
-      // Simulate rapid interactions
-      for (let i = 0; i < Math.min(3, links.length); i++) {
-        await userEvent.hover(links[i]);
-        await waitFor(() => {
-          expect(links[i]).toBeInTheDocument();
-        });
-      }
-
-      // Assert interactions work smoothly
-      await expect(links[0]).toBeInTheDocument();
-    });
-
-    await step('Test with collapsed items', async () => {
-      const nav = canvas.getByRole('navigation');
-
-      // Verify collapsed items don't impact performance
-      const visibleItems = within(nav).getAllByRole('listitem');
-      await expect(visibleItems.length).toBeLessThanOrEqual(17); // maxItems * 2 + 1 (for separators)
-    });
-  },
-};
-
-// ============================
-// 7.6 Edge Cases Tests
-// ============================
-
-export const EdgeCases: Story = {
-  name: '🔧 Edge Cases Test',
-  args: {
-    items: [],
-    variant: 'default',
-  },
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-
-    await step('Empty items handling', async () => {
-      // Update with empty array
-      args.items = [];
-      const nav = canvas.queryByRole('navigation');
-
-      if (nav) {
-        const items = within(nav).queryAllByRole('listitem');
-        await expect(items).toHaveLength(0);
-      }
-    });
-
-    await step('Single item handling', async () => {
-      // Update with single item
-      args.items = [{ label: 'Home' }];
-      await waitFor(() => {
-        const homeText = canvas.queryByText('Home');
-        // When there's a single item, it should be rendered
-        if (homeText) {
-          expect(homeText).toBeInTheDocument();
-        } else {
-          // If not found as text, check if it exists in the navigation
-          const nav = canvas.queryByRole('navigation');
-          expect(nav).toBeInTheDocument();
-        }
-      });
-    });
-
-    await step('Long text overflow', async () => {
-      const longLabel =
-        'This is a very long breadcrumb label that should handle overflow gracefully without breaking the layout';
-      args.items = [
-        { label: 'Home', href: '#home', onClick: createHandler() },
-        { label: longLabel },
-      ];
-
-      await waitFor(() => {
-        const longItem = canvas.queryByText(longLabel);
-        if (longItem) {
-          const style = window.getComputedStyle(longItem);
-          // Should handle overflow
-          expect(style.overflow || style.textOverflow).toBeTruthy();
-        }
-      });
-    });
-
-    await step('Special characters handling', async () => {
-      args.items = [
-        { label: 'Home & Garden', href: '#home-garden', onClick: createHandler() },
-        { label: 'Tools > Equipment', href: '#tools', onClick: createHandler() },
-        { label: '"Special" Items', href: '#special', onClick: createHandler() },
-        { label: 'Current <Page>' },
-      ];
-
-      await waitFor(() => {
-        const specialChars = canvas.queryByText('Home & Garden');
-        if (specialChars) {
-          expect(specialChars).toBeInTheDocument();
-        } else {
-          // If collapsed, just verify navigation exists
-          const nav = canvas.queryByRole('navigation');
-          expect(nav).toBeInTheDocument();
-        }
-      });
-    });
-
-    await step('Missing href handling', async () => {
-      args.items = [{ label: 'No Href 1' }, { label: 'No Href 2' }, { label: 'No Href 3' }];
-
-      await waitFor(() => {
-        const items = canvas.queryAllByText(/No Href/);
-        if (items.length > 0) {
-          // Items without href should not be links
-          items.forEach((item) => {
-            const parentLink = item.closest('a');
-            expect(parentLink).toBeNull();
-          });
-        } else {
-          // If items are collapsed or not found, just verify navigation exists
-          const nav = canvas.queryByRole('navigation');
-          expect(nav).toBeInTheDocument();
-        }
-      });
-    });
-
-    await step('Maximum items limit', async () => {
-      args.items = Array.from({ length: 100 }, (_, i) => ({
-        label: `Item ${i + 1}`,
-        href: i < 99 ? `#item${i + 1}` : undefined,
-        onClick: i < 99 ? createHandler() : undefined,
-      }));
-      args.maxItems = 8;
-
-      await waitFor(() => {
-        const nav = canvas.queryByRole('navigation');
-        if (nav) {
-          const visibleItems = within(nav).queryAllByRole('listitem');
-          // Should respect maxItems limit
-          expect(visibleItems.length).toBeLessThanOrEqual(20); // Some buffer for separators
-        }
-      });
-    });
-  },
-};
-
-// ============================
-// 7.7 Integration Tests
-// ============================
-
-export const IntegrationWithRouter: Story = {
-  name: '🔗 Router Integration Test',
-  args: {
-    items: [
-      {
-        label: 'Home',
-        href: '/',
-        onClick: (e: React.MouseEvent) => {
-          e.preventDefault();
-          // Navigation would happen here
-        },
-      },
-      {
-        label: 'Products',
-        href: '/products',
-        onClick: (e: React.MouseEvent) => {
-          e.preventDefault();
-          // Navigation would happen here
-        },
-      },
-      {
-        label: 'Electronics',
-        href: '/products/electronics',
-        onClick: (e: React.MouseEvent) => {
-          e.preventDefault();
-          // Navigation would happen here
-        },
-      },
-      { label: 'Laptops' },
-    ],
-    variant: 'glass',
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Simulate navigation', async () => {
-      const homeLink = canvas.getByRole('link', { name: /home/i });
-      await userEvent.click(homeLink);
-
-      // Check console for navigation log
-      await expect(homeLink).toHaveAttribute('href', '/');
-    });
-
-    await step('Verify path structure', async () => {
-      const links = canvas.getAllByRole('link');
-      const hrefs = links.map((link) => link.getAttribute('href')).filter((href) => href !== null);
-
-      // Verify hierarchical path structure - handle collapsed breadcrumbs
-      await expect(hrefs.length).toBeGreaterThan(0);
-      await expect(hrefs[0]).toBe('/');
-
-      // Check if we have multiple links (not collapsed)
-      if (hrefs.length > 1) {
-        await expect(
-          hrefs.includes('/products') || hrefs.includes('/products/electronics'),
-        ).toBeTruthy();
-      }
-
-      // Verify all hrefs are valid paths
-      hrefs.forEach((href) => {
-        if (href) {
-          expect(href).toMatch(/^\/[a-z/]*$/);
-        }
-      });
-    });
-  },
-};
-
-export const VariantComparison: Story = {
-  name: '🎭 All Variants Comparison Test',
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', padding: '20px' }}>
-      <div>
-        <h4>Default Variant</h4>
-        <Breadcrumbs items={basicItems} variant="default" />
-      </div>
-      <div>
-        <h4>Glass Variant</h4>
-        <Breadcrumbs items={basicItems} variant="glass" />
-      </div>
-      <div>
-        <h4>Elevated Variant</h4>
-        <Breadcrumbs items={basicItems} variant="elevated" elevation={3} />
-      </div>
-      <div>
-        <h4>Outlined Variant</h4>
-        <Breadcrumbs items={basicItems} variant="outlined" />
-      </div>
-    </div>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify all variants render', async () => {
-      const headings = canvas.getAllByRole('heading', { level: 4 });
-      await expect(headings).toHaveLength(4);
-
-      const navigations = canvas.getAllByRole('navigation');
-      await expect(navigations).toHaveLength(4);
-    });
-
-    await step('Compare visual differences', async () => {
-      const navigations = canvas.getAllByRole('navigation');
-      const styles = navigations.map((nav) => window.getComputedStyle(nav));
-
-      // Each variant should have unique styling
-      const backgrounds = styles.map((s) => s.backgroundColor);
-      const uniqueBackgrounds = new Set(backgrounds);
-
-      // At least some variants should have different backgrounds
-      await expect(uniqueBackgrounds.size).toBeGreaterThan(1);
-    });
-  },
-};
-
-// ============================
-// Additional Comprehensive Tests
-// ============================
-
-export const SeparatorTypesTest: Story = {
-  name: '➡️ All Separator Types Test',
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      {(['default', 'arrow', 'chevron', 'slash', 'dot', 'pipe'] as const).map((separator) => (
-        <Breadcrumbs
-          key={separator}
-          items={basicItems}
-          separatorType={separator}
-          variant="default"
-        />
-      ))}
-    </div>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify all separator types render', async () => {
-      const navigations = canvas.getAllByRole('navigation');
-      await expect(navigations).toHaveLength(6);
-    });
-
-    await step('Check separator visibility', async () => {
-      const navigations = canvas.getAllByRole('navigation');
-
-      navigations.forEach(async (nav) => {
-        const separators = within(nav).queryAllByText(/[/>•|]/);
-        // Each navigation should have separators
-        await expect(separators.length).toBeGreaterThanOrEqual(0);
-      });
-    });
-  },
-};
-
-export const ColorSchemeTest: Story = {
-  name: '🎨 Color Scheme Test',
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <Breadcrumbs items={basicItems} color="default" variant="elevated" />
-      <Breadcrumbs items={basicItems} color="primary" variant="elevated" />
-      <Breadcrumbs items={basicItems} color="secondary" variant="elevated" />
-    </div>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify color schemes', async () => {
-      const navigations = canvas.getAllByRole('navigation');
-      await expect(navigations).toHaveLength(3);
-
-      // Each should have different color styling
-      const styles = navigations.map((nav) => window.getComputedStyle(nav));
-      const colors = styles.map((s) => s.color || s.backgroundColor);
-
-      // Should have variety in colors
-      const uniqueColors = new Set(colors);
-      await expect(uniqueColors.size).toBeGreaterThanOrEqual(1);
-    });
-  },
-};
-
-export const SizeVariationTest: Story = {
-  name: '📏 Size Variation Test',
-  render: () => (
-    <div
-      style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'flex-start' }}
-    >
-      <Breadcrumbs items={basicItems} size="sm" />
-      <Breadcrumbs items={basicItems} size="md" />
-      <Breadcrumbs items={basicItems} size="lg" />
-    </div>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify size differences', async () => {
-      const navigations = canvas.getAllByRole('navigation');
-      await expect(navigations).toHaveLength(3);
-
-      const firstLinks = navigations.map((nav) => within(nav).getAllByRole('link')[0]);
-      const fontSizes = firstLinks.map((link) => {
-        const style = window.getComputedStyle(link);
-        return parseFloat(style.fontSize);
-      });
-
-      // Sizes should be different
-      await expect(fontSizes[0]).toBeLessThan(fontSizes[1]);
-      await expect(fontSizes[1]).toBeLessThan(fontSizes[2]);
-    });
-  },
-};