shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(mileage): use fixed-column table on mobile

Browse Source
This commit is contained in:
lingniu
2026-07-16 13:07:43 +08:00
parent 4877c3fe8f
commit 6d6c9ce534
3 changed files with 20 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.test.tsx
View File

@@ -115,30 +115,17 @@ test('removes the previous mileage scope while a new date range is loading', asy
expect(screen.getAllByText('2026-07-10 至 2026-07-16').length).toBeGreaterThan(0);
});
test('mounts only the mobile mileage cards and removes the viewport listener', async () => {
test('uses one responsive mileage matrix without viewport listeners', async () => {
prepareData();
const addEventListener = vi.fn();
const removeEventListener = vi.fn();
vi.spyOn(window, 'matchMedia').mockReturnValue({
matches: true,
media: '(max-width: 680px)',
onchange: null,
addEventListener,
removeEventListener,
addListener: vi.fn(),
removeListener: vi.fn(),
dispatchEvent: vi.fn(() => false)
} as unknown as MediaQueryList);
const view = renderPage('/statistics?vins=LTEST000000000001&dateFrom=2026-07-13&dateTo=2026-07-14');
expect(await screen.findByText('车辆每日里程')).toBeInTheDocument();
await waitFor(() => expect(view.container.querySelectorAll('.v2-mileage-mobile-list article')).toHaveLength(1));
expect(view.container.querySelector('.v2-mileage-table-wrap')).not.toBeInTheDocument();
expect(view.container.querySelectorAll('.v2-mileage-mobile-days > div')).toHaveLength(2);
expect(addEventListener).toHaveBeenCalledWith('change', expect.any(Function));
view.unmount();
expect(removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
await waitFor(() => expect(view.container.querySelectorAll('.v2-mileage-table tbody tr')).toHaveLength(1));
expect(view.container.querySelector('.v2-mileage-table-wrap')).toBeInTheDocument();
expect(view.container.querySelectorAll('.v2-mileage-table th.is-date')).toHaveLength(2);
expect(view.container.querySelector('.v2-mileage-table th.is-plate')).toHaveTextContent('车牌');
expect(view.container.querySelector('.v2-mileage-table th.is-total')).toHaveTextContent('区间总里程');
expect(view.container.querySelector('.v2-mileage-mobile-list')).not.toBeInTheDocument();
});
test('supports searching and selecting license plates before querying exact VINs', async () => {