766 lines
46 KiB
TypeScript
766 lines
46 KiB
TypeScript
import { cleanup, fireEvent, render, screen, waitFor, within } 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';
|
||
import { ROUTER_FUTURE } from '../routing/routerConfig';
|
||
|
||
const vehicles = [{
|
||
vin: 'LTEST000000000001', plate: '粤A12345', protocols: ['JT808'], primaryProtocol: 'JT808',
|
||
locationAvailable: true, longitude: 113.26, latitude: 23.13, speedAvailable: true, speedKmh: 42,
|
||
socAvailable: false, socPercent: 0, mileageAvailable: true, totalMileageKm: 1234, todayMileageAvailable: true, todayMileageKm: 18.6,
|
||
lastSeen: '2026-07-14T01:00:00Z', online: true, sourceCount: 1, onlineSourceCount: 1
|
||
}, {
|
||
vin: 'LTEST000000000002', plate: '粤B67890', protocols: ['JT808'], primaryProtocol: 'JT808',
|
||
locationAvailable: true, longitude: 113.28, latitude: 23.15, speedAvailable: true, speedKmh: 0,
|
||
socAvailable: false, socPercent: 0, mileageAvailable: true, totalMileageKm: 2234, todayMileageAvailable: false, todayMileageKm: 0,
|
||
lastSeen: '2026-07-14T01:00:00Z', online: true, sourceCount: 1, onlineSourceCount: 1
|
||
}] as VehicleRealtimeRow[];
|
||
const monitorMap = { mode: 'provinces', clusters: [], points: [], total: 2, truncated: false };
|
||
const fleetMapRenderSpy = vi.hoisted(() => vi.fn());
|
||
const vehicleCardArgsSpy = vi.hoisted(() => vi.fn());
|
||
const monitorDataArgsSpy = vi.hoisted(() => vi.fn());
|
||
const qrToDataURLSpy = vi.hoisted(() => vi.fn());
|
||
const monitorQueryFlags = vi.hoisted(() => ({ isLoading: false, isFetching: false, isPlaceholderData: false }));
|
||
const monitorFleetFixture = vi.hoisted(() => ({ total: 2 }));
|
||
const monitorSummaryFixture = vi.hoisted(() => ({
|
||
totalVehicles: 2,
|
||
locationVehicles: 2,
|
||
noLocationVehicles: 0,
|
||
onlineVehicles: 2,
|
||
offlineVehicles: 0,
|
||
drivingVehicles: 1,
|
||
idleVehicles: 1,
|
||
frameToday: 10,
|
||
truncated: false
|
||
}));
|
||
const addressRefetchSpy = vi.hoisted(() => vi.fn());
|
||
const vehicleCardFixture = vi.hoisted(() => ({
|
||
detail: undefined as unknown,
|
||
addressData: undefined as unknown,
|
||
addressError: false,
|
||
addressFetching: false
|
||
}));
|
||
const originalClipboard = Object.getOwnPropertyDescriptor(navigator, 'clipboard');
|
||
|
||
function mockMobileViewport() {
|
||
const addEventListener = vi.fn();
|
||
const removeEventListener = vi.fn();
|
||
vi.spyOn(window, 'matchMedia').mockReturnValue({
|
||
matches: true,
|
||
media: '(max-width: 760px)',
|
||
onchange: null,
|
||
addEventListener,
|
||
removeEventListener,
|
||
addListener: vi.fn(),
|
||
removeListener: vi.fn(),
|
||
dispatchEvent: vi.fn(() => false)
|
||
} as unknown as MediaQueryList);
|
||
return { addEventListener, removeEventListener };
|
||
}
|
||
|
||
vi.mock('../map/FleetMap', () => ({
|
||
FleetMap: ({ selectedVin, onSelectVin, initialViewport, onOpenList }: { selectedVin?: string; onSelectVin?: (vin: string) => void; initialViewport?: { zoom: number; bounds: string }; onOpenList?: () => void }) => {
|
||
fleetMapRenderSpy(selectedVin, initialViewport);
|
||
return <div data-testid="fleet-map" data-selected-vin={selectedVin ?? ''} data-initial-zoom={initialViewport?.zoom ?? ''} data-initial-bounds={initialViewport?.bounds ?? ''}>
|
||
<button type="button" onClick={() => onSelectVin?.('LTEST000000000002')}>选择地图车辆</button>
|
||
<button type="button" onClick={onOpenList}>使用车辆列表</button>
|
||
</div>;
|
||
}
|
||
}));
|
||
|
||
vi.mock('qrcode', () => ({ default: { toDataURL: qrToDataURLSpy } }));
|
||
|
||
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;
|
||
},
|
||
monitorFilterScope: (filters: { keyword: string; protocol: string; status: string }) => {
|
||
const params = new URLSearchParams();
|
||
if (filters.keyword) params.set('keyword', filters.keyword);
|
||
if (filters.protocol) params.set('protocol', filters.protocol);
|
||
if (filters.status) params.set('status', filters.status);
|
||
return params.toString();
|
||
},
|
||
useMonitorData: (...args: unknown[]) => {
|
||
monitorDataArgsSpy(...args);
|
||
return {
|
||
summary: { data: monitorSummaryFixture },
|
||
vehicles: { data: { items: vehicles, total: monitorFleetFixture.total }, isError: false, ...monitorQueryFlags },
|
||
map: { data: monitorMap, isPlaceholderData: monitorQueryFlags.isPlaceholderData },
|
||
selectedVehicle: { data: { items: [] } }
|
||
};
|
||
},
|
||
useMonitorVehicleCard: (...args: unknown[]) => {
|
||
vehicleCardArgsSpy(...args);
|
||
return {
|
||
detail: { data: vehicleCardFixture.detail },
|
||
activeAlerts: {},
|
||
address: {
|
||
data: vehicleCardFixture.addressData,
|
||
isError: vehicleCardFixture.addressError,
|
||
isFetching: vehicleCardFixture.addressFetching,
|
||
refetch: addressRefetchSpy
|
||
}
|
||
};
|
||
}
|
||
}));
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
monitorQueryFlags.isLoading = false;
|
||
monitorQueryFlags.isFetching = false;
|
||
monitorQueryFlags.isPlaceholderData = false;
|
||
monitorSummaryFixture.frameToday = 10;
|
||
monitorSummaryFixture.totalVehicles = 2;
|
||
monitorSummaryFixture.truncated = false;
|
||
monitorFleetFixture.total = 2;
|
||
monitorMap.truncated = false;
|
||
monitorMap.total = 2;
|
||
vehicleCardFixture.detail = undefined;
|
||
vehicleCardFixture.addressData = undefined;
|
||
vehicleCardFixture.addressError = false;
|
||
vehicleCardFixture.addressFetching = false;
|
||
addressRefetchSpy.mockReset();
|
||
vehicleCardArgsSpy.mockClear();
|
||
monitorDataArgsSpy.mockClear();
|
||
qrToDataURLSpy.mockReset();
|
||
if (originalClipboard) Object.defineProperty(navigator, 'clipboard', originalClipboard);
|
||
else Reflect.deleteProperty(navigator, 'clipboard');
|
||
vi.restoreAllMocks();
|
||
});
|
||
|
||
test('never labels the latest historical mileage row as today when today has no mileage evidence', async () => {
|
||
vehicleCardFixture.detail = {
|
||
sources: ['JT808'],
|
||
sourceStatus: [],
|
||
mileage: {
|
||
items: [{ vin: vehicles[1].vin, plate: vehicles[1].plate, date: '2026-07-16', startMileageKm: 2100, endMileageKm: 2234, dailyMileageKm: 134, source: 'JT808' }],
|
||
total: 1,
|
||
limit: 20,
|
||
offset: 0
|
||
}
|
||
};
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: /粤B67890 LTEST000000000002/ }));
|
||
|
||
const todayMetric = (await screen.findByText('今日里程')).parentElement;
|
||
expect(todayMetric).toHaveTextContent('今日里程—');
|
||
expect(todayMetric).not.toHaveTextContent('134');
|
||
});
|
||
|
||
test('keeps a large daily report count readable in the desktop summary rail', () => {
|
||
monitorSummaryFixture.frameToday = 2_861_323;
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
const dailyReports = screen.getByTitle('今日上报 2,861,323 条');
|
||
expect(dailyReports).toHaveTextContent('今日上报286.1万条数据活跃度');
|
||
expect(dailyReports).not.toHaveTextContent('2,861,323');
|
||
});
|
||
|
||
test('makes a truncated ten-thousand-vehicle map scope explicit and offers the complete paged list', async () => {
|
||
monitorSummaryFixture.totalVehicles = 10_000;
|
||
monitorSummaryFixture.truncated = true;
|
||
monitorFleetFixture.total = 12_480;
|
||
monitorMap.total = 8_720;
|
||
monitorMap.truncated = true;
|
||
vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: vehicles, total: 12_480, limit: 50, offset: 0 });
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
const coverage = await screen.findByRole('status', { name: '地图与统计载荷已达到上限' });
|
||
expect(coverage).toHaveTextContent('已处理前 10,000 辆');
|
||
expect(coverage).toHaveTextContent('当前筛选共 12,480 辆');
|
||
expect(screen.getByLabelText('实时数据状态')).toHaveTextContent('地图覆盖8,720 / 12,480 辆有定位 · 省级聚合');
|
||
expect(screen.getByText('车辆总数').parentElement).toHaveTextContent('12,480辆');
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '查看完整车辆列表' }));
|
||
expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
|
||
expect(screen.queryByRole('status', { name: '地图与统计载荷已达到上限' })).not.toBeInTheDocument();
|
||
});
|
||
|
||
test('keeps coordinates usable and exposes retry when selected-vehicle address lookup fails', async () => {
|
||
vehicleCardFixture.addressError = true;
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: /粤A12345 LTEST000000000001/ }));
|
||
|
||
expect(await screen.findByRole('alert')).toHaveTextContent('地址解析失败，坐标仍可用');
|
||
expect(screen.getByRole('button', { name: '查看全部位置来源' })).toHaveTextContent('113.260000, 23.130000');
|
||
fireEvent.click(screen.getByRole('button', { name: '重试' }));
|
||
expect(addressRefetchSpy).toHaveBeenCalledTimes(1);
|
||
});
|
||
|
||
test('starts without a selection and supports expand, collapse, reselection, and clear', async () => {
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const view = render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
const workspace = view.container.querySelector('.v2-monitor-workspace')!;
|
||
const monitorPage = view.container.querySelector('.v2-monitor-page')!;
|
||
const firstVehicle = screen.getByRole('button', { name: /粤A12345 LTEST000000000001/ });
|
||
const secondVehicle = screen.getByRole('button', { name: /粤B67890 LTEST000000000002/ });
|
||
|
||
expect(firstVehicle).toHaveClass('semi-button', 'v2-vehicle-row');
|
||
expect(view.container.querySelector('.v2-filterbar')).toHaveClass('semi-card');
|
||
const kpis = screen.getByRole('list', { name: '车辆整体统计' });
|
||
expect(kpis.closest('.v2-monitor-summary-rail')).toHaveClass('semi-card', 'v2-workspace-metric-rail', 'is-queue');
|
||
expect(Array.from(kpis.querySelectorAll(':scope > [role="listitem"] small')).map((item) => item.textContent)).toEqual([
|
||
'车辆总数', '当前在线', '行驶车辆', '当前离线', '静止车辆', '告警车辆'
|
||
]);
|
||
expect(kpis.querySelectorAll(':scope > [role="listitem"]')).toHaveLength(6);
|
||
expect(kpis.querySelector(':scope > [role="listitem"]:nth-child(1)')).toHaveClass('is-primary');
|
||
expect(kpis.querySelector(':scope > [role="listitem"]:nth-child(2)')).toHaveClass('is-primary', 'is-success');
|
||
expect(kpis.querySelector(':scope > [role="listitem"]:nth-child(4)')).toHaveClass('is-secondary');
|
||
const summarySupport = view.container.querySelector('.v2-monitor-summary-support');
|
||
expect(summarySupport).toHaveTextContent('今日上报10条数据活跃度');
|
||
expect(summarySupport).toHaveTextContent('无实时位置0辆辅助排查');
|
||
expect(view.container.querySelector('.v2-kpis')).not.toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-event-strip')).toHaveClass('semi-card');
|
||
expect(view.container.querySelector('.v2-monitor-live-tag')).toHaveClass('semi-tag');
|
||
const liveStatus = screen.getByLabelText('实时数据状态');
|
||
expect(liveStatus).toHaveTextContent('数据已同步');
|
||
expect(liveStatus).toHaveTextContent('实时数据2 辆已载入');
|
||
expect(liveStatus).toHaveTextContent('地图覆盖2 / 2 辆有定位 · 省级聚合');
|
||
expect(liveStatus).toHaveTextContent('智能刷新重点 10s · 车队 15s · 统计 30s');
|
||
expect(liveStatus).toHaveTextContent('最近同步等待数据');
|
||
expect(workspace).not.toHaveClass('is-detail-open');
|
||
expect(workspace).not.toHaveClass('is-detail-collapsed');
|
||
expect(monitorPage).toHaveClass('is-map-mode');
|
||
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.getByText('无实时位置')).toBeInTheDocument();
|
||
expect(screen.getByRole('status', { name: '搜索和筛选条件修改后自动生效，已启用 0 个条件' })).toHaveTextContent('自动生效');
|
||
expect(screen.getByRole('button', { name: /清空/ })).toBeDisabled();
|
||
expect(screen.queryByRole('button', { name: '筛选' })).not.toBeInTheDocument();
|
||
expect(screen.queryByText('接入车辆')).not.toBeInTheDocument();
|
||
|
||
fireEvent.click(firstVehicle);
|
||
expect(await screen.findByRole('region', { name: '粤A12345车辆详情' })).toBeInTheDocument();
|
||
expect(workspace).toHaveClass('is-detail-open');
|
||
expect(monitorPage).toHaveClass('is-map-mode');
|
||
expect(firstVehicle).toHaveClass('is-selected');
|
||
expect(screen.getByRole('button', { name: '取消选择车辆' })).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-vehicle-detail')).toHaveClass('semi-card');
|
||
expect(screen.getByRole('region', { name: '粤A12345车辆详情' })).toBeInTheDocument();
|
||
expect(screen.getByRole('navigation', { name: '车辆快捷操作' })).toBeInTheDocument();
|
||
for (const name of ['最新上报', '实时状态', '车辆信息']) {
|
||
expect(screen.getByRole('heading', { name, level: 5 })).toBeInTheDocument();
|
||
}
|
||
expect(screen.getByText('身份、车型与来源覆盖')).toBeInTheDocument();
|
||
expect(screen.getByText('1/1 在线').closest('.semi-tag')).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-report-summary')).toHaveTextContent('平台接收时间');
|
||
expect(view.container.querySelector('.v2-report-summary')).toHaveTextContent('主协议JT/T 808');
|
||
expect(view.container.querySelector('.v2-report-summary .v2-protocol-tag')).toHaveClass('semi-tag-cyan-light');
|
||
expect(view.container.querySelectorAll('.v2-detail-actions a')).toHaveLength(6);
|
||
expect(Array.from(view.container.querySelectorAll('.v2-detail-actions a')).map((item) => item.textContent)).toEqual([
|
||
'单车详情', '轨迹回放', '历史数据', '里程查询', '事件流', '质量差异'
|
||
]);
|
||
expect(new URL(screen.getByRole('link', { name: '事件流' }).getAttribute('href')!, 'https://vehicle-platform.invalid').searchParams.get('keyword')).toBe('LTEST000000000001');
|
||
expect(new URL(screen.getByRole('link', { name: '质量差异' }).getAttribute('href')!, 'https://vehicle-platform.invalid').searchParams.get('reconcileKeyword')).toBe('LTEST000000000001');
|
||
expect(view.container.querySelector('.v2-detail-protocols .v2-protocol-tag')).toHaveTextContent('JT/T 808');
|
||
expect(screen.getByRole('list', { name: '车辆实时状态指标' })).toHaveClass('v2-workspace-metric-list');
|
||
expect(view.container.querySelector('.v2-monitor-detail-metric-rail')).toHaveClass('semi-card', 'v2-workspace-metric-rail', 'is-queue');
|
||
expect(view.container.querySelectorAll('.v2-monitor-detail-metric-rail .v2-workspace-metric-list > [role="listitem"]')).toHaveLength(4);
|
||
expect(view.container.querySelector('.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span:first-child')).toHaveTextContent('速度42');
|
||
expect(view.container.querySelector('.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span:nth-child(2)')).toHaveTextContent('今日里程18.6km');
|
||
expect(view.container.querySelector('.v2-monitor-detail-state')).toHaveTextContent('车辆状态行驶当前告警0条');
|
||
expect(view.container.querySelector('.v2-status-text')).toHaveClass('semi-tag');
|
||
expect(screen.getByRole('button', { name: '取消选择车辆' })).toHaveClass('semi-button');
|
||
expect(screen.getByRole('button', { name: '查看总里程全部来源' })).toHaveClass('semi-button', 'v2-workspace-metric-action');
|
||
expect(screen.getByRole('button', { name: '查看全部位置来源' })).toHaveClass('semi-button', 'v2-detail-source-link');
|
||
expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-selected-vin', 'LTEST000000000001');
|
||
expect(vehicleCardArgsSpy).toHaveBeenLastCalledWith('LTEST000000000001', vehicles[0], true);
|
||
expect(screen.getByText('SOC').parentElement).toHaveTextContent('SOC—');
|
||
const mapRendersAfterSelection = fleetMapRenderSpy.mock.calls.length;
|
||
const cardCallsAfterSelection = vehicleCardArgsSpy.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(view.container.querySelector('.v2-detail-peek')).toHaveClass('semi-card');
|
||
expect(fleetMapRenderSpy).toHaveBeenCalledTimes(mapRendersAfterSelection);
|
||
expect(vehicleCardArgsSpy).toHaveBeenCalledTimes(cardCallsAfterSelection);
|
||
|
||
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('returns the monitor scroll owner to the command bar when changing views', async () => {
|
||
vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: vehicles, total: 2, limit: 50, offset: 0 });
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const view = render(
|
||
<main className="v2-content" data-testid="monitor-scroll-owner">
|
||
<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>
|
||
</main>
|
||
);
|
||
const scrollOwner = screen.getByTestId('monitor-scroll-owner');
|
||
const monitorPage = view.container.querySelector('.v2-monitor-page')!;
|
||
|
||
scrollOwner.scrollTop = 180;
|
||
fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
|
||
expect(scrollOwner.scrollTop).toBe(0);
|
||
expect(monitorPage).toHaveClass('is-list-mode');
|
||
|
||
scrollOwner.scrollTop = 120;
|
||
fireEvent.click(screen.getByRole('tab', { name: /地图/ }));
|
||
expect(scrollOwner.scrollTop).toBe(0);
|
||
expect(monitorPage).toHaveClass('is-map-mode');
|
||
});
|
||
|
||
test('restores URL-backed monitor context and carries it into every vehicle workflow', async () => {
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const entry = '/monitor?keyword=%E7%B2%A4A12345&protocol=JT808&status=online&selectedVin=LTEST000000000001&detail=collapsed&zoom=13&bounds=113.100000%2C23.000000%2C113.400000%2C23.300000';
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE} initialEntries={[entry]}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
expect(screen.getByRole('textbox', { name: '搜索车辆' })).toHaveValue('粤A12345');
|
||
expect(screen.getByRole('combobox', { name: '协议' })).toHaveTextContent('JT808');
|
||
expect(screen.getByRole('combobox', { name: '在线状态' })).toHaveTextContent('在线');
|
||
expect(screen.getByRole('button', { name: '展开车辆详情' })).toBeInTheDocument();
|
||
expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-initial-zoom', '13');
|
||
expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-initial-bounds', '113.100000,23.000000,113.400000,23.300000');
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '展开车辆详情' }));
|
||
expect(await screen.findByRole('navigation', { name: '车辆快捷操作' })).toBeInTheDocument();
|
||
for (const name of ['单车详情', '轨迹回放', '历史数据', '里程查询', '事件流', '质量差异']) {
|
||
const target = new URL(screen.getByRole('link', { name }).getAttribute('href')!, 'https://vehicle-platform.invalid');
|
||
const monitorReturn = target.searchParams.get('monitorReturn');
|
||
expect(monitorReturn).toContain('/monitor?');
|
||
expect(monitorReturn).toContain('selectedVin=LTEST000000000001');
|
||
expect(monitorReturn).toContain('zoom=13');
|
||
}
|
||
});
|
||
|
||
test('turns the fleet summary into consistent status filters and clears stale vehicle selection', async () => {
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: /粤A12345 LTEST000000000001/ }));
|
||
expect(await screen.findByRole('region', { name: '粤A12345车辆详情' })).toBeInTheDocument();
|
||
|
||
const drivingFilter = screen.getByRole('button', { name: '筛选行驶车辆，共 1 辆' });
|
||
fireEvent.click(drivingFilter);
|
||
|
||
expect(screen.queryByRole('region', { name: '粤A12345车辆详情' })).not.toBeInTheDocument();
|
||
expect(screen.getByRole('combobox', { name: '在线状态' })).toHaveTextContent('行驶');
|
||
expect(drivingFilter).toHaveAttribute('aria-pressed', 'true');
|
||
expect(screen.getByTestId('fleet-map')).toHaveAttribute('data-selected-vin', '');
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '筛选无实时位置车辆，共 0 辆' }));
|
||
expect(screen.getByRole('combobox', { name: '在线状态' })).toHaveTextContent('无实时位置');
|
||
expect(screen.getByRole('button', { name: '筛选无实时位置车辆，共 0 辆' })).toHaveAttribute('aria-pressed', 'true');
|
||
});
|
||
|
||
test('keeps the current map selection visible when reviewing the realtime list', async () => {
|
||
vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: vehicles, total: 2, limit: 50, offset: 0 });
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const view = render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE} initialEntries={['/monitor?selectedVin=LTEST000000000001&detail=collapsed']}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
|
||
expect(await screen.findByTitle('当前地图选中，点击返回地图')).toHaveClass('is-selected');
|
||
expect(view.container.querySelector('.v2-monitor-table .semi-table-row.is-selected')).toBeInTheDocument();
|
||
});
|
||
|
||
test('shows active filter count and clears all filter fields in one action', () => {
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE} initialEntries={['/monitor?keyword=%E7%B2%A4A12345&protocol=JT808&status=online']}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
expect(screen.getByRole('status', { name: '搜索和筛选条件修改后自动生效，已启用 3 个条件' })).toHaveTextContent('自动生效3');
|
||
const clear = screen.getByRole('button', { name: /清空/ });
|
||
expect(clear).toBeEnabled();
|
||
|
||
fireEvent.click(clear);
|
||
|
||
expect(screen.getByRole('textbox', { name: '搜索车辆' })).toHaveValue('');
|
||
expect(screen.getByRole('combobox', { name: '协议' })).toHaveTextContent('全部协议');
|
||
expect(screen.getByRole('combobox', { name: '在线状态' })).toHaveTextContent('全部状态');
|
||
expect(screen.getByRole('status', { name: '搜索和筛选条件修改后自动生效，已启用 0 个条件' })).toHaveTextContent('自动生效');
|
||
expect(clear).toBeDisabled();
|
||
});
|
||
|
||
test('switches to a lightweight realtime list and resolves addresses only on demand', async () => {
|
||
const row = vehicles[0];
|
||
const realtime = 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 } } });
|
||
const view = render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
const modeGroup = screen.getByRole('tablist', { name: '监控视图' });
|
||
const mapMode = within(modeGroup).getByRole('tab', { name: /地图/ });
|
||
const listMode = within(modeGroup).getByRole('tab', { name: /列表/ });
|
||
expect(mapMode).toHaveAttribute('aria-selected', 'true');
|
||
expect(mapMode).toHaveClass('is-active');
|
||
expect(listMode).toHaveAttribute('aria-selected', 'false');
|
||
fireEvent.click(listMode);
|
||
expect(mapMode).toHaveAttribute('aria-selected', 'false');
|
||
expect(listMode).toHaveAttribute('aria-selected', 'true');
|
||
expect(listMode).toHaveClass('is-active');
|
||
expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
|
||
expect(screen.getByRole('heading', { name: '车辆实时列表', level: 5 })).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-monitor-table-panel')).toHaveClass('semi-card');
|
||
expect(view.container.querySelector('.v2-monitor-table.semi-table-wrapper')).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-monitor-table-scroll > table')).not.toBeInTheDocument();
|
||
expect(screen.getByText('覆盖全部授权车辆；缺失值显示“—”，地址按需解析')).toBeInTheDocument();
|
||
expect(await screen.findAllByText('粤A12345')).toHaveLength(1);
|
||
expect(realtime.mock.calls[realtime.mock.calls.length - 1]?.[0]?.get('sort')).toBe('identity');
|
||
expect(screen.getAllByText('42')).toHaveLength(1);
|
||
expect(screen.getAllByText(/18\.6/)).toHaveLength(1);
|
||
expect(screen.getAllByText(/1,234/)).toHaveLength(1);
|
||
expect(screen.getByText('JT/T 808')).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-monitor-protocol .v2-protocol-tag')).toHaveClass('semi-tag-cyan-light');
|
||
expect(screen.getAllByText(/113\.260000/)).toHaveLength(1);
|
||
expect(screen.queryByText('推荐来源')).not.toBeInTheDocument();
|
||
expect(screen.getByText('当日里程')).toBeInTheDocument();
|
||
expect(screen.getByText('协议来源')).toBeInTheDocument();
|
||
expect(screen.queryByText('最新上报')).not.toBeInTheDocument();
|
||
expect(reverseGeocode).not.toHaveBeenCalled();
|
||
|
||
expect(screen.getByRole('button', { name: '解析粤A12345位置' })).toHaveClass('semi-button', 'v2-monitor-address-action');
|
||
fireEvent.click(screen.getByRole('button', { name: '解析粤A12345位置' }));
|
||
expect(await screen.findByText('广东省广州市天河区测试路')).toBeInTheDocument();
|
||
expect(screen.getByText(/解析于 \d{2}:\d{2}/)).toBeInTheDocument();
|
||
expect(reverseGeocode).toHaveBeenCalledTimes(1);
|
||
expect(queryClient.getQueryCache().findAll({ queryKey: ['monitor', 'list-address'] })).toHaveLength(1);
|
||
expect(screen.queryByText('综合状态')).not.toBeInTheDocument();
|
||
expect(screen.queryByText('三路正常')).not.toBeInTheDocument();
|
||
expect(screen.queryByTestId('fleet-map')).not.toBeInTheDocument();
|
||
|
||
fireEvent.click(screen.getByRole('tab', { name: /地图/ }));
|
||
await waitFor(() => expect(queryClient.getQueryCache().findAll({ queryKey: ['monitor', 'list-address'] })).toHaveLength(0));
|
||
view.unmount();
|
||
});
|
||
|
||
test('shows one recovery state instead of stacking an empty state below a failed list query', async () => {
|
||
vi.spyOn(api, 'vehicleRealtime').mockRejectedValue(new Error('当前账号无权查看该车辆'));
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const view = render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
|
||
|
||
expect(await screen.findByText('当前账号无权查看该车辆')).toBeInTheDocument();
|
||
expect(screen.getByRole('button', { name: '重试' })).toBeInTheDocument();
|
||
expect(screen.queryByText('暂无符合条件的车辆')).not.toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-monitor-table-scroll')).toHaveClass('is-error');
|
||
});
|
||
|
||
test('keeps authorized vehicles without realtime coordinates in the list without geocoding them', async () => {
|
||
const row = {
|
||
...vehicles[0],
|
||
vin: 'LNOLOCATION0000001',
|
||
plate: '粤A无定位',
|
||
protocols: [],
|
||
primaryProtocol: '',
|
||
locationAvailable: false,
|
||
longitude: 0,
|
||
latitude: 0,
|
||
speedAvailable: false,
|
||
speedKmh: 0,
|
||
mileageAvailable: false,
|
||
totalMileageKm: 0,
|
||
todayMileageAvailable: false,
|
||
todayMileageKm: 0,
|
||
lastSeen: '',
|
||
online: false,
|
||
sourceCount: 0,
|
||
onlineSourceCount: 0
|
||
} satisfies VehicleRealtimeRow;
|
||
vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: [row], total: 1, limit: 50, offset: 0 });
|
||
const reverseGeocode = vi.spyOn(api, 'reverseGeocode');
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
|
||
|
||
expect(await screen.findByText('粤A无定位')).toBeInTheDocument();
|
||
expect(screen.getByText('暂无实时位置')).toBeInTheDocument();
|
||
expect(screen.queryByRole('button', { name: /解析粤A无定位位置/ })).not.toBeInTheDocument();
|
||
expect(reverseGeocode).not.toHaveBeenCalled();
|
||
});
|
||
|
||
test('keeps the desktop realtime list available when a runtime response omits protocols', async () => {
|
||
const runtimeRow = {
|
||
...vehicles[0],
|
||
protocols: null,
|
||
primaryProtocol: ''
|
||
} as unknown as VehicleRealtimeRow;
|
||
vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: [runtimeRow], total: 1, limit: 50, offset: 0 });
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE} initialEntries={['/monitor?mode=list']}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
expect(await screen.findByText('粤A12345')).toBeInTheDocument();
|
||
expect(screen.getByText('待识别')).toBeInTheDocument();
|
||
expect(screen.queryByText('当前模块暂时无法显示')).not.toBeInTheDocument();
|
||
});
|
||
|
||
test('pauses selected-vehicle polling in list mode and resumes it when returning to the map', () => {
|
||
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 future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: /粤A12345 LTEST000000000001/ }));
|
||
expect(monitorDataArgsSpy).toHaveBeenLastCalledWith(expect.any(Object), expect.any(Object), 'LTEST000000000001', true, true);
|
||
|
||
fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
|
||
expect(monitorDataArgsSpy).toHaveBeenLastCalledWith(expect.any(Object), expect.any(Object), '', false, false);
|
||
|
||
fireEvent.click(screen.getByRole('tab', { name: /地图/ }));
|
||
expect(monitorDataArgsSpy).toHaveBeenLastCalledWith(expect.any(Object), expect.any(Object), 'LTEST000000000001', true, true);
|
||
});
|
||
|
||
test('loads the QR generator only after opening the mobile entry', async () => {
|
||
qrToDataURLSpy.mockResolvedValue('data:image/png;base64,vehicle-monitor');
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
expect(qrToDataURLSpy).not.toHaveBeenCalled();
|
||
fireEvent.click(screen.getByRole('button', { name: /手机端/ }));
|
||
|
||
expect(await screen.findByRole('img', { name: '全局监控手机端二维码' })).toHaveAttribute('src', 'data:image/png;base64,vehicle-monitor');
|
||
expect(qrToDataURLSpy).toHaveBeenCalledTimes(1);
|
||
expect(qrToDataURLSpy.mock.calls[0][0]).toMatch(/\/monitor$/);
|
||
expect(qrToDataURLSpy.mock.calls[0][0]).not.toContain('token');
|
||
});
|
||
|
||
test('closes the mobile entry with Escape and reports clipboard success', async () => {
|
||
qrToDataURLSpy.mockResolvedValue('data:image/png;base64,vehicle-monitor');
|
||
const writeText = vi.fn().mockResolvedValue(undefined);
|
||
Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } });
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: /手机端/ }));
|
||
expect(await screen.findByRole('dialog', { name: '手机端全局监控' })).toBeInTheDocument();
|
||
expect(screen.getByRole('button', { name: '关闭手机端入口' })).toBeInTheDocument();
|
||
expect(await screen.findByRole('img', { name: '全局监控手机端二维码' })).toBeInTheDocument();
|
||
fireEvent.click(screen.getByRole('button', { name: '复制访问地址' }));
|
||
expect(await screen.findByRole('button', { name: '已复制访问地址' })).toBeInTheDocument();
|
||
expect(writeText).toHaveBeenCalledWith(expect.stringMatching(/\/monitor$/));
|
||
|
||
fireEvent.keyDown(document.body, { key: 'Escape', code: 'Escape', keyCode: 27 });
|
||
await waitFor(() => expect(screen.queryByRole('dialog', { name: '手机端全局监控' })).not.toBeInTheDocument());
|
||
});
|
||
|
||
test('shows a retry action when on-demand QR generation fails', async () => {
|
||
qrToDataURLSpy.mockRejectedValueOnce(new Error('canvas unavailable')).mockResolvedValue('data:image/png;base64,recovered');
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: /手机端/ }));
|
||
expect(await screen.findByRole('alert')).toHaveTextContent('二维码生成失败');
|
||
fireEvent.click(screen.getByRole('button', { name: '重新生成' }));
|
||
|
||
expect(await screen.findByRole('img', { name: '全局监控手机端二维码' })).toHaveAttribute('src', 'data:image/png;base64,recovered');
|
||
expect(qrToDataURLSpy).toHaveBeenCalledTimes(2);
|
||
});
|
||
|
||
test('mounts only the mobile list representation and removes its viewport listener', async () => {
|
||
const { addEventListener, removeEventListener } = mockMobileViewport();
|
||
vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: [vehicles[0]], total: 1, limit: 50, offset: 0 });
|
||
monitorSummaryFixture.frameToday = 2_861_323;
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const view = render(
|
||
<main className="v2-content" data-testid="mobile-monitor-scroll-owner">
|
||
<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>
|
||
</main>
|
||
);
|
||
|
||
const filterFields = view.container.querySelector('#monitor-filter-fields');
|
||
const scrollOwner = screen.getByTestId('mobile-monitor-scroll-owner');
|
||
expect(filterFields).toHaveClass('is-mobile-collapsed');
|
||
expect(screen.queryByRole('button', { name: '打开手机端入口' })).not.toBeInTheDocument();
|
||
expect(screen.getByRole('list', { name: '车辆整体统计' }).querySelectorAll(':scope > [role="listitem"]')).toHaveLength(6);
|
||
const expandFilters = screen.getByRole('button', { name: '展开车辆筛选，当前 0 个条件' });
|
||
expect(expandFilters).toHaveAttribute('aria-expanded', 'false');
|
||
scrollOwner.scrollTop = 180;
|
||
fireEvent.click(expandFilters);
|
||
expect(scrollOwner.scrollTop).toBe(0);
|
||
expect(filterFields).not.toHaveClass('is-mobile-collapsed');
|
||
const collapseFilters = screen.getByRole('button', { name: '收起车辆筛选，当前 0 个条件' });
|
||
expect(collapseFilters).toHaveAttribute('aria-expanded', 'true');
|
||
scrollOwner.scrollTop = 120;
|
||
fireEvent.click(collapseFilters);
|
||
expect(scrollOwner.scrollTop).toBe(0);
|
||
expect(filterFields).toHaveClass('is-mobile-collapsed');
|
||
|
||
fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
|
||
expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
|
||
await waitFor(() => expect(view.container.querySelectorAll('.v2-monitor-mobile-cards .v2-monitor-mobile-card.semi-card')).toHaveLength(1));
|
||
const mobileCard = view.container.querySelector('.v2-monitor-mobile-card');
|
||
expect(mobileCard).toHaveAttribute('aria-label', '粤A12345 实时数据');
|
||
expect(mobileCard?.querySelector('.v2-monitor-mobile-primary')).toHaveTextContent('速度42 km/h当日里程18.6 km总里程1,234 km协议来源JT/T 808');
|
||
expect(mobileCard?.querySelectorAll('.v2-monitor-mobile-primary > div')).toHaveLength(4);
|
||
expect(mobileCard?.querySelector('.v2-monitor-mobile-location')).toHaveTextContent('113.260000, 23.130000解析位置');
|
||
expect(view.container.querySelector('.v2-monitor-table-scroll')).not.toBeInTheDocument();
|
||
expect(screen.getByRole('button', { name: '在地图中定位粤A12345' })).toHaveTextContent('定位');
|
||
expect(screen.getByTitle('今日上报 2,861,323 条')).toHaveTextContent('今日上报286.1万条');
|
||
expect(view.container.querySelector('.v2-monitor-mobile-card footer')).not.toBeInTheDocument();
|
||
expect(addEventListener).toHaveBeenCalledWith('change', expect.any(Function));
|
||
|
||
view.unmount();
|
||
expect(removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
|
||
});
|
||
|
||
test('returns a mobile list-origin vehicle directly to its selected list card', async () => {
|
||
mockMobileViewport();
|
||
vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: vehicles, total: 2, limit: 50, offset: 0 });
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const view = render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
|
||
expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
|
||
expect(await screen.findByRole('button', { name: '在地图中定位粤B67890' })).toBeInTheDocument();
|
||
const scrollOwner = screen.getByLabelText('车辆实时列表');
|
||
scrollOwner.scrollTop = 180;
|
||
fireEvent.scroll(scrollOwner);
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '在地图中定位粤B67890' }));
|
||
expect(await screen.findByRole('region', { name: '粤B67890车辆详情' })).toBeInTheDocument();
|
||
expect(screen.getByRole('button', { name: '返回车辆列表' })).toBeInTheDocument();
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '返回车辆列表' }));
|
||
expect(await screen.findByText('车辆实时列表')).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-monitor-mobile-card.is-selected')).toBeInTheDocument();
|
||
expect(screen.getByLabelText('粤B67890 实时数据，当前地图选中')).toBeInTheDocument();
|
||
});
|
||
|
||
test('opens an exact mobile search match directly and does not reopen it after dismissal', async () => {
|
||
mockMobileViewport();
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(
|
||
<main className="v2-content" data-testid="mobile-exact-match-scroll-owner">
|
||
<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>
|
||
</main>
|
||
);
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '展开车辆筛选，当前 0 个条件' }));
|
||
fireEvent.change(screen.getByRole('textbox', { name: '搜索车辆' }), { target: { value: '粤A12345' } });
|
||
|
||
expect(await screen.findByRole('region', { name: '粤A12345车辆详情' })).toBeInTheDocument();
|
||
expect(screen.getByRole('button', { name: '展开车辆筛选，当前 1 个条件' })).toHaveAttribute('aria-expanded', 'false');
|
||
|
||
const scrollOwner = screen.getByTestId('mobile-exact-match-scroll-owner');
|
||
scrollOwner.scrollTop = 120;
|
||
fireEvent.click(screen.getByRole('button', { name: '取消选择车辆' }));
|
||
expect(screen.queryByRole('region', { name: '粤A12345车辆详情' })).not.toBeInTheDocument();
|
||
await waitFor(() => expect(scrollOwner.scrollTop).toBe(0));
|
||
expect(screen.queryByRole('region', { name: '粤A12345车辆详情' })).not.toBeInTheDocument();
|
||
});
|
||
|
||
test('renders missing and multiple runtime protocol sources on mobile without crashing', async () => {
|
||
mockMobileViewport();
|
||
const runtimeRows = [{
|
||
...vehicles[0],
|
||
protocols: null,
|
||
primaryProtocol: ''
|
||
}, {
|
||
...vehicles[1],
|
||
protocols: ['GB32960', 'JT808'],
|
||
primaryProtocol: 'GB32960'
|
||
}] as unknown as VehicleRealtimeRow[];
|
||
vi.spyOn(api, 'vehicleRealtime').mockResolvedValue({ items: runtimeRows, total: 2, limit: 50, offset: 0 });
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const view = render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE} initialEntries={['/monitor?mode=list']}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
await waitFor(() => expect(view.container.querySelectorAll('.v2-monitor-mobile-card')).toHaveLength(2));
|
||
expect(screen.getByText('待识别')).toBeInTheDocument();
|
||
expect(screen.getByText('2 路')).toBeInTheDocument();
|
||
expect(screen.queryByText('当前模块暂时无法显示')).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 future={ROUTER_FUTURE}><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('tab', { 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('opens an explicit batch editor and applies copied plate rows', 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 future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '批量' }));
|
||
const editor = await screen.findByRole('textbox', { name: /每行一个车牌/ });
|
||
fireEvent.change(editor, { target: { value: '粤a12345\n粤B67890\n粤A12345' } });
|
||
expect(screen.getByText('2', { selector: '.v2-batch-search-summary strong' })).toBeInTheDocument();
|
||
fireEvent.click(screen.getByRole('button', { name: '应用搜索（2）' }));
|
||
|
||
expect(screen.queryByRole('dialog', { name: '批量搜索车辆' })).not.toBeInTheDocument();
|
||
expect(screen.getByRole('textbox', { name: '搜索车辆' })).toHaveValue('粤A12345，粤B67890');
|
||
fireEvent.click(screen.getByRole('tab', { name: /列表/ }));
|
||
await waitFor(() => {
|
||
const params = vehicleRealtime.mock.calls[vehicleRealtime.mock.calls.length - 1]?.[0];
|
||
expect(params?.get('keywords')).toBe('粤A12345,粤B67890');
|
||
});
|
||
});
|
||
|
||
test('hides stale fleet rows while a pasted batch scope is still loading', () => {
|
||
monitorQueryFlags.isLoading = true;
|
||
monitorQueryFlags.isPlaceholderData = true;
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><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('keeps same-filter fleet rows visible while a viewport placeholder refreshes', () => {
|
||
monitorQueryFlags.isPlaceholderData = true;
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><MonitorPage /></MemoryRouter></QueryClientProvider>);
|
||
|
||
expect(screen.getByRole('button', { name: /粤A12345 LTEST000000000001/ })).toBeInTheDocument();
|
||
expect(screen.queryByText('加载车辆')).not.toBeInTheDocument();
|
||
expect(screen.getByTestId('fleet-map')).toBeInTheDocument();
|
||
});
|
||
|
||
test('reports pasted plates that have no exact realtime match', () => {
|
||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={queryClient}><MemoryRouter future={ROUTER_FUTURE}><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);
|
||
});
|