github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-27 04:48:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

test: add some unit tests for ComponentMeta

Browse Source
This commit is contained in:
LeoYuan 袁力皓 2022-06-16 11:39:18 +08:00 committed by 林熠
parent 058a84226a
commit c5ffbd59c4
21 changed files with 3376 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -36,6 +36,7 @@ lib-cov
# Coverage directory used by tools like istanbul # Coverage directory used by tools like istanbul
coverage coverage
coverage-all
# nyc test coverage # nyc test coverage
.nyc_output .nyc_output

2
packages/designer/jest.config.js
View File

@ -10,7 +10,7 @@ const jestConfig = {
// // '^.+\\.(js|jsx)$': 'babel-jest', // // '^.+\\.(js|jsx)$': 'babel-jest',
// }, // },
// testMatch: ['**/document/node/node.test.ts'], // testMatch: ['**/document/node/node.test.ts'],
// testMatch: ['**/designer/builtin-hotkey.test.ts'], // testMatch: ['**/component-meta.test.ts'],
// testMatch: ['**/plugin/plugin-manager.test.ts'], // testMatch: ['**/plugin/plugin-manager.test.ts'],
// testMatch: ['(/tests?/.*(test))\\.[jt]s$'], // testMatch: ['(/tests?/.*(test))\\.[jt]s$'],
transformIgnorePatterns: [ transformIgnorePatterns: [

25
packages/designer/src/component-meta.ts
View File

@ -13,7 +13,7 @@ import {
LiveTextEditingConfig, LiveTextEditingConfig,
FieldConfig, FieldConfig,
} from '@alilc/lowcode-types'; } from '@alilc/lowcode-types';
import { deprecate } from '@alilc/lowcode-utils'; import { deprecate, isRegExp } from '@alilc/lowcode-utils';
import { computed, engineConfig } from '@alilc/lowcode-editor-core'; import { computed, engineConfig } from '@alilc/lowcode-editor-core';
import EventEmitter from 'events'; import EventEmitter from 'events';
import { componentDefaults, legacyIssues } from './transducers'; import { componentDefaults, legacyIssues } from './transducers';
@ -31,7 +31,7 @@ import {
IconHidden, IconHidden,
} from './icons'; } from './icons';
function ensureAList(list?: string | string[]): string[] | null { export function ensureAList(list?: string | string[]): string[] | null {
if (!list) { if (!list) {
return null; return null;
} }
@ -47,11 +47,7 @@ function ensureAList(list?: string | string[]): string[] | null {
return list; return list;
} }
function isRegExp(obj: any): obj is RegExp { export function buildFilter(rule?: string | string[] | RegExp | NestingFilter) {
return obj && obj.test && obj.exec && obj.compile;
}
function buildFilter(rule?: string | string[] | RegExp | NestingFilter) {
if (!rule) { if (!rule) {
return null; return null;
} }
@ -145,7 +141,6 @@ export class ComponentMeta {
private _isMinimalRenderUnit?: boolean; private _isMinimalRenderUnit?: boolean;
get title(): string | I18nData | ReactElement { get title(): string | I18nData | ReactElement {
// TODO: 标记下。这块需要康师傅加一下API，页面正常渲染。
// string | i18nData | ReactElement // string | i18nData | ReactElement
// TitleConfig title.label // TitleConfig title.label
if (isTitleConfig(this._title)) { if (isTitleConfig(this._title)) {
@ -220,10 +215,10 @@ export class ComponentMeta {
collectLiveTextEditing(this.configure); collectLiveTextEditing(this.configure);
this._liveTextEditing = liveTextEditing.length > 0 ? liveTextEditing : undefined; this._liveTextEditing = liveTextEditing.length > 0 ? liveTextEditing : undefined;
const isTopFiexd = this._transformedMetadata.configure.advanced?.isTopFixed; const isTopFixed = this._transformedMetadata.configure.advanced?.isTopFixed;
if (isTopFiexd) { if (isTopFixed) {
this._isTopFixed = isTopFiexd; this._isTopFixed = isTopFixed;
} }
const { configure = {} } = this._transformedMetadata; const { configure = {} } = this._transformedMetadata;
@ -403,6 +398,7 @@ const builtinComponentActions: ComponentAction[] = [
content: { content: {
icon: IconRemove, icon: IconRemove,
title: intlNode('remove'), title: intlNode('remove'),
/* istanbul ignore next */
action(node: Node) { action(node: Node) {
node.remove(); node.remove();
}, },
@ -414,10 +410,12 @@ const builtinComponentActions: ComponentAction[] = [
content: { content: {
icon: IconHidden, icon: IconHidden,
title: intlNode('hide'), title: intlNode('hide'),
/* istanbul ignore next */
action(node: Node) { action(node: Node) {
node.setVisible(false); node.setVisible(false);
}, },
}, },
/* istanbul ignore next */
condition: (node: Node) => { condition: (node: Node) => {
return node.componentMeta.isModal; return node.componentMeta.isModal;
}, },
@ -428,6 +426,7 @@ const builtinComponentActions: ComponentAction[] = [
content: { content: {
icon: IconClone, icon: IconClone,
title: intlNode('copy'), title: intlNode('copy'),
/* istanbul ignore next */
action(node: Node) { action(node: Node) {
// node.remove(); // node.remove();
const { document: doc, parent, index } = node; const { document: doc, parent, index } = node;
@ -459,10 +458,12 @@ const builtinComponentActions: ComponentAction[] = [
content: { content: {
icon: IconLock, // 锁定 icon icon: IconLock, // 锁定 icon
title: intlNode('lock'), title: intlNode('lock'),
/* istanbul ignore next */
action(node: Node) { action(node: Node) {
node.lock(); node.lock();
}, },
}, },
/* istanbul ignore next */
condition: (node: Node) => { condition: (node: Node) => {
return engineConfig.get('enableCanvasLock', false) && node.isContainer() && !node.isLocked; return engineConfig.get('enableCanvasLock', false) && node.isContainer() && !node.isLocked;
}, },
@ -473,10 +474,12 @@ const builtinComponentActions: ComponentAction[] = [
content: { content: {
icon: IconUnlock, // 解锁 icon icon: IconUnlock, // 解锁 icon
title: intlNode('unlock'), title: intlNode('unlock'),
/* istanbul ignore next */
action(node: Node) { action(node: Node) {
node.lock(false); node.lock(false);
}, },
}, },
/* istanbul ignore next */
condition: (node: Node) => { condition: (node: Node) => {
return engineConfig.get('enableCanvasLock', false) && node.isContainer() && node.isLocked; return engineConfig.get('enableCanvasLock', false) && node.isContainer() && node.isLocked;
}, },

280
packages/designer/tests/fixtures/component-metadata/abcgroup.ts vendored Normal file
View File

@ -0,0 +1,280 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Abc.Group',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
title: { label: '容器' },
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
props: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
component: {
isContainer: true,
},
supports: {},
advanced: {
isTopFixed: true,
callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); }
},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
},
} as ComponentMetadata;

280
packages/designer/tests/fixtures/component-metadata/abcitem.ts vendored Normal file
View File

@ -0,0 +1,280 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Abc.Item',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
title: { label: '容器' },
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
props: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
component: {
isContainer: true,
},
supports: {},
advanced: {
isTopFixed: true,
callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); }
},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
},
} as ComponentMetadata;

280
packages/designer/tests/fixtures/component-metadata/abcnode.ts vendored Normal file
View File

@ -0,0 +1,280 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Abc.Node',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
title: { label: '容器' },
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
props: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
component: {
isContainer: true,
},
supports: {},
advanced: {
isTopFixed: true,
callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); }
},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
},
} as ComponentMetadata;

280
packages/designer/tests/fixtures/component-metadata/abcoption.ts vendored Normal file
View File

@ -0,0 +1,280 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Abc.Option',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
title: { label: '容器' },
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
props: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
component: {
isContainer: true,
},
supports: {},
advanced: {
isTopFixed: true,
callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); }
},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
},
} as ComponentMetadata;

4
packages/designer/tests/fixtures/component-metadata/div.ts vendored
View File

@ -229,8 +229,7 @@ export default {
}, },
}, },
supports: {}, supports: {},
}, advanced: {
experimental: {
callbacks: { callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); }, onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); } onNodeRemove: (dragment, self) => { console.log(dragment); }
@ -280,4 +279,5 @@ export default {
], ],
autoruns: [], autoruns: [],
}, },
},
} as ComponentMetadata; } as ComponentMetadata;

22
packages/designer/tests/fixtures/component-metadata/div10.ts vendored Normal file
View File

@ -0,0 +1,22 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Div',
title: '容器',
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
component: {
nestingRule: {
parentWhitelist: (parent, my) => {
if (parent.componentName === 'Form' && my.componentName === 'Div') return true;
return false;
},
childWhitelist: (child, my) => {
if (child.componentName === 'Image' && my.componentName === 'Div') return true;
return false;
},
},
},
},
} as ComponentMetadata;

280
packages/designer/tests/fixtures/component-metadata/div2.ts vendored Normal file
View File

@ -0,0 +1,280 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Div',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
title: { label: '容器' },
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
props: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
component: {
isContainer: true,
},
supports: {},
advanced: {
isTopFixed: true,
callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); }
},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
},
} as ComponentMetadata;

282
packages/designer/tests/fixtures/component-metadata/div3.ts vendored Normal file
View File

@ -0,0 +1,282 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Div',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
props: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
component: {
isContainer: true,
nestingRule: {
// parentWhitelist: 'Div',
// childWhitelist: 'Div',
}
},
supports: {},
advanced: {
callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); }
},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
},
} as ComponentMetadata;

272
packages/designer/tests/fixtures/component-metadata/div4.ts vendored Normal file
View File

@ -0,0 +1,272 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Div',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
experimental: {
callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); }
},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
} as ComponentMetadata;

283
packages/designer/tests/fixtures/component-metadata/div5.ts vendored Normal file
View File

@ -0,0 +1,283 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Div',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
props: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
component: {
isContainer: true,
nestingRule: {
// parentWhitelist: 'Div',
// childWhitelist: 'Div',
},
disableBehaviors: '*',
},
supports: {},
advanced: {
callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); }
},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
},
} as ComponentMetadata;

283
packages/designer/tests/fixtures/component-metadata/div6.ts vendored Normal file
View File

@ -0,0 +1,283 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Div',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
props: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
component: {
isContainer: true,
nestingRule: {
// parentWhitelist: 'Div',
// childWhitelist: 'Div',
},
disableBehaviors: '*',
},
supports: {},
},
experimental: {
callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); }
},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
} as ComponentMetadata;

276
packages/designer/tests/fixtures/component-metadata/div7.ts vendored Normal file
View File

@ -0,0 +1,276 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Div',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
title: '容器',
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
props: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
supports: {},
advanced: {
callbacks: {
onNodeAdd: (dragment, self) => { console.log(dragment); },
onNodeRemove: (dragment, self) => { console.log(dragment); }
},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
},
} as ComponentMetadata;

12
packages/designer/tests/fixtures/component-metadata/div8.ts vendored Normal file
View File

@ -0,0 +1,12 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Div',
npm: {
package: '@ali/vc-div',
componentName: 'Div',
},
title: '容器',
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
} as ComponentMetadata;

8
packages/designer/tests/fixtures/component-metadata/div9.ts vendored Normal file
View File

@ -0,0 +1,8 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Div',
title: '容器',
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
} as ComponentMetadata;

279
packages/designer/tests/fixtures/component-metadata/page2.ts vendored Normal file
View File

@ -0,0 +1,279 @@
import { ComponentMetadata } from "@alilc/lowcode-types";
export default {
componentName: 'Page',
npm: {
package: '@ali/vc-page',
},
title: '容器',
docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
devMode: 'proCode',
tags: ['布局'],
configure: {
props: [
{
type: 'field',
name: 'behavior',
title: '默认状态',
extraProps: {
display: 'inline',
defaultValue: 'NORMAL',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
options: [
{
title: '普通',
value: 'NORMAL',
},
{
title: '隐藏',
value: 'HIDDEN',
},
],
loose: false,
cancelable: false,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: '__style__',
title: {
label: '样式设置',
tip: '点击 ? 查看样式设置器用法指南',
docUrl: 'https://lark.alipay.com/legao/help/design-tool-style',
},
extraProps: {
display: 'accordion',
defaultValue: {},
},
setter: {
key: null,
ref: null,
props: {
advanced: true,
},
_owner: null,
},
},
{
type: 'group',
name: 'groupkgzzeo41',
title: '高级',
extraProps: {
display: 'accordion',
},
items: [
{
type: 'field',
name: 'fieldId',
title: {
label: '唯一标识',
},
extraProps: {
display: 'block',
},
setter: {
key: null,
ref: null,
props: {
placeholder: '请输入唯一标识',
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
},
{
type: 'field',
name: 'useFieldIdAsDomId',
title: {
label: '将唯一标识用作 DOM ID',
},
extraProps: {
display: 'block',
defaultValue: false,
},
setter: {
key: null,
ref: null,
props: {},
_owner: null,
},
},
{
type: 'field',
name: 'customClassName',
title: '自定义样式类',
extraProps: {
display: 'block',
defaultValue: '',
},
setter: {
componentName: 'MixedSetter',
props: {
setters: [
{
key: null,
ref: null,
props: {
placeholder: null,
multiline: false,
rows: 10,
required: false,
pattern: null,
maxLength: null,
},
_owner: null,
},
'VariableSetter',
],
},
},
},
{
type: 'field',
name: 'events',
title: {
label: '动作设置',
tip: '点击 ? 查看如何设置组件的事件响应动作',
docUrl: 'https://lark.alipay.com/legao/legao/events-call',
},
extraProps: {
display: 'accordion',
defaultValue: {
ignored: true,
},
},
setter: {
key: null,
ref: null,
props: {
events: [
{
name: 'onClick',
title: '当点击时',
initialValue:
"/**\n * 容器 当点击时\n */\nfunction onClick(event) {\n console.log('onClick', event);\n}",
},
{
name: 'onMouseEnter',
title: '当鼠标进入时',
initialValue:
"/**\n * 容器 当鼠标进入时\n */\nfunction onMouseEnter(event) {\n console.log('onMouseEnter', event);\n}",
},
{
name: 'onMouseLeave',
title: '当鼠标离开时',
initialValue:
"/**\n * 容器 当鼠标离开时\n */\nfunction onMouseLeave(event) {\n console.log('onMouseLeave', event);\n}",
},
],
},
_owner: null,
},
},
{
type: 'field',
name: 'onClick',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseEnter',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
{
type: 'field',
name: 'onMouseLeave',
extraProps: {
defaultValue: {
ignored: true,
},
},
setter: 'I18nSetter',
},
],
},
],
component: {
isContainer: true,
nestingRule: {
// parentWhitelist: 'Div',
// childWhitelist: 'Div',
},
},
supports: {},
},
experimental: {
callbacks: {},
initials: [
{
name: 'behavior',
},
{
name: '__style__',
},
{
name: 'fieldId',
},
{
name: 'useFieldIdAsDomId',
},
{
name: 'customClassName',
},
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
filters: [
{
name: 'events',
},
{
name: 'onClick',
},
{
name: 'onMouseEnter',
},
{
name: 'onMouseLeave',
},
],
autoruns: [],
},
} as ComponentMetadata;

188
packages/designer/tests/main/meta/component-meta.test.ts
View File

@ -2,7 +2,32 @@ import '../../fixtures/window';
import { Node } from '../../../src/document/node/node'; import { Node } from '../../../src/document/node/node';
import { Designer } from '../../../src/designer/designer'; import { Designer } from '../../../src/designer/designer';
import divMeta from '../../fixtures/component-metadata/div'; import divMeta from '../../fixtures/component-metadata/div';
import { ComponentMeta, isComponentMeta, removeBuiltinComponentAction, addBuiltinComponentAction } from '../../../src/component-meta'; import div2Meta from '../../fixtures/component-metadata/div2';
import div3Meta from '../../fixtures/component-metadata/div3';
import div4Meta from '../../fixtures/component-metadata/div4';
import div5Meta from '../../fixtures/component-metadata/div5';
import div6Meta from '../../fixtures/component-metadata/div6';
import div7Meta from '../../fixtures/component-metadata/div7';
import div8Meta from '../../fixtures/component-metadata/div8';
import div9Meta from '../../fixtures/component-metadata/div9';
import div10Meta from '../../fixtures/component-metadata/div10';
import abcgroup from '../../fixtures/component-metadata/abcgroup';
import abcitem from '../../fixtures/component-metadata/abcitem';
import abcnode from '../../fixtures/component-metadata/abcnode';
import abcoption from '../../fixtures/component-metadata/abcoption';
import page2Meta from '../../fixtures/component-metadata/page2';
import {
ComponentMeta,
isComponentMeta,
removeBuiltinComponentAction,
addBuiltinComponentAction,
modifyBuiltinComponentAction,
ensureAList,
buildFilter,
registerMetadataTransducer,
getRegisteredMetadataTransducers,
} from '../../../src/component-meta';
import { componentDefaults } from '../../../src/transducers';
const mockCreateSettingEntry = jest.fn(); const mockCreateSettingEntry = jest.fn();
jest.mock('../../../src/designer/designer', () => { jest.mock('../../../src/designer/designer', () => {
@ -34,11 +59,64 @@ describe('组件元数据处理', () => {
expect(typeof meta.icon).toBe('function'); expect(typeof meta.icon).toBe('function');
expect(meta.getMetadata().title).toBe('容器'); expect(meta.getMetadata().title).toBe('容器');
expect(meta.title).toEqual({ type: 'i18n', 'en-US': 'Div', 'zh-CN': '容器' }); expect(meta.title).toEqual({ type: 'i18n', 'en-US': 'Div', 'zh-CN': '容器' });
expect(meta.isMinimalRenderUnit).toBeFalsy();
expect(meta.isTopFixed).toBeFalsy();
meta.setNpm({ package: '@ali/vc-div', componentName: 'Div' }); meta.setNpm({ package: '@ali/vc-div', componentName: 'Div' });
expect(meta.npm).toEqual({ package: '@ali/vc-div', componentName: 'Div' }); expect(meta.npm).toEqual({ package: '@ali/vc-div', componentName: 'Div' });
meta.npm = { package: '@ali/vc-div', componentName: 'Div' };
expect(meta.npm).toEqual({ package: '@ali/vc-div', componentName: 'Div' });
const mockFn = jest.fn();
const offFn = meta.onMetadataChange(mockFn);
meta.setMetadata(divMeta); meta.setMetadata(divMeta);
expect(mockFn).toHaveBeenCalledTimes(1);
offFn();
meta.setMetadata(divMeta);
// 不会再触发函数
expect(mockFn).toHaveBeenCalledTimes(1);
});
it('构造函数 - 兼容场景（title 是个普通对象）', () => {
const meta = new ComponentMeta(designer, div2Meta);
expect(meta.title).toEqual('容器');
expect(meta.isTopFixed).toBeTruthy();
});
it('构造函数 - 兼容场景（title fallback 到 componentName）', () => {
const meta = new ComponentMeta(designer, div3Meta);
expect(meta.title).toEqual('Div');
});
it('构造函数 - 兼容场景（configure 是个数组）', () => {
const meta = new ComponentMeta(designer, div4Meta);
expect(meta.configure).toEqual(div4Meta.configure);
});
it('构造函数 - 兼容场景（使用 experimental）', () => {
const meta = new ComponentMeta(designer, div6Meta);
expect(meta.getMetadata().configure.advanced.initials).toHaveLength(9);
});
it('构造函数 - 兼容场景（没有 configure.component）', () => {
const meta = new ComponentMeta(designer, div7Meta);
expect(meta.isContainer).toBeFalsy();
expect(meta.isModal).toBeFalsy();
});
it('构造函数 - 兼容场景（没有 configure）', () => {
const meta = new ComponentMeta(designer, div8Meta);
expect(meta.configure).toEqual([]);
});
it('构造函数 - 兼容场景（没有 npm）', () => {
const meta = new ComponentMeta(designer, div9Meta);
expect(meta.npm).toBeUndefined();
meta.setNpm({ package: '@ali/vc-div', componentName: 'Div' });
expect(meta.npm).toEqual({ package: '@ali/vc-div', componentName: 'Div' });
}); });
it('availableActions', () => { it('availableActions', () => {
@ -64,16 +142,116 @@ describe('组件元数据处理', () => {
expect(meta.availableActions[1].name).toBe('copy'); expect(meta.availableActions[1].name).toBe('copy');
expect(meta.availableActions[4].name).toBe('new'); expect(meta.availableActions[4].name).toBe('new');
}); });
it('availableActions - disableBehaviors: *', () => {
const meta = new ComponentMeta(designer, div5Meta);
expect(meta.availableActions).toHaveLength(0);
});
it('availableActions - rootCompoment', () => {
const meta = new ComponentMeta(designer, page2Meta);
// (hide + new) left
expect(meta.availableActions).toHaveLength(2);
});
describe('checkNesting', () => {
const mockNode = (componentName) => {
return {
internalToShellNode() {
return {
componentName,
};
},
isNode: true,
};
};
const mockNodeForm = mockNode('Form');
const mockNodeImage = mockNode('Image');
const mockNodeDiv = mockNode('Div');
it('checkNestingUp', () => {
const meta1 = new ComponentMeta(designer, divMeta);
// 没有配置 parentWhitelist，判断默认为 true
expect(meta1.checkNestingUp(mockNodeDiv, mockNodeDiv)).toBeTruthy();
const meta2 = new ComponentMeta(designer, div10Meta);
expect(meta2.checkNestingUp(mockNodeDiv, mockNodeForm)).toBeTruthy();
expect(meta2.checkNestingUp(mockNodeDiv, mockNodeDiv)).toBeFalsy();
});
it('checkNestingDown', () => {
const meta1 = new ComponentMeta(designer, divMeta);
// 没有配置 childWhitelist，判断默认为 true
expect(meta1.checkNestingDown(mockNodeDiv, mockNodeDiv)).toBeTruthy();
const meta2 = new ComponentMeta(designer, div10Meta);
expect(meta2.checkNestingDown(mockNodeDiv, mockNodeForm)).toBeFalsy();
expect(meta2.checkNestingDown(mockNodeDiv, mockNodeImage)).toBeTruthy();
});
});
}); });
describe('组件元数据 transducers', () => { describe('组件元数据 transducers', () => {
it('legacyIssues', () => { it('legacyIssues', () => {
const legacyMeta: any = { const legacyMeta: any = {
...divMeta, ...divMeta,
devMode: 'procode' devMode: 'procode',
} };
const meta = new ComponentMeta(designer, legacyMeta); const meta = new ComponentMeta(designer, legacyMeta);
const metadata = meta.getMetadata(); const metadata = meta.getMetadata();
expect(metadata.devMode).toBe('proCode'); expect(metadata.devMode).toBe('proCode');
}) });
}) });
describe('帮助函数', () => {
it('ensureAList', () => {
expect(ensureAList()).toBeNull();
expect(ensureAList(1)).toBeNull();
expect(ensureAList([])).toBeNull();
expect(ensureAList('copy lock')).toEqual(['copy', 'lock']);
expect(ensureAList(['copy', 'lock'])).toEqual(['copy', 'lock']);
});
it('buildFilter', () => {
const mockFn = () => {};
expect(buildFilter()).toBeNull();
expect(buildFilter([])).toBeNull();
expect(buildFilter(mockFn)).toBe(mockFn);
const mockRE = /xxx/;
const filter = buildFilter(mockRE);
expect(filter({ componentName: 'xxx' })).toBeTruthy();
expect(filter({ componentName: 'yyy' })).toBeFalsy();
expect(buildFilter('xxx yyy')({ componentName: 'xxx' })).toBeTruthy();
expect(buildFilter('xxx yyy')({ componentName: 'zzz' })).toBeFalsy();
});
it('registerMetadataTransducer', () => {
expect(getRegisteredMetadataTransducers()).toHaveLength(2);
// 插入到 legacy-issues 和 component-defaults 的中间
registerMetadataTransducer((metadata) => metadata, 3, 'noop');
expect(getRegisteredMetadataTransducers()).toHaveLength(3);
registerMetadataTransducer((metadata) => metadata);
expect(getRegisteredMetadataTransducers()).toHaveLength(4);
});
it('modifyBuiltinComponentAction', () => {
modifyBuiltinComponentAction('copy', (action) => {
expect(action.name).toBe('copy');
});
});
});
describe('transducers', () => {
it('componentDefaults', () => {
const meta1 = new ComponentMeta(designer, abcgroup);
const meta2 = new ComponentMeta(designer, abcitem);
const meta3 = new ComponentMeta(designer, abcnode);
const meta4 = new ComponentMeta(designer, abcoption);
expect(meta1.getMetadata().configure.component.nestingRule.childWhitelist).toEqual(['Abc']);
expect(meta2.getMetadata().configure.component.nestingRule.parentWhitelist).toEqual(['Abc']);
expect(meta3.getMetadata().configure.component.nestingRule.parentWhitelist).toEqual(['Abc', 'Abc.Node']);
expect(meta4.getMetadata().configure.component.nestingRule.parentWhitelist).toEqual(['Abc']);
});
});

6
packages/designer/tests/utils-ut/misc.test.ts
View File

@ -1,5 +1,5 @@
// @ts-nocheck // @ts-nocheck
import { isElementNode, isDOMNodeVisible } from '../../src/utils/misc'; import { isElementNode, isDOMNodeVisible, normalizeTriggers } from '../../src/utils/misc';
it('isElementNode', () => { it('isElementNode', () => {
expect(isElementNode(document.createElement('div'))).toBeTruthy(); expect(isElementNode(document.createElement('div'))).toBeTruthy();
@ -148,3 +148,7 @@ describe('isDOMNodeVisible', () => {
).toBeFalsy(); ).toBeFalsy();
}); });
}); });
it('normalizeTriggers', () => {
expect(normalizeTriggers(['n', 'w'])).toEqual(['N', 'W']);
});

4
packages/utils/src/misc.ts
View File

@ -105,3 +105,7 @@ export function deprecate(fail: any, message: string, alterative?: string) {
console.warn(`Deprecation: ${message}` + (alterative ? `, use ${alterative} instead.` : '')); console.warn(`Deprecation: ${message}` + (alterative ? `, use ${alterative} instead.` : ''));
} }
} }
export function isRegExp(obj: any): obj is RegExp {
return obj && obj.test && obj.exec && obj.compile;
}