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 labelAlign default value: right
+ expect(wrapper.find('.t-form__label').classes('t-form__label--right')).eq(true);
+
+ wrapper = mount({
+ render() {
+ return (
+
+ );
+ },
+ });
+ expect(wrapper.find('.t-form__label').classes('t-form__label--top')).eq(true);
+
+ wrapper = mount({
+ render() {
+ return (
+
+ );
+ },
+ });
+ expect(wrapper.find('.t-form__label').classes('t-form__label--left')).eq(true);
+ });
+
+ it(':labelWidth', async () => {
+ let wrapper = mount({
+ render() {
+ return (
+
+ );
+ },
+ });
+
+ 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 (
+
+ );
+ },
+ });
+ 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 (
+
+ );
+ },
+ });
+ expect(wrapper.find('.t-form').classes('t-form-inline')).eq(false);
+
+ wrapper = mount({
+ render() {
+ return (
+
+ );
+ },
+ });
+ expect(wrapper.find('.t-form').classes('t-form-inline')).eq(true);
+ });
+
+ it(':colon', async () => {
+ const wrapper = mount({
+ render() {
+ return (
+
+ );
+ },
+ });
+ 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 ;
+ return (
+
+ );
},
});
- 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 (
+
+ );
+ },
+ });
+
+ 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 (
+
+ );
+ },
+ });
+
+ let form = wrapper.findComponent(Form);
+
+ await form.vm.validate();
+ expect(form.findComponent(CloseCircleFilledIcon).exists()).eq(true);
+
+ // function
+ wrapper = mount({
+ render() {
+ return (
+
+ );
+ },
+ });
+
+ 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 (
+
+ );
+ },
+ });
+
+ 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('', () => {
- // 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 (
+
+ );
+ },
+ });
+
+ 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 @@
-
+
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 (
+
+
+ col-3
+
+
+ col-3
+
+
+ col-3
+
+
+ col-3
+
+
+ );
+ },
+ });
+ 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 (
+
+
+ col-3
+
+
+ col-3
+
+
+ col-3
+
+
+ col-3
+
+
+ );
+ },
+ });
+ const row = wrapper.find('.t-row');
+ expect(row.classes()).toContain(`t-row--align-${align}`);
+ });
+ });
+ it(':justify', () => {
+ justifyList.forEach((justify) => {
+ const wrapper = mount({
+ render() {
+ return (
+
+
+ col-3
+
+
+ col-3
+
+
+ col-3
+
+
+ col-3
+
+
+ );
+ },
+ });
+ const row = wrapper.find('.t-row');
+ expect(row.classes()).toContain(`t-row--${justify}`);
+ });
+ });
+ it(':gutter', () => {
+ mount({
+ render() {
+ return (
+
+
+ col-3
+
+
+ col-3
+
+
+ col-3
+
+
+ col-3
+
+
+ );
+ },
+ });
+ 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 (
+
+
+ col-3
+
+
+ col-3
+
+
+ col-3
+
+
+ col-3
+
+
+ );
+ },
+ });
+ const row = wrapper.find('span');
+ expect(row.exists()).toBeTruthy();
+ });
+ });
+ describe('col:props', () => {
+ it(':span', () => {
+ const wrapper = mount({
+ render() {
+ return (
+
+
+ col-3
+
+
+ col-3
+
+
+ );
+ },
+ });
+ 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 (
+
+
+ col-3
+
+
+ col-3
+
+
+ );
+ },
+ });
+ 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 (
+
+
+ col-3
+
+
+ col-3
+
+
+ );
+ },
+ });
+ 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 (
+
+
+ col-3
+
+
+ col-3
+
+
+ );
+ },
+ });
+ 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 (
+
+
+ col-3-order-4
+
+
+ col-3-order-3
+
+
+ col-3-order-2
+
+
+ col-3-order-1
+
+
+ );
+ },
+ });
+ 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 (
+
+
+ col
+
+
+ );
+ },
+ });
+ const span = wrapper.find('span');
+ expect(span.exists()).toBeTruthy();
+ });
+ it(':responsive', () => {
+ const wrapper = mount({
+ render() {
+ return (
+
+
+
+
+ );
+ },
+ });
+ 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 (
+
+
+ Content
+
+
+ );
+ },
+ });
+ 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 (
+
+
+
+
+ Content
+
+
+
+ );
+ },
+ });
+ 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 (
+
+
+ Content
+
+
+ );
+ },
+ });
+ 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 (
+
+
+
+
+ Content
+
+
+
+ );
+ },
+ });
+ 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 (
+
+
+ Content
+
+
+ );
+ },
+ });
+ 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 ;
+ },
+ });
+ 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 ;
+ },
+ });
+ expect(wrapper.exists()).toBe(true);
+ });
+ it('custom count', () => {
+ const wrapper = mount({
+ render() {
+ return ;
+ },
+ });
+ expect(wrapper.findAll('.t-rate__item').length).toBe(7);
+ });
+ it('half', () => {
+ const wrapper = mount({
+ render() {
+ return ;
+ },
+ });
+
+ expect(wrapper.find('.t-rate__item--half').exists()).toBeTruthy();
+ });
+ it('custom icon', () => {
+ const wrapper = mount({
+ render() {
+ return } />;
+ },
+ });
+
+ 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 (
+
+ child1
+ child2
+
+ );
+ },
+ });
+ 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 (
+
+
+
+ );
+ },
+ });
+ expect(wrapper.classes()).toContain(`t-space-align-${align}`);
+ });
+ });
+
+ it('break line', () => {
+ const wrapper = mount({
+ render() {
+ return (
+
+
+
+ );
+ },
+ });
+ expect(wrapper.element.style.flexWrap).toEqual('wrap');
+ });
+
+ it('separator', () => {
+ const wrapper = mount({
+ render() {
+ return (
+ }>
+ child1
+ child2
+
+ );
+ },
+ });
+ 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 (
+
+
+
+
+
+
+ );
+ },
+ });
+ 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 (
+
+
+
+
+
+
+ );
},
});
+ 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 (
+
+
+
+
+
+
+ );
+ },
+ });
+ 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 (
+
+
+
+
+
+
+ );
+ },
+ });
+ 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 ;
+ },
+ });
+ expect(wrapper.findAll('.t-steps-item').length).toBe(4);
+ });
+
+ it(':readonly', async () => {
+ const current = 1;
+ const wrapper = mount({
+ render() {
+ return (
+
+
+
+
+
+
+ );
+ },
+ });
+ 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 (
+
+
+
+
+
+
+ );
+ },
+ });
+ 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 (
+
+
+
+
+
+
+ );
+ },
+ });
+ 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 (
+
+
+
+
+
+
+ );
+ },
+ });
+ 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 (
+
+
+
+
+
+
+ );
+ },
+ });
+ 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 (
+
+
+
+ );
+ },
+ });
+ 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 (
+
+ }>
+
+ );
+ },
+ });
+ 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 (
+
+ }>
+
+ );
+ },
+ });
+ 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 (
+
+
+
+ );
+ },
+ });
+ const item = wrapper.find('.t-steps-item');
+ expect(item.classes()).toContain(`t-steps-item--${status}`);
+ });
+ });
});
});