mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 01:13:58 +08:00
test: wrap React.StrictMode for test cases (#35026)
* test: React StrictMode * test: fix Spin test * chore: wrapper enzyme * test: fix setState * test: more test cover * test: more test cover * test: more test cover * test: more test cover * test: more test cover * test: more test case * test: more test case * test: more test case * test: more test case * test: more test case * test: more test case * test: more test case * test: more test case * test: more test case * test: more test case * test: more test case * test: more test case * test: disable part of it * test: fix test & add placeholder * test: Use orign enzyme mount Co-authored-by: zombiej <smith3816@gmail.com>
This commit is contained in:
afc163
GitHub
parent
2e0aed92f4
commit
30ac6bd4e4
@ -148,7 +148,9 @@ describe('Test utils function', () => {
|
||||
button
|
||||
</button>
|
||||
</Wave>,
|
||||
).instance();
|
||||
)
|
||||
.find(Wave)
|
||||
.instance();
|
||||
expect(wrapper.bindAnimationEvent()).toBe(undefined);
|
||||
});
|
||||
|
||||
@ -159,7 +161,9 @@ describe('Test utils function', () => {
|
||||
button
|
||||
</button>
|
||||
</Wave>,
|
||||
).instance();
|
||||
)
|
||||
.find(Wave)
|
||||
.instance();
|
||||
expect(wrapper.bindAnimationEvent()).toBe(undefined);
|
||||
});
|
||||
|
||||
@ -168,7 +172,9 @@ describe('Test utils function', () => {
|
||||
<Wave>
|
||||
<input />
|
||||
</Wave>,
|
||||
).instance();
|
||||
)
|
||||
.find(Wave)
|
||||
.instance();
|
||||
expect(wrapper.bindAnimationEvent()).toBe(undefined);
|
||||
});
|
||||
|
||||
|
||||
@ -4,4 +4,9 @@ export { resetWarned };
|
||||
|
||||
export default (valid: boolean, component: string, message: string): void => {
|
||||
devWarning(valid, `[antd: ${component}] ${message}`);
|
||||
|
||||
// StrictMode will inject console which will not throw warning in React 17.
|
||||
if (process.env.NODE_ENV === 'test') {
|
||||
resetWarned();
|
||||
}
|
||||
};
|
||||
|
||||
@ -5,7 +5,7 @@ import { getObserverEntities } from '../utils';
|
||||
import Button from '../../button';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import accessibilityTest from '../../../tests/shared/accessibilityTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render } from '../../../tests/utils';
|
||||
|
||||
const events: Partial<Record<keyof HTMLElementEventMap, (ev: Partial<Event>) => void>> = {};
|
||||
|
||||
@ -97,57 +97,47 @@ describe('Affix Render', () => {
|
||||
};
|
||||
|
||||
it('Anchor render perfectly', async () => {
|
||||
document.body.innerHTML = '<div id="mounter" />';
|
||||
|
||||
affixMounterWrapper = mount(<AffixMounter />, { attachTo: document.getElementById('mounter') });
|
||||
const { container } = render(<AffixMounter />);
|
||||
await sleep(20);
|
||||
|
||||
await movePlaceholder(0);
|
||||
expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeFalsy();
|
||||
expect(container.querySelector('.ant-affix')).toBeFalsy();
|
||||
|
||||
await movePlaceholder(-100);
|
||||
expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
|
||||
expect(container.querySelector('.ant-affix')).toBeTruthy();
|
||||
|
||||
await movePlaceholder(0);
|
||||
expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeFalsy();
|
||||
expect(container.querySelector('.ant-affix')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('support offsetBottom', async () => {
|
||||
document.body.innerHTML = '<div id="mounter" />';
|
||||
|
||||
affixMounterWrapper = mount(<AffixMounter offsetBottom={0} />, {
|
||||
attachTo: document.getElementById('mounter'),
|
||||
});
|
||||
const { container } = render(<AffixMounter offsetBottom={0} />);
|
||||
|
||||
await sleep(20);
|
||||
|
||||
await movePlaceholder(300);
|
||||
expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
|
||||
expect(container.querySelector('.ant-affix')).toBeTruthy();
|
||||
|
||||
await movePlaceholder(0);
|
||||
expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeFalsy();
|
||||
expect(container.querySelector('.ant-affix')).toBeFalsy();
|
||||
|
||||
await movePlaceholder(300);
|
||||
expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
|
||||
expect(container.querySelector('.ant-affix')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('updatePosition when offsetTop changed', async () => {
|
||||
document.body.innerHTML = '<div id="mounter" />';
|
||||
const onChange = jest.fn();
|
||||
|
||||
affixMounterWrapper = mount(<AffixMounter offsetTop={0} onChange={onChange} />, {
|
||||
attachTo: document.getElementById('mounter'),
|
||||
});
|
||||
const { container, rerender } = render(<AffixMounter offsetTop={0} onChange={onChange} />);
|
||||
await sleep(20);
|
||||
|
||||
await movePlaceholder(-100);
|
||||
expect(onChange).toHaveBeenLastCalledWith(true);
|
||||
expect(affixMounterWrapper.instance().affix.state.affixStyle?.top).toBe(0);
|
||||
affixMounterWrapper.setProps({
|
||||
offsetTop: 10,
|
||||
});
|
||||
expect(container.querySelector('.ant-affix')).toHaveStyle({ top: 0 });
|
||||
|
||||
rerender(<AffixMounter offsetTop={10} onChange={onChange} />);
|
||||
await sleep(20);
|
||||
expect(affixMounterWrapper.instance().affix.state.affixStyle?.top).toBe(10);
|
||||
expect(container.querySelector('.ant-affix')).toHaveStyle({ top: `10px` });
|
||||
});
|
||||
|
||||
describe('updatePosition when target changed', () => {
|
||||
@ -201,7 +191,9 @@ describe('Affix Render', () => {
|
||||
await sleep(20);
|
||||
|
||||
await movePlaceholder(300);
|
||||
expect(affixMounterWrapper.instance().affix.state.affixStyle).toBeTruthy();
|
||||
expect(
|
||||
(affixMounterWrapper.find(AffixMounter).instance() as any).affix.state.affixStyle,
|
||||
).toBeTruthy();
|
||||
await sleep(20);
|
||||
affixMounterWrapper.update();
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Anchor from '..';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render } from '../../../tests/utils';
|
||||
|
||||
const { Link } = Anchor;
|
||||
|
||||
@ -55,8 +55,8 @@ describe('Anchor Render', () => {
|
||||
|
||||
wrapper.find(`a[href="#${hash}"]`).simulate('click');
|
||||
|
||||
wrapper.instance().handleScroll();
|
||||
expect(wrapper.instance().state).not.toBe(null);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScroll();
|
||||
expect(wrapper.find(Anchor).instance().state).not.toBe(null);
|
||||
});
|
||||
|
||||
it('Anchor render perfectly for complete href - click', () => {
|
||||
@ -67,7 +67,9 @@ describe('Anchor Render', () => {
|
||||
</Anchor>,
|
||||
);
|
||||
wrapper.find(`a[href="http://www.example.com/#${hash}"]`).simulate('click');
|
||||
expect(wrapper.instance().state.activeLink).toBe(`http://www.example.com/#${hash}`);
|
||||
expect(wrapper.find<Anchor>(Anchor).instance().state.activeLink).toBe(
|
||||
`http://www.example.com/#${hash}`,
|
||||
);
|
||||
});
|
||||
|
||||
it('Anchor render perfectly for complete href - hash router', async () => {
|
||||
@ -80,8 +82,8 @@ describe('Anchor Render', () => {
|
||||
</Anchor>,
|
||||
);
|
||||
|
||||
wrapper.instance().handleScrollTo('/#/faq?locale=en#Q1');
|
||||
expect(wrapper.instance().state.activeLink).toBe('/#/faq?locale=en#Q1');
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo('/#/faq?locale=en#Q1');
|
||||
expect(wrapper.find<Anchor>(Anchor).instance().state.activeLink).toBe('/#/faq?locale=en#Q1');
|
||||
expect(scrollToSpy).not.toHaveBeenCalled();
|
||||
await sleep(1000);
|
||||
expect(scrollToSpy).toHaveBeenCalled();
|
||||
@ -96,8 +98,10 @@ describe('Anchor Render', () => {
|
||||
<Link href={`http://www.example.com/#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
wrapper.instance().handleScroll();
|
||||
expect(wrapper.instance().state.activeLink).toBe(`http://www.example.com/#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScroll();
|
||||
expect(wrapper.find<Anchor>(Anchor).instance().state.activeLink).toBe(
|
||||
`http://www.example.com/#${hash}`,
|
||||
);
|
||||
});
|
||||
|
||||
it('Anchor render perfectly for complete href - scrollTo', async () => {
|
||||
@ -110,8 +114,8 @@ describe('Anchor Render', () => {
|
||||
<Link href={`##${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
wrapper.instance().handleScrollTo(`##${hash}`);
|
||||
expect(wrapper.instance().state.activeLink).toBe(`##${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`##${hash}`);
|
||||
expect(wrapper.find<Anchor>(Anchor).instance().state.activeLink).toBe(`##${hash}`);
|
||||
const calls = scrollToSpy.mock.calls.length;
|
||||
await sleep(1000);
|
||||
expect(scrollToSpy.mock.calls.length).toBeGreaterThan(calls);
|
||||
@ -124,21 +128,27 @@ describe('Anchor Render', () => {
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
const removeListenerSpy = jest.spyOn((wrapper.instance() as any).scrollEvent, 'remove');
|
||||
const removeListenerSpy = jest.spyOn(
|
||||
(wrapper.find<Anchor>(Anchor).instance() as any).scrollEvent,
|
||||
'remove',
|
||||
);
|
||||
wrapper.unmount();
|
||||
expect(removeListenerSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should unregister link when unmount children', async () => {
|
||||
it('should unregister link when unmount children', () => {
|
||||
const hash = getHashUrl();
|
||||
const wrapper = mount<Anchor>(
|
||||
const { container, rerender } = render(
|
||||
<Anchor>
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
expect((wrapper.instance() as any).links).toEqual([`#${hash}`]);
|
||||
wrapper.setProps({ children: null });
|
||||
expect((wrapper.instance() as any).links).toEqual([]);
|
||||
|
||||
expect(container.querySelectorAll('.ant-anchor-link-title')).toHaveLength(1);
|
||||
expect(container.querySelector('.ant-anchor-link-title')).toHaveAttribute('href', `#${hash}`);
|
||||
|
||||
rerender(<Anchor />);
|
||||
expect(container.querySelector('.ant-anchor-link-title')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should update links when link href update', async () => {
|
||||
@ -188,7 +198,7 @@ describe('Anchor Render', () => {
|
||||
|
||||
wrapper.find(`a[href="${href}"]`).simulate('click');
|
||||
|
||||
wrapper.instance().handleScroll();
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScroll();
|
||||
expect(event).not.toBe(undefined);
|
||||
expect(link).toEqual({ href, title });
|
||||
});
|
||||
@ -205,7 +215,10 @@ describe('Anchor Render', () => {
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
const removeListenerSpy = jest.spyOn((wrapper.instance() as any).scrollEvent, 'remove');
|
||||
const removeListenerSpy = jest.spyOn(
|
||||
(wrapper.find<Anchor>(Anchor).instance() as any).scrollEvent,
|
||||
'remove',
|
||||
);
|
||||
await sleep(1000);
|
||||
wrapper.setProps({ getContainer: getContainerB });
|
||||
expect(removeListenerSpy).not.toHaveBeenCalled();
|
||||
@ -230,7 +243,10 @@ describe('Anchor Render', () => {
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
);
|
||||
const removeListenerSpy = jest.spyOn((wrapper.instance() as any).scrollEvent, 'remove');
|
||||
const removeListenerSpy = jest.spyOn(
|
||||
(wrapper.find<Anchor>(Anchor).instance() as any).scrollEvent,
|
||||
'remove',
|
||||
);
|
||||
expect(removeListenerSpy).not.toHaveBeenCalled();
|
||||
await sleep(1000);
|
||||
wrapper.setProps({ getContainer: getContainerB });
|
||||
@ -248,8 +264,8 @@ describe('Anchor Render', () => {
|
||||
</Anchor>,
|
||||
);
|
||||
wrapper.find(`a[href="#${hash}"]`).simulate('click');
|
||||
(wrapper.instance() as any).handleScroll();
|
||||
expect(wrapper.instance().state).not.toBe(null);
|
||||
(wrapper.find<Anchor>(Anchor).instance() as any).handleScroll();
|
||||
expect(wrapper.find<Anchor>(Anchor).instance().state).not.toBe(null);
|
||||
});
|
||||
|
||||
it('Same function returns different DOM', async () => {
|
||||
@ -278,7 +294,10 @@ describe('Anchor Render', () => {
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
);
|
||||
const removeListenerSpy = jest.spyOn((wrapper.instance() as any).scrollEvent, 'remove');
|
||||
const removeListenerSpy = jest.spyOn(
|
||||
(wrapper.find<Anchor>(Anchor).instance() as any).scrollEvent,
|
||||
'remove',
|
||||
);
|
||||
expect(removeListenerSpy).not.toHaveBeenCalled();
|
||||
await sleep(1000);
|
||||
holdContainer.container = document.getElementById(hash2);
|
||||
@ -311,19 +330,19 @@ describe('Anchor Render', () => {
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
wrapper.setProps({ offsetTop: 100 });
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
wrapper.setProps({ targetOffset: 200 });
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
|
||||
@ -356,19 +375,19 @@ describe('Anchor Render', () => {
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
wrapper.setProps({ offsetTop: 100 });
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
wrapper.setProps({ targetOffset: 200 });
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
|
||||
@ -386,7 +405,7 @@ describe('Anchor Render', () => {
|
||||
</Anchor>,
|
||||
);
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
wrapper.instance().handleScrollTo(hash2);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(hash2);
|
||||
expect(onChange).toHaveBeenCalledTimes(2);
|
||||
expect(onChange).toHaveBeenCalledWith(hash2);
|
||||
});
|
||||
@ -400,8 +419,8 @@ describe('Anchor Render', () => {
|
||||
|
||||
wrapper.find(`a[href="notexsited"]`).simulate('click');
|
||||
|
||||
wrapper.instance().handleScrollTo('notexsited');
|
||||
expect(wrapper.instance().state).not.toBe(null);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo('notexsited');
|
||||
expect(wrapper.find<Anchor>(Anchor).instance().state).not.toBe(null);
|
||||
});
|
||||
|
||||
it('test edge case when getBoundingClientRect return zero size', async () => {
|
||||
@ -434,19 +453,19 @@ describe('Anchor Render', () => {
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
wrapper.setProps({ offsetTop: 100 });
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
wrapper.setProps({ targetOffset: 200 });
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
|
||||
@ -483,19 +502,19 @@ describe('Anchor Render', () => {
|
||||
<Link href={`#${hash}`} title={hash} />
|
||||
</Anchor>,
|
||||
);
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
wrapper.setProps({ offsetTop: 100 });
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
dateNowMock = dataNowMockFn();
|
||||
|
||||
wrapper.setProps({ targetOffset: 200 });
|
||||
wrapper.instance().handleScrollTo(`#${hash}`);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(`#${hash}`);
|
||||
await sleep(30);
|
||||
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
|
||||
|
||||
@ -513,7 +532,7 @@ describe('Anchor Render', () => {
|
||||
<Link href={`#${hash2}`} title={hash2} />
|
||||
</Anchor>,
|
||||
);
|
||||
expect(wrapper.instance().state.activeLink).toBe(`#${hash2}`);
|
||||
expect(wrapper.find<Anchor>(Anchor).instance().state.activeLink).toBe(`#${hash2}`);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/30584
|
||||
@ -528,7 +547,7 @@ describe('Anchor Render', () => {
|
||||
</Anchor>,
|
||||
);
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
wrapper.instance().handleScrollTo(hash2);
|
||||
wrapper.find<Anchor>(Anchor).instance().handleScrollTo(hash2);
|
||||
expect(onChange).toHaveBeenCalledTimes(2);
|
||||
expect(onChange).toHaveBeenCalledWith(hash2);
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { mount } from 'enzyme';
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
import { render, fireEvent } from '../../../tests/utils';
|
||||
import Avatar from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
@ -123,8 +123,8 @@ describe('Avatar Render', () => {
|
||||
});
|
||||
|
||||
it('should calculate scale of avatar children correctly', () => {
|
||||
const wrapper = mount(<Avatar>Avatar</Avatar>);
|
||||
expect(wrapper.find('.ant-avatar-string').render()).toMatchSnapshot();
|
||||
const { container, rerender } = render(<Avatar>Avatar</Avatar>);
|
||||
expect(container.querySelector('.ant-avatar-string')).toMatchSnapshot();
|
||||
|
||||
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
|
||||
get() {
|
||||
@ -134,8 +134,9 @@ describe('Avatar Render', () => {
|
||||
return 40;
|
||||
},
|
||||
});
|
||||
wrapper.setProps({ children: 'xx' });
|
||||
expect(wrapper.find('.ant-avatar-string').render()).toMatchSnapshot();
|
||||
|
||||
rerender(<Avatar>xx</Avatar>);
|
||||
expect(container.querySelector('.ant-avatar-string')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should calculate scale of avatar children correctly with gap', () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render } from '@testing-library/react';
|
||||
import { render } from '../../../tests/utils';
|
||||
import Breadcrumb from '../index';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
@ -29,8 +29,7 @@ describe('Breadcrumb', () => {
|
||||
<MyCom />
|
||||
</Breadcrumb>,
|
||||
);
|
||||
expect(errorSpy.mock.calls).toHaveLength(1);
|
||||
expect(errorSpy.mock.calls[0][0]).toMatch(
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
"Warning: [antd: Breadcrumb] Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,166 +1,72 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`react router react router 3 1`] = `
|
||||
<Breadcrumb
|
||||
params={
|
||||
Object {
|
||||
"id": 1,
|
||||
}
|
||||
}
|
||||
routes={
|
||||
Array [
|
||||
Object {
|
||||
"breadcrumbName": "Home",
|
||||
"childRoutes": Array [
|
||||
Object {
|
||||
"breadcrumbName": "Application List",
|
||||
"childRoutes": Array [
|
||||
Object {
|
||||
"breadcrumbName": "Application:id",
|
||||
"childRoutes": Array [
|
||||
Object {
|
||||
"breadcrumbName": "Detail",
|
||||
"name": "detail",
|
||||
"path": "detail",
|
||||
},
|
||||
],
|
||||
"name": "app",
|
||||
"path": ":id",
|
||||
},
|
||||
],
|
||||
"name": "apps",
|
||||
"path": "apps",
|
||||
},
|
||||
],
|
||||
"name": "home",
|
||||
"path": "/",
|
||||
},
|
||||
Object {
|
||||
"breadcrumbName": "Application List",
|
||||
"childRoutes": Array [
|
||||
Object {
|
||||
"breadcrumbName": "Application:id",
|
||||
"childRoutes": Array [
|
||||
Object {
|
||||
"breadcrumbName": "Detail",
|
||||
"name": "detail",
|
||||
"path": "detail",
|
||||
},
|
||||
],
|
||||
"name": "app",
|
||||
"path": ":id",
|
||||
},
|
||||
],
|
||||
"name": "apps",
|
||||
"path": "apps",
|
||||
},
|
||||
Object {
|
||||
"breadcrumbName": "Application:id",
|
||||
"childRoutes": Array [
|
||||
Object {
|
||||
"breadcrumbName": "Detail",
|
||||
"name": "detail",
|
||||
"path": "detail",
|
||||
},
|
||||
],
|
||||
"name": "app",
|
||||
"path": ":id",
|
||||
},
|
||||
Object {
|
||||
"breadcrumbName": "Detail",
|
||||
"name": "detail",
|
||||
"path": "detail",
|
||||
},
|
||||
]
|
||||
}
|
||||
<nav
|
||||
class="ant-breadcrumb"
|
||||
>
|
||||
<nav
|
||||
className="ant-breadcrumb"
|
||||
>
|
||||
<ol>
|
||||
<BreadcrumbItem
|
||||
key="Home"
|
||||
separator="/"
|
||||
<ol>
|
||||
<li>
|
||||
<span
|
||||
class="ant-breadcrumb-link"
|
||||
>
|
||||
<li>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<a
|
||||
href="#/"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</li>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem
|
||||
key="apps"
|
||||
separator="/"
|
||||
<a
|
||||
href="#/"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
class="ant-breadcrumb-separator"
|
||||
>
|
||||
<li>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<a
|
||||
href="#/apps"
|
||||
>
|
||||
Application List
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</li>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem
|
||||
key="1"
|
||||
separator="/"
|
||||
/
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
class="ant-breadcrumb-link"
|
||||
>
|
||||
<li>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<a
|
||||
href="#/apps/1"
|
||||
>
|
||||
Application1
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</li>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem
|
||||
key="detail"
|
||||
separator="/"
|
||||
<a
|
||||
href="#/apps"
|
||||
>
|
||||
Application List
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
class="ant-breadcrumb-separator"
|
||||
>
|
||||
<li>
|
||||
<span
|
||||
className="ant-breadcrumb-link"
|
||||
>
|
||||
<span>
|
||||
Detail
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
className="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</li>
|
||||
</BreadcrumbItem>
|
||||
</ol>
|
||||
</nav>
|
||||
</Breadcrumb>
|
||||
/
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
class="ant-breadcrumb-link"
|
||||
>
|
||||
<a
|
||||
href="#/apps/1"
|
||||
>
|
||||
Application1
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
class="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
class="ant-breadcrumb-link"
|
||||
>
|
||||
<span>
|
||||
Detail
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-breadcrumb-separator"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
`;
|
||||
|
||||
@ -144,6 +144,6 @@ describe('react router', () => {
|
||||
},
|
||||
];
|
||||
const wrapper = mount(<Breadcrumb routes={routes} params={{ id: 1 }} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { resetWarned } from 'rc-util/lib/warning';
|
||||
@ -8,7 +7,7 @@ import Button from '..';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render, fireEvent } from '../../../tests/utils';
|
||||
import { SizeType } from '../../config-provider/SizeContext';
|
||||
|
||||
describe('Button', () => {
|
||||
@ -85,22 +84,26 @@ describe('Button', () => {
|
||||
|
||||
it('renders Chinese characters correctly in HOC', () => {
|
||||
const Text = ({ children }: { children: React.ReactNode }) => <span>{children}</span>;
|
||||
const wrapper = mount(
|
||||
const { container, rerender } = render(
|
||||
<Button>
|
||||
<Text>按钮</Text>
|
||||
</Button>,
|
||||
);
|
||||
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
|
||||
wrapper.setProps({
|
||||
children: <Text>大按钮</Text>,
|
||||
});
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(false);
|
||||
wrapper.setProps({
|
||||
children: <Text>按钮</Text>,
|
||||
});
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
|
||||
expect(container.querySelector('.ant-btn')).toHaveClass('ant-btn-two-chinese-chars');
|
||||
|
||||
rerender(
|
||||
<Button>
|
||||
<Text>大按钮</Text>
|
||||
</Button>,
|
||||
);
|
||||
expect(container.querySelector('.ant-btn')).not.toHaveClass('ant-btn-two-chinese-chars');
|
||||
|
||||
rerender(
|
||||
<Button>
|
||||
<Text>按钮</Text>
|
||||
</Button>,
|
||||
);
|
||||
expect(container.querySelector('.ant-btn')).toHaveClass('ant-btn-two-chinese-chars');
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/18118
|
||||
@ -123,7 +126,7 @@ describe('Button', () => {
|
||||
|
||||
it('have static property for type detecting', () => {
|
||||
const wrapper = mount(<Button>Button Text</Button>);
|
||||
expect((wrapper.type() as any).__ANT_BUTTON).toBe(true);
|
||||
expect((wrapper.find(Button).type() as any).__ANT_BUTTON).toBe(true);
|
||||
});
|
||||
|
||||
it('should change loading state instantly by default', () => {
|
||||
|
||||
@ -4,6 +4,7 @@ import Card from '../index';
|
||||
import Button from '../../button/index';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { render } from '../../../tests/utils';
|
||||
|
||||
describe('Card', () => {
|
||||
mountTest(Card);
|
||||
@ -84,20 +85,14 @@ describe('Card', () => {
|
||||
});
|
||||
|
||||
it('get ref of card', () => {
|
||||
class WrapperComponent extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Card
|
||||
// eslint-disable-next-line react/no-string-refs
|
||||
ref="firstRef"
|
||||
title="Card title"
|
||||
>
|
||||
<p>Card content</p>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
const wrapper = mount(<WrapperComponent />);
|
||||
expect(wrapper.ref('firstRef').className.includes('ant-card')).toBe(true);
|
||||
const cardRef = React.createRef();
|
||||
|
||||
render(
|
||||
<Card ref={cardRef} title="Card title">
|
||||
<p>Card content</p>
|
||||
</Card>,
|
||||
);
|
||||
|
||||
expect(cardRef.current).toHaveClass('ant-card');
|
||||
});
|
||||
});
|
||||
|
||||
@ -3,7 +3,7 @@ import { mount } from 'enzyme';
|
||||
import Carousel from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render } from '../../../tests/utils';
|
||||
|
||||
describe('Carousel', () => {
|
||||
mountTest(Carousel);
|
||||
@ -99,21 +99,28 @@ describe('Carousel', () => {
|
||||
|
||||
describe('should active when children change', () => {
|
||||
it('should active', () => {
|
||||
const wrapper = mount(<Carousel />);
|
||||
wrapper.setProps({
|
||||
children: <div />,
|
||||
});
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.slick-active').length).toBeTruthy();
|
||||
const { rerender, container } = render(<Carousel />);
|
||||
expect(container.querySelector('.slick-active')).toBeFalsy();
|
||||
|
||||
// Update children
|
||||
rerender(
|
||||
<Carousel>
|
||||
<div />
|
||||
</Carousel>,
|
||||
);
|
||||
expect(container.querySelector('.slick-active')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should keep initialSlide', () => {
|
||||
const wrapper = mount(<Carousel initialSlide={1} />);
|
||||
wrapper.setProps({
|
||||
children: [<div key="1" />, <div key="2" />, <div key="3" />],
|
||||
});
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.slick-dots li').at(1).hasClass('slick-active')).toBeTruthy();
|
||||
const { rerender, container } = render(<Carousel initialSlide={1} />);
|
||||
rerender(
|
||||
<Carousel initialSlide={1}>
|
||||
<div key="1" />
|
||||
<div key="2" />
|
||||
<div key="3" />
|
||||
</Carousel>,
|
||||
);
|
||||
expect(container.querySelectorAll('.slick-dots li')[1]).toHaveClass('slick-active');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ exports[`CheckboxGroup passes prefixCls down to checkbox 1`] = `
|
||||
</label>
|
||||
<label
|
||||
class="my-checkbox-wrapper my-checkbox-group-item"
|
||||
style="font-size:12px"
|
||||
style="font-size: 12px;"
|
||||
>
|
||||
<span
|
||||
class="my-checkbox"
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
import { mount, render } from 'enzyme';
|
||||
import { mount } from 'enzyme';
|
||||
import Collapse from '../../collapse';
|
||||
import Table from '../../table';
|
||||
import Checkbox from '../index';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { render, fireEvent } from '../../../tests/utils';
|
||||
import Input from '../../input';
|
||||
|
||||
describe('CheckboxGroup', () => {
|
||||
@ -71,9 +72,9 @@ describe('CheckboxGroup', () => {
|
||||
{ label: 'Orange', value: 'Orange', style: { fontSize: 12 } },
|
||||
];
|
||||
|
||||
const wrapper = render(<Checkbox.Group prefixCls="my-checkbox" options={options} />);
|
||||
const wrapper = mount(<Checkbox.Group prefixCls="my-checkbox" options={options} />);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should be controlled by value', () => {
|
||||
@ -105,34 +106,38 @@ describe('CheckboxGroup', () => {
|
||||
// https://github.com/ant-design/ant-design/issues/16376
|
||||
it('onChange should filter removed value', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(
|
||||
const { container, rerender } = render(
|
||||
<Checkbox.Group defaultValue={[1]} onChange={onChange}>
|
||||
<Checkbox key={1} value={1} />
|
||||
<Checkbox key={2} value={2} />
|
||||
</Checkbox.Group>,
|
||||
);
|
||||
|
||||
wrapper.setProps({
|
||||
children: [<Checkbox key={2} value={2} />],
|
||||
});
|
||||
|
||||
wrapper.find('.ant-checkbox-input').at(0).simulate('change');
|
||||
rerender(
|
||||
<Checkbox.Group defaultValue={[1]} onChange={onChange}>
|
||||
<Checkbox key={2} value={2} />
|
||||
</Checkbox.Group>,
|
||||
);
|
||||
fireEvent.click(container.querySelector('.ant-checkbox-input'));
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith([2]);
|
||||
});
|
||||
|
||||
it('checkbox should register value again after value changed', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(
|
||||
const { container, rerender } = render(
|
||||
<Checkbox.Group defaultValue={[1]} onChange={onChange}>
|
||||
<Checkbox key={1} value={1} />
|
||||
</Checkbox.Group>,
|
||||
);
|
||||
|
||||
wrapper.setProps({
|
||||
children: [<Checkbox key={1} value={2} />],
|
||||
});
|
||||
expect(wrapper.find('.ant-checkbox-input').at(0).prop('checked')).toBe(false);
|
||||
rerender(
|
||||
<Checkbox.Group defaultValue={[1]} onChange={onChange}>
|
||||
<Checkbox key={1} value={2} />
|
||||
</Checkbox.Group>,
|
||||
);
|
||||
|
||||
expect(container.querySelector('.ant-checkbox-input')).toHaveAttribute('checked');
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/17297
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render } from '@testing-library/react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { render } from '../../../tests/utils';
|
||||
import ConfigProvider from '..';
|
||||
import zhCN from '../../locale/zh_CN';
|
||||
import Form from '../../form';
|
||||
|
||||
@ -70,22 +70,12 @@ describe('ConfigProvider.Locale', () => {
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/31592
|
||||
it('should not reset the component state when switching locale', () => {
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
locale: zhCN,
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ConfigProvider locale={this.state.locale}>
|
||||
<DatePicker />
|
||||
<Pagination total={50} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const wrapper = mount(<App />);
|
||||
const wrapper = mount(
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<DatePicker />
|
||||
<Pagination total={50} />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
const datepickerInitProps = wrapper.find('.ant-picker-input input').props();
|
||||
expect(datepickerInitProps.value).toBe('');
|
||||
@ -100,7 +90,7 @@ describe('ConfigProvider.Locale', () => {
|
||||
|
||||
expect(wrapper.find('.ant-picker-input input').props().value).not.toBe('');
|
||||
|
||||
wrapper.setState({ locale: {} });
|
||||
wrapper.setProps({ locale: {} });
|
||||
wrapper.find('.ant-pagination-item-3').simulate('click');
|
||||
|
||||
const datepickerProps = wrapper.find('.ant-picker-input input').props();
|
||||
|
||||
@ -70,9 +70,7 @@ describe('RangePicker', () => {
|
||||
openPicker(wrapper, 1);
|
||||
selectCell(wrapper, 'Feb');
|
||||
closePicker(wrapper, 1);
|
||||
|
||||
const { value } = wrapper.state();
|
||||
|
||||
const { value } = wrapper.find(Test).state();
|
||||
expect(value[0].isSame(value[1], 'date')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render } from '@testing-library/react';
|
||||
import { render } from '../../../tests/utils';
|
||||
import Drawer from '..';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
@ -1,118 +1,67 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Drawer from '..';
|
||||
import Button from '../../button';
|
||||
|
||||
class DrawerEventTester extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { visible: false };
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state
|
||||
}
|
||||
|
||||
onClose = () => {
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
|
||||
open = () => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { visible } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={this.open}>open</Button>
|
||||
<Drawer visible={visible} onClose={this.onClose} getContainer={false} {...this.props}>
|
||||
Here is content of Drawer
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
import { render, fireEvent } from '../../../tests/utils';
|
||||
|
||||
describe('Drawer', () => {
|
||||
const getDrawer = props => (
|
||||
<Drawer visible getContainer={false} {...props}>
|
||||
Here is content of Drawer
|
||||
</Drawer>
|
||||
);
|
||||
|
||||
it('render correctly', () => {
|
||||
const wrapper = mount(<DrawerEventTester />);
|
||||
const body = wrapper.find('.ant-drawer-body').exists();
|
||||
const { container, asFragment, rerender } = render(getDrawer());
|
||||
expect(container.querySelector('.ant-drawer-body')).toBeTruthy();
|
||||
|
||||
expect(body).toBe(true);
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
rerender(getDrawer({ visible: false }));
|
||||
|
||||
const content = wrapper.find('.ant-drawer-body').getDOMNode().innerHTML;
|
||||
expect(content).toBe('Here is content of Drawer');
|
||||
expect(container.querySelector('.ant-drawer-body').textContent).toEqual(
|
||||
'Here is content of Drawer',
|
||||
);
|
||||
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('mask trigger onClose', () => {
|
||||
const wrapper = mount(<DrawerEventTester />);
|
||||
const onClose = jest.fn();
|
||||
const { container } = render(getDrawer({ onClose }));
|
||||
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(true);
|
||||
|
||||
wrapper.find('.ant-drawer-mask').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(false);
|
||||
fireEvent.click(container.querySelector('.ant-drawer-mask'));
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('close button trigger onClose', () => {
|
||||
const wrapper = mount(<DrawerEventTester />);
|
||||
const onClose = jest.fn();
|
||||
const { container } = render(getDrawer({ onClose }));
|
||||
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(true);
|
||||
|
||||
wrapper.find('.ant-drawer-close').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(false);
|
||||
fireEvent.click(container.querySelector('.ant-drawer-close'));
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('maskClosable no trigger onClose', () => {
|
||||
const wrapper = mount(<DrawerEventTester maskClosable={false} />);
|
||||
const onClose = jest.fn();
|
||||
const { container } = render(getDrawer({ onClose, maskClosable: false }));
|
||||
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(true);
|
||||
|
||||
wrapper.find('.ant-drawer-mask').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(true);
|
||||
fireEvent.click(container.querySelector('.ant-drawer-mask'));
|
||||
expect(onClose).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('dom should be removed after close when destroyOnClose is true', () => {
|
||||
const wrapper = mount(<DrawerEventTester destroyOnClose />);
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
expect(wrapper.find('.ant-drawer-wrapper-body').exists()).toBe(true);
|
||||
const { container, rerender } = render(getDrawer({ destroyOnClose: true }));
|
||||
|
||||
wrapper.setState({
|
||||
visible: false,
|
||||
});
|
||||
wrapper.find('.ant-drawer-wrapper-body').simulate('transitionend');
|
||||
expect(wrapper.find('.ant-drawer-wrapper-body').exists()).toBe(false);
|
||||
rerender(getDrawer({ destroyOnClose: true, visible: false }));
|
||||
fireEvent.transitionEnd(container.querySelector('.ant-drawer-wrapper-body'));
|
||||
|
||||
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('dom should be existed after close when destroyOnClose is false', () => {
|
||||
const wrapper = mount(<DrawerEventTester />);
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
expect(wrapper.find('.ant-drawer-wrapper-body').exists()).toBe(true);
|
||||
const { container, rerender } = render(getDrawer());
|
||||
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
|
||||
|
||||
wrapper.setState({
|
||||
visible: false,
|
||||
});
|
||||
wrapper.find('.ant-drawer-wrapper-body').simulate('transitionend');
|
||||
expect(wrapper.find('.ant-drawer-wrapper-body').exists()).toBe(true);
|
||||
});
|
||||
rerender(getDrawer({ visible: false }));
|
||||
fireEvent.transitionEnd(container.querySelector('.ant-drawer-wrapper-body'));
|
||||
|
||||
it('no mask and no closable', () => {
|
||||
const wrapper = mount(<DrawerEventTester destroyOnClose />);
|
||||
|
||||
wrapper.find('button.ant-btn').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(true);
|
||||
|
||||
wrapper.find('.ant-drawer-close').simulate('click');
|
||||
expect(wrapper.instance().state.visible).toBe(false);
|
||||
expect(container.querySelector('.ant-drawer-wrapper-body')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -101,6 +101,8 @@ class MultiDrawer extends React.Component {
|
||||
</Button>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
<div className="childrenDrawer">{String(childrenDrawer)}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -124,7 +126,7 @@ describe('Drawer', () => {
|
||||
expect(translateX).toEqual('translateX(180px)');
|
||||
expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
|
||||
wrapper.find('.Two-level .ant-drawer-close').simulate('click');
|
||||
expect(wrapper.state().childrenDrawer).toBe(false);
|
||||
expect(wrapper.find('.childrenDrawer').text()).toEqual('false');
|
||||
});
|
||||
|
||||
it('render top MultiDrawer', () => {
|
||||
|
||||
@ -1,74 +1,64 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Drawer render correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
open
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
class="ant-drawer ant-drawer-right"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right ant-drawer-open"
|
||||
tabindex="-1"
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="width: 378px; transform: translateX(100%);"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-mask"
|
||||
/>
|
||||
<div
|
||||
class="ant-drawer-content-wrapper"
|
||||
style="width: 378px;"
|
||||
class="ant-drawer-content"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-content"
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
class="ant-drawer-header ant-drawer-header-close-only"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header ant-drawer-header-close-only"
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Here is content of Drawer
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Here is content of Drawer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,7 +62,7 @@ describe('DropdownButton', () => {
|
||||
</Menu>
|
||||
);
|
||||
const wrapper = mount(<Dropdown.Button overlay={menu} />);
|
||||
expect(wrapper.type().__ANT_BUTTON).toBe(true);
|
||||
expect(wrapper.find(Dropdown.Button).type().__ANT_BUTTON).toBe(true);
|
||||
});
|
||||
|
||||
it('should pass mouseEnterDelay and mouseLeaveDelay to Dropdown', () => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { mount } from 'enzyme';
|
||||
import Empty from '..';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
@ -25,6 +25,6 @@ describe('Empty', () => {
|
||||
<Empty />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(render(wrapper)).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component, useState } from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { render as testingRender } from '@testing-library/react';
|
||||
import scrollIntoView from 'scroll-into-view-if-needed';
|
||||
import Form from '..';
|
||||
import * as Util from '../util';
|
||||
@ -12,7 +12,7 @@ import Select from '../../select';
|
||||
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render, fireEvent } from '../../../tests/utils';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import zhCN from '../../locale/zh_CN';
|
||||
|
||||
@ -128,7 +128,8 @@ describe('Form', () => {
|
||||
);
|
||||
};
|
||||
|
||||
const { container } = render(<Demo />);
|
||||
// FIXME: @zombieJ React 18 StrictMode
|
||||
const { container } = testingRender(<Demo />);
|
||||
await change(container, 0, '1', true);
|
||||
expect(container.querySelector('.ant-form-item-explain').textContent).toEqual('aaa');
|
||||
await change(container, 0, '2', true);
|
||||
@ -453,6 +454,9 @@ describe('Form', () => {
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>,
|
||||
{
|
||||
strictMode: false,
|
||||
},
|
||||
);
|
||||
|
||||
expect(shouldNotRender).toHaveBeenCalledTimes(1);
|
||||
@ -718,7 +722,9 @@ describe('Form', () => {
|
||||
);
|
||||
};
|
||||
|
||||
const wrapper = mount(<App />);
|
||||
const wrapper = mount(<App />, {
|
||||
strictMode: false,
|
||||
});
|
||||
for (let i = 0; i < 5; i += 1) {
|
||||
wrapper.find('button').simulate('click');
|
||||
}
|
||||
@ -741,7 +747,9 @@ describe('Form', () => {
|
||||
</Form>
|
||||
);
|
||||
|
||||
const wrapper = mount(<Demo />);
|
||||
const wrapper = mount(<Demo />, {
|
||||
strictMode: false,
|
||||
});
|
||||
renderTimes = 0;
|
||||
|
||||
wrapper.find('input').simulate('change', {
|
||||
@ -771,33 +779,25 @@ describe('Form', () => {
|
||||
});
|
||||
|
||||
it('Remove Field should also reset error', async () => {
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
showA: true,
|
||||
};
|
||||
const Demo = ({ showA }) => (
|
||||
<Form>
|
||||
{showA ? (
|
||||
<Form.Item name="a" help="error">
|
||||
<input />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<Form.Item name="b">
|
||||
<input />
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
);
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Form>
|
||||
{this.state.showA ? (
|
||||
<Form.Item name="a" help="error">
|
||||
<input />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<Form.Item name="b">
|
||||
<input />
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const wrapper = mount(<Demo />);
|
||||
const wrapper = mount(<Demo showA />);
|
||||
await Promise.resolve();
|
||||
expect(wrapper.find('.ant-form-item').last().hasClass('ant-form-item-with-help')).toBeTruthy();
|
||||
|
||||
wrapper.setState({ showA: false });
|
||||
wrapper.setProps({ showA: false });
|
||||
await Promise.resolve();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-form-item').last().hasClass('ant-form-item-with-help')).toBeFalsy();
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { render as testingRender } from '@testing-library/react';
|
||||
import Form from '..';
|
||||
import Input from '../../input';
|
||||
import Button from '../../button';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render, fireEvent } from '../../../tests/utils';
|
||||
|
||||
describe('Form.List', () => {
|
||||
async function change(wrapper, index, value) {
|
||||
@ -16,7 +16,7 @@ describe('Form.List', () => {
|
||||
it(name, async () => {
|
||||
jest.useFakeTimers();
|
||||
|
||||
const { container } = render(
|
||||
const { container } = testingRender(
|
||||
<Form>
|
||||
<Form.List name="list">
|
||||
{(fields, { add, remove }) => (
|
||||
@ -85,6 +85,7 @@ describe('Form.List', () => {
|
||||
</Form.Item>
|
||||
));
|
||||
|
||||
// FIXME: @zombieJ React 18 StrictMode
|
||||
testList('nest noStyle', field => (
|
||||
<Form.Item key={field.key}>
|
||||
<Form.Item noStyle {...field} rules={[{ required: true }]}>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
import { render } from '@testing-library/react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render } from '../../../tests/utils';
|
||||
import { Col, Row } from '..';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import * as styleChecker from '../../_util/styleChecker';
|
||||
|
||||
@ -3,6 +3,7 @@ import { mount } from 'enzyme';
|
||||
import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
|
||||
import { InputRef } from '../Input';
|
||||
import Input from '..';
|
||||
import { render, fireEvent } from '../../../tests/utils';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
@ -58,12 +59,11 @@ describe('Input.Focus', () => {
|
||||
});
|
||||
|
||||
it('disabled should reset focus', () => {
|
||||
const wrapper = mount(<Input allowClear />);
|
||||
wrapper.find('input').simulate('focus');
|
||||
expect(wrapper.exists('.ant-input-affix-wrapper-focused')).toBeTruthy();
|
||||
const { rerender, container } = render(<Input allowClear />);
|
||||
fireEvent.focus(container.querySelector('input')!);
|
||||
expect(container.querySelector('.ant-input-affix-wrapper-focused')).toBeTruthy();
|
||||
|
||||
wrapper.setProps({ disabled: true });
|
||||
wrapper.update();
|
||||
expect(wrapper.exists('.ant-input-affix-wrapper-focused')).toBeFalsy();
|
||||
rerender(<Input allowClear disabled />);
|
||||
expect(container.querySelector('.ant-input-affix-wrapper-focused')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { render, fireEvent } from '../../../tests/utils';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import Form from '../../form';
|
||||
import Input, { InputProps, InputRef } from '..';
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import React, { useState } from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render } from '@testing-library/react';
|
||||
import RcTextArea from 'rc-textarea';
|
||||
import Input from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render } from '../../../tests/utils';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
|
||||
@ -37,47 +37,27 @@ exports[`Layout rtl render component should be rendered correctly in RTL directi
|
||||
`;
|
||||
|
||||
exports[`Layout should be controlled by collapsed 1`] = `
|
||||
<Sider>
|
||||
<aside
|
||||
className="ant-layout-sider ant-layout-sider-dark"
|
||||
style={
|
||||
Object {
|
||||
"flex": "0 0 200px",
|
||||
"maxWidth": "200px",
|
||||
"minWidth": "200px",
|
||||
"width": "200px",
|
||||
}
|
||||
}
|
||||
<aside
|
||||
class="ant-layout-sider ant-layout-sider-dark"
|
||||
style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
|
||||
>
|
||||
<div
|
||||
class="ant-layout-sider-children"
|
||||
>
|
||||
<div
|
||||
className="ant-layout-sider-children"
|
||||
>
|
||||
Sider
|
||||
</div>
|
||||
</aside>
|
||||
</Sider>
|
||||
Sider
|
||||
</div>
|
||||
</aside>
|
||||
`;
|
||||
|
||||
exports[`Layout should be controlled by collapsed 2`] = `
|
||||
<Sider
|
||||
collapsed={true}
|
||||
<aside
|
||||
class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-collapsed"
|
||||
style="max-width: 80px; min-width: 80px; width: 80px; flex: 0 0 80px;"
|
||||
>
|
||||
<aside
|
||||
className="ant-layout-sider ant-layout-sider-dark ant-layout-sider-collapsed"
|
||||
style={
|
||||
Object {
|
||||
"flex": "0 0 80px",
|
||||
"maxWidth": "80px",
|
||||
"minWidth": "80px",
|
||||
"width": "80px",
|
||||
}
|
||||
}
|
||||
<div
|
||||
class="ant-layout-sider-children"
|
||||
>
|
||||
<div
|
||||
className="ant-layout-sider-children"
|
||||
>
|
||||
Sider
|
||||
</div>
|
||||
</aside>
|
||||
</Sider>
|
||||
Sider
|
||||
</div>
|
||||
</aside>
|
||||
`;
|
||||
|
||||
@ -176,10 +176,10 @@ describe('Layout', () => {
|
||||
|
||||
it('should be controlled by collapsed', () => {
|
||||
const wrapper = mount(<Sider>Sider</Sider>);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
wrapper.setProps({ collapsed: true });
|
||||
wrapper.update();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should not add ant-layout-has-sider when `hasSider` is `false`', () => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { mount } from 'enzyme';
|
||||
import List from '..';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
|
||||
@ -126,7 +126,7 @@ describe('List Item Layout', () => {
|
||||
/>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(render(wrapper)).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('rowKey could be string', () => {
|
||||
|
||||
@ -257,27 +257,19 @@ describe('Locale Provider', () => {
|
||||
});
|
||||
|
||||
it('set moment locale when locale changes', () => {
|
||||
class Test extends React.Component {
|
||||
state = {
|
||||
locale: zhCN,
|
||||
};
|
||||
const Test = ({ locale }) => (
|
||||
<LocaleProvider locale={locale}>
|
||||
<div>
|
||||
<DatePicker defaultValue={moment()} open />
|
||||
</div>
|
||||
</LocaleProvider>
|
||||
);
|
||||
|
||||
render() {
|
||||
const { locale } = this.state;
|
||||
return (
|
||||
<LocaleProvider locale={locale}>
|
||||
<div>
|
||||
<DatePicker defaultValue={moment()} open />
|
||||
</div>
|
||||
</LocaleProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
const wrapper = mount(<Test />);
|
||||
const wrapper = mount(<Test locale={zhCN} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
wrapper.setState({ locale: frFR });
|
||||
wrapper.setProps({ locale: frFR });
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
wrapper.setState({ locale: null });
|
||||
wrapper.setProps({ locale: null });
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -7,13 +7,13 @@ import {
|
||||
PieChartOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import Menu from '..';
|
||||
import Layout from '../../layout';
|
||||
import Tooltip from '../../tooltip';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { render, fireEvent } from '../../../tests/utils';
|
||||
import collapseMotion from '../../_util/motion';
|
||||
|
||||
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
|
||||
@ -792,13 +792,23 @@ describe('Menu', () => {
|
||||
const onOpen = jest.fn();
|
||||
const onClose = jest.fn();
|
||||
render(
|
||||
<Menu defaultOpenKeys={['1']} mode="inline" onOpen={onOpen} onClose={onClose}>
|
||||
<SubMenu key="1" title="submenu1">
|
||||
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
||||
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
||||
</SubMenu>
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</Menu>,
|
||||
<Menu
|
||||
defaultOpenKeys={['1']}
|
||||
mode="inline"
|
||||
onOpen={onOpen}
|
||||
onClose={onClose}
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
label: 'submenu1',
|
||||
children: [
|
||||
{ key: 'submenu1', label: 'Option 1' },
|
||||
{ key: 'submenu2', label: 'Option 2' },
|
||||
],
|
||||
},
|
||||
{ key: '2', label: 'menu2' },
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(errorSpy.mock.calls.length).toBe(1);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { mount, render } from 'enzyme';
|
||||
import { mount } from 'enzyme';
|
||||
import PageHeader from '..';
|
||||
import Breadcrumb from '../../breadcrumb';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
@ -109,15 +109,13 @@ describe('PageHeader', () => {
|
||||
});
|
||||
|
||||
it('pageHeader should support className', () => {
|
||||
const wrapper = render(
|
||||
<PageHeader title="Page Title" className="not-works" backIcon={false} />,
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
const wrapper = mount(<PageHeader title="Page Title" className="not-works" backIcon={false} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('pageHeader should not render blank dom', () => {
|
||||
const wrapper = render(<PageHeader title={false} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
const wrapper = mount(<PageHeader title={false} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('breadcrumbs and back icon can coexist', () => {
|
||||
@ -149,7 +147,7 @@ describe('PageHeader', () => {
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(render(wrapper)).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('change container width', async () => {
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { spyElementPrototype } from 'rc-util/lib/test/domHook';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import Popconfirm from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render, fireEvent } from '../../../tests/utils';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import Button from '../../button';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render } from '@testing-library/react';
|
||||
import { render } from '../../../tests/utils';
|
||||
import Popover from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render } from '@testing-library/react';
|
||||
import { render } from '../../../tests/utils';
|
||||
import Result from '..';
|
||||
import Button from '../../button';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
|
||||
import Segmented from '../index';
|
||||
import type { SegmentedValue } from '../index';
|
||||
import { render } from '../../../tests/utils';
|
||||
|
||||
// Make CSSMotion working without transition
|
||||
jest.mock('rc-motion/lib/util/motion', () => ({
|
||||
@ -221,7 +220,7 @@ describe('Segmented', () => {
|
||||
});
|
||||
|
||||
it('render segmented with className and other html attributes', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<Segmented
|
||||
options={['Daily', 'Monthly', 'Weekly']}
|
||||
defaultValue="Weekly"
|
||||
@ -230,8 +229,8 @@ describe('Segmented', () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(wrapper.hasClass('mock-cls')).toBeTruthy();
|
||||
expect(wrapper.prop('data-test-id')).toBe('hello');
|
||||
expect(container.querySelector('.mock-cls')).toBeTruthy();
|
||||
expect(container.querySelector('[data-test-id]')).toHaveAttribute('data-test-id', 'hello');
|
||||
});
|
||||
|
||||
it('render segmented with ref', () => {
|
||||
@ -266,10 +265,10 @@ describe('Segmented', () => {
|
||||
|
||||
const wrapper = mount<typeof Demo>(<Demo />);
|
||||
wrapper.find('Segmented').find(`.${prefixCls}-item-input`).at(0).simulate('change');
|
||||
expect(wrapper.state().value).toBe('Map');
|
||||
expect(wrapper.find(Demo).state().value).toBe('Map');
|
||||
|
||||
wrapper.find('Segmented').find(`.${prefixCls}-item-input`).at(1).simulate('change');
|
||||
expect(wrapper.state().value).toBe('Transit');
|
||||
expect(wrapper.find(Demo).state().value).toBe('Transit');
|
||||
});
|
||||
|
||||
it('render segmented with options null/undefined', () => {
|
||||
|
||||
@ -36,7 +36,7 @@ exports[`Slider should render in RTL direction 1`] = `
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="right:0%;width:30%"
|
||||
style="right: 0%; width: 30%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
@ -48,13 +48,13 @@ exports[`Slider should render in RTL direction 1`] = `
|
||||
aria-valuenow="30"
|
||||
class="ant-slider-handle ant-tooltip-open"
|
||||
role="slider"
|
||||
style="right:30%;transform:translateX(50%)"
|
||||
style="right: 30%; transform: translateX(50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-slider-tooltip ant-tooltip-rtl"
|
||||
style="opacity:0;pointer-events:none"
|
||||
class="ant-tooltip ant-slider-tooltip ant-tooltip-rtl ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
@ -79,59 +79,157 @@ exports[`Slider should render in RTL direction 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Slider should show correct placement tooltip when set tooltipPlacement 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<div
|
||||
class="ant-tooltip ant-slider-tooltip"
|
||||
style="opacity:0;pointer-events:none"
|
||||
>
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
class="ant-slider-handle ant-tooltip-open"
|
||||
role="slider"
|
||||
style="bottom: 30%; transform: translateY(50%);"
|
||||
tabindex="0"
|
||||
/>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
30
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Slider should show correct placement tooltip when set tooltipPlacement 2`] = `<div />`;
|
||||
exports[`Slider should show correct placement tooltip when set tooltipPlacement 2`] = `
|
||||
Array [
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="bottom: 30%; transform: translateY(50%);"
|
||||
tabindex="0"
|
||||
/>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-slider-tooltip ant-zoom-down-leave ant-zoom-down-leave-start ant-zoom-down"
|
||||
style="pointer-events: none;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Slider should show tooltip when hovering slider handler 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<div
|
||||
class="ant-tooltip ant-slider-tooltip"
|
||||
style="opacity:0;pointer-events:none"
|
||||
>
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
class="ant-slider-handle ant-tooltip-open"
|
||||
role="slider"
|
||||
style="left: 30%; transform: translateX(-50%);"
|
||||
tabindex="0"
|
||||
/>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
30
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Slider should show tooltip when hovering slider handler 2`] = `<div />`;
|
||||
exports[`Slider should show tooltip when hovering slider handler 2`] = `
|
||||
Array [
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="30"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left: 30%; transform: translateX(-50%);"
|
||||
tabindex="0"
|
||||
/>,
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-slider-tooltip ant-zoom-down-leave ant-zoom-down-leave-start ant-zoom-down"
|
||||
style="pointer-events: none;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { mount } from 'enzyme';
|
||||
import Slider from '..';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
@ -16,17 +16,17 @@ describe('Slider', () => {
|
||||
it('should show tooltip when hovering slider handler', () => {
|
||||
const wrapper = mount(<Slider defaultValue={30} />);
|
||||
wrapper.find('.ant-slider-handle').at(0).simulate('mouseEnter');
|
||||
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
|
||||
expect(wrapper.find('Trigger').render()).toMatchSnapshot();
|
||||
wrapper.find('.ant-slider-handle').at(0).simulate('mouseLeave');
|
||||
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
|
||||
expect(wrapper.find('Trigger').render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should show correct placement tooltip when set tooltipPlacement', () => {
|
||||
const wrapper = mount(<Slider vertical defaultValue={30} tooltipPlacement="left" />);
|
||||
wrapper.find('.ant-slider-handle').at(0).simulate('mouseEnter');
|
||||
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
|
||||
expect(wrapper.find('Trigger').render()).toMatchSnapshot();
|
||||
wrapper.find('.ant-slider-handle').at(0).simulate('mouseLeave');
|
||||
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
|
||||
expect(wrapper.find('Trigger').render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('when tooltipVisible is true, tooltip should show always, or should never show', () => {
|
||||
@ -84,7 +84,7 @@ describe('Slider', () => {
|
||||
<Slider defaultValue={30} tooltipVisible />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(render(wrapper)).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should keepAlign by calling forcePopupAlign', async () => {
|
||||
|
||||
@ -8,13 +8,13 @@ exports[`Space should render correct with children 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
text1
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
<span>
|
||||
text1
|
||||
@ -35,7 +35,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
style="margin-right: 24px;"
|
||||
>
|
||||
<span>
|
||||
1
|
||||
@ -54,7 +54,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:16px"
|
||||
style="margin-right: 16px;"
|
||||
>
|
||||
<span>
|
||||
1
|
||||
@ -73,7 +73,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:24px"
|
||||
style="margin-right: 24px;"
|
||||
>
|
||||
<span>
|
||||
1
|
||||
@ -97,7 +97,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-left:8px"
|
||||
style="margin-left: 8px;"
|
||||
>
|
||||
<span>
|
||||
1
|
||||
@ -116,7 +116,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-left:16px"
|
||||
style="margin-left: 16px;"
|
||||
>
|
||||
<span>
|
||||
1
|
||||
@ -135,7 +135,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-left:24px"
|
||||
style="margin-left: 24px;"
|
||||
>
|
||||
<span>
|
||||
1
|
||||
@ -158,19 +158,19 @@ exports[`Space split 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:4px"
|
||||
style="margin-right: 4px;"
|
||||
>
|
||||
text1
|
||||
</div>
|
||||
<span
|
||||
class="ant-space-item-split"
|
||||
style="margin-right:4px"
|
||||
style="margin-right: 4px;"
|
||||
>
|
||||
-
|
||||
</span>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:4px"
|
||||
style="margin-right: 4px;"
|
||||
>
|
||||
<span>
|
||||
text1
|
||||
@ -178,7 +178,7 @@ exports[`Space split 1`] = `
|
||||
</div>
|
||||
<span
|
||||
class="ant-space-item-split"
|
||||
style="margin-right:4px"
|
||||
style="margin-right: 4px;"
|
||||
>
|
||||
-
|
||||
</span>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { mount } from 'enzyme';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import Space from '..';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
@ -34,7 +34,7 @@ describe('Space', () => {
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(render(wrapper)).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render width rtl', () => {
|
||||
@ -55,7 +55,7 @@ describe('Space', () => {
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(render(wrapper)).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render width customize size', () => {
|
||||
@ -102,7 +102,7 @@ describe('Space', () => {
|
||||
</Space>,
|
||||
);
|
||||
|
||||
expect(render(wrapper)).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render with invalidElement', () => {
|
||||
@ -170,6 +170,6 @@ describe('Space', () => {
|
||||
</Space>,
|
||||
);
|
||||
|
||||
expect(render(wrapper)).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -24,8 +24,8 @@ describe('delay spinning', () => {
|
||||
|
||||
it('should cancel debounce function when unmount', async () => {
|
||||
const wrapper = mount(<Spin spinning delay={100} />);
|
||||
const spy = jest.spyOn(wrapper.instance().updateSpinning, 'cancel');
|
||||
expect(wrapper.instance().updateSpinning.cancel).toEqual(expect.any(Function));
|
||||
const spy = jest.spyOn(wrapper.find(Spin).instance().updateSpinning, 'cancel');
|
||||
expect(wrapper.find(Spin).instance().updateSpinning.cancel).toEqual(expect.any(Function));
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
wrapper.unmount();
|
||||
expect(spy).toHaveBeenCalled();
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { mount } from 'enzyme';
|
||||
import Spin from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { render } from '../../../tests/utils';
|
||||
|
||||
describe('Spin', () => {
|
||||
mountTest(Spin);
|
||||
@ -20,15 +21,15 @@ describe('Spin', () => {
|
||||
|
||||
it("should render custom indicator when it's set", () => {
|
||||
const customIndicator = <div className="custom-indicator" />;
|
||||
const wrapper = render(<Spin indicator={customIndicator} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
const wrapper = mount(<Spin indicator={customIndicator} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should be controlled by spinning', () => {
|
||||
const wrapper = mount(<Spin spinning={false} />);
|
||||
expect(wrapper.instance().state.spinning).toBe(false);
|
||||
wrapper.setProps({ spinning: true });
|
||||
expect(wrapper.instance().state.spinning).toBe(true);
|
||||
const { container, rerender } = render(<Spin spinning={false} />);
|
||||
expect(container.querySelector('.ant-spin')).not.toHaveClass('ant-spin-spinning');
|
||||
rerender(<Spin spinning />);
|
||||
expect(container.querySelector('.ant-spin')).toHaveClass('ant-spin-spinning');
|
||||
});
|
||||
|
||||
it('if indicator set null should not be render default indicator', () => {
|
||||
|
||||
@ -85,7 +85,7 @@ describe('Statistic', () => {
|
||||
wrapper.update();
|
||||
|
||||
// setInterval should work
|
||||
const instance = wrapper.instance();
|
||||
const instance = wrapper.find('Countdown').instance();
|
||||
expect(instance.countdownId).not.toBe(undefined);
|
||||
|
||||
await sleep(10);
|
||||
@ -142,8 +142,7 @@ describe('Statistic', () => {
|
||||
const wrapper = mount(<Statistic.Countdown value={now} onFinish={onFinish} />);
|
||||
wrapper.update();
|
||||
|
||||
const instance = wrapper.instance();
|
||||
expect(instance.countdownId).toBe(undefined);
|
||||
expect(wrapper.find('Countdown').instance().countdownId).toBe(undefined);
|
||||
expect(onFinish).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { render, fireEvent } from '../../../tests/utils';
|
||||
import Table from '..';
|
||||
import Input from '../../input';
|
||||
import Tooltip from '../../tooltip';
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { mount, render } from 'enzyme';
|
||||
import { mount } from 'enzyme';
|
||||
import Table from '..';
|
||||
import Checkbox from '../../checkbox';
|
||||
import { resetWarned } from '../../_util/devWarning';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import { render } from '../../../tests/utils';
|
||||
|
||||
describe('Table.rowSelection', () => {
|
||||
window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
|
||||
@ -334,8 +335,8 @@ describe('Table.rowSelection', () => {
|
||||
selections: true,
|
||||
};
|
||||
const wrapper = mount(createTable({ rowSelection }));
|
||||
const dropdownWrapper = render(wrapper.find('Trigger').instance().getComponent());
|
||||
expect(dropdownWrapper).toMatchSnapshot();
|
||||
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
|
||||
expect(dropdownWrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('fires selectInvert event', () => {
|
||||
@ -569,32 +570,32 @@ describe('Table.rowSelection', () => {
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/4245
|
||||
it('should allow dynamic getCheckboxProps', () => {
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
disableName: 'Jack',
|
||||
};
|
||||
const { container, rerender } = render(
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowSelection={{
|
||||
getCheckboxProps: record => ({ disabled: record.name === 'Jack' }),
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
render() {
|
||||
const { disableName } = this.state;
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowSelection={{
|
||||
getCheckboxProps: record => ({ disabled: record.name === disableName }),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
const wrapper = mount(<App />);
|
||||
let checkboxs = wrapper.find('input');
|
||||
expect(checkboxs.at(1).props().disabled).toBe(true);
|
||||
expect(checkboxs.at(2).props().disabled).toBe(false);
|
||||
wrapper.setState({ disableName: 'Lucy' });
|
||||
checkboxs = wrapper.find('input');
|
||||
expect(checkboxs.at(1).props().disabled).toBe(false);
|
||||
expect(checkboxs.at(2).props().disabled).toBe(true);
|
||||
let checkboxList = container.querySelectorAll('input');
|
||||
expect(checkboxList[1]).toHaveAttribute('disabled');
|
||||
expect(checkboxList[2]).not.toHaveAttribute('disabled');
|
||||
|
||||
rerender(
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowSelection={{
|
||||
getCheckboxProps: record => ({ disabled: record.name === 'Lucy' }),
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
checkboxList = container.querySelectorAll('input');
|
||||
expect(checkboxList[1]).not.toHaveAttribute('disabled');
|
||||
expect(checkboxList[2]).toHaveAttribute('disabled');
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/4779
|
||||
@ -643,18 +644,18 @@ describe('Table.rowSelection', () => {
|
||||
});
|
||||
|
||||
it('fix selection column on the left', () => {
|
||||
const wrapper = render(
|
||||
const wrapper = mount(
|
||||
createTable({
|
||||
rowSelection: { fixed: true },
|
||||
scroll: { x: 903 },
|
||||
}),
|
||||
);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('fix expand on th left when selection column fixed on the left', () => {
|
||||
const wrapper = render(
|
||||
const wrapper = mount(
|
||||
createTable({
|
||||
expandable: {
|
||||
expandedRowRender() {
|
||||
@ -666,11 +667,11 @@ describe('Table.rowSelection', () => {
|
||||
}),
|
||||
);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('fix selection column on the left when any other column is fixed', () => {
|
||||
const wrapper = render(
|
||||
const wrapper = mount(
|
||||
createTable({
|
||||
rowSelection: {},
|
||||
columns: [
|
||||
@ -684,11 +685,11 @@ describe('Table.rowSelection', () => {
|
||||
}),
|
||||
);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('use column as selection column when key is `selection-column`', () => {
|
||||
const wrapper = render(
|
||||
const wrapper = mount(
|
||||
createTable({
|
||||
rowSelection: {},
|
||||
columns: [
|
||||
@ -701,7 +702,7 @@ describe('Table.rowSelection', () => {
|
||||
}),
|
||||
);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/10629
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render } from '@testing-library/react';
|
||||
import Table from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render } from '../../../tests/utils';
|
||||
|
||||
const { Column, ColumnGroup } = Table;
|
||||
|
||||
|
||||
@ -18,10 +18,10 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
style="overflow-x:auto;overflow-y:hidden"
|
||||
style="overflow-x: auto; overflow-y: hidden;"
|
||||
>
|
||||
<table
|
||||
style="width:903px;min-width:100%;table-layout:fixed"
|
||||
style="width: 903px; min-width: 100%; table-layout: fixed;"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
@ -37,11 +37,11 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
/>
|
||||
<th
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="ant-table-selection"
|
||||
@ -55,6 +55,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -76,31 +77,31 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<tr
|
||||
aria-hidden="true"
|
||||
class="ant-table-measure-row"
|
||||
style="height:0;font-size:0"
|
||||
style="height: 0px; font-size: 0px;"
|
||||
>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
@ -112,7 +113,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
@ -122,7 +123,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -133,6 +134,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -152,7 +154,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
@ -162,7 +164,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -173,6 +175,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -192,7 +195,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
@ -202,7 +205,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -213,6 +216,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -232,7 +236,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<button
|
||||
aria-label="Expand row"
|
||||
@ -242,7 +246,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -253,6 +257,7 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -374,10 +379,10 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
style="overflow-x:auto;overflow-y:hidden"
|
||||
style="overflow-x: auto; overflow-y: hidden;"
|
||||
>
|
||||
<table
|
||||
style="width:903px;min-width:100%;table-layout:fixed"
|
||||
style="width: 903px; min-width: 100%; table-layout: fixed;"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
@ -390,7 +395,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="ant-table-selection"
|
||||
@ -404,6 +409,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -425,22 +431,22 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<tr
|
||||
aria-hidden="true"
|
||||
class="ant-table-measure-row"
|
||||
style="height:0;font-size:0"
|
||||
style="height: 0px; font-size: 0px;"
|
||||
>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
@ -452,7 +458,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -463,6 +469,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -482,7 +489,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -493,6 +500,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -512,7 +520,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -523,6 +531,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -542,7 +551,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -553,6 +562,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -674,10 +684,10 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
style="overflow-x:auto;overflow-y:hidden"
|
||||
style="overflow-x: auto; overflow-y: hidden;"
|
||||
>
|
||||
<table
|
||||
style="width:903px;min-width:100%;table-layout:fixed"
|
||||
style="width: 903px; min-width: 100%; table-layout: fixed;"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
@ -690,7 +700,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="ant-table-selection"
|
||||
@ -704,6 +714,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -714,7 +725,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
@ -726,22 +737,22 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
<tr
|
||||
aria-hidden="true"
|
||||
class="ant-table-measure-row"
|
||||
style="height:0;font-size:0"
|
||||
style="height: 0px; font-size: 0px;"
|
||||
>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
@ -753,7 +764,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -764,6 +775,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -773,7 +785,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
Jack
|
||||
</td>
|
||||
@ -784,7 +796,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -795,6 +807,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -804,7 +817,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
Lucy
|
||||
</td>
|
||||
@ -815,7 +828,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -826,6 +839,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -835,7 +849,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
Tom
|
||||
</td>
|
||||
@ -846,7 +860,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-selection-column ant-table-cell-fix-left"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
@ -857,6 +871,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -866,7 +881,7 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
Jerry
|
||||
</td>
|
||||
@ -1701,7 +1716,7 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
style="table-layout: auto;"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
@ -1727,6 +1742,7 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -1761,6 +1777,7 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -1790,6 +1807,7 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -1819,6 +1837,7 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
@ -1848,6 +1867,7 @@ exports[`Table.rowSelection use column as selection column when key is \`selecti
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render } from '@testing-library/react';
|
||||
import { render } from '../../../tests/utils';
|
||||
import Transfer from '../index';
|
||||
|
||||
describe('Transfer.Customize', () => {
|
||||
|
||||
@ -38,7 +38,7 @@ describe('Transfer.List', () => {
|
||||
|
||||
it('when component has been unmounted, componentWillUnmount should be called', () => {
|
||||
const wrapper = mount(<List {...listCommonProps} />);
|
||||
const willUnmount = jest.spyOn(wrapper.instance(), 'componentWillUnmount');
|
||||
const willUnmount = jest.spyOn(wrapper.find(List).instance(), 'componentWillUnmount');
|
||||
wrapper.unmount();
|
||||
expect(willUnmount).toHaveBeenCalled();
|
||||
});
|
||||
@ -46,7 +46,7 @@ describe('Transfer.List', () => {
|
||||
it('when value is not exists, handleFilter should return', () => {
|
||||
const handleFilter = jest.fn();
|
||||
const wrapper = mount(<List {...listCommonProps} handleFilter={handleFilter} />);
|
||||
expect(wrapper.instance().handleFilter({ target: 'test' })).toBe(undefined);
|
||||
expect(wrapper.find(List).instance().handleFilter({ target: 'test' })).toBe(undefined);
|
||||
expect(handleFilter).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { render as testLibRender } from '@testing-library/react';
|
||||
import { render, fireEvent } from '../../../tests/utils';
|
||||
import Search from '../search';
|
||||
import Transfer from '../index';
|
||||
|
||||
@ -81,13 +82,18 @@ describe('Transfer.Search', () => {
|
||||
// https://github.com/ant-design/ant-design/issues/26208
|
||||
it('typing space should trigger filterOption', () => {
|
||||
const filterOption = jest.fn();
|
||||
const wrapper = mount(
|
||||
|
||||
// We use origin testing lib here since StrictMode will render multiple times
|
||||
const { container } = testLibRender(
|
||||
<Transfer filterOption={filterOption} dataSource={dataSource} showSearch />,
|
||||
);
|
||||
wrapper
|
||||
.find('.ant-input')
|
||||
.at(0)
|
||||
.simulate('change', { target: { value: ' ' } });
|
||||
|
||||
fireEvent.change(container.querySelector('.ant-input'), {
|
||||
target: {
|
||||
value: ' ',
|
||||
},
|
||||
});
|
||||
|
||||
expect(filterOption).toHaveBeenCalledTimes(dataSource.length);
|
||||
});
|
||||
});
|
||||
|
||||
@ -11,7 +11,7 @@ describe('dropIndicatorRender', () => {
|
||||
direction: 'ltr',
|
||||
});
|
||||
const wrapper = mount(indicator);
|
||||
expect(wrapper.props().style.bottom).toEqual(-3);
|
||||
expect(wrapper.find('div').props().style!.bottom).toEqual(-3);
|
||||
});
|
||||
it('work with dropPosition inner (-0)', () => {
|
||||
const indicator = dropIndicatorRender({
|
||||
@ -22,8 +22,8 @@ describe('dropIndicatorRender', () => {
|
||||
direction: 'ltr',
|
||||
});
|
||||
const wrapper = mount(indicator);
|
||||
expect(wrapper.props().style.bottom).toEqual(-3);
|
||||
expect(wrapper.props().style.left).toEqual(24 + offset);
|
||||
expect(wrapper.find('div').props().style!.bottom).toEqual(-3);
|
||||
expect(wrapper.find('div').props().style!.left).toEqual(24 + offset);
|
||||
});
|
||||
it('work with dropPosition after (-1)', () => {
|
||||
const indicator = dropIndicatorRender({
|
||||
@ -34,7 +34,7 @@ describe('dropIndicatorRender', () => {
|
||||
direction: 'ltr',
|
||||
});
|
||||
const wrapper = mount(indicator);
|
||||
expect(wrapper.props().style.top).toEqual(-3);
|
||||
expect(wrapper.find('div').props().style!.top).toEqual(-3);
|
||||
});
|
||||
it('work with drop level', () => {
|
||||
const indicator = dropIndicatorRender({
|
||||
@ -45,7 +45,7 @@ describe('dropIndicatorRender', () => {
|
||||
direction: 'ltr',
|
||||
});
|
||||
const wrapper = mount(indicator);
|
||||
expect(wrapper.props().style.left).toEqual(-2 * 24 + offset);
|
||||
expect(wrapper.find('div').props().style!.left).toEqual(-2 * 24 + offset);
|
||||
});
|
||||
it('work with drop level (rtl)', () => {
|
||||
const indicator = dropIndicatorRender({
|
||||
@ -56,6 +56,6 @@ describe('dropIndicatorRender', () => {
|
||||
direction: 'rtl',
|
||||
});
|
||||
const wrapper = mount(indicator);
|
||||
expect(wrapper.props().style.right).toEqual(-2 * 24 + offset);
|
||||
expect(wrapper.find('div').props().style!.right).toEqual(-2 * 24 + offset);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render } from '@testing-library/react';
|
||||
import { SmileOutlined, LikeOutlined, HighlightOutlined, CheckOutlined } from '@ant-design/icons';
|
||||
import KeyCode from 'rc-util/lib/KeyCode';
|
||||
import { resetWarned } from 'rc-util/lib/warning';
|
||||
@ -14,7 +13,7 @@ import Base from '../Base';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import Typography from '../Typography';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render } from '../../../tests/utils';
|
||||
|
||||
jest.mock('copy-to-clipboard');
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/* eslint-disable react/no-string-refs, react/prefer-es6-class */
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { mount, originMount } from 'enzyme';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import produce from 'immer';
|
||||
import { cloneDeep } from 'lodash';
|
||||
@ -12,7 +11,7 @@ import { setup, teardown } from './mock';
|
||||
import { resetWarned } from '../../_util/devWarning';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render, fireEvent } from '../../../tests/utils';
|
||||
|
||||
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
@ -203,15 +202,16 @@ describe('Upload', () => {
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/14779
|
||||
it('should contain input file control if upload button is hidden', () => {
|
||||
const wrapper = mount(
|
||||
const { container, rerender } = render(
|
||||
<Upload action="http://upload.com">
|
||||
<button type="button">upload</button>
|
||||
</Upload>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('input[type="file"]').length).toBe(1);
|
||||
wrapper.setProps({ children: null });
|
||||
expect(wrapper.find('input[type="file"]').length).toBe(1);
|
||||
expect(container.querySelectorAll('input[type="file"]')).toHaveLength(1);
|
||||
|
||||
rerender(<Upload action="http://upload.com" />);
|
||||
expect(container.querySelectorAll('input[type="file"]')).toHaveLength(1);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/14298
|
||||
@ -224,15 +224,15 @@ describe('Upload', () => {
|
||||
</Form>
|
||||
);
|
||||
|
||||
const wrapper = mount(
|
||||
const { container, rerender } = render(
|
||||
<Demo>
|
||||
<div>upload</div>
|
||||
</Demo>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('input#upload').length).toBe(1);
|
||||
wrapper.setProps({ children: null });
|
||||
expect(wrapper.find('input#upload').length).toBe(0);
|
||||
expect(container.querySelector('input#upload')).toBeTruthy();
|
||||
rerender(<Demo />);
|
||||
expect(container.querySelector('input#upload')).toBeFalsy();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/16478
|
||||
@ -874,9 +874,10 @@ describe('Upload', () => {
|
||||
expect(onChange.mock.calls[0][0].fileList).toHaveLength(1);
|
||||
});
|
||||
|
||||
// FIXME: @zombieJ React 18 StrictMode
|
||||
// https://github.com/ant-design/ant-design/issues/33819
|
||||
it('should show the animation of the upload children leaving when the upload children becomes null', async () => {
|
||||
const wrapper = mount(
|
||||
const wrapper = originMount(
|
||||
<Upload listType="picture-card">
|
||||
<button type="button">upload</button>
|
||||
</Upload>,
|
||||
|
||||
@ -752,7 +752,7 @@ describe('Upload List', () => {
|
||||
const wrapper = mount(
|
||||
<UploadList listType="picture-card" items={items} locale={{ previewFile: '' }} />,
|
||||
);
|
||||
expect(wrapper.props().previewFile(file)).toBeTruthy();
|
||||
expect(wrapper.find(UploadList).props().previewFile(file)).toBeTruthy();
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
@ -771,7 +771,7 @@ describe('Upload List', () => {
|
||||
);
|
||||
|
||||
// Not throw
|
||||
wrapper.props().onDownload(file);
|
||||
wrapper.find(UploadList).props().onDownload(file);
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
@ -845,6 +845,7 @@ describe('Upload List', () => {
|
||||
<UploadList listType="picture-card" items={fileList} locale={{ uploading: 'uploading' }} />,
|
||||
);
|
||||
await wrapper
|
||||
.find(UploadList)
|
||||
.props()
|
||||
.previewFile(mockFile)
|
||||
.then(dataUrl => {
|
||||
@ -863,6 +864,7 @@ describe('Upload List', () => {
|
||||
<UploadList listType="picture-card" items={fileList} locale={{ uploading: 'uploading' }} />,
|
||||
);
|
||||
await wrapper
|
||||
.find(UploadList)
|
||||
.props()
|
||||
.previewFile(mockFile)
|
||||
.then(dataUrl => {
|
||||
|
||||
@ -21,8 +21,8 @@ title: 概览
|
||||
- 功能示例：由多个模板组成，以启发用户如何使用和构建一个通用功能。
|
||||
- 模板：一个页面级示例，启发用户如何在系统中构建典型页面，例如详细信息页面。
|
||||
- 组件
|
||||
- 基本组件：系统的最基本元素，例如按钮和分页器。
|
||||
- 业务组件/模块：块级示例，通常由多个组件组成，例如 PageHeader 通用标题。
|
||||
- 基本组件：系统的最基本元素，例如按钮和分页器。
|
||||
- 业务组件/模块：块级示例，通常由多个组件组成，例如 PageHeader 通用标题。
|
||||
- 一般概念：保证 ETC 系统化的一些约定，例如排版、字体和文案。
|
||||
|
||||
## 资源
|
||||
|
||||
@ -32,8 +32,8 @@ if (typeof window !== 'undefined') {
|
||||
// Fix css-animation or rc-motion deps on these
|
||||
// https://github.com/react-component/motion/blob/9c04ef1a210a4f3246c9becba6e33ea945e00669/src/util/motion.ts#L27-L35
|
||||
// https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
|
||||
window.AnimationEvent = window.AnimationEvent || (() => {});
|
||||
window.TransitionEvent = window.TransitionEvent || (() => {});
|
||||
window.AnimationEvent = window.AnimationEvent || window.Event;
|
||||
window.TransitionEvent = window.TransitionEvent || window.Event;
|
||||
}
|
||||
|
||||
const Enzyme = require('enzyme');
|
||||
@ -60,3 +60,28 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
|
||||
target.getBoundingClientRect = originGetBoundingClientRect;
|
||||
},
|
||||
});
|
||||
|
||||
// React.StrictMode wrapper
|
||||
jest.mock('enzyme', () => {
|
||||
const enzyme = jest.requireActual('enzyme');
|
||||
const { StrictMode, cloneElement } = jest.requireActual('react');
|
||||
const { mount, render } = enzyme;
|
||||
|
||||
function EnzymeWrapper({ strictMode, children, ...props }) {
|
||||
// Not wrap StrictMode for some test case need count render times
|
||||
if (strictMode === false) {
|
||||
return cloneElement(children, props);
|
||||
}
|
||||
|
||||
return <StrictMode>{cloneElement(children, props)}</StrictMode>;
|
||||
}
|
||||
|
||||
return {
|
||||
...enzyme,
|
||||
mount: (ui, { strictMode, ...config } = {}, ...args) =>
|
||||
mount(<EnzymeWrapper strictMode={strictMode}>{ui}</EnzymeWrapper>, config, ...args),
|
||||
render: (ui, { strictMode, ...config } = {}, ...args) =>
|
||||
render(<EnzymeWrapper strictMode={strictMode}>{ui}</EnzymeWrapper>, config, ...args),
|
||||
originMount: mount,
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import { mount, ReactWrapper } from 'enzyme';
|
||||
import { sleep } from '../utils';
|
||||
import { sleep, render } from '../utils';
|
||||
|
||||
// eslint-disable-next-line jest/no-export
|
||||
export default function focusTest(
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import MockDate from 'mockdate';
|
||||
import { StrictMode, ReactElement } from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { render, RenderOptions } from '@testing-library/react';
|
||||
|
||||
export function setMockDate(dateString = '2017-09-18T03:30:07.795') {
|
||||
MockDate.set(dateString);
|
||||
@ -18,3 +20,10 @@ export const sleep = async (timeout = 0) => {
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
|
||||
render(ui, { wrapper: StrictMode, ...options });
|
||||
|
||||
export { customRender as render };
|
||||
|
||||
export * from '@testing-library/react';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user