Browse Source

test: refactor test case demo CC => FC (#40070)

* test: refactor test case demo CC => FC

* add type

* type
pull/40178/head
lijianan 2 years ago
committed by GitHub
parent
commit
d3764fcce3
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 45
      components/config-provider/__tests__/locale.test.tsx
  2. 35
      components/date-picker/__tests__/RangePicker.test.tsx
  3. 165
      components/drawer/__tests__/MultiDrawer.test.tsx
  4. 40
      components/modal/__tests__/Modal.test.tsx
  5. 3
      components/tooltip/index.tsx
  6. 5
      components/tree/Tree.tsx

45
components/config-provider/__tests__/locale.test.tsx

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { closePicker, openPicker, selectCell } from '../../date-picker/__tests__/utils';
import ConfigProvider from '..';
import DatePicker from '../../date-picker';
@ -27,15 +27,12 @@ describe('ConfigProvider.Locale', () => {
// 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 = () => {
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(() => {
@ -43,22 +40,18 @@ describe('ConfigProvider.Locale', () => {
});
jest.useRealTimers();
};
render() {
return (
<ConfigProvider locale={zhCN}>
{this.state.showButton ? (
<ConfigProvider locale={enUS}>
<button type="button" onClick={this.openConfirm}>
open
</button>
</ConfigProvider>
) : null}
</ConfigProvider>
);
}
}
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');

35
components/date-picker/__tests__/RangePicker.test.tsx

@ -1,6 +1,7 @@
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React from 'react';
import React, { useState } from 'react';
import type { RangeValue } from 'rc-picker/lib/interface';
import { resetWarned } from '../../_util/warning';
import DatePicker from '..';
import focusTest from '../../../tests/shared/focusTest';
@ -57,23 +58,21 @@ describe('RangePicker', () => {
// https://github.com/ant-design/ant-design/issues/13302
describe('in "month" mode, when the left and right panels select the same month', () => {
it('the cell status is correct', () => {
let rangePickerValue: dayjs.Dayjs[] = [] as any;
class Test extends React.Component {
state = { value: null };
render() {
return (
<RangePicker
value={this.state.value}
mode={['month', 'month']}
onPanelChange={(value) => {
this.setState({ value });
rangePickerValue = value as any;
}}
/>
);
}
}
let rangePickerValue: dayjs.Dayjs[] = [];
const Test: React.FC = () => {
const [value, setValue] = useState<RangeValue<dayjs.Dayjs>>(null);
return (
<RangePicker
value={value}
mode={['month', 'month']}
onPanelChange={(v) => {
setValue(v);
rangePickerValue = v as dayjs.Dayjs[];
}}
/>
);
};
const wrapper = render(<Test />);
openPicker(wrapper);

165
components/drawer/__tests__/MultiDrawer.test.tsx

@ -1,5 +1,5 @@
import type { DrawerPopupProps } from 'rc-drawer/lib/DrawerPopup';
import React from 'react';
import React, { useState } from 'react';
import Drawer from '..';
import { fireEvent, render } from '../../../tests/utils';
import Button from '../../button';
@ -9,111 +9,94 @@ interface DrawerPropsType {
placement?: DrawerPopupProps['placement'];
}
interface DrawerStateType {
open: boolean;
hasChildren: boolean;
childrenDrawer: boolean;
}
const MultiDrawer: React.FC<DrawerPropsType> = (props) => {
const { placement, push } = props;
class MultiDrawer extends React.Component<DrawerPropsType, DrawerStateType> {
state = { open: false, childrenDrawer: false, hasChildren: true };
const [open, setOpen] = useState<boolean>(false);
const [hasChildren, setHasChildren] = useState<boolean>(true);
const [childrenDrawer, setChildrenDrawer] = useState<boolean>(false);
showDrawer = () => {
this.setState({
open: true,
hasChildren: true,
});
const showDrawer = () => {
setOpen(true);
setHasChildren(true);
};
onClose = () => {
this.setState({
open: false,
});
const onClose = () => {
setOpen(false);
};
showChildrenDrawer = () => {
this.setState({
childrenDrawer: true,
hasChildren: true,
});
const showChildrenDrawer = () => {
setChildrenDrawer(true);
setHasChildren(true);
};
onChildrenDrawerClose = () => {
this.setState({
childrenDrawer: false,
});
const onChildrenDrawerClose = () => {
setChildrenDrawer(false);
};
onRemoveChildDrawer = () => {
this.setState({
hasChildren: false,
});
const onRemoveChildDrawer = () => {
setHasChildren(false);
};
render() {
const { childrenDrawer, open, hasChildren } = this.state;
const { placement, push } = this.props;
return (
<div>
<Button type="primary" id="open_drawer" onClick={this.showDrawer}>
Open drawer
return (
<div>
<Button type="primary" id="open_drawer" onClick={showDrawer}>
Open drawer
</Button>
<Button type="primary" id="remove_drawer" onClick={onRemoveChildDrawer}>
rm child drawer
</Button>
<Drawer
title="Multi-level drawer"
className="test_drawer"
width={520}
onClose={onClose}
getContainer={false}
placement={placement}
open={open}
push={push}
>
<Button type="primary" id="open_two_drawer" onClick={showChildrenDrawer}>
Two-level drawer
</Button>
<Button type="primary" id="remove_drawer" onClick={this.onRemoveChildDrawer}>
rm child drawer
</Button>
<Drawer
title="Multi-level drawer"
className="test_drawer"
width={520}
onClose={this.onClose}
getContainer={false}
placement={placement}
open={open}
push={push}
{hasChildren && (
<Drawer
title="Two-level Drawer"
width={320}
className="Two-level"
getContainer={false}
placement={placement}
onClose={onChildrenDrawerClose}
open={childrenDrawer}
>
<div id="two_drawer_text">This is two-level drawer</div>
</Drawer>
)}
<div
style={{
position: 'absolute',
bottom: 0,
width: '100%',
borderTop: '1px solid #e8e8e8',
padding: '10px 16px',
textAlign: 'right',
left: 0,
backgroundColor: '#fff',
borderRadius: '0 0 4px 4px',
}}
>
<Button type="primary" id="open_two_drawer" onClick={this.showChildrenDrawer}>
Two-level drawer
<Button style={{ marginRight: 8 }} onClick={onClose}>
Cancel
</Button>
{hasChildren && (
<Drawer
title="Two-level Drawer"
width={320}
className="Two-level"
getContainer={false}
placement={placement}
onClose={this.onChildrenDrawerClose}
open={childrenDrawer}
>
<div id="two_drawer_text">This is two-level drawer</div>
</Drawer>
)}
<div
style={{
position: 'absolute',
bottom: 0,
width: '100%',
borderTop: '1px solid #e8e8e8',
padding: '10px 16px',
textAlign: 'right',
left: 0,
backgroundColor: '#fff',
borderRadius: '0 0 4px 4px',
}}
>
<Button style={{ marginRight: 8 }} onClick={this.onClose}>
Cancel
</Button>
<Button onClick={this.onClose} type="primary">
Submit
</Button>
</div>
</Drawer>
<div className="childrenDrawer">{String(childrenDrawer)}</div>
</div>
);
}
}
<Button onClick={onClose} type="primary">
Submit
</Button>
</div>
</Drawer>
<div className="childrenDrawer">{String(childrenDrawer)}</div>
</div>
);
};
describe('Drawer', () => {
it('render right MultiDrawer', () => {

40
components/modal/__tests__/Modal.test.tsx

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import type { ModalProps } from '..';
import Modal from '..';
import mountTest from '../../../tests/shared/mountTest';
@ -8,29 +8,21 @@ import { resetWarned } from '../../_util/warning';
jest.mock('rc-util/lib/Portal');
class ModalTester extends React.Component<ModalProps, { open: boolean }> {
state = { open: false };
componentDidMount() {
this.setState({ open: true }); // eslint-disable-line react/no-did-mount-set-state
}
container = React.createRef<HTMLDivElement>();
getContainer = () => this.container?.current!;
render() {
const { open } = this.state;
return (
<div>
<div ref={this.container} />
<Modal {...this.props} open={open} getContainer={this.getContainer}>
Here is content of Modal
</Modal>
</div>
);
}
}
const ModalTester: React.FC<ModalProps> = (props) => {
const [open, setOpen] = React.useState(false);
const container = React.useRef<HTMLDivElement>(null);
useEffect(() => {
setOpen(true);
}, []);
return (
<div>
<div ref={container} />
<Modal {...props} open={open} getContainer={container.current!}>
Here is content of Modal
</Modal>
</div>
);
};
describe('Modal', () => {
mountTest(Modal);

3
components/tooltip/index.tsx

@ -5,6 +5,7 @@ import type { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
import type { AlignType } from 'rc-trigger/lib/interface';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import * as React from 'react';
import type { CSSProperties } from 'react';
import { ConfigContext } from '../config-provider';
import type { PresetColorType } from '../_util/colors';
import { getTransitionName } from '../_util/motion';
@ -95,7 +96,7 @@ export interface TooltipPropsWithTitle extends AbstractTooltipProps {
export declare type TooltipProps = TooltipPropsWithTitle | TooltipPropsWithOverlay;
const splitObject = <T extends React.CSSProperties>(
const splitObject = <T extends CSSProperties>(
obj: T,
keys: (keyof T)[],
): Record<'picked' | 'omitted', T> => {

5
components/tree/Tree.tsx

@ -3,7 +3,8 @@ import classNames from 'classnames';
import type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';
import RcTree from 'rc-tree';
import type { DataNode, Key } from 'rc-tree/lib/interface';
import * as React from 'react';
import type { Component } from 'react';
import React from 'react';
import { ConfigContext } from '../config-provider';
import initCollapseMotion from '../_util/motion';
import dropIndicatorRender from './utils/dropIndicator';
@ -53,7 +54,7 @@ export interface AntTreeNodeProps {
[customProp: string]: any;
}
export interface AntTreeNode extends React.Component<AntTreeNodeProps, {}> {}
export interface AntTreeNode extends Component<AntTreeNodeProps, {}> {}
export interface AntTreeNodeBaseEvent {
node: AntTreeNode;

Loading…
Cancel
Save