diff --git a/packages/varlet-ui/src/steps/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/steps/__tests__/__snapshots__/index.spec.js.snap
deleted file mode 100644
index 85226999f00..00000000000
--- a/packages/varlet-ui/src/steps/__tests__/__snapshots__/index.spec.js.snap
+++ /dev/null
@@ -1,193 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test step direction prop 1`] = `
-""
-`;
-
-exports[`test step direction prop 2`] = `
-""
-`;
-
-exports[`test step event 1`] = `
-""
-`;
-
-exports[`test steps example 1`] = `
-"基本使用
-
-自定义样式
-
-垂直模式
-"
-`;
diff --git a/packages/varlet-ui/src/steps/__tests__/index.spec.js b/packages/varlet-ui/src/steps/__tests__/index.spec.js
index ac221cdbdb0..076fdb615d9 100644
--- a/packages/varlet-ui/src/steps/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/steps/__tests__/index.spec.js
@@ -1,85 +1,132 @@
-import example from '../example'
import Steps from '..'
import Step from '../../step'
import VarSteps from '../Steps'
import VarStep from '../../step/Step'
import { mount } from '@vue/test-utils'
import { createApp } from 'vue'
+import { delay } from '../../utils/jest'
-test('test steps example', () => {
- const wrapper = mount(example)
-
- expect(wrapper.html()).toMatchSnapshot()
-})
+const clickStep = jest.fn()
+const Wrapper = {
+ components: {
+ [VarSteps.name]: VarSteps,
+ [VarStep.name]: VarStep,
+ },
+ template: `
+
+ step 1
+ step 2
+ step 3
+ step 4
+
+ `,
+ methods: {
+ clickStep,
+ },
+}
-test('test steps and step plugin', () => {
+test('test steps and step use', () => {
const app = createApp({}).use(Steps).use(Step)
expect(app.component(Steps.name)).toBeTruthy()
expect(app.component(Step.name)).toBeTruthy()
})
-test('test step direction prop', async () => {
- const template = `
-
- 步骤1
- 步骤2
-
- `
- const wrapper = mount(
- {
- template,
- components: {
- [VarSteps.name]: VarSteps,
- [VarStep.name]: VarStep,
- },
- data() {
- return {
- direction: 'horizontal',
- }
+test('test steps component event', async () => {
+ const wrapper = mount(Wrapper)
+ await wrapper.find('.var-step__horizontal-tag').trigger('click')
+ expect(clickStep).toHaveBeenCalledTimes(1)
+ wrapper.unmount()
+})
+
+describe('test steps and step components props', () => {
+ test('test steps active', async () => {
+ const wrapper = mount(Wrapper, {
+ props: {
+ active: 1,
},
- },
- { attachTo: document.body }
- )
+ })
- expect(wrapper.html()).toMatchSnapshot()
+ await delay(50)
+ wrapper.findAll('.var-step__horizontal-main').forEach((item, index) => {
+ expect(item.find('.var-step__horizontal-tag--active').exists()).toBe(index < 2)
+ expect(item.find('.var-step__horizontal-content--active').exists()).toBe(index < 2)
+ })
+ wrapper.unmount()
+ })
- await wrapper.setData({ direction: 'vertical' })
+ test('test steps direction', async () => {
+ const wrapper = mount(Wrapper, {
+ props: {
+ direction: 'vertical',
+ },
+ })
- expect(wrapper.html()).toMatchSnapshot()
-})
+ expect(wrapper.find('.var-steps').attributes('style')).toContain('flex-direction: column;')
+ await wrapper.setProps({ direction: 'horizontal' })
+ expect(wrapper.find('.var-steps').attributes('style')).toContain('flex-direction: row;')
+ wrapper.unmount()
+ })
-test('test step event', async () => {
- const clickStep = jest.fn()
+ test('test steps active-color', async () => {
+ const wrapper = mount(Wrapper, {
+ props: {
+ activeColor: 'red',
+ },
+ })
- const template = `
-
- 步骤1
- 步骤2
-
- `
- const wrapper = mount(
- {
- template,
- components: {
- [VarSteps.name]: VarSteps,
- [VarStep.name]: VarStep,
+ await delay(50)
+ expect(wrapper.find('.var-step__horizontal-tag--active').attributes('style')).toContain('background-color: red;')
+ wrapper.unmount()
+ })
+
+ test('test steps inactive-color', async () => {
+ const wrapper = mount(Wrapper, {
+ props: {
+ inactiveColor: 'red',
},
- data() {
- return {
- active: '1',
- }
+ })
+
+ await delay(50)
+ wrapper.findAll('.var-step__horizontal-tag').forEach((item, index) => {
+ expect(item.attributes('style')).toContain(index > 0 ? 'background-color: red;' : '')
+ })
+ wrapper.unmount()
+ })
+
+ test('test steps current-icon', async () => {
+ const wrapper = mount(Wrapper, {
+ props: {
+ active: 3,
},
- methods: {
- clickStep,
+ })
+
+ await delay(50)
+ expect(wrapper.findAll('.var-step')[2].find('.var-icon-check-circle-outline').exists()).toBe(true)
+ wrapper.unmount()
+ })
+
+ test('test steps active-icon', async () => {
+ const wrapper = mount(Wrapper, {
+ props: {
+ active: 2,
},
- },
- { attachTo: document.body }
- )
+ })
- expect(wrapper.html()).toMatchSnapshot()
+ await delay(50)
+ expect(wrapper.findAll('.var-step')[2].find('.var-icon-radio-blank').exists()).toBe(true)
+ wrapper.unmount()
+ })
- await wrapper.find('.var-step__horizontal-tag').trigger('click')
+ test('test steps inactive-icon', async () => {
+ const wrapper = mount(Wrapper, {
+ props: {
+ active: 1,
+ },
+ })
- expect(clickStep).toHaveBeenCalledTimes(1)
+ await delay(50)
+ expect(wrapper.findAll('.var-step')[2].find('.var-icon-minus-circle-outline').exists()).toBe(true)
+ wrapper.unmount()
+ })
})