@arbor-education/design-system.components 0.23.1 → 0.24.0

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

@@ -0,0 +1,611 @@
+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();
+  });
+});