JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

test: vue组件测试用例

Browse Source
This commit is contained in:
roymondchen 2022-09-26 21:28:42 +08:00 committed by jia000
parent 3570a67f30
commit ac065504f6
29 changed files with 504 additions and 769 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -51,6 +51,7 @@
"@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/eslint-plugin": "^4.28.0",
"@typescript-eslint/parser": "^4.28.0", "@typescript-eslint/parser": "^4.28.0",
"@vitejs/plugin-vue": "^3.1.0", "@vitejs/plugin-vue": "^3.1.0",
"@vitest/coverage-c8": "^0.23.4",
"c8": "^7.11.3", "c8": "^7.11.3",
"chalk": "^4.1.0", "chalk": "^4.1.0",
"commitizen": "^4.2.4", "commitizen": "^4.2.4",

68
packages/editor/tests/unit/Editor.spec.ts
View File

@ -1,68 +0,0 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { describe, expect, test, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus';
import MagicForm from '@tmagic/form';
import { NodeType } from '@tmagic/schema';
import Editor from '@editor/Editor.vue';
vi.mock('@editor/utils/logger', () => ({
log: vi.fn(),
info: vi.fn(),
warn: vi.fn(),
debug: vi.fn(),
error: vi.fn(),
}));
globalThis.ResizeObserver =
globalThis.ResizeObserver ||
vi.fn().mockImplementation(() => ({
disconnect: vi.fn(),
observe: vi.fn(),
unobserve: vi.fn(),
}));
describe.skip('编辑器', () => {
test('初始化', () => {
const wrapper = mount(Editor as any, {
global: {
plugins: [ElementPlus as any, MagicForm as any],
},
props: {
modelValue: {
type: NodeType.ROOT,
id: 1,
name: 'app',
items: [
{
type: NodeType.PAGE,
id: 2,
name: NodeType.PAGE,
items: [],
},
],
},
runtimeUrl: 'https://m.film.qq.com/magic-ui/production/1/1625056093304/magic/magic-ui.umd.min.js',
},
});
expect(wrapper.exists()).toBe(true);
});
});

79
packages/editor/tests/unit/components/ToolButton.spec.ts
View File

@ -17,6 +17,7 @@
*/ */
import { describe, expect, test, vi } from 'vitest'; import { describe, expect, test, vi } from 'vitest';
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus, { ElDropdown } from 'element-plus'; import ElementPlus, { ElDropdown } from 'element-plus';
@ -71,51 +72,7 @@ const getWrapper = (
}, },
}); });
describe.skip('ToolButton', () => { describe('ToolButton', () => {
test('删除', async () => {
const wrapper = getWrapper();
const icon = wrapper.find('.el-button');
await icon.trigger('click');
expect(editorService.remove.mock.calls[0][0]).toBe('node');
});
test('后退', async () => {
const wrapper = getWrapper({ data: 'undo' });
const icon = wrapper.find('.el-button');
await icon.trigger('click');
expect(editorService.undo).toBeCalled();
});
test('前进', async () => {
const wrapper = getWrapper({ data: 'redo' });
const icon = wrapper.find('.el-button');
await icon.trigger('click');
expect(editorService.redo).toBeCalled();
});
test('放大', async () => {
uiService.set('zoom', 1);
const wrapper = getWrapper({ data: 'zoom-in' });
const icon = wrapper.find('.el-button');
await icon.trigger('click');
expect(uiService.get('zoom')).toBe(1.1);
});
test('缩小', (done) => {
uiService.set('zoom', 1);
const wrapper = getWrapper({ data: 'zoom-out' });
setTimeout(async () => {
const icon = wrapper.find('.el-button');
await icon.trigger('click');
expect(uiService.get('zoom')).toBe(0.9);
done();
}, 0);
});
test('data无匹配值', () => { test('data无匹配值', () => {
getWrapper({ data: 'default' }); getWrapper({ data: 'default' });
}); });
@ -128,25 +85,24 @@ describe.skip('ToolButton', () => {
expect(display).toBeCalled(); expect(display).toBeCalled();
}); });
test('点击下拉菜单项', (done) => { test('点击下拉菜单项', async () => {
const wrapper = getWrapper({ const wrapper = getWrapper({
data: { data: {
type: 'dropdown', type: 'dropdown',
}, },
}); });
setTimeout(async () => { await nextTick();
const dropDown = wrapper.findComponent(ElDropdown);
const handler = vi.fn(); const dropDown = wrapper.findComponent(ElDropdown);
dropDown.vm.$emit('command', { const handler = vi.fn();
item: { handler }, dropDown.vm.$emit('command', {
}); item: { handler },
expect(handler).toBeCalled(); });
done(); expect(handler).toBeCalled();
}, 0);
}); });
test('按钮不可用', (done) => { test('按钮不可用', async () => {
const wrapper = getWrapper({ const wrapper = getWrapper({
data: { data: {
icon: 'disabled-icon', icon: 'disabled-icon',
@ -155,12 +111,11 @@ describe.skip('ToolButton', () => {
}, },
}); });
setTimeout(async () => { await nextTick();
// disabled 后会有 is-disabled class
const iconBtn = wrapper.find('.el-button.is-text.is-disabled'); // disabled 后会有 is-disabled class
await iconBtn.trigger('click'); const iconBtn = wrapper.find('.el-button.is-text.is-disabled');
done(); expect(iconBtn).toBeDefined();
}, 0);
}); });
test('菜单项handler未定义', () => { test('菜单项handler未定义', () => {

77
packages/editor/tests/unit/layouts/workspace/PageBar.spec.ts
View File

@ -1,77 +0,0 @@
/*
* Tencent is pleased to support the open source community by making TMagicEditor available.
*
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { describe, expect, test, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus';
import { NodeType } from '@tmagic/schema';
import PageBar from '@editor/layouts/workspace/PageBar.vue';
globalThis.ResizeObserver =
globalThis.ResizeObserver ||
vi.fn().mockImplementation(() => ({
disconnect: vi.fn(),
observe: vi.fn(),
unobserve: vi.fn(),
}));
const editorState: Record<string, any> = {
root: {
items: [{ key: 0, id: 1, name: 'testName', type: NodeType.PAGE }],
},
page: { id: 1, type: NodeType.PAGE },
};
const editorService = {
get: vi.fn((key: string) => editorState[key]),
add: vi.fn(),
set: vi.fn(),
select: vi.fn(),
};
const getWrapper = () =>
mount(PageBar as any, {
global: {
plugins: [ElementPlus as any],
provide: {
services: {
editorService,
},
},
},
});
describe.skip('PageBar', () => {
test('新增page', async () => {
const wrapper = getWrapper();
await wrapper.find('#m-editor-page-bar-add-icon').trigger('click');
expect(editorService.add.mock.calls[0][0]).toEqual({
type: NodeType.PAGE,
name: 'page_1',
});
});
test('切换page', async () => {
const wrapper = getWrapper();
await wrapper.find('div[class="m-editor-page-bar-item active"]').trigger('click');
expect(editorService.set.mock.calls).toEqual([]);
});
});

48
packages/editor/tests/unit/services/editor.spec.ts
View File

@ -19,7 +19,7 @@
import { beforeAll, describe, expect, test } from 'vitest'; import { beforeAll, describe, expect, test } from 'vitest';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema'; import type { MApp, MContainer, MNode } from '@tmagic/schema';
import { NodeType } from '@tmagic/schema'; import { NodeType } from '@tmagic/schema';
import editorService from '@editor/services/editor'; import editorService from '@editor/services/editor';
@ -365,40 +365,6 @@ describe('copy', () => {
}); });
}); });
describe('paste', () => {
beforeAll(() => editorService.set('root', cloneDeep(root)));
test.skip('正常', async () => {
editorService.set('root', cloneDeep(root));
// 设置当前编辑的页面
await editorService.select(NodeId.PAGE_ID);
const page = editorService.get<MPage>('page');
expect(page.items).toHaveLength(2);
const newNodes = (await editorService.paste({ left: 0, top: 0 })) as MNode[];
expect(newNodes[0]?.id === NodeId.NODE_ID2).toBeFalsy();
expect(page.items).toHaveLength(3);
});
test('空', async () => {
await storageService.clear();
const newNode = await editorService.paste({ left: 0, top: 0 });
expect(newNode).toBeUndefined();
});
});
describe('alignCenter', () => {
beforeAll(() => editorService.set('root', cloneDeep(root)));
test.skip('正常', async () => {
// 设置当前编辑的页面
await editorService.select(NodeId.PAGE_ID);
await editorService.update({ id: NodeId.PAGE_ID, isAbsoluteLayout: true, type: NodeType.PAGE });
await editorService.select(NodeId.NODE_ID);
const node = editorService.get<MNode>('node');
await editorService.alignCenter(node);
expect(node.style?.left).toBeGreaterThan(0);
});
});
describe('moveLayer', () => { describe('moveLayer', () => {
beforeAll(() => editorService.set('root', cloneDeep(root))); beforeAll(() => editorService.set('root', cloneDeep(root)));
@ -430,15 +396,3 @@ describe('undo redo', () => {
expect(redoNode?.id).toBeUndefined(); expect(redoNode?.id).toBeUndefined();
}); });
}); });
describe('use', () => {
beforeAll(() => editorService.set('root', cloneDeep(root)));
test.skip('before', () => {
editorService.usePlugin({
beforeRemove: () => new Error('不能删除'),
});
expect(() => editorService.remove({ id: NodeId.NODE_ID, type: 'text' })).toThrow();
});
});

2
packages/editor/tests/unit/services/props.spec.ts
View File

@ -7,8 +7,6 @@ import props from '@editor/services/props';
test('createId', async () => { test('createId', async () => {
const id = await props.createId('text'); const id = await props.createId('text');
console.log(id);
expect(id.startsWith('text')).toBeTruthy(); expect(id.startsWith('text')).toBeTruthy();
}); });

13
packages/form/tests/unit/Form.spec.ts
View File

@ -16,13 +16,13 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MForm } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MForm } from '../../src';
describe('表单', () => { describe('表单', () => {
test('初始化', (done) => { test('初始化', async () => {
const initValues = {}; const initValues = {};
const config = [ const config = [
{ {
@ -41,9 +41,8 @@ describe('表单', () => {
}, },
}); });
setTimeout(() => { await nextTick();
expect(wrapper.text()).toBe('text');
done(); expect(wrapper.text()).toBe('text');
});
}); });
}); });

19
packages/form/tests/unit/containers/Tabs.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { FormConfig, MForm, MTabs } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { FormConfig, MForm, MTabs } from '../../../src';
const getWrapper = ( const getWrapper = (
config: FormConfig = [ config: FormConfig = [
{ {
@ -53,15 +53,14 @@ const getWrapper = (
}); });
describe('Tabs', () => { describe('Tabs', () => {
test('基础', () => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async (done) => { await nextTick();
const tabs = wrapper.findComponent(MTabs);
expect(tabs.exists()).toBe(true); const tabs = wrapper.findComponent(MTabs);
const value = await (wrapper.vm as any).submitForm(); expect(tabs.exists()).toBe(true);
expect(value.text).toBe('text'); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.text).toBe('text');
}, 0);
}); });
}); });

19
packages/form/tests/unit/fields/Checkbox.spec.ts
View File

@ -17,11 +17,11 @@
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MCheckbox, MForm } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MCheckbox, MForm } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -43,16 +43,15 @@ const getWrapper = (
}); });
describe('Checkbox', () => { describe('Checkbox', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const checkbox = wrapper.findComponent(MCheckbox);
expect(checkbox.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const checkbox = wrapper.findComponent(MCheckbox);
expect(value.checkbox).toBe(false); expect(checkbox.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.checkbox).toBe(false);
}); });
}); });

30
packages/form/tests/unit/fields/CheckboxGroup.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MCheckboxGroup, MForm } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MCheckboxGroup, MForm } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -52,20 +52,19 @@ const getWrapper = (
}); });
describe('CheckboxGroup', () => { describe('CheckboxGroup', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const checkboxGroup = wrapper.findComponent(MCheckboxGroup);
expect(checkboxGroup.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const checkboxGroup = wrapper.findComponent(MCheckboxGroup);
expect(value.checkboxGroup).toEqual([]); expect(checkboxGroup.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.checkboxGroup).toEqual([]);
}); });
test('默认选中', (done) => { test('默认选中', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -89,10 +88,9 @@ describe('CheckboxGroup', () => {
}, },
); );
setTimeout(async () => { await nextTick();
const value = await (wrapper.vm as any).submitForm();
expect(value.checkboxGroup).toEqual([1]); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.checkboxGroup).toEqual([1]);
}, 0);
}); });
}); });

42
packages/form/tests/unit/fields/ColorPicker.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MColorPicker, MForm } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus, { ElColorPicker } from 'element-plus'; import ElementPlus, { ElColorPicker } from 'element-plus';
import MagicForm, { MColorPicker, MForm } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -42,20 +42,19 @@ const getWrapper = (
}); });
describe('ColorPicker', () => { describe('ColorPicker', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const picker = wrapper.findComponent(MColorPicker);
expect(picker.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const picker = wrapper.findComponent(MColorPicker);
expect(value.picker).toMatch(''); expect(picker.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.picker).toMatch('');
}); });
test('选择颜色', (done) => { test('选择颜色', async () => {
const wrapper = getWrapper([ const wrapper = getWrapper([
{ {
type: 'color-picker', type: 'color-picker',
@ -65,18 +64,17 @@ describe('ColorPicker', () => {
}, },
]); ]);
setTimeout(async () => { await nextTick();
const value = await (wrapper.vm as any).submitForm();
expect(value.picker).toMatch('rgba(255, 255, 255, 1)');
const picker = wrapper.findComponent(ElColorPicker); const value = await (wrapper.vm as any).submitForm();
expect(picker.exists()).toBe(true); expect(value.picker).toMatch('rgba(255, 255, 255, 1)');
await picker.setValue('rgba(0, 255, 255, 1)');
picker.vm.$emit('change', 'rgba(0, 255, 255, 1)');
const value2 = await (wrapper.vm as any).submitForm(); const picker = wrapper.findComponent(ElColorPicker);
expect(value2.picker).toMatch('rgba(0, 255, 255, 1)'); expect(picker.exists()).toBe(true);
done(); await picker.setValue('rgba(0, 255, 255, 1)');
}, 0); picker.vm.$emit('change', 'rgba(0, 255, 255, 1)');
const value2 = await (wrapper.vm as any).submitForm();
expect(value2.picker).toMatch('rgba(0, 255, 255, 1)');
}); });
}); });

57
packages/form/tests/unit/fields/Date.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MDate, MForm } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus, { ElInput } from 'element-plus'; import ElementPlus, { ElInput } from 'element-plus';
import MagicForm, { MDate, MForm } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -44,48 +44,45 @@ const getWrapper = (
}); });
describe('Date', () => { describe('Date', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const date = wrapper.findComponent(MDate);
expect(date.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const date = wrapper.findComponent(MDate);
expect(value.date).toMatch('2021-01-01 00:00:00'); expect(date.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.date).toMatch('2021-01-01 00:00:00');
}); });
test('输入', (done) => { test('输入', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const input = wrapper.find('input');
await input.setValue('2021/07/28'); const input = wrapper.find('input');
await input.trigger('blur');
const value = await (wrapper.vm as any).submitForm(); await input.setValue('2021/07/28');
expect(input.element.value).toMatch('2021-07-28'); await input.trigger('blur');
expect(value.date).toMatch('2021-07-28');
done(); const value = await (wrapper.vm as any).submitForm();
}, 0); expect(input.element.value).toMatch('2021-07-28');
expect(value.date).toMatch('2021-07-28');
}); });
test('清空', (done) => { test('清空', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const elInput = wrapper.findComponent(ElInput);
await elInput.trigger('mouseenter');
const clear = wrapper.find('.clear-icon'); const elInput = wrapper.findComponent(ElInput);
await elInput.trigger('mouseenter');
expect(clear.exists()).toBe(true); const clear = wrapper.find('.clear-icon');
await clear.trigger('click');
expect((wrapper.vm as any).values.date).toBeNull(); expect(clear.exists()).toBe(true);
done(); await clear.trigger('click');
}, 0); expect((wrapper.vm as any).values.date).toBeNull();
}); });
}); });

83
packages/form/tests/unit/fields/DateTime.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MDateTime, MForm } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus, { ElInput } from 'element-plus'; import ElementPlus, { ElInput } from 'element-plus';
import MagicForm, { MDateTime, MForm } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -44,20 +44,19 @@ const getWrapper = (
}); });
describe('DateTime', () => { describe('DateTime', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const datetime = wrapper.findComponent(MDateTime);
expect(datetime.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const datetime = wrapper.findComponent(MDateTime);
expect(value.datetime).toMatch('2021-01-01 12:00:00'); expect(datetime.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.datetime).toMatch('2021-01-01 12:00:00');
}); });
test('错误类型初始化初始化', (done) => { test('错误类型初始化初始化', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -69,17 +68,16 @@ describe('DateTime', () => {
{ datetime: 123 }, { datetime: 123 },
); );
setTimeout(async () => { await nextTick();
const datetime = wrapper.findComponent(MDateTime);
expect(datetime.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const datetime = wrapper.findComponent(MDateTime);
expect(value.datetime).toMatch(''); expect(datetime.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.datetime).toMatch('');
}); });
test('无效值初始化', (done) => { test('无效值初始化', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -91,41 +89,38 @@ describe('DateTime', () => {
{ datetime: 'Invalid Date' }, { datetime: 'Invalid Date' },
); );
setTimeout(async () => { await nextTick();
const datetime = wrapper.findComponent(MDateTime);
expect(datetime.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const datetime = wrapper.findComponent(MDateTime);
expect(value.datetime).toMatch(''); expect(datetime.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.datetime).toMatch('');
}); });
test('输入日期', (done) => { test('输入日期', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const input = wrapper.find('input');
await input.setValue('2021/07/28 00:00:00');
const value = await (wrapper.vm as any).submitForm(); const input = wrapper.find('input');
expect(value.datetime).toMatch('2021-07-28 00:00:00'); await input.setValue('2021/07/28 00:00:00');
done();
}); const value = await (wrapper.vm as any).submitForm();
expect(value.datetime).toMatch('2021-07-28 00:00:00');
}); });
test('清空', (done) => { test('清空', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const elInput = wrapper.findComponent(ElInput);
await elInput.trigger('mouseenter');
const clear = wrapper.find('.clear-icon'); const elInput = wrapper.findComponent(ElInput);
await elInput.trigger('mouseenter');
expect(clear.exists()).toBe(true); const clear = wrapper.find('.clear-icon');
await clear.trigger('click');
expect((wrapper.vm as any).values.datetime).toBeNull(); expect(clear.exists()).toBe(true);
done(); await clear.trigger('click');
}, 0); expect((wrapper.vm as any).values.datetime).toBeNull();
}); });
}); });

31
packages/form/tests/unit/fields/Daterange.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MDaterange, MForm } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MDaterange, MForm } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -42,30 +42,27 @@ const getWrapper = (
}); });
describe('Daterange', () => { describe('Daterange', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const daterange = wrapper.findComponent(MDaterange);
expect(daterange.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const daterange = wrapper.findComponent(MDaterange);
expect(value.start).toMatch(''); expect(daterange.exists()).toBe(true);
expect(value.end).toMatch('');
done(); const value = await (wrapper.vm as any).submitForm();
}); expect(value.start).toMatch('');
expect(value.end).toMatch('');
}); });
test('基础初始化', (done) => { test('基础初始化', async () => {
const wrapper = getWrapper([{ type: 'daterange', text: 'daterange' }], { const wrapper = getWrapper([{ type: 'daterange', text: 'daterange' }], {
daterange: [new Date('2021-7-30 00:00:00'), new Date('2021-7-30 12:00:00')], daterange: [new Date('2021-7-30 00:00:00'), new Date('2021-7-30 12:00:00')],
}); });
setTimeout(async () => { await nextTick();
const daterange = wrapper.findComponent(MDaterange);
expect(daterange.exists()).toBe(true);
done(); const daterange = wrapper.findComponent(MDaterange);
}, 0); expect(daterange.exists()).toBe(true);
}); });
}); });

34
packages/form/tests/unit/fields/Display.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MDisplay, MForm } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MDisplay, MForm } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -44,20 +44,19 @@ const getWrapper = (
}); });
describe('Display', () => { describe('Display', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const display = wrapper.findComponent(MDisplay);
expect(display.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const display = wrapper.findComponent(MDisplay);
expect(value.display).toMatch('hello'); expect(display.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.display).toMatch('hello');
}); });
test('初始化', (done) => { test('初始化', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -72,13 +71,12 @@ describe('Display', () => {
}, },
); );
setTimeout(async () => { await nextTick();
const display = wrapper.findComponent(MDisplay);
expect(display.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const display = wrapper.findComponent(MDisplay);
expect(value.display).toMatch('test'); expect(display.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.display).toMatch('test');
}); });
}); });

34
packages/form/tests/unit/fields/Hidden.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MForm, MHidden } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MForm, MHidden } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -44,20 +44,19 @@ const getWrapper = (
}); });
describe('Hidden', () => { describe('Hidden', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const hidden = wrapper.findComponent(MHidden);
expect(hidden.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const hidden = wrapper.findComponent(MHidden);
expect(value.hidden).toMatch('hidden'); expect(hidden.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.hidden).toMatch('hidden');
}); });
test('未设置name', (done) => { test('未设置name', async () => {
const wrapper = getWrapper([ const wrapper = getWrapper([
{ {
type: 'hidden', type: 'hidden',
@ -66,13 +65,12 @@ describe('Hidden', () => {
}, },
]); ]);
setTimeout(async () => { await nextTick();
const hidden = wrapper.findComponent(MHidden);
expect(hidden.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const hidden = wrapper.findComponent(MHidden);
expect(value.hidden).toBeUndefined(); expect(hidden.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.hidden).toBeUndefined();
}); });
}); });

103
packages/form/tests/unit/fields/Link.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { FormState, MForm, MFormDialog, MLink } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus, { ElButton } from 'element-plus'; import ElementPlus, { ElButton } from 'element-plus';
import MagicForm, { FormState, MForm, MFormDialog, MLink } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -46,24 +46,23 @@ const getWrapper = (
}); });
describe('Link', () => { describe('Link', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(() => { await nextTick();
const link = wrapper.findComponent(MLink);
expect(link.exists()).toBe(true);
// displayText 字段配置
expect(link.text()).toContain('链接');
const a = wrapper.find('a'); const link = wrapper.findComponent(MLink);
expect(a.exists()).toBe(true); expect(link.exists()).toBe(true);
// href 字段配置 // displayText 字段配置
expect(a.element.href).toMatch('www.google.com'); expect(link.text()).toContain('链接');
done();
}, 0); const a = wrapper.find('a');
expect(a.exists()).toBe(true);
// href 字段配置
expect(a.element.href).toMatch('www.google.com');
}); });
test('默认文字', (done) => { test('默认文字', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -78,21 +77,20 @@ describe('Link', () => {
}, },
); );
setTimeout(() => { await nextTick();
const link = wrapper.findComponent(MLink);
expect(link.exists()).toBe(true);
// 默认displayText
expect(link.text()).toContain('跳转');
const a = wrapper.find('a'); const link = wrapper.findComponent(MLink);
expect(a.exists()).toBe(true); expect(link.exists()).toBe(true);
// 渲染出来的 a 元素的 href 属性 // 默认displayText
expect(a.element.href).toMatch('www.baidu.com'); expect(link.text()).toContain('跳转');
done();
}, 0); const a = wrapper.find('a');
expect(a.exists()).toBe(true);
// 渲染出来的 a 元素的 href 属性
expect(a.element.href).toMatch('www.baidu.com');
}); });
test('displayText为函数', (done) => { test('displayText为函数', async () => {
const wrapper = getWrapper([ const wrapper = getWrapper([
{ {
type: 'link', type: 'link',
@ -118,19 +116,18 @@ describe('Link', () => {
}, },
]); ]);
setTimeout(() => { await nextTick();
const link = wrapper.findComponent(MLink);
expect(link.exists()).toBe(true);
expect(link.text()).toContain('谷歌');
const a = wrapper.find('a'); const link = wrapper.findComponent(MLink);
expect(a.exists()).toBe(true); expect(link.exists()).toBe(true);
expect(a.element.href).toMatch('www.google.com'); expect(link.text()).toContain('谷歌');
done();
}, 0); const a = wrapper.find('a');
expect(a.exists()).toBe(true);
expect(a.element.href).toMatch('www.google.com');
}); });
test('不可编辑', (done) => { test('不可编辑', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -146,16 +143,15 @@ describe('Link', () => {
}, },
); );
setTimeout(() => { await nextTick();
const link = wrapper.findComponent(MLink);
expect((link.vm as any).disabled).toBe(true); const link = wrapper.findComponent(MLink);
const span = wrapper.find('span'); expect((link.vm as any).disabled).toBe(true);
expect(span.exists()).toBe(true); const span = wrapper.find('span');
done(); expect(span.exists()).toBe(true);
}, 0);
}); });
test('编辑链接', (done) => { test('编辑链接', async () => {
const wrapper = getWrapper([ const wrapper = getWrapper([
{ {
type: 'link', type: 'link',
@ -166,15 +162,14 @@ describe('Link', () => {
}, },
]); ]);
setTimeout(async () => { await nextTick();
const button = wrapper.findComponent(ElButton);
expect(button.exists()).toBe(true);
await button.trigger('click');
const dialog = wrapper.findComponent(MFormDialog); const button = wrapper.findComponent(ElButton);
expect(dialog.exists()).toBe(true); expect(button.exists()).toBe(true);
dialog.vm.$emit('submit'); await button.trigger('click');
done();
}, 0); const dialog = wrapper.findComponent(MFormDialog);
expect(dialog.exists()).toBe(true);
dialog.vm.$emit('submit');
}); });
}); });

83
packages/form/tests/unit/fields/Number.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MForm, MNumber } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MForm, MNumber } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -44,18 +44,18 @@ const getWrapper = (
}); });
describe('Number', () => { describe('Number', () => {
test('基础功能', (done) => { test('基础功能', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => {
const num = wrapper.findComponent(MNumber); await nextTick();
expect(num.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const num = wrapper.findComponent(MNumber);
expect(value.number).toBe(0); expect(num.exists()).toBe(true);
done(); const value = await (wrapper.vm as any).submitForm();
}, 0); expect(value.number).toBe(0);
}); });
test('默认值', (done) => { test('默认值', async () => {
const wrapper = getWrapper([ const wrapper = getWrapper([
{ {
text: 'number', text: 'number',
@ -65,14 +65,13 @@ describe('Number', () => {
}, },
]); ]);
setTimeout(async () => { await nextTick();
const value = await (wrapper.vm as any).submitForm();
expect(value.number).toBe(5); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.number).toBe(5);
}, 0);
}); });
test('增加减少', (done) => { test('增加减少', async () => {
const wrapper = getWrapper([ const wrapper = getWrapper([
{ {
text: 'number', text: 'number',
@ -82,28 +81,27 @@ describe('Number', () => {
}, },
]); ]);
setTimeout(async () => { await nextTick();
const increase = wrapper.find('.el-input-number__increase');
const decrease = wrapper.find('.el-input-number__decrease');
expect(increase.exists()).toBe(true);
expect(decrease.exists()).toBe(true);
await increase.trigger('keydown', { const increase = wrapper.find('.el-input-number__increase');
key: 'enter', const decrease = wrapper.find('.el-input-number__decrease');
}); expect(increase.exists()).toBe(true);
expect(decrease.exists()).toBe(true);
expect((wrapper.vm as any).values.number).toBe(2); await increase.trigger('keydown', {
key: 'enter',
await decrease.trigger('keydown', {
key: 'enter',
});
expect((wrapper.vm as any).values.number).toBe(0);
done();
}); });
expect((wrapper.vm as any).values.number).toBe(2);
await decrease.trigger('keydown', {
key: 'enter',
});
expect((wrapper.vm as any).values.number).toBe(0);
}); });
test('最大最小值', (done) => { test('最大最小值', async () => {
const wrapper = getWrapper([ const wrapper = getWrapper([
{ {
text: 'number', text: 'number',
@ -114,14 +112,13 @@ describe('Number', () => {
}, },
]); ]);
setTimeout(async () => { await nextTick();
const num = wrapper.findComponent(MNumber);
const input = num.find('input'); const num = wrapper.findComponent(MNumber);
await input.setValue(100); const input = num.find('input');
expect((wrapper.vm as any).values.number).toBe(10); await input.setValue(100);
await input.setValue(-10); expect((wrapper.vm as any).values.number).toBe(10);
expect((wrapper.vm as any).values.number).toBe(0); await input.setValue(-10);
done(); expect((wrapper.vm as any).values.number).toBe(0);
}, 0);
}); });
}); });

30
packages/form/tests/unit/fields/RadioGroup.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MForm, MRadioGroup } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MForm, MRadioGroup } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -52,20 +52,19 @@ const getWrapper = (
}); });
describe('RadioGroup', () => { describe('RadioGroup', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const radioGroup = wrapper.findComponent(MRadioGroup);
expect(radioGroup.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const radioGroup = wrapper.findComponent(MRadioGroup);
expect(value.radioGroup).toMatch(''); expect(radioGroup.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.radioGroup).toMatch('');
}); });
test('默认选中', (done) => { test('默认选中', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -89,10 +88,9 @@ describe('RadioGroup', () => {
}, },
); );
setTimeout(async () => { await nextTick();
const value = await (wrapper.vm as any).submitForm();
expect(value.radioGroup).toEqual(1); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.radioGroup).toEqual(1);
}, 0);
}); });
}); });

55
packages/form/tests/unit/fields/Switch.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MForm, MSwitch } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MForm, MSwitch } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -44,20 +44,19 @@ const getWrapper = (
}); });
describe('Switch', () => { describe('Switch', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const sw = wrapper.findComponent(MSwitch);
expect(sw.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const sw = wrapper.findComponent(MSwitch);
expect(value.switch).toBe(false); expect(sw.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.switch).toBe(false);
}); });
test('数字默认值', (done) => { test('数字默认值', async () => {
const wrapper = getWrapper([ const wrapper = getWrapper([
{ {
type: 'switch', type: 'switch',
@ -67,17 +66,16 @@ describe('Switch', () => {
}, },
]); ]);
setTimeout(async () => { await nextTick();
const sw = wrapper.findComponent(MSwitch);
expect(sw.exists()).toBe(true);
const value = await (wrapper.vm as any).submitForm(); const sw = wrapper.findComponent(MSwitch);
expect(value.switch).toBe(0); expect(sw.exists()).toBe(true);
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.switch).toBe(0);
}); });
test('点击开关', (done) => { test('点击开关', async () => {
const wrapper = getWrapper([ const wrapper = getWrapper([
{ {
type: 'switch', type: 'switch',
@ -88,17 +86,16 @@ describe('Switch', () => {
}, },
]); ]);
setTimeout(async () => { await nextTick();
const value = await (wrapper.vm as any).submitForm();
expect(value.switch).toMatch('inactive');
const input = wrapper.find('input'); const value = await (wrapper.vm as any).submitForm();
expect(input.exists()).toBe(true); expect(value.switch).toMatch('inactive');
await input.trigger('click');
const value2 = await (wrapper.vm as any).submitForm(); const input = wrapper.find('input');
expect(value2.switch).toMatch('active'); expect(input.exists()).toBe(true);
done(); await input.trigger('click');
}, 0);
const value2 = await (wrapper.vm as any).submitForm();
expect(value2.switch).toMatch('active');
}); });
}); });

211
packages/form/tests/unit/fields/Text.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MForm, MText } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus, { ElButton } from 'element-plus'; import ElementPlus, { ElButton } from 'element-plus';
import MagicForm, { MForm, MText } from '../../../src';
/** /**
* 获取mock的Text实例 * 获取mock的Text实例
* @param config 配置 * @param config 配置
@ -50,20 +50,19 @@ const getWrapper = (
}); });
describe('Text', () => { describe('Text', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const text = wrapper.findComponent(MText);
expect(text.exists()).toBe(true); const text = wrapper.findComponent(MText);
const value = await (wrapper.vm as any).submitForm(); expect(text.exists()).toBe(true);
// 默认值 const value = await (wrapper.vm as any).submitForm();
expect(value.text).toBe('text'); // 默认值
done(); expect(value.text).toBe('text');
}, 0);
}); });
test('append string', (done) => { test('append string', async () => {
const wrapper = getWrapper([ const wrapper = getWrapper([
{ {
text: 'text', text: 'text',
@ -73,13 +72,12 @@ describe('Text', () => {
}, },
]); ]);
setTimeout(async () => { await nextTick();
expect(wrapper.text()).toContain('appendText');
done(); expect(wrapper.text()).toContain('appendText');
}, 0);
}); });
test('append button', (done) => { test('append button', async () => {
// 用来标识append按钮是否有点击 // 用来标识append按钮是否有点击
let clickFlag = false; let clickFlag = false;
const wrapper = getWrapper([ const wrapper = getWrapper([
@ -95,17 +93,16 @@ describe('Text', () => {
}, },
]); ]);
setTimeout(async () => { await nextTick();
expect(wrapper.text()).toContain('appendText');
const button = wrapper.findComponent(ElButton); expect(wrapper.text()).toContain('appendText');
expect(clickFlag).toBe(false); const button = wrapper.findComponent(ElButton);
await button.trigger('click'); expect(clickFlag).toBe(false);
expect(clickFlag).toBe(true); await button.trigger('click');
done(); expect(clickFlag).toBe(true);
}, 0);
}); });
test('key ArrowUp', (done) => { test('key ArrowUp', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -120,18 +117,17 @@ describe('Text', () => {
}, },
); );
setTimeout(async () => { await nextTick();
// 点击键盘上键
await wrapper.find('input').trigger('keyup', { // 点击键盘上键
key: 'ArrowUp', await wrapper.find('input').trigger('keyup', {
}); key: 'ArrowUp',
const value = await (wrapper.vm as any).submitForm(); });
expect(value.text).toBe(1); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.text).toBe(1);
}, 0);
}); });
test('key ArrowDown', (done) => { test('key ArrowDown', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -146,18 +142,17 @@ describe('Text', () => {
}, },
); );
setTimeout(async () => { await nextTick();
// 点击键盘下键
await wrapper.find('input').trigger('keyup', { // 点击键盘下键
key: 'ArrowDown', await wrapper.find('input').trigger('keyup', {
}); key: 'ArrowDown',
const value = await (wrapper.vm as any).submitForm(); });
expect(value.text).toBe(-1); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.text).toBe(-1);
}, 0);
}); });
test('key ctrlKey ArrowUp', (done) => { test('key ctrlKey ArrowUp', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -172,19 +167,18 @@ describe('Text', () => {
}, },
); );
setTimeout(async () => { await nextTick();
// 点击键盘ctrl + 上键
await wrapper.find('input').trigger('keyup', { // 点击键盘ctrl + 上键
key: 'ArrowUp', await wrapper.find('input').trigger('keyup', {
ctrlKey: true, key: 'ArrowUp',
}); ctrlKey: true,
const value = await (wrapper.vm as any).submitForm(); });
expect(value.text).toBe(100); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.text).toBe(100);
}, 0);
}); });
test('key ctrlKey ArrowDown', (done) => { test('key ctrlKey ArrowDown', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -199,19 +193,18 @@ describe('Text', () => {
}, },
); );
setTimeout(async () => { await nextTick();
// 点击键盘ctrl + 下键
await wrapper.find('input').trigger('keyup', { // 点击键盘ctrl + 下键
key: 'ArrowDown', await wrapper.find('input').trigger('keyup', {
ctrlKey: true, key: 'ArrowDown',
}); ctrlKey: true,
const value = await (wrapper.vm as any).submitForm(); });
expect(value.text).toBe(-100); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.text).toBe(-100);
}, 0);
}); });
test('key shiftKey ArrowUp', (done) => { test('key shiftKey ArrowUp', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -226,19 +219,18 @@ describe('Text', () => {
}, },
); );
setTimeout(async () => { await nextTick();
// 点击键盘shift + 上键
await wrapper.find('input').trigger('keyup', { // 点击键盘shift + 上键
key: 'ArrowUp', await wrapper.find('input').trigger('keyup', {
shiftKey: true, key: 'ArrowUp',
}); shiftKey: true,
const value = await (wrapper.vm as any).submitForm(); });
expect(value.text).toBe(10); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.text).toBe(10);
}, 0);
}); });
test('key shiftKey ArrowDown', (done) => { test('key shiftKey ArrowDown', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -253,19 +245,18 @@ describe('Text', () => {
}, },
); );
setTimeout(async () => { await nextTick();
// 点击键盘shift + 下键
await wrapper.find('input').trigger('keyup', { // 点击键盘shift + 下键
key: 'ArrowDown', await wrapper.find('input').trigger('keyup', {
shiftKey: true, key: 'ArrowDown',
}); shiftKey: true,
const value = await (wrapper.vm as any).submitForm(); });
expect(value.text).toBe(-10); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.text).toBe(-10);
}, 0);
}); });
test('key altKey ArrowUp', (done) => { test('key altKey ArrowUp', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -280,19 +271,18 @@ describe('Text', () => {
}, },
); );
setTimeout(async () => { await nextTick();
// 点击键盘alt + 上键
await wrapper.find('input').trigger('keyup', { // 点击键盘alt + 上键
key: 'ArrowUp', await wrapper.find('input').trigger('keyup', {
altKey: true, key: 'ArrowUp',
}); altKey: true,
const value = await (wrapper.vm as any).submitForm(); });
expect(value.text).toBe(0.1); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.text).toBe(0.1);
}, 0);
}); });
test('key altKey ArrowDown', (done) => { test('key altKey ArrowDown', async () => {
const wrapper = getWrapper( const wrapper = getWrapper(
[ [
{ {
@ -307,15 +297,14 @@ describe('Text', () => {
}, },
); );
setTimeout(async () => { await nextTick();
// 点击键盘alt + 下键
await wrapper.find('input').trigger('keyup', { // 点击键盘alt + 下键
key: 'ArrowDown', await wrapper.find('input').trigger('keyup', {
altKey: true, key: 'ArrowDown',
}); altKey: true,
const value = await (wrapper.vm as any).submitForm(); });
expect(value.text).toBe(-0.1); const value = await (wrapper.vm as any).submitForm();
done(); expect(value.text).toBe(-0.1);
}, 0);
}); });
}); });

27
packages/form/tests/unit/fields/Textarea.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MForm, MTextarea } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MForm, MTextarea } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -44,22 +44,21 @@ const getWrapper = (
}); });
describe('Textarea', () => { describe('Textarea', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const textarea = wrapper.findComponent(MTextarea);
expect(textarea.exists()).toBe(true);
const input = wrapper.find('textarea'); const textarea = wrapper.findComponent(MTextarea);
await input.setValue('hello'); expect(textarea.exists()).toBe(true);
await textarea.trigger('input'); const input = wrapper.find('textarea');
await textarea.trigger('change'); await input.setValue('hello');
const value = await (wrapper.vm as any).submitForm(); await textarea.trigger('input');
expect(value.textarea).toMatch('hello'); await textarea.trigger('change');
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
expect(value.textarea).toMatch('hello');
}); });
}); });

27
packages/form/tests/unit/fields/Time.spec.ts
View File

@ -16,11 +16,11 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { nextTick } from 'vue';
import MagicForm, { MForm, MTime } from '@form/index';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import MagicForm, { MForm, MTime } from '../../../src';
const getWrapper = ( const getWrapper = (
config: any = [ config: any = [
{ {
@ -44,21 +44,20 @@ const getWrapper = (
}); });
describe('Time', () => { describe('Time', () => {
test('基础', (done) => { test('基础', async () => {
const wrapper = getWrapper(); const wrapper = getWrapper();
setTimeout(async () => { await nextTick();
const time = wrapper.findComponent(MTime);
expect(time.exists()).toBe(true);
const input = wrapper.find('input'); const time = wrapper.findComponent(MTime);
expect(input.exists()).toBe(true); expect(time.exists()).toBe(true);
await input.setValue('12:00:00');
time.vm.$emit('change', new Date('12:00:00')); const input = wrapper.find('input');
const value = await (wrapper.vm as any).submitForm(); expect(input.exists()).toBe(true);
expect(value.time).toMatch('12:00:00'); await input.setValue('12:00:00');
done();
}, 0); const value = await (wrapper.vm as any).submitForm();
console.log(value.time);
expect(value.time).toMatch('12:00:00');
}); });
}); });

25
packages/form/tests/unit/utils/config.spec.ts
View File

@ -16,13 +16,12 @@
* limitations under the License. * limitations under the License.
*/ */
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'; import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
import { getConfig, setConfig } from '@form/utils/config';
describe('config.ts', () => { describe('config.ts', () => {
let mockModule: any;
beforeEach(() => { beforeEach(() => {
// 重置后重新获取模块 // 重置后重新获取模块
mockModule = require('../../../src/utils/config'); setConfig({});
}); });
// 在测试后都重置mock模块 // 在测试后都重置mock模块
@ -31,24 +30,24 @@ describe('config.ts', () => {
}); });
test('设置获取属性', () => { test('设置获取属性', () => {
mockModule.setConfig({ text: 'form', model: { config: { text: 'test' } } }); setConfig({ text: 'form', model: { config: { text: 'test' } } });
expect(mockModule.getConfig('model')).toEqual({ config: { text: 'test' } }); expect(getConfig('model')).toEqual({ config: { text: 'test' } });
}); });
test('获取不存在的属性', () => { test('获取不存在的属性', () => {
expect(mockModule.getConfig('model')).toBeUndefined(); expect(getConfig('model')).toBeUndefined();
mockModule.setConfig({ text: 'form', model: { config: { text: 'test' } } }); setConfig({ text: 'form', model: { config: { text: 'test' } } });
expect(mockModule.getConfig('config')).toBeUndefined(); expect(getConfig('config')).toBeUndefined();
}); });
test('修改已经存在的form', () => { test('修改已经存在的form', () => {
mockModule.setConfig({ text: 'form', model: { config: { text: 'test' } } }); setConfig({ text: 'form', model: { config: { text: 'test' } } });
expect(mockModule.getConfig('text')).toMatch('form'); expect(getConfig('text')).toMatch('form');
mockModule.setConfig({ text: 'new-form', model: { config: { text: 'test' } } }); setConfig({ text: 'new-form', model: { config: { text: 'test' } } });
expect(mockModule.getConfig('text')).toMatch('new-form'); expect(getConfig('text')).toMatch('new-form');
}); });
test('在未设置时获取Config', () => { test('在未设置时获取Config', () => {
expect(mockModule.getConfig('model')).toBeUndefined(); expect(getConfig('model')).toBeUndefined();
}); });
}); });

10
packages/form/tests/unit/utils/form.spec.ts
View File

@ -17,10 +17,8 @@
*/ */
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { FormState } from '@form/index';
import { FormState } from '@tmagic/form'; import { display, filterFunction, getRules, initValue } from '@form/utils/form';
import { display, filterFunction, getRules, initValue } from '../../../src/utils/form';
// form state mock 数据 // form state mock 数据
const mForm: FormState = { const mForm: FormState = {
@ -65,7 +63,9 @@ describe('getRules', () => {
const rules: any = { const rules: any = {
validator: () => 1, validator: () => 1,
}; };
const props = {}; const props = {
config: {},
};
const newRules: any = getRules(mForm, rules, props); const newRules: any = getRules(mForm, rules, props);
expect(newRules[0].validator({} as any, {} as any, {})).toBe(1); expect(newRules[0].validator({} as any, {} as any, {})).toBe(1);
}); });

21
packages/utils/tests/unit/index.spec.ts
View File

@ -16,7 +16,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { describe, expect, test, vi } from 'vitest'; import { describe, expect, test } from 'vitest';
import * as util from '../../src'; import * as util from '../../src';
@ -51,25 +51,6 @@ describe('datetimeFormatter', () => {
}); });
}); });
describe('util', () => {
vi.useFakeTimers();
test.skip('sleep', (done) => {
const callback = vi.fn();
util
.sleep(500)
.then(callback)
.then(() => {
expect(callback).toBeCalled();
done();
});
// 快进500毫秒，callback应该已执行
vi.advanceTimersByTime(500);
});
});
describe('asyncLoadJs', () => { describe('asyncLoadJs', () => {
const url = 'https://m.film.qq.com/magic-ui/production/1/1625056093304/magic/magic-ui.umd.min.js'; const url = 'https://m.film.qq.com/magic-ui/production/1/1625056093304/magic/magic-ui.umd.min.js';

39
pnpm-lock.yaml generated
View File

@ -11,6 +11,7 @@ importers:
'@typescript-eslint/eslint-plugin': ^4.28.0 '@typescript-eslint/eslint-plugin': ^4.28.0
'@typescript-eslint/parser': ^4.28.0 '@typescript-eslint/parser': ^4.28.0
'@vitejs/plugin-vue': ^3.1.0 '@vitejs/plugin-vue': ^3.1.0
'@vitest/coverage-c8': ^0.23.4
c8: ^7.11.3 c8: ^7.11.3
chalk: ^4.1.0 chalk: ^4.1.0
commitizen: ^4.2.4 commitizen: ^4.2.4
@ -45,6 +46,7 @@ importers:
'@typescript-eslint/eslint-plugin': 4.33.0_3ekaj7j3owlolnuhj3ykrb7u7i '@typescript-eslint/eslint-plugin': 4.33.0_3ekaj7j3owlolnuhj3ykrb7u7i
'@typescript-eslint/parser': 4.33.0_hxadhbs2xogijvk7vq4t2azzbu '@typescript-eslint/parser': 4.33.0_hxadhbs2xogijvk7vq4t2azzbu
'@vitejs/plugin-vue': 3.1.0_vite@3.1.3+vue@3.2.37 '@vitejs/plugin-vue': 3.1.0_vite@3.1.3+vue@3.2.37
'@vitest/coverage-c8': 0.23.4_jsdom@19.0.0
c8: 7.11.3 c8: 7.11.3
chalk: 4.1.2 chalk: 4.1.2
commitizen: 4.2.4 commitizen: 4.2.4
@ -1838,6 +1840,24 @@ packages:
vue: 2.7.4 vue: 2.7.4
dev: true dev: true
/@vitest/coverage-c8/0.23.4_jsdom@19.0.0:
resolution: {integrity: sha512-jmD00a5DQH9gu9K+YdvVhcMuv2CzHvU4gCnySS40Ec5hKlXtlCzRfNHl00VnhfuBeaQUmaQYe60BLT413HyDdg==}
dependencies:
c8: 7.12.0
vitest: 0.23.4_jsdom@19.0.0
transitivePeerDependencies:
- '@edge-runtime/vm'
- '@vitest/browser'
- '@vitest/ui'
- happy-dom
- jsdom
- less
- sass
- stylus
- supports-color
- terser
dev: true
/@volar/code-gen/0.39.4: /@volar/code-gen/0.39.4:
resolution: {integrity: sha512-2RoDdktnN5ovhJoL1NgxKwKhfgP2TzcKVWp8+1Lb67sZ+hvWRL5GjHGkvlPkS91cElpwuURUHnbNNDT+uEqXuA==} resolution: {integrity: sha512-2RoDdktnN5ovhJoL1NgxKwKhfgP2TzcKVWp8+1Lb67sZ+hvWRL5GjHGkvlPkS91cElpwuURUHnbNNDT+uEqXuA==}
dependencies: dependencies:
@ -2637,6 +2657,25 @@ packages:
yargs-parser: 20.2.9 yargs-parser: 20.2.9
dev: true dev: true
/c8/7.12.0:
resolution: {integrity: sha512-CtgQrHOkyxr5koX1wEUmN/5cfDa2ckbHRA4Gy5LAL0zaCFtVWJS5++n+w4/sr2GWGerBxgTjpKeDclk/Qk6W/A==}
engines: {node: '>=10.12.0'}
hasBin: true
dependencies:
'@bcoe/v8-coverage': 0.2.3
'@istanbuljs/schema': 0.1.3
find-up: 5.0.0
foreground-child: 2.0.0
istanbul-lib-coverage: 3.2.0
istanbul-lib-report: 3.0.0
istanbul-reports: 3.1.4
rimraf: 3.0.2
test-exclude: 6.0.0
v8-to-istanbul: 9.0.0
yargs: 16.2.0
yargs-parser: 20.2.9
dev: true
/cac/6.7.12: /cac/6.7.12:
resolution: {integrity: sha512-rM7E2ygtMkJqD9c7WnFU6fruFcN3xe4FM5yUmgxhZzIKJk4uHl9U/fhwdajGFQbQuv43FAUo1Fe8gX/oIKDeSA==} resolution: {integrity: sha512-rM7E2ygtMkJqD9c7WnFU6fruFcN3xe4FM5yUmgxhZzIKJk4uHl9U/fhwdajGFQbQuv43FAUo1Fe8gX/oIKDeSA==}
engines: {node: '>=8'} engines: {node: '>=8'}

1
tsconfig.json
View File

@ -20,6 +20,7 @@
// 内部模块都指向 src/index.ts, 会有更好的代码跳转体验. // 内部模块都指向 src/index.ts, 会有更好的代码跳转体验.
"@tmagic/*": ["packages/*/src"], "@tmagic/*": ["packages/*/src"],
"@editor/*": ["packages/editor/src/*"], "@editor/*": ["packages/editor/src/*"],
"@form/*": ["packages/form/src/*"],
}, },
"types": [ "types": [
"node", "node",

4
vitest.config.ts
View File

@ -17,8 +17,8 @@ export default defineConfig({
'magic-admin/**', 'magic-admin/**',
], ],
include: [ include: [
'./packages/editor/tests/unit/utils/**', './packages/editor/tests/**',
'./packages/editor/tests/unit/services/**', './packages/form/tests/**',
'./packages/stage/tests/**', './packages/stage/tests/**',
'./packages/utils/tests/**', './packages/utils/tests/**',
], ],