mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
chore: merge master
This commit is contained in:
二货机器人
commit
cf49149ce7
@ -15,6 +15,13 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.22.7
|
||||
|
||||
`2022-08-21`
|
||||
|
||||
- 🐞 Fix Typography visible change some time Tooltip not work with ellipsis. [#37147](https://github.com/ant-design/ant-design/pull/37147)
|
||||
- 🐞 Fix InputNumber that style cannot be customized with controls less variables. [#37070](https://github.com/ant-design/ant-design/pull/37070) [@coldice945](https://github.com/coldice945)
|
||||
|
||||
## 4.22.6
|
||||
|
||||
`2022-08-17`
|
||||
|
||||
@ -15,6 +15,13 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.22.7
|
||||
|
||||
`2022-08-21`
|
||||
|
||||
- 🐞 修复 Typography 可见度切换时有时候省略不会显示 Tooltip 的问题。[#37147](https://github.com/ant-design/ant-design/pull/37147)
|
||||
- 🐞 修复 InputNumber 样式不跟随控件 less 变量改变的问题。[#37070](https://github.com/ant-design/ant-design/pull/37070) [@coldice945](https://github.com/coldice945)
|
||||
|
||||
## 4.22.6
|
||||
|
||||
`2022-08-17`
|
||||
|
||||
@ -2,7 +2,7 @@ import { easeInOutCubic } from '../easings';
|
||||
|
||||
describe('Test easings', () => {
|
||||
it('easeInOutCubic return value', () => {
|
||||
const nums = [];
|
||||
const nums: number[] = [];
|
||||
// eslint-disable-next-line no-plusplus
|
||||
for (let index = 0; index < 5; index++) {
|
||||
nums.push(easeInOutCubic(index, 1, 5, 4));
|
||||
@ -41,7 +41,7 @@ describe('getScroll', () => {
|
||||
});
|
||||
|
||||
it('getScroll documentElement', async () => {
|
||||
const div = {};
|
||||
const div: any = {};
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
|
||||
div.scrollLeft = null;
|
||||
div.scrollTop = null;
|
||||
@ -2,7 +2,7 @@ import { sleep } from '../../../tests/utils';
|
||||
import scrollTo from '../scrollTo';
|
||||
|
||||
describe('Test ScrollTo function', () => {
|
||||
let dateNowMock;
|
||||
let dateNowMock: jest.SpyInstance;
|
||||
|
||||
beforeEach(() => {
|
||||
dateNowMock = jest
|
||||
@ -16,7 +16,7 @@ describe('Test ScrollTo function', () => {
|
||||
});
|
||||
|
||||
it('test scrollTo', async () => {
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
|
||||
window.scrollY = y;
|
||||
window.pageYOffset = y;
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import TransButton from '../transButton';
|
||||
|
||||
describe('transButton component', () => {
|
||||
it('disabled should update style', () => {
|
||||
const wrapper = mount(<TransButton disabled />);
|
||||
expect(wrapper.find('div').first().props().style).toEqual(
|
||||
expect.objectContaining({ pointerEvents: 'none' }),
|
||||
);
|
||||
});
|
||||
});
|
||||
10
components/_util/__tests__/transButton.test.tsx
Normal file
10
components/_util/__tests__/transButton.test.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import TransButton from '../transButton';
|
||||
import { render } from '../../../tests/utils';
|
||||
|
||||
describe('transButton component', () => {
|
||||
it('disabled should update style', () => {
|
||||
const { container } = render(<TransButton disabled />);
|
||||
expect(container.querySelector('div')?.style.pointerEvents).toBe('none');
|
||||
});
|
||||
});
|
||||
@ -1,26 +0,0 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import useSyncState from '../hooks/useSyncState';
|
||||
|
||||
describe('Table', () => {
|
||||
it('useSyncState', () => {
|
||||
const Test = () => {
|
||||
const [getVal, setVal] = useSyncState('light');
|
||||
|
||||
return (
|
||||
<span
|
||||
onClick={() => {
|
||||
setVal('bamboo');
|
||||
}}
|
||||
>
|
||||
{getVal()}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const wrapper = mount(<Test />);
|
||||
expect(wrapper.text()).toEqual('light');
|
||||
wrapper.find('span').simulate('click');
|
||||
expect(wrapper.text()).toEqual('bamboo');
|
||||
});
|
||||
});
|
||||
17
components/_util/__tests__/useSyncState.test.tsx
Normal file
17
components/_util/__tests__/useSyncState.test.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import useSyncState from '../hooks/useSyncState';
|
||||
import { render, fireEvent } from '../../../tests/utils';
|
||||
|
||||
describe('Table', () => {
|
||||
it('useSyncState', () => {
|
||||
const Test: React.FC = () => {
|
||||
const [getVal, setVal] = useSyncState('light');
|
||||
return <span onClick={() => setVal('bamboo')}>{getVal()}</span>;
|
||||
};
|
||||
|
||||
const { container } = render(<Test />);
|
||||
expect(container.querySelector('span')?.innerHTML).toBe('light');
|
||||
fireEvent.click(container.querySelector('span')!);
|
||||
expect(container.querySelector('span')?.innerHTML).toBe('bamboo');
|
||||
});
|
||||
});
|
||||
@ -1,9 +1,8 @@
|
||||
/* eslint-disable class-methods-use-this */
|
||||
import { mount } from 'enzyme';
|
||||
import KeyCode from 'rc-util/lib/KeyCode';
|
||||
import raf from 'rc-util/lib/raf';
|
||||
import React from 'react';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import { sleep, render, fireEvent } from '../../../tests/utils';
|
||||
import getDataOrAriaProps from '../getDataOrAriaProps';
|
||||
import delayRaf from '../raf';
|
||||
import { isStyleSupport } from '../styleChecker';
|
||||
@ -141,20 +140,24 @@ describe('Test utils function', () => {
|
||||
|
||||
describe('TransButton', () => {
|
||||
it('can be focus/blur', () => {
|
||||
const ref = React.createRef();
|
||||
mount(<TransButton ref={ref}>TransButton</TransButton>);
|
||||
expect(typeof ref.current.focus).toBe('function');
|
||||
expect(typeof ref.current.blur).toBe('function');
|
||||
const ref = React.createRef<any>();
|
||||
render(<TransButton ref={ref}>TransButton</TransButton>);
|
||||
expect(typeof ref.current?.focus).toBe('function');
|
||||
expect(typeof ref.current?.blur).toBe('function');
|
||||
});
|
||||
|
||||
it('should trigger onClick when press enter', () => {
|
||||
const onClick = jest.fn();
|
||||
const preventDefault = jest.fn();
|
||||
const wrapper = mount(<TransButton onClick={onClick}>TransButton</TransButton>);
|
||||
wrapper.simulate('keyUp', { keyCode: KeyCode.ENTER });
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
wrapper.simulate('keyDown', { keyCode: KeyCode.ENTER, preventDefault });
|
||||
expect(preventDefault).toHaveBeenCalled();
|
||||
|
||||
const { container } = render(<TransButton onClick={onClick}>TransButton</TransButton>);
|
||||
|
||||
// callback should trigger
|
||||
fireEvent.keyUp(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
|
||||
// callback should not trigger
|
||||
fireEvent.keyDown(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
@ -167,7 +170,7 @@ describe('Test utils function', () => {
|
||||
it('isStyleSupport return false in service side', () => {
|
||||
const spy = jest
|
||||
.spyOn(window.document, 'documentElement', 'get')
|
||||
.mockImplementation(() => undefined);
|
||||
.mockImplementation(() => undefined as unknown as HTMLElement);
|
||||
expect(isStyleSupport('color')).toBe(false);
|
||||
expect(isStyleSupport('not-existed')).toBe(false);
|
||||
spy.mockRestore();
|
||||
@ -23,9 +23,7 @@ describe('Test warning', () => {
|
||||
|
||||
expect(value).toBe(undefined);
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
expect(() => {
|
||||
noop();
|
||||
}).not.toThrow();
|
||||
expect(noop).not.toThrow();
|
||||
});
|
||||
|
||||
describe('process.env.NODE_ENV !== "production"', () => {
|
||||
@ -1,7 +1,6 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import { render, sleep } from '../../../tests/utils';
|
||||
import { render, sleep, fireEvent } from '../../../tests/utils';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import Wave from '../wave';
|
||||
|
||||
@ -18,139 +17,155 @@ describe('Wave component', () => {
|
||||
it('isHidden works', () => {
|
||||
const TEST_NODE_ENV = process.env.NODE_ENV;
|
||||
process.env.NODE_ENV = 'development';
|
||||
const wrapper = mount(
|
||||
const { container, unmount } = render(
|
||||
<Wave>
|
||||
<button type="button">button</button>
|
||||
</Wave>,
|
||||
);
|
||||
expect(wrapper.find('button').getDOMNode().className).toBe('');
|
||||
wrapper.find('button').getDOMNode().click();
|
||||
expect(container.querySelector('button')?.className).toBe('');
|
||||
|
||||
container.querySelector('button')?.click();
|
||||
|
||||
expect(
|
||||
wrapper.find('button').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
|
||||
).toBe(false);
|
||||
wrapper.unmount();
|
||||
container.querySelector('button')?.hasAttribute('ant-click-animating-without-extra-node'),
|
||||
).toBeFalsy();
|
||||
unmount();
|
||||
process.env.NODE_ENV = TEST_NODE_ENV;
|
||||
});
|
||||
|
||||
it('isHidden is mocked', () => {
|
||||
const wrapper = mount(
|
||||
const { container, unmount } = render(
|
||||
<Wave>
|
||||
<button type="button">button</button>
|
||||
</Wave>,
|
||||
);
|
||||
expect(wrapper.find('button').getDOMNode().className).toBe('');
|
||||
wrapper.find('button').getDOMNode().click();
|
||||
expect(container.querySelector('button')?.className).toBe('');
|
||||
container.querySelector('button')?.click();
|
||||
expect(
|
||||
wrapper.find('button').getDOMNode().getAttribute('ant-click-animating-without-extra-node'),
|
||||
container.querySelector('button')?.getAttribute('ant-click-animating-without-extra-node'),
|
||||
).toBe('false');
|
||||
wrapper.unmount();
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('wave color is grey', async () => {
|
||||
const wrapper = mount(
|
||||
const { container, unmount } = render(
|
||||
<Wave>
|
||||
<button type="button" style={{ borderColor: 'rgb(0, 0, 0)' }}>
|
||||
button
|
||||
</button>
|
||||
</Wave>,
|
||||
);
|
||||
wrapper.find('button').getDOMNode().click();
|
||||
container.querySelector('button')?.click();
|
||||
await sleep(0);
|
||||
const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
|
||||
const styles = (
|
||||
container.querySelector('button')?.getRootNode() as HTMLButtonElement
|
||||
).getElementsByTagName('style');
|
||||
expect(styles.length).toBe(0);
|
||||
wrapper.unmount();
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('wave color is not grey', async () => {
|
||||
const wrapper = mount(
|
||||
const { container, unmount } = render(
|
||||
<Wave>
|
||||
<button type="button" style={{ borderColor: 'red' }}>
|
||||
button
|
||||
</button>
|
||||
</Wave>,
|
||||
);
|
||||
wrapper.find('button').getDOMNode().click();
|
||||
container.querySelector('button')?.click();
|
||||
await sleep(200);
|
||||
const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
|
||||
const styles = (
|
||||
container.querySelector('button')?.getRootNode() as HTMLButtonElement
|
||||
).getElementsByTagName('style');
|
||||
expect(styles.length).toBe(1);
|
||||
expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: red;');
|
||||
wrapper.unmount();
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('read wave color from border-top-color', async () => {
|
||||
const wrapper = mount(
|
||||
const { container, unmount } = render(
|
||||
<Wave>
|
||||
<div style={{ borderTopColor: 'blue' }}>button</div>
|
||||
</Wave>,
|
||||
);
|
||||
wrapper.find('div').getDOMNode().click();
|
||||
container.querySelector('div')?.click();
|
||||
await sleep(0);
|
||||
const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
|
||||
const styles = (
|
||||
container.querySelector('div')?.getRootNode() as HTMLDivElement
|
||||
).getElementsByTagName('style');
|
||||
expect(styles.length).toBe(1);
|
||||
expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: blue;');
|
||||
wrapper.unmount();
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('read wave color from background color', async () => {
|
||||
const wrapper = mount(
|
||||
const { container, unmount } = render(
|
||||
<Wave>
|
||||
<div style={{ backgroundColor: 'green' }}>button</div>
|
||||
</Wave>,
|
||||
);
|
||||
wrapper.find('div').getDOMNode().click();
|
||||
container.querySelector('div')?.click();
|
||||
await sleep(0);
|
||||
const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
|
||||
const styles = (
|
||||
container.querySelector('div')?.getRootNode() as HTMLDivElement
|
||||
).getElementsByTagName('style');
|
||||
expect(styles.length).toBe(1);
|
||||
expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: green;');
|
||||
wrapper.unmount();
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('read wave color from border firstly', async () => {
|
||||
const wrapper = mount(
|
||||
const { container, unmount } = render(
|
||||
<Wave>
|
||||
<div style={{ borderColor: 'yellow', backgroundColor: 'green' }}>button</div>
|
||||
</Wave>,
|
||||
);
|
||||
wrapper.find('div').getDOMNode().click();
|
||||
container.querySelector('div')?.click();
|
||||
await sleep(0);
|
||||
const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
|
||||
const styles = (
|
||||
container.querySelector('div')?.getRootNode() as HTMLDivElement
|
||||
).getElementsByTagName('style');
|
||||
expect(styles.length).toBe(1);
|
||||
expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: yellow;');
|
||||
wrapper.unmount();
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('hidden element with -leave className', async () => {
|
||||
const wrapper = mount(
|
||||
const { container, unmount } = render(
|
||||
<Wave>
|
||||
<button type="button" className="xx-leave">
|
||||
button
|
||||
</button>
|
||||
</Wave>,
|
||||
);
|
||||
wrapper.find('button').getDOMNode().click();
|
||||
container.querySelector('button')?.click();
|
||||
await sleep(0);
|
||||
const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
|
||||
const styles = (
|
||||
container.querySelector('button')?.getRootNode() as HTMLButtonElement
|
||||
).getElementsByTagName('style');
|
||||
expect(styles.length).toBe(0);
|
||||
wrapper.unmount();
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('ConfigProvider csp', async () => {
|
||||
const wrapper = mount(
|
||||
const { container, unmount } = render(
|
||||
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
|
||||
<Wave>
|
||||
<button type="button">button</button>
|
||||
</Wave>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
wrapper.find('button').getDOMNode().click();
|
||||
container.querySelector('button')?.click();
|
||||
await sleep(0);
|
||||
const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
|
||||
const styles = (
|
||||
container.querySelector('button')?.getRootNode() as HTMLButtonElement
|
||||
).getElementsByTagName('style');
|
||||
expect(styles[0].getAttribute('nonce')).toBe('YourNonceCode');
|
||||
wrapper.unmount();
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('bindAnimationEvent should return when node is null', () => {
|
||||
const ref = React.createRef();
|
||||
const ref = React.createRef<any>();
|
||||
render(
|
||||
<Wave ref={ref}>
|
||||
<button type="button" disabled>
|
||||
@ -162,7 +177,7 @@ describe('Wave component', () => {
|
||||
});
|
||||
|
||||
it('bindAnimationEvent.onClick should return when children is hidden', () => {
|
||||
const ref = React.createRef();
|
||||
const ref = React.createRef<any>();
|
||||
render(
|
||||
<Wave ref={ref}>
|
||||
<button type="button" style={{ display: 'none' }}>
|
||||
@ -174,7 +189,7 @@ describe('Wave component', () => {
|
||||
});
|
||||
|
||||
it('bindAnimationEvent.onClick should return when children is input', () => {
|
||||
const ref = React.createRef();
|
||||
const ref = React.createRef<any>();
|
||||
render(
|
||||
<Wave ref={ref}>
|
||||
<input />
|
||||
@ -185,16 +200,16 @@ describe('Wave component', () => {
|
||||
|
||||
it('should not throw when click it', () => {
|
||||
expect(() => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<Wave>
|
||||
<div />
|
||||
</Wave>,
|
||||
);
|
||||
wrapper.simulate('click');
|
||||
fireEvent.click(container);
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('should not throw when no children', () => {
|
||||
expect(() => mount(<Wave />)).not.toThrow();
|
||||
expect(() => render(<Wave />)).not.toThrow();
|
||||
});
|
||||
});
|
||||
@ -3,7 +3,7 @@ import rcWarning, { resetWarned } from 'rc-util/lib/warning';
|
||||
export { resetWarned };
|
||||
export function noop() {}
|
||||
|
||||
type Warning = (valid: boolean, component: string, message: string) => void;
|
||||
type Warning = (valid: boolean, component: string, message?: string) => void;
|
||||
|
||||
// eslint-disable-next-line import/no-mutable-exports
|
||||
let warning: Warning = noop;
|
||||
|
||||
@ -902,7 +902,6 @@ exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-search-mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -1056,7 +1055,6 @@ exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-search-mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid @checkbox-color;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: @checkbox-border-radius;
|
||||
visibility: hidden;
|
||||
animation: antCheckboxEffect 0.36s ease-in-out;
|
||||
animation-fill-mode: backwards;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,3 @@
|
||||
import { render } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import ConfigProvider from '..';
|
||||
@ -54,72 +53,71 @@ import Transfer from '../../transfer';
|
||||
import Tree from '../../tree';
|
||||
import TreeSelect from '../../tree-select';
|
||||
import Upload from '../../upload';
|
||||
import { render } from '../../../tests/utils';
|
||||
|
||||
jest.mock('rc-util/lib/Portal');
|
||||
|
||||
describe('ConfigProvider', () => {
|
||||
describe('components', () => {
|
||||
function testPair(name, renderComponent) {
|
||||
const isArray = ['Menu', 'TimePicker', 'Tooltip'].includes(name);
|
||||
describe(`${name}`, () => {
|
||||
// normal
|
||||
it('normal', () => {
|
||||
expect(render(renderComponent({}))).toMatchSnapshot();
|
||||
const { container } = render(renderComponent({}));
|
||||
expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// prefixCls
|
||||
it('prefixCls', () => {
|
||||
expect(render(renderComponent({ prefixCls: `prefix-${name}` }))).toMatchSnapshot();
|
||||
const { container } = render(renderComponent({ prefixCls: `prefix-${name}` }));
|
||||
expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// configProvider
|
||||
it('configProvider', () => {
|
||||
expect(
|
||||
render(
|
||||
<ConfigProvider pageHeader={{ ghost: false }} prefixCls="config">
|
||||
{renderComponent({})}
|
||||
</ConfigProvider>,
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
const { container } = render(
|
||||
<ConfigProvider pageHeader={{ ghost: false }} prefixCls="config">
|
||||
{renderComponent({})}
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('configProvider componentSize large', () => {
|
||||
expect(
|
||||
render(
|
||||
<ConfigProvider componentSize="large" prefixCls="config">
|
||||
{renderComponent({})}
|
||||
</ConfigProvider>,
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
const { container } = render(
|
||||
<ConfigProvider componentSize="large" prefixCls="config">
|
||||
{renderComponent({})}
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('configProvider componentSize middle', () => {
|
||||
expect(
|
||||
render(
|
||||
<ConfigProvider componentSize="middle" prefixCls="config">
|
||||
{renderComponent({})}
|
||||
</ConfigProvider>,
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
const { container } = render(
|
||||
<ConfigProvider componentSize="middle" prefixCls="config">
|
||||
{renderComponent({})}
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('configProvider componentDisabled', () => {
|
||||
expect(
|
||||
render(
|
||||
<ConfigProvider componentDisabled prefixCls="config">
|
||||
{renderComponent({})}
|
||||
</ConfigProvider>,
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
const { container } = render(
|
||||
<ConfigProvider componentDisabled prefixCls="config">
|
||||
{renderComponent({})}
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('configProvider virtual and dropdownMatchSelectWidth', () => {
|
||||
expect(
|
||||
render(
|
||||
<ConfigProvider virtual={false} dropdownMatchSelectWidth={false}>
|
||||
{renderComponent({})}
|
||||
</ConfigProvider>,
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
const { container } = render(
|
||||
<ConfigProvider virtual={false} dropdownMatchSelectWidth={false}>
|
||||
{renderComponent({})}
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(isArray ? Array.from(container.children) : container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -147,9 +145,7 @@ describe('ConfigProvider', () => {
|
||||
|
||||
// Badge
|
||||
testPair('Badge', props => {
|
||||
const newProps = {
|
||||
...props,
|
||||
};
|
||||
const newProps = { ...props };
|
||||
|
||||
// Hook for additional `scrollNumberPrefixCls` prop
|
||||
if (props.prefixCls) {
|
||||
@ -161,7 +157,6 @@ describe('ConfigProvider', () => {
|
||||
<Badge {...newProps} count={5}>
|
||||
<span />
|
||||
</Badge>
|
||||
|
||||
<Badge {...newProps} dot>
|
||||
<span />
|
||||
</Badge>
|
||||
@ -230,7 +225,7 @@ describe('ConfigProvider', () => {
|
||||
// Collapse
|
||||
testPair('Collapse', props => (
|
||||
<Collapse {...props}>
|
||||
<Collapse.Panel header="Bamboo">
|
||||
<Collapse.Panel key="Collapse" header="Bamboo">
|
||||
<p>Light</p>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
@ -509,19 +504,11 @@ describe('ConfigProvider', () => {
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
filters: [
|
||||
{
|
||||
text: 'Joe',
|
||||
value: 'Joe',
|
||||
},
|
||||
{ text: 'Joe', value: 'Joe' },
|
||||
{
|
||||
text: 'Submenu',
|
||||
value: 'Submenu',
|
||||
children: [
|
||||
{
|
||||
text: 'Green',
|
||||
value: 'Green',
|
||||
},
|
||||
],
|
||||
children: [{ text: 'Green', value: 'Green' }],
|
||||
},
|
||||
],
|
||||
filterDropdownOpen: true,
|
||||
@ -581,7 +568,6 @@ describe('ConfigProvider', () => {
|
||||
<Tree {...props}>
|
||||
<Tree.TreeNode title="bamboo" />
|
||||
</Tree>
|
||||
|
||||
<Tree.DirectoryTree {...props}>
|
||||
<Tree.TreeNode title="bamboo" />
|
||||
</Tree.DirectoryTree>
|
||||
@ -597,16 +583,7 @@ describe('ConfigProvider', () => {
|
||||
|
||||
// Upload
|
||||
testPair('Upload', props => (
|
||||
<Upload
|
||||
{...props}
|
||||
defaultFileList={[
|
||||
{
|
||||
uid: '1',
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Upload {...props} defaultFileList={[{ uid: '1', name: 'xxx.png', status: 'done' }]}>
|
||||
<span />
|
||||
</Upload>
|
||||
));
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import ConfigProvider from '..';
|
||||
import Cascader from '../../cascader';
|
||||
import DatePicker from '../../date-picker';
|
||||
import Drawer from '../../drawer';
|
||||
import Slider from '../../slider';
|
||||
import { render, fireEvent } from '../../../tests/utils';
|
||||
|
||||
describe('ConfigProvider.GetPopupContainer', () => {
|
||||
it('Datepicker', () => {
|
||||
const getPopupContainer = jest.fn(node => node.parentNode);
|
||||
mount(
|
||||
render(
|
||||
<ConfigProvider getPopupContainer={getPopupContainer}>
|
||||
<DatePicker open />
|
||||
</ConfigProvider>,
|
||||
@ -19,29 +19,29 @@ describe('ConfigProvider.GetPopupContainer', () => {
|
||||
|
||||
it('Slider', () => {
|
||||
const getPopupContainer = jest.fn(node => node.parentNode);
|
||||
const wrapper = mount(
|
||||
const wrapper = render(
|
||||
<ConfigProvider getPopupContainer={getPopupContainer}>
|
||||
<Slider />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
wrapper.find('.ant-slider-handle').first().simulate('mouseenter');
|
||||
fireEvent.mouseEnter(wrapper.container.querySelector('.ant-slider-handle')!);
|
||||
expect(getPopupContainer).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Drawer', () => {
|
||||
const getPopupContainer = jest.fn(node => node.parentNode);
|
||||
const Demo = ({ visible }) => (
|
||||
const Demo: React.FC<{ visible?: boolean }> = ({ visible }) => (
|
||||
<ConfigProvider getPopupContainer={getPopupContainer}>
|
||||
<Drawer visible={visible} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
mount(<Demo visible />);
|
||||
render(<Demo visible />);
|
||||
expect(getPopupContainer).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Cascader', () => {
|
||||
const getPopupContainer = jest.fn(node => node.parentNode);
|
||||
mount(<Cascader getPopupContainer={getPopupContainer} open />);
|
||||
render(<Cascader getPopupContainer={getPopupContainer} open />);
|
||||
expect(getPopupContainer).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@ -1,4 +1,3 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import ConfigProvider from '..';
|
||||
@ -16,9 +15,8 @@ describe('ConfigProvider.Form', () => {
|
||||
});
|
||||
|
||||
describe('form validateMessages', () => {
|
||||
const renderComponent = ({ validateMessages }) => {
|
||||
const formRef = React.createRef();
|
||||
|
||||
const renderComponent = ({ validateMessages }: { validateMessages?: any }) => {
|
||||
const formRef = React.createRef<any>();
|
||||
const { container } = render(
|
||||
<ConfigProvider locale={zhCN} form={{ validateMessages }}>
|
||||
<Form ref={formRef} initialValues={{ age: 18 }}>
|
||||
@ -31,8 +29,7 @@ describe('ConfigProvider.Form', () => {
|
||||
</Form>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
return [container, formRef];
|
||||
return [container, formRef] as const;
|
||||
};
|
||||
|
||||
it('set locale zhCN', async () => {
|
||||
@ -40,7 +37,7 @@ describe('ConfigProvider.Form', () => {
|
||||
|
||||
await act(async () => {
|
||||
try {
|
||||
await formRef.current.validateFields();
|
||||
await formRef.current?.validateFields();
|
||||
} catch (e) {
|
||||
// Do nothing
|
||||
}
|
||||
@ -63,7 +60,7 @@ describe('ConfigProvider.Form', () => {
|
||||
|
||||
await act(async () => {
|
||||
try {
|
||||
await formRef.current.validateFields();
|
||||
await formRef.current?.validateFields();
|
||||
} catch (e) {
|
||||
// Do nothing
|
||||
}
|
||||
@ -86,8 +83,8 @@ describe('ConfigProvider.Form', () => {
|
||||
});
|
||||
|
||||
describe('form requiredMark', () => {
|
||||
it('set requiredMark optional', async () => {
|
||||
const wrapper = mount(
|
||||
it('set requiredMark optional', () => {
|
||||
const { container } = render(
|
||||
<ConfigProvider form={{ requiredMark: 'optional' }}>
|
||||
<Form initialValues={{ age: 18 }}>
|
||||
<Form.Item name="age" label="年龄" rules={[{ type: 'number', len: 17 }]}>
|
||||
@ -96,14 +93,13 @@ describe('ConfigProvider.Form', () => {
|
||||
</Form>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('form colon', () => {
|
||||
it('set colon false', async () => {
|
||||
const wrapper = mount(
|
||||
it('set colon false', () => {
|
||||
const { container } = render(
|
||||
<ConfigProvider form={{ colon: false }}>
|
||||
<Form>
|
||||
<Form.Item label="没有冒号">
|
||||
@ -112,12 +108,11 @@ describe('ConfigProvider.Form', () => {
|
||||
</Form>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.exists('.ant-form-item-no-colon')).toBeTruthy();
|
||||
expect(container.querySelector('.ant-form-item-no-colon')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('set colon default', async () => {
|
||||
const wrapper = mount(
|
||||
it('set colon default', () => {
|
||||
const { container } = render(
|
||||
<ConfigProvider>
|
||||
<Form>
|
||||
<Form.Item label="姓名">
|
||||
@ -126,8 +121,7 @@ describe('ConfigProvider.Form', () => {
|
||||
</Form>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.exists('.ant-form-item-no-colon')).toBeFalsy();
|
||||
expect(container.querySelector('.ant-form-item-no-colon')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,7 +1,7 @@
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import IconContext from '@ant-design/icons/lib/components/Context';
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import { render } from '../../../tests/utils';
|
||||
import ConfigProvider from '..';
|
||||
|
||||
describe('ConfigProvider.Icon', () => {
|
||||
@ -12,24 +12,23 @@ describe('ConfigProvider.Icon', () => {
|
||||
|
||||
afterEach(() => {
|
||||
document.querySelectorAll('style').forEach(style => {
|
||||
style.parentNode.removeChild(style);
|
||||
style.parentNode?.removeChild(style);
|
||||
});
|
||||
});
|
||||
|
||||
describe('csp', () => {
|
||||
it('raw', () => {
|
||||
mount(
|
||||
render(
|
||||
<ConfigProvider csp={{ nonce: 'little' }}>
|
||||
<SmileOutlined />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
const styleNode = document.querySelector('style');
|
||||
expect(styleNode.nonce).toEqual('little');
|
||||
expect(styleNode?.nonce).toEqual('little');
|
||||
});
|
||||
|
||||
it('mix with iconPrefixCls', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
|
||||
<SmileOutlined />
|
||||
</ConfigProvider>,
|
||||
@ -37,18 +36,18 @@ describe('ConfigProvider.Icon', () => {
|
||||
|
||||
const styleNode = document.querySelector('style');
|
||||
|
||||
expect(wrapper.exists('.bamboo-smile')).toBeTruthy();
|
||||
expect(styleNode.nonce).toEqual('light');
|
||||
expect(container.querySelector('.bamboo-smile')).toBeTruthy();
|
||||
expect(styleNode?.nonce).toEqual('light');
|
||||
});
|
||||
});
|
||||
|
||||
it('nest', () => {
|
||||
const Checker = () => {
|
||||
const { csp } = React.useContext(IconContext);
|
||||
return <div id="csp">{csp.nonce}</div>;
|
||||
return <div id="csp">{csp?.nonce}</div>;
|
||||
};
|
||||
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
|
||||
<ConfigProvider>
|
||||
<SmileOutlined />
|
||||
@ -59,8 +58,8 @@ describe('ConfigProvider.Icon', () => {
|
||||
|
||||
const styleNode = document.querySelector('style');
|
||||
|
||||
expect(wrapper.exists('.bamboo-smile')).toBeTruthy();
|
||||
expect(styleNode.nonce).toEqual('light');
|
||||
expect(wrapper.find('#csp').text()).toEqual('light');
|
||||
expect(container.querySelector('.bamboo-smile')).toBeTruthy();
|
||||
expect(styleNode?.nonce).toEqual('light');
|
||||
expect(container.querySelector('#csp')?.innerHTML).toEqual('light');
|
||||
});
|
||||
});
|
||||
@ -1,9 +1,9 @@
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import { mount } from 'enzyme';
|
||||
import React, { useState } from 'react';
|
||||
import type { ConfigConsumerProps } from '..';
|
||||
import ConfigProvider, { ConfigContext } from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import { fireEvent, render } from '../../../tests/utils';
|
||||
import { act, fireEvent, render } from '../../../tests/utils';
|
||||
import Button from '../../button';
|
||||
import Input from '../../input';
|
||||
import Table from '../../table';
|
||||
@ -16,38 +16,49 @@ describe('ConfigProvider', () => {
|
||||
));
|
||||
|
||||
it('Content Security Policy', () => {
|
||||
jest.useFakeTimers();
|
||||
|
||||
const csp = { nonce: 'test-antd' };
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<ConfigProvider csp={csp}>
|
||||
<Button />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('InternalWave').instance().csp).toBe(csp);
|
||||
fireEvent.click(container.querySelector('button')!);
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
const styles = Array.from(document.body.querySelectorAll<HTMLStyleElement>('style'));
|
||||
expect(styles[styles.length - 1].nonce).toEqual(csp.nonce);
|
||||
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('autoInsertSpaceInButton', () => {
|
||||
const wrapper = mount(
|
||||
const text = '确定';
|
||||
const { container } = render(
|
||||
<ConfigProvider autoInsertSpaceInButton={false}>
|
||||
<Button>确定</Button>
|
||||
<Button>{text}</Button>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('Button').text()).toBe('确定');
|
||||
expect(container.querySelector('span')?.innerHTML).toBe(text);
|
||||
});
|
||||
|
||||
it('renderEmpty', () => {
|
||||
const wrapper = mount(
|
||||
<ConfigProvider renderEmpty={() => <div>empty placeholder</div>}>
|
||||
const text = 'empty placeholder';
|
||||
const { container } = render(
|
||||
<ConfigProvider renderEmpty={() => <div>{text}</div>}>
|
||||
<Table />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.text()).toContain('empty placeholder');
|
||||
expect(container.querySelector('.ant-table-placeholder')?.querySelector('div')?.innerHTML).toBe(
|
||||
text,
|
||||
);
|
||||
});
|
||||
|
||||
it('nest prefixCls', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<ConfigProvider prefixCls="bamboo">
|
||||
<ConfigProvider>
|
||||
<Button />
|
||||
@ -55,11 +66,11 @@ describe('ConfigProvider', () => {
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.exists('button.bamboo-btn')).toBeTruthy();
|
||||
expect(container.querySelector('button.bamboo-btn')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('dynamic prefixCls', () => {
|
||||
const DynamicPrefixCls = () => {
|
||||
const DynamicPrefixCls: React.FC = () => {
|
||||
const [prefixCls, setPrefixCls] = useState('bamboo');
|
||||
return (
|
||||
<div>
|
||||
@ -78,37 +89,36 @@ describe('ConfigProvider', () => {
|
||||
const { container } = render(<DynamicPrefixCls />);
|
||||
|
||||
expect(container.querySelector('button.bamboo-btn')).toBeTruthy();
|
||||
fireEvent.click(container.querySelector('.toggle-button'));
|
||||
fireEvent.click(container.querySelector('.toggle-button')!);
|
||||
expect(container.querySelector('button.light-btn')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('iconPrefixCls', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<ConfigProvider iconPrefixCls="bamboo">
|
||||
<SmileOutlined />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('[role="img"]').hasClass('bamboo')).toBeTruthy();
|
||||
expect(wrapper.find('[role="img"]').hasClass('bamboo-smile')).toBeTruthy();
|
||||
expect(container.querySelector('[role="img"]')).toHaveClass('bamboo');
|
||||
expect(container.querySelector('[role="img"]')).toHaveClass('bamboo-smile');
|
||||
});
|
||||
|
||||
it('input autoComplete', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<ConfigProvider input={{ autoComplete: 'off' }}>
|
||||
<Input />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('input').props().autoComplete).toEqual('off');
|
||||
expect(container.querySelector('input')?.autocomplete).toEqual('off');
|
||||
});
|
||||
|
||||
it('render empty', () => {
|
||||
let rendered = false;
|
||||
let cacheRenderEmpty;
|
||||
|
||||
const App = () => {
|
||||
const { renderEmpty } = React.useContext(ConfigContext);
|
||||
const App: React.FC = () => {
|
||||
const { renderEmpty } = React.useContext<ConfigConsumerProps>(ConfigContext);
|
||||
rendered = true;
|
||||
cacheRenderEmpty = renderEmpty;
|
||||
return null;
|
||||
@ -1,24 +1,24 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import { closePicker, openPicker, selectCell } from '../../date-picker/__tests__/utils';
|
||||
import ConfigProvider from '..';
|
||||
import DatePicker from '../../date-picker';
|
||||
import { closePicker, openPicker, selectCell } from '../../date-picker/__tests__/utils';
|
||||
import type { Locale } from '../../locale-provider';
|
||||
import LocaleProvider from '../../locale-provider';
|
||||
import enUS from '../../locale/en_US';
|
||||
import zhCN from '../../locale/zh_CN';
|
||||
import Modal from '../../modal';
|
||||
import Pagination from '../../pagination';
|
||||
import TimePicker from '../../time-picker';
|
||||
import { act } from '../../../tests/utils';
|
||||
import { act, render, fireEvent } from '../../../tests/utils';
|
||||
|
||||
describe('ConfigProvider.Locale', () => {
|
||||
function $$(className) {
|
||||
function $$(className: string): NodeListOf<Element> {
|
||||
return document.body.querySelectorAll(className);
|
||||
}
|
||||
|
||||
it('not throw', () => {
|
||||
mount(
|
||||
<ConfigProvider locale={{}}>
|
||||
render(
|
||||
<ConfigProvider locale={{} as Locale}>
|
||||
<span />
|
||||
<span />
|
||||
</ConfigProvider>,
|
||||
@ -28,23 +28,16 @@ describe('ConfigProvider.Locale', () => {
|
||||
// https://github.com/ant-design/ant-design/issues/18731
|
||||
it('should not reset locale for Modal', () => {
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
showButton: false,
|
||||
};
|
||||
state = { showButton: false };
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({
|
||||
showButton: true,
|
||||
});
|
||||
this.setState({ showButton: true });
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
openConfirm = () => {
|
||||
jest.useFakeTimers();
|
||||
Modal.confirm({
|
||||
title: 'title',
|
||||
content: 'Some descriptions',
|
||||
});
|
||||
Modal.confirm({ title: 'title', content: 'Some descriptions' });
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
@ -66,24 +59,24 @@ describe('ConfigProvider.Locale', () => {
|
||||
}
|
||||
}
|
||||
|
||||
const wrapper = mount(<App />);
|
||||
wrapper.find('button').simulate('click');
|
||||
const wrapper = render(<App />);
|
||||
fireEvent.click(wrapper.container.querySelector('button')!);
|
||||
expect($$('.ant-btn-primary')[0].textContent).toBe('OK');
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/31592
|
||||
it('should not reset the component state when switching locale', () => {
|
||||
const wrapper = mount(
|
||||
const wrapper = render(
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<DatePicker />
|
||||
<Pagination total={50} />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
const datepickerInitProps = wrapper.find('.ant-picker-input input').props();
|
||||
expect(datepickerInitProps.value).toBe('');
|
||||
expect(datepickerInitProps.placeholder).toBe('请选择日期');
|
||||
expect(wrapper.find('.ant-pagination-item-1').props().className).toContain(
|
||||
const datepicke = wrapper.container.querySelector<HTMLInputElement>('.ant-picker-input input');
|
||||
expect(datepicke?.value).toBe('');
|
||||
expect(datepicke?.placeholder).toBe('请选择日期');
|
||||
expect(wrapper.container.querySelector('.ant-pagination-item-1')?.className).toContain(
|
||||
'ant-pagination-item-active',
|
||||
);
|
||||
|
||||
@ -91,58 +84,68 @@ describe('ConfigProvider.Locale', () => {
|
||||
selectCell(wrapper, 10);
|
||||
closePicker(wrapper);
|
||||
|
||||
expect(wrapper.find('.ant-picker-input input').props().value).not.toBe('');
|
||||
expect(
|
||||
wrapper.container.querySelector<HTMLInputElement>('.ant-picker-input input')?.value,
|
||||
).not.toBe('');
|
||||
wrapper.rerender(
|
||||
<ConfigProvider locale={{} as Locale}>
|
||||
<DatePicker />
|
||||
<Pagination total={50} />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
wrapper.setProps({ locale: {} });
|
||||
wrapper.find('.ant-pagination-item-3').simulate('click');
|
||||
fireEvent.click(wrapper.container.querySelector('.ant-pagination-item-3')!);
|
||||
|
||||
const datepickerProps = wrapper.find('.ant-picker-input input').props();
|
||||
expect(datepickerProps.placeholder).not.toBe('请选择日期');
|
||||
expect(datepickerProps.value).not.toBe('');
|
||||
expect(datepickerProps.value).toContain('-10');
|
||||
const datepicker = wrapper.container.querySelector<HTMLInputElement>('.ant-picker-input input');
|
||||
|
||||
expect(wrapper.find('.ant-pagination-item-3').props().className).toContain(
|
||||
expect(datepicker?.placeholder).not.toBe('请选择日期');
|
||||
expect(datepicker?.value).not.toBe('');
|
||||
expect(datepicker?.value).toContain('-10');
|
||||
|
||||
expect(wrapper.container.querySelector('.ant-pagination-item-3')?.className).toContain(
|
||||
'ant-pagination-item-active',
|
||||
);
|
||||
});
|
||||
|
||||
describe('support legacy LocaleProvider', () => {
|
||||
function testLocale(wrapper) {
|
||||
expect(wrapper.find('input').props().placeholder).toBe(zhCN.TimePicker.placeholder);
|
||||
function testLocale(wrapper: ReturnType<typeof render>): void {
|
||||
expect(wrapper.container.querySelector('input')?.placeholder).toBe(
|
||||
zhCN.TimePicker?.placeholder,
|
||||
);
|
||||
}
|
||||
|
||||
it('LocaleProvider', () => {
|
||||
const wrapper = mount(
|
||||
<LocaleProvider locale={zhCN}>
|
||||
<TimePicker />
|
||||
</LocaleProvider>,
|
||||
testLocale(
|
||||
render(
|
||||
<LocaleProvider locale={zhCN}>
|
||||
<TimePicker />
|
||||
</LocaleProvider>,
|
||||
),
|
||||
);
|
||||
|
||||
testLocale(wrapper);
|
||||
});
|
||||
|
||||
it('LocaleProvider > ConfigProvider', () => {
|
||||
const wrapper = mount(
|
||||
<LocaleProvider locale={zhCN}>
|
||||
<ConfigProvider>
|
||||
<TimePicker />
|
||||
</ConfigProvider>
|
||||
</LocaleProvider>,
|
||||
testLocale(
|
||||
render(
|
||||
<LocaleProvider locale={zhCN}>
|
||||
<ConfigProvider>
|
||||
<TimePicker />
|
||||
</ConfigProvider>
|
||||
</LocaleProvider>,
|
||||
),
|
||||
);
|
||||
|
||||
testLocale(wrapper);
|
||||
});
|
||||
|
||||
it('ConfigProvider > ConfigProvider', () => {
|
||||
const wrapper = mount(
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<ConfigProvider>
|
||||
<TimePicker />
|
||||
</ConfigProvider>
|
||||
</ConfigProvider>,
|
||||
testLocale(
|
||||
render(
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<ConfigProvider>
|
||||
<TimePicker />
|
||||
</ConfigProvider>
|
||||
</ConfigProvider>,
|
||||
),
|
||||
);
|
||||
|
||||
testLocale(wrapper);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,16 +1,20 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React, { useState } from 'react';
|
||||
import ConfigProvider from '..';
|
||||
import Tooltip from '../../tooltip';
|
||||
import { pureRender, fireEvent } from '../../../tests/utils';
|
||||
|
||||
interface Props {
|
||||
spy: () => void;
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/27617
|
||||
describe('ConfigProvider', () => {
|
||||
const Child = ({ spy }) => {
|
||||
const Child: React.FC<Props> = ({ spy }) => {
|
||||
React.useEffect(() => spy());
|
||||
return <div />;
|
||||
};
|
||||
|
||||
const Sibling = ({ spy }) => (
|
||||
const Sibling: React.FC<Props> = ({ spy }) => (
|
||||
<Tooltip>
|
||||
<Child spy={spy} />
|
||||
</Tooltip>
|
||||
@ -19,7 +23,7 @@ describe('ConfigProvider', () => {
|
||||
it('should not generate new context config when render', () => {
|
||||
const MemoedSibling = React.memo(Sibling);
|
||||
const spy = jest.fn();
|
||||
const App = () => {
|
||||
const App: React.FC = () => {
|
||||
const [pageHeader, setPageHeader] = useState({ ghost: true });
|
||||
const [, forceRender] = React.useReducer(v => v + 1, 1);
|
||||
|
||||
@ -40,18 +44,19 @@ describe('ConfigProvider', () => {
|
||||
);
|
||||
};
|
||||
|
||||
const wrapper = mount(<App />);
|
||||
wrapper.find('.render').simulate('click');
|
||||
const { container } = pureRender(<App />);
|
||||
|
||||
fireEvent.click(container.querySelector('.render')!);
|
||||
expect(spy.mock.calls.length).toEqual(1);
|
||||
|
||||
wrapper.find('.setState').simulate('click');
|
||||
fireEvent.click(container.querySelector('.setState')!);
|
||||
expect(spy.mock.calls.length).toEqual(2);
|
||||
});
|
||||
|
||||
it('should not generate new context config in nested ConfigProvider when render', () => {
|
||||
const MemoedSibling = React.memo(Sibling);
|
||||
const spy = jest.fn();
|
||||
const App = () => {
|
||||
const App: React.FC = () => {
|
||||
const [pageHeader, setPageHeader] = useState({ ghost: true });
|
||||
const [, forceRender] = React.useReducer(v => v + 1, 1);
|
||||
|
||||
@ -74,11 +79,12 @@ describe('ConfigProvider', () => {
|
||||
);
|
||||
};
|
||||
|
||||
const wrapper = mount(<App />);
|
||||
wrapper.find('.render').simulate('click');
|
||||
const { container } = pureRender(<App />);
|
||||
|
||||
fireEvent.click(container.querySelector('.render')!);
|
||||
expect(spy.mock.calls.length).toEqual(1);
|
||||
|
||||
wrapper.find('.setState').simulate('click');
|
||||
fireEvent.click(container.querySelector('.setState')!);
|
||||
expect(spy.mock.calls.length).toEqual(2);
|
||||
});
|
||||
});
|
||||
@ -1,15 +1,14 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import ConfigProvider from '..';
|
||||
import Affix from '../../affix';
|
||||
import Anchor from '../../anchor';
|
||||
import { act } from '../../../tests/utils';
|
||||
import { act, render } from '../../../tests/utils';
|
||||
|
||||
describe('ConfigProvider.getTargetContainer', () => {
|
||||
it('Affix', () => {
|
||||
jest.useFakeTimers();
|
||||
const getTargetContainer = jest.fn(() => window);
|
||||
mount(
|
||||
const getTargetContainer = jest.fn(() => window as unknown as HTMLElement);
|
||||
render(
|
||||
<ConfigProvider getTargetContainer={getTargetContainer}>
|
||||
<Affix>
|
||||
<span />
|
||||
@ -27,8 +26,8 @@ describe('ConfigProvider.getTargetContainer', () => {
|
||||
|
||||
it('Anchor', () => {
|
||||
jest.useFakeTimers();
|
||||
const getTargetContainer = jest.fn(() => window);
|
||||
mount(
|
||||
const getTargetContainer = jest.fn(() => window as unknown as HTMLElement);
|
||||
render(
|
||||
<ConfigProvider getTargetContainer={getTargetContainer}>
|
||||
<Anchor>
|
||||
<Anchor.Link href="#API" title="API" />
|
||||
@ -18,18 +18,16 @@ describe('ConfigProvider.Theme', () => {
|
||||
it(colorName, () => {
|
||||
ConfigProvider.config({
|
||||
prefixCls: 'bamboo',
|
||||
theme: {
|
||||
[colorName]: '#0000FF',
|
||||
},
|
||||
theme: { [colorName]: '#0000FF' },
|
||||
});
|
||||
|
||||
const styles: any[] = Array.from(document.querySelectorAll('style'));
|
||||
const styles: HTMLStyleElement[] = Array.from(document.querySelectorAll('style'));
|
||||
const themeStyle = styles.find(style =>
|
||||
style.getAttribute('rc-util-key').includes('-dynamic-theme'),
|
||||
style.getAttribute('rc-util-key')?.includes('-dynamic-theme'),
|
||||
);
|
||||
expect(themeStyle).toBeTruthy();
|
||||
|
||||
expect(themeStyle.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0, 0, 255)`);
|
||||
expect(themeStyle?.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0, 0, 255)`);
|
||||
});
|
||||
});
|
||||
|
||||
@ -40,9 +38,7 @@ describe('ConfigProvider.Theme', () => {
|
||||
mockCanUseDom = false;
|
||||
expect(canUseDom()).toBeFalsy();
|
||||
|
||||
ConfigProvider.config({
|
||||
theme: {},
|
||||
});
|
||||
ConfigProvider.config({ theme: {} });
|
||||
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: ConfigProvider] SSR do not support dynamic theme with css variables.',
|
||||
|
||||
268
components/date-picker/__tests__/DatePicker.test.tsx
Normal file
268
components/date-picker/__tests__/DatePicker.test.tsx
Normal file
@ -0,0 +1,268 @@
|
||||
import MockDate from 'mockdate';
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import type { TriggerProps } from 'rc-trigger';
|
||||
import { fireEvent, render } from '../../../tests/utils';
|
||||
import DatePicker from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import type { PickerLocale } from '../generatePicker';
|
||||
|
||||
let triggerProps: TriggerProps;
|
||||
|
||||
jest.mock('rc-trigger', () => {
|
||||
let Trigger = jest.requireActual('rc-trigger/lib/mock');
|
||||
Trigger = Trigger.default || Trigger;
|
||||
const h: typeof React = jest.requireActual('react');
|
||||
|
||||
return {
|
||||
default: h.forwardRef<unknown, TriggerProps>((props, ref) => {
|
||||
triggerProps = props;
|
||||
return h.createElement(Trigger, { ref, ...props });
|
||||
}),
|
||||
__esModule: true,
|
||||
};
|
||||
});
|
||||
|
||||
describe('DatePicker', () => {
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
focusTest(DatePicker, { refFocus: true });
|
||||
|
||||
beforeEach(() => {
|
||||
MockDate.set(moment('2016-11-22').valueOf());
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
MockDate.reset();
|
||||
errorSpy.mockReset();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('prop locale should works', () => {
|
||||
const locale = {
|
||||
lang: {
|
||||
locale: 'mk',
|
||||
placeholder: 'Избери дата',
|
||||
rangePlaceholder: ['Начална дата', 'Крайна дата'],
|
||||
today: 'Днес',
|
||||
now: 'Сега',
|
||||
backToToday: 'Към днес',
|
||||
ok: 'Добре',
|
||||
clear: 'Изчистване',
|
||||
month: 'Месец',
|
||||
year: 'Година',
|
||||
timeSelect: 'Избор на час',
|
||||
dateSelect: 'Избор на дата',
|
||||
monthSelect: 'Избор на месец',
|
||||
yearSelect: 'Избор на година',
|
||||
decadeSelect: 'Десетилетие',
|
||||
previousMonth: 'Предишен месец (PageUp)',
|
||||
nextMonth: 'Следващ месец (PageDown)',
|
||||
previousYear: 'Последна година (Control + left)',
|
||||
nextYear: 'Следваща година (Control + right)',
|
||||
previousDecade: 'Предишно десетилетие',
|
||||
nextDecade: 'Следващо десетилетие',
|
||||
previousCentury: 'Последен век',
|
||||
nextCentury: 'Следващ век',
|
||||
yearFormat: 'YYYY',
|
||||
dateFormat: 'D M YYYY',
|
||||
dayFormat: 'D',
|
||||
dateTimeFormat: 'D M YYYY HH:mm:ss',
|
||||
monthBeforeYear: true,
|
||||
},
|
||||
timePickerLocale: {
|
||||
placeholder: 'Избор на час',
|
||||
},
|
||||
};
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD');
|
||||
const wrapper = render(<DatePicker open locale={locale as PickerLocale} value={birthday} />);
|
||||
expect(Array.from(wrapper.container.children)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('disabled date', () => {
|
||||
const disabledDate = (current: any) => current && current < moment().endOf('day');
|
||||
const wrapper = render(<DatePicker disabledDate={disabledDate} open />);
|
||||
expect(Array.from(wrapper.container.children)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('placeholder', () => {
|
||||
const wrapper = render(<DatePicker placeholder={undefined} />);
|
||||
expect(wrapper.container.querySelector('input')?.placeholder).toEqual('Select date');
|
||||
});
|
||||
|
||||
it('showTime={{ showHour: true, showMinute: true }}', () => {
|
||||
const { container } = render(
|
||||
<DatePicker
|
||||
defaultValue={moment()}
|
||||
showTime={{ showHour: true, showMinute: true }}
|
||||
format="YYYY-MM-DD"
|
||||
open
|
||||
/>,
|
||||
);
|
||||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(24);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(60);
|
||||
});
|
||||
|
||||
it('showTime={{ showHour: true, showSecond: true }}', () => {
|
||||
const { container } = render(
|
||||
<DatePicker
|
||||
defaultValue={moment()}
|
||||
showTime={{ showHour: true, showSecond: true }}
|
||||
format="YYYY-MM-DD"
|
||||
open
|
||||
/>,
|
||||
);
|
||||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(24);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(60);
|
||||
});
|
||||
|
||||
it('showTime={{ showMinute: true, showSecond: true }}', () => {
|
||||
const { container } = render(
|
||||
<DatePicker
|
||||
defaultValue={moment()}
|
||||
showTime={{ showMinute: true, showSecond: true }}
|
||||
format="YYYY-MM-DD"
|
||||
open
|
||||
/>,
|
||||
);
|
||||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(60);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(60);
|
||||
});
|
||||
it('showTime should work correctly when format is custom function', () => {
|
||||
const { container } = render(
|
||||
<DatePicker defaultValue={moment()} showTime format={val => val.format('YYYY-MM-DD')} open />,
|
||||
);
|
||||
const fuousEvent = () => {
|
||||
fireEvent.focus(container.querySelector('input')!);
|
||||
};
|
||||
const mouseDownEvent = () => {
|
||||
fireEvent.mouseDown(container.querySelector('input')!);
|
||||
};
|
||||
expect(fuousEvent).not.toThrowError();
|
||||
expect(mouseDownEvent).not.toThrowError();
|
||||
});
|
||||
|
||||
it('12 hours', () => {
|
||||
const { container } = render(
|
||||
<DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
|
||||
);
|
||||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(4);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(12);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(60);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[2]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(60);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[3]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(2);
|
||||
});
|
||||
|
||||
it('24 hours', () => {
|
||||
const { container } = render(
|
||||
<DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
|
||||
);
|
||||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(3);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(24);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(60);
|
||||
expect(
|
||||
container
|
||||
.querySelectorAll('.ant-picker-time-panel-column')?.[2]
|
||||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||||
).toBe(60);
|
||||
});
|
||||
|
||||
it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
|
||||
const startDate = moment('1982-02-12');
|
||||
const endDate = moment('1982-02-22');
|
||||
|
||||
const { container } = render(
|
||||
<DatePicker.RangePicker defaultPickerValue={[startDate, endDate]} showTime open />,
|
||||
);
|
||||
|
||||
const m = container.querySelector('.ant-picker-header-view .ant-picker-month-btn')?.innerHTML;
|
||||
const y = container.querySelector('.ant-picker-header-view .ant-picker-year-btn')?.innerHTML;
|
||||
expect(m).toBe(startDate.format('MMM'));
|
||||
expect(y).toBe(startDate.format('YYYY'));
|
||||
expect(container.querySelectorAll('.ant-picker-time-panel').length).toBe(1);
|
||||
});
|
||||
|
||||
it('placement api work correctly', () => {
|
||||
const { rerender } = render(<DatePicker.RangePicker open placement="topLeft" />);
|
||||
expect(triggerProps?.builtinPlacements).toEqual(
|
||||
expect.objectContaining({
|
||||
topLeft: expect.objectContaining({ offset: [0, -4], points: ['bl', 'tl'] }),
|
||||
}),
|
||||
);
|
||||
|
||||
rerender(<DatePicker.RangePicker open placement="topRight" />);
|
||||
expect(triggerProps?.builtinPlacements).toEqual(
|
||||
expect.objectContaining({
|
||||
topRight: expect.objectContaining({ offset: [0, -4], points: ['br', 'tr'] }),
|
||||
}),
|
||||
);
|
||||
|
||||
rerender(<DatePicker.RangePicker open placement="bottomLeft" />);
|
||||
expect(triggerProps?.builtinPlacements).toEqual(
|
||||
expect.objectContaining({
|
||||
bottomLeft: expect.objectContaining({ offset: [0, 4], points: ['tl', 'bl'] }),
|
||||
}),
|
||||
);
|
||||
|
||||
rerender(<DatePicker.RangePicker open placement="bottomRight" />);
|
||||
expect(triggerProps?.builtinPlacements).toEqual(
|
||||
expect.objectContaining({
|
||||
bottomRight: expect.objectContaining({ offset: [0, 4], points: ['tr', 'br'] }),
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -1,6 +1,6 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import DatePicker from '..';
|
||||
import { render } from '../../../tests/utils';
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
|
||||
const { QuarterPicker } = DatePicker;
|
||||
@ -10,8 +10,8 @@ describe('QuarterPicker', () => {
|
||||
resetWarned();
|
||||
const warnSpy = jest.spyOn(console, 'error');
|
||||
|
||||
const wrapper = mount(<QuarterPicker style={{ width: 400 }} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
const { container } = render(<QuarterPicker style={{ width: 400 }} />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
|
||||
expect(warnSpy).toHaveBeenCalledWith(
|
||||
"Warning: [antd: QuarterPicker] DatePicker.QuarterPicker is legacy usage. Please use DatePicker[picker='quarter'] directly.",
|
||||
@ -1,104 +0,0 @@
|
||||
import { mount } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import DatePicker from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import { resetMockDate, setMockDate } from '../../../tests/utils';
|
||||
import enUS from '../locale/en_US';
|
||||
import { closePicker, openPicker, selectCell } from './utils';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
describe('RangePicker', () => {
|
||||
focusTest(RangePicker, { refFocus: true });
|
||||
|
||||
beforeEach(() => {
|
||||
setMockDate();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
resetMockDate();
|
||||
});
|
||||
|
||||
// issue: https://github.com/ant-design/ant-design/issues/5872
|
||||
it('should not throw error when value is reset to `[]`', () => {
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD');
|
||||
const wrapper = mount(<RangePicker value={[birthday, birthday]} open />);
|
||||
wrapper.setProps({ value: [] });
|
||||
|
||||
expect(() => {
|
||||
openPicker(wrapper);
|
||||
selectCell(wrapper, 3);
|
||||
closePicker(wrapper);
|
||||
|
||||
openPicker(wrapper, 1);
|
||||
selectCell(wrapper, 5, 1);
|
||||
closePicker(wrapper, 1);
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('customize separator', () => {
|
||||
const wrapper = mount(<RangePicker separator="test" />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/13302
|
||||
describe('in "month" mode, when the left and right panels select the same month', () => {
|
||||
it('the cell status is correct', () => {
|
||||
class Test extends React.Component {
|
||||
state = {
|
||||
value: null,
|
||||
};
|
||||
|
||||
onPanelChange = value => {
|
||||
this.setState({ value });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<RangePicker
|
||||
value={this.state.value}
|
||||
mode={['month', 'month']}
|
||||
onPanelChange={this.onPanelChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
const wrapper = mount(<Test />);
|
||||
openPicker(wrapper);
|
||||
selectCell(wrapper, 'Feb');
|
||||
openPicker(wrapper, 1);
|
||||
selectCell(wrapper, 'Feb');
|
||||
closePicker(wrapper, 1);
|
||||
const { value } = wrapper.find(Test).state();
|
||||
expect(value[0].isSame(value[1], 'date')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('ranges', () => {
|
||||
it('RangePicker support presetted ranges with Tags', () => {
|
||||
const wrapper = mount(
|
||||
<RangePicker
|
||||
ranges={{
|
||||
Today: [moment(), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
}}
|
||||
open
|
||||
/>,
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
it('placeholder', () => {
|
||||
const wrapper = mount(<RangePicker placeholder={undefined} />);
|
||||
expect(wrapper.find('input').first().props().placeholder).toEqual('Start date');
|
||||
expect(wrapper.find('input').last().props().placeholder).toEqual('End date');
|
||||
});
|
||||
|
||||
it('RangePicker picker quarter placeholder', () => {
|
||||
const wrapper = mount(<RangePicker picker="quarter" locale={enUS} />);
|
||||
expect(wrapper.find('input').at(0).props().placeholder).toEqual('Start quarter');
|
||||
expect(wrapper.find('input').at(1).props().placeholder).toEqual('End quarter');
|
||||
});
|
||||
});
|
||||
115
components/date-picker/__tests__/RangePicker.test.tsx
Normal file
115
components/date-picker/__tests__/RangePicker.test.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
import moment from 'moment';
|
||||
import type { RangeValue } from 'rc-picker/lib/interface';
|
||||
import React from 'react';
|
||||
import DatePicker from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import { render, resetMockDate, setMockDate } from '../../../tests/utils';
|
||||
import enUS from '../locale/en_US';
|
||||
|
||||
import { closePicker, openPicker, selectCell } from './utils';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
describe('RangePicker', () => {
|
||||
focusTest(RangePicker, { refFocus: true });
|
||||
|
||||
beforeEach(() => {
|
||||
setMockDate();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
resetMockDate();
|
||||
});
|
||||
|
||||
// issue: https://github.com/ant-design/ant-design/issues/5872
|
||||
it('should not throw error when value is reset to `[]`', () => {
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD');
|
||||
const wrapper1 = render(<RangePicker value={[birthday, birthday]} open />);
|
||||
const wrapper2 = render(<RangePicker value={[] as unknown as null} open />);
|
||||
|
||||
expect(() => {
|
||||
openPicker(wrapper1);
|
||||
selectCell(wrapper1, 3);
|
||||
closePicker(wrapper1);
|
||||
|
||||
openPicker(wrapper1, 1);
|
||||
selectCell(wrapper1, 5, 1);
|
||||
closePicker(wrapper1, 1);
|
||||
|
||||
openPicker(wrapper2);
|
||||
selectCell(wrapper2, 3);
|
||||
closePicker(wrapper2);
|
||||
|
||||
openPicker(wrapper2, 1);
|
||||
selectCell(wrapper2, 5, 1);
|
||||
closePicker(wrapper2, 1);
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('customize separator', () => {
|
||||
const { container } = render(<RangePicker separator="test" />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/13302
|
||||
describe('in "month" mode, when the left and right panels select the same month', () => {
|
||||
it('the cell status is correct', () => {
|
||||
let rangePickerValue = [] as unknown as RangeValue<any>;
|
||||
class Test extends React.Component {
|
||||
state = { value: null };
|
||||
|
||||
render() {
|
||||
return (
|
||||
<RangePicker
|
||||
value={this.state.value}
|
||||
mode={['month', 'month']}
|
||||
onPanelChange={value => {
|
||||
this.setState({ value });
|
||||
rangePickerValue = value;
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
const wrapper = render(<Test />);
|
||||
|
||||
openPicker(wrapper);
|
||||
selectCell(wrapper, 'Feb');
|
||||
openPicker(wrapper, 1);
|
||||
selectCell(wrapper, 'Feb');
|
||||
closePicker(wrapper, 1);
|
||||
|
||||
const [start, end] = rangePickerValue as [moment.Moment, moment.Moment];
|
||||
|
||||
expect(start.isSame(end, 'date')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('ranges', () => {
|
||||
it('RangePicker support presetted ranges with Tags', () => {
|
||||
const { container } = render(
|
||||
<RangePicker
|
||||
open
|
||||
ranges={{
|
||||
Today: [moment(), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
expect(Array.from(container.children)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
it('placeholder', () => {
|
||||
const { container } = render(<RangePicker placeholder={undefined} />);
|
||||
const inputLists = container.querySelectorAll('input');
|
||||
expect(inputLists[0]?.placeholder).toEqual('Start date');
|
||||
expect(inputLists[inputLists.length - 1].placeholder).toEqual('End date');
|
||||
});
|
||||
|
||||
it('RangePicker picker quarter placeholder', () => {
|
||||
const { container } = render(<RangePicker picker="quarter" locale={enUS} />);
|
||||
expect(container.querySelectorAll('input')[0]?.placeholder).toEqual('Start quarter');
|
||||
expect(container.querySelectorAll('input')[1]?.placeholder).toEqual('End quarter');
|
||||
});
|
||||
});
|
||||
@ -1,8 +1,7 @@
|
||||
import { mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import DatePicker from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import { resetMockDate, setMockDate } from '../../../tests/utils';
|
||||
import { render, resetMockDate, setMockDate } from '../../../tests/utils';
|
||||
|
||||
const { WeekPicker } = DatePicker;
|
||||
|
||||
@ -18,7 +17,7 @@ describe('WeekPicker', () => {
|
||||
focusTest(WeekPicker, { refFocus: true });
|
||||
|
||||
it('should support style prop', () => {
|
||||
const wrapper = mount(<WeekPicker style={{ width: 400 }} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
const { container } = render(<WeekPicker style={{ width: 400 }} />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -3,8 +3,8 @@
|
||||
exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-picker-dropdown"
|
||||
style="opacity:0"
|
||||
class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-panel-container"
|
||||
@ -196,8 +196,8 @@ exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
|
||||
exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-picker-dropdown"
|
||||
style="opacity:0"
|
||||
class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-panel-container"
|
||||
@ -1,12 +1,13 @@
|
||||
import { mount, render } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import DatePicker from '..';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import type { Locale } from '../../locale-provider';
|
||||
import LocaleProvider from '../../locale-provider';
|
||||
import locale from '../../locale-provider/zh_CN';
|
||||
import jaJP from '../../locale/ja_JP';
|
||||
import zhTW from '../locale/zh_TW';
|
||||
import { render } from '../../../tests/utils';
|
||||
|
||||
const { MonthPicker, WeekPicker } = DatePicker;
|
||||
|
||||
@ -23,15 +24,14 @@ describe('Picker format by locale', () => {
|
||||
};
|
||||
|
||||
const date = moment('2000-01-01', 'YYYY-MM-DD');
|
||||
function matchPicker(name, Picker, props) {
|
||||
function matchPicker(name: string, Picker: typeof MonthPicker | typeof WeekPicker, props?: any) {
|
||||
it(name, () => {
|
||||
const wrapper = mount(
|
||||
<LocaleProvider locale={myLocale}>
|
||||
const { container } = render(
|
||||
<LocaleProvider locale={myLocale as Locale}>
|
||||
<Picker value={date} {...props} />
|
||||
</LocaleProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
}
|
||||
|
||||
@ -44,35 +44,33 @@ describe('Picker format by locale', () => {
|
||||
describe('MonthPicker and WeekPicker', () => {
|
||||
it('render MonthPicker', () => {
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
|
||||
const wrapper = mount(<MonthPicker open />);
|
||||
wrapper.setProps({ value: birthday });
|
||||
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
|
||||
const { container } = render(<MonthPicker open value={birthday} />);
|
||||
expect(container.querySelector('div.ant-picker-dropdown')?.parentNode).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('render WeekPicker', () => {
|
||||
const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
|
||||
const wrapper = mount(<WeekPicker open />);
|
||||
wrapper.setProps({ value: birthday });
|
||||
expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
|
||||
const { container } = render(<WeekPicker open value={birthday} />);
|
||||
expect(container.querySelector('div.ant-picker-dropdown')?.parentNode).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Override locale setting of the ConfigProvider', () => {
|
||||
it('DatePicker', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<ConfigProvider locale={jaJP}>
|
||||
<DatePicker locale={zhTW} />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(wrapper.find('input').props().placeholder).toEqual('請選擇日期');
|
||||
expect(container.querySelector('input')?.placeholder).toEqual('請選擇日期');
|
||||
});
|
||||
it('RangePicker', () => {
|
||||
const wrapper = mount(
|
||||
const { container } = render(
|
||||
<ConfigProvider locale={jaJP}>
|
||||
<DatePicker.RangePicker locale={zhTW} />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(wrapper.find('input').at(0).props().placeholder).toEqual('開始日期');
|
||||
expect(wrapper.find('input').at(1).props().placeholder).toEqual('結束日期');
|
||||
expect(container.querySelectorAll('input')[0]?.placeholder).toEqual('開始日期');
|
||||
expect(container.querySelectorAll('input')[1]?.placeholder).toEqual('結束日期');
|
||||
});
|
||||
});
|
||||
@ -1,58 +0,0 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
export function selectDate(wrapper, date, index) {
|
||||
let calendar = wrapper;
|
||||
if (index !== undefined) {
|
||||
calendar = wrapper.find('.ant-calendar-range-part').at(index);
|
||||
}
|
||||
calendar.find({ title: date.format('LL'), role: 'gridcell' }).simulate('click');
|
||||
}
|
||||
|
||||
export function hasSelected(wrapper, date) {
|
||||
return wrapper
|
||||
.find({ title: date.format('LL'), role: 'gridcell' })
|
||||
.hasClass('ant-calendar-selected-day');
|
||||
}
|
||||
|
||||
export function openPanel(wrapper) {
|
||||
wrapper.find('.ant-calendar-picker-input').simulate('click');
|
||||
}
|
||||
|
||||
export function clearInput(wrapper) {
|
||||
wrapper.find('.ant-calendar-picker-clear').hostNodes().simulate('click');
|
||||
}
|
||||
|
||||
export function nextYear(wrapper) {
|
||||
wrapper.find('.ant-calendar-next-year-btn').simulate('click');
|
||||
}
|
||||
|
||||
export function nextMonth(wrapper) {
|
||||
wrapper.find('.ant-calendar-next-month-btn').simulate('click');
|
||||
}
|
||||
|
||||
export function openPicker(wrapper, index = 0) {
|
||||
wrapper.find('input').at(index).simulate('mousedown').simulate('focus');
|
||||
}
|
||||
export function closePicker(wrapper, index = 0) {
|
||||
wrapper.find('input').at(index).simulate('blur');
|
||||
}
|
||||
|
||||
export function selectCell(wrapper, text, index = 0) {
|
||||
let matchCell;
|
||||
|
||||
wrapper
|
||||
.find('table')
|
||||
.at(index)
|
||||
.find('td')
|
||||
.forEach(td => {
|
||||
if (td.text() === String(text) && td.props().className.includes('-in-view')) {
|
||||
matchCell = td;
|
||||
td.simulate('click');
|
||||
}
|
||||
});
|
||||
|
||||
if (!matchCell) {
|
||||
throw new Error('Cell not match in picker panel.');
|
||||
}
|
||||
|
||||
return matchCell;
|
||||
}
|
||||
27
components/date-picker/__tests__/utils.ts
Normal file
27
components/date-picker/__tests__/utils.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { fireEvent } from '../../../tests/utils';
|
||||
import type { render } from '../../../tests/utils';
|
||||
|
||||
export function openPicker(wrapper: ReturnType<typeof render>, index = 0) {
|
||||
fireEvent.mouseDown(wrapper.container?.querySelectorAll('input')?.[index]!);
|
||||
fireEvent.focus(wrapper.container?.querySelectorAll('input')?.[index]!);
|
||||
}
|
||||
|
||||
export function closePicker(wrapper: ReturnType<typeof render>, index = 0) {
|
||||
fireEvent.blur(wrapper.container?.querySelectorAll('input')[index]!);
|
||||
}
|
||||
|
||||
export function selectCell(wrapper: ReturnType<typeof render>, text: string | number, index = 0) {
|
||||
let matchCell: HTMLTableCellElement | null = null;
|
||||
const tds = wrapper.container?.querySelectorAll('table')?.[index]?.querySelectorAll('td');
|
||||
tds.forEach(td => {
|
||||
if (td.querySelector('div')?.innerHTML === String(text) && td.className.includes('-in-view')) {
|
||||
matchCell = td;
|
||||
fireEvent.click(td);
|
||||
}
|
||||
});
|
||||
/* istanbul ignore next */
|
||||
if (!matchCell) {
|
||||
throw new Error('Cell not match in picker panel.');
|
||||
}
|
||||
return matchCell;
|
||||
}
|
||||
@ -95,17 +95,11 @@ export function transPlacement2DropdownAlign(
|
||||
};
|
||||
}
|
||||
default: {
|
||||
return direction === 'rtl'
|
||||
? {
|
||||
points: ['tr', 'br'],
|
||||
offset: [0, 4],
|
||||
overflow,
|
||||
}
|
||||
: {
|
||||
points: ['tl', 'bl'],
|
||||
offset: [0, 4],
|
||||
overflow,
|
||||
};
|
||||
return {
|
||||
points: direction === 'rtl' ? ['tr', 'br'] : ['tl', 'bl'],
|
||||
offset: [0, 4],
|
||||
overflow,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -203,7 +203,6 @@
|
||||
|
||||
// Card
|
||||
// ---
|
||||
@card-padding-base: 16px;
|
||||
@card-head-height: 36px;
|
||||
@card-head-font-size: @card-head-font-size-sm;
|
||||
@card-head-padding: 8.5px;
|
||||
|
||||
@ -81,7 +81,7 @@ describe('Table.expand', () => {
|
||||
fireEvent.click(container.querySelector('.ant-table-row-expand-icon'));
|
||||
expect(container.querySelector('.indent-level-1').style.paddingLeft).toEqual('0px');
|
||||
});
|
||||
|
||||
|
||||
it('has right aria-expanded state', () => {
|
||||
const { container } = render(<Table columns={columns} dataSource={data} />);
|
||||
expect(container.querySelector('[aria-expanded=false]')).toBeTruthy();
|
||||
|
||||
@ -104,6 +104,33 @@ describe('Table.sorter', () => {
|
||||
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
|
||||
});
|
||||
|
||||
it('should have aria-lable if the column is sortable and is not sorted', () => {
|
||||
const { container } = render(
|
||||
createTable(
|
||||
{
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
},
|
||||
{
|
||||
defaultSortOrder: 'descend',
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
const getNameColumn = () => container.querySelector('th');
|
||||
|
||||
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
|
||||
expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
|
||||
expect(getNameColumn().getAttribute('aria-label')).toEqual(null);
|
||||
|
||||
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
|
||||
expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
|
||||
expect(getNameColumn().getAttribute('aria-label')).toEqual(null);
|
||||
|
||||
fireEvent.click(container.querySelector('.ant-table-column-sorters'));
|
||||
expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
|
||||
expect(getNameColumn().getAttribute('aria-label')).toEqual('Name sortable');
|
||||
});
|
||||
|
||||
it('sort records', () => {
|
||||
const { container } = render(createTable());
|
||||
const getNameColumn = () => container.querySelector('th');
|
||||
|
||||
@ -85,7 +85,6 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -94,7 +93,6 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -103,7 +101,6 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -443,7 +440,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -452,7 +448,6 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -749,7 +744,6 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -758,7 +752,6 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -6,6 +6,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
aria-label="Name sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -26,7 +27,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -45,7 +46,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -118,7 +119,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up active"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -137,7 +138,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
||||
@ -35,6 +35,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
aria-label="Name sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -55,7 +56,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -74,7 +75,7 @@ exports[`renders ./components/table/demo/ajax.md extend context correctly 1`] =
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -1516,6 +1517,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Address sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -1542,7 +1544,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -1561,7 +1563,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -3266,6 +3268,7 @@ Array [
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
aria-label="Age sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -3286,7 +3289,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -3305,7 +3308,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -3576,6 +3579,7 @@ Array [
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Action sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -3596,7 +3600,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -3615,7 +3619,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -7531,6 +7535,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Age sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -7551,7 +7556,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -7570,7 +7575,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -8351,6 +8356,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Age sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -8371,7 +8377,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -8390,7 +8396,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -12223,6 +12229,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
aria-label="Age sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
rowspan="3"
|
||||
tabindex="0"
|
||||
@ -12244,7 +12251,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -12263,7 +12270,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -13330,6 +13337,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
aria-label="Name sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -13356,7 +13364,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -13834,7 +13842,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -13853,7 +13861,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down active"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -14676,6 +14684,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
aria-label="Chinese Score sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -14696,7 +14705,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -14715,7 +14724,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -14760,6 +14769,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Math Score sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -14780,7 +14790,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -14799,7 +14809,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -14844,6 +14854,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="English Score sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -14864,7 +14875,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -14883,7 +14894,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -20360,6 +20371,7 @@ Array [
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
aria-label="Name sortable"
|
||||
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -20386,7 +20398,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -20405,7 +20417,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -20665,6 +20677,7 @@ Array [
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Age sortable"
|
||||
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -20685,7 +20698,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -20704,7 +20717,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -20749,6 +20762,7 @@ Array [
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Address sortable"
|
||||
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -20775,7 +20789,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -20794,7 +20808,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -21290,6 +21304,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Amount sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters react-resizable"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -21310,7 +21325,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -21329,7 +21344,7 @@ exports[`renders ./components/table/demo/resizable-column.md extend context corr
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
||||
@ -35,6 +35,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
aria-label="Name sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -55,7 +56,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -74,7 +75,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -1134,6 +1135,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Address sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -1160,7 +1162,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -1179,7 +1181,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -2775,6 +2777,7 @@ Array [
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
aria-label="Age sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -2795,7 +2798,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -2814,7 +2817,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -2873,6 +2876,7 @@ Array [
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Action sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -2893,7 +2897,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -2912,7 +2916,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -5850,6 +5854,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Age sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -5870,7 +5875,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -5889,7 +5894,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -6196,6 +6201,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Age sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -6216,7 +6222,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -6235,7 +6241,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -9394,6 +9400,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
aria-label="Age sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
rowspan="3"
|
||||
tabindex="0"
|
||||
@ -9415,7 +9422,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -9434,7 +9441,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -10361,6 +10368,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
aria-label="Name sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -10387,7 +10395,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -10456,7 +10464,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -10475,7 +10483,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down active"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -11086,6 +11094,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
aria-label="Chinese Score sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -11106,7 +11115,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -11125,7 +11134,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -11146,6 +11155,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Math Score sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -11166,7 +11176,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -11185,7 +11195,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -11206,6 +11216,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="English Score sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -11226,7 +11237,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -11245,7 +11256,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -15421,6 +15432,7 @@ Array [
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
aria-label="Name sortable"
|
||||
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -15447,7 +15459,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -15466,7 +15478,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -15514,6 +15526,7 @@ Array [
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Age sortable"
|
||||
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -15534,7 +15547,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -15553,7 +15566,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -15574,6 +15587,7 @@ Array [
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Address sortable"
|
||||
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -15600,7 +15614,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -15619,7 +15633,7 @@ Array [
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -15903,6 +15917,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Amount sortable"
|
||||
class="ant-table-cell ant-table-column-has-sorters react-resizable"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -15923,7 +15938,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -15942,7 +15957,7 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
role="presentation"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
||||
@ -349,7 +349,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -358,7 +357,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -367,7 +365,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -376,7 +373,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -385,7 +381,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -394,7 +389,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -403,7 +397,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -412,7 +405,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -421,7 +413,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -430,7 +421,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
@ -439,7 +429,6 @@ exports[`Table renders empty table with fixed columns should work 1`] = `
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -132,6 +132,7 @@ function injectSorter<RecordType>(
|
||||
className={classNames(`${prefixCls}-column-sorter-up`, {
|
||||
active: sorterOrder === ASCEND,
|
||||
})}
|
||||
role="presentation"
|
||||
/>
|
||||
);
|
||||
const downNode: React.ReactNode = sortDirections.includes(DESCEND) && (
|
||||
@ -139,6 +140,7 @@ function injectSorter<RecordType>(
|
||||
className={classNames(`${prefixCls}-column-sorter-down`, {
|
||||
active: sorterOrder === DESCEND,
|
||||
})}
|
||||
role="presentation"
|
||||
/>
|
||||
);
|
||||
const { cancelSort, triggerAsc, triggerDesc } = tableLocale || {};
|
||||
@ -210,6 +212,8 @@ function injectSorter<RecordType>(
|
||||
} else {
|
||||
cell['aria-sort'] = 'descending';
|
||||
}
|
||||
} else {
|
||||
cell['aria-label'] = `${renderColumnTitle(column.title, {})} sortable`;
|
||||
}
|
||||
|
||||
cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);
|
||||
|
||||
@ -227,6 +227,7 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
|
||||
const [expanded, setExpanded] = React.useState(false);
|
||||
const [isJsEllipsis, setIsJsEllipsis] = React.useState(false);
|
||||
const [isNativeEllipsis, setIsNativeEllipsis] = React.useState(false);
|
||||
const [isNativeVisible, setIsNativeVisible] = React.useState(true);
|
||||
const [enableEllipsis, ellipsisConfig] = useMergedConfig<EllipsisConfig>(ellipsis, {
|
||||
expandable: false,
|
||||
});
|
||||
@ -307,7 +308,31 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
|
||||
setIsNativeEllipsis(currentEllipsis);
|
||||
}
|
||||
}
|
||||
}, [enableEllipsis, cssEllipsis, children, cssLineClamp]);
|
||||
}, [enableEllipsis, cssEllipsis, children, cssLineClamp, isNativeVisible]);
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/36786
|
||||
// Use IntersectionObserver to check if element is invisible
|
||||
React.useEffect(() => {
|
||||
const textEle = typographyRef.current;
|
||||
if (
|
||||
typeof IntersectionObserver === 'undefined' ||
|
||||
!textEle ||
|
||||
!cssEllipsis ||
|
||||
!mergedEnableEllipsis
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
/* eslint-disable-next-line compat/compat */
|
||||
const observer = new IntersectionObserver(() => {
|
||||
setIsNativeVisible(!!textEle.offsetParent);
|
||||
});
|
||||
observer.observe(textEle!);
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [cssEllipsis, mergedEnableEllipsis]);
|
||||
|
||||
// ========================== Tooltip ===========================
|
||||
let tooltipProps: TooltipProps = {};
|
||||
|
||||
@ -618,6 +618,57 @@ Array [
|
||||
</span>
|
||||
[After]
|
||||
</p>,
|
||||
<div
|
||||
style="display:none"
|
||||
>
|
||||
<span
|
||||
aria-label="默认display none 样式的超长文字， 悬停tooltip失效了"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
|
||||
style="width:100px"
|
||||
>
|
||||
默认display none 样式的超长文字， 悬停tooltip失效了
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
|
||||
>
|
||||
lg
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
>
|
||||
...
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip"
|
||||
style="opacity:0"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
I am ellipsis now!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
|
||||
@ -522,6 +522,33 @@ Array [
|
||||
</span>
|
||||
[After]
|
||||
</p>,
|
||||
<div
|
||||
style="display:none"
|
||||
>
|
||||
<span
|
||||
aria-label="默认display none 样式的超长文字， 悬停tooltip失效了"
|
||||
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
|
||||
style="width:100px"
|
||||
>
|
||||
默认display none 样式的超长文字， 悬停tooltip失效了
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
|
||||
>
|
||||
lg
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:0;white-space:normal;margin:0;padding:0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
>
|
||||
...
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { fireEvent, render, sleep, triggerResize, waitFor } from '../../../tests/utils';
|
||||
import Base from '../Base';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
@ -14,6 +15,7 @@ describe('Typography.Ellipsis', () => {
|
||||
const LINE_STR_COUNT = 20;
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
let mockRectSpy;
|
||||
let getWidthTimes = 0;
|
||||
|
||||
beforeAll(() => {
|
||||
mockRectSpy = spyElementPrototypes(HTMLElement, {
|
||||
@ -26,7 +28,10 @@ describe('Typography.Ellipsis', () => {
|
||||
},
|
||||
},
|
||||
offsetWidth: {
|
||||
get: () => 100,
|
||||
get: () => {
|
||||
getWidthTimes += 1;
|
||||
return 100;
|
||||
},
|
||||
},
|
||||
getBoundingClientRect() {
|
||||
let html = this.innerHTML;
|
||||
@ -39,6 +44,7 @@ describe('Typography.Ellipsis', () => {
|
||||
|
||||
afterEach(() => {
|
||||
errorSpy.mockReset();
|
||||
getWidthTimes = 0;
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
@ -223,28 +229,70 @@ describe('Typography.Ellipsis', () => {
|
||||
|
||||
it('should have custom expand style', async () => {
|
||||
const symbol = 'more';
|
||||
const { container: wrapper } = render(
|
||||
const { container } = render(
|
||||
<Base ellipsis={{ expandable: true, symbol }} component="p">
|
||||
{fullStr}
|
||||
</Base>,
|
||||
);
|
||||
expect(wrapper.querySelector('.ant-typography-expand').textContent).toEqual('more');
|
||||
expect(container.querySelector('.ant-typography-expand').textContent).toEqual('more');
|
||||
});
|
||||
|
||||
it('can use css ellipsis', () => {
|
||||
const { container: wrapper } = render(<Base ellipsis component="p" />);
|
||||
expect(wrapper.querySelectorAll('.ant-typography-ellipsis-single-line').length).toBeGreaterThan(
|
||||
0,
|
||||
);
|
||||
});
|
||||
describe('native css ellipsis', () => {
|
||||
it('can use css ellipsis', () => {
|
||||
const { container } = render(<Base ellipsis component="p" />);
|
||||
expect(container.querySelector('.ant-typography-ellipsis-single-line')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should calculate padding', () => {
|
||||
const { container: wrapper } = render(
|
||||
<Base ellipsis component="p" style={{ paddingTop: '12px', paddingBottom: '12px' }} />,
|
||||
);
|
||||
expect(wrapper.querySelectorAll('.ant-typography-ellipsis-single-line').length).toBeGreaterThan(
|
||||
0,
|
||||
);
|
||||
// https://github.com/ant-design/ant-design/issues/36786
|
||||
it('Tooltip should recheck on parent visible change', () => {
|
||||
const originIntersectionObserver = global.IntersectionObserver;
|
||||
|
||||
let elementChangeCallback;
|
||||
const observeFn = jest.fn();
|
||||
const disconnectFn = jest.fn();
|
||||
|
||||
global.IntersectionObserver = class MockIntersectionObserver {
|
||||
constructor(callback) {
|
||||
elementChangeCallback = callback;
|
||||
}
|
||||
|
||||
observe = observeFn;
|
||||
|
||||
disconnect = disconnectFn;
|
||||
};
|
||||
|
||||
const { container, unmount } = render(<Base ellipsis component="p" />);
|
||||
|
||||
expect(observeFn).toHaveBeenCalled();
|
||||
|
||||
// Hide first
|
||||
act(() => {
|
||||
elementChangeCallback();
|
||||
});
|
||||
|
||||
// Trigger visible should trigger recheck
|
||||
getWidthTimes = 0;
|
||||
Object.defineProperty(container.querySelector('.ant-typography'), 'offsetParent', {
|
||||
get: () => document.body,
|
||||
});
|
||||
act(() => {
|
||||
elementChangeCallback();
|
||||
});
|
||||
|
||||
expect(getWidthTimes).toBeGreaterThan(0);
|
||||
|
||||
unmount();
|
||||
expect(disconnectFn).toHaveBeenCalled();
|
||||
|
||||
global.IntersectionObserver = originIntersectionObserver;
|
||||
});
|
||||
|
||||
it('should calculate padding', () => {
|
||||
const { container } = render(
|
||||
<Base ellipsis component="p" style={{ paddingTop: '12px', paddingBottom: '12px' }} />,
|
||||
);
|
||||
expect(container.querySelector('.ant-typography-ellipsis-single-line')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('should tooltip support', () => {
|
||||
|
||||
@ -26,6 +26,13 @@ const App: React.FC = () => {
|
||||
const [copyable, setCopyable] = useState(false);
|
||||
const [editable, setEditable] = useState(false);
|
||||
const [expandable, setExpandable] = useState(false);
|
||||
const [display, setDisplay] = useState('none');
|
||||
|
||||
React.useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setDisplay('block');
|
||||
}, 100);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -60,6 +67,12 @@ const App: React.FC = () => {
|
||||
<p>
|
||||
[Before]<Text ellipsis>not ellipsis</Text>[After]
|
||||
</p>
|
||||
|
||||
<div style={{ display }}>
|
||||
<Text style={{ width: 100 }} ellipsis={{ tooltip: 'I am ellipsis now!' }}>
|
||||
默认display none 样式的超长文字， 悬停tooltip失效了
|
||||
</Text>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "4.22.6",
|
||||
"version": "4.22.7",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"title": "Ant Design",
|
||||
"keywords": [
|
||||
@ -253,6 +253,7 @@
|
||||
"open": "^8.0.1",
|
||||
"prettier": "^2.3.2",
|
||||
"prettier-plugin-jsdoc": "^0.3.0",
|
||||
"pretty-format": "^28.1.3",
|
||||
"pretty-quick": "^3.0.0",
|
||||
"qs": "^6.10.1",
|
||||
"rc-footer": "^0.6.6",
|
||||
|
||||
@ -1,4 +1,43 @@
|
||||
import { toHaveNoViolations } from 'jest-axe';
|
||||
import '@testing-library/jest-dom';
|
||||
import format, { plugins } from 'pretty-format';
|
||||
|
||||
/**
|
||||
* React 17 & 18 will have different behavior in some special cases:
|
||||
*
|
||||
* React 17:
|
||||
*
|
||||
* ```html
|
||||
* <span> Hello World </span>
|
||||
* ```
|
||||
*
|
||||
* React 18:
|
||||
*
|
||||
* ```html
|
||||
* <span> Hello World </span>
|
||||
* ```
|
||||
*
|
||||
* These diff is nothing important in front end but will break in snapshot diff.
|
||||
*/
|
||||
expect.addSnapshotSerializer({
|
||||
test: element =>
|
||||
typeof HTMLElement !== 'undefined' &&
|
||||
(element instanceof HTMLElement ||
|
||||
element instanceof DocumentFragment ||
|
||||
element instanceof HTMLCollection ||
|
||||
(Array.isArray(element) && element[0] instanceof HTMLElement)),
|
||||
print: element => {
|
||||
const htmlContent = format(element, {
|
||||
plugins: [plugins.DOMCollection, plugins.DOMElement],
|
||||
});
|
||||
|
||||
const filtered = htmlContent
|
||||
.split(/[\n\r]+/)
|
||||
.filter(line => line.trim())
|
||||
.join('\n');
|
||||
|
||||
return filtered;
|
||||
},
|
||||
});
|
||||
|
||||
expect.extend(toHaveNoViolations);
|
||||
|
||||
@ -41,7 +41,14 @@ export function renderHook<T>(func: () => T): { result: React.RefObject<T> } {
|
||||
return { result };
|
||||
}
|
||||
|
||||
export { customRender as render };
|
||||
/**
|
||||
* Pure render like `@testing-lib` render which will not wrap with StrictMode.
|
||||
*
|
||||
* Please only use with render times times of memo usage case.
|
||||
*/
|
||||
const pureRender = render;
|
||||
|
||||
export { customRender as render, pureRender };
|
||||
|
||||
export const triggerResize = (target: Element) => {
|
||||
const originGetBoundingClientRect = target.getBoundingClientRect;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user