mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-04-21 03:48:03 +00:00
0c2f2fd2b5
将 services/editor.ts 从 1335 行精简到 1075 行，提取以下内容： - 新增 utils/editor-history.ts：历史操作处理函数（add/remove/update） - utils/editor.ts 新增：resolveSelectedNode、toggleFixedPosition、 calcMoveStyle、calcAlignCenterStyle、calcLayerTargetIndex、 editorNodeMergeCustomizer、collectRelatedNodes、classifyDragSources - type.ts 新增：EditorEvents、canUsePluginMethods、AsyncMethodName - 补充完整的单元测试覆盖所有新增工具函数 Made-with: Cursor
760 lines
25 KiB
TypeScript
760 lines
25 KiB
TypeScript
/*
|
||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||
*
|
||
* Copyright (C) 2025 Tencent. 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 } from 'vitest';
|
||
|
||
import type { MApp, MContainer, MNode } from '@tmagic/core';
|
||
import { NodeType } from '@tmagic/core';
|
||
|
||
import type { EditorNodeInfo } from '@editor/type';
|
||
import { LayerOffset, Layout } from '@editor/type';
|
||
import * as editor from '@editor/utils/editor';
|
||
|
||
describe('util form', () => {
|
||
test('getPageList', () => {
|
||
const pageList = editor.getPageList({
|
||
id: 'app_1',
|
||
type: NodeType.ROOT,
|
||
items: [
|
||
{
|
||
id: 'page_1',
|
||
name: 'index',
|
||
type: NodeType.PAGE,
|
||
items: [],
|
||
},
|
||
],
|
||
});
|
||
|
||
expect(pageList[0].name).toBe('index');
|
||
});
|
||
|
||
test('getPageNameList', () => {
|
||
const pageList = editor.getPageNameList([
|
||
{
|
||
id: 'page_1',
|
||
name: 'index',
|
||
type: NodeType.PAGE,
|
||
items: [],
|
||
},
|
||
]);
|
||
|
||
expect(pageList[0]).toBe('index');
|
||
});
|
||
|
||
test('generatePageName', () => {
|
||
// 已有一个页面了，再生成出来的name格式为page_${index}
|
||
const name = editor.generatePageName(['index', 'page_2'], NodeType.PAGE);
|
||
// 第二个页面
|
||
expect(name).toBe('page_3');
|
||
});
|
||
});
|
||
|
||
describe('getNodeIndex', () => {
|
||
test('能获取到', () => {
|
||
const index = editor.getNodeIndex(1, {
|
||
id: 2,
|
||
type: NodeType.PAGE,
|
||
items: [
|
||
{
|
||
type: 'text',
|
||
id: 1,
|
||
},
|
||
],
|
||
});
|
||
expect(index).toBe(0);
|
||
});
|
||
|
||
test('不能能获取到', () => {
|
||
// id为1不在查找数据中
|
||
const index = editor.getNodeIndex(1, {
|
||
id: 2,
|
||
type: NodeType.PAGE,
|
||
items: [
|
||
{
|
||
type: 'text',
|
||
id: 3,
|
||
},
|
||
],
|
||
});
|
||
expect(index).toBe(-1);
|
||
});
|
||
});
|
||
|
||
describe('getRelativeStyle', () => {
|
||
test('正常', () => {
|
||
const style = editor.getRelativeStyle({
|
||
color: 'red',
|
||
});
|
||
expect(style?.position).toBe('relative');
|
||
expect(style?.top).toBe(0);
|
||
expect(style?.left).toBe(0);
|
||
expect(style?.color).toBe('red');
|
||
});
|
||
});
|
||
|
||
describe('moveItemsInContainer', () => {
|
||
test('向下移动', () => {
|
||
const container = { id: 1, type: NodeType.CONTAINER, items: [{ id: 2 }, { id: 3 }, { id: 4 }] };
|
||
editor.moveItemsInContainer([0], container, 0);
|
||
expect(container.items[0].id).toBe(2);
|
||
editor.moveItemsInContainer([0], container, 1);
|
||
expect(container.items[0].id).toBe(2);
|
||
editor.moveItemsInContainer([0], container, 2);
|
||
expect(container.items[0].id).toBe(3);
|
||
expect(container.items[1].id).toBe(2);
|
||
expect(container.items[2].id).toBe(4);
|
||
});
|
||
test('向下移动到最后', () => {
|
||
const container = { id: 1, type: NodeType.CONTAINER, items: [{ id: 2 }, { id: 3 }, { id: 4 }] };
|
||
editor.moveItemsInContainer([0], container, 3);
|
||
expect(container.items[0].id).toBe(3);
|
||
expect(container.items[1].id).toBe(4);
|
||
expect(container.items[2].id).toBe(2);
|
||
});
|
||
|
||
test('向上移动', () => {
|
||
const container = { id: 1, type: NodeType.CONTAINER, items: [{ id: 2 }, { id: 3 }, { id: 4 }] };
|
||
editor.moveItemsInContainer([2], container, 3);
|
||
expect(container.items[2].id).toBe(4);
|
||
editor.moveItemsInContainer([2], container, 2);
|
||
expect(container.items[2].id).toBe(4);
|
||
editor.moveItemsInContainer([2], container, 1);
|
||
expect(container.items[0].id).toBe(2);
|
||
expect(container.items[1].id).toBe(4);
|
||
expect(container.items[2].id).toBe(3);
|
||
});
|
||
test('向上移动到最后', () => {
|
||
const container = { id: 1, type: NodeType.CONTAINER, items: [{ id: 2 }, { id: 3 }, { id: 4 }] };
|
||
editor.moveItemsInContainer([2], container, 0);
|
||
expect(container.items[0].id).toBe(4);
|
||
expect(container.items[1].id).toBe(2);
|
||
expect(container.items[2].id).toBe(3);
|
||
});
|
||
|
||
test('移动多个', () => {
|
||
const container = {
|
||
id: 1,
|
||
type: NodeType.CONTAINER,
|
||
items: [{ id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }],
|
||
};
|
||
editor.moveItemsInContainer([0, 5], container, 0);
|
||
expect(container.items[0].id).toBe(2);
|
||
expect(container.items[1].id).toBe(7);
|
||
expect(container.items[2].id).toBe(3);
|
||
});
|
||
});
|
||
|
||
describe('buildChangeRecords', () => {
|
||
test('基础类型值', () => {
|
||
const value = {
|
||
name: 'test',
|
||
age: 25,
|
||
active: true,
|
||
};
|
||
const result = editor.buildChangeRecords(value, '');
|
||
|
||
expect(result).toEqual([
|
||
{ propPath: 'name', value: 'test' },
|
||
{ propPath: 'age', value: 25 },
|
||
{ propPath: 'active', value: true },
|
||
]);
|
||
});
|
||
|
||
test('嵌套对象', () => {
|
||
const value = {
|
||
user: {
|
||
name: 'John',
|
||
profile: {
|
||
age: 30,
|
||
city: 'Beijing',
|
||
},
|
||
},
|
||
settings: {
|
||
theme: 'dark',
|
||
},
|
||
};
|
||
const result = editor.buildChangeRecords(value, '');
|
||
|
||
expect(result).toEqual([
|
||
{ propPath: 'user.name', value: 'John' },
|
||
{ propPath: 'user.profile.age', value: 30 },
|
||
{ propPath: 'user.profile.city', value: 'Beijing' },
|
||
{ propPath: 'settings.theme', value: 'dark' },
|
||
]);
|
||
});
|
||
|
||
test('带有basePath', () => {
|
||
const value = {
|
||
style: {
|
||
width: 100,
|
||
height: 200,
|
||
},
|
||
};
|
||
const result = editor.buildChangeRecords(value, 'node');
|
||
|
||
expect(result).toEqual([
|
||
{ propPath: 'node.style.width', value: 100 },
|
||
{ propPath: 'node.style.height', value: 200 },
|
||
]);
|
||
});
|
||
|
||
test('包含数组', () => {
|
||
const value = {
|
||
items: [1, 2, 3],
|
||
config: {
|
||
list: ['a', 'b'],
|
||
},
|
||
};
|
||
const result = editor.buildChangeRecords(value, '');
|
||
|
||
expect(result).toEqual([
|
||
{ propPath: 'items', value: [1, 2, 3] },
|
||
{ propPath: 'config.list', value: ['a', 'b'] },
|
||
]);
|
||
});
|
||
|
||
test('包含null值', () => {
|
||
const value = {
|
||
data: null,
|
||
info: {
|
||
value: null,
|
||
name: 'test',
|
||
},
|
||
};
|
||
const result = editor.buildChangeRecords(value, '');
|
||
|
||
expect(result).toEqual([
|
||
{ propPath: 'data', value: null },
|
||
{ propPath: 'info.value', value: null },
|
||
{ propPath: 'info.name', value: 'test' },
|
||
]);
|
||
});
|
||
|
||
test('跳过undefined值', () => {
|
||
const value = {
|
||
name: 'test',
|
||
age: undefined,
|
||
info: {
|
||
city: 'Beijing',
|
||
country: undefined,
|
||
},
|
||
};
|
||
const result = editor.buildChangeRecords(value, '');
|
||
|
||
expect(result).toEqual([
|
||
{ propPath: 'name', value: 'test' },
|
||
{ propPath: 'info.city', value: 'Beijing' },
|
||
]);
|
||
});
|
||
|
||
test('空对象', () => {
|
||
const value = {};
|
||
const result = editor.buildChangeRecords(value, '');
|
||
|
||
expect(result).toEqual([]);
|
||
});
|
||
|
||
test('深层嵌套', () => {
|
||
const value = {
|
||
level1: {
|
||
level2: {
|
||
level3: {
|
||
level4: {
|
||
value: 'deep',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
};
|
||
const result = editor.buildChangeRecords(value, 'root');
|
||
|
||
expect(result).toEqual([{ propPath: 'root.level1.level2.level3.level4.value', value: 'deep' }]);
|
||
});
|
||
|
||
test('混合类型', () => {
|
||
const value = {
|
||
string: 'text',
|
||
number: 42,
|
||
boolean: false,
|
||
array: [1, 2],
|
||
object: {
|
||
nested: 'value',
|
||
},
|
||
nullValue: null,
|
||
};
|
||
const result = editor.buildChangeRecords(value, 'mixed');
|
||
|
||
expect(result).toEqual([
|
||
{ propPath: 'mixed.string', value: 'text' },
|
||
{ propPath: 'mixed.number', value: 42 },
|
||
{ propPath: 'mixed.boolean', value: false },
|
||
{ propPath: 'mixed.array', value: [1, 2] },
|
||
{ propPath: 'mixed.object.nested', value: 'value' },
|
||
{ propPath: 'mixed.nullValue', value: null },
|
||
]);
|
||
});
|
||
});
|
||
|
||
// ===== 以下为新提取的工具函数测试 =====
|
||
|
||
const mockRoot: MApp = {
|
||
id: 'app_1',
|
||
type: NodeType.ROOT,
|
||
items: [
|
||
{
|
||
id: 'page_1',
|
||
type: NodeType.PAGE,
|
||
name: 'index',
|
||
style: { position: 'relative', width: 375 },
|
||
items: [
|
||
{
|
||
id: 'node_1',
|
||
type: 'text',
|
||
style: { position: 'absolute', top: 10, left: 20, width: 100 },
|
||
},
|
||
{
|
||
id: 'node_2',
|
||
type: 'button',
|
||
style: { position: 'absolute', bottom: 50, right: 30 },
|
||
},
|
||
{
|
||
id: 'node_3',
|
||
type: 'image',
|
||
style: { position: 'relative', top: 0, left: 0 },
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
|
||
const mockGetNodeInfo = (id: string | number): EditorNodeInfo => {
|
||
const page = mockRoot.items[0];
|
||
if (`${id}` === `${mockRoot.id}`) {
|
||
return { node: mockRoot as unknown as MNode, parent: null, page: null };
|
||
}
|
||
if (`${id}` === `${page.id}`) {
|
||
return { node: page, parent: mockRoot as unknown as MContainer, page: page as any };
|
||
}
|
||
const items = (page as MContainer).items || [];
|
||
const node = items.find((n: MNode) => `${n.id}` === `${id}`);
|
||
if (node) {
|
||
return { node, parent: page as MContainer, page: page as any };
|
||
}
|
||
return { node: null, parent: null, page: null };
|
||
};
|
||
|
||
describe('resolveSelectedNode', () => {
|
||
test('传入数字ID，正常返回节点信息', () => {
|
||
const result = editor.resolveSelectedNode('node_1', mockGetNodeInfo, mockRoot.id);
|
||
expect(result.node?.id).toBe('node_1');
|
||
expect(result.parent?.id).toBe('page_1');
|
||
expect(result.page?.id).toBe('page_1');
|
||
});
|
||
|
||
test('传入节点配置对象，正常返回节点信息', () => {
|
||
const config: MNode = { id: 'node_2', type: 'button' };
|
||
const result = editor.resolveSelectedNode(config, mockGetNodeInfo, mockRoot.id);
|
||
expect(result.node?.id).toBe('node_2');
|
||
});
|
||
|
||
test('传入页面ID，正常返回页面信息', () => {
|
||
const result = editor.resolveSelectedNode('page_1', mockGetNodeInfo, mockRoot.id);
|
||
expect(result.node?.id).toBe('page_1');
|
||
});
|
||
|
||
test('传入空ID，抛出错误', () => {
|
||
expect(() => editor.resolveSelectedNode({ id: '', type: 'text' }, mockGetNodeInfo)).toThrow('没有ID，无法选中');
|
||
});
|
||
|
||
test('传入不存在的ID，抛出错误', () => {
|
||
expect(() => editor.resolveSelectedNode('not_exist', mockGetNodeInfo)).toThrow('获取不到组件信息');
|
||
});
|
||
|
||
test('传入根节点ID，抛出错误', () => {
|
||
expect(() => editor.resolveSelectedNode('app_1', mockGetNodeInfo, mockRoot.id)).toThrow('不能选根节点');
|
||
});
|
||
|
||
test('不传rootId时，不校验根节点', () => {
|
||
const result = editor.resolveSelectedNode('app_1', mockGetNodeInfo);
|
||
expect(result.node?.id).toBe('app_1');
|
||
});
|
||
});
|
||
|
||
describe('toggleFixedPosition', () => {
|
||
const getLayoutFn = async () => Layout.ABSOLUTE;
|
||
|
||
test('非fixed变为fixed，调用change2Fixed', async () => {
|
||
const src: MNode = { id: 'node_1', type: 'text', style: { position: 'absolute', top: 10, left: 20 } };
|
||
const dist: MNode = { id: 'node_1', type: 'text', style: { position: 'fixed', top: 10, left: 20 } };
|
||
|
||
const result = await editor.toggleFixedPosition(dist, src, mockRoot, getLayoutFn);
|
||
expect(result.style?.position).toBe('fixed');
|
||
expect(result).not.toBe(dist);
|
||
});
|
||
|
||
test('fixed变为非fixed，调用Fixed2Other', async () => {
|
||
const src: MNode = { id: 'node_1', type: 'text', style: { position: 'fixed', top: 10, left: 20 } };
|
||
const dist: MNode = { id: 'node_1', type: 'text', style: { position: 'absolute', top: 10, left: 20 } };
|
||
|
||
const result = await editor.toggleFixedPosition(dist, src, mockRoot, getLayoutFn);
|
||
expect(result.style?.position).toBe('absolute');
|
||
});
|
||
|
||
test('定位未变化，不修改样式', async () => {
|
||
const src: MNode = { id: 'node_1', type: 'text', style: { position: 'absolute', top: 10, left: 20 } };
|
||
const dist: MNode = { id: 'node_1', type: 'text', style: { position: 'absolute', top: 30, left: 40 } };
|
||
|
||
const result = await editor.toggleFixedPosition(dist, src, mockRoot, getLayoutFn);
|
||
expect(result.style?.top).toBe(30);
|
||
expect(result.style?.left).toBe(40);
|
||
});
|
||
|
||
test('pop类型节点不做处理', async () => {
|
||
const src: MNode = {
|
||
id: 'node_1',
|
||
type: 'pop',
|
||
style: { position: 'absolute', top: 10, left: 20 },
|
||
name: 'pop',
|
||
};
|
||
const dist: MNode = { id: 'node_1', type: 'pop', style: { position: 'fixed', top: 10, left: 20 }, name: 'pop' };
|
||
|
||
const result = await editor.toggleFixedPosition(dist, src, mockRoot, getLayoutFn);
|
||
expect(result.style?.position).toBe('fixed');
|
||
});
|
||
|
||
test('目标节点无position属性，不做处理', async () => {
|
||
const src: MNode = { id: 'node_1', type: 'text', style: { position: 'absolute' } };
|
||
const dist: MNode = { id: 'node_1', type: 'text', style: { width: 100 } };
|
||
|
||
const result = await editor.toggleFixedPosition(dist, src, mockRoot, getLayoutFn);
|
||
expect(result.style?.position).toBeUndefined();
|
||
});
|
||
|
||
test('返回深拷贝，不修改原对象', async () => {
|
||
const src: MNode = { id: 'node_1', type: 'text', style: { position: 'absolute', top: 10 } };
|
||
const dist: MNode = { id: 'node_1', type: 'text', style: { position: 'absolute', top: 20 } };
|
||
|
||
const result = await editor.toggleFixedPosition(dist, src, mockRoot, getLayoutFn);
|
||
expect(result).not.toBe(dist);
|
||
expect(dist.style?.top).toBe(20);
|
||
});
|
||
});
|
||
|
||
describe('calcMoveStyle', () => {
|
||
test('absolute定位，向下移动', () => {
|
||
const style = { position: 'absolute', top: 10, left: 20 };
|
||
const result = editor.calcMoveStyle(style, 0, 5);
|
||
expect(result).toEqual({ position: 'absolute', top: 15, left: 20, bottom: '' });
|
||
});
|
||
|
||
test('absolute定位，向右移动', () => {
|
||
const style = { position: 'absolute', top: 10, left: 20 };
|
||
const result = editor.calcMoveStyle(style, 5, 0);
|
||
expect(result).toEqual({ position: 'absolute', top: 10, left: 25, right: '' });
|
||
});
|
||
|
||
test('absolute定位，同时向下和向右移动', () => {
|
||
const style = { position: 'absolute', top: 10, left: 20 };
|
||
const result = editor.calcMoveStyle(style, 3, 7);
|
||
expect(result).toEqual({ position: 'absolute', top: 17, left: 23, bottom: '', right: '' });
|
||
});
|
||
|
||
test('fixed定位，正常移动', () => {
|
||
const style = { position: 'fixed', top: 100, left: 200 };
|
||
const result = editor.calcMoveStyle(style, -10, -20);
|
||
expect(result).toEqual({ position: 'fixed', top: 80, left: 190, bottom: '', right: '' });
|
||
});
|
||
|
||
test('使用bottom定位时，向下移动减小bottom', () => {
|
||
const style = { position: 'absolute', bottom: 50, left: 20 };
|
||
const result = editor.calcMoveStyle(style, 0, 10);
|
||
expect(result?.bottom).toBe(40);
|
||
expect(result?.top).toBe('');
|
||
});
|
||
|
||
test('使用right定位时，向右移动减小right', () => {
|
||
const style = { position: 'absolute', top: 10, right: 30 };
|
||
const result = editor.calcMoveStyle(style, 10, 0);
|
||
expect(result?.right).toBe(20);
|
||
expect(result?.left).toBe('');
|
||
});
|
||
|
||
test('relative定位，返回null', () => {
|
||
const style = { position: 'relative', top: 0, left: 0 };
|
||
const result = editor.calcMoveStyle(style, 10, 10);
|
||
expect(result).toBeNull();
|
||
});
|
||
|
||
test('无position属性，返回null', () => {
|
||
const style = { width: 100 };
|
||
const result = editor.calcMoveStyle(style, 10, 10);
|
||
expect(result).toBeNull();
|
||
});
|
||
|
||
test('空样式对象，返回null', () => {
|
||
const result = editor.calcMoveStyle({}, 10, 10);
|
||
expect(result).toBeNull();
|
||
});
|
||
|
||
test('偏移量为0，不修改样式', () => {
|
||
const style = { position: 'absolute', top: 10, left: 20 };
|
||
const result = editor.calcMoveStyle(style, 0, 0);
|
||
expect(result).toEqual({ position: 'absolute', top: 10, left: 20 });
|
||
});
|
||
|
||
test('不修改原对象', () => {
|
||
const style = { position: 'absolute', top: 10, left: 20 };
|
||
editor.calcMoveStyle(style, 5, 5);
|
||
expect(style.top).toBe(10);
|
||
expect(style.left).toBe(20);
|
||
});
|
||
});
|
||
|
||
describe('calcAlignCenterStyle', () => {
|
||
test('absolute布局，通过配置中的width计算居中', () => {
|
||
const node: MNode = { id: 'n1', type: 'text', style: { width: 100, left: 0 } };
|
||
const parent = { id: 'p1', type: NodeType.PAGE, style: { width: 375 }, items: [] } as unknown as MContainer;
|
||
const result = editor.calcAlignCenterStyle(node, parent, Layout.ABSOLUTE);
|
||
expect(result?.left).toBe(137.5);
|
||
expect(result?.right).toBe('');
|
||
});
|
||
|
||
test('relative布局，返回null', () => {
|
||
const node: MNode = { id: 'n1', type: 'text', style: { width: 100 } };
|
||
const parent = { id: 'p1', type: NodeType.PAGE, style: { width: 375 }, items: [] } as unknown as MContainer;
|
||
const result = editor.calcAlignCenterStyle(node, parent, Layout.RELATIVE);
|
||
expect(result).toBeNull();
|
||
});
|
||
|
||
test('节点无style，返回null', () => {
|
||
const node: MNode = { id: 'n1', type: 'text' };
|
||
const parent = { id: 'p1', type: NodeType.PAGE, style: { width: 375 }, items: [] } as unknown as MContainer;
|
||
const result = editor.calcAlignCenterStyle(node, parent, Layout.ABSOLUTE);
|
||
expect(result).toBeNull();
|
||
});
|
||
|
||
test('父节点无style，不修改', () => {
|
||
const node: MNode = { id: 'n1', type: 'text', style: { width: 100, left: 10 } };
|
||
const parent = { id: 'p1', type: NodeType.PAGE, items: [] } as unknown as MContainer;
|
||
const result = editor.calcAlignCenterStyle(node, parent, Layout.ABSOLUTE);
|
||
expect(result?.left).toBe(10);
|
||
});
|
||
|
||
test('父节点width非数字，不修改left', () => {
|
||
const node: MNode = { id: 'n1', type: 'text', style: { width: 100, left: 10 } };
|
||
const parent = {
|
||
id: 'p1',
|
||
type: NodeType.PAGE,
|
||
style: { width: '100%' },
|
||
items: [],
|
||
} as unknown as MContainer;
|
||
const result = editor.calcAlignCenterStyle(node, parent, Layout.ABSOLUTE);
|
||
expect(result?.left).toBe(10);
|
||
});
|
||
|
||
test('不修改原节点style', () => {
|
||
const node: MNode = { id: 'n1', type: 'text', style: { width: 100, left: 0 } };
|
||
const parent = { id: 'p1', type: NodeType.PAGE, style: { width: 375 }, items: [] } as unknown as MContainer;
|
||
editor.calcAlignCenterStyle(node, parent, Layout.ABSOLUTE);
|
||
expect(node.style?.left).toBe(0);
|
||
});
|
||
});
|
||
|
||
describe('calcLayerTargetIndex', () => {
|
||
test('绝对定位，向上移动1层', () => {
|
||
const result = editor.calcLayerTargetIndex(2, 1, 5, false);
|
||
expect(result).toBe(3);
|
||
});
|
||
|
||
test('绝对定位，向下移动1层', () => {
|
||
const result = editor.calcLayerTargetIndex(2, -1, 5, false);
|
||
expect(result).toBe(1);
|
||
});
|
||
|
||
test('流式布局，向上移动1层（索引减小）', () => {
|
||
const result = editor.calcLayerTargetIndex(2, 1, 5, true);
|
||
expect(result).toBe(1);
|
||
});
|
||
|
||
test('流式布局，向下移动1层（索引增大）', () => {
|
||
const result = editor.calcLayerTargetIndex(2, -1, 5, true);
|
||
expect(result).toBe(3);
|
||
});
|
||
|
||
test('绝对定位，置顶', () => {
|
||
const result = editor.calcLayerTargetIndex(2, LayerOffset.TOP, 5, false);
|
||
expect(result).toBe(5);
|
||
});
|
||
|
||
test('绝对定位，置底', () => {
|
||
const result = editor.calcLayerTargetIndex(2, LayerOffset.BOTTOM, 5, false);
|
||
expect(result).toBe(0);
|
||
});
|
||
|
||
test('流式布局，置顶（索引最小）', () => {
|
||
const result = editor.calcLayerTargetIndex(3, LayerOffset.TOP, 5, true);
|
||
expect(result).toBe(0);
|
||
});
|
||
|
||
test('流式布局，置底（索引最大）', () => {
|
||
const result = editor.calcLayerTargetIndex(1, LayerOffset.BOTTOM, 5, true);
|
||
expect(result).toBe(5);
|
||
});
|
||
|
||
test('偏移量为0，索引不变', () => {
|
||
const result = editor.calcLayerTargetIndex(2, 0, 5, false);
|
||
expect(result).toBe(2);
|
||
});
|
||
});
|
||
|
||
describe('editorNodeMergeCustomizer', () => {
|
||
test('undefined 且 source 拥有该 key 时返回空字符串', () => {
|
||
const source = { name: undefined };
|
||
const result = editor.editorNodeMergeCustomizer('old', undefined, 'name', {}, source);
|
||
expect(result).toBe('');
|
||
});
|
||
|
||
test('source 不拥有该 key 时返回 undefined（使用默认合并）', () => {
|
||
const result = editor.editorNodeMergeCustomizer('old', undefined, 'name', {}, {});
|
||
expect(result).toBeUndefined();
|
||
});
|
||
|
||
test('原来是数组，新值是对象，使用新值', () => {
|
||
const srcValue = { a: 1 };
|
||
const result = editor.editorNodeMergeCustomizer([1, 2], srcValue, 'key', {}, {});
|
||
expect(result).toBe(srcValue);
|
||
});
|
||
|
||
test('新值是数组，直接替换', () => {
|
||
const srcValue = [3, 4];
|
||
const result = editor.editorNodeMergeCustomizer([1, 2], srcValue, 'key', {}, {});
|
||
expect(result).toBe(srcValue);
|
||
});
|
||
|
||
test('都是普通值，返回 undefined（使用默认合并）', () => {
|
||
const result = editor.editorNodeMergeCustomizer('old', 'new', 'key', {}, {});
|
||
expect(result).toBeUndefined();
|
||
});
|
||
});
|
||
|
||
describe('classifyDragSources', () => {
|
||
const makeTree = (): { root: MApp; getNodeInfo: (id: any, raw?: boolean) => EditorNodeInfo } => {
|
||
const child1: MNode = { id: 'c1', type: 'text' };
|
||
const child2: MNode = { id: 'c2', type: 'text' };
|
||
const child3: MNode = { id: 'c3', type: 'text' };
|
||
const container1: MContainer = {
|
||
id: 'cont1',
|
||
type: NodeType.CONTAINER,
|
||
items: [child1, child2],
|
||
};
|
||
const container2: MContainer = {
|
||
id: 'cont2',
|
||
type: NodeType.CONTAINER,
|
||
items: [child3],
|
||
};
|
||
const page: any = {
|
||
id: 'page_1',
|
||
type: NodeType.PAGE,
|
||
items: [container1, container2],
|
||
};
|
||
const root: MApp = { id: 'app', type: NodeType.ROOT, items: [page] };
|
||
|
||
const getNodeInfo = (id: any): EditorNodeInfo => {
|
||
if (`${id}` === 'c1' || `${id}` === 'c2') {
|
||
return {
|
||
node: container1.items.find((n) => `${n.id}` === `${id}`) ?? null,
|
||
parent: container1,
|
||
page,
|
||
};
|
||
}
|
||
if (`${id}` === 'c3') {
|
||
return { node: child3, parent: container2, page };
|
||
}
|
||
if (`${id}` === 'cont1') {
|
||
return { node: container1, parent: page, page };
|
||
}
|
||
if (`${id}` === 'cont2') {
|
||
return { node: container2, parent: page, page };
|
||
}
|
||
return { node: null, parent: null, page: null };
|
||
};
|
||
|
||
return { root, getNodeInfo };
|
||
};
|
||
|
||
test('同父容器内拖拽，返回 sameParentIndices', () => {
|
||
const { getNodeInfo } = makeTree();
|
||
const targetParent = getNodeInfo('cont1').node as MContainer;
|
||
const result = editor.classifyDragSources([{ id: 'c1', type: 'text' }], targetParent, getNodeInfo);
|
||
expect(result.aborted).toBe(false);
|
||
expect(result.sameParentIndices).toEqual([0]);
|
||
expect(result.crossParentConfigs).toHaveLength(0);
|
||
});
|
||
|
||
test('跨容器拖拽，返回 crossParentConfigs', () => {
|
||
const { getNodeInfo } = makeTree();
|
||
const targetParent = getNodeInfo('cont1').node as MContainer;
|
||
const result = editor.classifyDragSources([{ id: 'c3', type: 'text' }], targetParent, getNodeInfo);
|
||
expect(result.aborted).toBe(false);
|
||
expect(result.sameParentIndices).toHaveLength(0);
|
||
expect(result.crossParentConfigs).toHaveLength(1);
|
||
expect(result.crossParentConfigs[0].config.id).toBe('c3');
|
||
});
|
||
|
||
test('混合拖拽：同容器+跨容器', () => {
|
||
const { getNodeInfo } = makeTree();
|
||
const targetParent = getNodeInfo('cont1').node as MContainer;
|
||
const result = editor.classifyDragSources(
|
||
[
|
||
{ id: 'c1', type: 'text' },
|
||
{ id: 'c3', type: 'text' },
|
||
],
|
||
targetParent,
|
||
getNodeInfo,
|
||
);
|
||
expect(result.aborted).toBe(false);
|
||
expect(result.sameParentIndices).toEqual([0]);
|
||
expect(result.crossParentConfigs).toHaveLength(1);
|
||
});
|
||
|
||
test('节点不存在时跳过', () => {
|
||
const { getNodeInfo } = makeTree();
|
||
const targetParent = getNodeInfo('cont1').node as MContainer;
|
||
const result = editor.classifyDragSources([{ id: 'nonexistent', type: 'text' }], targetParent, getNodeInfo);
|
||
expect(result.aborted).toBe(false);
|
||
expect(result.sameParentIndices).toHaveLength(0);
|
||
expect(result.crossParentConfigs).toHaveLength(0);
|
||
});
|
||
|
||
test('目标容器在节点路径上时跳过（防止循环嵌套）', () => {
|
||
const { getNodeInfo } = makeTree();
|
||
const targetParent = getNodeInfo('cont1').node as MContainer;
|
||
const result = editor.classifyDragSources([{ id: 'c1', type: 'text' }], targetParent, (id: any) => {
|
||
if (`${id}` === 'c1') {
|
||
return {
|
||
node: { id: 'c1', type: 'text' },
|
||
parent: targetParent,
|
||
page: { id: 'page_1', type: NodeType.PAGE, items: [] } as any,
|
||
};
|
||
}
|
||
return { node: null, parent: null, page: null };
|
||
});
|
||
expect(result.sameParentIndices).toEqual([0]);
|
||
expect(result.crossParentConfigs).toHaveLength(0);
|
||
});
|
||
});
|