feat: overhaul mobile management layouts

2026-03-21 20:42:25 +08:00
parent 6a19d809f0
commit 09fbf258e2
55 changed files with 4815 additions and 1030 deletions
@@ -0,0 +1,102 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, create, type ReactTestInstance } from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
+import { ToastProvider } from '../components/Toast.js';
+import ProgramLogs from './ProgramLogs.js';
+
+const { apiMock } = vi.hoisted(() => ({
+  apiMock: {
+    getEvents: vi.fn(),
+    markEventRead: vi.fn(),
+    markAllEventsRead: vi.fn(),
+    clearEvents: vi.fn(),
+  },
+}));
+
+vi.mock('../api.js', () => ({
+  api: apiMock,
+}));
+
+vi.mock('../components/useIsMobile.js', () => ({
+  useIsMobile: () => true,
+}));
+
+function collectText(node: ReactTestInstance): string {
+  const children = node.children || [];
+  return children.map((child) => {
+    if (typeof child === 'string') return child;
+    return collectText(child);
+  }).join('');
+}
+
+function findButtonByText(root: ReactTestInstance, text: string): ReactTestInstance {
+  return root.find((node) => (
+    node.type === 'button'
+    && typeof node.props.onClick === 'function'
+    && collectText(node).includes(text)
+  ));
+}
+
+async function flushMicrotasks() {
+  await act(async () => {
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+}
+
+describe('ProgramLogs mobile layout', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    apiMock.getEvents.mockResolvedValue([
+      {
+        id: 1,
+        type: 'status',
+        title: '同步完成',
+        message: '成功 3，失败 0',
+        level: 'info',
+        read: false,
+        createdAt: '2026-03-04T06:43:03.000Z',
+      },
+    ]);
+    apiMock.markEventRead.mockResolvedValue({ success: true });
+    apiMock.markAllEventsRead.mockResolvedValue({ success: true });
+    apiMock.clearEvents.mockResolvedValue({ success: true });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders mobile cards instead of only the desktop table on small screens', async () => {
+    let root: ReturnType<typeof create> | null = null;
+
+    try {
+      await act(async () => {
+        root = create(
+          <MemoryRouter initialEntries={['/events']}>
+            <ToastProvider>
+              <ProgramLogs />
+            </ToastProvider>
+          </MemoryRouter>,
+        );
+      });
+      await flushMicrotasks();
+
+      const cards = root!.root.findAll((node) => node.props?.className === 'mobile-card');
+      expect(cards.length).toBeGreaterThan(0);
+      expect(collectText(root!.root)).toContain('同步完成');
+      expect(collectText(root!.root)).toContain('筛选');
+      expect(collectText(root!.root)).toContain('标记已读');
+
+      const markReadButton = findButtonByText(root!.root, '标记已读');
+      await act(async () => {
+        markReadButton.props.onClick();
+      });
+      await flushMicrotasks();
+
+      expect(apiMock.markEventRead).toHaveBeenCalledWith(1);
+    } finally {
+      root?.unmount();
+    }
+  });
+});