Browse Source
* fix: repair account geographic selects * fix: harden geographic select data handlingpull/11883/head
afc163
3 months ago
committed by
GitHub
GitHub
15 changed files with 518 additions and 2037 deletions
@ -0,0 +1,281 @@ |
|||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; |
||||
|
import { render, waitFor } from '@testing-library/react'; |
||||
|
import { beforeEach, describe, expect, it, vi } from 'vitest'; |
||||
|
import * as service from '../service'; |
||||
|
import BaseView from './base'; |
||||
|
|
||||
|
const mocks = vi.hoisted(() => ({ |
||||
|
form: { |
||||
|
setFieldValue: vi.fn(), |
||||
|
}, |
||||
|
initialValues: undefined as Record<string, any> | undefined, |
||||
|
onValuesChange: undefined as |
||||
|
| ((changedValues: Record<string, unknown>) => void) |
||||
|
| undefined, |
||||
|
dependencyProvince: { label: '浙江省', value: '330000' }, |
||||
|
requestResults: {} as Record<string, any>, |
||||
|
})); |
||||
|
|
||||
|
vi.mock('@ant-design/pro-components', async () => { |
||||
|
const React = await import('react'); |
||||
|
|
||||
|
const ProForm = ({ |
||||
|
children, |
||||
|
formRef, |
||||
|
initialValues, |
||||
|
onValuesChange, |
||||
|
}: any) => { |
||||
|
if (formRef) { |
||||
|
formRef.current = mocks.form; |
||||
|
} |
||||
|
mocks.initialValues = initialValues; |
||||
|
mocks.onValuesChange = onValuesChange; |
||||
|
return <form>{children}</form>; |
||||
|
}; |
||||
|
|
||||
|
ProForm.Group = ({ children }: any) => <div>{children}</div>; |
||||
|
|
||||
|
return { |
||||
|
ProForm, |
||||
|
ProFormDependency: ({ children }: any) => ( |
||||
|
<div>{children({ province: mocks.dependencyProvince })}</div> |
||||
|
), |
||||
|
ProFormFieldSet: ({ children }: any) => <div>{children}</div>, |
||||
|
ProFormSelect: ({ name, params, request }: any) => { |
||||
|
React.useEffect(() => { |
||||
|
request?.(params).then((result: any) => { |
||||
|
mocks.requestResults[name] = result; |
||||
|
}); |
||||
|
}, [name, params, request]); |
||||
|
return <div />; |
||||
|
}, |
||||
|
ProFormText: () => <div />, |
||||
|
ProFormTextArea: () => <div />, |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
vi.mock('antd', () => ({ |
||||
|
Button: ({ children }: any) => <button type="button">{children}</button>, |
||||
|
Input: (props: any) => <input {...props} />, |
||||
|
Upload: ({ children }: any) => <div>{children}</div>, |
||||
|
message: { |
||||
|
success: vi.fn(), |
||||
|
}, |
||||
|
})); |
||||
|
|
||||
|
vi.mock('@ant-design/icons', () => ({ |
||||
|
UploadOutlined: () => <span />, |
||||
|
})); |
||||
|
|
||||
|
vi.mock('./index.style', () => ({ |
||||
|
default: () => ({ |
||||
|
styles: { |
||||
|
area_code: 'area-code', |
||||
|
avatar: 'avatar', |
||||
|
avatar_title: 'avatar-title', |
||||
|
baseView: 'base-view', |
||||
|
button_view: 'button-view', |
||||
|
left: 'left', |
||||
|
phone_number: 'phone-number', |
||||
|
right: 'right', |
||||
|
}, |
||||
|
}), |
||||
|
})); |
||||
|
|
||||
|
vi.mock('../service', () => ({ |
||||
|
queryCity: vi.fn(), |
||||
|
queryCurrent: vi.fn(), |
||||
|
queryProvince: vi.fn(), |
||||
|
})); |
||||
|
|
||||
|
describe('BaseView geographic selects', () => { |
||||
|
let queryClient: QueryClient; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
queryClient = new QueryClient({ |
||||
|
defaultOptions: { |
||||
|
queries: { retry: false }, |
||||
|
}, |
||||
|
}); |
||||
|
mocks.initialValues = undefined; |
||||
|
mocks.onValuesChange = undefined; |
||||
|
mocks.dependencyProvince = { label: '浙江省', value: '330000' }; |
||||
|
mocks.requestResults = {}; |
||||
|
vi.clearAllMocks(); |
||||
|
|
||||
|
vi.mocked(service.queryCurrent).mockResolvedValue({ |
||||
|
data: { |
||||
|
address: '西湖区工专路 77 号', |
||||
|
avatar: '', |
||||
|
country: 'China', |
||||
|
email: 'antdesign@alipay.com', |
||||
|
geographic: { |
||||
|
province: { label: '浙江省', key: '330000' }, |
||||
|
city: { label: '杭州市', key: '330100' }, |
||||
|
}, |
||||
|
group: '', |
||||
|
name: 'Ant Design', |
||||
|
notice: [], |
||||
|
notifyCount: 0, |
||||
|
phone: '0752-268888888', |
||||
|
signature: '', |
||||
|
tags: [], |
||||
|
title: '', |
||||
|
unreadCount: 0, |
||||
|
userid: '00000001', |
||||
|
}, |
||||
|
}); |
||||
|
vi.mocked(service.queryProvince).mockResolvedValue([ |
||||
|
{ key: '330000', label: '浙江省' }, |
||||
|
]); |
||||
|
vi.mocked(service.queryCity).mockResolvedValue([ |
||||
|
{ key: '330100', label: '杭州市' }, |
||||
|
]); |
||||
|
}); |
||||
|
|
||||
|
it('normalizes geographic initial values for labelInValue selects', async () => { |
||||
|
render( |
||||
|
<QueryClientProvider client={queryClient}> |
||||
|
<BaseView /> |
||||
|
</QueryClientProvider>, |
||||
|
); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
expect(mocks.initialValues?.province).toEqual({ |
||||
|
label: '浙江省', |
||||
|
value: '330000', |
||||
|
}); |
||||
|
expect(mocks.initialValues?.city).toEqual({ |
||||
|
label: '杭州市', |
||||
|
value: '330100', |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it('does not set incomplete geographic initial values', async () => { |
||||
|
vi.mocked(service.queryCurrent).mockResolvedValue({ |
||||
|
data: { |
||||
|
address: '西湖区工专路 77 号', |
||||
|
avatar: '', |
||||
|
country: 'China', |
||||
|
email: 'antdesign@alipay.com', |
||||
|
geographic: { |
||||
|
province: { label: '浙江省' }, |
||||
|
city: { label: '杭州市' }, |
||||
|
}, |
||||
|
group: '', |
||||
|
name: 'Ant Design', |
||||
|
notice: [], |
||||
|
notifyCount: 0, |
||||
|
phone: '0752-268888888', |
||||
|
signature: '', |
||||
|
tags: [], |
||||
|
title: '', |
||||
|
unreadCount: 0, |
||||
|
userid: '00000001', |
||||
|
} as any, |
||||
|
}); |
||||
|
|
||||
|
render( |
||||
|
<QueryClientProvider client={queryClient}> |
||||
|
<BaseView /> |
||||
|
</QueryClientProvider>, |
||||
|
); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
expect(mocks.initialValues?.name).toBe('Ant Design'); |
||||
|
expect(mocks.initialValues?.province).toBeUndefined(); |
||||
|
expect(mocks.initialValues?.city).toBeUndefined(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it('loads cities with the selected province value', async () => { |
||||
|
render( |
||||
|
<QueryClientProvider client={queryClient}> |
||||
|
<BaseView /> |
||||
|
</QueryClientProvider>, |
||||
|
); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
expect(service.queryCity).toHaveBeenCalledWith('330000'); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it('clears city when province changes', async () => { |
||||
|
render( |
||||
|
<QueryClientProvider client={queryClient}> |
||||
|
<BaseView /> |
||||
|
</QueryClientProvider>, |
||||
|
); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
expect(mocks.onValuesChange).toBeTypeOf('function'); |
||||
|
}); |
||||
|
|
||||
|
mocks.onValuesChange?.({ |
||||
|
province: { label: '河北省', value: '130000' }, |
||||
|
}); |
||||
|
|
||||
|
expect(mocks.form.setFieldValue).toHaveBeenCalledWith('city', undefined); |
||||
|
}); |
||||
|
|
||||
|
it('returns label/value option arrays for geographic selects', async () => { |
||||
|
render( |
||||
|
<QueryClientProvider client={queryClient}> |
||||
|
<BaseView /> |
||||
|
</QueryClientProvider>, |
||||
|
); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
expect(mocks.requestResults.province).toEqual([ |
||||
|
{ label: '浙江省', value: '330000' }, |
||||
|
]); |
||||
|
expect(mocks.requestResults.city).toEqual([ |
||||
|
{ label: '杭州市', value: '330100' }, |
||||
|
]); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it('supports local mock name/id geographic responses', async () => { |
||||
|
vi.mocked(service.queryProvince).mockResolvedValue([ |
||||
|
{ id: '440000', name: '广东省' }, |
||||
|
]); |
||||
|
vi.mocked(service.queryCity).mockResolvedValue([ |
||||
|
{ id: '440300', name: '深圳市' }, |
||||
|
]); |
||||
|
|
||||
|
render( |
||||
|
<QueryClientProvider client={queryClient}> |
||||
|
<BaseView /> |
||||
|
</QueryClientProvider>, |
||||
|
); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
expect(mocks.requestResults.province).toEqual([ |
||||
|
{ label: '广东省', value: '440000' }, |
||||
|
]); |
||||
|
expect(mocks.requestResults.city).toEqual([ |
||||
|
{ label: '深圳市', value: '440300' }, |
||||
|
]); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it('falls back to local city options when remote city data is empty', async () => { |
||||
|
mocks.dependencyProvince = { label: '江苏省', value: '320000' }; |
||||
|
vi.mocked(service.queryCity).mockResolvedValue([]); |
||||
|
|
||||
|
render( |
||||
|
<QueryClientProvider client={queryClient}> |
||||
|
<BaseView /> |
||||
|
</QueryClientProvider>, |
||||
|
); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
expect(service.queryCity).toHaveBeenCalledWith('320000'); |
||||
|
expect(mocks.requestResults.city).toContainEqual({ |
||||
|
label: '南京市', |
||||
|
value: '320100', |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
File diff suppressed because it is too large
@ -1,138 +0,0 @@ |
|||||
[ |
|
||||
{ |
|
||||
"name": "北京市", |
|
||||
"id": "110000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "天津市", |
|
||||
"id": "120000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "河北省", |
|
||||
"id": "130000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "山西省", |
|
||||
"id": "140000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "内蒙古自治区", |
|
||||
"id": "150000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "辽宁省", |
|
||||
"id": "210000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "吉林省", |
|
||||
"id": "220000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "黑龙江省", |
|
||||
"id": "230000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "上海市", |
|
||||
"id": "310000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "江苏省", |
|
||||
"id": "320000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "浙江省", |
|
||||
"id": "330000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "安徽省", |
|
||||
"id": "340000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "福建省", |
|
||||
"id": "350000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "江西省", |
|
||||
"id": "360000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "山东省", |
|
||||
"id": "370000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "河南省", |
|
||||
"id": "410000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "湖北省", |
|
||||
"id": "420000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "湖南省", |
|
||||
"id": "430000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "广东省", |
|
||||
"id": "440000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "广西壮族自治区", |
|
||||
"id": "450000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "海南省", |
|
||||
"id": "460000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "重庆市", |
|
||||
"id": "500000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "四川省", |
|
||||
"id": "510000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "贵州省", |
|
||||
"id": "520000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "云南省", |
|
||||
"id": "530000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "西藏自治区", |
|
||||
"id": "540000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "陕西省", |
|
||||
"id": "610000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "甘肃省", |
|
||||
"id": "620000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "青海省", |
|
||||
"id": "630000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "宁夏回族自治区", |
|
||||
"id": "640000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "新疆维吾尔自治区", |
|
||||
"id": "650000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "台湾省", |
|
||||
"id": "710000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "香港特别行政区", |
|
||||
"id": "810000" |
|
||||
}, |
|
||||
{ |
|
||||
"name": "澳门特别行政区", |
|
||||
"id": "820000" |
|
||||
} |
|
||||
] |
|
||||
@ -0,0 +1,22 @@ |
|||||
|
import { request } from '@umijs/max'; |
||||
|
import { beforeEach, describe, expect, it, vi } from 'vitest'; |
||||
|
import { queryCity } from './service'; |
||||
|
|
||||
|
vi.mock('@umijs/max', () => ({ |
||||
|
request: vi.fn(), |
||||
|
})); |
||||
|
|
||||
|
describe('account settings service', () => { |
||||
|
beforeEach(() => { |
||||
|
vi.clearAllMocks(); |
||||
|
vi.mocked(request).mockResolvedValue({ data: [] }); |
||||
|
}); |
||||
|
|
||||
|
it('encodes province when requesting city options', async () => { |
||||
|
await queryCity('33/000?x=1'); |
||||
|
|
||||
|
expect(request).toHaveBeenCalledWith( |
||||
|
'/api/geographic/city/33%2F000%3Fx%3D1', |
||||
|
); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,52 @@ |
|||||
|
import { describe, expect, it } from 'vitest'; |
||||
|
import { getCityOptions, provinceOptions } from './chinaDivision'; |
||||
|
|
||||
|
describe('chinaDivision geographic options', () => { |
||||
|
it('keeps province values compatible with existing six-digit province ids', () => { |
||||
|
expect(provinceOptions).toContainEqual({ |
||||
|
label: '浙江省', |
||||
|
key: '330000', |
||||
|
}); |
||||
|
expect(provinceOptions).toContainEqual({ |
||||
|
label: '台湾省', |
||||
|
key: '710000', |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it('returns city options for ordinary provinces', () => { |
||||
|
expect(getCityOptions('130000')).toContainEqual({ |
||||
|
label: '石家庄市', |
||||
|
key: '130100', |
||||
|
}); |
||||
|
expect(getCityOptions('320000')).toContainEqual({ |
||||
|
label: '南京市', |
||||
|
key: '320100', |
||||
|
}); |
||||
|
expect(getCityOptions('32')).toContainEqual({ |
||||
|
label: '南京市', |
||||
|
key: '320100', |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it('returns district options for municipalities', () => { |
||||
|
expect(getCityOptions('110000')).toContainEqual({ |
||||
|
label: '东城区', |
||||
|
key: '110101', |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it('returns city options for Hong Kong, Macao and Taiwan', () => { |
||||
|
expect(getCityOptions('710000')).toContainEqual({ |
||||
|
label: '台北市', |
||||
|
key: '710100', |
||||
|
}); |
||||
|
expect(getCityOptions('810000')).toContainEqual({ |
||||
|
label: '香港岛', |
||||
|
key: '810100', |
||||
|
}); |
||||
|
expect(getCityOptions('820000')).toContainEqual({ |
||||
|
label: '澳门半岛', |
||||
|
key: '820100', |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,69 @@ |
|||||
|
import hkMoTwSource from 'china-division/dist/HK-MO-TW.json'; |
||||
|
import pcaSource from 'china-division/dist/pca-code.json'; |
||||
|
|
||||
|
export type GeographicOption = { |
||||
|
label: string; |
||||
|
key: string; |
||||
|
}; |
||||
|
|
||||
|
type DivisionNode = { |
||||
|
code: string; |
||||
|
name: string; |
||||
|
children?: DivisionNode[]; |
||||
|
}; |
||||
|
|
||||
|
const directAdminCodes = new Set(['11', '12', '31', '50']); |
||||
|
|
||||
|
const specialRegions: GeographicOption[] = [ |
||||
|
{ label: '台湾省', key: '710000' }, |
||||
|
{ label: '香港特别行政区', key: '810000' }, |
||||
|
{ label: '澳门特别行政区', key: '820000' }, |
||||
|
]; |
||||
|
|
||||
|
const toProvinceKey = (code: string) => `${code}0000`; |
||||
|
|
||||
|
const toCityKey = (code: string) => (code.length === 4 ? `${code}00` : code); |
||||
|
|
||||
|
const toOption = (item: DivisionNode): GeographicOption => ({ |
||||
|
label: item.name, |
||||
|
key: toCityKey(item.code), |
||||
|
}); |
||||
|
|
||||
|
export const provinceOptions: GeographicOption[] = [ |
||||
|
...(pcaSource as DivisionNode[]).map((item) => ({ |
||||
|
label: item.name, |
||||
|
key: toProvinceKey(item.code), |
||||
|
})), |
||||
|
...specialRegions, |
||||
|
]; |
||||
|
|
||||
|
export const getCityOptions = (provinceKey: string): GeographicOption[] => { |
||||
|
const provinceCode = |
||||
|
provinceKey.length === 2 ? provinceKey : provinceKey.slice(0, 2); |
||||
|
const province = (pcaSource as DivisionNode[]).find( |
||||
|
(item) => item.code === provinceCode, |
||||
|
); |
||||
|
|
||||
|
if (province) { |
||||
|
const children = province.children ?? []; |
||||
|
const cityNodes = directAdminCodes.has(provinceCode) |
||||
|
? children.flatMap((item) => item.children ?? [item]) |
||||
|
: children; |
||||
|
|
||||
|
return cityNodes.map(toOption); |
||||
|
} |
||||
|
|
||||
|
const specialRegion = specialRegions.find((item) => item.key === provinceKey); |
||||
|
if (!specialRegion) { |
||||
|
return []; |
||||
|
} |
||||
|
|
||||
|
return Object.keys( |
||||
|
(hkMoTwSource as Record<string, Record<string, string[]>>)[ |
||||
|
specialRegion.label |
||||
|
] ?? {}, |
||||
|
).map((name, index) => ({ |
||||
|
label: name, |
||||
|
key: `${provinceCode}${String(index + 1).padStart(2, '0')}00`, |
||||
|
})); |
||||
|
}; |
||||
Loading…
Reference in new issue