mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-04-12 21:50:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(viewer): add component merge tests

Browse Source
This commit is contained in:
Bowen Tan 2022-11-03 18:13:53 +08:00
parent 5efce32621
commit 107e7ada8f
9 changed files with 922 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/viewer/__tests__/component.spec.ts Normal file
View File

@ -0,0 +1,54 @@
import { mergeApplication } from '../src/mergeApplication';
import { BaseSchema, Schema1, Schema2 } from '../src/mock/mock';
import o from './mocks/ComponentDiff/o.json';
import a from './mocks/ComponentDiff/a.json';
import b from './mocks/ComponentDiff/b.json';
import solvedApp from './mocks/ComponentDiff/solved.json';
import { Application } from '@sunmao-ui/core';
import { ConflictDiffBlock, OKDiffBlock } from '../src/type';
import { solveApplication } from '../src/solve';
describe('component level diff and merge', () => {
const { diffBlocks, map, appSkeleton } = mergeApplication(
o as Application,
a as Application,
b as Application
);
const block1 = diffBlocks[0] as OKDiffBlock;
const block2 = diffBlocks[1] as ConflictDiffBlock;
const block3 = diffBlocks[2] as OKDiffBlock;
const block4 = diffBlocks[3] as ConflictDiffBlock;
it(`detect component's conflicts`, () => {
expect(diffBlocks.length).toEqual(4);
expect(block1.kind).toEqual('ok');
expect(block1.o.map(c => c.id)).toEqual(['stack1', 'text2', 'text3']);
expect(block2.kind).toEqual('conflict');
expect(block2.a.map(c => c.id)).toEqual(['input10']);
expect(block2.b.map(c => c.id)).toEqual(['image11']);
expect(block3.kind).toEqual('ok');
expect(block3.o.map(c => c.id)).toEqual([
'stack3',
'button9',
'text6',
'stack4',
'text8',
]);
expect(block4.kind).toEqual('conflict');
expect(block4.a.map(c => c.id)).toEqual(['text7']);
expect(block4.b.map(c => c.id)).toEqual(['text12']);
});
it(`solve component's conflicts`, () => {
const newAPP = solveApplication({
diffBlocks,
hashMap: map,
solvedComponentsIdMap: {},
checkedHashes: block2.aHashes
.concat(block2.bHashes)
.concat(block4.aHashes)
.concat(block4.bHashes),
appSkeleton,
});
expect(newAPP).toEqual(solvedApp);
});
});

209
packages/viewer/__tests__/mocks/ComponentDiff/a.json Normal file
View File

@ -0,0 +1,209 @@
{
"version": "sunmao/v1",
"kind": "Application",
"metadata": {
"name": "some App"
},
"spec": {
"components": [
{
"id": "stack1",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "text2",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text3",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "input10",
"type": "arco/v1/input",
"properties": {
"allowClear": false,
"disabled": false,
"readOnly": false,
"defaultValue": "",
"updateWhenDefaultValueChanges": false,
"placeholder": "please input",
"error": false,
"size": "default"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "stack3",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "button9",
"type": "arco/v1/button",
"properties": {
"type": "default",
"status": "default",
"long": false,
"size": "default",
"disabled": false,
"loading": false,
"shape": "square",
"text": "button"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack3",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text6",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack3",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "stack4",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "text8",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack4",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text7",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack4",
"slot": "content"
},
"ifCondition": true
}
}
]
}
]
}
}

231
packages/viewer/__tests__/mocks/ComponentDiff/b.json Normal file
View File

@ -0,0 +1,231 @@
{
"version": "sunmao/v1",
"kind": "Application",
"metadata": {
"name": "some App"
},
"spec": {
"components": [
{
"id": "stack1",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "text2",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text3",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "image11",
"type": "arco/v1/image",
"properties": {
"src": "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
"title": "",
"description": "",
"footerPosition": "inner",
"preview": false,
"width": 200,
"height": 200,
"error": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "stack3",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "button9",
"type": "arco/v1/button",
"properties": {
"type": "default",
"status": "default",
"long": false,
"size": "default",
"disabled": false,
"loading": false,
"shape": "square",
"text": "button"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack3",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text6",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack3",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "stack4",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "text7",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack4",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text8",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack4",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text12",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack4",
"slot": "content"
},
"ifCondition": true
}
}
]
}
]
}
}

157
packages/viewer/__tests__/mocks/ComponentDiff/o.json Normal file
View File

@ -0,0 +1,157 @@
{
"version": "sunmao/v1",
"kind": "Application",
"metadata": {
"name": "some App"
},
"spec": {
"components": [
{
"id": "stack1",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "text2",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text3",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "stack3",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "text6",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack3",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "stack4",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "text7",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack4",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text8",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack4",
"slot": "content"
},
"ifCondition": true
}
}
]
}
]
}
}

257
packages/viewer/__tests__/mocks/ComponentDiff/solved.json Normal file
View File

@ -0,0 +1,257 @@
{
"version": "sunmao/v1",
"kind": "Application",
"metadata": {
"name": "some App"
},
"spec": {
"components": [
{
"id": "stack1",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "text2",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text3",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "input10",
"type": "arco/v1/input",
"properties": {
"allowClear": false,
"disabled": false,
"readOnly": false,
"defaultValue": "",
"updateWhenDefaultValueChanges": false,
"placeholder": "please input",
"error": false,
"size": "default"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "image11",
"type": "arco/v1/image",
"properties": {
"src": "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
"title": "",
"description": "",
"footerPosition": "inner",
"preview": false,
"width": 200,
"height": 200,
"error": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack1",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "stack3",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "button9",
"type": "arco/v1/button",
"properties": {
"type": "default",
"status": "default",
"long": false,
"size": "default",
"disabled": false,
"loading": false,
"shape": "square",
"text": "button"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack3",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text6",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack3",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "stack4",
"type": "core/v1/stack",
"properties": {
"spacing": 12,
"direction": "horizontal",
"align": "auto",
"wrap": false,
"justify": "flex-start"
},
"traits": []
},
{
"id": "text8",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack4",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text7",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack4",
"slot": "content"
},
"ifCondition": true
}
}
]
},
{
"id": "text12",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "text",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "stack4",
"slot": "content"
},
"ifCondition": true
}
}
]
}
]
}
}

23
packages/viewer/__tests__/viewer.spec.ts
View File

@ -1,23 +0,0 @@
import { mergeApplication } from '../src/mergeApplication';
import { BaseSchema, Schema1, Schema2 } from '../src/mock/mock';
describe('detect create component tests', () => {
it('works', () => {
const result = [
{ ok: ['text11', 'iframe14', 'stack12', 'fileInput13'] },
{
conflict: {
a: ['new_text16', 'iframe14'],
aIndex: 3,
o: ['iframe14'],
oIndex: 3,
b: ['text5'],
bIndex: 4,
},
},
{ ok: ['moduleContainer15'] },
];
const { diffBlocks: mergeRegion } = mergeApplication(BaseSchema, Schema1, Schema2);
expect(mergeRegion).toEqual(result);
});
});

6
packages/viewer/src/Viewer.tsx
View File

@ -111,8 +111,10 @@ export const Viewer: React.FC = () => {
<Radio value="JSON">JSON</Radio>
<Radio value="YAML">YAML</Radio>
</Radio.Group>
<Button onClick={onClickSolve}>Solve</Button>
<Button disabled={!mergedText} onClick={onClickCopy}>
<Button type="primary" onClick={onClickSolve}>
Solve
</Button>
<Button type="primary" disabled={!mergedText} onClick={onClickCopy}>
{copied ? 'Copied!' : 'Copy'}
</Button>
<pre>{mergedText}</pre>

9
packages/viewer/src/components/FileUploadArea.tsx
View File

@ -41,6 +41,7 @@ export const FileUploadArea: React.FC<Props> = ({ onClickMerge }) => {
return (
<div className={Style}>
<Upload
drag
accept=".json, .yaml"
onChange={async fileList => {
if (!fileList[0].originFile) return;
@ -50,6 +51,7 @@ export const FileUploadArea: React.FC<Props> = ({ onClickMerge }) => {
tip="Version O"
/>
<Upload
drag
accept=".json, .yaml"
onChange={async fileList => {
if (!fileList[0].originFile) return;
@ -59,6 +61,7 @@ export const FileUploadArea: React.FC<Props> = ({ onClickMerge }) => {
tip="Version A"
/>
<Upload
drag
accept=".json, .yaml"
onChange={async fileList => {
if (!fileList[0].originFile) return;
@ -67,7 +70,11 @@ export const FileUploadArea: React.FC<Props> = ({ onClickMerge }) => {
}}
tip="Version B"
/>
<Button disabled={!fileO || !fileA || !fileB} onClick={_onClickMerge}>
<Button
type="primary"
disabled={!fileO || !fileA || !fileB}
onClick={_onClickMerge}
>
合并
</Button>
</div>

4
packages/viewer/tsconfig.json
View File

@ -22,7 +22,7 @@
"jsx": "react",
"rootDir": "src",
"declaration": true,
"declarationDir": "lib"
"declarationDir": "lib",
},
"include": ["./src", "__tests__/mock"]
"include": ["./src", "./__tests__"]
}