mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

test: moving to testing-library in Segmented (#35538)

Browse Source 
* test(Segmented): moving to testing-library

* chore: cleanup

* fix: test

* test: use click instead of change to fire event

* Update index.test.tsx
This commit is contained in:
vagusX 2022-05-13 22:00:01 +08:00 committed by GitHub
parent 6d18e8db40
commit e629b39c20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 135 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
components/segmented/__tests__/__snapshots__/demo.test.js.snap → components/segmented/__tests__/__snapshots__/demo.test.ts.snap
View File

0
components/segmented/__tests__/demo.test.js → components/segmented/__tests__/demo.test.ts
View File

285
components/segmented/__tests__/index.test.tsx
View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons'; import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
import { render, fireEvent } from '../../../tests/utils';
import Segmented from '../index'; import Segmented from '../index';
import type { SegmentedValue } from '../index'; import type { SegmentedValue } from '../index';
import { render } from '../../../tests/utils';
// Make CSSMotion working without transition // Make CSSMotion working without transition
jest.mock('rc-motion/lib/util/motion', () => ({ jest.mock('rc-motion/lib/util/motion', () => ({
@ -16,6 +16,19 @@ jest.mock('rc-motion/lib/util/motion', () => ({
const prefixCls = 'ant-segmented'; const prefixCls = 'ant-segmented';
function expectMatchChecked(container: HTMLElement, checkedList: boolean[]) {
const inputList = Array.from(
container.querySelectorAll<HTMLInputElement>(`.${prefixCls}-item-input`),
);
expect(inputList).toHaveLength(checkedList.length);
inputList.forEach((input, i) => {
const checked = checkedList[i];
expect(input.checked).toBe(checked);
});
}
describe('Segmented', () => { describe('Segmented', () => {
mountTest(Segmented); mountTest(Segmented);
rtlTest(Segmented); rtlTest(Segmented);
@ -29,26 +42,22 @@ describe('Segmented', () => {
}); });
it('render empty segmented', () => { it('render empty segmented', () => {
const wrapper = mount(<Segmented options={[]} />); const { asFragment } = render(<Segmented options={[]} />);
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
}); });
it('render segmented ok', () => { it('render segmented ok', () => {
const wrapper = mount( const { asFragment, container } = render(
<Segmented options={[{ label: 'Daily', value: 'Daily' }, 'Weekly', 'Monthly']} />, <Segmented options={[{ label: 'Daily', value: 'Daily' }, 'Weekly', 'Monthly']} />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expect( expectMatchChecked(container, [true, false, false]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([true, false, false]);
}); });
it('render label with ReactNode', () => { it('render label with ReactNode', () => {
const wrapper = mount( const { asFragment, container } = render(
<Segmented <Segmented
options={[ options={[
{ label: 'Daily', value: 'Daily' }, { label: 'Daily', value: 'Daily' },
@ -58,164 +67,127 @@ describe('Segmented', () => {
/>, />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expect( expectMatchChecked(container, [true, false, false]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([true, false, false]);
expect(wrapper.find('#weekly').at(0).text()).toContain('Weekly'); expect(container.querySelector('#weekly')?.textContent).toContain('Weekly');
expect(wrapper.find('h2').at(0).text()).toContain('Monthly'); expect(container.querySelectorAll('h2')[0].textContent).toContain('Monthly');
}); });
it('render segmented with defaultValue', () => { it('render segmented with defaultValue', () => {
const wrapper = mount( const { container } = render(
<Segmented <Segmented
options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']}
defaultValue="Quarterly" defaultValue="Quarterly"
/>, />,
); );
expect( expectMatchChecked(container, [false, false, false, true, false]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([false, false, false, true, false]);
}); });
it('render segmented with string options', () => { it('render segmented with string options', () => {
const handleValueChange = jest.fn(); const handleValueChange = jest.fn();
const wrapper = mount( const { asFragment, container } = render(
<Segmented options={['Daily', 'Weekly', 'Monthly']} onChange={handleValueChange} />, <Segmented options={['Daily', 'Weekly', 'Monthly']} onChange={handleValueChange} />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expectMatchChecked(container, [true, false, false]);
expect( expect(
wrapper container
.find(`.${prefixCls}-item-input`) .querySelectorAll(`label.${prefixCls}-item`)[0]
.map(el => (el.getDOMNode() as HTMLInputElement).checked), .classList.contains(`${prefixCls}-item-selected`),
).toEqual([true, false, false]);
expect(
wrapper.find(`label.${prefixCls}-item`).at(0).hasClass(`${prefixCls}-item-selected`),
).toBeTruthy(); ).toBeTruthy();
wrapper.find(`.${prefixCls}-item-input`).at(2).simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[2]);
expect(handleValueChange).toBeCalledWith('Monthly'); expect(handleValueChange).toBeCalledWith('Monthly');
expect( expectMatchChecked(container, [false, false, true]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([false, false, true]);
}); });
it('render segmented with numeric options', () => { it('render segmented with numeric options', () => {
const handleValueChange = jest.fn(); const handleValueChange = jest.fn();
const wrapper = mount( const { asFragment, container } = render(
<Segmented options={[1, 2, 3, 4, 5]} onChange={value => handleValueChange(value)} />, <Segmented options={[1, 2, 3, 4, 5]} onChange={value => handleValueChange(value)} />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expect( expectMatchChecked(container, [true, false, false, false, false]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([true, false, false, false, false]);
wrapper.find(`.${prefixCls}-item-input`).last().simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[4]);
expect(handleValueChange).toBeCalledWith(5); expect(handleValueChange).toBeCalledWith(5);
expect( expectMatchChecked(container, [false, false, false, false, true]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([false, false, false, false, true]);
}); });
it('render segmented with mixed options', () => { it('render segmented with mixed options', () => {
const handleValueChange = jest.fn(); const handleValueChange = jest.fn();
const wrapper = mount( const { asFragment, container } = render(
<Segmented <Segmented
options={['Daily', { label: 'Weekly', value: 'Weekly' }, 'Monthly']} options={['Daily', { label: 'Weekly', value: 'Weekly' }, 'Monthly']}
onChange={value => handleValueChange(value)} onChange={value => handleValueChange(value)}
/>, />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expectMatchChecked(container, [true, false, false]);
wrapper.find(`.${prefixCls}-item-input`).at(1).simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[1]);
expect(handleValueChange).toBeCalledWith('Weekly'); expect(handleValueChange).toBeCalledWith('Weekly');
expect( expectMatchChecked(container, [false, true, false]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([false, true, false]);
}); });
it('render segmented with options: disabled', () => { it('render segmented with options: disabled', () => {
const handleValueChange = jest.fn(); const handleValueChange = jest.fn();
const wrapper = mount( const { asFragment, container } = render(
<Segmented <Segmented
options={['Daily', { label: 'Weekly', value: 'Weekly', disabled: true }, 'Monthly']} options={['Daily', { label: 'Weekly', value: 'Weekly', disabled: true }, 'Monthly']}
onChange={value => handleValueChange(value)} onChange={value => handleValueChange(value)}
/>, />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expect( expect(
wrapper.find(`label.${prefixCls}-item`).at(1).hasClass(`${prefixCls}-item-disabled`), container
.querySelectorAll(`label.${prefixCls}-item`)[1]
.classList.contains(`${prefixCls}-item-disabled`),
).toBeTruthy(); ).toBeTruthy();
expect(wrapper.find(`.${prefixCls}-item-input`).at(1).prop('disabled')).toBeTruthy(); expect(container.querySelectorAll(`.${prefixCls}-item-input`)[1]).toHaveAttribute('disabled');
wrapper.find(`.${prefixCls}-item-input`).at(1).simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[1]);
expect(handleValueChange).not.toBeCalled(); expect(handleValueChange).not.toBeCalled();
expect( expectMatchChecked(container, [true, false, false]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([true, false, false]);
wrapper.find(`.${prefixCls}-item-input`).at(2).simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[2]);
expect(handleValueChange).toBeCalledWith('Monthly'); expect(handleValueChange).toBeCalledWith('Monthly');
expect(handleValueChange).toBeCalledTimes(1); expect(handleValueChange).toBeCalledTimes(1);
expect( expectMatchChecked(container, [false, false, true]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([false, false, true]);
}); });
it('render segmented: disabled', () => { it('render segmented: disabled', () => {
const handleValueChange = jest.fn(); const handleValueChange = jest.fn();
const wrapper = mount( const { asFragment, container } = render(
<Segmented <Segmented
disabled disabled
options={['Daily', 'Weekly', 'Monthly']} options={['Daily', 'Weekly', 'Monthly']}
onChange={value => handleValueChange(value)} onChange={value => handleValueChange(value)}
/>, />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expect(wrapper.find(`.${prefixCls}`).hasClass(`${prefixCls}-disabled`)).toBeTruthy(); expect(
container.querySelectorAll(`.${prefixCls}`)[0].classList.contains(`${prefixCls}-disabled`),
).toBeTruthy();
wrapper.find(`.${prefixCls}-item-input`).at(1).simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[1]);
expect(handleValueChange).not.toBeCalled(); expect(handleValueChange).not.toBeCalled();
expect( expectMatchChecked(container, [true, false, false]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([true, false, false]);
wrapper.find(`.${prefixCls}-item-input`).at(2).simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[2]);
expect(handleValueChange).not.toBeCalled(); expect(handleValueChange).not.toBeCalled();
expect( expectMatchChecked(container, [true, false, false]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([true, false, false]);
}); });
it('render segmented with className and other html attributes', () => { it('render segmented with className and other html attributes', () => {
@ -234,11 +206,11 @@ describe('Segmented', () => {
it('render segmented with ref', () => { it('render segmented with ref', () => {
const ref = React.createRef<HTMLDivElement>(); const ref = React.createRef<HTMLDivElement>();
const wrapper = mount( const { container } = render(
<Segmented options={['Daily', 'Monthly', 'Weekly']} defaultValue="Weekly" ref={ref} />, <Segmented options={['Daily', 'Monthly', 'Weekly']} defaultValue="Weekly" ref={ref} />,
); );
expect((wrapper.find(Segmented).getElement() as any).ref).toBe(ref); expect(ref.current).toBe(container.querySelector(`.${prefixCls}`));
}); });
it('render segmented with controlled mode', async () => { it('render segmented with controlled mode', async () => {
@ -249,115 +221,124 @@ describe('Segmented', () => {
render() { render() {
return ( return (
<Segmented <>
options={['Map', 'Transit', 'Satellite']} <Segmented
value={this.state.value} options={['Map', 'Transit', 'Satellite']}
onChange={value => value={this.state.value}
this.setState({ onChange={value =>
value, this.setState({
}) value,
} })
/> }
/>
<div className="value">{this.state.value}</div>
<input
className="control"
onChange={e => {
this.setState({ value: e.target.value });
}}
/>
</>
); );
} }
} }
const wrapper = mount<typeof Demo>(<Demo />); const { container } = render(<Demo />);
wrapper.find('Segmented').find(`.${prefixCls}-item-input`).at(0).simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[0]);
expect(wrapper.find(Demo).state().value).toBe('Map'); expect(container.querySelector('.value')?.textContent).toBe('Map');
wrapper.find('Segmented').find(`.${prefixCls}-item-input`).at(1).simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[1]);
expect(wrapper.find(Demo).state().value).toBe('Transit'); expect(container.querySelector('.value')?.textContent).toBe('Transit');
}); });
it('render segmented with options null/undefined', () => { it('render segmented with options null/undefined', () => {
const handleValueChange = jest.fn(); const handleValueChange = jest.fn();
const wrapper = mount( const { asFragment, container } = render(
<Segmented <Segmented
options={[null, undefined, ''] as any} options={[null, undefined, ''] as any}
disabled disabled
onChange={value => handleValueChange(value)} onChange={value => handleValueChange(value)}
/>, />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expect(wrapper.find(`.${prefixCls}-item-label`).map(n => n.getDOMNode().textContent)).toEqual([ expect(
'', Array.from(container.querySelectorAll(`.${prefixCls}-item-label`)).map(n => n.textContent),
'', ).toEqual(['', '', '']);
'',
]);
}); });
it('render segmented with thumb', () => { it('render segmented with thumb', () => {
const handleValueChange = jest.fn(); const handleValueChange = jest.fn();
const wrapper = mount( const { asFragment, container } = render(
<Segmented <Segmented
options={['Map', 'Transit', 'Satellite']} options={['Map', 'Transit', 'Satellite']}
onChange={value => handleValueChange(value)} onChange={value => handleValueChange(value)}
/>, />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expectMatchChecked(container, [true, false, false]);
expect( expect(
wrapper container
.find(`.${prefixCls}-item-input`) .querySelectorAll(`label.${prefixCls}-item`)[0]
.map(el => (el.getDOMNode() as HTMLInputElement).checked), .classList.contains(`${prefixCls}-item-selected`),
).toEqual([true, false, false]);
expect(
wrapper.find(`label.${prefixCls}-item`).at(0).hasClass(`${prefixCls}-item-selected`),
).toBeTruthy(); ).toBeTruthy();
wrapper.find(`.${prefixCls}-item-input`).at(2).simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[2]);
expect(handleValueChange).toBeCalledWith('Satellite'); expect(handleValueChange).toBeCalledWith('Satellite');
expect( expectMatchChecked(container, [false, false, true]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([false, false, true]);
// thumb appeared // thumb appeared
expect(wrapper.find(`.${prefixCls}-thumb`).length).toBe(1); expect(container.querySelectorAll(`.${prefixCls}-thumb`).length).toBe(1);
// change selection again // change selection again
wrapper.find(`.${prefixCls}-item-input`).at(1).simulate('change'); fireEvent.click(container.querySelectorAll(`.${prefixCls}-item-input`)[1]);
expect(handleValueChange).toBeCalledWith('Transit'); expect(handleValueChange).toBeCalledWith('Transit');
expect( expectMatchChecked(container, [false, true, false]);
wrapper
.find(`.${prefixCls}-item-input`)
.map(el => (el.getDOMNode() as HTMLInputElement).checked),
).toEqual([false, true, false]);
// thumb appeared // thumb appeared
expect(wrapper.find(`.${prefixCls}-thumb`).length).toBe(1); expect(container.querySelectorAll(`.${prefixCls}-thumb`).length).toBe(1);
}); });
it('render segmented with `block`', () => { it('render segmented with `block`', () => {
const wrapper = mount(<Segmented block options={['Daily', 'Weekly', 'Monthly']} />); const { asFragment, container } = render(
<Segmented block options={['Daily', 'Weekly', 'Monthly']} />,
);
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expect(wrapper.find(`.${prefixCls}`).at(0).hasClass(`${prefixCls}-block`)).toBeTruthy(); expect(
container.querySelectorAll(`.${prefixCls}`)[0].classList.contains(`${prefixCls}-block`),
).toBeTruthy();
}); });
it('render segmented with `size#small`', () => { it('render segmented with `size#small`', () => {
const wrapper = mount(<Segmented size="small" options={['Daily', 'Weekly', 'Monthly']} />); const { asFragment, container } = render(
<Segmented size="small" options={['Daily', 'Weekly', 'Monthly']} />,
);
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expect(wrapper.find(`.${prefixCls}`).at(0).hasClass(`${prefixCls}-sm`)).toBeTruthy(); expect(
container.querySelectorAll(`.${prefixCls}`)[0].classList.contains(`${prefixCls}-sm`),
).toBeTruthy();
}); });
it('render segmented with `size#large`', () => { it('render segmented with `size#large`', () => {
const wrapper = mount(<Segmented size="large" options={['Daily', 'Weekly', 'Monthly']} />); const { asFragment, container } = render(
<Segmented size="large" options={['Daily', 'Weekly', 'Monthly']} />,
);
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expect(wrapper.find(`.${prefixCls}`).at(0).hasClass(`${prefixCls}-lg`)).toBeTruthy(); expect(
container.querySelectorAll(`.${prefixCls}`)[0].classList.contains(`${prefixCls}-lg`),
).toBeTruthy();
}); });
it('render with icons', () => { it('render with icons', () => {
const wrapper = mount( const { asFragment, container } = render(
<Segmented <Segmented
options={[ options={[
{ {
@ -372,8 +353,12 @@ describe('Segmented', () => {
]} ]}
/>, />,
); );
expect(wrapper.render()).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
expect(wrapper.find(`span.${prefixCls}-item-icon`).length).toBe(2); expect(container.querySelectorAll(`span.${prefixCls}-item-icon`).length).toBe(2);
expect(wrapper.find(`div.${prefixCls}-item-label`).at(1).contains('KanbanYes')).toBeTruthy(); expect(
container
.querySelectorAll(`div.${prefixCls}-item-label`)[1]
.textContent?.includes('KanbanYes'),
).toBeTruthy();
}); });
}); });