1

src/components/PixelCloseButton.test.tsx

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