Genarrative/packages/image-canvas-react/src/CanvasChrome.test.tsx

/* @vitest-environment jsdom */

import { fireEvent, render, screen } from '@testing-library/react';
import { createRef } from 'react';
import { describe, expect, it, vi } from 'vitest';

import {
  CanvasChromeButton,
  CanvasToolbar,
  CanvasToolbarDivider,
  CanvasToolbarGroup,
} from './CanvasChrome';

describe('shared canvas chrome', () => {
  it('forwards native button props and exposes shared accessible states', () => {
    const onClick = vi.fn();
    const ref = createRef<HTMLButtonElement>();

    render(
      <CanvasChromeButton
        ref={ref}
        label="选择工具"
        title="选择"
        icon={<span data-testid="tool-icon" />}
        className="host-button"
        data-host="main-site"
        pressed
        expanded={false}
        onClick={onClick}
      />,
    );

    const button = screen.getByRole('button', { name: '选择工具' });
    expect(button.className).toContain(
      'genarrative-image-canvas__chrome-button',
    );
    expect(button.className).toContain('host-button');
    expect(button.getAttribute('type')).toBe('button');
    expect(button.getAttribute('title')).toBe('选择');
    expect(button.getAttribute('aria-pressed')).toBe('true');
    expect(button.getAttribute('aria-expanded')).toBe('false');
    expect(button.getAttribute('data-host')).toBe('main-site');
    expect(ref.current).toBe(button);

    fireEvent.click(button);
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('supports a short visible label and native disabled behavior', () => {
    const onClick = vi.fn();
    render(
      <CanvasChromeButton
        label="改造素材"
        icon={<span />}
        disabled
        onClick={onClick}
      >
        改造
      </CanvasChromeButton>,
    );

    const button = screen.getByRole('button', { name: '改造素材' });
    expect(button.className).toContain(
      'genarrative-image-canvas__chrome-button--with-label',
    );
    expect(button.getAttribute('title')).toBe('改造素材');
    expect(button).toHaveProperty('disabled', true);

    fireEvent.click(button);
    expect(onClick).not.toHaveBeenCalled();
  });

  it('provides a named toolbar with groups and decorative dividers', () => {
    render(
      <CanvasToolbar
        label="素材工具栏"
        surface="floating"
        className="host-toolbar"
      >
        <CanvasToolbarGroup data-testid="toolbar-group">
          <CanvasChromeButton label="下载" icon={<span />} />
        </CanvasToolbarGroup>
        <CanvasToolbarDivider data-testid="toolbar-divider" />
      </CanvasToolbar>,
    );

    const toolbar = screen.getByRole('toolbar', { name: '素材工具栏' });
    expect(toolbar.className).toContain('genarrative-image-canvas__toolbar');
    expect(toolbar.className).toContain(
      'genarrative-image-canvas__toolbar--floating',
    );
    expect(toolbar.className).toContain('host-toolbar');
    expect(toolbar.getAttribute('aria-orientation')).toBe('horizontal');
    expect(screen.getByTestId('toolbar-group').className).toContain(
      'genarrative-image-canvas__toolbar-group',
    );
    expect(
      screen.getByTestId('toolbar-divider').getAttribute('aria-hidden'),
    ).toBe('true');
  });
});