From a7cd89f6a457c2b01cb1ddee0cbd61676773e2e8 Mon Sep 17 00:00:00 2001
From: azhe <xiaosansiji@gmail.com>
Date: Tue, 22 Nov 2022 16:46:14 +0800
Subject: [PATCH] Test/form (#1820)

* feat: set default stackblitz url

* test: add form test

* fix: getComputedStyle error

* chore: remove useless log

* test: add form test

* test: add grid test

* test: add layout test

* test: message plugin test

* test: add rate test

* test: add space test

* test: add steps test

* feat: update common
---
 script/test/setup.js                          |   5 +
 src/drawer/__tests__/index.test.jsx           |   1 -
 .../__snapshots__/index.test.jsx.snap         | 118 +++++++
 src/form/__tests__/index.test.jsx             | 299 +++++++++++++++++-
 src/form/_example/base.vue                    |   2 +-
 src/grid/__tests__/index.test.jsx             | 285 +++++++++++++++++
 src/layout/__tests__/index.test.jsx           | 105 ++++++
 src/message/__tests__/index.test.jsx          |  14 +-
 src/rate/__tests__/index.test.jsx             |  43 +++
 src/space/__tests__/index.test.jsx            |  81 +++++
 src/steps/__tests__/index.test.jsx            | 278 +++++++++++++++-
 11 files changed, 1202 insertions(+), 29 deletions(-)
 create mode 100644 src/form/__tests__/__snapshots__/index.test.jsx.snap
 create mode 100644 src/grid/__tests__/index.test.jsx
 create mode 100644 src/layout/__tests__/index.test.jsx
 create mode 100644 src/rate/__tests__/index.test.jsx
 create mode 100644 src/space/__tests__/index.test.jsx

diff --git a/script/test/setup.js b/script/test/setup.js
index 47d3edd49..356691167 100644
--- a/script/test/setup.js
+++ b/script/test/setup.js
@@ -2,6 +2,11 @@ import Vue from 'vue';
 import VueCompositionAPI from '@vue/composition-api';
 import TDesign from '@/src/index';
 
+// https://github.com/nickcolley/jest-axe/issues/147#issuecomment-758804533
+// fix error when call computedStyle(elt, pseudoElt)
+const { getComputedStyle } = window;
+window.getComputedStyle = (elt) => getComputedStyle(elt);
+
 Vue.config.productionTip = true;
 Vue.config.devtools = false;
 
diff --git a/src/drawer/__tests__/index.test.jsx b/src/drawer/__tests__/index.test.jsx
index ae0937a64..35dc6f1c8 100644
--- a/src/drawer/__tests__/index.test.jsx
+++ b/src/drawer/__tests__/index.test.jsx
@@ -202,7 +202,6 @@ describe('Drawer', () => {
       });
       await nextTick();
       const btn = wrapper.find('.t-drawer__confirm');
-      console.log('onConfirm', btn);
       await btn.trigger('click');
       expect(fn).toBeCalled();
     });
diff --git a/src/form/__tests__/__snapshots__/index.test.jsx.snap b/src/form/__tests__/__snapshots__/index.test.jsx.snap
new file mode 100644
index 000000000..c519e71db
--- /dev/null
+++ b/src/form/__tests__/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,118 @@
+// Vitest Snapshot v1
+
+exports[`Form > @event > validate 1`] = `
+{
+  "firstError": "姓名必填",
+  "validateResult": {
+    "age": [
+      {
+        "message": "age必填",
+        "required": true,
+        "result": false,
+      },
+    ],
+    "name": [
+      {
+        "message": "姓名必填",
+        "required": true,
+        "result": false,
+      },
+    ],
+  },
+}
+`;
+
+exports[`Form > @event > validate 2`] = `
+{
+  "firstError": "姓名必填",
+  "validateResult": {
+    "age": [
+      {
+        "message": "age必填",
+        "required": true,
+        "result": false,
+      },
+    ],
+    "name": [
+      {
+        "message": "姓名必填",
+        "required": true,
+        "result": false,
+      },
+    ],
+  },
+}
+`;
+
+exports[`Form > @event > validate 3`] = `
+{
+  "firstError": "姓名必填",
+  "validateResult": {
+    "age": [
+      {
+        "message": "age必填",
+        "required": true,
+        "result": false,
+      },
+    ],
+    "name": [
+      {
+        "message": "姓名必填",
+        "required": true,
+        "result": false,
+      },
+    ],
+  },
+}
+`;
+
+exports[`Form > @event > validate 4`] = `
+{
+  "firstError": "姓名必填",
+  "validateResult": {
+    "age": [
+      {
+        "message": "age必填",
+        "required": true,
+        "result": false,
+      },
+    ],
+    "name": [
+      {
+        "message": "姓名必填",
+        "required": true,
+        "result": false,
+      },
+    ],
+  },
+}
+`;
+
+exports[`Form > function > validate 1`] = `
+{
+  "age": [
+    {
+      "message": "age必填",
+      "required": true,
+      "result": false,
+      "trigger": "blur",
+    },
+  ],
+  "name": [
+    {
+      "message": "姓名必填",
+      "required": true,
+      "result": false,
+      "trigger": "blur",
+    },
+  ],
+}
+`;
+
+exports[`Form > function > validate 2`] = `
+WrapperArray {
+  "selector": ".t-input__extra",
+}
+`;
+
+exports[`Form > function > validate 3`] = `true`;
diff --git a/src/form/__tests__/index.test.jsx b/src/form/__tests__/index.test.jsx
index 6f6869e50..0cb167a9a 100644
--- a/src/form/__tests__/index.test.jsx
+++ b/src/form/__tests__/index.test.jsx
@@ -1,30 +1,303 @@
 import { mount } from '@vue/test-utils';
-import Form from '@/src/form/index.ts';
+import { CloseCircleFilledIcon, InfoCircleIcon } from 'tdesign-icons-vue';
+import { FormItem, Form } from '../index.ts';
+import { Input } from '@/src/index.ts';
+
+const delay = (time = 0) => new Promise((res, rej) => {
+  setTimeout(() => {
+    res();
+  }, time);
+});
 
 // every component needs four parts: props/events/slots/functions.
 describe('Form', () => {
   // test props api
   describe(':props', () => {
-    it('', () => {
+    it(':labelAlign', async () => {
+      let wrapper = mount({
+        render() {
+          return (
+            <Form>
+              <FormItem label="name" name="name">
+                <Input placeholder="请输入内容" />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+      // Form labelAlign default value: right
+      expect(wrapper.find('.t-form__label').classes('t-form__label--right')).eq(true);
+
+      wrapper = mount({
+        render() {
+          return (
+            <Form labelAlign="top">
+              <FormItem label="name" name="name">
+                <Input placeholder="请输入内容" />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+      expect(wrapper.find('.t-form__label').classes('t-form__label--top')).eq(true);
+
+      wrapper = mount({
+        render() {
+          return (
+            <Form labelAlign="left">
+              <FormItem label="name" name="name">
+                <Input placeholder="请输入内容" />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+      expect(wrapper.find('.t-form__label').classes('t-form__label--left')).eq(true);
+    });
+
+    it(':labelWidth', async () => {
+      let wrapper = mount({
+        render() {
+          return (
+            <Form>
+              <FormItem label="name" name="name">
+                <Input placeholder="请输入内容" />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+
+      expect(wrapper.find('.t-form__label').element.style.width).eq('100px');
+      expect(wrapper.find('.t-form__controls').element.style.marginLeft).eq('100px');
+
+      wrapper = mount({
+        render() {
+          return (
+            <Form labelWidth="200px">
+              <FormItem label="name" name="name">
+                <Input placeholder="请输入内容" />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+      expect(wrapper.find('.t-form__label').element.style.width).eq('200px');
+      expect(wrapper.find('.t-form__controls').element.style.marginLeft).eq('200px');
+    });
+
+    it(':layout', async () => {
+      let wrapper = mount({
+        render() {
+          return (
+            <Form>
+              <FormItem label="name" name="name">
+                <Input placeholder="请输入内容" />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+      expect(wrapper.find('.t-form').classes('t-form-inline')).eq(false);
+
+      wrapper = mount({
+        render() {
+          return (
+            <Form layout="inline">
+              <FormItem label="name" name="name">
+                <Input placeholder="请输入内容" />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+      expect(wrapper.find('.t-form').classes('t-form-inline')).eq(true);
+    });
+
+    it(':colon', async () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Form>
+              <FormItem label="name" name="name">
+                <Input placeholder="请输入内容" />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+      expect(getComputedStyle(wrapper.find('label').element, '::after').content).eq('');
+    });
+
+    it(':showErrorMessage', async () => {
+      const rules = {
+        name: [{ required: true, message: '姓名必填' }],
+      };
+      const formData = {
+        name: '',
+      };
       const wrapper = mount({
         render() {
-          return <Form></Form>;
+          return (
+            <Form rules={rules} data={formData}>
+              <FormItem label="name" name="name">
+                <Input v-model={formData.name} />
+              </FormItem>
+            </Form>
+          );
         },
       });
-      expect(wrapper.exists()).toBe(true);
+      const formComp = wrapper.findComponent(Form);
+      await formComp.vm.validate();
+      expect(wrapper.find('.t-input__extra').text()).eq('姓名必填');
+    });
+
+    it(':resetType', async () => {
+      const rules = {
+        name: [{ required: true }],
+      };
+      const formData = {
+        name: 'defaultName',
+      };
+
+      const wrapper = mount({
+        render() {
+          return (
+            <Form rules={rules} data={formData}>
+              <FormItem label="name" name="name">
+                <Input v-model={formData.name} />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+
+      const form = wrapper.findComponent(Form);
+
+      expect(formData.name).eq('defaultName');
+      form.vm.reset();
+      expect(formData.name).eq('');
+    });
+
+    it(':statusIcon', async () => {
+      const rules = {
+        name: [{ required: true }],
+      };
+      const formData = {
+        name: '',
+      };
+
+      let wrapper = mount({
+        render() {
+          return (
+            <Form rules={rules} data={formData} statusIcon>
+              <FormItem label="name" name="name">
+                <Input v-model={formData.name} />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+
+      let form = wrapper.findComponent(Form);
+
+      await form.vm.validate();
+      expect(form.findComponent(CloseCircleFilledIcon).exists()).eq(true);
+
+      // function
+      wrapper = mount({
+        render() {
+          return (
+            <Form rules={rules} data={formData} statusIcon={() => <InfoCircleIcon />}>
+              <FormItem label="name" name="name">
+                <Input v-model={formData.name} />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+
+      form = wrapper.findComponent(Form);
+      await form.vm.validate();
+      expect(form.findComponent(InfoCircleIcon).exists()).eq(true);
     });
   });
 
   // test events
-  // describe('@event', () => {});
+  describe('@event', () => {
+    it('validate', async () => {
+      const rules = {
+        name: [{ required: true, message: '姓名必填' }],
+        age: [{ required: true }],
+      };
+      const data = {
+        name: '',
+        age: undefined,
+      };
+      const onValidate = vi.fn();
+      const wrapper = mount({
+        render() {
+          return (
+            <Form rules={rules} data={data} onValidate={onValidate}>
+              <FormItem label="name" name="name">
+                <Input v-model={data.name} />
+              </FormItem>
+              <FormItem label="age" name="age">
+                <Input v-model={data.age} />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+
+      const form = wrapper.findComponent(Form);
+      expect(onValidate).not.toBeCalled();
+
+      await form.vm.validate();
+      expect(onValidate).toHaveBeenCalledTimes(1);
+      expect(onValidate.mock.calls[0][0]).toMatchSnapshot();
+
+      form.vm.submit();
+      await delay();
+      expect(onValidate).toHaveBeenCalledTimes(2);
+      expect(onValidate.mock.calls[1][0]).toMatchSnapshot();
+
+      data.name = 'test';
+      await form.vm.validate();
+      expect(onValidate.mock.calls[2][0]).toMatchSnapshot();
 
-  // test slots
-  // describe('<slot>', () => {
-  //   it('', () => {});
-  // });
+      data.age = 18;
+      await form.vm.validate();
+      expect(onValidate.mock.calls[3][0]).toMatchSnapshot();
+    });
+
+    it('reset', async () => {
+      const onReset = vi.fn();
+      const rules = {
+        name: [{ required: true }],
+      };
+      const data = {
+        name: '',
+      };
+
+      const wrapper = mount({
+        render() {
+          return (
+            <Form rules={rules} data={data} onReset={onReset}>
+              <FormItem label="name" name="name">
+                <Input v-model={data.name} />
+              </FormItem>
+            </Form>
+          );
+        },
+      });
+
+      const form = wrapper.findComponent(Form);
+      expect(onReset).not.toBeCalled();
 
-  // test exposure function
-  // describe('function', () => {
-  //   it('', () => {});
-  // });
+      await form.trigger('reset');
+      expect(onReset).toHaveBeenCalledTimes(1);
+      expect(onReset.mock.calls[0][0].e).toBeInstanceOf(Event);
+    });
+  });
 });
diff --git a/src/form/_example/base.vue b/src/form/_example/base.vue
index 0591f3ef3..46105d7e4 100644
--- a/src/form/_example/base.vue
+++ b/src/form/_example/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
+  <t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true" disabled>
     <t-form-item label="姓名" name="name" :rules="requiredRules">
       <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
     </t-form-item>
diff --git a/src/grid/__tests__/index.test.jsx b/src/grid/__tests__/index.test.jsx
new file mode 100644
index 000000000..f7de71406
--- /dev/null
+++ b/src/grid/__tests__/index.test.jsx
@@ -0,0 +1,285 @@
+import { mount } from '@vue/test-utils';
+import { Row, Col } from '@/src/grid/index.ts';
+
+const alignList = ['start', 'end', 'center', 'stretch', 'baseline', 'top', 'middle', 'bottom'];
+const justifyList = ['start', 'end', 'center', 'space-around', 'space-between'];
+
+describe('Grid', () => {
+  describe('row:props', () => {
+    it('', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Row>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+            </Row>
+          );
+        },
+      });
+      const row = wrapper.find('.t-row');
+      const cols = wrapper.findAll('.t-col');
+      expect(row.exists()).toBeTruthy();
+      expect(cols.length).toBe(4);
+    });
+    it(':align', () => {
+      alignList.forEach((align) => {
+        const wrapper = mount({
+          render() {
+            return (
+              <Row align={align}>
+                <Col span={3}>
+                  <div>col-3</div>
+                </Col>
+                <Col span={3}>
+                  <div>col-3</div>
+                </Col>
+                <Col span={3}>
+                  <div>col-3</div>
+                </Col>
+                <Col span={3}>
+                  <div>col-3</div>
+                </Col>
+              </Row>
+            );
+          },
+        });
+        const row = wrapper.find('.t-row');
+        expect(row.classes()).toContain(`t-row--align-${align}`);
+      });
+    });
+    it(':justify', () => {
+      justifyList.forEach((justify) => {
+        const wrapper = mount({
+          render() {
+            return (
+              <Row justify={justify}>
+                <Col span={3}>
+                  <div>col-3</div>
+                </Col>
+                <Col span={3}>
+                  <div>col-3</div>
+                </Col>
+                <Col span={3}>
+                  <div>col-3</div>
+                </Col>
+                <Col span={3}>
+                  <div>col-3</div>
+                </Col>
+              </Row>
+            );
+          },
+        });
+        const row = wrapper.find('.t-row');
+        expect(row.classes()).toContain(`t-row--${justify}`);
+      });
+    });
+    it(':gutter', () => {
+      mount({
+        render() {
+          return (
+            <Row gutter={20}>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+            </Row>
+          );
+        },
+      });
+      const cols = document.querySelectorAll('.t-col');
+      cols.forEach((col) => {
+        expect(getComputedStyle(col.element, null).paddingLeft).toBe('10px');
+        expect(getComputedStyle(col.element, null).paddingRight).toBe('10px');
+      });
+    });
+    it(':tag', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Row tag="span">
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+              <Col span={3}>
+                <div>col-3</div>
+              </Col>
+            </Row>
+          );
+        },
+      });
+      const row = wrapper.find('span');
+      expect(row.exists()).toBeTruthy();
+    });
+  });
+  describe('col:props', () => {
+    it(':span', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Row>
+              <Col span={4}>
+                <div>col-3</div>
+              </Col>
+              <Col span={8}>
+                <div>col-3</div>
+              </Col>
+            </Row>
+          );
+        },
+      });
+      const cols = wrapper.findAll('.t-col');
+      expect(cols.at(0).classes()).toContain('t-col-4');
+      expect(cols.at(1).classes()).toContain('t-col-8');
+    });
+    it(':flex', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Row>
+              <Col span={4}>
+                <div>col-3</div>
+              </Col>
+              <Col flex="1">
+                <div>col-3</div>
+              </Col>
+            </Row>
+          );
+        },
+      });
+      const cols = wrapper.findAll('.t-col');
+      expect(cols.at(0).classes()).toContain('t-col-4');
+      expect(cols.at(1).classes()).toContain('t-col-12');
+    });
+    it(':offset', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Row>
+              <Col span={4}>
+                <div>col-3</div>
+              </Col>
+              <Col span={4} offset={4}>
+                <div>col-3</div>
+              </Col>
+            </Row>
+          );
+        },
+      });
+      const cols = wrapper.findAll('.t-col');
+      expect(cols.at(0).classes()).toContain('t-col-4');
+      expect(cols.at(1).classes()).toContain('t-col-4');
+      expect(cols.at(1).classes()).toContain('t-col-offset-4');
+    });
+    it(':pull&:push', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Row>
+              <Col span={9} push={3}>
+                <div>col-3</div>
+              </Col>
+              <Col span={3} pull={9}>
+                <div>col-3</div>
+              </Col>
+            </Row>
+          );
+        },
+      });
+      const cols = wrapper.findAll('.t-col');
+      expect(cols.at(0).classes()).toContain('t-col-9');
+      expect(cols.at(0).classes()).toContain('t-col-push-3');
+      expect(cols.at(1).classes()).toContain('t-col-3');
+      expect(cols.at(1).classes()).toContain('t-col-pull-9');
+    });
+    it(':order', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Row>
+              <Col span={3} order={4}>
+                <div>col-3-order-4</div>
+              </Col>
+              <Col span={3} order={3}>
+                <div>col-3-order-3</div>
+              </Col>
+              <Col span={3} order={2}>
+                <div>col-3-order-2</div>
+              </Col>
+              <Col span={3} order={1}>
+                <div>col-3-order-1</div>
+              </Col>
+            </Row>
+          );
+        },
+      });
+      const cols = wrapper.findAll('.t-col');
+      expect(cols.at(0).classes()).toContain('t-col-order-4');
+      expect(cols.at(1).classes()).toContain('t-col-order-3');
+      expect(cols.at(2).classes()).toContain('t-col-order-2');
+      expect(cols.at(3).classes()).toContain('t-col-order-1');
+    });
+    it(':tag', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Row>
+              <Col span={12} tag="span">
+                <div>col</div>
+              </Col>
+            </Row>
+          );
+        },
+      });
+      const span = wrapper.find('span');
+      expect(span.exists()).toBeTruthy();
+    });
+    it(':responsive', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Row>
+              <Col xs={2} sm={4} md={6} lg={8} xl={10}></Col>
+              <Col xs={10} sm={8} md={6} lg={4} xl={2}></Col>
+            </Row>
+          );
+        },
+      });
+      const cols = wrapper.findAll('.t-col');
+      expect(cols.at(0).classes()).toContain('t-col-xs-2');
+      expect(cols.at(0).classes()).toContain('t-col-sm-4');
+      expect(cols.at(0).classes()).toContain('t-col-md-6');
+      expect(cols.at(0).classes()).toContain('t-col-lg-8');
+      expect(cols.at(0).classes()).toContain('t-col-xl-10');
+      expect(cols.at(1).classes()).toContain('t-col-xs-10');
+      expect(cols.at(1).classes()).toContain('t-col-sm-8');
+      expect(cols.at(1).classes()).toContain('t-col-md-6');
+      expect(cols.at(1).classes()).toContain('t-col-lg-4');
+      expect(cols.at(1).classes()).toContain('t-col-xl-2');
+    });
+  });
+});
diff --git a/src/layout/__tests__/index.test.jsx b/src/layout/__tests__/index.test.jsx
new file mode 100644
index 000000000..33e5dc662
--- /dev/null
+++ b/src/layout/__tests__/index.test.jsx
@@ -0,0 +1,105 @@
+import { mount } from '@vue/test-utils';
+import {
+  Layout, Header, Content, Footer, Aside,
+} from '@/src/layout/index';
+
+describe('Layout', () => {
+  describe(':props', () => {
+    it('header&content&footer', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Layout>
+              <Header>Header</Header>
+              <Content>Content</Content>
+              <Footer>Footer</Footer>
+            </Layout>
+          );
+        },
+      });
+      expect(wrapper.find('.t-layout').exists()).toBeTruthy();
+      expect(wrapper.find('.t-layout__header').exists()).toBeTruthy();
+      expect(wrapper.find('.t-layout__header').text()).toBe('Header');
+      expect(wrapper.find('.t-layout__content').exists()).toBeTruthy();
+      expect(wrapper.find('.t-layout__content').text()).toBe('Content');
+      expect(wrapper.find('.t-layout__footer').exists()).toBeTruthy();
+      expect(wrapper.find('.t-layout__footer').text()).toBe('Footer');
+    });
+    it('header&aside&content&footer', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Layout>
+              <Header>Header</Header>
+              <Layout>
+                <Aside>Aside</Aside>
+                <Content>Content</Content>
+              </Layout>
+              <Footer>Footer</Footer>
+            </Layout>
+          );
+        },
+      });
+      expect(wrapper.findAll('.t-layout').length).toBe(2);
+      expect(wrapper.find('.t-layout__header').exists()).toBeTruthy();
+      expect(wrapper.find('.t-layout__header').text()).toBe('Header');
+      expect(wrapper.find('.t-layout__sider').exists()).toBeTruthy();
+      expect(wrapper.find('.t-layout__sider').text()).toBe('Aside');
+      expect(wrapper.find('.t-layout__content').exists()).toBeTruthy();
+      expect(wrapper.find('.t-layout__content').text()).toBe('Content');
+      expect(wrapper.find('.t-layout__footer').exists()).toBeTruthy();
+      expect(wrapper.find('.t-layout__footer').text()).toBe('Footer');
+    });
+    it(':header:height', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Layout>
+              <Header height="100px">Header</Header>
+              <Content>Content</Content>
+              <Footer>Footer</Footer>
+            </Layout>
+          );
+        },
+      });
+      const header = wrapper.find('.t-layout__header');
+      expect(header.exists()).toBeTruthy();
+      expect(getComputedStyle(header.element, null).height).toBe('100px');
+    });
+    it(':aside:width', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Layout>
+              <Header>Header</Header>
+              <Layout>
+                <Aside width="300px">Aside</Aside>
+                <Content>Content</Content>
+              </Layout>
+              <Footer>Footer</Footer>
+            </Layout>
+          );
+        },
+      });
+      const aside = wrapper.find('.t-layout__sider');
+      expect(aside.exists()).toBeTruthy();
+      expect(getComputedStyle(aside.element, null).width).toBe('300px');
+    });
+    it(':footer:height', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Layout>
+              <Header>Header</Header>
+              <Content>Content</Content>
+              <Footer height="100px">Footer</Footer>
+            </Layout>
+          );
+        },
+      });
+      const footer = wrapper.find('.t-layout__footer');
+      expect(footer.exists()).toBeTruthy();
+      expect(getComputedStyle(footer.element, null).height).toBe('100px');
+    });
+  });
+});
diff --git a/src/message/__tests__/index.test.jsx b/src/message/__tests__/index.test.jsx
index 0af122ad4..4fec67e6e 100644
--- a/src/message/__tests__/index.test.jsx
+++ b/src/message/__tests__/index.test.jsx
@@ -7,7 +7,7 @@ import {
   ErrorCircleFilledIcon,
   HelpCircleFilledIcon,
 } from 'tdesign-icons-vue';
-import { Message } from '@/src/message/index.ts';
+import { Message, MessagePlugin } from '@/src/message/index.ts';
 import Button from '@/src/button/index.ts';
 import Loading from '@/src/loading/index.ts';
 
@@ -210,5 +210,17 @@ describe('Message', () => {
       });
       expect(wrapper.find('.custom-close-btn').exists()).toBe(true);
     });
+
+    it('plugin', async () => {
+      const open = () => MessagePlugin.info('用户表示普通操作信息提示');
+      const wrapper = mount({
+        render() {
+          return <Button onClick={open}>消息</Button>;
+        },
+      });
+      const btn = wrapper.findComponent(Button);
+      await btn.trigger('click');
+      expect(document.querySelector('.t-message')).not.toBe(null);
+    });
   });
 });
diff --git a/src/rate/__tests__/index.test.jsx b/src/rate/__tests__/index.test.jsx
new file mode 100644
index 000000000..f38573869
--- /dev/null
+++ b/src/rate/__tests__/index.test.jsx
@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils';
+import { HeartFilledIcon } from 'tdesign-icons-vue';
+import Rate from '@/src/rate/index.ts';
+
+describe('Rate', () => {
+  // test props api
+  describe(':props', () => {
+    it('', () => {
+      const wrapper = mount({
+        render() {
+          return <Rate></Rate>;
+        },
+      });
+      expect(wrapper.exists()).toBe(true);
+    });
+    it('custom count', () => {
+      const wrapper = mount({
+        render() {
+          return <Rate count={7} />;
+        },
+      });
+      expect(wrapper.findAll('.t-rate__item').length).toBe(7);
+    });
+    it('half', () => {
+      const wrapper = mount({
+        render() {
+          return <Rate direction="vertical" value={4.5} allowHalf />;
+        },
+      });
+
+      expect(wrapper.find('.t-rate__item--half').exists()).toBeTruthy();
+    });
+    it('custom icon', () => {
+      const wrapper = mount({
+        render() {
+          return <Rate value={4} icon={() => <HeartFilledIcon />} />;
+        },
+      });
+
+      expect(wrapper.findComponent(HeartFilledIcon).exists()).toBeTruthy();
+    });
+  });
+});
diff --git a/src/space/__tests__/index.test.jsx b/src/space/__tests__/index.test.jsx
new file mode 100644
index 000000000..23e89d92a
--- /dev/null
+++ b/src/space/__tests__/index.test.jsx
@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils';
+import Divider from '@/src/divider/index.ts';
+import Space from '@/src/space/index.ts';
+
+describe('Space', () => {
+  // test props api
+  describe(':props', () => {
+    it('direction and size', () => {
+      const sizeMap = new Map(
+        Object.entries({
+          small: '8px',
+          medium: '16px',
+          large: '24px',
+          '100pt': '100pt',
+        }),
+      );
+      sizeMap.set(0, '0px');
+      sizeMap.set(123.456, '123.456px');
+
+      ['vertical', 'horizontal'].forEach((direction) => {
+        sizeMap.forEach((value, key) => {
+          const wrapper = mount({
+            render() {
+              return (
+                <Space direction={direction} size={key}>
+                  <div>child1</div>
+                  <div>child2</div>
+                </Space>
+              );
+            },
+          });
+          expect(wrapper.classes()).toContain(`t-space-${direction}`);
+          expect(wrapper.element.style.gap).toEqual(value);
+        });
+      });
+    });
+
+    it('align', () => {
+      ['start', 'end', 'center', 'baseline'].forEach((align) => {
+        const wrapper = mount({
+          render() {
+            return (
+              <Space align={align}>
+                <div></div>
+              </Space>
+            );
+          },
+        });
+        expect(wrapper.classes()).toContain(`t-space-align-${align}`);
+      });
+    });
+
+    it('break line', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Space breakLine={true}>
+              <div></div>
+            </Space>
+          );
+        },
+      });
+      expect(wrapper.element.style.flexWrap).toEqual('wrap');
+    });
+
+    it('separator', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Space align="center" separator={() => <Divider layout="vertical" />}>
+              <div>child1</div>
+              <div>child2</div>
+            </Space>
+          );
+        },
+      });
+      expect(wrapper.findComponent(Divider).exists());
+      expect(wrapper.find('.t-space-item-separator').exists());
+    });
+  });
+});
diff --git a/src/steps/__tests__/index.test.jsx b/src/steps/__tests__/index.test.jsx
index b73f48509..e00bdc522 100644
--- a/src/steps/__tests__/index.test.jsx
+++ b/src/steps/__tests__/index.test.jsx
@@ -1,25 +1,277 @@
 import { mount } from '@vue/test-utils';
-import Steps from '@/src/steps/index.ts';
+import { nextTick } from 'vue';
+import { AppIcon } from 'tdesign-icons-vue';
+import Steps, { StepItem } from '@/src/steps/index.ts';
 
 describe('Steps', () => {
-  let cmp;
+  it('', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Steps>
+            <StepItem title="登录"></StepItem>
+            <StepItem title="购物"></StepItem>
+            <StepItem title="支付"></StepItem>
+            <StepItem title="完成"></StepItem>
+          </Steps>
+        );
+      },
+    });
+    expect(wrapper.findAll('.t-steps-item').length).toBe(4);
+  });
 
-  beforeEach(() => {
-    cmp = mount(Steps, {
-      propsData: {
-        layout: 'vertical',
-        theme: 'dot',
+  it(':current', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <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.at(0).classes()).toContain('t-steps-item--finish');
+    expect(items.at(1).classes()).toContain('t-steps-item--process');
+    expect(items.at(2).classes()).toContain('t-steps-item--default');
+    expect(items.at(3).classes()).toContain('t-steps-item--default');
   });
 
-  it('equals layout to "vertical"', () => {
-    expect(cmp.vm.layout).toEqual('vertical');
+  it(':defaultCurrent', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <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.at(0).classes()).toContain('t-steps-item--finish');
+    expect(items.at(1).classes()).toContain('t-steps-item--process');
+    expect(items.at(2).classes()).toContain('t-steps-item--default');
+    expect(items.at(3).classes()).toContain('t-steps-item--default');
   });
-  it('equals type to "dot"', () => {
-    expect(cmp.vm.theme).toEqual('dot');
+
+  it(':layout', () => {
+    const layoutList = ['horizontal', 'vertical'];
+    layoutList.forEach((layout) => {
+      const wrapper = mount({
+        render() {
+          return (
+            <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('equals sequence to "positive"', () => {
-    expect(cmp.vm.sequence).toEqual('positive');
+
+  it(':options', () => {
+    const options = [
+      {
+        title: '登录',
+      },
+      {
+        title: '购物',
+      },
+      {
+        title: '支付',
+      },
+      {
+        title: '完成',
+      },
+    ];
+    const wrapper = mount({
+      render() {
+        return <Steps options={options}></Steps>;
+      },
+    });
+    expect(wrapper.findAll('.t-steps-item').length).toBe(4);
+  });
+
+  it(':readonly', async () => {
+    const current = 1;
+    const wrapper = mount({
+      render() {
+        return (
+          <Steps defaultCurrent={current}>
+            <StepItem title="登录"></StepItem>
+            <StepItem title="购物"></StepItem>
+            <StepItem title="支付"></StepItem>
+            <StepItem title="完成"></StepItem>
+          </Steps>
+        );
+      },
+    });
+    const items = wrapper.findAll('.t-steps-item');
+    await items.at(1).trigger('click');
+    expect(current).toBe(1);
+    expect(items.at(0).classes()).toContain('t-steps-item--finish');
+    expect(items.at(1).classes()).toContain('t-steps-item--process');
+  });
+
+  it(':theme', async () => {
+    const themeList = ['default', 'dot'];
+    themeList.forEach((theme) => {
+      const wrapper = mount({
+        render() {
+          return (
+            <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({
+        render() {
+          return (
+            <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(':sequence', async () => {
+    const sequenceList = ['positive', 'reverse'];
+    sequenceList.forEach((sequence) => {
+      const wrapper = mount({
+        render() {
+          return (
+            <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(':onChange', async () => {
+    let current = 0;
+    const onChange = (n) => {
+      current = n;
+    };
+    const wrapper = mount({
+      render() {
+        return (
+          <Steps defaultCurrent={current} onChange={onChange}>
+            <StepItem title="登录"></StepItem>
+            <StepItem title="购物"></StepItem>
+            <StepItem title="支付"></StepItem>
+            <StepItem title="完成"></StepItem>
+          </Steps>
+        );
+      },
+    });
+    const inners = wrapper.findAll('.t-steps-item__inner');
+    await inners.at(1).trigger('click');
+    await nextTick();
+    expect(current).toBe(1);
+  });
+
+  describe(':StepItem', () => {
+    it(':content :title', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <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('已完成状态');
+
+      const title = wrapper.find('.t-steps-item .t-steps-item__title');
+      expect(title.exists()).toBeTruthy();
+      expect(title.text()).toBe('登录');
+    });
+
+    it(':extra', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Steps>
+              <StepItem title="登录" default="已完成状态" extra={() => <div class="extra">额外操作</div>}></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 wrapper = mount({
+        render() {
+          return (
+            <Steps>
+              <StepItem title="登录" default="已完成状态" icon={() => <AppIcon />}></StepItem>
+            </Steps>
+          );
+        },
+      });
+      const icon = wrapper.find('.t-steps-item .t-steps-item__icon');
+      expect(icon.exists()).toBeTruthy();
+      expect(icon.findComponent(AppIcon)).toBeTruthy();
+    });
+
+    it(':status', () => {
+      const statusList = ['default', 'process', 'finish', 'error'];
+      statusList.forEach((status) => {
+        const wrapper = mount({
+          render() {
+            return (
+              <Steps>
+                <StepItem title="登录" default="已完成状态" status={status}></StepItem>
+              </Steps>
+            );
+          },
+        });
+        const item = wrapper.find('.t-steps-item');
+        expect(item.classes()).toContain(`t-steps-item--${status}`);
+      });
+    });
   });
 });