@arbor-education/design-system.components 0.25.9 → 1.0.1

package/src/components/sidebarNav/SidebarNav.test.tsx

@@ -1,611 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Icon } from 'Components/icon/Icon';
-import { describe, expect, test, vi } from 'vitest';
-import { SidebarNav } from './SidebarNav.js';
-
-describe('SidebarNav', () => {
-  test('toggles panel visibility via trigger (uncontrolled)', async () => {
-    render(
-      <SidebarNav defaultExpanded={false}>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.Title>Attendance</SidebarNav.Title>
-          <SidebarNav.PanelNav items={[]} />
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    const panel = screen.getByTestId('sidebar-nav-panel');
-    expect(panel).toHaveAttribute('aria-hidden', 'true');
-
-    const trigger = screen.getByRole('button', { name: 'Show/hide sub navigation' });
-    await userEvent.click(trigger);
-    expect(panel).toHaveAttribute('aria-hidden', 'false');
-    expect(screen.getByText('Attendance')).toBeInTheDocument();
-
-    await userEvent.click(trigger);
-    expect(panel).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  test('expands and collapses groups in place', async () => {
-    render(
-      <SidebarNav>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav
-            items={[
-              {
-                type: 'group',
-                id: 'registers',
-                label: 'Registers',
-                children: [
-                  { type: 'item', id: 'daily', label: 'Daily attendance', href: '/daily' },
-                ],
-              },
-            ]}
-          />
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    const registersTrigger = screen.getByRole('button', { name: 'Registers' });
-    const groupChildren = document.getElementById(registersTrigger.getAttribute('aria-controls')!);
-    expect(groupChildren).toHaveAttribute('aria-hidden', 'true');
-
-    await userEvent.click(registersTrigger);
-    expect(groupChildren).toHaveAttribute('aria-hidden', 'false');
-    expect(screen.getByText('Daily attendance')).toBeInTheDocument();
-
-    await userEvent.click(registersTrigger);
-    expect(groupChildren).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  test('renders group row as a button with aria-expanded', () => {
-    render(
-      <SidebarNav>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav
-            items={[
-              {
-                type: 'group',
-                id: 'registers',
-                label: 'Registers',
-                children: [],
-              },
-            ]}
-          />
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    const registers = screen.getByRole('button', { name: 'Registers' });
-    expect(registers).toHaveAttribute('aria-expanded', 'false');
-    expect(registers.tagName).toBe('BUTTON');
-  });
-
-  test('supports nested groups (sub-sub menus)', async () => {
-    render(
-      <SidebarNav>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav
-            items={[
-              {
-                type: 'group',
-                id: 'a',
-                label: 'A',
-                children: [
-                  {
-                    type: 'group',
-                    id: 'b',
-                    label: 'B',
-                    children: [{ type: 'item', id: 'c', label: 'C', href: '/c' }],
-                  },
-                ],
-              },
-            ]}
-          />
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    const triggerA = screen.getByRole('button', { name: 'A' });
-    const groupAChildren = document.getElementById(triggerA.getAttribute('aria-controls')!);
-    const triggerB = screen.getByRole('button', { name: 'B', hidden: true });
-    const groupC = document.getElementById(triggerB.getAttribute('aria-controls')!);
-
-    expect(groupC).toHaveAttribute('aria-hidden', 'true');
-    await userEvent.click(triggerA);
-    expect(groupAChildren).toHaveAttribute('aria-hidden', 'false');
-    expect(groupC).toHaveAttribute('aria-hidden', 'true');
-    await userEvent.click(screen.getByRole('button', { name: 'B' }));
-    expect(groupC).toHaveAttribute('aria-hidden', 'false');
-    expect(screen.getByText('C')).toBeInTheDocument();
-  });
-
-  test('uses renderLink for leaf items', () => {
-    const renderLink = vi.fn(({
-      href,
-      className,
-      children,
-      ariaCurrent,
-      onClick,
-      linkProps,
-    }) => (
-      <a
-        href={href}
-        className={className}
-        data-custom-link="true"
-        {...(ariaCurrent ? { 'aria-current': ariaCurrent } : {})}
-        {...linkProps}
-        onClick={onClick}
-      >
-        {children}
-      </a>
-    ));
-
-    render(
-      <SidebarNav renderLink={renderLink}>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav
-            items={[
-              { type: 'item', id: 'home', label: 'Home', href: '/' },
-            ]}
-          />
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    expect(screen.getByText('Home').closest('a')).toHaveAttribute('data-custom-link', 'true');
-    expect(renderLink).toHaveBeenCalledWith(
-      expect.objectContaining({
-        linkProps: undefined,
-      }),
-    );
-  });
-
-  test('passes linkProps through renderLink for panel items', () => {
-    const renderLink = vi.fn(({ href, className, children, linkProps }) => (
-      <a href={href} className={className} data-custom-link="true" {...linkProps}>
-        {children}
-      </a>
-    ));
-
-    render(
-      <SidebarNav renderLink={renderLink}>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav>
-            <SidebarNav.Item itemId="daily" href="/daily" linkProps={{ 'data-track': 'daily' }}>
-              Daily Attendance
-            </SidebarNav.Item>
-          </SidebarNav.PanelNav>
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    expect(screen.getByRole('link', { name: 'Daily Attendance' })).toHaveAttribute('data-track', 'daily');
-    expect(renderLink).toHaveBeenCalledWith(
-      expect.objectContaining({
-        linkProps: { 'data-track': 'daily' },
-      }),
-    );
-  });
-
-  test('passes linkElementProps through renderLink for panel items', () => {
-    const renderLink = vi.fn(({ href, className, children, linkProps, linkElementProps }) => (
-      <a
-        href={href}
-        className={className}
-        data-custom-link="true"
-        {...linkProps}
-        {...linkElementProps}
-      >
-        {children}
-      </a>
-    ));
-
-    render(
-      <SidebarNav renderLink={renderLink}>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav>
-            <SidebarNav.Item
-              itemId="daily"
-              href="/daily"
-              linkElementProps={{ 'aria-describedby': 'daily-desc' }}
-            >
-              Daily Attendance
-            </SidebarNav.Item>
-          </SidebarNav.PanelNav>
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    expect(screen.getByRole('link', { name: 'Daily Attendance' })).toHaveAttribute(
-      'aria-describedby',
-      'daily-desc',
-    );
-    expect(renderLink).toHaveBeenCalledWith(
-      expect.objectContaining({
-        linkElementProps: { 'aria-describedby': 'daily-desc' },
-      }),
-    );
-  });
-
-  test('passes ariaLabel through renderLink for rail items', () => {
-    const renderLink = vi.fn(({ href, className, children, ariaLabel, onClick }) => (
-      <a
-        href={href}
-        className={className}
-        aria-label={ariaLabel}
-        data-custom-link="true"
-        onClick={onClick}
-      >
-        {children}
-      </a>
-    ));
-
-    render(
-      <SidebarNav renderLink={renderLink}>
-        <SidebarNav.Rail>
-          <SidebarNav.RailList>
-            <SidebarNav.RailItem href="/favourites" aria-label="Favourites">
-              <Icon name="favourite-outline" size={24} />
-            </SidebarNav.RailItem>
-          </SidebarNav.RailList>
-        </SidebarNav.Rail>
-      </SidebarNav>,
-    );
-
-    expect(screen.getByRole('link', { name: 'Favourites' })).toHaveAttribute('data-custom-link', 'true');
-    expect(renderLink).toHaveBeenCalledWith(
-      expect.objectContaining({
-        ariaLabel: 'Favourites',
-      }),
-    );
-  });
-
-  test('renders onClick-only panel items as buttons', async () => {
-    const onClick = vi.fn();
-
-    render(
-      <SidebarNav>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav
-            items={[
-              { type: 'item', id: 'action', label: 'Run action', onClick },
-            ]}
-          />
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    const action = screen.getByRole('button', { name: 'Run action' });
-    expect(action.tagName).toBe('BUTTON');
-    await userEvent.click(action);
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  test('renders composable button items via linkElement', async () => {
-    const onClick = vi.fn();
-
-    render(
-      <SidebarNav>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav>
-            <SidebarNav.Item
-              itemId="action"
-              linkElement="button"
-              linkElementProps={{ onClick }}
-            >
-              Run action
-            </SidebarNav.Item>
-          </SidebarNav.PanelNav>
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    await userEvent.click(screen.getByRole('button', { name: 'Run action' }));
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  test('prefers top-level onClick over linkElementProps.onClick when both are provided', async () => {
-    const topLevelOnClick = vi.fn();
-    const linkElementPropsOnClick = vi.fn();
-
-    render(
-      <SidebarNav>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav>
-            <SidebarNav.Item
-              itemId="action"
-              linkElement="button"
-              onClick={topLevelOnClick}
-              linkElementProps={{ onClick: linkElementPropsOnClick }}
-            >
-              Run action
-            </SidebarNav.Item>
-          </SidebarNav.PanelNav>
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    await userEvent.click(screen.getByRole('button', { name: 'Run action' }));
-    expect(topLevelOnClick).toHaveBeenCalledTimes(1);
-    expect(linkElementPropsOnClick).not.toHaveBeenCalled();
-  });
-
-  test('assigns distinct test ids to composable items via required itemId', () => {
-    render(
-      <SidebarNav>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav>
-            <SidebarNav.Item itemId="first" linkElement="button" linkElementProps={{ onClick: vi.fn() }}>
-              First action
-            </SidebarNav.Item>
-            <SidebarNav.Item itemId="second" linkElement="button" linkElementProps={{ onClick: vi.fn() }}>
-              Second action
-            </SidebarNav.Item>
-          </SidebarNav.PanelNav>
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    expect(screen.getByTestId('sidebar-nav-panel-item-first')).toBeInTheDocument();
-    expect(screen.getByTestId('sidebar-nav-panel-item-second')).toBeInTheDocument();
-  });
-
-  test('warns when composable Rail is wrapped and hybrid panel mode is used', () => {
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
-    render(
-      <SidebarNav panelTitle="Attendance" panelNavItems={[]}>
-        <>
-          <SidebarNav.Rail>
-            <SidebarNav.Trigger>
-              <Icon name="menu" size={24} />
-            </SidebarNav.Trigger>
-          </SidebarNav.Rail>
-        </>
-      </SidebarNav>,
-    );
-
-    expect(warnSpy).toHaveBeenCalledWith(
-      expect.stringContaining('SidebarNav.Rail must be a direct child of SidebarNav'),
-    );
-
-    warnSpy.mockRestore();
-  });
-
-  test('does not warn for rail-only data-driven sidebar', () => {
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
-    render(
-      <SidebarNav
-        railItems={[
-          {
-            id: 'burger',
-            label: 'Show/hide sub navigation',
-            iconName: 'menu',
-            opensPanel: true,
-          },
-        ]}
-      />,
-    );
-
-    expect(warnSpy).not.toHaveBeenCalled();
-
-    warnSpy.mockRestore();
-  });
-
-  test('defaults rail nav aria-label to Sidebar rail', () => {
-    render(
-      <SidebarNav defaultExpanded={false}>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-      </SidebarNav>,
-    );
-
-    expect(screen.getByRole('navigation', { name: 'Sidebar rail' })).toBeInTheDocument();
-  });
-
-  test('allows overriding rail nav aria-label', () => {
-    render(
-      <SidebarNav defaultExpanded={false}>
-        <SidebarNav.Rail ariaLabel="App shortcuts">
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-      </SidebarNav>,
-    );
-
-    expect(screen.getByRole('navigation', { name: 'App shortcuts' })).toBeInTheDocument();
-  });
-
-  test('uses data-driven railItems when an empty array is passed', () => {
-    render(
-      <SidebarNav railItems={[]} panelTitle="Attendance" panelNavItems={[]} />,
-    );
-
-    expect(screen.getByTestId('sidebar-nav-rail')).toBeInTheDocument();
-    expect(screen.queryByTestId('sidebar-nav-rail-item-burger')).not.toBeInTheDocument();
-    expect(screen.getByText('Attendance')).toBeInTheDocument();
-  });
-
-  test('prefixes data-driven trigger test id with entry id', () => {
-    render(
-      <SidebarNav
-        railItems={[
-          {
-            id: 'burger',
-            label: 'Show/hide sub navigation',
-            iconName: 'menu',
-            opensPanel: true,
-          },
-        ]}
-        panelNavItems={[]}
-      />,
-    );
-
-    expect(screen.getByTestId('sidebar-nav-panel-trigger-burger')).toBeInTheDocument();
-  });
-
-  test('renders favourite button outside the item link with aria-pressed', async () => {
-    const onFavouriteClick = vi.fn();
-
-    render(
-      <SidebarNav>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav
-            items={[
-              {
-                type: 'item',
-                id: 'daily',
-                label: 'Daily Attendance',
-                href: '/daily',
-                canFavourite: true,
-                isPressed: true,
-                favouriteTooltip: 'Remove from favourites',
-                onFavouriteClick,
-              },
-            ]}
-          />
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    const listItem = screen.getByTestId('sidebar-nav-panel-item-daily');
-    const link = screen.getByRole('link', { name: 'Daily Attendance' });
-    const favourite = screen.getByTestId('sidebar-nav-panel-item-favourite-daily');
-
-    expect(listItem).toContainElement(link);
-    expect(listItem).toContainElement(favourite);
-    expect(favourite).not.toContainElement(link);
-    expect(link).not.toContainElement(favourite);
-    expect(favourite).toHaveAttribute('aria-pressed', 'true');
-
-    await userEvent.click(favourite);
-    expect(onFavouriteClick).toHaveBeenCalled();
-  });
-
-  test('uses favouriteTooltip as aria-label on favourite button', () => {
-    render(
-      <SidebarNav>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav
-            items={[
-              {
-                type: 'item',
-                id: 'daily',
-                label: 'Daily Attendance',
-                href: '/daily',
-                canFavourite: true,
-                isPressed: false,
-                favouriteTooltip: 'Add to favourites',
-              },
-            ]}
-          />
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    expect(screen.getByTestId('sidebar-nav-panel-item-favourite-daily')).toHaveAttribute(
-      'aria-label',
-      'Add to favourites',
-    );
-  });
-
-  test('does not render favourite button when canFavourite is false', () => {
-    render(
-      <SidebarNav>
-        <SidebarNav.Rail>
-          <SidebarNav.Trigger>
-            <Icon name="menu" size={24} />
-          </SidebarNav.Trigger>
-        </SidebarNav.Rail>
-        <SidebarNav.Panel>
-          <SidebarNav.PanelNav
-            items={[
-              {
-                type: 'item',
-                id: 'daily',
-                label: 'Daily Attendance',
-                href: '/daily',
-                canFavourite: false,
-              },
-            ]}
-          />
-        </SidebarNav.Panel>
-      </SidebarNav>,
-    );
-
-    expect(screen.queryByTestId('sidebar-nav-panel-item-favourite-daily')).not.toBeInTheDocument();
-  });
-});