deckhearth/test/components/ui-primitives.test.js

// @vitest-environment jsdom
import { describe, it, expect, vi, afterEach } from 'vitest';
import { render, screen, fireEvent, cleanup } from '@testing-library/react';
import { Button, Input, SearchBar } from '../../components/ui';
import GlassSurface from '../../components/ui/GlassSurface';

describe('Button', () => {
  afterEach(() => cleanup());

  it('renders children and triggers onClick', () => {
    const onClick = vi.fn();
    render(<Button onClick={onClick}>Save</Button>);
    const btn = screen.getByRole('button', { name: /save/i });
    fireEvent.click(btn);
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('renders loading state with aria-busy and a spinner', () => {
    render(<Button loading>Save</Button>);
    const btn = screen.getByRole('button', { name: /save/i });
    expect(btn.getAttribute('aria-busy')).toBe('true');
    expect(btn.disabled).toBe(true);
  });

  it('disables on disabled prop and suppresses onClick', () => {
    const onClick = vi.fn();
    render(
      <Button disabled onClick={onClick}>
        Save
      </Button>
    );
    fireEvent.click(screen.getByRole('button', { name: /save/i }));
    expect(onClick).not.toHaveBeenCalled();
  });

  it('renders all four variants without crashing', () => {
    const variants = ['primary', 'secondary', 'danger', 'ghost'];
    variants.forEach((variant) => {
      const { unmount } = render(<Button variant={variant}>x</Button>);
      expect(screen.getByRole('button')).toBeTruthy();
      unmount();
    });
  });
});

describe('Input', () => {
  afterEach(() => cleanup());

  it('renders label associated with input via htmlFor/id', () => {
    render(<Input id="email" label="Email" value="" onChange={() => {}} />);
    const input = screen.getByLabelText('Email');
    expect(input.tagName).toBe('INPUT');
    expect(input.id).toBe('email');
  });

  it('exposes aria-invalid + error message when error is set', () => {
    render(
      <Input
        id="x"
        label="Password"
        value=""
        onChange={() => {}}
        error="Required"
      />
    );
    const input = screen.getByLabelText('Password');
    expect(input.getAttribute('aria-invalid')).toBe('true');
    expect(screen.getByText('Required')).toBeTruthy();
    expect(input.getAttribute('aria-describedby')).toContain('x-error');
  });

  it('omits error and shows helperText when no error', () => {
    render(
      <Input
        id="y"
        label="Username"
        value=""
        onChange={() => {}}
        helperText="3+ chars"
      />
    );
    expect(screen.getByText('3+ chars')).toBeTruthy();
    const input = screen.getByLabelText('Username');
    expect(input.getAttribute('aria-invalid')).toBeNull();
    expect(input.getAttribute('aria-describedby')).toBe('y-helper');
  });
});

describe('SearchBar', () => {
  afterEach(() => cleanup());

  it('renders an input with placeholder and search icon', () => {
    render(
      <SearchBar value="" onChange={() => {}} placeholder="Find a card" />
    );
    const input = screen.getByPlaceholderText('Find a card');
    expect(input.tagName).toBe('INPUT');
    expect(input.getAttribute('type')).toBe('search');
  });

  it('renders a clear button only when value is non-empty AND onClear is provided', () => {
    const onClear = vi.fn();
    const { rerender } = render(
      <SearchBar value="" onChange={() => {}} onClear={onClear} />
    );
    expect(screen.queryByRole('button', { name: /clear/i })).toBeNull();
    rerender(
      <SearchBar value="alpha" onChange={() => {}} onClear={onClear} />
    );
    const clearBtn = screen.getByRole('button', { name: /clear/i });
    fireEvent.click(clearBtn);
    expect(onClear).toHaveBeenCalledTimes(1);
  });

  it('does NOT render a clear button when onClear is missing', () => {
    render(<SearchBar value="alpha" onChange={() => {}} />);
    expect(screen.queryByRole('button', { name: /clear/i })).toBeNull();
  });
});

describe('GlassSurface — cornerLights prop', () => {
  afterEach(() => cleanup());

  it("defaults to cornerLights='subtle' — uses --corner-light-*-subtle tokens and adds a transparent border", () => {
    const { container } = render(
      <GlassSurface data-testid="surface">content</GlassSurface>
    );
    const el = container.querySelector('[data-testid="surface"]');
    const styleAttr = el.getAttribute('style') ?? '';
    expect(styleAttr).toContain('--corner-light-warm-subtle');
    expect(styleAttr).toContain('--corner-light-cool-subtle');
    expect(styleAttr).toContain('--chip-border-base');
    expect(styleAttr).toContain('padding-box');
    expect(styleAttr).toContain('border-box');
    expect(styleAttr).toMatch(/border:\s*1px solid transparent/);
  });

  it("cornerLights='chrome' uses the full-intensity --corner-light-* tokens (not the -subtle variants)", () => {
    const { container } = render(
      <GlassSurface cornerLights="chrome" data-testid="surface">
        content
      </GlassSurface>
    );
    const el = container.querySelector('[data-testid="surface"]');
    const styleAttr = el.getAttribute('style') ?? '';
    expect(styleAttr).toContain('--corner-light-warm)');
    expect(styleAttr).toContain('--corner-light-cool)');
    expect(styleAttr).not.toContain('--corner-light-warm-subtle');
    expect(styleAttr).not.toContain('--corner-light-cool-subtle');
    expect(styleAttr).toMatch(/border:\s*1px solid transparent/);
  });

  it("cornerLights='none' emits a single-layer background and no border declaration", () => {
    const { container } = render(
      <GlassSurface cornerLights="none" tint="mid" data-testid="surface">
        content
      </GlassSurface>
    );
    const el = container.querySelector('[data-testid="surface"]');
    const styleAttr = el.getAttribute('style') ?? '';
    expect(styleAttr).toContain('background: var(--glass-surface-mid)');
    expect(styleAttr).not.toContain('--corner-light');
    expect(styleAttr).not.toContain('padding-box');
    expect(styleAttr).not.toContain('--chip-border-base');
    expect(styleAttr).not.toMatch(/border:\s*1px solid/);
  });
});