ant-design/components/config-provider/__tests__/locale.test.tsx
二货爱吃白萝卜 45eeee60bb
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
feat: Add unstable api for React 19 compitable (#51979)
* chore: add unstable entrance

* chore: rest of it

* chore: use React 19

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: test ignore 19 preload

* chore: bump rc-util

* fix: warning of pure render

* fix: warning of 19

* chore: adjust ts

* test: fix test logic

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* chore: restore file

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: update test

* test: fix test case

* test: update snapshot

* test: fix coverage

* test: fix coverage

* test: add ignore image
2024-12-18 14:09:49 +08:00

158 lines
4.6 KiB
TypeScript

import React, { useEffect, useState } from 'react';
import ConfigProvider from '..';
import { act, fireEvent, render } from '../../../tests/utils';
import DatePicker from '../../date-picker';
import { closePicker, openPicker, selectCell } from '../../date-picker/__tests__/utils';
import type { Locale } from '../../locale';
import LocaleProvider from '../../locale';
import enUS from '../../locale/en_US';
import zhCN from '../../locale/zh_CN';
import Modal from '../../modal';
import Pagination from '../../pagination';
import TimePicker from '../../time-picker';
// TODO: Remove this. Mock for React 19
jest.mock('react-dom', () => {
const realReactDOM = jest.requireActual('react-dom');
if (realReactDOM.version.startsWith('19')) {
const realReactDOMClient = jest.requireActual('react-dom/client');
realReactDOM.createRoot = realReactDOMClient.createRoot;
}
return realReactDOM;
});
describe('ConfigProvider.Locale', () => {
function $$(selector: string): NodeListOf<Element> {
return document.body.querySelectorAll(selector);
}
it('not throw', () => {
render(
<ConfigProvider locale={{} as Locale}>
<span />
<span />
</ConfigProvider>,
);
});
// https://github.com/ant-design/ant-design/issues/18731
it('should not reset locale for Modal', () => {
const App: React.FC = () => {
const [showButton, setShowButton] = useState<boolean>(false);
useEffect(() => {
setShowButton(true);
}, []);
const openConfirm = () => {
jest.useFakeTimers();
Modal.confirm({ title: 'title', content: 'Some descriptions' });
act(() => {
jest.runAllTimers();
});
jest.useRealTimers();
};
return (
<ConfigProvider locale={zhCN}>
{showButton ? (
<ConfigProvider locale={enUS}>
<button type="button" onClick={openConfirm}>
open
</button>
</ConfigProvider>
) : null}
</ConfigProvider>
);
};
const wrapper = render(<App />);
fireEvent.click(wrapper.container.querySelector('button')!);
expect($$('.ant-btn-primary')[0].textContent).toBe('OK');
});
// https://github.com/ant-design/ant-design/issues/31592
it('should not reset the component state when switching locale', () => {
const wrapper = render(
<ConfigProvider locale={zhCN}>
<DatePicker />
<Pagination total={50} />
</ConfigProvider>,
);
const datepicke = wrapper.container.querySelector<HTMLInputElement>('.ant-picker-input input');
expect(datepicke?.value).toBe('');
expect(datepicke?.placeholder).toBe('请选择日期');
expect(wrapper.container.querySelector('.ant-pagination-item-1')?.className).toContain(
'ant-pagination-item-active',
);
openPicker(wrapper);
selectCell(wrapper, 10);
closePicker(wrapper);
expect(
wrapper.container.querySelector<HTMLInputElement>('.ant-picker-input input')?.value,
).not.toBe('');
wrapper.rerender(
<ConfigProvider locale={{} as Locale}>
<DatePicker />
<Pagination total={50} />
</ConfigProvider>,
);
fireEvent.click(wrapper.container.querySelector('.ant-pagination-item-3')!);
const datepicker = wrapper.container.querySelector<HTMLInputElement>('.ant-picker-input input');
expect(datepicker?.placeholder).not.toBe('请选择日期');
expect(datepicker?.value).not.toBe('');
expect(datepicker?.value).toContain('-10');
expect(wrapper.container.querySelector('.ant-pagination-item-3')?.className).toContain(
'ant-pagination-item-active',
);
});
describe('support legacy LocaleProvider', () => {
function testLocale(wrapper: ReturnType<typeof render>): void {
expect(wrapper.container.querySelector('input')?.placeholder).toBe(
zhCN.TimePicker?.placeholder,
);
}
it('LocaleProvider', () => {
testLocale(
render(
<LocaleProvider locale={zhCN}>
<TimePicker />
</LocaleProvider>,
),
);
});
it('LocaleProvider > ConfigProvider', () => {
testLocale(
render(
<LocaleProvider locale={zhCN}>
<ConfigProvider>
<TimePicker />
</ConfigProvider>
</LocaleProvider>,
),
);
});
it('ConfigProvider > ConfigProvider', () => {
testLocale(
render(
<ConfigProvider locale={zhCN}>
<ConfigProvider>
<TimePicker />
</ConfigProvider>
</ConfigProvider>,
),
);
});
});
});