refine Semi UI vehicle directory

vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.test.tsx

@@ -181,9 +181,11 @@ test('shows deduplicated Semi vehicle candidates and opens the selected VIN', as
   expect(view.container.querySelector('.v2-vehicle-discovery-shell')).toContainElement(screen.getByLabelText('查车操作'));
   expect(screen.getByRole('button', { name: `打开 ${initialRealtime.vin} 车辆档案` })).toBeInTheDocument();
   fireEvent.focus(input);
-  expect(input).toHaveAttribute('aria-expanded', 'true');
+  expect(input).toHaveAttribute('aria-expanded', 'false');
+  expect(view.container.querySelector('.v2-vehicle-search-options')).not.toBeInTheDocument();
   fireEvent.change(input, { target: { value: initialRealtime.plate } });
   await waitFor(() => expect(vehicles).toHaveBeenCalledTimes(2));
+  expect(input).toHaveAttribute('aria-expanded', 'true');
   expect(screen.getByRole('heading', { name: '匹配车辆', level: 5 })).toBeInTheDocument();
   const option = await screen.findByRole('option', { name: `${initialRealtime.plate} ${initialRealtime.vin} JT808 选择` });
   expect(view.container.querySelector('#v2-vehicle-search-options.v2-vehicle-candidate-list')).toBeInTheDocument();
@@ -237,7 +239,49 @@ test('defaults to a compact mobile vehicle directory and keeps eight recent vehi
   expect(input).toBeVisible();
   expect(view.container.querySelector('.v2-vehicle-search-options')).not.toBeInTheDocument();
   fireEvent.focus(input);
-  expect(view.container.querySelector('.v2-vehicle-search-options')).toBeInTheDocument();
+  expect(view.container.querySelector('.v2-vehicle-search-options')).not.toBeInTheDocument();
+  fireEvent.change(input, { target: { value: items[0].plate } });
+  await waitFor(() => expect(view.container.querySelector('.v2-vehicle-search-options')).toBeInTheDocument());
+  expect(view.container.querySelector('.v2-vehicle-search-page')).toHaveClass('has-candidates');
+  fireEvent.click(screen.getByRole('button', { name: /查询车辆/ }));
+  expect(view.container.querySelector('.v2-vehicle-search-options')).not.toBeInTheDocument();
+  expect(view.container.querySelector('.v2-vehicle-search-page')).not.toHaveClass('has-candidates');
+  expect(screen.getByRole('heading', { name: '匹配车辆', level: 5 })).toBeInTheDocument();
+});
+
+test('keeps a partial vehicle query in the directory instead of navigating to an invalid detail route', async () => {
+  const candidate = {
+    vin: initialRealtime.vin,
+    plate: initialRealtime.plate,
+    phone: '13800000000',
+    oem: '测试品牌',
+    protocols: ['JT808'],
+    missingProtocols: [],
+    sourceStatus: [],
+    sourceCount: 1,
+    onlineSourceCount: 1,
+    online: true,
+    lastSeen: initialRealtime.lastSeen,
+    locationText: '广东省广州市',
+    bindingScore: 100,
+    bindingStatus: 'bound'
+  };
+  vi.spyOn(api, 'vehicleCoverage').mockResolvedValue({ items: [candidate], total: 1, limit: 10, offset: 0 });
+  const vehicleDetail = vi.spyOn(api, 'vehicleDetail');
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+
+  const view = render(<QueryClientProvider client={client}><MemoryRouter initialEntries={['/vehicles']} future={ROUTER_FUTURE}><Routes><Route path="/vehicles" element={<VehiclePage />} /><Route path="/vehicles/:vin" element={<VehiclePage />} /></Routes></MemoryRouter></QueryClientProvider>);
+
+  await screen.findByRole('heading', { name: '授权车辆目录', level: 5 });
+  const input = screen.getByRole('textbox', { name: '搜索车辆' });
+  fireEvent.change(input, { target: { value: '粤A' } });
+  expect(await screen.findByRole('listbox')).toBeInTheDocument();
+
+  fireEvent.click(screen.getByRole('button', { name: /查询车辆/ }));
+
+  expect(view.container.querySelector('.v2-vehicle-search-options')).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: '匹配车辆', level: 5 })).toBeInTheDocument();
+  expect(vehicleDetail).not.toHaveBeenCalled();
 });
 
 test('paginates the complete desktop authorized vehicle directory', async () => {