OpenFlare/frontend/app/(main)/waf/rules/editor/page.test.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import {
  act,
  fireEvent,
  render,
  screen,
  waitFor,
} from '@testing-library/react';
import { AxiosError, type AxiosResponse } from 'axios';
import { beforeEach, expect, it, vi } from 'vitest';

import type { WAFRule, WAFRuleGraph } from '@/lib/services';

import WAFRuleEditorPage from './page';

const { getRule, saveRuleGraph, updateRuleMeta, listIPGroups, toastError } =
  vi.hoisted(() => ({
    getRule: vi.fn(),
    saveRuleGraph: vi.fn(),
    updateRuleMeta: vi.fn(),
    listIPGroups: vi.fn().mockResolvedValue([]),
    toastError: vi.fn(),
  }));

vi.mock('next/navigation', () => ({
  useRouter: () => ({ push: vi.fn() }),
  useSearchParams: () => new URLSearchParams('id=9'),
}));
vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: toastError } }));
vi.mock('@/lib/services', async (importOriginal) => {
  const actual = await importOriginal<typeof import('@/lib/services')>();
  return {
    ...actual,
    services: {
      ...actual.services,
      openflareWaf: { getRule, saveRuleGraph, updateRuleMeta, listIPGroups },
    },
  };
});
vi.mock('./components/rule-flow-canvas', () => ({
  RuleFlowCanvas: ({
    graph,
    focusTarget,
    onGraphChange,
  }: {
    graph: WAFRuleGraph;
    focusTarget?: { kind: string; id: string };
    onGraphChange: (graph: WAFRuleGraph) => void;
  }) => (
    <div>
      <button
        onClick={() =>
          onGraphChange({
            ...graph,
            nodes: graph.nodes.map((node) =>
              node.id === 'start'
                ? { ...node, position: { x: 10, y: 0 } }
                : node,
            ),
          })
        }
      >
        修改画布
      </button>
      {focusTarget && (
        <span>
          focus:{focusTarget.kind}:{focusTarget.id}
        </span>
      )}
    </div>
  ),
}));
vi.mock('./components/node-properties', () => ({ NodeProperties: () => null }));

const graph: WAFRuleGraph = {
  schema_version: 1,
  nodes: [
    { id: 'start', type: 'start', position: { x: 0, y: 0 }, config: {} },
    { id: 'allow', type: 'allow', position: { x: 200, y: 0 }, config: {} },
  ],
  edges: [
    {
      id: 'start-allow',
      source: 'start',
      source_handle: 'next',
      target: 'allow',
    },
  ],
};
const rule = {
  id: 9,
  name: '边缘防护',
  enabled: true,
  is_global: false,
  graph,
  revision: 1,
  applied_site_ids: [],
  applied_site_count: 0,
  created_at: '',
  updated_at: '',
} satisfies WAFRule;

function renderPage() {
  const client = new QueryClient({
    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
  });
  return render(
    <QueryClientProvider client={client}>
      <WAFRuleEditorPage />
    </QueryClientProvider>,
  );
}

beforeEach(() => {
  getRule.mockReset();
  saveRuleGraph.mockReset();
  updateRuleMeta.mockReset();
  listIPGroups.mockClear();
  toastError.mockReset();
});

it('renders a query error with a working retry action', async () => {
  getRule
    .mockRejectedValueOnce(new Error('offline'))
    .mockResolvedValueOnce(rule);
  renderPage();
  fireEvent.click(await screen.findByRole('button', { name: '重新加载' }));
  expect(
    await screen.findByRole('heading', { name: '边缘防护' }),
  ).toBeInTheDocument();
  expect(getRule).toHaveBeenCalledTimes(2);
});

it('exposes conflict reload and maps typed server node errors to canvas focus', async () => {
  getRule.mockResolvedValue(rule);
  const conflict = new AxiosError('conflict');
  conflict.response = {
    status: 409,
    data: {},
    headers: {},
    config: { headers: {} },
  } as AxiosResponse;
  saveRuleGraph
    .mockRejectedValueOnce(conflict)
    .mockRejectedValueOnce(
      new Error('规则图无效: 节点 start 的 next 出口未连接'),
    );
  renderPage();
  await screen.findByRole('heading', { name: '边缘防护' });
  fireEvent.click(screen.getByRole('button', { name: '修改画布' }));
  fireEvent.click(screen.getByRole('button', { name: '保存' }));
  expect(
    await screen.findByRole('button', { name: '重新加载' }),
  ).toBeInTheDocument();
  fireEvent.click(screen.getByRole('button', { name: '保存' }));
  await waitFor(() =>
    expect(screen.getByText('focus:node:start')).toBeInTheDocument(),
  );
});

it('optimistically enables a saved valid rule with its current name', async () => {
  const disabledRule = { ...rule, enabled: false };
  let resolveUpdate: (value: WAFRule) => void = () => undefined;
  updateRuleMeta.mockImplementation(
    () =>
      new Promise<WAFRule>((resolve) => {
        resolveUpdate = resolve;
      }),
  );
  getRule.mockResolvedValue(disabledRule);

  renderPage();
  expect(await screen.findByText('已停用')).toBeInTheDocument();
  fireEvent.click(screen.getByRole('switch', { name: '启用规则' }));

  await waitFor(() => {
    expect(updateRuleMeta).toHaveBeenCalledWith(9, {
      name: '边缘防护',
      enabled: true,
    });
    expect(screen.getByText('已启用')).toBeInTheDocument();
  });

  await act(async () => resolveUpdate({ ...disabledRule, enabled: true }));
});

it('rolls back an optimistic enabled change when metadata update fails', async () => {
  const disabledRule = { ...rule, enabled: false };
  let rejectUpdate: (reason: Error) => void = () => undefined;
  updateRuleMeta.mockImplementation(
    () =>
      new Promise<WAFRule>((_resolve, reject) => {
        rejectUpdate = reject;
      }),
  );
  getRule.mockResolvedValue(disabledRule);

  renderPage();
  expect(await screen.findByText('已停用')).toBeInTheDocument();
  fireEvent.click(screen.getByRole('switch', { name: '启用规则' }));
  await waitFor(() => expect(screen.getByText('已启用')).toBeInTheDocument());

  await act(async () => rejectUpdate(new Error('网络不可用')));

  await waitFor(() => expect(screen.getByText('已停用')).toBeInTheDocument());
  expect(toastError).toHaveBeenCalledWith('网络不可用');
});

it('requires graph changes to be saved before changing enabled state', async () => {
  const disabledRule = { ...rule, enabled: false };
  getRule.mockResolvedValue(disabledRule);
  saveRuleGraph.mockResolvedValue({ ...disabledRule, revision: 2 });

  renderPage();
  const enabledSwitch = await screen.findByRole('switch', { name: '启用规则' });
  expect(enabledSwitch).toBeEnabled();

  fireEvent.click(screen.getByRole('button', { name: '修改画布' }));
  expect(enabledSwitch).toBeDisabled();
  fireEvent.click(screen.getByRole('button', { name: '保存' }));

  await waitFor(() => expect(enabledSwitch).toBeEnabled());
});