Skip to content

Commit

Permalink
test: move enzyme to rtl (#229)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TinaPeach
TinaPeach authored Feb 6, 2024
1 parent 04a1d78 commit ae4f39b
Show file tree
Hide file tree
Showing 13 changed files with 377 additions and 295 deletions.
121 changes: 66 additions & 55 deletions packages/arcodesign/components/action-sheet/__test__/index.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import demoTest from '../../../tests/demoTest';
import mountTest from '../../../tests/mountTest';
import ActionSheet from '..';
import Button from '../../button';
import { mount } from 'enzyme';
import { defaultContext } from '../../context-provider';

const prefix = `${defaultContext.prefixCls}-action-sheet`;
Expand All @@ -13,16 +13,27 @@ demoTest('action-sheet');
mountTest(ActionSheet, 'ActionSheet');

class Test extends React.Component {
state = {
visible: true,
};
constructor(props) {
super(props);
this.state = {
visible: true,
};
}

render() {
const { visible } = this.state;
return (
<div>
<Button onClick={() => this.setState({
visible: true
})}>Click Me</Button>
<Button
className="test-button"
onClick={() =>
this.setState({
visible: true,
})
}
>
Click Me
</Button>
<ActionSheet
visible={visible}
items={[
Expand All @@ -37,83 +48,83 @@ class Test extends React.Component {
}
}

describe('ActionSheet style', () => {
it('Open correctly', () => {
const component = mount(
<Test />
);
component.find(Button).simulate('click');
expect(component.find(`.${prefix}-list`).length).toBe(1);
expect(component.find(`.${prefix}-item`).length).toBe(4);
describe('ActionSheet', () => {
it('should open correctly', () => {
const { container: component } = render(<Test />);
fireEvent.click(component.querySelector('.test-button'));
expect(document.querySelectorAll(`.${prefix}-list`).length).toBe(1);
expect(document.querySelectorAll(`.${prefix}-item`).length).toBe(4);
});
it('Cancel/Delete/Status render correctly', () => {
const component = mount(

it('cancel/delete should render correctly', () => {
render(
<ActionSheet
visible={true}
visible
items={[
{ content: '选项一' },
{ content: '选项二' },
{ content: '选项三' },
{ content: '禁用', status: 'disabled' },
{ content: '删除', status: 'danger' },
]}
cancelText='取消'
title='这是一行标题文字'
subTitle='这是一行或两行的描述信息这是一行或两行的描述。'/>
cancelText="取消"
title="这是一行标题文字"
subTitle="这是一行或两行的描述信息这是一行或两行的描述。"
/>,
);
expect(document.querySelectorAll(`.${prefix}-item.danger`).length).toBe(1);
expect(document.querySelectorAll(`.${prefix}-item.cancel-item`).length).toBe(1);
expect(document.querySelectorAll(`.${prefix}-item.disabled`).length).toBe(1);
expect(document.querySelector(`.${prefix}-title`).innerHTML).toEqual('这是一行标题文字');
expect(document.querySelector(`.${prefix}-sub-title`).innerHTML).toEqual(
'这是一行或两行的描述信息这是一行或两行的描述。',
);
expect(component.find(`.${prefix}-item.danger`).length).toBe(1);
expect(component.find(`.${prefix}-item.cancel-item`).length).toBe(1);
expect(component.find(`.${prefix}-item.disabled`).length).toBe(1);
expect(component.find(`.${prefix}-title`).text()).toEqual('这是一行标题文字');
expect(component.find(`.${prefix}-sub-title`).text()).toEqual('这是一行或两行的描述信息这是一行或两行的描述。');
});
})

describe('ActionSheet action', () => {
it('Cancel action correctly', () => {
it('should correctly execute cancel action', () => {
const mockFn = jest.fn();
const component = mount(
render(
<ActionSheet
visible={true}
items={[
{ content: '删除', status: 'danger' },
]}
cancelText='取消'
close={mockFn}/>
visible
items={[{ content: '删除', status: 'danger' }]}
cancelText="取消"
close={mockFn}
/>,
);
component.find(`.${prefix}-item.cancel-item`).simulate('click');
fireEvent.click(document.querySelector(`.${prefix}-item.cancel-item`));
expect(mockFn.mock.calls.length).toBe(1);
});
it('Disabled action correctly', () => {

it('should correctly execute disable action', () => {
const mockFn = jest.fn();
const component = mount(
render(
<ActionSheet
visible={true}
items={[
{ content: '禁用', status: 'disabled' },
]}
close={mockFn}/>
visible
items={[{ content: '禁用', status: 'disabled' }]}
close={mockFn}
/>,
);
component.find(`.${prefix}-item.disabled`).simulate('click');
fireEvent.click(document.querySelector(`.${prefix}-item.disabled`));
expect(mockFn.mock.calls.length).toBe(0);
});
it('Disabled action correctly', () => {

it('should correctly execute loading action', () => {
const mockFn = jest.fn();
const component = mount(
render(
<ActionSheet
visible={true}
visible
items={[
{
content: (
<span>加载</span>
),
content: <span>加载</span>,
onClick: mockFn,
},
{ content: '选项一' },
]}/>
]}
/>,
);
component.find(`.${prefix}-item.normal`).at(0).simulate('click');
component.find(`.${prefix}-item.normal`).at(1).simulate('click');
const items = document.querySelectorAll(`.${prefix}-item.normal`);
fireEvent.click(items[0]);
fireEvent.click(items[1]);
expect(mockFn.mock.calls.length).toBe(1);
});
})
});
86 changes: 48 additions & 38 deletions packages/arcodesign/components/carousel/__test__/index.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { render, mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { act, render, fireEvent } from '@testing-library/react';
import demoTest from '../../../tests/demoTest';
import mountTest from '../../../tests/mountTest';
import Carousel from '..';
Expand All @@ -25,8 +24,8 @@ const { setHTMLProperties, unsetHTMLProperties } = defineHtmlRefProperties({
const prefix = `${defaultContext.prefixCls}-carousel`;

function indexIsActive(wrapper, index) {
const items = wrapper.find(`.${prefix}-item.normal-item`);
return items.at(index).hasClass('active');
const items = wrapper.querySelectorAll(`.${prefix}-item.normal-item`);
return items[index].classList.contains('active');
}

describe('Carousel', () => {
Expand All @@ -48,7 +47,7 @@ describe('Carousel', () => {

it('should auto play correctly', () => {
const onChange = jest.fn();
const wrapper = mount(
const { container: wrapper } = render(
<Carousel stayDuration={1000} boxWidth={375} onChange={onChange}>
<div />
<div />
Expand All @@ -57,42 +56,40 @@ describe('Carousel', () => {
act(() => {
jest.advanceTimersByTime(1600);
});
wrapper.update();
expect(indexIsActive(wrapper, 1)).toBe(true);
expect(onChange.mock.calls).toHaveLength(1);
expect(onChange.mock.calls[0]).toEqual([1]);
});

it('should render correctly and disable loop when only one child', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Carousel stayDuration={1000} boxWidth={375}>
<div />
</Carousel>,
);
const inner = wrapper.find(`.${prefix}-inner`);
const inner = wrapper.querySelector(`.${prefix}-inner`);
expect(inner.children).toHaveLength(1);
act(() => {
jest.advanceTimersByTime(1600);
});
wrapper.update();
expect(indexIsActive(wrapper, 0)).toBe(true);
});

it('should render correctly when using the property `list`', () => {
const wrapper = render(
const { container: wrapper } = render(
<Carousel
list={[
{ src: '11', text: 'test 1' },
{ src: '22', text: 'test 2' },
]}
/>,
);
const items = wrapper.find(`.${prefix}-item`);
const items = wrapper.querySelectorAll(`.${prefix}-item`);
expect(items).toHaveLength(2);
});

it('should disable loop playback when using the property `offsetBetween`', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Carousel stayDuration={1000} boxWidth={375} offsetBetween={20}>
<div />
<div />
Expand All @@ -101,12 +98,11 @@ describe('Carousel', () => {
act(() => {
jest.advanceTimersByTime(1600);
});
wrapper.update();
expect(indexIsActive(wrapper, 0)).toBe(true);
});

it('should enable loop playback and render fake dom when using the property `offsetBetween` and `fakeItem`', () => {
const wrapper = mount(
const { container: wrapper } = render(
<Carousel
stayDuration={1000}
boxWidth={375}
Expand All @@ -122,15 +118,14 @@ describe('Carousel', () => {
act(() => {
jest.advanceTimersByTime(1600);
});
wrapper.update();
expect(indexIsActive(wrapper, 0)).toBe(true);
const items = wrapper.find(`.${prefix}-item.fake-item`);
const items = wrapper.querySelectorAll(`.${prefix}-item.fake-item`);
expect(items).toHaveLength(3);
});

it('should support using ref to change index', () => {
const ref = React.createRef();
const wrapper = mount(
const { container: wrapper } = render(
<Carousel autoPlay={false} boxWidth={375} ref={ref}>
<div />
<div />
Expand All @@ -142,19 +137,23 @@ describe('Carousel', () => {
changeIndex(1);
jest.advanceTimersByTime(600);
});
wrapper.update();
expect(indexIsActive(wrapper, 1)).toBe(true);
});

it('should handle touch event correctly', () => {
const wrapper = mount(
const { container: wrapper, rerender } = render(
<Carousel autoPlay={false} boxWidth={375} swipeable={false}>
<div />
<div />
</Carousel>,
);
const map = mockAddListener(wrapper.find(`.${prefix}`));
wrapper.setProps({ swipeable: true });
const map = mockAddListener(wrapper.querySelector(`.${prefix}`));
rerender(
<Carousel autoPlay={false} boxWidth={375} swipeable>
<div />
<div />
</Carousel>,
);

// move to last item
mockSwipe(map, wrapper, prefix, { touchstart: 100, touchmove: 150, touchend: 300 });
Expand All @@ -165,51 +164,62 @@ describe('Carousel', () => {
expect(indexIsActive(wrapper, 0)).toBe(true);

// move and cancel
wrapper.setProps({ speedToChange: Infinity });
rerender(
<Carousel autoPlay={false} boxWidth={375} swipeable speedToChange={Infinity}>
<div />
<div />
</Carousel>,
);
mockSwipe(map, wrapper, prefix, { touchstart: 100, touchmove: 150, touchend: 100 });
expect(indexIsActive(wrapper, 0)).toBe(true);
});

it('should support using `onTouchStart` to prevent default logic', () => {
const onTouchStart = jest.fn(() => true);
const onTouchEnd = jest.fn(() => true);
const wrapper = mount(
<Carousel
autoPlay={false}
boxWidth={375}
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
swipeable={false}
autoHeight
>
const props = {
autoPlay: false,
boxWidth: 375,
onTouchStart,
onTouchEnd,
autoHeight: true,
};
const { container: wrapper, rerender } = render(
<Carousel {...props} swipeable={false}>
<div />
<div />
</Carousel>,
);
// should not trigger touchend when swipeable=false
wrapper
.find(`.${prefix}`)
.simulate('touchEnd', createMoveTouchEventObject({ x: 100, y: 0 }));
fireEvent.touchEnd(
wrapper.querySelector(`.${prefix}`),
createMoveTouchEventObject({ x: 100, y: 0 }),
);
expect(onTouchEnd.mock.calls).toHaveLength(0);

// should prevent default logic when onTouchStart or onTouchEnd return true
const map = mockAddListener(wrapper.find(`.${prefix}`));
wrapper.setProps({ swipeable: true });
const map = mockAddListener(wrapper.querySelector(`.${prefix}`));
rerender(
<Carousel {...props} swipeable>
<div />
<div />
</Carousel>,
);
mockSwipe(map, wrapper, prefix, { touchstart: 100, touchmove: 150, touchend: 300 });
expect(onTouchStart.mock.calls).toHaveLength(1);
expect(indexIsActive(wrapper, 0)).toBe(true);
});

it('should hide carousel when invisible and rerender forcibly when visible in ios', () => {
const wrapper = mount(
const { container: wrapper } = render(
<ContextProvider system="ios">
<Carousel boxWidth={375}>
<div />
<div />
</Carousel>
</ContextProvider>,
);
const dom = wrapper.find(`.${prefix}:not(.wrap-placeholder)`).at(0).getDOMNode();
const dom = wrapper.querySelector(`.${prefix}:not(.wrap-placeholder)`);
act(() => {
mockDocumentVisibility('hidden');
});
Expand Down
Loading

0 comments on commit ae4f39b

Please sign in to comment.