/* @vitest-environment jsdom */

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { expect, test, vi } from 'vitest';

import { PixelCloseButton } from './PixelCloseButton';

test('pixel close button closes without bubbling to the overlay', async () => {
  const user = userEvent.setup();
  const onClose = vi.fn();
  const onOverlayClick = vi.fn();

  render(
    <div onClick={onOverlayClick}>
      <PixelCloseButton onClick={onClose} label="关闭测试面板" />
    </div>,
  );

  await user.click(screen.getByRole('button', { name: '关闭测试面板' }));

  expect(onClose).toHaveBeenCalledTimes(1);
  expect(onOverlayClick).not.toHaveBeenCalled();
});

test('inline pixel close button keeps the same click boundary', async () => {
  const user = userEvent.setup();
  const onClose = vi.fn();
  const onHeaderClick = vi.fn();

  render(
    <div onClick={onHeaderClick}>
      <PixelCloseButton
        onClick={onClose}
        label="关闭标题栏面板"
        placement="inline"
      />
    </div>,
  );

  await user.click(screen.getByRole('button', { name: '关闭标题栏面板' }));

  expect(onClose).toHaveBeenCalledTimes(1);
  expect(onHeaderClick).not.toHaveBeenCalled();
});