From 3e234e78b392ed9d661601048ab93256526e8abe Mon Sep 17 00:00:00 2001 From: sansiro Date: Mon, 30 Jan 2023 20:48:45 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20Steps=20=E7=BB=84=E4=BB=B6=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95=E8=A1=A5=E5=85=85=20(#6093)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../amis/__tests__/renderers/Steps.test.tsx | 143 +++++++++++++++- .../__snapshots__/Steps.test.tsx.snap | 158 +++++++++++++++++- 2 files changed, 288 insertions(+), 13 deletions(-) diff --git a/packages/amis/__tests__/renderers/Steps.test.tsx b/packages/amis/__tests__/renderers/Steps.test.tsx index 9c409e2b1..88a0d7f5e 100644 --- a/packages/amis/__tests__/renderers/Steps.test.tsx +++ b/packages/amis/__tests__/renderers/Steps.test.tsx @@ -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'); +}); diff --git a/packages/amis/__tests__/renderers/__snapshots__/Steps.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Steps.test.tsx.snap index c6f8d1d4b..95d872541 100644 --- a/packages/amis/__tests__/renderers/__snapshots__/Steps.test.tsx.snap +++ b/packages/amis/__tests__/renderers/__snapshots__/Steps.test.tsx.snap @@ -599,12 +599,15 @@ exports[`Renderer:steps status 1`] = ` class="cxd-StepsItem-containerTail" />
- 1 +
- 2 +
- 3 +
+ + Third + +
+
+ +
+
+
+
+ + +
+`; + +exports[`Renderer:steps with vertical mode 1`] = ` +
+
    +
  • +
    +
    +
    +
    +
    +
    + + First + +
    +
    + +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    + + Second + + + this is subTitle + +
    +
    + + this is description + +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +