OpenFlare/frontend/tests/zone/zone-domain-selector.test.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';

import { ZoneDomainSelector } from '@/app/(main)/proxy-routes/components/zone-domain-selector';
import type { ZoneDomainItem, ZoneItem } from '@/lib/services/openflare';
import { NextIntlClientProvider } from 'next-intl';
import zhCN from '@/messages/zh-CN.json';

vi.mock('next/link', () => ({
  default: ({
    children,
    href,
  }: {
    children: React.ReactNode;
    href: string;
  }) => <a href={href}>{children}</a>,
}));

const zones: ZoneItem[] = [
  { id: 1, domain: 'example.com', created_at: '', updated_at: '' },
];

const domains: ZoneDomainItem[] = [
  {
    id: 7,
    zone_id: 1,
    proxy_route_id: null,
    domain: 'api.example.com',
    cert_id: 9,
    created_at: '',
    updated_at: '',
  },
  {
    id: 8,
    zone_id: 1,
    proxy_route_id: 99,
    domain: 'bound.example.com',
    cert_id: null,
    created_at: '',
    updated_at: '',
  },
];

function renderSelector(ui: React.ReactElement) {
  const client = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });
  return render(
    <NextIntlClientProvider
      locale='zh-CN'
      messages={zhCN}
      timeZone='Asia/Shanghai'
    >
      <QueryClientProvider client={client}>{ui}</QueryClientProvider>
    </NextIntlClientProvider>,
  );
}

describe('ZoneDomainSelector', () => {
  it('renders domains and toggles selection', async () => {
    const user = userEvent.setup();
    const onChange = vi.fn();

    renderSelector(
      <ZoneDomainSelector
        value={[7]}
        onChange={onChange}
        domains={domains}
        zones={zones}
      />,
    );

    expect(screen.getByText('api.example.com')).toBeVisible();
    // Bound to another route — hidden by default
    expect(screen.queryByText('bound.example.com')).not.toBeInTheDocument();
    expect(screen.getByRole('button', { name: /快捷新增域名/ })).toBeVisible();

    await user.click(screen.getByText('api.example.com'));
    expect(onChange).toHaveBeenCalledWith([]);
  });

  it('hides domains bound to another route', () => {
    renderSelector(
      <ZoneDomainSelector
        value={[]}
        onChange={vi.fn()}
        domains={domains}
        zones={zones}
        currentRouteId={1}
      />,
    );

    expect(screen.getByText('api.example.com')).toBeVisible();
    expect(screen.queryByText('bound.example.com')).not.toBeInTheDocument();
  });

  it('still shows domains already bound to the current route', () => {
    renderSelector(
      <ZoneDomainSelector
        value={[8]}
        onChange={vi.fn()}
        domains={domains}
        zones={zones}
        currentRouteId={99}
      />,
    );

    expect(screen.getByText('bound.example.com')).toBeVisible();
    expect(screen.getByText('api.example.com')).toBeVisible();
  });

  it('searches and selects wildcard domains by ID without generating wildcard URLs', async () => {
    const user = userEvent.setup();
    const onChange = vi.fn();
    renderSelector(
      <ZoneDomainSelector
        value={[]}
        onChange={onChange}
        domains={[
          ...domains,
          { ...domains[0], id: 9, domain: '*.s3.example.com' },
        ]}
        zones={zones}
      />,
    );

    await user.type(screen.getByRole('textbox'), '*.s3');
    expect(screen.queryByText('api.example.com')).not.toBeInTheDocument();
    await user.click(screen.getByText('*.s3.example.com'));
    expect(onChange).toHaveBeenCalledWith([9]);
    for (const link of screen.getAllByRole('link')) {
      expect(link.getAttribute('href')).not.toContain('*');
    }
  });
});