ant-design/components/config-provider/__tests__/locale.test.tsx
lijianan 8010cd19b6
test: migrate part of DatePicker tests (#37115)
* test: migrate part of DatePicker tests

* test: migrate part of DatePicker tests

* fix: update snap

* test: migrate part of DatePicker tests

* test: migrate part of DatePicker tests

* test: migrate part of DatePicker tests

* test: migrate part of DatePicker tests

* test: migrate part of DatePicker tests

* test: migrate part of DatePicker tests

* test: remove useless methods

* test: add test ignore
2022-08-18 17:40:47 +08:00

152 lines
4.3 KiB
TypeScript

import React from 'react';
import { closePicker, openPicker, selectCell } from '../../date-picker/__tests__/utils';
import ConfigProvider from '..';
import DatePicker from '../../date-picker';
import type { Locale } from '../../locale-provider';
import LocaleProvider from '../../locale-provider';
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';
import { act, render, fireEvent } from '../../../tests/utils';
describe('ConfigProvider.Locale', () => {
function $$(className: string): NodeListOf<Element> {
return document.body.querySelectorAll(className);
}
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', () => {
class App extends React.Component {
state = { showButton: false };
componentDidMount() {
this.setState({ showButton: true });
}
// eslint-disable-next-line class-methods-use-this
openConfirm = () => {
jest.useFakeTimers();
Modal.confirm({ title: 'title', content: 'Some descriptions' });
act(() => {
jest.runAllTimers();
});
jest.useRealTimers();
};
render() {
return (
<ConfigProvider locale={zhCN}>
{this.state.showButton ? (
<ConfigProvider locale={enUS}>
<button type="button" onClick={this.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>,
),
);
});
});
});