239 lines
14 KiB
TypeScript
239 lines
14 KiB
TypeScript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||
import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||
import { afterEach, expect, test, vi } from 'vitest';
|
||
import UsersPage from './UsersPage';
|
||
|
||
const mocks = vi.hoisted(() => ({
|
||
adminUsers: vi.fn(),
|
||
vehicleCoverage: vi.fn(),
|
||
createCustomerUser: vi.fn(),
|
||
updateCustomerUser: vi.fn()
|
||
}));
|
||
const layout = vi.hoisted(() => ({ mobile: false }));
|
||
|
||
vi.mock('../../api/client', () => ({ api: mocks }));
|
||
vi.mock('../hooks/useMobileLayout', () => ({ useMobileLayout: () => layout.mobile }));
|
||
|
||
afterEach(() => {
|
||
cleanup();
|
||
layout.mobile = false;
|
||
Object.values(mocks).forEach((mock) => mock.mockReset());
|
||
});
|
||
|
||
test('deduplicates vehicle candidates by VIN and renders granted vehicles plate first', async () => {
|
||
mocks.adminUsers.mockResolvedValue([{
|
||
id: 7,
|
||
username: 'customer-east',
|
||
displayName: '华东客户',
|
||
userType: 'customer',
|
||
status: 'enabled',
|
||
customerRef: '',
|
||
tenantRef: '',
|
||
authProvider: 'local',
|
||
menuKeys: ['monitor'],
|
||
vehicleVins: ['VIN001'],
|
||
vehicles: [{ vin: 'VIN001', plate: '粤A11111', validFrom: '2026-06-05T00:00:00+08:00', sourceSystem: 'manual', grantedBy: '平台管理员' }],
|
||
grantHistory: [{ id: 1, vin: 'VIN001', plate: '粤A11111', validFrom: '2026-06-05T00:00:00+08:00', sourceSystem: 'manual', grantedBy: '平台管理员', revokedBy: '', createdAt: '2026-07-16T00:00:00Z', updatedAt: '2026-07-16T00:00:00Z' }],
|
||
createdAt: '2026-07-16T00:00:00Z',
|
||
updatedAt: '2026-07-16T00:00:00Z'
|
||
}]);
|
||
const duplicatedVehicle = { vin: 'VIN002', plate: '粤A22222', protocols: ['GB32960', 'JT808'] };
|
||
mocks.vehicleCoverage.mockResolvedValue({ items: [duplicatedVehicle, duplicatedVehicle], total: 1, limit: 20, offset: 0 });
|
||
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
|
||
const view = render(<QueryClientProvider client={client}><UsersPage /></QueryClientProvider>);
|
||
|
||
const customer = await screen.findByRole('button', { name: /选择客户 华东客户/ });
|
||
expect(screen.getByLabelText('账号管理操作')).toHaveTextContent('客户访问治理');
|
||
expect(screen.getByLabelText('账号管理操作')).toHaveTextContent('变更最多 30 秒生效');
|
||
expect(view.container.querySelector('.v2-page-heading')).not.toBeInTheDocument();
|
||
expect(screen.getByRole('heading', { name: '账号范围', level: 5 })).toBeInTheDocument();
|
||
expect(screen.getByText('按客户名称、登录账号、客户标识与启停状态查找')).toBeInTheDocument();
|
||
expect(screen.getAllByText('1 / 1 个账号')).toHaveLength(2);
|
||
expect(view.container.querySelector('.v2-user-list.semi-card')).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-user-filter-panel.v2-workspace-filter-panel.semi-card')).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-customer-list.semi-list')).toBeInTheDocument();
|
||
expect(customer).toHaveClass('semi-button', 'v2-user-list-item');
|
||
expect(customer.closest('.semi-list-item')).toHaveClass('v2-user-list-row');
|
||
expect(customer).toHaveAttribute('aria-pressed', 'false');
|
||
expect(customer).toHaveAttribute('aria-expanded', 'false');
|
||
expect(view.container.querySelector('.v2-user-editor.semi-card')).not.toBeInTheDocument();
|
||
fireEvent.click(customer);
|
||
await waitFor(() => expect(customer).toHaveAttribute('aria-expanded', 'true'));
|
||
expect(view.container.querySelector('.v2-user-editor.semi-card')).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-user-editor-tabs.semi-tabs')).toBeInTheDocument();
|
||
expect(screen.getAllByRole('tab')).toHaveLength(3);
|
||
expect(view.container.querySelector('.v2-user-vehicle-section.semi-card')).toBeInTheDocument();
|
||
fireEvent.click(screen.getByRole('tab', { name: /菜单权限/ }));
|
||
expect(screen.getByText('客户开放菜单').closest('.semi-tag')).toBeInTheDocument();
|
||
fireEvent.click(screen.getByRole('tab', { name: /车辆权限/ }));
|
||
expect(document.querySelector('.v2-user-vehicle-section .v2-user-section-title .semi-tag')).toHaveTextContent('1 辆');
|
||
const granted = await screen.findByRole('button', { name: '移除 粤A11111' });
|
||
expect(granted).toHaveClass('semi-button');
|
||
expect(granted.closest('.v2-assigned-vehicle-card')).toHaveClass('semi-card');
|
||
expect(granted.closest('.v2-assigned-vehicle-card')).toHaveTextContent('粤A11111VIN001');
|
||
expect(screen.getByRole('button', { name: '调整 粤A11111 有效期' })).toHaveAttribute('aria-haspopup', 'dialog');
|
||
expect(document.querySelectorAll('input[type="datetime-local"]')).toHaveLength(0);
|
||
fireEvent.click(screen.getByRole('button', { name: '调整 粤A11111 有效期' }));
|
||
expect(await screen.findByLabelText('粤A11111 启用时间')).toHaveValue('2026-06-05T00:00');
|
||
expect(document.querySelectorAll('input[type="datetime-local"]')).toHaveLength(2);
|
||
expect(document.querySelector('.v2-user-grant-sidesheet .semi-sidesheet-inner')).toHaveAttribute('aria-label', '车辆授权有效期');
|
||
fireEvent.click(screen.getByRole('button', { name: '关闭车辆授权有效期' }));
|
||
expect(document.querySelectorAll('input[type="datetime-local"]')).toHaveLength(0);
|
||
expect(document.querySelector('.v2-user-avatar')).toHaveClass('semi-avatar');
|
||
expect(document.querySelector('.v2-user-status-tag')).toHaveClass('semi-tag');
|
||
expect(document.querySelector('.v2-grant-history')).toHaveClass('semi-collapse');
|
||
expect(document.querySelector('.v2-grant-history-title .semi-tag')).toHaveTextContent('1 条');
|
||
|
||
fireEvent.change(screen.getByRole('textbox', { name: '按车牌或 VIN 搜索' }), { target: { value: '粤A22222' } });
|
||
await waitFor(() => expect(mocks.vehicleCoverage).toHaveBeenCalled());
|
||
const candidates = await screen.findAllByRole('option', { name: /粤A22222.*VIN002.*选择/ });
|
||
expect(candidates).toHaveLength(1);
|
||
expect((mocks.vehicleCoverage.mock.calls[0][0] as URLSearchParams).get('keyword')).toBe('粤A22222');
|
||
|
||
fireEvent.click(candidates[0]);
|
||
expect((await screen.findByRole('button', { name: '移除 粤A22222' })).closest('.v2-assigned-vehicle-card')).toHaveTextContent('粤A22222VIN002');
|
||
});
|
||
|
||
test('pages and filters large vehicle grants without nesting a vehicle-list scrollbar', async () => {
|
||
const vehicles = Array.from({ length: 12 }, (_, index) => ({
|
||
vin: `VIN${String(index + 1).padStart(3, '0')}`,
|
||
plate: `粤A${String(index + 1).padStart(5, '0')}`,
|
||
validFrom: '2026-06-05T00:00:00+08:00',
|
||
sourceSystem: 'manual',
|
||
grantedBy: '平台管理员'
|
||
}));
|
||
mocks.adminUsers.mockResolvedValue([{
|
||
id: 7,
|
||
username: 'customer-east',
|
||
displayName: '华东客户',
|
||
userType: 'customer',
|
||
status: 'enabled',
|
||
customerRef: '',
|
||
tenantRef: '',
|
||
authProvider: 'local',
|
||
menuKeys: ['monitor', 'vehicles', 'tracks', 'statistics'],
|
||
vehicleVins: vehicles.map((vehicle) => vehicle.vin),
|
||
vehicles,
|
||
grantHistory: [],
|
||
createdAt: '2026-07-16T00:00:00Z',
|
||
updatedAt: '2026-07-16T00:00:00Z'
|
||
}]);
|
||
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
|
||
const view = render(<QueryClientProvider client={client}><UsersPage /></QueryClientProvider>);
|
||
fireEvent.click(await screen.findByRole('button', { name: /选择客户 华东客户/ }));
|
||
|
||
expect(screen.getAllByRole('button', { name: /^移除 / })).toHaveLength(10);
|
||
expect(screen.getByText('第 1–10 条，共 12 辆')).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-assigned-pagination')).toBeInTheDocument();
|
||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
||
expect(await screen.findByRole('button', { name: '移除 粤A00012' })).toBeInTheDocument();
|
||
expect(screen.getAllByRole('button', { name: /^移除 / })).toHaveLength(2);
|
||
|
||
fireEvent.change(screen.getByRole('textbox', { name: '筛选已授权车辆' }), { target: { value: '粤A00012' } });
|
||
expect(screen.getAllByRole('button', { name: /^移除 / })).toHaveLength(1);
|
||
expect(screen.getByText('1 条匹配结果')).toBeInTheDocument();
|
||
expect(screen.getByText('第 1–1 条，共 1 辆')).toBeInTheDocument();
|
||
});
|
||
|
||
test('keeps the customer directory visible on mobile and opens details on demand', async () => {
|
||
layout.mobile = true;
|
||
mocks.adminUsers.mockResolvedValue([{
|
||
id: 7, username: 'customer-east', displayName: '华东客户', userType: 'customer', status: 'enabled',
|
||
customerRef: '', tenantRef: '', authProvider: 'local', menuKeys: ['monitor'], vehicleVins: [],
|
||
vehicles: [], grantHistory: [], createdAt: '2026-07-16T00:00:00Z', updatedAt: '2026-07-16T00:00:00Z'
|
||
}]);
|
||
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const view = render(<QueryClientProvider client={client}><UsersPage /></QueryClientProvider>);
|
||
|
||
expect(await screen.findByText('客户权限目录')).toBeInTheDocument();
|
||
const customer = await screen.findByRole('button', { name: /选择客户 华东客户/ });
|
||
expect(view.container.querySelector('.v2-user-mobile-picker')).not.toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-customer-list.semi-list')).toBeInTheDocument();
|
||
expect(screen.getByRole('textbox', { name: '搜索客户账号' })).toBeInTheDocument();
|
||
const filterToggle = screen.getByRole('button', { name: '修改账号范围：全部状态' });
|
||
expect(filterToggle).toHaveAttribute('aria-expanded', 'false');
|
||
fireEvent.click(filterToggle);
|
||
expect(screen.getByRole('button', { name: '收起账号范围：全部状态' })).toHaveAttribute('aria-expanded', 'true');
|
||
expect(view.container.querySelector('.v2-user-editor')).not.toBeInTheDocument();
|
||
fireEvent.click(customer);
|
||
expect(await screen.findByRole('button', { name: '关闭账号详情' })).toBeInTheDocument();
|
||
expect(customer).toHaveAttribute('aria-expanded', 'true');
|
||
fireEvent.click(screen.getByRole('button', { name: '关闭账号详情' }));
|
||
expect(view.container.querySelector('.v2-user-editor')).not.toBeInTheDocument();
|
||
expect(customer).toHaveAttribute('aria-expanded', 'false');
|
||
expect(screen.getAllByRole('button', { name: '新建客户账号' })).toHaveLength(1);
|
||
});
|
||
|
||
test('filters the customer directory by status and exposes the active result scope', async () => {
|
||
mocks.adminUsers.mockResolvedValue([
|
||
{
|
||
id: 7, username: 'customer-east', displayName: '华东客户', userType: 'customer', status: 'enabled',
|
||
customerRef: 'east', tenantRef: '', authProvider: 'local', menuKeys: ['monitor'], vehicleVins: [],
|
||
vehicles: [], grantHistory: [], createdAt: '2026-07-16T00:00:00Z', updatedAt: '2026-07-16T00:00:00Z'
|
||
},
|
||
{
|
||
id: 8, username: 'customer-west', displayName: '西部客户', userType: 'customer', status: 'disabled',
|
||
customerRef: 'west', tenantRef: '', authProvider: 'local', menuKeys: ['monitor'], vehicleVins: [],
|
||
vehicles: [], grantHistory: [], createdAt: '2026-07-16T00:00:00Z', updatedAt: '2026-07-16T00:00:00Z'
|
||
}
|
||
]);
|
||
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={client}><UsersPage /></QueryClientProvider>);
|
||
|
||
expect(await screen.findByRole('button', { name: /选择客户 华东客户/ })).toBeInTheDocument();
|
||
expect(screen.getByRole('button', { name: /选择客户 西部客户/ })).toBeInTheDocument();
|
||
fireEvent.click(screen.getByRole('combobox', { name: '账号状态' }));
|
||
const disabledOption = await waitFor(() => {
|
||
const option = [...document.querySelectorAll<HTMLElement>('.semi-select-option')]
|
||
.find((item) => item.textContent?.includes('停用账号'));
|
||
expect(option).toBeInTheDocument();
|
||
return option!;
|
||
});
|
||
fireEvent.click(disabledOption);
|
||
|
||
await waitFor(() => expect(screen.queryByRole('button', { name: /选择客户 华东客户/ })).not.toBeInTheDocument());
|
||
expect(screen.getByRole('button', { name: /选择客户 西部客户/ })).toBeInTheDocument();
|
||
expect(screen.getAllByText('1 / 2 个账号')).toHaveLength(2);
|
||
expect(screen.getByText('启用账号').nextSibling).toHaveTextContent('0');
|
||
|
||
fireEvent.click(screen.getByRole('button', { name: '清空账号筛选' }));
|
||
await waitFor(() => expect(screen.getByRole('button', { name: /选择客户 华东客户/ })).toBeInTheDocument());
|
||
expect(screen.getByRole('button', { name: /选择客户 西部客户/ })).toBeInTheDocument();
|
||
});
|
||
|
||
test('uses a standard Semi empty state when no customer account exists', async () => {
|
||
mocks.adminUsers.mockResolvedValue([]);
|
||
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
const view = render(<QueryClientProvider client={client}><UsersPage /></QueryClientProvider>);
|
||
|
||
expect(await screen.findByText('还没有客户账号')).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-user-list-empty.semi-empty')).toBeInTheDocument();
|
||
expect(view.container.querySelector('.v2-user-editor')).not.toBeInTheDocument();
|
||
expect(screen.getAllByRole('button', { name: '创建第一个客户账号' })).toHaveLength(1);
|
||
});
|
||
|
||
test('submits per-vehicle authorization interval instead of only a VIN list', async () => {
|
||
mocks.adminUsers.mockResolvedValue([{
|
||
id: 7, username: 'customer-east', displayName: '华东客户', userType: 'customer', status: 'enabled',
|
||
customerRef: '', tenantRef: '', authProvider: 'local', menuKeys: ['statistics'], vehicleVins: ['VIN001'],
|
||
vehicles: [{ vin: 'VIN001', plate: '粤A11111', validFrom: '2026-07-16T14:08:18+08:00', sourceSystem: 'manual', grantedBy: '平台管理员' }],
|
||
grantHistory: [], createdAt: '2026-07-16T00:00:00Z', updatedAt: '2026-07-16T00:00:00Z'
|
||
}]);
|
||
mocks.updateCustomerUser.mockResolvedValue({ id: 7 });
|
||
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||
render(<QueryClientProvider client={client}><UsersPage /></QueryClientProvider>);
|
||
fireEvent.click(await screen.findByRole('button', { name: /选择客户 华东客户/ }));
|
||
expect(document.querySelectorAll('input[type="datetime-local"]')).toHaveLength(0);
|
||
fireEvent.click(screen.getByRole('button', { name: '调整 粤A11111 有效期' }));
|
||
fireEvent.change(await screen.findByLabelText('粤A11111 启用时间'), { target: { value: '2026-06-05T00:00' } });
|
||
fireEvent.click(screen.getByRole('button', { name: '完成' }));
|
||
fireEvent.click(screen.getByRole('button', { name: '保存权限' }));
|
||
await waitFor(() => expect(mocks.updateCustomerUser).toHaveBeenCalled());
|
||
expect(mocks.updateCustomerUser.mock.calls[0][1]).toMatchObject({
|
||
vehicleVins: ['VIN001'],
|
||
vehicleGrants: [{ vin: 'VIN001', validFrom: '2026-06-05T00:00', validTo: '' }]
|
||
});
|
||
});
|