TS migration of 'transformer' and 'layouter'

Composer/.eslintrc.js

@@ -29,6 +29,16 @@ module.exports = {
       rules: {
         '@typescript-eslint/interface-name-prefix': 'off',
         '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+        '@typescript-eslint/no-explicit-any': ['warn'],
+        '@typescript-eslint/explicit-function-return-type': [
+          'warn',
+          {
+            allowExpressions: true,
+            allowTypedFunctionExpressions: true,
+            allowHigherOrderFunctions: true,
+          },
+        ],
       },
     },
     {

Composer/packages/extensions/visual-designer/.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+lib/

Composer/packages/extensions/visual-designer/.eslintrc.js

@@ -7,13 +7,5 @@ module.exports = {
     '@typescript-eslint/indent': ['warn', 2],
     '@typescript-eslint/explicit-member-accessibility': 'off',
     '@typescript-eslint/no-use-before-define': ['warn', { functions: false, classes: true }],
-    '@typescript-eslint/explicit-function-return-type': [
-      'warn',
-      {
-        allowExpressions: true,
-        allowTypedFunctionExpressions: true,
-        allowHigherOrderFunctions: true,
-      },
-    ],
   },
 };

Composer/packages/extensions/visual-designer/__tests__/components/shared/NodeMenu.test.tsx

@@ -26,11 +26,8 @@ describe('<NodeMenu />', () => {
 
     fireEvent.click(menuButton);
 
-    if (itemName) {
-      return findAllByText(document.body, itemName);
-    }
-
-    return findAllByText(document.body, /(Delete)/);
+    const matcher = itemName || /(Delete)/;
+    return findAllByText(document.body, matcher) as Promise<HTMLElement[]>;
   }
 
   it('can be delete', async () => {

Composer/packages/extensions/visual-designer/__tests__/layouters/calculateNodeBoundary.test.ts

@@ -0,0 +1,106 @@
+import {
+  calculateSequenceBoundary,
+  calculateIfElseBoundary,
+  calculateSwitchCaseBoundary,
+  calculateForeachBoundary,
+} from '../../src/layouters/calculateNodeBoundary';
+import { Boundary } from '../../src/shared/Boundary';
+import { ElementInterval, LoopEdgeMarginLeft } from '../../src/shared/elementSizes';
+
+const boundary = new Boundary();
+const BranchIntervalX = ElementInterval.x;
+const BranchIntervalY = ElementInterval.y / 2;
+describe('calculateSequenceBoundary', () => {
+  let boundaries;
+  beforeEach(() => {
+    boundaries = [new Boundary(280, 80), new Boundary(180, 100)];
+  });
+  it('should return an new boundary when input boundaries is empty array', () => {
+    expect(calculateSequenceBoundary([])).toEqual(boundary);
+  });
+
+  it('should return a box whose property be calcalated by inputing boundaries', () => {
+    const returnBoundary = {
+      width: 280,
+      height: 180 + ElementInterval.y * 2,
+      axisX: 140,
+      axisY: 0,
+    };
+    expect(calculateSequenceBoundary(boundaries)).toEqual(returnBoundary);
+  });
+});
+
+describe('calculateIfElseBoundary', () => {
+  let conditionBoundary, choiceBoundary, ifBoundary, elseBoundary;
+  beforeEach(() => {
+    conditionBoundary = new Boundary(280, 80);
+    choiceBoundary = new Boundary(50, 20);
+    ifBoundary = new Boundary(280, 80);
+    elseBoundary = new Boundary(280, 80);
+  });
+  it('should return an new boundary when input conditionBoundary or choiceBoundary is empty', () => {
+    expect(calculateIfElseBoundary(null, boundary, boundary, boundary)).toEqual(boundary);
+    expect(calculateIfElseBoundary(boundary, null, boundary, boundary)).toEqual(boundary);
+  });
+  it('should return a box whose size be calcalated by conditionBoundary, choiceBoundary, ifBoundary and elseBoundary', () => {
+    const bdWithBothBranch = calculateIfElseBoundary(conditionBoundary, choiceBoundary, ifBoundary, elseBoundary);
+    const bdWithIfBranch = calculateIfElseBoundary(conditionBoundary, choiceBoundary, ifBoundary, new Boundary());
+    const bdWithElseBranch = calculateIfElseBoundary(conditionBoundary, choiceBoundary, new Boundary(), elseBoundary);
+    const bdWithNoBranch = calculateForeachBoundary(conditionBoundary, choiceBoundary, new Boundary(), new Boundary());
+
+    expect(bdWithBothBranch.height).toEqual(bdWithIfBranch.height);
+    expect(bdWithIfBranch.height).toEqual(bdWithElseBranch.height);
+
+    expect(bdWithBothBranch.height - bdWithNoBranch.height).toEqual(ifBoundary.height);
+    expect(bdWithBothBranch.height).toBeGreaterThan(
+      conditionBoundary.height + choiceBoundary.height + Math.max(ifBoundary.height, elseBoundary.height)
+    );
+    expect(bdWithBothBranch.width).toBeGreaterThan(ifBoundary.width + elseBoundary.width);
+  });
+});
+
+describe('calculateSwitchCaseBoundary', () => {
+  let conditionBoundary, choiceBoundary, branchBoundaries;
+  beforeEach(() => {
+    conditionBoundary = new Boundary(280, 80);
+    choiceBoundary = new Boundary(50, 20);
+    branchBoundaries = [new Boundary(280, 80), new Boundary(300, 80)];
+  });
+  it('should return an new boundary when input conditionBoundary or choiceBoundary is empty', () => {
+    expect(calculateSwitchCaseBoundary(null, boundary, [])).toEqual(boundary);
+  });
+  it('should return a box whose property be calcalated by conditionBoundary, choiceBoundary, branchBoundaries', () => {
+    const returnBoundary = {
+      width: 580 + BranchIntervalX * 2,
+      height: 180 + BranchIntervalY * 3,
+      axisX: 140,
+      axisY: 0,
+    };
+    expect(calculateSwitchCaseBoundary(conditionBoundary, choiceBoundary, branchBoundaries)).toEqual(returnBoundary);
+  });
+});
+
+describe('calculateForeachBoundary', () => {
+  let foreachBoundary, stepsBoundary, loopBeginBoundary, loopEndBoundary;
+  beforeEach(() => {
+    foreachBoundary = new Boundary(280, 80);
+    stepsBoundary = new Boundary(380, 100);
+    loopBeginBoundary = new Boundary(24, 24);
+    loopEndBoundary = new Boundary(24, 24);
+  });
+  it('should return an new boundary when input foreachBoundary or stepsBoundary is empty array', () => {
+    expect(calculateForeachBoundary(null, boundary, boundary, boundary)).toEqual(boundary);
+    expect(calculateForeachBoundary(boundary, null, boundary, boundary)).toEqual(boundary);
+  });
+  it('should return a box whose property be calcalated by foreachBoundary, stepsBoundary, loopBeginBoundary, loopEndBoundary', () => {
+    const returnBoundary = {
+      width: 380 + LoopEdgeMarginLeft,
+      height: 228 + BranchIntervalY * 3,
+      axisX: 190 + LoopEdgeMarginLeft,
+      axisY: 0,
+    };
+    expect(calculateForeachBoundary(foreachBoundary, stepsBoundary, loopBeginBoundary, loopEndBoundary)).toEqual(
+      returnBoundary
+    );
+  });
+});

Composer/packages/extensions/visual-designer/__tests__/layouters/foreachLayouter.test.ts

@@ -0,0 +1,23 @@
+import { Boundary } from '../../src/shared/Boundary';
+import { GraphNode } from '../../src/shared/GraphNode';
+import { foreachLayouter } from '../../src/layouters/foreachLayouter';
+
+describe('foreachLayouter', () => {
+  let foreachNode, stepsNode, loopBeginNode, loopEndNode;
+
+  beforeEach(() => {
+    loopBeginNode = new GraphNode('11', {}, new Boundary(280, 80));
+    loopEndNode = new GraphNode('12', {}, new Boundary(280, 80));
+    foreachNode = new GraphNode('0', {}, new Boundary(280, 80));
+    stepsNode = new GraphNode('1', {}, new Boundary(280, 80));
+  });
+
+  it('should return an empty graphLayout when foreachNode or stepsNode is null', () => {
+    expect(foreachLayouter(null, new GraphNode(), loopBeginNode, loopEndNode).boundary).toEqual(new Boundary());
+    expect(foreachLayouter(new GraphNode(), null, loopBeginNode, loopEndNode).boundary).toEqual(new Boundary());
+  });
+
+  it('should reuturn a graphLayout whose edges count is 6', () => {
+    expect(foreachLayouter(foreachNode, stepsNode, loopBeginNode, loopEndNode).edges.length).toEqual(6);
+  });
+});

Composer/packages/extensions/visual-designer/__tests__/layouters/ifelseLayouter.test.ts

@@ -0,0 +1,23 @@
+import { ifElseLayouter } from '../../src/layouters/ifelseLayouter';
+import { Boundary } from '../../src/shared/Boundary';
+import { GraphNode } from '../../src/shared/GraphNode';
+
+describe('ifElseLayouter', () => {
+  let ifNode, elseNode, conditionNode, choiceNode;
+
+  beforeEach(() => {
+    ifNode = new GraphNode('1', {}, new Boundary(280, 80));
+    elseNode = new GraphNode('1', {}, new Boundary(280, 80));
+    conditionNode = new GraphNode('1', {}, new Boundary(280, 80));
+    choiceNode = new GraphNode('1', {}, new Boundary(280, 80));
+  });
+
+  it('should return an empty graphLayout when conditionNode or choiceNode is null', () => {
+    expect(ifElseLayouter(null, new GraphNode(), new GraphNode(), new GraphNode()).boundary).toEqual(new Boundary());
+    expect(ifElseLayouter(new GraphNode(), null, new GraphNode(), new GraphNode()).boundary).toEqual(new Boundary());
+  });
+
+  it('should reuturn a graphLayout whose edges count is 7', () => {
+    expect(ifElseLayouter(conditionNode, choiceNode, ifNode, elseNode).edges.length).toEqual(7);
+  });
+});

Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts

@@ -0,0 +1,27 @@
+import { Boundary } from '../../src/shared/Boundary';
+import { measureJsonBoundary } from '../../src/layouters/measureJsonBoundary';
+import { ObiTypes } from '../../src/shared/ObiTypes';
+import { DiamondSize, InitNodeSize, LoopIconSize } from '../../src/shared/elementSizes';
+
+describe('measureJsonBoundary', () => {
+  let boundary = new Boundary();
+
+  it('should return an empty boundary when json is null or json.$type is null', () => {
+    expect(measureJsonBoundary(null)).toEqual(boundary);
+    expect(measureJsonBoundary({ a: 1 })).toEqual(boundary);
+  });
+  it('should return boundary whose size according to the json.$type', () => {
+    expect(measureJsonBoundary({ $type: ObiTypes.ChoiceDiamond })).toEqual(
+      new Boundary(DiamondSize.width, DiamondSize.height)
+    );
+    expect(measureJsonBoundary({ $type: ObiTypes.ConditionNode })).toEqual(
+      new Boundary(InitNodeSize.width, InitNodeSize.height)
+    );
+    expect(measureJsonBoundary({ $type: ObiTypes.LoopIndicator })).toEqual(
+      new Boundary(LoopIconSize.width, LoopIconSize.height)
+    );
+    expect(measureJsonBoundary({ $type: ObiTypes.LogStep })).toEqual(
+      new Boundary(InitNodeSize.width, InitNodeSize.height)
+    );
+  });
+});

Composer/packages/extensions/visual-designer/__tests__/layouters/sequentialLayouter.test.ts

@@ -0,0 +1,29 @@
+import { sequentialLayouter } from '../../src/layouters/sequentialLayouter';
+import { Boundary } from '../../src/shared/Boundary';
+import { GraphNode } from '../../src/shared/GraphNode';
+import { calculateSequenceBoundary } from '../../src/layouters/calculateNodeBoundary';
+
+describe('sequentialLayouter', () => {
+  let nodes;
+
+  beforeEach(() => {
+    nodes = [
+      new GraphNode('1', {}, new Boundary(280, 80)),
+      new GraphNode('2', {}, new Boundary(280, 80)),
+      new GraphNode('3', {}, new Boundary(280, 80)),
+    ];
+  });
+
+  it('should return an empty graphLayout when nodes is not an array or is an empty array', () => {
+    expect(sequentialLayouter([]).boundary).toEqual(new Boundary());
+  });
+  it('should reuturn a graphLayout whose boundary be calcalated by calculateSequenceBoundary function', () => {
+    expect(sequentialLayouter(nodes).boundary).toEqual(calculateSequenceBoundary(nodes.map(x => x.boundary)));
+  });
+  it('should reuturn a graphLayout whose edges count is 4 when nodes.length is 3', () => {
+    expect(sequentialLayouter(nodes).edges.length).toEqual(4);
+  });
+  it('should reuturn a graphLayout whose nodes count is 3 when nodes.length is 3', () => {
+    expect(sequentialLayouter(nodes).nodes.length).toEqual(3);
+  });
+});

Composer/packages/extensions/visual-designer/__tests__/layouters/switchCaseLayouter.test.ts

@@ -0,0 +1,25 @@
+import { Boundary } from '../../src/shared/Boundary';
+import { GraphNode } from '../../src/shared/GraphNode';
+import { switchCaseLayouter } from '../../src/layouters/switchCaseLayouter';
+
+describe('switchCaseLayouter', () => {
+  let branchNodes, conditionNode, choiceNode;
+
+  beforeEach(() => {
+    branchNodes = [
+      new GraphNode('11', {}, new Boundary(280, 80)),
+      new GraphNode('12', {}, new Boundary(280, 80)),
+      new GraphNode('13', {}, new Boundary(280, 80)),
+    ];
+    conditionNode = new GraphNode('0', {}, new Boundary(280, 80));
+    choiceNode = new GraphNode('1', {}, new Boundary(280, 80));
+  });
+
+  it('should return an empty graphLayout when conditionNode is null', () => {
+    expect(switchCaseLayouter(null, new GraphNode(), branchNodes).boundary).toEqual(new Boundary());
+  });
+
+  it('should reuturn a graphLayout whose edges count is 9 when branchNodes.length = 3', () => {
+    expect(switchCaseLayouter(conditionNode, choiceNode, branchNodes).edges.length).toEqual(9);
+  });
+});

Composer/packages/extensions/visual-designer/__tests__/transformers/transformForeach.test.ts

@@ -1,10 +1,10 @@
 import { transformForeach } from '../../src/transformers/transformForeach';
 import { ObiTypes } from '../../src/shared/ObiTypes';
 
-test('should return {} when input is invalid', () => {
-  expect(transformForeach(null, '')).toEqual({});
-  expect(transformForeach({}, '')).toEqual({});
-  expect(transformForeach({ $type: 'wrong' }, '')).toEqual({});
+test('should return NULL when input is invalid', () => {
+  expect(transformForeach(null, '')).toBeNull();
+  expect(transformForeach({}, '')).toBeNull();
+  expect(transformForeach({ $type: 'wrong' }, '')).toBeNull();
 });
 
 test('should return correct schema when input a Foreach schema', () => {
@@ -15,28 +15,29 @@ test('should return correct schema when input a Foreach schema', () => {
   };
 
   const result = transformForeach(json, 'steps[0]');
+  if (!result) throw new Error('transform Foreach got a wrong result');
 
   expect(result).toBeDefined();
 
   const { foreachDetail, stepGroup, loopBegin, loopEnd } = result;
 
   expect(foreachDetail).toBeDefined();
-  expect(foreachDetail!.id).toEqual('steps[0]');
-  expect(foreachDetail!.json.$type).toEqual(ObiTypes.ForeachDetail);
-  expect(foreachDetail!.json.listProperty).toEqual(json.listProperty);
+  expect(foreachDetail.id).toEqual('steps[0]');
+  expect(foreachDetail.json.$type).toEqual(ObiTypes.ForeachDetail);
+  expect(foreachDetail.json.listProperty).toEqual(json.listProperty);
 
   expect(stepGroup).toBeDefined();
-  expect(stepGroup!.id).toEqual('steps[0].steps');
-  expect(stepGroup!.json.$type).toEqual(ObiTypes.StepGroup);
-  expect(stepGroup!.json.children.length).toEqual(0);
+  expect(stepGroup.id).toEqual('steps[0].steps');
+  expect(stepGroup.json.$type).toEqual(ObiTypes.StepGroup);
+  expect(stepGroup.json.children.length).toEqual(0);
 
   expect(loopBegin).toBeDefined();
-  expect(loopBegin!.id).toEqual('steps[0]');
-  expect(loopBegin!.json.$type).toEqual(ObiTypes.LoopIndicator);
+  expect(loopBegin.id).toEqual('steps[0]');
+  expect(loopBegin.json.$type).toEqual(ObiTypes.LoopIndicator);
 
   expect(loopEnd).toBeDefined();
-  expect(loopEnd!.id).toEqual('steps[0]');
-  expect(loopEnd!.json.$type).toEqual(ObiTypes.LoopIndicator);
+  expect(loopEnd.id).toEqual('steps[0]');
+  expect(loopEnd.json.$type).toEqual(ObiTypes.LoopIndicator);
 });
 
 test('should return correct schema when input a ForeachPage schema', () => {
@@ -48,26 +49,27 @@ test('should return correct schema when input a ForeachPage schema', () => {
   };
 
   const result = transformForeach(json, 'steps[0]');
+  if (!result) throw new Error('transform Foreach got a wrong result');
 
   expect(result).toBeDefined();
 
   const { foreachDetail, stepGroup, loopBegin, loopEnd } = result;
 
   expect(foreachDetail).toBeDefined();
-  expect(foreachDetail!.id).toEqual('steps[0]');
-  expect(foreachDetail!.json.$type).toEqual(ObiTypes.ForeachPageDetail);
-  expect(foreachDetail!.json.listProperty).toEqual(json.listProperty);
+  expect(foreachDetail.id).toEqual('steps[0]');
+  expect(foreachDetail.json.$type).toEqual(ObiTypes.ForeachPageDetail);
+  expect(foreachDetail.json.listProperty).toEqual(json.listProperty);
 
   expect(stepGroup).toBeDefined();
-  expect(stepGroup!.id).toEqual('steps[0].steps');
-  expect(stepGroup!.json.$type).toEqual(ObiTypes.StepGroup);
-  expect(stepGroup!.json.children.length).toEqual(0);
+  expect(stepGroup.id).toEqual('steps[0].steps');
+  expect(stepGroup.json.$type).toEqual(ObiTypes.StepGroup);
+  expect(stepGroup.json.children.length).toEqual(0);
 
   expect(loopBegin).toBeDefined();
-  expect(loopBegin!.id).toEqual('steps[0]');
-  expect(loopBegin!.json.$type).toEqual(ObiTypes.LoopIndicator);
+  expect(loopBegin.id).toEqual('steps[0]');
+  expect(loopBegin.json.$type).toEqual(ObiTypes.LoopIndicator);
 
   expect(loopEnd).toBeDefined();
-  expect(loopEnd!.id).toEqual('steps[0]');
-  expect(loopEnd!.json.$type).toEqual(ObiTypes.LoopIndicator);
+  expect(loopEnd.id).toEqual('steps[0]');
+  expect(loopEnd.json.$type).toEqual(ObiTypes.LoopIndicator);
 });