Skip to content

Commit

Permalink
test: move notice-bar and collapse to rtl (#236)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shenhaidada
shenhaidada authored Feb 27, 2024
1 parent f1bee5f commit c262e85
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 105 deletions.
178 changes: 90 additions & 88 deletions packages/arcodesign/components/collapse/__test__/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,41 @@ import React from 'react';
import demoTest from '../../../tests/demoTest';
import mountTest from '../../../tests/mountTest';
import Collapse from '..';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import { defaultContext } from '../../context-provider';
import { delay } from '../../../tests/helpers/utils';
import userEvent from '@testing-library/user-event';
import { pureDelay } from '../../../tests/helpers/utils';

const prefix = `${defaultContext.prefixCls}-collapse`;
const headerPrefix = `.${prefix}-header`;
const contentPrefix = `.${prefix}-content`;
const containerPrefix = `.${prefix}-content-container`;

demoTest('collapse');

mountTest(Collapse, 'Collapse');

const activeItem = [
'1'
]
const activeItem = ['1'];
const item = [
{
header: 'title1',
value: '1',
content: 'content1'
content: 'content1',
},
{
header: 'title2',
value: '2',
content: 'content2'
content: 'content2',
},
{
header: 'title3',
value: '3',
content: 'content3'
}
]
content: 'content3',
},
];

describe('Collapse', () => {

beforeEach(() => {
jest.useFakeTimers();
});
Expand All @@ -45,118 +46,119 @@ describe('Collapse', () => {
});

it('Default expanded rendering is correct', () => {
const wrapper = mount(
<Collapse
header="title1"
value="1"
content={
<div>content</div>
} />,
const { container } = render(
<Collapse header="title1" value="1" content={<div>content</div>} />,
);
wrapper.find(`.${prefix}-header`).at(0).simulate('click');
expect(wrapper.find(`.${prefix}-content`).at(0).getDOMNode().style.height).toBe('auto');
const header = container.querySelectorAll(headerPrefix)[0];
userEvent.click(header);
// 有动画，在这停顿！
pureDelay(1000);
const content = container.querySelectorAll(contentPrefix)[0];
const contentStyle = getComputedStyle(content);
expect(contentStyle.getPropertyValue('height')).toBe('auto');
});

it('Default Group expanded rendering is correct', () => {
const mockFn = jest.fn();
const wrapper = mount(
const { container, rerender } = render(
<Collapse.Group
items={item}
activeItem={activeItem}
onCollapse={mockFn}>
</Collapse.Group>,
onCollapse={mockFn}
></Collapse.Group>,
);
wrapper.setProps({
activeItem: ['2']
});
wrapper.find(`.${prefix}-header`).at(0).simulate('click');
rerender(
<Collapse.Group items={item} activeItem={[2]} onCollapse={mockFn}></Collapse.Group>,
);
const header = container.querySelectorAll(headerPrefix)[0];
userEvent.click(header);
expect(mockFn.mock.calls.length).toBe(1);
});

it('OnCollapse rendering is correct', () => {
const mockFn = jest.fn();
const wrapper = mount(
<Collapse
header="title1"
value="1"
content={
<div>content</div>
}
onCollapse={mockFn}/>,
const { container } = render(
<Collapse header="title1" value="1" content={<div>content</div>} onCollapse={mockFn} />,
);
wrapper.find(`.${prefix}-header`).at(0).simulate('click');
expect(wrapper.find(`.${prefix}-content-container`).text()).toEqual('content');
const header = container.querySelectorAll(headerPrefix)[0];
userEvent.click(header);
const contentContainer = container.querySelectorAll(containerPrefix)[0];
expect(contentContainer.textContent).toEqual('content');
expect(mockFn.mock.calls.length).toBe(1);
});

it('Rerender is correct', () => {
const wrapper = mount(
const { container, rerender } = render(
<Collapse header="title1" value="1" content={<div>content</div>} />,
);
rerender(
<Collapse
header="title1"
value="1"
content={
<div>content</div>
}/>,
<div>
<div>content1</div>
<div>content1</div>
<div>content1</div>
<div>content1</div>
</div>
}
/>,
);
wrapper.setProps({
content: (
<div>
<div>content1</div>
<div>content1</div>
<div>content1</div>
<div>content1</div>
</div>
)
})
act(() => {
jest.advanceTimersByTime(1000);
});
wrapper.update();
wrapper.find(`.${prefix}-header`).at(0).simulate('click');
expect(wrapper.find(`.${prefix}-content-container`).text()).toEqual('content1content1content1content1');
pureDelay(1000);
const header = container.querySelectorAll(headerPrefix)[0];
userEvent.click(header);
const contentContainer = container.querySelectorAll(containerPrefix)[0];
expect(contentContainer.textContent).toEqual('content1content1content1content1');
});

it('Disabled rendering is correct', () => {
const wrapper = mount(
<Collapse
header="title3"
value="3"
disabled
content={
<div>content</div>
} />,
const { container } = render(
<Collapse header="title3" value="3" disabled content={<div>content</div>} />,
);
expect(wrapper.find(`.${prefix}-content`).at(0).getDOMNode().style.height).toBe('0px');
wrapper.find(`.${prefix}-header`).simulate('click');
expect(wrapper.find(`.${prefix}-content`).at(0).getDOMNode().style.height).toBe('0px');

const content = container.querySelectorAll(contentPrefix)[0];
const contentStyle = getComputedStyle(content);
expect(contentStyle.getPropertyValue('height')).toBe('0px');
const header = container.querySelectorAll(headerPrefix)[0];
userEvent.click(header);
pureDelay(1000);
expect(contentStyle.getPropertyValue('height')).toBe('0px');
});

it('Combined folds render correctly', () => {
const wrapper = mount(
const { container } = render(
<Collapse.Group defaultActiveItems={['1']} useAccordion>
<Collapse
header="title1"
value="1"
content={
<Collapse.Group defaultActiveItems={['1']} useAccordion groupKey="sub-group">
<Collapse
header="children-title"
value="1"
content="content1"
/>
<Collapse.Group
defaultActiveItems={['1']}
useAccordion
groupKey="sub-group"
>
<Collapse header="children-title" value="1" content="content1" />
</Collapse.Group>
}
/>
<Collapse
header="content2"
active
value="2"
content="content2"
/>
<Collapse header="content2" active value="2" content="content2" />
</Collapse.Group>,
);
expect(wrapper.find(`.${prefix}-content`).at(0).getDOMNode().style.height).toBe('auto');
expect(wrapper.find(`.${prefix}-content`).at(1).getDOMNode().style.height).toBe('auto');
expect(wrapper.find(`.${prefix}-content`).at(2).getDOMNode().style.height).toBe('0px');
wrapper.find(`.${prefix}-header`).at(2).simulate('click');
expect(wrapper.find(`.${prefix}-content`).at(0).getDOMNode().style.height).toBe('0px');
expect(wrapper.find(`.${prefix}-content`).at(1).getDOMNode().style.height).toBe('auto');
expect(wrapper.find(`.${prefix}-content`).at(2).getDOMNode().style.height).toBe('auto');
const getContentHeightByIndex = index =>
getComputedStyle(container.querySelectorAll(contentPrefix)[index]).getPropertyValue(
'height',
);
expect(getContentHeightByIndex(0)).toBe('auto');
expect(getContentHeightByIndex(1)).toBe('auto');
expect(getContentHeightByIndex(2)).toBe('0px');

const header = container.querySelectorAll(headerPrefix)[2];
userEvent.click(header);
pureDelay(1000);

expect(getContentHeightByIndex(0)).toBe('0px');
expect(getContentHeightByIndex(1)).toBe('auto');
expect(getContentHeightByIndex(2)).toBe('auto');
});
})
});
45 changes: 28 additions & 17 deletions packages/arcodesign/components/notice-bar/__test__/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import NoticeBar from '..';
import IconNotice from '../../icon/IconNotice';
import { defaultContext } from '../../context-provider';
import { defineHtmlRefProperties } from '../../../tests/helpers/mockElement';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { pureDelay } from '../../../tests/helpers/utils';

const { prefixCls } = defaultContext;
const prefix = `${prefixCls}-notice-bar`;
Expand All @@ -20,6 +23,9 @@ const { setHTMLProperties, unsetHTMLProperties } = defineHtmlRefProperties({
offsetHeight: 200,
});

const longText =
'I became a long long long long long long long long long long long reminder message';

function NoticeBarDemo() {
const [text, setText] = React.useState('Click I will grow and start scrolling!');
const barRef = React.useRef();
Expand All @@ -29,9 +35,7 @@ function NoticeBarDemo() {
marquee="always"
autoSetGradientStyle={false}
onClick={() => {
setText(
'I became a long long long long long long long long long long long reminder message',
);
setText(longText);
if (barRef.current) {
barRef.current.updateData();
}
Expand All @@ -44,16 +48,18 @@ function NoticeBarDemo() {

describe('NoticeBar style', () => {
it('Common styles render correctly', () => {
const wrapper = mount(<NoticeBar>Note that this is a reminder message.</NoticeBar>);
expect(wrapper.text()).toEqual('Note that this is a reminder message.');
const { container } = render(<NoticeBar>Note that this is a reminder message.</NoticeBar>);
expect(container.textContent).toEqual('Note that this is a reminder message.');
});

it('Icon styles render correctly', () => {
const wrapper = mount(
const { container } = render(
<NoticeBar leftContent={<IconNotice />}>
Note that this is a reminder message.
</NoticeBar>,
);
expect(wrapper.find('svg').length).toBe(2);
const svgArray = container.getElementsByTagName('svg');
expect(svgArray.length).toBe(2);
});
});

Expand All @@ -76,20 +82,25 @@ describe('NoticeBar actions', () => {
jest.useRealTimers();
});

it('Click render correctly', () => {
it('Click render correctly', async () => {
const onClickRight = jest.fn();
const wrapper = mount(
<NoticeBar onClose={onClickRight}>Note that this is a reminder message.</NoticeBar>,
const { container } = render(
<div>
<NoticeBar onClose={onClickRight}>Note that this is a reminder message.</NoticeBar>,
</div>,
);
wrapper.find(`.${prefixCls}-icon-close`).simulate('click');
const closeIcon = container.querySelectorAll(`.${prefixCls}-icon-close`)[0];
userEvent.click(closeIcon);
expect(onClickRight.mock.calls.length).toBe(1);
});

it('Should support using ref to update', () => {
const wrapper = mount(<NoticeBarDemo />);
wrapper.find(NoticeBar).simulate('click');
act(() => {
jest.advanceTimersByTime(2000);
});
wrapper.update();
const { container } = render(<NoticeBarDemo />);
const noticeBar = container.querySelectorAll(`.${prefix}`)[0];

userEvent.click(noticeBar);
pureDelay(2000);
const content = container.querySelectorAll(`.${prefix}-content-inner`)[0];
expect(content.textContent).toBe(longText);
});
});

0 comments on commit c262e85

Please sign in to comment.