165 lines
9.6 KiB
TypeScript
165 lines
9.6 KiB
TypeScript
import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||
import { afterEach, expect, test, vi } from 'vitest';
|
||
import { MemoryRouter } from 'react-router-dom';
|
||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||
import type { VehicleRealtimeRow } from '../../api/types';
|
||
import { api } from '../../api/client';
|
||
import MonitorPage from './MonitorPage';
|
||
|
||
const vehicles = [{
|
||
vin: 'LTEST000000000001', plate: '粤A12345', protocols: ['JT808'], primaryProtocol: 'JT808',
|
||
longitude: 113.26, latitude: 23.13, speedKmh: 42, socPercent: 80, totalMileageKm: 1234,
|
||
lastSeen: '2026-07-14T01:00:00Z', online: true, sourceCount: 1, onlineSourceCount: 1
|
||
}, {
|
||
vin: 'LTEST000000000002', plate: '粤B67890', protocols: ['JT808'], primaryProtocol: 'JT808',
|
||
longitude: 113.28, latitude: 23.15, speedKmh: 0, socPercent: 72, totalMileageKm: 2234,
|
||
lastSeen: '2026-07-14T01:00:00Z', online: true, sourceCount: 1, onlineSourceCount: 1
|
||
}] as VehicleRealtimeRow[];
|
||
const monitorMap = { clusters: [], points: [], total: 2 };
|
||
const fleetMapRenderSpy = vi.hoisted(() => vi.fn());
|
||
const monitorQueryFlags = vi.hoisted(() => ({ isLoading: false, isFetching: false, isPlaceholderData: false }));
|
||
|
||
vi.mock('../map/FleetMap', () => ({
|
||
FleetMap: ({ selectedVin, onSelectVin }: { selectedVin?: string; onSelectVin?: (vin: string) => void }) => {
|
||
fleetMapRenderSpy(selectedVin);
|
||
return <div data-testid="fleet-map" data-selected-vin={selectedVin ?? ''}>
|
||
<button type="button" onClick={() => onSelectVin?.('LTEST000000000002')}>选择地图车辆</button>
|
||
</div>;
|
||
}
|
||
}));
|
||
|
||
vi.mock('../hooks/useMonitorData', () => ({
|
||
MAX_MONITOR_SEARCH_TERMS: 100,
|
||
MONITOR_REFRESH: { selected: 10_000, fleet: 15_000, summary: 30_000 },
|
||
parseMonitorSearchTerms: (value: string) => Array.from(new Set(value.split(/[\s,，、;；]+/).map((item) => item.trim().toLocaleUpperCase()).filter(Boolean))).slice(0, 100),
|
||
monitorQueryParams: (filters: { keyword: string; protocol: string; status: string }, limit: number) => {
|
||
const params = new URLSearchParams({ limit: String(limit) });
|
||
const terms = Array.from(new Set(filters.keyword.split(/[\s,，、;；]+/).map((item) => item.trim().toLocaleUpperCase()).filter(Boolean))).slice(0, 100);
|
||
if (terms.length === 1) params.set('keyword', terms[0]);
|
||
if (terms.length > 1) params.set('keywords', terms.join(','));
|
||
if (filters.protocol) params.set('protocol', filters.protocol);
|
||
if (filters.status) params.set('status', filters.status);
|
||
return params;
|
||
},
|
||
useMonitorData: () => ({
|
||
summary: { data: { totalVehicles: 2, onlineVehicles: 2, offlineVehicles: 0, drivingVehicles: 1, idleVehicles: 1, frameToday: 10 } },
|
||
vehicles: { data: { items: vehicles, total: 2 }, isError: false, ...monitorQueryFlags },
|
||
map: { data: monitorMap, isPlaceholderData: monitorQueryFlags.isPlaceholderData },
|
||
selectedVehicle: { data: { items: [] } }
|
||
}),
|
||
useMonitorVehicleCard: () => ({ detail: {}, activeAlerts: {}, address: {} })
|
||
}));
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
monitorQueryFlags.isLoading = false;
|
||
monitorQueryFlags.isFetching = false;
|
||
monitorQueryFlags.isPlaceholderData = false;
|
||
});
|
||
|
||
test('starts without a selection and supports expand, collapse, reselection, and clear', () => {
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const view = render(<QueryClientProvider client={queryClient}><MemoryRouter><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
const workspace = view.container.querySelector('.v2-monitor-workspace')!;
|
||
const firstVehicle = screen.getByRole('button', { name: /粤A12345 LTEST000000000001/ });
|
||
const secondVehicle = screen.getByRole('button', { name: /粤B67890 LTEST000000000002/ });
|
||
|
||
expect(workspace).not.toHaveClass('is-detail-open');
|
||
expect(workspace).not.toHaveClass('is-detail-collapsed');
|
||
expect(firstVehicle).not.toHaveClass('is-selected');
|
||
expect(screen.queryByRole('button', { name: '取消选择车辆' })).not.toBeInTheDocument();
|
||
expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-selected-vin', '');
|
||
expect(screen.getByText('有实时位置')).toBeInTheDocument();
|
||
expect(screen.queryByText('接入车辆')).not.toBeInTheDocument();
|
||
|
||
fireEvent.click(firstVehicle);
|
||
expect(workspace).toHaveClass('is-detail-open');
|
||
expect(firstVehicle).toHaveClass('is-selected');
|
||
expect(screen.getByRole('button', { name: '取消选择车辆' })).toBeInTheDocument();
|
||
expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-selected-vin', 'LTEST000000000001');
|
||
const mapRendersAfterSelection = fleetMapRenderSpy.mock.calls.length;
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '收起车辆详情' }));
|
||
expect(workspace).toHaveClass('is-detail-collapsed');
|
||
expect(firstVehicle).toHaveClass('is-selected');
|
||
expect(screen.getByRole('button', { name: '展开车辆详情' })).toBeInTheDocument();
|
||
expect(fleetMapRenderSpy).toHaveBeenCalledTimes(mapRendersAfterSelection);
|
||
|
||
fireEvent.click(secondVehicle);
|
||
expect(workspace).toHaveClass('is-detail-open');
|
||
expect(secondVehicle).toHaveClass('is-selected');
|
||
expect(screen.queryByRole('button', { name: '展开车辆详情' })).not.toBeInTheDocument();
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '取消选择车辆' }));
|
||
expect(workspace).not.toHaveClass('is-detail-open');
|
||
expect(workspace).not.toHaveClass('is-detail-collapsed');
|
||
expect(secondVehicle).not.toHaveClass('is-selected');
|
||
expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-selected-vin', '');
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '选择地图车辆' }));
|
||
expect(workspace).toHaveClass('is-detail-open');
|
||
expect(secondVehicle).toHaveClass('is-selected');
|
||
});
|
||
|
||
test('switches to a lightweight realtime list and resolves addresses only on demand', async () => {
|
||
const row = vehicles[0];
|
||
vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: [row], total: 1, limit: 50, offset: 0 });
|
||
const reverseGeocode = vi.spyOn(api, 'reverseGeocode').mockResolvedValue({ provider: 'AMap', longitude: 113.26, latitude: 23.13, formattedAddress: '广东省广州市天河区测试路' });
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
fireEvent.click(screen.getByRole('button', { name: /列表/ }));
|
||
expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
|
||
expect(screen.getByText('速度、里程和坐标实时刷新，文字地址按需解析')).toBeInTheDocument();
|
||
expect(await screen.findAllByText('粤A12345')).toHaveLength(2);
|
||
expect(screen.getAllByText('42')).toHaveLength(2);
|
||
expect(screen.getAllByText(/1,234/)).toHaveLength(2);
|
||
expect(screen.getAllByText(/113\.260000/)).toHaveLength(2);
|
||
expect(reverseGeocode).not.toHaveBeenCalled();
|
||
|
||
fireEvent.click(screen.getAllByRole('button', { name: '解析粤A12345位置' })[0]);
|
||
expect(await screen.findByText('广东省广州市天河区测试路')).toBeInTheDocument();
|
||
expect(reverseGeocode).toHaveBeenCalledTimes(1);
|
||
expect(screen.queryByText('综合状态')).not.toBeInTheDocument();
|
||
expect(screen.queryByText('三路正常')).not.toBeInTheDocument();
|
||
expect(screen.queryByTestId('fleet-map')).not.toBeInTheDocument();
|
||
});
|
||
|
||
test('pastes, deduplicates, and submits multiple plates as one batch search', async () => {
|
||
const vehicleRealtime = vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: vehicles, total: 2, limit: 50, offset: 0 });
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
const input = screen.getByRole('textbox', { name: '搜索车辆' });
|
||
fireEvent.paste(input, { clipboardData: { getData: () => '粤a12345\n粤B67890，粤A12345' } });
|
||
expect(input).toHaveValue('粤A12345，粤B67890');
|
||
expect(screen.getAllByText('已找到 2/2')).toHaveLength(3);
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: /列表/ }));
|
||
await waitFor(() => {
|
||
const params = vehicleRealtime.mock.calls[vehicleRealtime.mock.calls.length - 1]?.[0];
|
||
expect(params?.get('keywords')).toBe('粤A12345,粤B67890');
|
||
expect(params?.has('keyword')).toBe(false);
|
||
});
|
||
});
|
||
|
||
test('hides stale fleet rows while a pasted batch is still loading', () => {
|
||
monitorQueryFlags.isPlaceholderData = true;
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.paste(screen.getByRole('textbox', { name: '搜索车辆' }), { clipboardData: { getData: () => '粤A12345\n粤B67890' } });
|
||
expect(screen.getByText('正在查找 2 辆车')).toBeInTheDocument();
|
||
expect(screen.getByText('查询中')).toBeInTheDocument();
|
||
expect(screen.queryByRole('button', { name: /粤A12345 LTEST000000000001/ })).not.toBeInTheDocument();
|
||
});
|
||
|
||
test('reports pasted plates that have no exact realtime match', () => {
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.paste(screen.getByRole('textbox', { name: '搜索车辆' }), { clipboardData: { getData: () => '粤A12345\n粤Z99999' } });
|
||
expect(screen.getByText('已找到 1/2')).toBeInTheDocument();
|
||
expect(screen.getAllByText('已找到 1/2 · 未找到 1 辆')).toHaveLength(2);
|
||
expect(screen.getAllByTitle('未找到：粤Z99999')).toHaveLength(2);
|
||
});
|