fix: keep mobile filter resets intentional

This commit is contained in:
lingniu
2026-07-19 04:57:31 +08:00
parent 9a87d14d6d
commit 2bae87f6a2
11 changed files with 23 additions and 13 deletions

View File

@@ -212,6 +212,8 @@ test('renders mobile access vehicles as selectable Semi cards', async () => {
expect(within(filterDialog).getByRole('combobox', { name: '接入状态' })).toBeInTheDocument(); expect(within(filterDialog).getByRole('combobox', { name: '接入状态' })).toBeInTheDocument();
expect(within(filterDialog).getByRole('combobox', { name: '真实协议' })).toBeInTheDocument(); expect(within(filterDialog).getByRole('combobox', { name: '真实协议' })).toBeInTheDocument();
expect(within(filterDialog).getByRole('combobox', { name: '车辆品牌' })).toBeInTheDocument(); expect(within(filterDialog).getByRole('combobox', { name: '车辆品牌' })).toBeInTheDocument();
fireEvent.click(within(filterDialog).getByRole('button', { name: '重置条件' }));
expect(screen.getByRole('dialog', { name: '接入车辆筛选' })).toBeInTheDocument();
fireEvent.click(within(filterDialog).getByRole('combobox', { name: '接入状态' })); fireEvent.click(within(filterDialog).getByRole('combobox', { name: '接入状态' }));
const attentionOption = (await screen.findAllByText('需关注')).find((element) => element.classList.contains('semi-select-option-text')); const attentionOption = (await screen.findAllByText('需关注')).find((element) => element.classList.contains('semi-select-option-text'));
expect(attentionOption).toBeInTheDocument(); expect(attentionOption).toBeInTheDocument();

View File

@@ -358,6 +358,7 @@ export default function AccessPage() {
const syncURL = (filters: Filters) => { const next = new URLSearchParams(); Object.entries(filters).forEach(([key, value]) => { if (value) next.set(key, value); }); setSearchParams(next, { replace: true }); }; const syncURL = (filters: Filters) => { const next = new URLSearchParams(); Object.entries(filters).forEach(([key, value]) => { if (value) next.set(key, value); }); setSearchParams(next, { replace: true }); };
const apply = (next: Filters) => { setDraft(next); setCriteria(next); setOffset(0); setSelectedVIN(''); syncURL(next); }; const apply = (next: Filters) => { setDraft(next); setCriteria(next); setOffset(0); setSelectedVIN(''); syncURL(next); };
const applyDraft = () => { apply(draft); setFiltersCollapsed(true); }; const applyDraft = () => { apply(draft); setFiltersCollapsed(true); };
const resetMobileDraft = () => setDraft(EMPTY_FILTERS);
const resetFilters = () => { apply(EMPTY_FILTERS); setFiltersCollapsed(true); }; const resetFilters = () => { apply(EMPTY_FILTERS); setFiltersCollapsed(true); };
const submit = (event: FormEvent) => { event.preventDefault(); applyDraft(); }; const submit = (event: FormEvent) => { event.preventDefault(); applyDraft(); };
const page = Math.floor(offset / limit) + 1; const totalPages = Math.max(1, Math.ceil((vehiclesQuery.data?.total ?? 0) / limit)); const summary = summaryQuery.data; const page = Math.floor(offset / limit) + 1; const totalPages = Math.max(1, Math.ceil((vehiclesQuery.data?.total ?? 0) / limit)); const summary = summaryQuery.data;
@@ -424,7 +425,7 @@ export default function AccessPage() {
title="筛选接入车辆" title="筛选接入车辆"
description="车辆、接入状态、真实协议与品牌" description="车辆、接入状态、真实协议与品牌"
onCancel={() => setFiltersCollapsed(true)} onCancel={() => setFiltersCollapsed(true)}
secondaryAction={{ label: '重置条件', onClick: resetFilters }} secondaryAction={{ label: '重置条件', onClick: resetMobileDraft }}
primaryAction={{ label: '应用并查询', onClick: applyDraft }} primaryAction={{ label: '应用并查询', onClick: applyDraft }}
> >
<form className="v2-access-mobile-filter-form" onSubmit={submit}> <form className="v2-access-mobile-filter-form" onSubmit={submit}>

View File

@@ -326,6 +326,8 @@ test('uses one focused Semi bottom SideSheet for the complete mobile event filte
expect(within(dialog).getByRole('combobox', { name: '协议' })).toBeInTheDocument(); expect(within(dialog).getByRole('combobox', { name: '协议' })).toBeInTheDocument();
expect(within(dialog).getByLabelText('告警起始时间')).toBeInTheDocument(); expect(within(dialog).getByLabelText('告警起始时间')).toBeInTheDocument();
expect(within(dialog).getByLabelText('告警结束时间')).toBeInTheDocument(); expect(within(dialog).getByLabelText('告警结束时间')).toBeInTheDocument();
fireEvent.click(within(dialog).getByRole('button', { name: '重置条件' }));
expect(screen.getByRole('dialog', { name: '告警事件筛选' })).toBeInTheDocument();
fireEvent.click(within(dialog).getByRole('combobox', { name: '协议' })); fireEvent.click(within(dialog).getByRole('combobox', { name: '协议' }));
fireEvent.click(await screen.findByText('JT808')); fireEvent.click(await screen.findByText('JT808'));
fireEvent.click(within(dialog).getByRole('button', { name: '应用并查询' })); fireEvent.click(within(dialog).getByRole('button', { name: '应用并查询' }));

View File

@@ -200,6 +200,7 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
setFiltersCollapsed(true); setFiltersCollapsed(true);
}; };
const submit = (e: FormEvent) => { e.preventDefault(); applyDraft(); }; const submit = (e: FormEvent) => { e.preventDefault(); applyDraft(); };
const resetMobileDraft = () => setDraft(EMPTY_FILTERS);
const resetFilters = () => { const resetFilters = () => {
setDraft(EMPTY_FILTERS); setDraft(EMPTY_FILTERS);
setFilters(EMPTY_FILTERS); setFilters(EMPTY_FILTERS);
@@ -256,7 +257,7 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
title="筛选告警事件" title="筛选告警事件"
description="车辆、状态、规则与时间范围" description="车辆、状态、规则与时间范围"
onCancel={() => setFiltersCollapsed(true)} onCancel={() => setFiltersCollapsed(true)}
secondaryAction={{ label: '重置条件', onClick: resetFilters }} secondaryAction={{ label: '重置条件', onClick: resetMobileDraft }}
primaryAction={{ label: '应用并查询', onClick: applyDraft }} primaryAction={{ label: '应用并查询', onClick: applyDraft }}
> >
<form className="v2-alert-mobile-filter-form" onSubmit={submit}> <form className="v2-alert-mobile-filter-form" onSubmit={submit}>

View File

@@ -219,6 +219,8 @@ test('uses one focused Semi bottom SideSheet for the complete mobile history que
expect(within(dialog).getByLabelText('结束时间')).toBeInTheDocument(); expect(within(dialog).getByLabelText('结束时间')).toBeInTheDocument();
expect(within(dialog).getByRole('combobox', { name: '数据类型' })).toBeInTheDocument(); expect(within(dialog).getByRole('combobox', { name: '数据类型' })).toBeInTheDocument();
expect(within(dialog).getByRole('combobox', { name: '数据来源' })).toBeInTheDocument(); expect(within(dialog).getByRole('combobox', { name: '数据来源' })).toBeInTheDocument();
fireEvent.click(within(dialog).getByRole('button', { name: '重置条件' }));
expect(screen.getByRole('dialog', { name: '历史查询范围' })).toBeInTheDocument();
fireEvent.change(within(dialog).getByPlaceholderText('车牌 / VIN多台用逗号分隔'), { target: { value: 'MOBILEVIN' } }); fireEvent.change(within(dialog).getByPlaceholderText('车牌 / VIN多台用逗号分隔'), { target: { value: 'MOBILEVIN' } });
fireEvent.click(within(dialog).getByRole('button', { name: '应用并查询' })); fireEvent.click(within(dialog).getByRole('button', { name: '应用并查询' }));

View File

@@ -359,6 +359,7 @@ export default function HistoryPage() {
setSearchParams(preserveMonitorReturn(url, monitorReturn), { replace: true }); setSearchParams(preserveMonitorReturn(url, monitorReturn), { replace: true });
}; };
const submit = (event: FormEvent) => { event.preventDefault(); applyDraft(); }; const submit = (event: FormEvent) => { event.preventDefault(); applyDraft(); };
const resetDraft = () => setDraft({ keywords: '', ...currentHistoryWindow(), category: 'location', protocol: '' });
const reset = () => { const next = { keywords: '', ...currentHistoryWindow(), category: 'location', protocol: '' }; setDraft(next); setCriteria(next); setOffset(0); setFiltersCollapsed(true); setSearchParams(preserveMonitorReturn(new URLSearchParams(), monitorReturn), { replace: true }); }; const reset = () => { const next = { keywords: '', ...currentHistoryWindow(), category: 'location', protocol: '' }; setDraft(next); setCriteria(next); setOffset(0); setFiltersCollapsed(true); setSearchParams(preserveMonitorReturn(new URLSearchParams(), monitorReturn), { replace: true }); };
const toggleMetric = (key: string) => setVisibleByCategory((current) => { const toggleMetric = (key: string) => setVisibleByCategory((current) => {
const baseline = current[criteria.category] ?? allMetrics.filter((metric) => metric.defaultVisible).map((metric) => metric.key); const baseline = current[criteria.category] ?? allMetrics.filter((metric) => metric.defaultVisible).map((metric) => metric.key);
@@ -439,7 +440,7 @@ export default function HistoryPage() {
title="筛选历史数据" title="筛选历史数据"
description="车辆、时间、数据类型与协议来源" description="车辆、时间、数据类型与协议来源"
onCancel={() => setFiltersCollapsed(true)} onCancel={() => setFiltersCollapsed(true)}
secondaryAction={{ label: '重置条件', onClick: reset }} secondaryAction={{ label: '重置条件', onClick: resetDraft }}
primaryAction={{ label: '应用并查询', disabled: !parseHistoryKeywords(draft.keywords).length, onClick: applyDraft }} primaryAction={{ label: '应用并查询', disabled: !parseHistoryKeywords(draft.keywords).length, onClick: applyDraft }}
> >
<form className="v2-history-mobile-filter-form" onSubmit={submit}> <form className="v2-history-mobile-filter-form" onSubmit={submit}>

View File

@@ -278,6 +278,9 @@ test('applies mobile customer filters explicitly and discards unconfirmed draft
fireEvent.click(screen.getByRole('button', { name: '修改账号范围:全部状态 · 西部' })); fireEvent.click(screen.getByRole('button', { name: '修改账号范围:全部状态 · 西部' }));
fireEvent.click(screen.getByRole('button', { name: '重置条件' })); fireEvent.click(screen.getByRole('button', { name: '重置条件' }));
expect(screen.getByRole('dialog', { name: '客户账号筛选' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '关闭账号范围:全部状态 · 西部' })).toHaveAttribute('aria-expanded', 'true');
fireEvent.click(screen.getByRole('button', { name: '应用筛选' }));
await waitFor(() => expect(screen.getByRole('button', { name: /选择客户 华东客户/ })).toBeInTheDocument()); await waitFor(() => expect(screen.getByRole('button', { name: /选择客户 华东客户/ })).toBeInTheDocument());
expect(screen.getByRole('button', { name: /选择客户 西部客户/ })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /选择客户 西部客户/ })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '修改账号范围:全部状态' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: '修改账号范围:全部状态' })).toBeInTheDocument();

View File

@@ -358,12 +358,9 @@ export default function UsersPage() {
setCustomerStatus(draftCustomerStatus); setCustomerStatus(draftCustomerStatus);
setFiltersCollapsed(true); setFiltersCollapsed(true);
}; };
const resetMobileFilters = () => { const resetMobileDraft = () => {
setDraftCustomerKeyword(''); setDraftCustomerKeyword('');
setDraftCustomerStatus('all'); setDraftCustomerStatus('all');
setCustomerKeyword('');
setCustomerStatus('all');
setFiltersCollapsed(true);
}; };
const submitMobileFilters = (event: FormEvent) => { const submitMobileFilters = (event: FormEvent) => {
event.preventDefault(); event.preventDefault();
@@ -398,7 +395,7 @@ export default function UsersPage() {
title="筛选客户账号" title="筛选客户账号"
description="按账号信息与权限状态缩小客户范围" description="按账号信息与权限状态缩小客户范围"
onCancel={closeMobileFilters} onCancel={closeMobileFilters}
secondaryAction={{ label: '重置条件', onClick: resetMobileFilters }} secondaryAction={{ label: '重置条件', onClick: resetMobileDraft }}
primaryAction={{ label: '应用筛选', onClick: applyMobileFilters }} primaryAction={{ label: '应用筛选', onClick: applyMobileFilters }}
> >
<form className="v2-user-mobile-filter-form" onSubmit={submitMobileFilters}> <form className="v2-user-mobile-filter-form" onSubmit={submitMobileFilters}>

View File

@@ -288,6 +288,9 @@ test('keeps the mobile vehicle directory primary and applies search from a Semi
fireEvent.click(screen.getByRole('button', { name: `修改车辆范围:${items[0].plate} · 10 辆匹配` })); fireEvent.click(screen.getByRole('button', { name: `修改车辆范围:${items[0].plate} · 10 辆匹配` }));
fireEvent.click(screen.getByRole('button', { name: '重置范围' })); fireEvent.click(screen.getByRole('button', { name: '重置范围' }));
expect(screen.getByRole('dialog', { name: '车辆搜索' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: `关闭车辆范围:${items[0].plate} · 10 辆匹配` })).toHaveAttribute('aria-expanded', 'true');
fireEvent.click(screen.getByRole('button', { name: '应用搜索' }));
await waitFor(() => expect(screen.getByRole('button', { name: '修改车辆范围10 辆授权车辆' })).toBeInTheDocument()); await waitFor(() => expect(screen.getByRole('button', { name: '修改车辆范围10 辆授权车辆' })).toBeInTheDocument());
expect(screen.getByRole('heading', { name: '授权车辆', level: 5 })).toBeInTheDocument(); expect(screen.getByRole('heading', { name: '授权车辆', level: 5 })).toBeInTheDocument();
}); });

View File

@@ -135,12 +135,9 @@ export default function VehicleSearchWorkspace() {
setCandidatesOpen(false); setCandidatesOpen(false);
setFiltersCollapsed(true); setFiltersCollapsed(true);
}; };
const resetMobileFilters = () => { const resetMobileDraft = () => {
setDraftKeyword(''); setDraftKeyword('');
setKeyword('');
setPage(1);
setCandidatesOpen(false); setCandidatesOpen(false);
setFiltersCollapsed(true);
}; };
const submit = (event: FormEvent) => { const submit = (event: FormEvent) => {
event.preventDefault(); event.preventDefault();
@@ -183,7 +180,7 @@ export default function VehicleSearchWorkspace() {
title="查找车辆" title="查找车辆"
description="车牌优先,支持 VIN 与终端手机号" description="车牌优先,支持 VIN 与终端手机号"
onCancel={closeMobileFilters} onCancel={closeMobileFilters}
secondaryAction={{ label: '重置范围', onClick: resetMobileFilters }} secondaryAction={{ label: '重置范围', onClick: resetMobileDraft }}
primaryAction={{ label: '应用搜索', onClick: applyMobileFilters }} primaryAction={{ label: '应用搜索', onClick: applyMobileFilters }}
> >
<form className="v2-vehicle-mobile-filter-form" onSubmit={submitMobileFilters}> <form className="v2-vehicle-mobile-filter-form" onSubmit={submitMobileFilters}>

View File

@@ -28,6 +28,7 @@ test('renders one shared Semi filter sheet with consistent title, section and ac
expect(screen.getByText('按车辆和状态缩小范围')).toBeInTheDocument(); expect(screen.getByText('按车辆和状态缩小范围')).toBeInTheDocument();
expect(screen.getByRole('region', { name: '车辆条件' })).toHaveTextContent('支持车牌或 VIN'); expect(screen.getByRole('region', { name: '车辆条件' })).toHaveTextContent('支持车牌或 VIN');
fireEvent.click(screen.getByRole('button', { name: '重置条件' })); fireEvent.click(screen.getByRole('button', { name: '重置条件' }));
expect(screen.getByRole('dialog', { name: '测试筛选' })).toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: '应用并查询' })); fireEvent.click(screen.getByRole('button', { name: '应用并查询' }));
expect(onReset).toHaveBeenCalledTimes(1); expect(onReset).toHaveBeenCalledTimes(1);
expect(onApply).toHaveBeenCalledTimes(1); expect(onApply).toHaveBeenCalledTimes(1);