mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-05-15 13:04:29 +00:00
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
/*
|
|
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
|
*
|
|
* Copyright (C) 2025 Tencent.
|
|
*/
|
|
import { describe, expect, test, vi } from 'vitest';
|
|
import { defineComponent, h } from 'vue';
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
import Background from '@editor/fields/StyleSetter/pro/Background.vue';
|
|
import BorderPro from '@editor/fields/StyleSetter/pro/Border.vue';
|
|
import Font from '@editor/fields/StyleSetter/pro/Font.vue';
|
|
import Layout from '@editor/fields/StyleSetter/pro/Layout.vue';
|
|
import Transform from '@editor/fields/StyleSetter/pro/Transform.vue';
|
|
|
|
vi.mock('@tmagic/form', () => ({
|
|
defineFormItem: (cfg: any) => cfg,
|
|
MContainer: defineComponent({
|
|
name: 'MContainer',
|
|
props: ['config', 'model', 'size', 'disabled'],
|
|
emits: ['change'],
|
|
setup() {
|
|
return () => h('div', { class: 'm-container' });
|
|
},
|
|
}),
|
|
}));
|
|
|
|
vi.mock('@editor/fields/StyleSetter/components/Box.vue', () => ({
|
|
default: defineComponent({
|
|
name: 'StyleBox',
|
|
props: ['model', 'size', 'disabled'],
|
|
emits: ['change'],
|
|
setup() {
|
|
return () => h('div', { class: 'fake-box' });
|
|
},
|
|
}),
|
|
}));
|
|
|
|
vi.mock('@editor/fields/StyleSetter/components/Border.vue', () => ({
|
|
default: defineComponent({
|
|
name: 'StyleBorder',
|
|
props: ['model', 'size', 'disabled'],
|
|
emits: ['change'],
|
|
setup() {
|
|
return () => h('div', { class: 'fake-border' });
|
|
},
|
|
}),
|
|
}));
|
|
|
|
vi.mock('@editor/fields/StyleSetter/components/BackgroundPosition.vue', () => ({
|
|
default: defineComponent({
|
|
name: 'BackgroundPosition',
|
|
setup() {
|
|
return () => h('div');
|
|
},
|
|
}),
|
|
}));
|
|
|
|
describe('StyleSetter pro 组件', () => {
|
|
test.each([
|
|
['Background', Background],
|
|
['BorderPro', BorderPro],
|
|
['Font', Font],
|
|
['Layout', Layout],
|
|
['Transform', Transform],
|
|
])('%s 渲染 MContainer 并透传 change', (_name, comp) => {
|
|
const wrapper = mount(comp as any, { props: { values: { display: 'block' } } });
|
|
const container = wrapper.findComponent({ name: 'MContainer' });
|
|
expect(container.exists()).toBe(true);
|
|
container.vm.$emit('change', { color: 'red' }, { modifyKey: 'color' });
|
|
const events = wrapper.emitted('change');
|
|
expect(events?.[0]?.[0]).toEqual({ color: 'red' });
|
|
});
|
|
|
|
test('Layout 在 fixed/absolute 时隐藏 Box', () => {
|
|
const wrapper = mount(Layout, { props: { values: { position: 'fixed' } as any } });
|
|
const box = wrapper.find('.fake-box');
|
|
expect((box.element as HTMLElement).style.display).toBe('none');
|
|
});
|
|
|
|
test('Layout 非 fixed/absolute 时显示 Box', () => {
|
|
const wrapper = mount(Layout, { props: { values: { position: 'relative' } as any } });
|
|
const box = wrapper.find('.fake-box');
|
|
expect((box.element as HTMLElement).style.display).not.toBe('none');
|
|
});
|
|
|
|
test('BorderPro 渲染 Border 子组件', () => {
|
|
const wrapper = mount(BorderPro, { props: { values: {} } });
|
|
expect(wrapper.find('.fake-border').exists()).toBe(true);
|
|
});
|
|
});
|