@astryxdesign/core 0.1.9 → 0.2.0-canary.0e01213

package/src/Avatar/Avatar.test.tsx

@@ -2,7 +2,9 @@
 
 import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import {Avatar} from './Avatar';
+import {AvatarStatusDot} from './AvatarStatusDot';
 
 describe('Avatar', () => {
   it('exposes role="img" with the name as accessible name', () => {
@@ -35,6 +37,19 @@ describe('Avatar', () => {
     expect(innerImg).toHaveAttribute('alt', '');
   });
 
+  it('renders fallback initials through the themeable font-size var, not a bare px literal', () => {
+    render(<Avatar name="Ada Lovelace" size="sm" data-testid="a" />);
+    const initials = screen.getByText('AL');
+    // The seam: the dynamic font size resolves to the Avatar-scoped var (with
+    // the proportional `size × 0.4` default baked in as the fallback), so a
+    // theme can re-scope it per size. A regression to a bare px literal would
+    // break theming.
+    const style = initials.getAttribute('style') ?? '';
+    expect(style).toContain('var(--_avatar-fallback-font-size,');
+    // Default still reproduces the proportional scale (sm = 24 × 0.4 = 9.6px).
+    expect(style).toMatch(/var\(--_avatar-fallback-font-size,\s*9\.6\d*px\)/);
+  });
+
   it('retries a new src after a previous src failed to load', () => {
     const {rerender} = render(
       <Avatar name="Ada" src="https://example.com/broken.jpg" />,
@@ -52,6 +67,98 @@ describe('Avatar', () => {
     expect(img).toHaveAttribute('src', 'https://example.com/ada.jpg');
   });
 
+  describe('status in the accessible name (WCAG 4.1.2)', () => {
+    // The avatar root is role="img", which prunes descendant semantics —
+    // a label inside the status subtree is never announced on its own.
+    // Avatar composes the status element's `label` into its own name.
+    it('composes the status label into the accessible name for image avatars', () => {
+      render(
+        <Avatar
+          name="Ada Lovelace"
+          src="https://example.com/ada.jpg"
+          status={<AvatarStatusDot variant="success" label="Online" />}
+        />,
+      );
+      expect(
+        screen.getByRole('img', {name: 'Ada Lovelace, Online'}),
+      ).toBeInTheDocument();
+    });
+
+    it('composes the status label into the accessible name for initials avatars', () => {
+      render(
+        <Avatar
+          name="Ada Lovelace"
+          status={<AvatarStatusDot variant="error" label="Busy" />}
+        />,
+      );
+      const avatar = screen.getByRole('img', {name: 'Ada Lovelace, Busy'});
+      expect(avatar).toBeInTheDocument();
+      expect(avatar).toHaveTextContent('AL');
+    });
+
+    it('composes the status label with alt when alt overrides name', () => {
+      render(
+        <Avatar
+          name="Ada"
+          alt="Ada Lovelace, profile photo"
+          status={<AvatarStatusDot label="Online" />}
+        />,
+      );
+      expect(
+        screen.getByRole('img', {name: 'Ada Lovelace, profile photo, Online'}),
+      ).toBeInTheDocument();
+    });
+
+    it('keeps the plain name when there is no status', () => {
+      render(<Avatar name="Ada Lovelace" data-testid="a" />);
+      expect(screen.getByTestId('a')).toHaveAttribute(
+        'aria-label',
+        'Ada Lovelace',
+      );
+    });
+
+    it('keeps the plain name when the status dot has no label', () => {
+      render(
+        <Avatar
+          name="Ada Lovelace"
+          data-testid="a"
+          status={<AvatarStatusDot variant="success" />}
+        />,
+      );
+      expect(screen.getByTestId('a')).toHaveAttribute(
+        'aria-label',
+        'Ada Lovelace',
+      );
+    });
+
+    it('keeps the plain name for custom status nodes without a label prop', () => {
+      render(<Avatar name="Ada Lovelace" data-testid="a" status={<span />} />);
+      expect(screen.getByTestId('a')).toHaveAttribute(
+        'aria-label',
+        'Ada Lovelace',
+      );
+    });
+
+    it('announces a labelled status even on an otherwise decorative avatar', () => {
+      // A labelled status is meaningful information on its own — the avatar
+      // must not stay aria-hidden and swallow it.
+      render(
+        <Avatar data-testid="a" status={<AvatarStatusDot label="Online" />} />,
+      );
+      const el = screen.getByTestId('a');
+      expect(el).toHaveAttribute('role', 'img');
+      expect(el).toHaveAttribute('aria-label', 'Online');
+      expect(el).not.toHaveAttribute('aria-hidden');
+    });
+
+    it('stays decorative with an unlabelled status and no name', () => {
+      render(<Avatar data-testid="a" status={<AvatarStatusDot />} />);
+      const el = screen.getByTestId('a');
+      expect(el).toHaveAttribute('aria-hidden', 'true');
+      expect(el).not.toHaveAttribute('aria-label');
+    });
+  });
+
   it('retries a new fallbackSrc after a previous fallbackSrc failed to load', () => {
     const {rerender} = render(
       <Avatar name="Ada" fallbackSrc="https://example.com/broken.jpg" />,
@@ -221,3 +328,114 @@ describe('Avatar', () => {
     });
   });
 });
+
+describe('Avatar — interactivity (Button trichotomy)', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders a link when `href` is set (default LinkComponent is <a>)', () => {
+    render(<Avatar name="Ada Lovelace" href="/users/ada" />);
+    const link = screen.getByRole('link', {name: 'Ada Lovelace'});
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', '/users/ada');
+    // The static img semantics are gone — it's a control now.
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('forwards target/rel on the link', () => {
+    render(
+      <Avatar
+        name="Ada"
+        href="https://example.com"
+        target="_blank"
+        rel="noopener noreferrer"
+      />,
+    );
+    const link = screen.getByRole('link', {name: 'Ada'});
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('renders a <button type="button"> when `onClick` is set (no href)', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(<Avatar name="Ada" onClick={handleClick} />);
+    const button = screen.getByRole('button', {name: 'Ada'});
+    expect(button.tagName).toBe('BUTTON');
+    expect(button).toHaveAttribute('type', 'button');
+    await user.click(button);
+    expect(handleClick).toHaveBeenCalledOnce();
+  });
+
+  it('href wins over onClick (link, not button)', () => {
+    render(<Avatar name="Ada" href="/ada" onClick={() => {}} />);
+    expect(screen.getByRole('link', {name: 'Ada'})).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('stays a static element (no href, no onClick) — non-breaking default', () => {
+    render(<Avatar name="Ada" />);
+    expect(screen.getByRole('img', {name: 'Ada'})).toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('stamps the data-avatar-item marker on the interactive link', () => {
+    render(<Avatar name="Ada" href="/ada" />);
+    expect(screen.getByRole('link', {name: 'Ada'})).toHaveAttribute(
+      'data-avatar-item',
+    );
+  });
+
+  it('stamps the data-avatar-item marker on the interactive button', () => {
+    render(<Avatar name="Ada" onClick={() => {}} />);
+    expect(screen.getByRole('button', {name: 'Ada'})).toHaveAttribute(
+      'data-avatar-item',
+    );
+  });
+
+  it('does not stamp data-avatar-item on a static avatar', () => {
+    render(<Avatar name="Ada" data-testid="a" />);
+    expect(screen.getByTestId('a')).not.toHaveAttribute('data-avatar-item');
+  });
+
+  it('carries a focus-visible ring class on the interactive element', () => {
+    // The interactive element applies the shared focus-visible accent ring via
+    // its StyleX class. We assert the element is focusable and receives focus.
+    render(<Avatar name="Ada" onClick={() => {}} />);
+    const button = screen.getByRole('button', {name: 'Ada'});
+    button.focus();
+    expect(button).toHaveFocus();
+    // className carries the avatar theming target so themes can style it.
+    expect(button.className).toContain('astryx-avatar');
+  });
+
+  it('warns in dev when interactive without an accessible name (href)', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(<Avatar href="/somewhere" />);
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('interactive avatar'),
+    );
+  });
+
+  it('warns in dev when interactive without an accessible name (onClick)', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(<Avatar onClick={() => {}} />);
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('interactive avatar'),
+    );
+  });
+
+  it('does not warn when interactive with a name', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(<Avatar name="Ada" href="/ada" />);
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it('does not warn for a static avatar without a name (decorative is fine)', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(<Avatar data-testid="a" />);
+    expect(warn).not.toHaveBeenCalled();
+  });
+});