From d6c71070a821181813ce97a5240d384c77b44c86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E6=B2=9B?= <luopei@11.com>
Date: Sun, 9 Oct 2022 15:07:55 +0800
Subject: [PATCH] test(unit): steps: add steps test

---
 src/steps/__tests__/index.test.jsx | 274 +++++++++++++++++++++++++++--
 src/steps/steps.tsx                |   5 +-
 2 files changed, 265 insertions(+), 14 deletions(-)

diff --git a/src/steps/__tests__/index.test.jsx b/src/steps/__tests__/index.test.jsx
index 5ab53a64b6..c558216bd9 100644
--- a/src/steps/__tests__/index.test.jsx
+++ b/src/steps/__tests__/index.test.jsx
@@ -1,25 +1,273 @@
 import { mount } from '@vue/test-utils';
-import Steps from '@/src/steps/index.ts';
+import { describe, expect, it, vi } from 'vitest';
+import { nextTick, ref } from 'vue';
+import { AppIcon } from 'tdesign-icons-vue-next';
+import Steps from '../steps';
+import StepItem from '../step-item';
 
 describe('Steps', () => {
-  let cmp;
+  it('', () => {
+    const wrapper = mount(() => (
+      <Steps>
+        <StepItem title="登录"></StepItem>
+        <StepItem title="购物"></StepItem>
+        <StepItem title="支付"></StepItem>
+        <StepItem title="完成"></StepItem>
+      </Steps>
+    ));
+    expect(wrapper.findAll('.t-steps-item').length).toBe(4);
+  });
+
+  it(':current', () => {
+    const wrapper = mount(() => (
+      <Steps current={1}>
+        <StepItem title="登录"></StepItem>
+        <StepItem title="购物"></StepItem>
+        <StepItem title="支付"></StepItem>
+        <StepItem title="完成"></StepItem>
+      </Steps>
+    ));
+    const items = wrapper.findAll('.t-steps-item');
+    expect(items[0].classes()).toContain('t-steps-item--finish');
+    expect(items[1].classes()).toContain('t-steps-item--process');
+    expect(items[2].classes()).toContain('t-steps-item--default');
+    expect(items[3].classes()).toContain('t-steps-item--default');
+  });
+
+  it(':defaultCurrent', () => {
+    const wrapper = mount(() => (
+      <Steps defaultCurrent={1}>
+        <StepItem title="登录"></StepItem>
+        <StepItem title="购物"></StepItem>
+        <StepItem title="支付"></StepItem>
+        <StepItem title="完成"></StepItem>
+      </Steps>
+    ));
+    const items = wrapper.findAll('.t-steps-item');
+    expect(items[0].classes()).toContain('t-steps-item--finish');
+    expect(items[1].classes()).toContain('t-steps-item--process');
+    expect(items[2].classes()).toContain('t-steps-item--default');
+    expect(items[3].classes()).toContain('t-steps-item--default');
+  });
 
-  beforeEach(() => {
-    cmp = mount(Steps, {
-      propsData: {
-        layout: 'vertical',
-        theme: 'dot',
+  it(':layout', () => {
+    const layoutList = ['horizontal', 'vertical'];
+    layoutList.forEach((layout) => {
+      const wrapper = mount(() => (
+        <Steps layout={layout}>
+          <StepItem title="登录"></StepItem>
+          <StepItem title="购物"></StepItem>
+          <StepItem title="支付"></StepItem>
+          <StepItem title="完成"></StepItem>
+        </Steps>
+      ));
+      const steps = wrapper.find('.t-steps');
+      expect(steps.classes()).toContain(`t-steps--${layout}`);
+    });
+  });
+
+  it(':options', () => {
+    const options = [
+      {
+        title: '登录',
+      },
+      {
+        title: '购物',
       },
+      {
+        title: '支付',
+      },
+      {
+        title: '完成',
+      },
+    ];
+    const wrapper = mount(() => <Steps options={options}></Steps>);
+    expect(wrapper.findAll('.t-steps-item').length).toBe(4);
+  });
+
+  it(':readonly', async () => {
+    const current = ref(1);
+    const wrapper = mount(() => (
+      <Steps defaultCurrent={current.value} readonly>
+        <StepItem title="登录"></StepItem>
+        <StepItem title="购物"></StepItem>
+        <StepItem title="支付"></StepItem>
+        <StepItem title="完成"></StepItem>
+      </Steps>
+    ));
+    const items = wrapper.findAll('.t-steps-item');
+    await items[1].trigger('click');
+    expect(current.value).toBe(1);
+    expect(items[0].classes()).toContain('t-steps-item--finish');
+    expect(items[1].classes()).toContain('t-steps-item--process');
+  });
+
+  it(':theme', async () => {
+    const themeList = ['default', 'dot'];
+    themeList.forEach((theme) => {
+      const wrapper = mount(() => (
+        <Steps theme={theme}>
+          <StepItem title="登录"></StepItem>
+          <StepItem title="购物"></StepItem>
+          <StepItem title="支付"></StepItem>
+          <StepItem title="完成"></StepItem>
+        </Steps>
+      ));
+      const steps = wrapper.find('.t-steps');
+      expect(steps.classes()).toContain(`t-steps--${theme}-anchor`);
+    });
+  });
+
+  it(':separator', async () => {
+    const separatorList = ['line', 'dashed', 'arrow'];
+    separatorList.forEach((separator) => {
+      const wrapper = mount(() => (
+        <Steps separator={separator}>
+          <StepItem title="登录"></StepItem>
+          <StepItem title="购物"></StepItem>
+          <StepItem title="支付"></StepItem>
+          <StepItem title="完成"></StepItem>
+        </Steps>
+      ));
+      const steps = wrapper.find('.t-steps');
+      expect(steps.classes()).toContain(`t-steps--${separator}-separator`);
     });
   });
 
-  it('equals direction to "vertical"', () => {
-    expect(cmp.vm.layout).toEqual('vertical');
+  it(':sequence', async () => {
+    const sequenceList = ['positive', 'reverse'];
+    sequenceList.forEach((sequence) => {
+      const wrapper = mount(() => (
+        <Steps sequence={sequence}>
+          <StepItem title="登录"></StepItem>
+          <StepItem title="购物"></StepItem>
+          <StepItem title="支付"></StepItem>
+          <StepItem title="完成"></StepItem>
+        </Steps>
+      ));
+      const steps = wrapper.find('.t-steps');
+      expect(steps.classes()).toContain(`t-steps--${sequence}`);
+    });
   });
-  it('equals type to "dot"', () => {
-    expect(cmp.vm.theme).toEqual('dot');
+
+  it(':onChange', async () => {
+    const current = ref(0);
+    const onChange = (n) => {
+      current.value = n;
+    };
+    const wrapper = mount(() => (
+      <Steps defaultCurrent={current.value} onChange={onChange}>
+        <StepItem title="登录"></StepItem>
+        <StepItem title="购物"></StepItem>
+        <StepItem title="支付"></StepItem>
+        <StepItem title="完成"></StepItem>
+      </Steps>
+    ));
+    const items = wrapper.findAll('.t-steps-item');
+    const inners = wrapper.findAll('.t-steps-item__inner');
+    await inners[1].trigger('click');
+    await nextTick();
+    expect(current.value).toBe(1);
+    expect(items[0].classes()).toContain('t-steps-item--finish');
+    expect(items[1].classes()).toContain('t-steps-item--process');
   });
-  it('equals sequence to "positive"', () => {
-    expect(cmp.vm.sequence).toEqual('positive');
+
+  describe(':StepItem', () => {
+    it(':content', () => {
+      const wrapper = mount(() => (
+        <Steps>
+          <StepItem title="登录" content="已完成状态"></StepItem>
+        </Steps>
+      ));
+      const content = wrapper.find('.t-steps-item .t-steps-item__description');
+      expect(content.exists()).toBeTruthy();
+      expect(content.text()).toBe('已完成状态');
+    });
+
+    it(':default', () => {
+      const wrapper = mount(() => (
+        <Steps>
+          <StepItem title="登录" default="已完成状态"></StepItem>
+        </Steps>
+      ));
+      const content = wrapper.find('.t-steps-item .t-steps-item__description');
+      expect(content.exists()).toBeTruthy();
+      expect(content.text()).toBe('已完成状态');
+    });
+
+    it(':title', () => {
+      const wrapper = mount(() => (
+        <Steps>
+          <StepItem title="登录" default="已完成状态"></StepItem>
+        </Steps>
+      ));
+      const title = wrapper.find('.t-steps-item .t-steps-item__title');
+      expect(title.exists()).toBeTruthy();
+      expect(title.text()).toBe('登录');
+    });
+
+    it(':extra', () => {
+      const slots = {
+        extra: () => <div class="extra">额外操作</div>,
+      };
+      const wrapper = mount(() => (
+        <Steps>
+          <StepItem title="登录" default="已完成状态" v-slots={slots}></StepItem>
+        </Steps>
+      ));
+      const extra = wrapper.find('.t-steps-item .t-steps-item__extra .extra');
+      expect(extra.exists()).toBeTruthy();
+      expect(extra.text()).toBe('额外操作');
+    });
+
+    it(':icon', () => {
+      const renderIocn = () => <AppIcon />;
+      const wrapper = mount(() => (
+        <Steps>
+          <StepItem title="登录" default="已完成状态" icon={renderIocn}></StepItem>
+        </Steps>
+      ));
+      const icon = wrapper.find('.t-steps-item .t-steps-item__icon');
+      expect(icon.exists()).toBeTruthy();
+      expect(icon.findComponent(AppIcon)).toBeTruthy();
+    });
+
+    it(':icon', () => {
+      const statusList = ['default', 'process', 'finish', 'error'];
+      statusList.forEach((status) => {
+        const wrapper = mount(() => (
+          <Steps>
+            <StepItem title="登录" default="已完成状态" status={status}></StepItem>
+          </Steps>
+        ));
+        const item = wrapper.find('.t-steps-item');
+        expect(item.classes()).toContain(`t-steps-item--${status}`);
+      });
+    });
+
+    it(':value', async () => {
+      const current = ref('b');
+      const onChange = (val) => {
+        current.value = val;
+      };
+      const wrapper = mount(() => (
+        <Steps defaultCurrent={current.value} onChange={onChange}>
+          <StepItem title="登录" value="a"></StepItem>
+          <StepItem title="支付" value="b"></StepItem>
+          <StepItem title="支付" value="c"></StepItem>
+          <StepItem title="支付" value="d"></StepItem>
+        </Steps>
+      ));
+      const items = wrapper.findAll('.t-steps-item');
+      const inners = wrapper.findAll('.t-steps-item__inner');
+      expect(items[0].classes()).toContain('t-steps-item--finish');
+      expect(items[1].classes()).toContain('t-steps-item--process');
+      expect(items[2].classes()).toContain('t-steps-item--default');
+      await inners[2].trigger('click');
+      expect(items[0].classes()).toContain('t-steps-item--finish');
+      expect(items[1].classes()).toContain('t-steps-item--finish');
+      expect(items[2].classes()).toContain('t-steps-item--process');
+      expect(current.value).toBe('c');
+    });
   });
 });
diff --git a/src/steps/steps.tsx b/src/steps/steps.tsx
index 61dc7a0f4e..bc2fde9613 100644
--- a/src/steps/steps.tsx
+++ b/src/steps/steps.tsx
@@ -3,6 +3,7 @@ import isObject from 'lodash/isObject';
 import props from './props';
 import stepItemProps from './step-item-props';
 import { TdStepItemProps } from './type';
+import TStepItem from './step-item';
 
 import { usePrefixClass } from '../hooks/useConfig';
 import useVModel from '../hooks/useVModel';
@@ -10,8 +11,10 @@ import { useChildComponentSlots } from '../hooks';
 
 export default defineComponent({
   name: 'TSteps',
+  components: {
+    TStepItem,
+  },
   props: { ...props },
-
   setup(props) {
     const COMPONENT_NAME = usePrefixClass('steps');