diff --git a/components/button/style/index.less b/components/button/style/index.less
index 90d32a396471..a0f124cc53ba 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -284,6 +284,10 @@ a.@{btn-prefix-cls} {
padding-top: 0.01px !important;
line-height: @btn-height-base - 2px;
+ &-disabled {
+ .btn-href-disabled();
+ }
+
&-lg {
line-height: @btn-height-lg - 2px;
}
diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
index ec50719495ba..dd6af48bc358 100644
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -386,6 +386,24 @@
}
.button-disabled(@disabled-color; transparent; transparent);
}
+// link button disabled style
+.btn-href-disabled() {
+ cursor: not-allowed;
+
+ > * {
+ pointer-events: none;
+ }
+
+ &,
+ &:hover,
+ &:focus,
+ &:active {
+ .button-color(@btn-disable-color,transparent, transparent);
+
+ text-shadow: none;
+ box-shadow: none;
+ }
+}
// text button style
.btn-text() {
.button-variant-other(@text-color, transparent, transparent);
diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js
index 8b37ded3dc11..c14454dea831 100644
--- a/components/config-provider/__tests__/components.test.js
+++ b/components/config-provider/__tests__/components.test.js
@@ -1,5 +1,6 @@
import { render } from 'enzyme';
import moment from 'moment';
+import React from 'react';
import ConfigProvider from '..';
import Alert from '../../alert';
import Anchor from '../../anchor';
diff --git a/components/config-provider/__tests__/pagination.test.tsx b/components/config-provider/__tests__/pagination.test.tsx
index fc8bf00d3f9e..4ccfc03193a6 100644
--- a/components/config-provider/__tests__/pagination.test.tsx
+++ b/components/config-provider/__tests__/pagination.test.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
import ConfigProvider from '..';
import { render } from '../../../tests/utils';
import Pagination from '../../pagination';
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 377210ab3ec8..a0b15174ada4 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -44,6 +44,7 @@ export type DropdownArrowOptions = {
};
export interface DropdownProps {
+ autoFocus?: boolean;
arrow?: boolean | DropdownArrowOptions;
trigger?: ('click' | 'hover' | 'contextMenu')[];
overlay: React.ReactElement | OverlayFunc;
diff --git a/components/grid/__tests__/gap.test.js b/components/grid/__tests__/gap.test.js
index d8d6381ccacc..faab99d8994a 100644
--- a/components/grid/__tests__/gap.test.js
+++ b/components/grid/__tests__/gap.test.js
@@ -1,4 +1,5 @@
import { mount } from 'enzyme';
+import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { Col, Row } from '..';
import { render, screen } from '../../../tests/utils';
diff --git a/components/image/__tests__/index.test.js b/components/image/__tests__/index.test.js
index 181980e76f6e..873be7e01bae 100644
--- a/components/image/__tests__/index.test.js
+++ b/components/image/__tests__/index.test.js
@@ -1,7 +1,9 @@
+import React from 'react';
import Image from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { fireEvent, render } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
@@ -75,4 +77,17 @@ describe('Image', () => {
expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('abc');
expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('def');
});
+ it('ConfigProvider getPopupContainer', () => {
+ const { container: wrapper, baseElement } = render(
+ <>
+
+ document.querySelector('.container')}>
+
+
+ >,
+ );
+ fireEvent.click(wrapper.querySelector('.ant-image'));
+ const containerElement = baseElement.querySelector('.container');
+ expect(containerElement.children.length).not.toBe(0);
+ });
});
diff --git a/components/image/index.tsx b/components/image/index.tsx
index ddd6435524c0..2bd536b4b9f7 100644
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { useContext } from 'react';
import { EyeOutlined } from 'infra-design-icons';
import RcImage, { ImageProps } from 'rc-image';
-import defaultLocale from '../locale/en_US';
-import PreviewGroup, { icons } from './PreviewGroup';
+import * as React from 'react';
+import { useContext } from 'react';
import { ConfigContext } from '../config-provider';
+import defaultLocale from '../locale/en_US';
import { getTransitionName } from '../_util/motion';
+import PreviewGroup, { icons } from './PreviewGroup';
export interface CompositionImage extends React.FC
{
PreviewGroup: typeof PreviewGroup;
@@ -16,11 +16,15 @@ const Image: CompositionImage = ({
preview,
...otherProps
}) => {
- const { getPrefixCls } = useContext(ConfigContext);
+ const {
+ getPrefixCls,
+ locale: contextLocale = defaultLocale,
+ getPopupContainer: getContextPopupContainer,
+ } = useContext(ConfigContext);
+
const prefixCls = getPrefixCls('image', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
- const { locale: contextLocale = defaultLocale } = useContext(ConfigContext);
const imageLocale = contextLocale.Image || defaultLocale.Image;
const mergedPreview = React.useMemo(() => {
@@ -28,7 +32,7 @@ const Image: CompositionImage = ({
return preview;
}
const _preview = typeof preview === 'object' ? preview : {};
-
+ const { getContainer, ...restPreviewProps } = _preview;
return {
mask: (
@@ -37,7 +41,8 @@ const Image: CompositionImage = ({
),
icons,
- ..._preview,
+ ...restPreviewProps,
+ getContainer: getContainer || getContextPopupContainer,
transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
};
diff --git a/components/input/__tests__/type.test.tsx b/components/input/__tests__/type.test.tsx
index 83ea0dd049fd..8f509b0a2549 100644
--- a/components/input/__tests__/type.test.tsx
+++ b/components/input/__tests__/type.test.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
import Input from '..';
import { render } from '../../../tests/utils';
import type { InputProps } from '../Input';
diff --git a/components/list/__tests__/empty.test.js b/components/list/__tests__/empty.test.js
index d7d710d64bc9..333d4e618313 100644
--- a/components/list/__tests__/empty.test.js
+++ b/components/list/__tests__/empty.test.js
@@ -1,3 +1,4 @@
+import React from 'react';
import List from '..';
import { render } from '../../../tests/utils';
diff --git a/components/list/__tests__/index.test.js b/components/list/__tests__/index.test.js
index 8b088b57d1b6..e1ee6944f1ba 100644
--- a/components/list/__tests__/index.test.js
+++ b/components/list/__tests__/index.test.js
@@ -1,3 +1,4 @@
+import React from 'react';
import List from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
diff --git a/components/list/__tests__/loading.test.js b/components/list/__tests__/loading.test.js
index f1371c65e00a..771242759ed2 100644
--- a/components/list/__tests__/loading.test.js
+++ b/components/list/__tests__/loading.test.js
@@ -1,4 +1,5 @@
import { LoadingOutlined } from 'infra-design-icons';
+import React from 'react';
import { render } from '../../../tests/utils';
import List from '..';
diff --git a/components/list/__tests__/pagination.test.js b/components/list/__tests__/pagination.test.js
index f7b775681062..98a59b53f8f3 100644
--- a/components/list/__tests__/pagination.test.js
+++ b/components/list/__tests__/pagination.test.js
@@ -1,3 +1,4 @@
+import React from 'react';
import List from '..';
import { fireEvent, render } from '../../../tests/utils';
import { noop } from '../../_util/warning';
diff --git a/components/locale/it_IT.tsx b/components/locale/it_IT.tsx
index a47666a06e6d..a93b4cf47bb5 100644
--- a/components/locale/it_IT.tsx
+++ b/components/locale/it_IT.tsx
@@ -1,8 +1,8 @@
import Pagination from 'rc-pagination/lib/locale/it_IT';
-import DatePicker from '../date-picker/locale/it_IT';
-import TimePicker from '../time-picker/locale/it_IT';
import Calendar from '../calendar/locale/it_IT';
+import DatePicker from '../date-picker/locale/it_IT';
import type { Locale } from '../locale-provider';
+import TimePicker from '../time-picker/locale/it_IT';
const localeValues: Locale = {
locale: 'it',
@@ -23,8 +23,8 @@ const localeValues: Locale = {
selectInvert: 'Inverti selezione nella pagina corrente',
sortTitle: 'Ordina',
triggerDesc: 'Clicca per ordinare in modo discendente',
- triggerAsc: 'Clicca per ordinare in modo ascendente',
- cancelSort: 'Clicca per eliminare i filtri',
+ triggerAsc: 'Clicca per ordinare in modo ascendente',
+ cancelSort: "Clicca per eliminare l'ordinamento",
},
Modal: {
okText: 'OK',
diff --git a/components/menu/__tests__/type.test.tsx b/components/menu/__tests__/type.test.tsx
index 85f178c9e428..0d5b0b494fbb 100644
--- a/components/menu/__tests__/type.test.tsx
+++ b/components/menu/__tests__/type.test.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
import Menu from '..';
describe('Menu.typescript', () => {
diff --git a/components/pagination/__tests__/index.test.js b/components/pagination/__tests__/index.test.js
index 3953298695f7..7aa32e9e1cc2 100644
--- a/components/pagination/__tests__/index.test.js
+++ b/components/pagination/__tests__/index.test.js
@@ -1,4 +1,5 @@
import { mount } from 'enzyme';
+import React from 'react';
import Pagination from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
diff --git a/components/result/__tests__/index.test.tsx b/components/result/__tests__/index.test.tsx
index 69aa2cb1e3ae..8ea775d70df5 100644
--- a/components/result/__tests__/index.test.tsx
+++ b/components/result/__tests__/index.test.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
import Result from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
diff --git a/components/segmented/index.en-US.md b/components/segmented/index.en-US.md
index 3c2969afca51..d9bb97bfc306 100644
--- a/components/segmented/index.en-US.md
+++ b/components/segmented/index.en-US.md
@@ -22,6 +22,6 @@ Segmented Controls. This component is available since `antd@4.20.0`.
| defaultValue | Default selected value | string \| number | | |
| disabled | Disable all segments | boolean | false | |
| onChange | The callback function that is triggered when the state changes | function(value: string \| number) | | |
-| options | Set children optional | string\[] \| number\[] \| Array<{ label: string value: string icon? ReactNode disabled?: boolean className?: string }> | [] | |
+| options | Set children optional | string\[] \| number\[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] | |
| size | The size of the Segmented. | `large` \| `middle` \| `small` | - | |
| value | Currently selected value | string \| number | | |
diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md
index 057926f57c97..df42c9969db2 100644
--- a/components/segmented/index.zh-CN.md
+++ b/components/segmented/index.zh-CN.md
@@ -25,6 +25,6 @@ cover: https://gw.alipayobjects.com/zos/bmw-prod/a3ff040f-24ba-43e0-92e9-c845df1
| defaultValue | 默认选中的值 | string \| number | | |
| disabled | 是否禁用 | boolean | false | |
| onChange | 选项变化时的回调函数 | function(value: string \| number) | | |
-| options | 数据化配置选项内容 | string\[] \| number\[] \| Array<{ label: string value: string icon? ReactNode disabled?: boolean className?: string }> | [] | |
+| options | 数据化配置选项内容 | string\[] \| number\[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] | |
| size | 控件尺寸 | `large` \| `middle` \| `small` | - | |
| value | 当前选中的值 | string \| number | | |
diff --git a/components/statistic/__tests__/__snapshots__/demo.test.js.snap b/components/statistic/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/statistic/__tests__/__snapshots__/demo.test.js.snap
rename to components/statistic/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/statistic/__tests__/__snapshots__/index.test.js.snap b/components/statistic/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/statistic/__tests__/__snapshots__/index.test.js.snap
rename to components/statistic/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/statistic/__tests__/demo.test.js b/components/statistic/__tests__/demo.test.ts
similarity index 100%
rename from components/statistic/__tests__/demo.test.js
rename to components/statistic/__tests__/demo.test.ts
diff --git a/components/statistic/__tests__/index.test.js b/components/statistic/__tests__/index.test.tsx
similarity index 52%
rename from components/statistic/__tests__/index.test.js
rename to components/statistic/__tests__/index.test.tsx
index 111c4d7f88f3..270e0410f315 100644
--- a/components/statistic/__tests__/index.test.js
+++ b/components/statistic/__tests__/index.test.tsx
@@ -1,13 +1,12 @@
-import React from 'react';
import MockDate from 'mockdate';
import moment from 'moment';
-import { mount } from 'enzyme';
-import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
import Statistic from '..';
-import { formatTimeStr } from '../utils';
-import { sleep } from '../../../tests/utils';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render, sleep } from '../../../tests/utils';
+import type Countdown from '../Countdown';
+import { formatTimeStr } from '../utils';
describe('Statistic', () => {
mountTest(Statistic);
@@ -23,32 +22,34 @@ describe('Statistic', () => {
});
it('`-` is not a number', () => {
- const wrapper = mount();
- expect(wrapper.find('.ant-statistic-content').text()).toEqual('-');
+ const { container } = render();
+ expect(container.querySelector('.ant-statistic-content')!.textContent).toEqual('-');
});
it('customize formatter', () => {
const formatter = jest.fn(() => 93);
- const wrapper = mount();
+ const { container } = render();
expect(formatter).toHaveBeenCalledWith(1128);
- expect(wrapper.find('.ant-statistic-content-value').text()).toEqual('93');
+ expect(container.querySelector('.ant-statistic-content-value')!.textContent).toEqual('93');
});
it('groupSeparator', () => {
- const wrapper = mount();
- expect(wrapper.find('.ant-statistic-content-value').text()).toEqual('1__TEST__128');
+ const { container } = render();
+ expect(container.querySelector('.ant-statistic-content-value')!.textContent).toEqual(
+ '1__TEST__128',
+ );
});
it('not a number', () => {
- const wrapper = mount();
- expect(wrapper.find('.ant-statistic-content-value').text()).toEqual('bamboo');
+ const { container } = render();
+ expect(container.querySelector('.ant-statistic-content-value')!.textContent).toEqual('bamboo');
});
it('support negetive number', () => {
- const wrapper = mount(
+ const { asFragment } = render(
,
);
- expect(wrapper.render()).toMatchSnapshot();
+ expect(asFragment().firstChild).toMatchSnapshot();
});
it('allow negetive precision', () => {
@@ -58,28 +59,32 @@ describe('Statistic', () => {
[-3, -1112893.1212, '-1,112,893'],
[-1, -1112893, '-1,112,893'],
[-1, 1112893, '1,112,893'],
- ].forEach(([precision, value, expectValue]) => {
- const wrapper = mount();
- expect(wrapper.find('.ant-statistic-content-value-int').text()).toEqual(expectValue);
- expect(wrapper.find('.ant-statistic-content-value-decimal').length).toBe(0);
+ ].forEach(([precision, value, expectValue]: [number, number, string]) => {
+ const { container } = render();
+ expect(container.querySelector('.ant-statistic-content-value-int')!.textContent).toEqual(
+ expectValue,
+ );
+ expect(container.querySelectorAll('.ant-statistic-content-value-decimal').length).toBe(0);
});
});
it('loading with skeleton', async () => {
let loading = false;
- const wrapper = mount();
- expect(wrapper.find('.ant-skeleton')).toHaveLength(0);
- expect(wrapper.find('.ant-statistic-content')).toHaveLength(1);
+ const { container, rerender } = render(
+ ,
+ );
+ expect(container.querySelectorAll('.ant-skeleton')).toHaveLength(0);
+ expect(container.querySelectorAll('.ant-statistic-content')).toHaveLength(1);
loading = true;
- wrapper.setProps({ loading });
- expect(wrapper.find('.ant-skeleton')).toHaveLength(1);
- expect(wrapper.find('.ant-statistic-content')).toHaveLength(0);
+ rerender();
+ expect(container.querySelectorAll('.ant-skeleton')).toHaveLength(1);
+ expect(container.querySelectorAll('.ant-statistic-content')).toHaveLength(0);
});
describe('Countdown', () => {
it('render correctly', () => {
- const now = moment().add(2, 'd').add(11, 'h').add(28, 'm').add(9, 's').add(3, 'ms');
+ const now = moment().add(2, 'd').add(11, 'h').add(28, 'm').add(9, 's').add(3, 'ms').valueOf();
[
['H:m:s', '59:28:9'],
@@ -87,25 +92,31 @@ describe('Statistic', () => {
['HH:mm:ss:SSS', '59:28:09:003'],
['DD-HH:mm:ss', '02-11:28:09'],
].forEach(([format, value]) => {
- const wrapper = mount();
- expect(wrapper.find('.ant-statistic-content-value').text()).toEqual(value);
+ const { container } = render();
+ expect(container.querySelector('.ant-statistic-content-value')!.textContent).toEqual(value);
});
});
it('time going', async () => {
const now = Date.now() + 1000;
const onFinish = jest.fn();
- const wrapper = mount();
- wrapper.update();
+ let instance: Countdown | null;
+ const { unmount } = render(
+ {
+ instance = n;
+ }}
+ value={now}
+ onFinish={onFinish}
+ />,
+ );
// setInterval should work
- const instance = wrapper.find('Countdown').instance();
- expect(instance.countdownId).not.toBe(undefined);
+ expect(instance!.countdownId).not.toBe(undefined);
await sleep(10);
- wrapper.unmount();
- expect(instance.countdownId).toBe(undefined);
+ unmount();
expect(onFinish).not.toHaveBeenCalled();
});
@@ -115,21 +126,21 @@ describe('Statistic', () => {
const { container } = render(
,
);
- fireEvent.mouseEnter(container.firstChild);
+ fireEvent.mouseEnter(container.firstChild!);
expect(onMouseEnter).toHaveBeenCalled();
- fireEvent.mouseLeave(container.firstChild);
+ fireEvent.mouseLeave(container.firstChild!);
expect(onMouseLeave).toHaveBeenCalled();
});
it('responses hover events for Countdown', () => {
const onMouseEnter = jest.fn();
const onMouseLeave = jest.fn();
- const wrapper = mount(
+ const { container } = render(
,
);
- wrapper.simulate('mouseenter');
+ fireEvent.mouseEnter(container.firstChild!);
expect(onMouseEnter).toHaveBeenCalled();
- wrapper.simulate('mouseleave');
+ fireEvent.mouseLeave(container.firstChild!);
expect(onMouseLeave).toHaveBeenCalled();
});
@@ -138,11 +149,11 @@ describe('Statistic', () => {
const deadline = Date.now() + 10 * 1000;
let remainingTime;
- const onChange = value => {
+ const onChange = (value: number) => {
remainingTime = value;
};
- const wrapper = mount();
- wrapper.update();
+ render();
+ // container.update();
await sleep(100);
expect(remainingTime).toBeGreaterThan(0);
});
@@ -151,20 +162,26 @@ describe('Statistic', () => {
describe('time finished', () => {
it('not call if time already passed', () => {
const now = Date.now() - 1000;
-
+ let instance: Countdown | null;
const onFinish = jest.fn();
- const wrapper = mount();
- wrapper.update();
-
- expect(wrapper.find('Countdown').instance().countdownId).toBe(undefined);
+ render(
+ {
+ instance = n;
+ }}
+ value={now}
+ onFinish={onFinish}
+ />,
+ );
+
+ expect(instance!.countdownId).toBe(undefined);
expect(onFinish).not.toHaveBeenCalled();
});
it('called if finished', async () => {
const now = Date.now() + 10;
const onFinish = jest.fn();
- const wrapper = mount();
- wrapper.update();
+ render();
MockDate.set(moment('2019-11-28 00:00:00').valueOf());
await sleep(100);
expect(onFinish).toHaveBeenCalled();
diff --git a/components/style/color/colorPalette.less b/components/style/color/colorPalette.less
index f3e175d825f3..e662c072a133 100644
--- a/components/style/color/colorPalette.less
+++ b/components/style/color/colorPalette.less
@@ -31,6 +31,10 @@
return Math.round(hue);
};
var getSaturation = function(hsv, i, isLight) {
+ // grey color don't change saturation
+ if (hsv.h === 0 && hsv.s === 0) {
+ return hsv.s;
+ }
var saturation;
if (isLight) {
saturation = hsv.s - saturationStep * i;
diff --git a/components/table/__tests__/Table.expand.test.js b/components/table/__tests__/Table.expand.test.js
index 9dcf8a7ed90b..57cf4a74dc5a 100644
--- a/components/table/__tests__/Table.expand.test.js
+++ b/components/table/__tests__/Table.expand.test.js
@@ -1,4 +1,5 @@
/* eslint-disable react/no-multi-comp */
+import React from 'react';
import Table from '..';
import { fireEvent, render } from '../../../tests/utils';
diff --git a/components/table/__tests__/Table.order.test.js b/components/table/__tests__/Table.order.test.js
index d669ac07b8a6..db3ed54aa605 100644
--- a/components/table/__tests__/Table.order.test.js
+++ b/components/table/__tests__/Table.order.test.js
@@ -1,3 +1,4 @@
+import React from 'react';
import Table from '..';
import { render } from '../../../tests/utils';
import { resetWarned } from '../../_util/warning';
diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js
index e7c4e6fe29f3..7877ffd26d63 100644
--- a/components/table/__tests__/Table.rowSelection.test.js
+++ b/components/table/__tests__/Table.rowSelection.test.js
@@ -1,8 +1,7 @@
-import { mount } from 'enzyme';
+import React from 'react';
import { act } from 'react-dom/test-utils';
import Table from '..';
-import { render } from '../../../tests/utils';
-import Checkbox from '../../checkbox';
+import { fireEvent, render } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
import { resetWarned } from '../../_util/warning';
@@ -38,80 +37,88 @@ describe('Table.rowSelection', () => {
return ;
}
- function renderedNames(wrapper) {
- return wrapper.find('BodyRow').map(row => row.props().record.name);
+ function renderedNames(contain) {
+ const namesList = [];
+ contain
+ .querySelector('.ant-table-tbody')
+ .querySelectorAll('tr')
+ .forEach(tr => {
+ namesList.push(tr.querySelectorAll('td')[1].textContent);
+ });
+ return namesList;
}
- function getSelections(wrapper) {
- return wrapper
- .find('BodyRow')
- .map(row => {
- const { key } = row.props().record;
- if (!row.find('input').at(0).props().checked) {
- return null;
+ function getSelections(container) {
+ const keys = [];
+ container.querySelectorAll('.ant-table-tbody tr').forEach(row => {
+ const key = row.getAttribute('data-row-key');
+ if (row.querySelector('input').checked) {
+ if (isNaN(Number(key))) {
+ // rowKey
+ keys.push(key);
+ } else {
+ keys.push(Number(key));
}
-
- return key;
- })
- .filter(key => key !== null);
+ }
+ });
+ return keys;
}
- function getIndeterminateSelection(wrapper) {
- return wrapper
- .find('BodyRow')
- .map(row => {
- const { key } = row.props().record;
- if (!row.find('Checkbox').at(0).props().indeterminate) {
- return null;
+ function getIndeterminateSelection(container) {
+ const keys = [];
+ container.querySelectorAll('.ant-table-tbody tr').forEach(row => {
+ const key = row.getAttribute('data-row-key');
+ if (row.querySelector('.ant-checkbox-indeterminate')) {
+ if (isNaN(Number(key))) {
+ // rowKey
+ keys.push(key);
+ } else {
+ keys.push(Number(key));
}
-
- return key;
- })
- .filter(key => key !== null);
+ }
+ });
+ return keys;
}
it('select default row', () => {
- const wrapper = mount(createTable({ rowSelection: { defaultSelectedRowKeys: [0] } }));
- const checkboxes = wrapper.find('input');
-
- expect(getSelections(wrapper)).toEqual([0]);
+ const { container } = render(createTable({ rowSelection: { defaultSelectedRowKeys: [0] } }));
+ const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+ expect(getSelections(container)).toEqual([0]);
- checkboxes.at(1).simulate('change', { target: { checked: false } });
- expect(getSelections(wrapper)).toEqual([]);
+ fireEvent.click(checkboxes[1]);
+ expect(getSelections(container)).toEqual([]);
- checkboxes.at(0).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([0, 1, 2, 3]);
+ fireEvent.click(checkboxes[0]);
+ expect(getSelections(container)).toEqual([0, 1, 2, 3]);
- checkboxes.at(0).simulate('change', { target: { checked: false } });
- expect(getSelections(wrapper)).toEqual([]);
+ fireEvent.click(checkboxes[0]);
+ expect(getSelections(container)).toEqual([]);
});
it('select by checkbox', () => {
- const wrapper = mount(createTable());
- const checkboxes = wrapper.find('input');
- const checkboxAll = checkboxes.first();
+ const { container } = render(createTable());
+ const checkboxes = container.querySelectorAll('input[type="checkbox"]');
- checkboxAll.simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([0, 1, 2, 3]);
+ fireEvent.click(checkboxes[0]);
+ expect(getSelections(container)).toEqual([0, 1, 2, 3]);
- checkboxes.at(1).simulate('change', { target: { checked: false } });
- expect(getSelections(wrapper)).toEqual([1, 2, 3]);
+ fireEvent.click(checkboxes[1]);
+ expect(getSelections(container)).toEqual([1, 2, 3]);
- checkboxes.at(1).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([0, 1, 2, 3]);
+ fireEvent.click(checkboxes[1]);
+ expect(getSelections(container)).toEqual([0, 1, 2, 3]);
});
it('select by radio', () => {
- const wrapper = mount(createTable({ rowSelection: { type: 'radio' } }));
- const radios = wrapper.find('input');
+ const { container } = render(createTable({ rowSelection: { type: 'radio' } }));
+ const radios = container.querySelectorAll('input[type="radio"]');
expect(radios.length).toBe(4);
- radios.first().simulate('click');
- radios.first().simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([0]);
+ fireEvent.click(radios[0]);
+ expect(getSelections(container)).toEqual([0]);
- radios.last().simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([3]);
+ fireEvent.click(radios[radios.length - 1]);
+ expect(getSelections(container)).toEqual([3]);
});
it('pass getCheckboxProps to checkbox', () => {
@@ -123,15 +130,15 @@ describe('Table.rowSelection', () => {
}),
};
- const wrapper = mount(createTable({ rowSelection }));
- const checkboxes = wrapper.find('input');
+ const { container } = render(createTable({ rowSelection }));
+ const checkboxes = container.querySelectorAll('input[type="checkbox"]');
- expect(checkboxes.at(1).props().disabled).toBe(false);
- expect(checkboxes.at(1).props().name).toEqual(data[0].name);
- expect(checkboxes.at(2).props().disabled).toBe(true);
- expect(checkboxes.at(2).props().name).toEqual(data[1].name);
+ expect(checkboxes[1].disabled).toBe(false);
+ expect(checkboxes[1].name).toEqual(data[0].name);
+ expect(checkboxes[2].disabled).toBe(true);
+ expect(checkboxes[2].name).toEqual(data[1].name);
- expect(getIndeterminateSelection(wrapper)).toEqual([2]);
+ expect(getIndeterminateSelection(container)).toEqual([2]);
});
it("make getCheckboxProps's `indeterminate` override selectedRowKeys' effect", () => {
@@ -144,31 +151,31 @@ describe('Table.rowSelection', () => {
selectedRowKeys: [2],
};
- const wrapper = mount(createTable({ rowSelection }));
- expect(getIndeterminateSelection(wrapper)).toEqual([2]);
+ const { container } = render(createTable({ rowSelection }));
+ expect(getIndeterminateSelection(container)).toEqual([2]);
});
it('works with pagination', () => {
- const wrapper = mount(createTable({ pagination: { pageSize: 2 } }));
- const pagers = wrapper.find('Pager');
-
- wrapper
- .find('input')
- .first()
- .simulate('change', { target: { checked: true } });
- expect(wrapper.find('Checkbox').first().props()).toEqual(
- expect.objectContaining({ checked: true, indeterminate: false }),
- );
-
- pagers.at(1).simulate('click');
- expect(wrapper.find('Checkbox').first().props()).toEqual(
- expect.objectContaining({ checked: false, indeterminate: false }),
- );
-
- pagers.at(0).simulate('click');
- expect(wrapper.find('Checkbox').first().props()).toEqual(
- expect.objectContaining({ checked: true, indeterminate: false }),
- );
+ const { container } = render(createTable({ pagination: { pageSize: 2 } }));
+
+ const pagers = container.querySelectorAll('.ant-pagination-item');
+ const checkboxAll = container.querySelector('input[type="checkbox"]');
+
+ const objectContaining = {};
+ fireEvent.click(checkboxAll);
+ objectContaining.checked = checkboxAll.checked; // true
+ objectContaining.indeterminate = getIndeterminateSelection(container).length > 0; // false
+ expect.objectContaining(objectContaining);
+
+ fireEvent.click(pagers[1]);
+ objectContaining.checked = checkboxAll.checked; // false
+ objectContaining.indeterminate = getIndeterminateSelection(container).length > 0; // false
+ expect.objectContaining(objectContaining);
+
+ fireEvent.click(pagers[0]);
+ objectContaining.checked = checkboxAll.checked; // true
+ objectContaining.indeterminate = getIndeterminateSelection(container).length > 0; // false
+ expect.objectContaining(objectContaining);
});
// https://github.com/ant-design/ant-design/issues/4020
@@ -180,7 +187,7 @@ describe('Table.rowSelection', () => {
}),
};
- mount(createTable({ rowSelection }));
+ render(createTable({ rowSelection }));
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Table] Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.',
@@ -188,13 +195,13 @@ describe('Table.rowSelection', () => {
});
it('can be controlled', () => {
- const wrapper = mount(createTable({ rowSelection: { selectedRowKeys: [0] } }));
+ const { container, rerender } = render(createTable({ rowSelection: { selectedRowKeys: [0] } }));
- expect(getSelections(wrapper)).toEqual([0]);
+ expect(getSelections(container)).toEqual([0]);
- wrapper.setProps({ rowSelection: { selectedRowKeys: [1] } });
+ rerender(createTable({ rowSelection: { selectedRowKeys: [1] } }));
- expect(getSelections(wrapper)).toEqual([1]);
+ expect(getSelections(container)).toEqual([1]);
});
it('fires change & select events', () => {
@@ -209,12 +216,9 @@ describe('Table.rowSelection', () => {
onChange: handleChange,
onSelect: handleSelect,
};
- const wrapper = mount(createTable({ rowSelection }));
+ const { container } = render(createTable({ rowSelection }));
- wrapper
- .find('input')
- .last()
- .simulate('change', { target: { checked: true } });
+ fireEvent.click(container.querySelectorAll('input[type="checkbox"]')[4]);
expect(handleChange).toHaveBeenCalledWith([3], [{ key: 3, name: 'Jerry' }], {
type: 'single',
@@ -223,7 +227,7 @@ describe('Table.rowSelection', () => {
expect(handleSelect.mock.calls[0][0]).toEqual({ key: 3, name: 'Jerry' });
expect(handleSelect.mock.calls[0][1]).toEqual(true);
expect(handleSelect.mock.calls[0][2]).toEqual([{ key: 3, name: 'Jerry' }]);
- expect(handleSelect.mock.calls[0][3].type).toBe('change');
+ expect(handleSelect.mock.calls[0][3].type).toBe('click');
expect(order).toEqual(['onSelect', 'onChange']);
});
@@ -243,27 +247,20 @@ describe('Table.rowSelection', () => {
onSelect: handleSelect,
onSelectMultiple: handleSelectMulti,
};
- const wrapper = mount(createTable({ rowSelection }));
-
- wrapper
- .find('input')
- .at(1)
- .simulate('change', {
- target: { checked: true },
- nativeEvent: { shiftKey: true },
- });
+ const { container } = render(createTable({ rowSelection }));
+ fireEvent.click(container.querySelectorAll('tbody input[type="checkbox"]')[0], {
+ shiftKey: true,
+ });
+
expect(handleSelect).toHaveBeenCalled();
expect(handleChange).toHaveBeenLastCalledWith([0], [{ key: 0, name: 'Jack' }], {
type: 'single',
});
- wrapper
- .find('input')
- .at(3)
- .simulate('change', {
- target: { checked: true },
- nativeEvent: { shiftKey: true },
- });
+ fireEvent.click(container.querySelectorAll('tbody input[type="checkbox"]')[2], {
+ shiftKey: true,
+ });
+
expect(handleSelectMulti).toHaveBeenCalledWith(
true,
[data[0], data[1], data[2]],
@@ -279,13 +276,9 @@ describe('Table.rowSelection', () => {
{ type: 'multiple' },
);
- wrapper
- .find('input')
- .at(1)
- .simulate('change', {
- target: { checked: false },
- nativeEvent: { shiftKey: true },
- });
+ fireEvent.click(container.querySelectorAll('tbody input[type="checkbox"]')[0], {
+ shiftKey: true,
+ });
expect(handleSelectMulti).toHaveBeenCalledWith(false, [], [data[0], data[1], data[2]]);
expect(handleChange).toHaveBeenLastCalledWith([], [], { type: 'multiple' });
@@ -311,46 +304,51 @@ describe('Table.rowSelection', () => {
onChange: handleChange,
onSelectAll: handleSelectAll,
};
- const wrapper = mount(createTable({ rowSelection }));
+ const { container } = render(createTable({ rowSelection }));
+
+ const checkAll = container.querySelector('input[type="checkbox"]');
- wrapper
- .find('input')
- .first()
- .simulate('change', { target: { checked: true } });
+ fireEvent.click(checkAll);
expect(handleSelectAll).toHaveBeenCalledWith(true, data, data);
expect(order).toEqual(['onSelectAll', 'onChange']);
- wrapper
- .find('input')
- .first()
- .simulate('change', { target: { checked: false } });
+ fireEvent.click(checkAll);
expect(handleSelectAll).toHaveBeenCalledWith(false, [], data);
});
it('works with selectAll option inside selection menu', () => {
+ jest.useFakeTimers();
const handleChange = jest.fn();
const rowSelection = {
onChange: handleChange,
selections: true,
};
- const wrapper = mount(createTable({ rowSelection }));
+ const { container } = render(createTable({ rowSelection }));
// Open
- wrapper.find('Trigger').setState({ popupVisible: true });
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+ act(() => {
+ jest.runAllTimers();
+ });
+
+ fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]);
- const dropdownWrapper = mount(wrapper.find('Trigger').first().instance().getComponent());
- dropdownWrapper.find('.ant-dropdown-menu-item').first().simulate('click');
expect(handleChange.mock.calls[0][0]).toEqual([0, 1, 2, 3]);
});
it('render with default selection correctly', () => {
+ jest.useFakeTimers();
const rowSelection = {
selections: true,
};
- const wrapper = mount(createTable({ rowSelection }));
- const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
- expect(dropdownWrapper.render()).toMatchSnapshot();
+ const { container } = render(createTable({ rowSelection }));
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+ act(() => {
+ jest.runAllTimers();
+ });
+
+ expect(container.querySelector('.ant-dropdown')).toMatchSnapshot();
});
it('fires selectInvert event', () => {
@@ -368,33 +366,26 @@ describe('Table.rowSelection', () => {
onSelectInvert: handleSelectInvert,
selections: true,
};
- const wrapper = mount(createTable({ rowSelection }));
- const checkboxes = wrapper.find('input');
-
- checkboxes.at(1).simulate('change', { target: { checked: true } });
+ const { container } = render(createTable({ rowSelection }));
+ fireEvent.click(container.querySelectorAll('.ant-checkbox')[1]);
// Open
- wrapper.find('span.ant-dropdown-trigger').simulate('mouseEnter');
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
- // enzyme has bug for state sync.
- // Let fresh multiple times to force sync back.
- for (let i = 0; i < 3; i += 1) {
- act(() => {
- jest.runAllTimers();
- wrapper.update();
- });
- }
+ act(() => {
+ jest.runAllTimers();
+ });
- wrapper.find('li.ant-dropdown-menu-item').at(1).simulate('click');
+ fireEvent.click(container.querySelectorAll('li.ant-dropdown-menu-item')[1]);
expect(handleSelectInvert).toHaveBeenCalledWith([1, 2, 3]);
-
expect(order).toEqual(['onChange', 'onSelectInvert', 'onChange']);
jest.useRealTimers();
});
it('fires selectNone event', () => {
+ jest.useFakeTimers();
const order = [];
const handleChange = jest.fn().mockImplementation(() => {
order.push('onChange');
@@ -407,22 +398,23 @@ describe('Table.rowSelection', () => {
onSelectNone: handleSelectNone,
selections: true,
};
- const wrapper = mount(createTable({ rowSelection }));
- const checkboxes = wrapper.find('input');
-
- checkboxes.at(1).simulate('change', { target: { checked: true } });
+ const { container } = render(createTable({ rowSelection }));
+ fireEvent.click(container.querySelectorAll('.ant-checkbox')[1]);
// Open
- wrapper.find('Trigger').setState({ popupVisible: true });
-
- const dropdownWrapper = mount(wrapper.find('Trigger').first().instance().getComponent());
- dropdownWrapper.find('.ant-dropdown-menu-item').last().simulate('click');
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+ act(() => {
+ jest.runAllTimers();
+ });
+ const dropdownMenuItems = container.querySelectorAll('.ant-dropdown-menu-item');
+ fireEvent.click(dropdownMenuItems[dropdownMenuItems.length - 1]);
expect(handleSelectNone).toHaveBeenCalled();
expect(order).toEqual(['onChange', 'onSelectNone', 'onChange']);
});
it('fires selection event', () => {
+ jest.useFakeTimers();
const handleSelectOdd = jest.fn();
const handleSelectEven = jest.fn();
const rowSelection = {
@@ -441,18 +433,22 @@ describe('Table.rowSelection', () => {
},
],
};
- const wrapper = mount(createTable({ rowSelection }));
+ const { container } = render(createTable({ rowSelection }));
// Open
- wrapper.find('Trigger').setState({ popupVisible: true });
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+ act(() => {
+ jest.runAllTimers();
+ });
+
+ const dropdownMenuItems = container.querySelectorAll('.ant-dropdown-menu-item');
- const dropdownWrapper = mount(wrapper.find('Trigger').first().instance().getComponent());
- expect(dropdownWrapper.find('li.ant-dropdown-menu-item').length).toBe(4);
+ expect(dropdownMenuItems.length).toBe(4);
- dropdownWrapper.find('li.ant-dropdown-menu-item').at(2).simulate('click');
+ fireEvent.click(dropdownMenuItems[2]);
expect(handleSelectOdd).toHaveBeenCalledWith([0, 1, 2, 3]);
- dropdownWrapper.find('li.ant-dropdown-menu-item').at(3).simulate('click');
+ fireEvent.click(dropdownMenuItems[3]);
expect(handleSelectEven).toHaveBeenCalledWith([0, 1, 2, 3]);
});
@@ -466,8 +462,9 @@ describe('Table.rowSelection', () => {
const getCheckboxProps = record => record;
it('SELECTION_ALL', () => {
+ jest.useFakeTimers();
const onChange = jest.fn();
- const wrapper = mount(
+ const { container } = render(
createTable({
dataSource: presetData,
rowSelection: {
@@ -479,15 +476,20 @@ describe('Table.rowSelection', () => {
}),
);
- wrapper.find('Trigger').setState({ popupVisible: true });
- wrapper.find('li.ant-dropdown-menu-item').first().simulate('click');
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+
+ act(() => {
+ jest.runAllTimers();
+ });
+ fireEvent.click(container.querySelector('li.ant-dropdown-menu-item'));
expect(onChange).toHaveBeenCalledWith([0, 2], expect.anything(), { type: 'all' });
});
it('SELECTION_INVERT', () => {
+ jest.useFakeTimers();
const onChange = jest.fn();
- const wrapper = mount(
+ const { container } = render(
createTable({
dataSource: presetData,
rowSelection: {
@@ -499,15 +501,21 @@ describe('Table.rowSelection', () => {
}),
);
- wrapper.find('Trigger').setState({ popupVisible: true });
- wrapper.find('li.ant-dropdown-menu-item').first().simulate('click');
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+
+ act(() => {
+ jest.runAllTimers();
+ });
+
+ fireEvent.click(container.querySelector('li.ant-dropdown-menu-item'));
expect(onChange).toHaveBeenCalledWith([0], expect.anything(), { type: 'invert' });
});
it('SELECTION_NONE', () => {
+ jest.useFakeTimers();
const onChange = jest.fn();
- const wrapper = mount(
+ const { container } = render(
createTable({
dataSource: presetData,
rowSelection: {
@@ -519,8 +527,13 @@ describe('Table.rowSelection', () => {
}),
);
- wrapper.find('Trigger').setState({ popupVisible: true });
- wrapper.find('li.ant-dropdown-menu-item').first().simulate('click');
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+
+ act(() => {
+ jest.runAllTimers();
+ });
+
+ fireEvent.click(container.querySelector('li.ant-dropdown-menu-item'));
expect(onChange).toHaveBeenCalledWith([1], expect.anything(), { type: 'none' });
});
@@ -530,11 +543,12 @@ describe('Table.rowSelection', () => {
const rowSelection = {
hideSelectAll: true,
};
- const wrapper = mount(createTable({ rowSelection }));
- expect(wrapper.find('.ant-selection').exists()).toBeFalsy();
+ const { container } = render(createTable({ rowSelection }));
+ expect(container.querySelector('.ant-selection')).toBeFalsy();
});
it('handle custom selection onSelect correctly when hide default selection options', () => {
+ jest.useFakeTimers();
const handleSelectOdd = jest.fn();
const handleSelectEven = jest.fn();
const rowSelection = {
@@ -551,18 +565,21 @@ describe('Table.rowSelection', () => {
},
],
};
- const wrapper = mount(createTable({ rowSelection }));
+ const { container } = render(createTable({ rowSelection }));
// Open
- wrapper.find('Trigger').setState({ popupVisible: true });
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+ act(() => {
+ jest.runAllTimers();
+ });
- const dropdownWrapper = mount(wrapper.find('Trigger').first().instance().getComponent());
- expect(dropdownWrapper.find('li.ant-dropdown-menu-item').length).toBe(2);
+ const dropdownMenuItems = container.querySelectorAll('li.ant-dropdown-menu-item');
+ expect(dropdownMenuItems.length).toBe(2);
- dropdownWrapper.find('li.ant-dropdown-menu-item').at(0).simulate('click');
+ fireEvent.click(dropdownMenuItems[0]);
expect(handleSelectOdd).toHaveBeenCalledWith([0, 1, 2, 3]);
- dropdownWrapper.find('li.ant-dropdown-menu-item').at(1).simulate('click');
+ fireEvent.click(dropdownMenuItems[1]);
expect(handleSelectEven).toHaveBeenCalledWith([0, 1, 2, 3]);
});
@@ -571,14 +588,15 @@ describe('Table.rowSelection', () => {
const rowSelection = {
getCheckboxProps: record => ({ disabled: record.disabled }),
};
- const wrapper = mount(createTable({ rowSelection }));
+ const { container, rerender } = render(createTable({ rowSelection }));
const newData = [
{ key: 0, name: 'Jack', disabled: true },
{ key: 1, name: 'Lucy', disabled: true },
];
- wrapper.setProps({ dataSource: newData });
- wrapper.find('input').forEach(checkbox => {
- expect(checkbox.props().disabled).toBe(true);
+
+ rerender(createTable({ rowSelection, dataSource: newData }));
+ container.querySelectorAll('input').forEach(checkbox => {
+ expect(checkbox.disabled).toBe(true);
});
});
@@ -621,20 +639,16 @@ describe('Table.rowSelection', () => {
name: i.toString(),
});
}
- const wrapper = mount(
+ const { container } = render(
createTable({
rowSelection: {},
dataSource: newData,
}),
);
- wrapper.find('Pager').last().simulate('click'); // switch to second page
- wrapper.update();
- wrapper
- .find('input')
- .first()
- .simulate('change', { target: { checked: true } });
- wrapper.update();
- expect(renderedNames(wrapper)).toEqual([
+ fireEvent.click(container.querySelectorAll('.ant-pagination-item')[1]); // switch to second page
+ fireEvent.click(container.querySelector('.ant-checkbox'));
+
+ expect(renderedNames(container)).toEqual([
'10',
'11',
'12',
@@ -649,27 +663,27 @@ describe('Table.rowSelection', () => {
});
it('highlight selected row', () => {
- const wrapper = mount(createTable());
- wrapper
- .find('input')
- .at(1)
- .simulate('change', { target: { checked: true } });
- expect(wrapper.find('tbody tr').at(0).hasClass('ant-table-row-selected')).toBe(true);
+ const { container } = render(createTable());
+
+ fireEvent.click(container.querySelectorAll('input')[1]);
+ expect(
+ container.querySelectorAll('tbody tr')[0].className.includes('ant-table-row-selected'),
+ ).toBe(true);
});
it('fix selection column on the left', () => {
- const wrapper = mount(
+ const { asFragment } = render(
createTable({
rowSelection: { fixed: true },
scroll: { x: 903 },
}),
);
- expect(wrapper.render()).toMatchSnapshot();
+ expect(asFragment().firstChild).toMatchSnapshot();
});
it('fix expand on th left when selection column fixed on the left', () => {
- const wrapper = mount(
+ const { asFragment } = render(
createTable({
expandable: {
expandedRowRender() {
@@ -681,11 +695,11 @@ describe('Table.rowSelection', () => {
}),
);
- expect(wrapper.render()).toMatchSnapshot();
+ expect(asFragment().firstChild).toMatchSnapshot();
});
it('fix selection column on the left when any other column is fixed', () => {
- const wrapper = mount(
+ const { asFragment } = render(
createTable({
rowSelection: {},
columns: [
@@ -699,11 +713,11 @@ describe('Table.rowSelection', () => {
}),
);
- expect(wrapper.render()).toMatchSnapshot();
+ expect(asFragment().firstChild).toMatchSnapshot();
});
it('use column as selection column when key is `selection-column`', () => {
- const wrapper = mount(
+ const { asFragment } = render(
createTable({
rowSelection: {},
columns: [
@@ -716,12 +730,12 @@ describe('Table.rowSelection', () => {
}),
);
- expect(wrapper.render()).toMatchSnapshot();
+ expect(asFragment().firstChild).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/10629
it('should keep all checked state when remove item from dataSource', () => {
- const wrapper = mount(
+ const { container, rerender } = render(
{
dataSource={data}
/>,
);
- expect(wrapper.find(Checkbox).length).toBe(5);
- wrapper.find(Checkbox).forEach(checkbox => {
- expect(checkbox.props().checked).toBe(true);
- expect(checkbox.props().indeterminate).toBe(false);
- });
- wrapper.setProps({
- dataSource: data.slice(1),
- rowSelection: {
- selectedRowKeys: [1, 2, 3],
- },
+ const checkboxs = container.querySelectorAll('.ant-checkbox');
+ expect(checkboxs.length).toBe(5);
+ checkboxs.forEach(checkbox => {
+ expect(checkbox.querySelector('input').checked).toBe(true);
+ expect(checkbox.className.includes('ant-checkbox-indeterminate')).toBe(false);
});
- expect(wrapper.find(Checkbox).length).toBe(4);
- wrapper.find(Checkbox).forEach(checkbox => {
- expect(checkbox.props().checked).toBe(true);
- expect(checkbox.props().indeterminate).toBe(false);
+
+ rerender(
+ ,
+ );
+
+ expect(container.querySelectorAll('.ant-checkbox').length).toBe(4);
+ container.querySelectorAll('.ant-checkbox').forEach(checkbox => {
+ expect(checkbox.querySelector('input').checked).toBe(true);
+ expect(checkbox.className.includes('ant-checkbox-indeterminate')).toBe(false);
});
});
// https://github.com/ant-design/ant-design/issues/11042
it('add columnTitle for rowSelection', () => {
- const wrapper = mount(
+ const { container, rerender } = render(
{
}}
/>,
);
- expect(wrapper.find('thead tr th').at(0).text()).toBe('多选');
- wrapper.setProps({
- rowSelection: {
- type: 'radio',
- columnTitle: '单选',
- },
- });
- expect(wrapper.find('thead tr th').at(0).text()).toBe('单选');
+ expect(container.querySelector('thead tr th').textContent).toBe('多选');
+ rerender(
+ ,
+ );
+ expect(container.querySelector('thead tr th').textContent).toBe('单选');
});
// https://github.com/ant-design/ant-design/issues/11384
@@ -795,36 +819,43 @@ describe('Table.rowSelection', () => {
onChange,
};
- const wrapper = mount(
+ const { container } = render(
,
);
function clickFilter(indexList) {
indexList.forEach(index => {
- wrapper.find('.ant-dropdown-menu-item .ant-checkbox-wrapper').at(index).simulate('click');
+ // wrapper.find('.ant-dropdown-menu-item .ant-checkbox-wrapper').at(index).simulate('click');
+ fireEvent.click(
+ container.querySelectorAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')[index],
+ );
});
- wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
+ // wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
+ fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
}
function clickItem() {
- wrapper
- .find('tbody .ant-table-selection-column .ant-checkbox-input')
- .at(0)
- .simulate('change', {
- target: { checked: true },
- });
+ fireEvent.click(
+ container.querySelectorAll('tbody .ant-table-selection-column .ant-checkbox-input')[0],
+ );
+ // wrapper
+ // .find('tbody .ant-table-selection-column .ant-checkbox-input')
+ // .at(0)
+ // .simulate('change', {
+ // target: { checked: true },
+ // });
}
// Check Jack
clickFilter([0]);
- expect(wrapper.find('tbody tr').length).toBe(1);
+ expect(container.querySelectorAll('tbody tr').length).toBe(1);
clickItem();
expect(onChange.mock.calls[0][0].length).toBe(1);
expect(onChange.mock.calls[0][1].length).toBe(1);
// Check Lucy
clickFilter([0, 1]);
- expect(wrapper.find('tbody tr').length).toBe(1);
+ expect(container.querySelectorAll('tbody tr').length).toBe(1);
clickItem();
expect(onChange.mock.calls[1][0].length).toBe(2);
expect(onChange.mock.calls[1][1].length).toBe(2);
@@ -853,20 +884,20 @@ describe('Table.rowSelection', () => {
],
},
];
- const wrapper = mount(
+ const { container } = render(
,
);
- const checkboxes = wrapper.find('input');
-
- checkboxes.at(1).simulate('change', { target: { checked: true } });
- expect(wrapper.find('Checkbox').first().props()).toEqual(
- expect.objectContaining({ indeterminate: true, checked: false }),
- );
-
- checkboxes.at(2).simulate('change', { target: { checked: true } });
- expect(wrapper.find('Checkbox').first().props()).toEqual(
- expect.objectContaining({ indeterminate: false, checked: true }),
- );
+ const checkboxes = container.querySelectorAll('input');
+ const objectContaining = {};
+ fireEvent.click(checkboxes[1]);
+ objectContaining.checked = checkboxes[0].checked; // false
+ objectContaining.indeterminate = getIndeterminateSelection(container).length > 0; // true
+ expect.objectContaining(objectContaining);
+
+ fireEvent.click(checkboxes[2]);
+ objectContaining.checked = checkboxes[0].checked; // true
+ objectContaining.indeterminate = getIndeterminateSelection(container).length > 0; // false
+ expect.objectContaining(objectContaining);
});
// https://github.com/ant-design/ant-design/issues/16614
@@ -884,7 +915,7 @@ describe('Table.rowSelection', () => {
],
},
];
- const wrapper = mount(
+ const { container } = render(
{
expandedRowKeys={[1]}
/>,
);
- const checkboxes = wrapper.find('input');
- checkboxes.at(2).simulate('change', { target: { checked: true } });
+ const checkboxes = container.querySelectorAll('input');
+
+ fireEvent.click(checkboxes[2]);
+
expect(onChange).toHaveBeenLastCalledWith([11], [newDatas[0].list[0]], { type: 'single' });
onChange.mockReset();
- checkboxes.at(1).simulate('change', { target: { checked: true } });
+ fireEvent.click(checkboxes[1]);
const item0 = newDatas[0];
expect(onChange).toHaveBeenLastCalledWith([11, 1], [newDatas[0].list[0], item0], {
type: 'single',
@@ -911,7 +944,7 @@ describe('Table.rowSelection', () => {
{ id: 2, name: 'World', age: 30 },
];
- const wrapper = mount(
+ const { container, rerender } = render(
{
rowKey="id"
/>,
);
- const checkboxes = wrapper.find('input');
- checkboxes.at(1).simulate('change', { target: { checked: true } });
+ const checkboxes = container.querySelectorAll('input');
+ fireEvent.click(checkboxes[1]);
- expect(wrapper.find('tr.ant-table-row-selected').length).toBe(1);
+ expect(container.querySelectorAll('tr.ant-table-row-selected').length).toBe(1);
+
+ rerender(
+ null}
+ rowKey="id"
+ />,
+ );
- wrapper.setProps({ rowSelection: null });
- wrapper.update();
- expect(wrapper.find('tr.ant-table-row-selected').length).toBe(0);
+ expect(container.querySelectorAll('tr.ant-table-row-selected').length).toBe(0);
});
it('select by checkbox to trigger stopPropagation', () => {
- const wrapper = mount(createTable());
+ const { container } = render(createTable());
expect(() => {
- wrapper.find('span').at(10).simulate('click');
+ fireEvent.click(container.querySelectorAll('span')[10]);
}).not.toThrow();
});
it('all disabled should not make select all checked', () => {
- const wrapper = mount(
+ const { container } = render(
createTable({
rowSelection: {
getCheckboxProps: () => ({
@@ -948,12 +989,12 @@ describe('Table.rowSelection', () => {
}),
);
- expect(wrapper.find('thead .ant-checkbox-input').props().disabled).toBeTruthy();
- expect(wrapper.find('thead .ant-checkbox-input').props().checked).toBeFalsy();
+ expect(container.querySelector('thead .ant-checkbox-input').disabled).toBeTruthy();
+ expect(container.querySelector('thead .ant-checkbox-input').checked).toBeFalsy();
});
it('should make select all checked when each item is checked and disabled', () => {
- const wrapper = mount(
+ const { container } = render(
createTable({
rowSelection: {
selectedRowKeys: [0, 1, 2, 3],
@@ -964,12 +1005,12 @@ describe('Table.rowSelection', () => {
}),
);
- expect(wrapper.find('thead .ant-checkbox-input').props().disabled).toBeTruthy();
- expect(wrapper.find('thead .ant-checkbox-input').props().checked).toBeTruthy();
+ expect(container.querySelector('thead .ant-checkbox-input').disabled).toBeTruthy();
+ expect(container.querySelector('thead .ant-checkbox-input').checked).toBeTruthy();
});
it('should make select all indeterminated when each item is disabled and some item is checked', () => {
- const wrapper = mount(
+ const { container } = render(
createTable({
rowSelection: {
selectedRowKeys: [0],
@@ -980,15 +1021,15 @@ describe('Table.rowSelection', () => {
}),
);
- expect(wrapper.find('thead .ant-checkbox-input').props().disabled).toBeTruthy();
- expect(wrapper.find('thead .ant-checkbox-input').props().checked).toBeFalsy();
+ expect(container.querySelector('thead .ant-checkbox-input').disabled).toBeTruthy();
+ expect(container.querySelector('thead .ant-checkbox-input').checked).toBeFalsy();
expect(
- wrapper.find('thead .ant-checkbox-indeterminate.ant-checkbox-disabled').exists(),
+ container.querySelector('thead .ant-checkbox-indeterminate.ant-checkbox-disabled'),
).toBeTruthy();
});
it('should make select all checked when each item is checked and some item is disabled', () => {
- const wrapper = mount(
+ const { container } = render(
createTable({
rowSelection: {
selectedRowKeys: [0, 1, 2, 3],
@@ -999,12 +1040,12 @@ describe('Table.rowSelection', () => {
}),
);
- expect(wrapper.find('thead .ant-checkbox-input').props().disabled).toBeFalsy();
- expect(wrapper.find('thead .ant-checkbox-input').props().checked).toBeTruthy();
+ expect(container.querySelector('thead .ant-checkbox-input').disabled).toBeFalsy();
+ expect(container.querySelector('thead .ant-checkbox-input').checked).toBeTruthy();
});
it('should not make select all checked when some item is checked and disabled', () => {
- const wrapper = mount(
+ const { container } = render(
createTable({
rowSelection: {
selectedRowKeys: [1],
@@ -1015,23 +1056,23 @@ describe('Table.rowSelection', () => {
}),
);
- expect(wrapper.find('thead .ant-checkbox-input').props().disabled).toBeFalsy();
- expect(wrapper.find('thead .ant-checkbox-input').props().checked).toBeFalsy();
- expect(wrapper.find('thead .ant-checkbox-indeterminate').exists()).toBeTruthy();
+ expect(container.querySelector('thead .ant-checkbox-input').disabled).toBeFalsy();
+ expect(container.querySelector('thead .ant-checkbox-input').checked).toBeFalsy();
+ expect(container.querySelector('thead .ant-checkbox-indeterminate')).toBeTruthy();
});
it('should onRowClick not called when checkbox clicked', () => {
const onRowClick = jest.fn();
- const wrapper = mount(
+ const { container } = render(
createTable({
onRow: () => ({
onClick: onRowClick,
}),
}),
);
-
- wrapper.find('input').last().simulate('click');
+ const checkboxes = container.querySelectorAll('input');
+ fireEvent.click(checkboxes[checkboxes.length - 1]);
expect(onRowClick).not.toHaveBeenCalled();
});
@@ -1041,16 +1082,18 @@ describe('Table.rowSelection', () => {
selections: true,
};
const getPopupContainer = jest.fn(node => node);
- const wrapper = mount(
+ const { container } = render(
createTable({
rowSelection,
getPopupContainer,
}),
);
jest.useFakeTimers();
- wrapper.find('.ant-dropdown-trigger').simulate('mouseenter');
- jest.runAllTimers();
- expect(wrapper.render()).toMatchSnapshot();
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+ act(() => {
+ jest.runAllTimers();
+ });
+ expect(container.firstChild).toMatchSnapshot();
expect(getPopupContainer).toHaveBeenCalled();
});
@@ -1058,7 +1101,7 @@ describe('Table.rowSelection', () => {
const rowSelection = {
selections: true,
};
- const wrapper = mount(
+ const { container } = render(
node.parentNode}>
{createTable({
rowSelection,
@@ -1066,14 +1109,16 @@ describe('Table.rowSelection', () => {
,
);
jest.useFakeTimers();
- wrapper.find('.ant-dropdown-trigger').simulate('mouseenter');
- jest.runAllTimers();
- expect(wrapper.render()).toMatchSnapshot();
+ fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+ act(() => {
+ jest.runAllTimers();
+ });
+ expect(container.firstChild).toMatchSnapshot();
});
it('Table selection should check', () => {
const onChange = jest.fn();
- const wrapper = mount(
+ const { container } = render(
{
/>,
);
- wrapper
- .find('input')
- .last()
- .simulate('change', { target: { checked: true } });
+ const checkboxs = container.querySelectorAll('input');
+ fireEvent.click(checkboxs[checkboxs.length - 1]);
+
expect(onChange.mock.calls[0][1]).toEqual([expect.objectContaining({ name: 'bamboo' })]);
});
@@ -1139,16 +1183,19 @@ describe('Table.rowSelection', () => {
onChange,
},
});
- const wrapper = mount(table);
- const checkboxes = wrapper.find('input');
+ const { container } = render(table);
+ const checkboxes = container.querySelectorAll('input');
+
+ fireEvent.click(checkboxes[4]);
- checkboxes.at(4).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([3, 4, 5, 6, 7, 8, 9]);
- expect(getIndeterminateSelection(wrapper)).toEqual([]);
+ expect(getSelections(container)).toEqual([3, 4, 5, 6, 7, 8, 9]);
+ expect(getIndeterminateSelection(container)).toEqual([]);
expect(onChange.mock.calls[0][0]).toEqual([3, 4, 5, 6, 7, 8, 9]);
- checkboxes.at(7).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([4, 5]);
- expect(getIndeterminateSelection(wrapper)).toEqual([3]);
+
+ fireEvent.click(checkboxes[7]);
+
+ expect(getSelections(container)).toEqual([4, 5]);
+ expect(getIndeterminateSelection(container)).toEqual([3]);
expect(onChange.mock.calls[1][0]).toEqual([4, 5]);
});
it('use function rowkey', () => {
@@ -1162,12 +1209,20 @@ describe('Table.rowSelection', () => {
},
rowKey: entity => entity.name,
});
- const wrapper = mount(table);
- const checkboxes = wrapper.find('input');
+ const { container } = render(table);
+ const checkboxes = container.querySelectorAll('input');
- checkboxes.at(4).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([3, 4, 5, 6, 7, 8, 9]);
- expect(getIndeterminateSelection(wrapper)).toEqual([]);
+ fireEvent.click(checkboxes[4]);
+ expect(getSelections(container)).toEqual([
+ 'Jerry',
+ 'Jerry Jack',
+ 'Jerry Lucy',
+ 'Jerry Tom',
+ 'Jerry Tom Jack',
+ 'Jerry Tom Lucy',
+ 'Jerry Tom Tom',
+ ]);
+ expect(getIndeterminateSelection(container)).toEqual([]);
expect(onChange.mock.calls[0][0]).toEqual([
'Jerry',
'Jerry Jack',
@@ -1177,9 +1232,10 @@ describe('Table.rowSelection', () => {
'Jerry Tom Lucy',
'Jerry Tom Tom',
]);
- checkboxes.at(7).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([4, 5]);
- expect(getIndeterminateSelection(wrapper)).toEqual([3]);
+
+ fireEvent.click(checkboxes[7]);
+ expect(getSelections(container)).toEqual(['Jerry Jack', 'Jerry Lucy']);
+ expect(getIndeterminateSelection(container)).toEqual(['Jerry']);
expect(onChange.mock.calls[1][0]).toEqual(['Jerry Jack', 'Jerry Lucy']);
});
it('use string rowkey', () => {
@@ -1193,12 +1249,20 @@ describe('Table.rowSelection', () => {
},
rowKey: 'name',
});
- const wrapper = mount(table);
- const checkboxes = wrapper.find('input');
+ const { container } = render(table);
+ const checkboxes = container.querySelectorAll('input');
- checkboxes.at(4).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([3, 4, 5, 6, 7, 8, 9]);
- expect(getIndeterminateSelection(wrapper)).toEqual([]);
+ fireEvent.click(checkboxes[4]);
+ expect(getSelections(container)).toEqual([
+ 'Jerry',
+ 'Jerry Jack',
+ 'Jerry Lucy',
+ 'Jerry Tom',
+ 'Jerry Tom Jack',
+ 'Jerry Tom Lucy',
+ 'Jerry Tom Tom',
+ ]);
+ expect(getIndeterminateSelection(container)).toEqual([]);
expect(onChange.mock.calls[0][0]).toEqual([
'Jerry',
'Jerry Jack',
@@ -1208,9 +1272,10 @@ describe('Table.rowSelection', () => {
'Jerry Tom Lucy',
'Jerry Tom Tom',
]);
- checkboxes.at(7).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([4, 5]);
- expect(getIndeterminateSelection(wrapper)).toEqual([3]);
+
+ fireEvent.click(checkboxes[7]);
+ expect(getSelections(container)).toEqual(['Jerry Jack', 'Jerry Lucy']);
+ expect(getIndeterminateSelection(container)).toEqual(['Jerry']);
expect(onChange.mock.calls[1][0]).toEqual(['Jerry Jack', 'Jerry Lucy']);
});
it('initialized correctly', () => {
@@ -1223,9 +1288,9 @@ describe('Table.rowSelection', () => {
},
rowKey: 'key',
});
- const wrapper = mount(table);
- expect(getSelections(wrapper)).toEqual([6, 7, 8, 9]);
- expect(getIndeterminateSelection(wrapper)).toEqual([3]);
+ const { container } = render(table);
+ expect(getSelections(container)).toEqual([6, 7, 8, 9]);
+ expect(getIndeterminateSelection(container)).toEqual([3]);
});
it('works with disabled checkbox', () => {
const onChange = jest.fn();
@@ -1243,17 +1308,20 @@ describe('Table.rowSelection', () => {
},
},
});
- const wrapper = mount(table);
- const checkboxes = wrapper.find('input');
+ const { container } = render(table);
+
+ const checkboxes = container.querySelectorAll('input');
- checkboxes.at(10).simulate('change', { target: { checked: true } });
- checkboxes.at(4).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper).sort()).toEqual([3, 4, 5, 9]);
- expect(getIndeterminateSelection(wrapper)).toEqual([]);
+ fireEvent.click(checkboxes[10]);
+ fireEvent.click(checkboxes[4]);
+
+ expect(getSelections(container).sort()).toEqual([3, 4, 5, 9]);
+ expect(getIndeterminateSelection(container)).toEqual([]);
expect(Array.from(onChange.mock.calls[1][0]).sort()).toEqual([3, 4, 5, 9]);
- checkboxes.at(4).simulate('change', { target: { checked: false } });
- expect(getSelections(wrapper)).toEqual([9]);
- expect(getIndeterminateSelection(wrapper)).toEqual([]);
+
+ fireEvent.click(checkboxes[4]);
+ expect(getSelections(container)).toEqual([9]);
+ expect(getIndeterminateSelection(container)).toEqual([]);
expect(onChange.mock.calls[2][0]).toEqual([9]);
});
it('works with disabled checkbox and function rowkey', () => {
@@ -1273,22 +1341,28 @@ describe('Table.rowSelection', () => {
},
rowKey: entity => entity.name,
});
- const wrapper = mount(table);
- const checkboxes = wrapper.find('input');
+ const { container } = render(table);
+ const checkboxes = container.querySelectorAll('input');
- checkboxes.at(10).simulate('change', { target: { checked: true } });
- checkboxes.at(4).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper).sort()).toEqual([3, 4, 5, 9]);
- expect(getIndeterminateSelection(wrapper)).toEqual([]);
+ fireEvent.click(checkboxes[10]);
+ fireEvent.click(checkboxes[4]);
+ expect(getSelections(container)).toEqual([
+ 'Jerry',
+ 'Jerry Jack',
+ 'Jerry Lucy',
+ 'Jerry Tom Tom',
+ ]);
+ expect(getIndeterminateSelection(container)).toEqual([]);
expect(Array.from(onChange.mock.calls[1][0]).sort()).toEqual([
'Jerry',
'Jerry Jack',
'Jerry Lucy',
'Jerry Tom Tom',
]);
- checkboxes.at(4).simulate('change', { target: { checked: false } });
- expect(getSelections(wrapper)).toEqual([9]);
- expect(getIndeterminateSelection(wrapper)).toEqual([]);
+
+ fireEvent.click(checkboxes[4]);
+ expect(getSelections(container)).toEqual(['Jerry Tom Tom']);
+ expect(getIndeterminateSelection(container)).toEqual([]);
expect(onChange.mock.calls[2][0]).toEqual(['Jerry Tom Tom']);
});
it('works with disabled checkbox and string rowkey', () => {
@@ -1308,22 +1382,28 @@ describe('Table.rowSelection', () => {
},
rowKey: 'name',
});
- const wrapper = mount(table);
- const checkboxes = wrapper.find('input');
+ const { container } = render(table);
+ const checkboxes = container.querySelectorAll('input');
- checkboxes.at(10).simulate('change', { target: { checked: true } });
- checkboxes.at(4).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper).sort()).toEqual([3, 4, 5, 9]);
- expect(getIndeterminateSelection(wrapper)).toEqual([]);
+ fireEvent.click(checkboxes[10]);
+ fireEvent.click(checkboxes[4]);
+ expect(getSelections(container)).toEqual([
+ 'Jerry',
+ 'Jerry Jack',
+ 'Jerry Lucy',
+ 'Jerry Tom Tom',
+ ]);
+ expect(getIndeterminateSelection(container)).toEqual([]);
expect(Array.from(onChange.mock.calls[1][0]).sort()).toEqual([
'Jerry',
'Jerry Jack',
'Jerry Lucy',
'Jerry Tom Tom',
]);
- checkboxes.at(4).simulate('change', { target: { checked: false } });
- expect(getSelections(wrapper)).toEqual([9]);
- expect(getIndeterminateSelection(wrapper)).toEqual([]);
+
+ fireEvent.click(checkboxes[4]);
+ expect(getSelections(container)).toEqual(['Jerry Tom Tom']);
+ expect(getIndeterminateSelection(container)).toEqual([]);
expect(onChange.mock.calls[2][0]).toEqual(['Jerry Tom Tom']);
});
@@ -1350,17 +1430,17 @@ describe('Table.rowSelection', () => {
onChange,
},
});
- const wrapper = mount(table);
- const checkboxes = wrapper.find('input');
+ const { container } = render(table);
+ const checkboxes = container.querySelectorAll('input');
expect(checkboxes).toHaveLength(1 + 3);
- checkboxes.at(1).simulate('change', { target: { checked: true } });
- expect(getSelections(wrapper)).toEqual([0, 1, 2]);
+ fireEvent.click(checkboxes[1]);
+ expect(getSelections(container)).toEqual([0, 1, 2]);
});
});
it('warns when set `indeterminate` using `rowSelection.getCheckboxProps` is not allowed with tree structured data.', () => {
resetWarned();
- mount(
+ render(
createTable({
dataSource: dataWithChildren,
defaultExpandAllRows: true,
@@ -1383,7 +1463,7 @@ describe('Table.rowSelection', () => {
describe('cache with selected keys', () => {
it('default not cache', () => {
const onChange = jest.fn();
- const wrapper = mount(
+ const { container, rerender } = render(
{
/>,
);
- wrapper
- .find('tbody input')
- .first()
- .simulate('change', { target: { checked: true } });
+ fireEvent.click(container.querySelector('tbody input'));
expect(onChange).toHaveBeenCalledWith(['light'], [{ name: 'light' }], { type: 'single' });
-
- wrapper.setProps({ dataSource: [{ name: 'bamboo' }] });
- wrapper
- .find('tbody input')
- .first()
- .simulate('change', { target: { checked: true } });
+ rerender(
+ ,
+ );
+ fireEvent.click(container.querySelector('tbody input'));
expect(onChange).toHaveBeenCalledWith(['bamboo'], [{ name: 'bamboo' }], { type: 'single' });
});
it('cache with preserveSelectedRowKeys', () => {
const onChange = jest.fn();
- const wrapper = mount(
+ const { container, rerender } = render(
{
/>,
);
- wrapper
- .find('tbody input')
- .first()
- .simulate('change', { target: { checked: true } });
+ fireEvent.click(container.querySelector('tbody input'));
expect(onChange).toHaveBeenCalledWith(['light'], [{ name: 'light' }], { type: 'single' });
- wrapper.setProps({ dataSource: [{ name: 'bamboo' }] });
- wrapper
- .find('tbody input')
- .first()
- .simulate('change', { target: { checked: true } });
+ rerender(
+ ,
+ );
+ fireEvent.click(container.querySelector('tbody input'));
expect(onChange).toHaveBeenCalledWith(
['light', 'bamboo'],
[{ name: 'light' }, { name: 'bamboo' }],
@@ -1436,7 +1511,7 @@ describe('Table.rowSelection', () => {
it('works with receive selectedRowKeys fron [] to undefined', () => {
const onChange = jest.fn();
const dataSource = [{ name: 'Jack' }];
- const wrapper = mount(
+ const { container, rerender } = render(
{
/>,
);
- wrapper.setProps({ rowSelection: { onChange, selectedRowKeys: undefined } });
- wrapper
- .find('tbody input')
- .first()
- .simulate('change', { target: { checked: true } });
+ rerender(
+ ,
+ );
+
+ fireEvent.click(container.querySelector('tbody input'));
expect(onChange).toHaveBeenCalledWith(['Jack'], [{ name: 'Jack' }], { type: 'single' });
});
it('works with selectionType radio receive selectedRowKeys from [] to undefined', () => {
const onChange = jest.fn();
const dataSource = [{ name: 'Jack' }];
- const wrapper = mount(
+ const { container, rerender } = render(
,
);
+ rerender(
+ ,
+ );
- wrapper.setProps({ rowSelection: { onChange, selectedRowKeys: undefined, type: 'radio' } });
- wrapper
- .find('tbody input')
- .first()
- .simulate('change', { target: { checked: true } });
+ fireEvent.click(container.querySelector('tbody input'));
expect(onChange).toHaveBeenCalledWith(['Jack'], [{ name: 'Jack' }], { type: 'single' });
});
@@ -1479,7 +1561,7 @@ describe('Table.rowSelection', () => {
onChange,
selectedRowKeys: ['Jack'],
};
- const wrapper = mount(
+ const { container, rerender } = render(
{
/>,
);
- wrapper.setProps({
- dataSource: dataSource.slice(2, 4),
- });
- wrapper
- .find('tbody input')
- .first()
- .simulate('change', { target: { checked: true } });
+ rerender(
+ ,
+ );
+ fireEvent.click(container.querySelector('tbody input'));
expect(onChange).toHaveBeenCalledWith(
['Jack', 'Lucy'],
[{ name: 'Jack' }, { name: 'Lucy' }],
diff --git a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap b/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
index 2fb7edc9d62a..e773204a0049 100644
--- a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
@@ -976,7 +976,60 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
`;
-exports[`Table.rowSelection render with default selection correctly 1`] = ``;
+exports[`Table.rowSelection render with default selection correctly 1`] = `
+
+`;
exports[`Table.rowSelection should support getPopupContainer 1`] = `
tr > th,
tfoot > tr > td {
position: relative;
- padding: @table-padding-vertical-sm @table-padding-horizontal;
+ padding: @table-padding-vertical @table-padding-horizontal;
overflow-wrap: break-word;
}
@@ -90,7 +89,6 @@
position: relative;
color: @table-header-color;
font-weight: 500;
- font-size: 12px;
text-align: left;
background: @table-header-bg;
border-bottom: @border-width-base @border-style-base @table-border-color;
@@ -256,12 +254,14 @@
&-column-title {
position: relative;
z-index: 1;
+ flex: 1;
}
&-column-sorters {
display: flex;
flex: auto;
align-items: center;
+ justify-content: space-between;
&::after {
position: absolute;
@@ -276,12 +276,11 @@
}
&-column-sorter {
- display: flex;
- align-items: center;
margin-left: 4px;
color: @table-header-icon-color;
- font-size: 14px;
+ font-size: 0;
transition: color 0.3s;
+
&-inner {
display: inline-flex;
flex-direction: column;
@@ -290,7 +289,7 @@
&-up,
&-down {
- font-size: 14px;
+ font-size: 11px;
&.active {
color: @primary-color;
@@ -309,6 +308,7 @@
// ============================ Filter ============================
&-filter-column {
display: flex;
+ justify-content: space-between;
}
&-filter-trigger {
@@ -318,7 +318,7 @@
margin: -4px (-@table-padding-horizontal / 2) -4px 4px;
padding: 0 4px;
color: @table-header-icon-color;
- font-size: @font-size-base;
+ font-size: @font-size-sm;
border-radius: @border-radius-base;
cursor: pointer;
transition: all 0.3s;
diff --git a/components/tabs/__tests__/index.test.js b/components/tabs/__tests__/index.test.js
index 93033b2beb42..1e35bf00183b 100644
--- a/components/tabs/__tests__/index.test.js
+++ b/components/tabs/__tests__/index.test.js
@@ -1,3 +1,4 @@
+import React from 'react';
import Tabs from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
diff --git a/components/time-picker/__tests__/index.test.js b/components/time-picker/__tests__/index.test.js
index c22ae3b3e3ee..d6ac11a0c804 100644
--- a/components/time-picker/__tests__/index.test.js
+++ b/components/time-picker/__tests__/index.test.js
@@ -1,5 +1,6 @@
import { mount } from 'enzyme';
import moment from 'moment';
+import React from 'react';
import TimePicker from '..';
import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
diff --git a/components/tree/__tests__/index.test.js b/components/tree/__tests__/index.test.js
index 4a18e667aa3e..c5006f9ba4a9 100644
--- a/components/tree/__tests__/index.test.js
+++ b/components/tree/__tests__/index.test.js
@@ -1,3 +1,4 @@
+import React from 'react';
import { render } from '../../../tests/utils';
import Tree from '../index';
diff --git a/components/tree/__tests__/type.test.tsx b/components/tree/__tests__/type.test.tsx
index 4e3142c6f49e..ae5ff32b4f89 100644
--- a/components/tree/__tests__/type.test.tsx
+++ b/components/tree/__tests__/type.test.tsx
@@ -1,4 +1,5 @@
import type { BasicDataNode } from 'rc-tree';
+import React from 'react';
import { render } from '../../../tests/utils';
import Tree from '../index';
diff --git a/components/typography/__tests__/copy.test.tsx b/components/typography/__tests__/copy.test.tsx
index c9290ab90f86..1f4cd8ca33cf 100644
--- a/components/typography/__tests__/copy.test.tsx
+++ b/components/typography/__tests__/copy.test.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { SmileOutlined, LikeOutlined } from 'infra-design-icons';
import * as copyObj from 'copy-to-clipboard';
+import { LikeOutlined, SmileOutlined } from 'infra-design-icons';
+import React from 'react';
+import { fireEvent, render, waitFor } from '../../../tests/utils';
import Base from '../Base';
@@ -33,57 +33,69 @@ describe('Typography copy', () => {
}) {
it(name, async () => {
jest.useFakeTimers();
- const wrapper = mount(
+ const { container: wrapper, unmount } = render(
test copy
,
);
if (iconClassNames[0] !== undefined) {
- expect(wrapper.exists(iconClassNames[0])).toBeTruthy();
+ expect(wrapper.querySelector(iconClassNames[0])).not.toBeNull();
}
if (iconTexts[0] !== undefined) {
- expect(wrapper.find('.ant-typography-copy').at(0).text()).toBe(iconTexts[0]);
+ expect(wrapper.querySelectorAll('.ant-typography-copy')[0].textContent).toBe(
+ iconTexts[0],
+ );
}
- wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
+ fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-copy')[0]);
jest.runAllTimers();
- wrapper.update();
if (tooltipTexts[0] !== undefined) {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltipTexts[0]);
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(
+ tooltipTexts[0],
+ );
+ });
}
if (tooltipLength !== undefined) {
- expect(wrapper.find('.ant-tooltip-inner').length).toBe(tooltipLength);
+ await waitFor(() => {
+ expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(tooltipLength);
+ });
}
- wrapper.find('.ant-typography-copy').first().simulate('click');
+ fireEvent.click(wrapper.querySelectorAll('.ant-typography-copy')[0]);
jest.useRealTimers();
if (iconClassNames[1] !== undefined) {
- expect(wrapper.exists(iconClassNames[1])).toBeTruthy();
+ expect(wrapper.querySelector(iconClassNames[1])).not.toBeNull();
}
- wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
- wrapper.update();
+ fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-copy')[0]);
- wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
+ fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-copy')[0]);
if (tooltipTexts[1] !== undefined) {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltipTexts[1]);
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(
+ tooltipTexts[1],
+ );
+ });
}
if (iconTexts[1] !== undefined) {
- expect(wrapper.find('.ant-typography-copy').at(0).text()).toBe(iconTexts[1]);
+ expect(wrapper.querySelectorAll('.ant-typography-copy')[0].textContent).toBe(
+ iconTexts[1],
+ );
}
jest.useFakeTimers();
- wrapper.find('.ant-typography-copy').first().simulate('click');
+ fireEvent.click(wrapper.querySelectorAll('.ant-typography-copy')[0]);
jest.runAllTimers();
- wrapper.update();
- wrapper.unmount();
+ unmount();
jest.useRealTimers();
});
}
+
const dom = (
<>
12
@@ -197,14 +209,14 @@ describe('Typography copy', () => {
it('copy click event stopPropagation', () => {
const onDivClick = jest.fn();
- const wrapper = mount(
+ const { container: wrapper } = render(
test copy
,
);
- wrapper.find('.ant-typography-copy').first().simulate('click');
+ fireEvent.click(wrapper.querySelectorAll('.ant-typography-copy')[0]);
expect(onDivClick).not.toBeCalled();
});
@@ -212,12 +224,13 @@ describe('Typography copy', () => {
function onCopy(e: React.MouseEvent
) {
expect(e).not.toBeUndefined();
}
- const wrapper = mount(
+
+ const { container: wrapper } = render(
test copy
,
);
- wrapper.find('.ant-typography-copy').first().simulate('click');
+ fireEvent.click(wrapper.querySelectorAll('.ant-typography-copy')[0]);
});
it('copy to clipboard', done => {
@@ -237,13 +250,13 @@ describe('Typography copy', () => {
);
};
- const wrapper = mount();
- const copyBtn = wrapper.find('.ant-typography-copy').first();
- copyBtn.simulate('click');
+ const { container: wrapper } = render();
+ const copyBtn = wrapper.querySelectorAll('.ant-typography-copy')[0];
+ fireEvent.click(copyBtn);
expect(spy.mock.calls[0][0]).toEqual(originText);
setTimeout(() => {
spy.mockReset();
- copyBtn.simulate('click');
+ fireEvent.click(copyBtn);
expect(spy.mock.calls[0][0]).toEqual(nextText);
done();
}, 500);
diff --git a/components/typography/__tests__/ellipsis.test.js b/components/typography/__tests__/ellipsis.test.js
index 34173480db85..0439f2d46634 100644
--- a/components/typography/__tests__/ellipsis.test.js
+++ b/components/typography/__tests__/ellipsis.test.js
@@ -1,11 +1,8 @@
-import React from 'react';
-import { mount } from 'enzyme';
import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import React from 'react';
+import { fireEvent, render, sleep, triggerResize, waitFor } from '../../../tests/utils';
import Base from '../Base';
-import Typography from '../Typography';
-import { sleep } from '../../../tests/utils';
// eslint-disable-next-line no-unused-vars
-import * as styleChecker from '../../_util/styleChecker';
jest.mock('copy-to-clipboard');
@@ -53,47 +50,59 @@ describe('Typography.Ellipsis', () => {
'Bamboo is Little Light Bamboo is Little Light Bamboo is Little Light Bamboo is Little Light Bamboo is Little Light';
it('should trigger update', async () => {
+ const ref = React.createRef();
const onEllipsis = jest.fn();
- const wrapper = mount(
-
+ const {
+ container: wrapper,
+ rerender,
+ unmount,
+ } = render(
+
{fullStr}
,
);
- // First resize
- wrapper.triggerResize();
+ triggerResize(ref.current);
await sleep(20);
- wrapper.update();
- expect(wrapper.text()).toEqual('Bamboo is Little ...');
+
+ expect(wrapper.firstChild.textContent).toEqual('Bamboo is Little ...');
expect(onEllipsis).toHaveBeenCalledWith(true);
onEllipsis.mockReset();
// Second resize
- wrapper.setProps({ ellipsis: { rows: 2, onEllipsis } });
- await sleep(20);
- wrapper.update();
- expect(wrapper.text()).toEqual('Bamboo is Little Light Bamboo is Litt...');
+ rerender(
+
+ {fullStr}
+ ,
+ );
+ expect(wrapper.textContent).toEqual('Bamboo is Little Light Bamboo is Litt...');
expect(onEllipsis).not.toHaveBeenCalled();
// Third resize
- wrapper.setProps({ ellipsis: { rows: 99, onEllipsis } });
- await sleep(20);
- wrapper.update();
- expect(wrapper.find('p').text()).toEqual(fullStr);
+ rerender(
+
+ {fullStr}
+ ,
+ );
+ expect(wrapper.querySelector('p').textContent).toEqual(fullStr);
expect(onEllipsis).toHaveBeenCalledWith(false);
- wrapper.unmount();
+ unmount();
});
it('support css multiple lines', async () => {
- const wrapper = mount(
+ const { container: wrapper } = render(
{fullStr}
,
);
- expect(wrapper.exists('.ant-typography-ellipsis-multiple-line')).toBeTruthy();
- expect(wrapper.find(Typography).prop('style').WebkitLineClamp).toEqual(2);
+ expect(
+ wrapper.querySelectorAll('.ant-typography-ellipsis-multiple-line').length,
+ ).toBeGreaterThan(0);
+ expect(
+ wrapper.querySelector('.ant-typography-ellipsis-multiple-line').style.WebkitLineClamp,
+ ).toEqual('2');
});
it('string with parentheses', async () => {
@@ -105,71 +114,87 @@ describe('Typography.Ellipsis', () => {
design language for background applications, is refined by Ant UED Team.
Ant Design, a design language for background applications, is refined by
Ant UED Team.`;
+ const ref = React.createRef();
const onEllipsis = jest.fn();
- const wrapper = mount(
-
+ const { container: wrapper, unmount } = render(
+
{parenthesesStr}
,
);
- wrapper.triggerResize();
+ triggerResize(ref.current);
await sleep(20);
- wrapper.update();
- expect(wrapper.text()).toEqual('Ant Design, a des...');
- const ellipsisSpan = wrapper.find('span[aria-hidden]').last();
- expect(ellipsisSpan.text()).toEqual('...');
+
+ expect(wrapper.firstChild.textContent).toEqual('Ant Design, a des...');
+ const ellipsisSpans = wrapper.querySelectorAll('span[aria-hidden]');
+ expect(ellipsisSpans[ellipsisSpans.length - 1].textContent).toEqual('...');
onEllipsis.mockReset();
- wrapper.unmount();
+ unmount();
});
it('should middle ellipsis', async () => {
const suffix = '--suffix';
- const wrapper = mount(
-
+ const ref = React.createRef();
+ const { container: wrapper, unmount } = render(
+
{fullStr}
,
);
- wrapper.triggerResize();
+ triggerResize(ref.current);
await sleep(20);
- wrapper.update();
- expect(wrapper.find('p').text()).toEqual('Bamboo is...--suffix');
- wrapper.unmount();
+
+ expect(wrapper.querySelector('p').textContent).toEqual('Bamboo is...--suffix');
+ unmount();
});
it('should front or middle ellipsis', async () => {
const suffix = '--The information is very important';
- const wrapper = mount(
-
+ const ref = React.createRef();
+ const {
+ container: wrapper,
+ rerender,
+ unmount,
+ } = render(
+
{fullStr}
,
);
- wrapper.triggerResize();
+ triggerResize(ref.current);
await sleep(20);
- wrapper.update();
- expect(wrapper.find('p').text()).toEqual('...--The information is very important');
- wrapper.setProps({ ellipsis: { rows: 2, suffix } });
- await sleep(20);
- wrapper.update();
- expect(wrapper.find('p').text()).toEqual('Ba...--The information is very important');
+ expect(wrapper.querySelector('p').textContent).toEqual(
+ '...--The information is very important',
+ );
- wrapper.setProps({ ellipsis: { rows: 99, suffix } });
- await sleep(20);
- wrapper.update();
- expect(wrapper.find('p').text()).toEqual(fullStr + suffix);
+ rerender(
+
+ {fullStr}
+ ,
+ );
+ expect(wrapper.querySelector('p').textContent).toEqual(
+ 'Ba...--The information is very important',
+ );
- wrapper.unmount();
+ rerender(
+
+ {fullStr}
+ ,
+ );
+ expect(wrapper.querySelector('p').textContent).toEqual(fullStr + suffix);
+
+ unmount();
});
it('connect children', async () => {
const bamboo = 'Bamboo';
const is = ' is ';
- const wrapper = mount(
-
+ const ref = React.createRef();
+ const { container: wrapper } = render(
+
{bamboo}
{is}
Little
@@ -177,54 +202,49 @@ describe('Typography.Ellipsis', () => {
,
);
- wrapper.triggerResize();
+ triggerResize(ref.current);
await sleep(20);
- wrapper.update();
- expect(wrapper.text()).toEqual('Bamboo is Little...');
+ expect(wrapper.textContent).toEqual('Bamboo is Little...');
});
it('should expandable work', async () => {
const onExpand = jest.fn();
- const wrapper = mount(
+ const { container: wrapper } = render(
{fullStr}
,
);
- await sleep(20);
- wrapper.update();
-
- wrapper.find('.ant-typography-expand').simulate('click');
+ fireEvent.click(wrapper.querySelector('.ant-typography-expand'));
expect(onExpand).toHaveBeenCalled();
- await sleep(20);
- wrapper.update();
-
- expect(wrapper.find('p').text()).toEqual(fullStr);
+ expect(wrapper.querySelector('p').textContent).toEqual(fullStr);
});
it('should have custom expand style', async () => {
const symbol = 'more';
- const wrapper = mount(
+ const { container: wrapper } = render(
{fullStr}
,
);
- await sleep(20);
- wrapper.update();
- expect(wrapper.find('.ant-typography-expand').text()).toEqual('more');
+ expect(wrapper.querySelector('.ant-typography-expand').textContent).toEqual('more');
});
it('can use css ellipsis', () => {
- const wrapper = mount();
- expect(wrapper.find('.ant-typography-ellipsis-single-line').length).toBeTruthy();
+ const { container: wrapper } = render();
+ expect(wrapper.querySelectorAll('.ant-typography-ellipsis-single-line').length).toBeGreaterThan(
+ 0,
+ );
});
it('should calculate padding', () => {
- const wrapper = mount(
+ const { container: wrapper } = render(
,
);
- expect(wrapper.find('.ant-typography-ellipsis-single-line').length).toBeTruthy();
+ expect(wrapper.querySelectorAll('.ant-typography-ellipsis-single-line').length).toBeGreaterThan(
+ 0,
+ );
});
describe('should tooltip support', () => {
@@ -245,40 +265,52 @@ describe('Typography.Ellipsis', () => {
domSpy.mockRestore();
});
- function getWrapper(tooltip) {
- return mount(
-
+ async function getWrapper(tooltip) {
+ const ref = React.createRef();
+ const wrapper = render(
+
{fullStr}
,
);
+ triggerResize(ref.current);
+ await sleep(20);
+ return wrapper;
}
it('boolean', async () => {
- const wrapper = getWrapper(true);
- await sleep(20);
- wrapper.update();
-
- expect(wrapper.find('Tooltip').prop('title')).toEqual(fullStr);
+ const { container, baseElement } = await getWrapper(true);
+ fireEvent.mouseEnter(container.firstChild);
+ await waitFor(() => {
+ expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
+ });
});
it('customize', async () => {
- const wrapper = getWrapper('Bamboo is Light');
- await sleep(20);
- wrapper.update();
-
- expect(wrapper.find('Tooltip').prop('title')).toEqual('Bamboo is Light');
+ const { container, baseElement } = await getWrapper('Bamboo is Light');
+ fireEvent.mouseEnter(container.firstChild);
+ await waitFor(() => {
+ expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
+ });
});
});
it('js ellipsis should show aria-label', () => {
- const titleWrapper = mount();
- expect(titleWrapper.find('.ant-typography').prop('aria-label')).toEqual('bamboo');
+ const { container: titleWrapper } = render(
+ ,
+ );
+ expect(titleWrapper.querySelector('.ant-typography').getAttribute('aria-label')).toEqual(
+ 'bamboo',
+ );
- const tooltipWrapper = mount();
- expect(tooltipWrapper.find('.ant-typography').prop('aria-label')).toEqual('little');
+ const { container: tooltipWrapper } = render(
+ ,
+ );
+ expect(tooltipWrapper.querySelector('.ant-typography').getAttribute('aria-label')).toEqual(
+ 'little',
+ );
});
- it('should display tooltip if line clamp', () => {
+ it('should display tooltip if line clamp', async () => {
mockRectSpy = spyElementPrototypes(HTMLElement, {
scrollHeight: {
get() {
@@ -299,12 +331,19 @@ describe('Typography.Ellipsis', () => {
},
});
- const wrapper = mount(
-
+ const ref = React.createRef();
+ const { container: wrapper, baseElement } = render(
+
Ant Design, a design language for background applications, is refined by Ant UED Team.
,
);
- expect(wrapper.find('EllipsisTooltip').prop('isEllipsis')).toBeTruthy();
+ triggerResize(ref.current);
+ await sleep(20);
+
+ fireEvent.mouseEnter(wrapper.firstChild);
+ await waitFor(() => {
+ expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
+ });
mockRectSpy.mockRestore();
});
});
diff --git a/components/typography/__tests__/enter-key-callback.test.tsx b/components/typography/__tests__/enter-key-callback.test.tsx
index 21d8d8643244..eeb5a2a8cbcc 100644
--- a/components/typography/__tests__/enter-key-callback.test.tsx
+++ b/components/typography/__tests__/enter-key-callback.test.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import { mount } from 'enzyme';
import KeyCode from 'rc-util/lib/KeyCode';
+import React from 'react';
+import { fireEvent, render } from '../../../tests/utils';
import Paragraph from '../Paragraph';
test('Callback on enter key is triggered', () => {
const onEditStart = jest.fn();
const onCopy = jest.fn();
- const wrapper = mount(
+ const { container: wrapper } = render(
{
jest.spyOn(window, 'setTimeout').mockReturnValue(timer);
jest.spyOn(window, 'clearTimeout');
// must copy first, because editing button will hide copy button
- wrapper.find('.ant-typography-copy').at(0).simulate('keyup', { keyCode: KeyCode.ENTER });
- wrapper.find('.anticon-edit').at(0).simulate('keyup', { keyCode: KeyCode.ENTER });
+ fireEvent.keyUp(wrapper.querySelectorAll('.ant-typography-copy')[0], { keyCode: KeyCode.ENTER });
+ fireEvent.keyUp(wrapper.querySelectorAll('.anticon-edit')[0], { keyCode: KeyCode.ENTER });
expect(onEditStart.mock.calls.length).toBe(1);
expect(onCopy.mock.calls.length).toBe(1);
diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js
index 95bebab88db3..b63a33ee432b 100644
--- a/components/typography/__tests__/index.test.js
+++ b/components/typography/__tests__/index.test.js
@@ -1,13 +1,11 @@
+import { CheckOutlined, HighlightOutlined, LikeOutlined, SmileOutlined } from '@ant-design/icons';
import copy from 'copy-to-clipboard';
-import { mount } from 'enzyme';
-import { CheckOutlined, HighlightOutlined, LikeOutlined, SmileOutlined } from 'infra-design-icons';
import KeyCode from 'rc-util/lib/KeyCode';
-import { spyElementPrototype } from 'rc-util/lib/test/domHook';
import { resetWarned } from 'rc-util/lib/warning';
import React from 'react';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
-import { render, sleep } from '../../../tests/utils';
+import { fireEvent, render, sleep, waitFor } from '../../../tests/utils';
import Base from '../Base';
import Link from '../Link';
import Paragraph from '../Paragraph';
@@ -79,7 +77,7 @@ describe('Typography', () => {
describe('Title', () => {
it('warning if `level` not correct', () => {
- mount();
+ render();
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Typography.Title] Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.',
@@ -93,47 +91,57 @@ describe('Typography', () => {
it(name, async () => {
jest.useFakeTimers();
const onCopy = jest.fn();
- const wrapper = mount(
+ const { container: wrapper, unmount } = render(
test copy
,
);
if (icon) {
- expect(wrapper.find('.anticon-smile').length).toBeTruthy();
+ expect(wrapper.querySelectorAll('.anticon-smile').length).toBeGreaterThan(0);
} else {
- expect(wrapper.find('.anticon-copy').length).toBeTruthy();
+ expect(wrapper.querySelectorAll('.anticon-copy').length).toBeGreaterThan(0);
}
- wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
+ fireEvent.mouseEnter(wrapper.querySelector('.ant-typography-copy'));
jest.runAllTimers();
- wrapper.update();
if (tooltips === undefined || tooltips === true) {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe('Copy');
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe('Copy');
+ });
} else if (tooltips === false) {
- expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
+ await waitFor(() => {
+ expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
+ });
} else if (tooltips[0] === '' && tooltips[1] === '') {
- expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
+ await waitFor(() => {
+ expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
+ });
} else if (tooltips[0] === '' && tooltips[1]) {
- expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
+ await waitFor(() => {
+ expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
+ });
} else if (tooltips[1] === '' && tooltips[0]) {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltips[0]);
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe(tooltips[0]);
+ });
} else {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltips[0]);
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe(tooltips[0]);
+ });
}
- wrapper.find('.ant-typography-copy').first().simulate('click');
+ fireEvent.click(wrapper.querySelector('.ant-typography-copy'));
jest.useRealTimers();
- wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
- // tooltips 为 ['', 'xxx'] 时,切换时需要延时 mousenEnterDelay 的时长
+ fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-copy')[0]);
+ // tooltips 为 ['', 'xxx'] 时,切换时需要延时 mouseEnterDelay 的时长
if (tooltips && tooltips[0] === '' && tooltips[1]) {
await sleep(150);
}
expect(copy.lastStr).toEqual(target);
expect(copy.lastOptions.format).toEqual(format);
- wrapper.update();
expect(onCopy).toHaveBeenCalled();
let copiedIcon = '.anticon-check';
@@ -143,31 +151,43 @@ describe('Typography', () => {
copiedIcon = '.anticon-check';
}
- expect(wrapper.find(copiedIcon).length).toBeTruthy();
- wrapper.find('.ant-typography-copy').first().simulate('mouseenter');
+ expect(wrapper.querySelectorAll(copiedIcon).length).toBeGreaterThan(0);
+ fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-copy')[0]);
if (tooltips === undefined || tooltips === true) {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe('Copied');
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe('Copied');
+ });
} else if (tooltips === false) {
- expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
+ await waitFor(() => {
+ expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
+ });
} else if (tooltips[0] === '' && tooltips[1] === '') {
- expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
+ await waitFor(() => {
+ expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
+ });
} else if (tooltips[0] === '' && tooltips[1]) {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltips[1]);
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe(tooltips[1]);
+ });
} else if (tooltips[1] === '' && tooltips[0]) {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe('');
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe('');
+ });
} else {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltips[1]);
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe(tooltips[1]);
+ });
}
jest.useFakeTimers();
- wrapper.find('.ant-typography-copy').first().simulate('click');
+ fireEvent.click(wrapper.querySelectorAll('.ant-typography-copy')[0]);
jest.runAllTimers();
- wrapper.update();
// Will set back when 3 seconds pass
- expect(wrapper.find(copiedIcon).length).toBeFalsy();
- wrapper.unmount();
+ await sleep(3000);
+ expect(wrapper.querySelectorAll(copiedIcon).length).toBe(0);
+ unmount();
jest.useRealTimers();
});
}
@@ -221,15 +241,15 @@ describe('Typography', () => {
submitFunc,
expectFunc,
) {
- it(name, () => {
+ it(name, async () => {
jest.useFakeTimers();
const onStart = jest.fn();
const onChange = jest.fn();
const className = 'test';
- const style = {};
+ const style = { padding: 'unset' };
- const wrapper = mount(
+ const { container: wrapper } = render(
{
if (triggerType === undefined || triggerType.indexOf('icon') !== -1) {
if (icon) {
- expect(wrapper.find('.anticon-highlight').length).toBeTruthy();
+ expect(wrapper.querySelectorAll('.anticon-highlight').length).toBeGreaterThan(0);
} else {
- expect(wrapper.find('.anticon-edit').length).toBeTruthy();
+ expect(wrapper.querySelectorAll('.anticon-edit').length).toBeGreaterThan(0);
}
if (triggerType === undefined || triggerType.indexOf('text') === -1) {
- wrapper.simulate('click');
+ fireEvent.click(wrapper.firstChild);
expect(onStart).not.toHaveBeenCalled();
}
- wrapper.find('.ant-typography-edit').first().simulate('mouseenter');
+ fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-edit')[0]);
jest.runAllTimers();
- wrapper.update();
if (tooltip === undefined || tooltip === true) {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe('Edit');
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe('Edit');
+ });
} else if (tooltip === false) {
- expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
+ await waitFor(() => {
+ expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
+ });
} else {
- expect(wrapper.find('.ant-tooltip-inner').text()).toBe(tooltip);
+ await waitFor(() => {
+ expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe(tooltip);
+ });
}
- wrapper.find('.ant-typography-edit').first().simulate('click');
+ fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
expect(onStart).toHaveBeenCalled();
if (triggerType !== undefined && triggerType.indexOf('text') !== -1) {
- wrapper.find('textarea').simulate('keyDown', { keyCode: KeyCode.ESC });
- wrapper.find('textarea').simulate('keyUp', { keyCode: KeyCode.ESC });
+ fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
+ fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
expect(onChange).not.toHaveBeenCalled();
}
}
if (triggerType !== undefined && triggerType.indexOf('text') !== -1) {
if (triggerType.indexOf('icon') === -1) {
- expect(wrapper.find('.anticon-highlight').length).toBeFalsy();
- expect(wrapper.find('.anticon-edit').length).toBeFalsy();
+ expect(wrapper.querySelectorAll('.anticon-highlight').length).toBe(0);
+ expect(wrapper.querySelectorAll('.anticon-edit').length).toBe(0);
}
- wrapper.simulate('click');
+ fireEvent.click(wrapper.firstChild);
expect(onStart).toHaveBeenCalled();
}
// Should have className
- const props = wrapper.find('div').first().props();
- expect(props.style).toEqual(style);
+ const props = wrapper.querySelectorAll('div')[0];
+ expect(props.getAttribute('style')).toContain('padding: unset');
expect(props.className.includes(className)).toBeTruthy();
- wrapper.find('textarea').simulate('change', {
+ fireEvent.change(wrapper.querySelector('textarea'), {
target: { value: 'Bamboo' },
});
if (enterIcon === undefined) {
expect(
- wrapper.find('span.ant-typography-edit-content-confirm').first().props().className,
+ wrapper.querySelectorAll('span.ant-typography-edit-content-confirm')[0].className,
).toContain('anticon-enter');
} else if (enterIcon === null) {
- expect(wrapper.find('span.ant-typography-edit-content-confirm').length).toBe(0);
+ expect(
+ wrapper.querySelectorAll('span.ant-typography-edit-content-confirm').length,
+ ).toBe(0);
} else {
expect(
- wrapper.find('span.ant-typography-edit-content-confirm').first().props().className,
+ wrapper.querySelectorAll('span.ant-typography-edit-content-confirm')[0].className,
).not.toContain('anticon-enter');
}
@@ -319,21 +346,21 @@ describe('Typography', () => {
testStep({ name: 'by key up' }, wrapper => {
// Not trigger when inComposition
- wrapper.find('textarea').simulate('compositionStart');
- wrapper.find('textarea').simulate('keyDown', { keyCode: KeyCode.ENTER });
- wrapper.find('textarea').simulate('compositionEnd');
- wrapper.find('textarea').simulate('keyUp', { keyCode: KeyCode.ENTER });
+ fireEvent.compositionStart(wrapper.querySelector('textarea'));
+ fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
+ fireEvent.compositionEnd(wrapper.querySelector('textarea'));
+ fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
// Now trigger
- wrapper.find('textarea').simulate('keyDown', { keyCode: KeyCode.ENTER });
- wrapper.find('textarea').simulate('keyUp', { keyCode: KeyCode.ENTER });
+ fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
+ fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
});
testStep(
{ name: 'by esc key' },
wrapper => {
- wrapper.find('textarea').simulate('keyDown', { keyCode: KeyCode.ESC });
- wrapper.find('textarea').simulate('keyUp', { keyCode: KeyCode.ESC });
+ fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
+ fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
},
onChange => {
// eslint-disable-next-line jest/no-standalone-expect
@@ -342,7 +369,7 @@ describe('Typography', () => {
);
testStep({ name: 'by blur' }, wrapper => {
- wrapper.find('textarea').simulate('blur');
+ fireEvent.blur(wrapper.querySelector('textarea'));
});
testStep({ name: 'customize edit icon', icon: });
@@ -359,47 +386,51 @@ describe('Typography', () => {
it('should trigger onEnd when type Enter', () => {
const onEnd = jest.fn();
- const wrapper = mount(Bamboo);
- wrapper.find('.ant-typography-edit').first().simulate('click');
- wrapper.find('textarea').simulate('keyDown', { keyCode: KeyCode.ENTER });
- wrapper.find('textarea').simulate('keyUp', { keyCode: KeyCode.ENTER });
+ const { container: wrapper } = render(Bamboo);
+ fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
+ fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
+ fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
expect(onEnd).toHaveBeenCalledTimes(1);
});
it('should trigger onCancel when type ESC', () => {
const onCancel = jest.fn();
- const wrapper = mount(Bamboo);
- wrapper.find('.ant-typography-edit').first().simulate('click');
- wrapper.find('textarea').simulate('keyDown', { keyCode: KeyCode.ESC });
- wrapper.find('textarea').simulate('keyUp', { keyCode: KeyCode.ESC });
+ const { container: wrapper } = render(
+ Bamboo,
+ );
+ fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
+ fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
+ fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
expect(onCancel).toHaveBeenCalledTimes(1);
});
it('should only trigger focus on the first time', () => {
let triggerTimes = 0;
- const mockFocus = spyElementPrototype(HTMLElement, 'focus', () => {
+ const { container: wrapper } = render(Bamboo);
+ const editIcon = wrapper.querySelectorAll('.ant-typography-edit')[0];
+
+ editIcon.addEventListener('focus', () => {
triggerTimes += 1;
});
- const wrapper = mount(Bamboo);
+ fireEvent.focus(editIcon);
+ expect(triggerTimes).toEqual(1);
- wrapper.find('.ant-typography-edit').first().simulate('click');
+ fireEvent.click(editIcon);
expect(triggerTimes).toEqual(1);
- wrapper.find('textarea').simulate('change', {
+ fireEvent.change(wrapper.querySelector('textarea'), {
target: { value: 'good' },
});
expect(triggerTimes).toEqual(1);
-
- mockFocus.mockRestore();
});
});
it('should focus at the end of textarea', () => {
- const wrapper = mount(content);
- wrapper.find('.ant-typography-edit').first().simulate('click');
- const textareaNode = wrapper.find('textarea').getDOMNode();
+ const { container: wrapper } = render(content);
+ fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
+ const textareaNode = wrapper.querySelector('textarea');
expect(textareaNode.selectionStart).toBe(7);
expect(textareaNode.selectionEnd).toBe(7);
});
@@ -407,7 +438,7 @@ describe('Typography', () => {
it('warning if use setContentRef', () => {
const refFunc = () => {};
- mount();
+ render();
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Typography] `setContentRef` is deprecated. Please use `ref` instead.',
);
@@ -423,21 +454,21 @@ describe('Typography', () => {
it('should get HTMLHeadingElement ref from Title', () => {
const ref = React.createRef();
- mount();
+ render();
expect(ref.current instanceof HTMLHeadingElement).toBe(true);
});
it('should get HTMLDivElement ref from Paragraph', () => {
const ref = React.createRef();
- mount();
+ render();
expect(ref.current instanceof HTMLDivElement).toBe(true);
});
it('should get HTMLSpanElement ref from Text', () => {
const ref = React.createRef();
- mount();
+ render();
expect(ref.current instanceof HTMLSpanElement).toBe(true);
});
});
diff --git a/package.json b/package.json
index 0defbe620145..e1f6eb1f8715 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
"dependencies": {
"@ant-design/colors": "^6.0.0",
"@ant-design/icons": "^4.7.0",
- "@ant-design/react-slick": "~0.28.1",
+ "@ant-design/react-slick": "~0.29.1",
"@babel/runtime": "^7.12.5",
"@ctrl/tinycolor": "^3.4.0",
"axios": "^0.26.0",
@@ -127,11 +127,11 @@
"rc-cascader": "~3.6.0",
"rc-checkbox": "~2.3.0",
"rc-collapse": "~3.3.0",
- "rc-dialog": "~8.8.2",
+ "rc-dialog": "~8.9.0",
"rc-drawer": "~4.4.2",
"rc-dropdown": "~4.0.0",
"rc-field-form": "~1.26.1",
- "rc-image": "~5.6.0",
+ "rc-image": "~5.7.0",
"rc-input": "~0.0.1-alpha.5",
"rc-input-number": "~7.3.0",
"rc-mentions": "~1.8.0",
@@ -160,11 +160,10 @@
"scroll-into-view-if-needed": "^2.2.25"
},
"devDependencies": {
- "@ant-design/bisheng-plugin": "^3.2.0",
+ "@ant-design/bisheng-plugin": "^3.3.0-alpha.4",
"@ant-design/hitu": "^0.0.0-alpha.13",
- "@ant-design/jest-image-snapshot": "^4.5.2",
"@docsearch/css": "^3.0.0",
- "@infra-fe/tools": "^15.0.2",
+ "@infra-fe/tools": "^15.0.3",
"@qixian.cs/github-contributors-list": "^1.0.3",
"@stackblitz/sdk": "^1.3.0",
"@testing-library/jest-dom": "^5.16.3",
@@ -193,7 +192,7 @@
"antd-img-crop": "^4.0.0",
"array-move": "^4.0.0",
"babel-plugin-add-react-displayname": "^0.0.5",
- "bisheng": "^3.5.0",
+ "bisheng": "^3.7.0-alpha.4",
"bisheng-plugin-description": "^0.1.4",
"bisheng-plugin-react": "^1.2.0",
"bisheng-plugin-toc": "^0.4.4",
@@ -277,7 +276,6 @@
"react-router-dom": "^6.0.2",
"react-sortable-hoc": "^2.0.0",
"react-sticky": "^6.0.3",
- "react-text-loop-next": "0.0.3",
"react-window": "^1.8.5",
"remark": "^14.0.1",
"remark-cli": "^10.0.0",
@@ -288,10 +286,10 @@
"scrollama": "^3.0.0",
"semver": "^7.3.5",
"simple-git": "^3.0.0",
- "stylelint": "14.8.3",
+ "stylelint": "^14.9.0",
"stylelint-config-prettier": "^9.0.2",
"stylelint-config-rational-order": "^0.1.2",
- "stylelint-config-standard": "^25.0.0",
+ "stylelint-config-standard": "^26.0.0",
"stylelint-declaration-block-no-ignored-properties": "^2.1.0",
"stylelint-order": "^5.0.0",
"theme-switcher": "^1.0.2",
diff --git a/tsconfig.json b/tsconfig.json
index 2a20159f4ba6..ba665f32f07d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,9 @@
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true,
- "jsx": "preserve",
+ "jsx": "react",
+ "jsxFactory": "React.createElement",
+ "jsxFragmentFactory": "React.Fragment",
"noUnusedParameters": true,
"noUnusedLocals": true,
"noImplicitAny": true,