mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-04 04:48:32 +08:00
chore: Steps 组件单元测试补充 (#6093)
This commit is contained in:
sansiro
GitHub
parent
4c9442673a
commit
3e234e78b3
@ -1,5 +1,16 @@
|
||||
import React = require('react');
|
||||
import {render, waitFor} from '@testing-library/react';
|
||||
/**
|
||||
* 组件名称：Steps 步骤条
|
||||
* 单测内容：
|
||||
1. 基础使用
|
||||
2. 自定义状态 status
|
||||
3. 标签位置 labelPlacement
|
||||
4. 点状步骤条 progressDot
|
||||
5. 竖向排列 mode vertical
|
||||
6. 上下文数据 name
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {fireEvent, render, waitFor} from '@testing-library/react';
|
||||
import '../../src';
|
||||
import {render as amisRender} from '../../src';
|
||||
import {makeEnv, wait} from '../helper';
|
||||
@ -39,7 +50,7 @@ test('Renderer:steps status', async () => {
|
||||
amisRender(
|
||||
{
|
||||
type: 'steps',
|
||||
value: 'b',
|
||||
value: 3,
|
||||
className: 'className',
|
||||
status: {
|
||||
a: 'finish',
|
||||
@ -68,6 +79,12 @@ test('Renderer:steps status', async () => {
|
||||
)
|
||||
);
|
||||
|
||||
const steps = container.querySelectorAll('.cxd-Steps .cxd-StepsItem');
|
||||
expect(steps!.length).toBe(3);
|
||||
expect(steps[0]).toHaveClass('is-finish');
|
||||
expect(steps[1]).toHaveClass('is-error');
|
||||
expect(steps[2]).toHaveClass('is-wait');
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -101,6 +118,9 @@ test('Renderer:steps labelPlacement', async () => {
|
||||
)
|
||||
);
|
||||
|
||||
expect(container.querySelector('.cxd-Steps')).toHaveClass(
|
||||
'cxd-Steps--Placement-vertical'
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -133,6 +153,121 @@ test('Renderer:steps progressDot', async () => {
|
||||
makeEnv()
|
||||
)
|
||||
);
|
||||
|
||||
expect(container.querySelector('.cxd-Steps')).toHaveClass(
|
||||
'cxd-Steps--ProgressDot'
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:steps with vertical mode', async () => {
|
||||
const {container} = render(
|
||||
amisRender({
|
||||
type: 'steps',
|
||||
value: 'b',
|
||||
className: 'className',
|
||||
progressDot: true,
|
||||
mode: 'vertical',
|
||||
steps: [
|
||||
{
|
||||
title: 'First',
|
||||
value: 'a'
|
||||
},
|
||||
{
|
||||
title: 'Second',
|
||||
subTitle: 'this is subTitle',
|
||||
description: 'this is description',
|
||||
value: 'b'
|
||||
},
|
||||
{
|
||||
title: 'Third',
|
||||
value: 'c'
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
expect(container.querySelector('.cxd-Steps')).toHaveClass(
|
||||
'cxd-Steps--vertical'
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:steps with name', async () => {
|
||||
const {container} = render(
|
||||
amisRender({
|
||||
type: 'page',
|
||||
data: {
|
||||
step: 0,
|
||||
status: 'error',
|
||||
secondTitle: 'Second Test',
|
||||
desc: 'very good idea',
|
||||
what: 'what is this'
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'input-number',
|
||||
name: 'step'
|
||||
},
|
||||
{
|
||||
type: 'steps',
|
||||
name: 'step',
|
||||
status: '${status}',
|
||||
steps: [
|
||||
{
|
||||
title: 'First',
|
||||
subTitle: 'this is subTitle',
|
||||
description: '${desc}'
|
||||
},
|
||||
{
|
||||
title: '${secondTitle}'
|
||||
},
|
||||
{
|
||||
title: 'Last',
|
||||
subTitle: '${what}'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
const input = container.querySelector('.cxd-Number input');
|
||||
const setNum = async (num: number = 0) => {
|
||||
fireEvent.change(input!, {
|
||||
target: {value: num}
|
||||
});
|
||||
await wait(300);
|
||||
};
|
||||
|
||||
const steps = container.querySelectorAll('.cxd-Steps .cxd-StepsItem');
|
||||
expect(steps!.length).toBe(3);
|
||||
|
||||
expect(steps[0]).toHaveClass('is-error');
|
||||
expect(
|
||||
steps[0].querySelector('.cxd-StepsItem-description')
|
||||
).toHaveTextContent('very good idea');
|
||||
|
||||
await setNum(1);
|
||||
expect(steps[0]).toHaveClass('is-finish');
|
||||
expect(steps[1]).toHaveClass('is-error');
|
||||
expect(steps[2]).toHaveClass('is-wait');
|
||||
|
||||
expect(steps[1].querySelector('.cxd-StepsItem-title')).toHaveTextContent(
|
||||
'Second Test'
|
||||
);
|
||||
|
||||
await setNum(2);
|
||||
expect(steps[0]).toHaveClass('is-finish');
|
||||
expect(steps[1]).toHaveClass('is-finish');
|
||||
expect(steps[2]).toHaveClass('is-error');
|
||||
|
||||
expect(steps[2].querySelector('.cxd-StepsItem-subTitle')).toHaveTextContent(
|
||||
'what is this'
|
||||
);
|
||||
|
||||
await setNum(3);
|
||||
|
||||
expect(steps[0]).toHaveClass('is-finish');
|
||||
expect(steps[1]).toHaveClass('is-finish');
|
||||
expect(steps[2]).toHaveClass('is-finish');
|
||||
});
|
||||
|
||||
@ -599,12 +599,15 @@ exports[`Renderer:steps status 1`] = `
|
||||
class="cxd-StepsItem-containerTail"
|
||||
/>
|
||||
<div
|
||||
class="cxd-StepsItem-containerIcon"
|
||||
class="cxd-StepsItem-containerIcon is-success"
|
||||
>
|
||||
<span
|
||||
class="cxd-StepsItem-icon"
|
||||
>
|
||||
1
|
||||
<icon-mock
|
||||
classname="icon icon-check"
|
||||
icon="check"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -614,7 +617,7 @@ exports[`Renderer:steps status 1`] = `
|
||||
class="cxd-StepsItem-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-title cxd-StepsItem-"
|
||||
class="cxd-StepsItem-title cxd-StepsItem- is-success"
|
||||
>
|
||||
<span
|
||||
class="cxd-StepsItem-ellText"
|
||||
@ -643,12 +646,15 @@ exports[`Renderer:steps status 1`] = `
|
||||
class="cxd-StepsItem-containerTail"
|
||||
/>
|
||||
<div
|
||||
class="cxd-StepsItem-containerIcon"
|
||||
class="cxd-StepsItem-containerIcon is-success"
|
||||
>
|
||||
<span
|
||||
class="cxd-StepsItem-icon"
|
||||
>
|
||||
2
|
||||
<icon-mock
|
||||
classname="icon icon-check"
|
||||
icon="check"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -658,7 +664,7 @@ exports[`Renderer:steps status 1`] = `
|
||||
class="cxd-StepsItem-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-title cxd-StepsItem-"
|
||||
class="cxd-StepsItem-title cxd-StepsItem- is-success"
|
||||
>
|
||||
<span
|
||||
class="cxd-StepsItem-ellText"
|
||||
@ -695,12 +701,15 @@ exports[`Renderer:steps status 1`] = `
|
||||
class="cxd-StepsItem-containerTail"
|
||||
/>
|
||||
<div
|
||||
class="cxd-StepsItem-containerIcon"
|
||||
class="cxd-StepsItem-containerIcon is-success"
|
||||
>
|
||||
<span
|
||||
class="cxd-StepsItem-icon"
|
||||
>
|
||||
3
|
||||
<icon-mock
|
||||
classname="icon icon-check"
|
||||
icon="check"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -710,7 +719,138 @@ exports[`Renderer:steps status 1`] = `
|
||||
class="cxd-StepsItem-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-title cxd-StepsItem-"
|
||||
class="cxd-StepsItem-title cxd-StepsItem- is-success"
|
||||
>
|
||||
<span
|
||||
class="cxd-StepsItem-ellText"
|
||||
title="Third"
|
||||
>
|
||||
Third
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-StepsItem-description cxd-StepsItem-ellText"
|
||||
title="undefined"
|
||||
>
|
||||
<span />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:steps with vertical mode 1`] = `
|
||||
<div>
|
||||
<ul
|
||||
class="cxd-Steps cxd-Steps--Placement-vertical cxd-Steps--ProgressDot cxd-Steps--vertical className"
|
||||
>
|
||||
<li
|
||||
class="cxd-StepsItem is-wait cxd-StepsItem-ProgressDot"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-container"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-containerTail"
|
||||
/>
|
||||
<div
|
||||
class="cxd-StepsItem-containerProgressDot"
|
||||
/>
|
||||
<div
|
||||
class="cxd-StepsItem-containerWrapper"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-title cxd-StepsItem-vertical-ProgressDot"
|
||||
>
|
||||
<span
|
||||
class="cxd-StepsItem-ellText"
|
||||
title="First"
|
||||
>
|
||||
First
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-StepsItem-description cxd-StepsItem-ellText"
|
||||
title="undefined"
|
||||
>
|
||||
<span />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="cxd-StepsItem is-wait cxd-StepsItem-ProgressDot"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-container"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-containerTail"
|
||||
/>
|
||||
<div
|
||||
class="cxd-StepsItem-containerProgressDot"
|
||||
/>
|
||||
<div
|
||||
class="cxd-StepsItem-containerWrapper"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-title cxd-StepsItem-vertical-ProgressDot"
|
||||
>
|
||||
<span
|
||||
class="cxd-StepsItem-ellText"
|
||||
title="Second"
|
||||
>
|
||||
Second
|
||||
</span>
|
||||
<span
|
||||
class="cxd-StepsItem-subTitle cxd-StepsItem-ellText"
|
||||
title="this is subTitle"
|
||||
>
|
||||
this is subTitle
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-StepsItem-description cxd-StepsItem-ellText"
|
||||
title="this is description"
|
||||
>
|
||||
<span>
|
||||
this is description
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="cxd-StepsItem is-wait cxd-StepsItem-ProgressDot"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-container"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-containerTail"
|
||||
/>
|
||||
<div
|
||||
class="cxd-StepsItem-containerProgressDot"
|
||||
/>
|
||||
<div
|
||||
class="cxd-StepsItem-containerWrapper"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-body"
|
||||
>
|
||||
<div
|
||||
class="cxd-StepsItem-title cxd-StepsItem-vertical-ProgressDot"
|
||||
>
|
||||
<span
|
||||
class="cxd-StepsItem-ellText"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user