Add tests.

package.json

@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\"}' mocha -r ts-node/register -r tsconfig-paths/register tests/**/*.ts",
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
@@ -24,7 +25,9 @@
     "vuex": "^4.0.2"
   },
   "devDependencies": {
+    "@types/chai": "^4.3.0",
     "@types/electron-devtools-installer": "^2.2.0",
+    "@types/mocha": "^9.0.0",
     "@types/uuid": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
@@ -35,11 +38,14 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
+    "chai": "^4.3.4",
     "electron": "^16.0.0",
     "electron-devtools-installer": "^3.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0",
+    "mocha": "^9.1.3",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "ts-node": "^10.4.0",
     "typescript": "~4.3",
     "vue-cli-plugin-electron-builder": "~2.1.1"
   }

tests/layout/FlexContainer.ts

@@ -0,0 +1,34 @@
+import { describe } from 'mocha';
+import { expect } from 'chai';
+import { FlexComponent, Frame, Size, SourceComponent } from '@/layout';
+
+describe('FlexContainer', () => {
+  it('should layout vertically', () => {
+    const component = new FlexComponent();
+    component.direction = 'vertical';
+    component.spacing = 10;
+
+    const childA = new SourceComponent();
+    childA.size = new Size(100, 100);
+    component.addChild(childA);
+
+    const childB = new SourceComponent();
+    childB.size = new Size(100, 100);
+    component.addChild(childB);
+
+    const node = component.exerciseLayout(new Size(100, 210));
+    expect(node.frame).to.eql(new Frame(0, 0, 100, 210));
+    expect(node.isContainer).to.equal(true);
+    expect(node.children.length).to.equal(2);
+
+    const aNode = node.children[0];
+    const bNode = node.children[1];
+    expect(aNode.frame).to.eql(new Frame(0, 0, 100, 100));
+    expect(aNode.isContainer).to.equal(false);
+    expect(aNode.children).to.eql([]);
+
+    expect(bNode.frame).to.eql(new Frame(0, 110, 100, 100));
+    expect(bNode.isContainer).to.equal(false);
+    expect(bNode.children).to.eql([]);
+  });
+})

tests/layout/InsetComponent.ts

@@ -0,0 +1,23 @@
+import { describe } from 'mocha';
+import { expect } from 'chai';
+import { Frame, InsetComponent, Size, SourceComponent } from '@/layout';
+import Insets from '@/layout/Insets';
+
+describe('InsetComponent', () => {
+  it('should layout', () => {
+    const component = new InsetComponent()
+    component.insets = new Insets(10, 10, 10, 10);
+
+    component.addChild(new SourceComponent())
+
+    const node = component.exerciseLayout(new Size(1920, 1080));
+    expect(node.frame).to.eql(new Frame(0, 0, 1904.4444444444446, 1080))
+    expect(node.isContainer).to.equal(true);
+    expect(node.children.length).to.equal(1);
+
+    const childNode = node.children[0];
+    expect(childNode.frame).to.eql(new Frame(10, 10, 1884.4444444444446, 1060));
+    expect(childNode.isContainer).to.equal(false);
+    expect(childNode.children).to.eql([]);
+  });
+});

tests/layout/LayoutExerciser.ts

@@ -0,0 +1,68 @@
+import { describe } from 'mocha';
+import { expect } from 'chai';
+import { FlexComponent, Frame, InsetComponent, LayoutExerciser, Size, SourceComponent } from '@/layout';
+import Insets from '@/layout/Insets';
+
+describe('LayoutExerciser', () => {
+  it('should perform layout', () => {
+    const component = new SourceComponent()
+
+    const exerciser = new LayoutExerciser()
+    const node = exerciser.execute(component, new Size(160, 100));
+
+    expect(node.frame).to.eql(new Frame(0, 5, 160, 90));
+    expect(node.isContainer).to.equal(false);
+    expect(node.children).to.eql([]);
+  })
+
+  it('should perform complex layout', () => {
+    const rootComponent = new InsetComponent();
+    rootComponent.insets = new Insets(50, 50, 50, 50);
+
+    const verticalFlexComponent = new FlexComponent();
+    verticalFlexComponent.direction = 'vertical';
+    verticalFlexComponent.spacing = 50;
+    rootComponent.addChild(verticalFlexComponent);
+
+    const horizontalFlexComponent = new FlexComponent();
+    horizontalFlexComponent.direction = 'horizontal';
+    horizontalFlexComponent.spacing = 50;
+    horizontalFlexComponent.addChild(new SourceComponent())
+    horizontalFlexComponent.addChild(new SourceComponent())
+
+    verticalFlexComponent.addChild(horizontalFlexComponent);
+    verticalFlexComponent.addChild(new SourceComponent())
+
+    const exerciser = new LayoutExerciser()
+    const node = exerciser.execute(rootComponent, new Size(1920, 1080));
+
+    expect(node.frame).to.eql(new Frame(0, 0, 1920, 1080));
+    expect(node.isContainer).to.equal(true);
+    expect(node.children.length).to.equal(1);
+
+    const verticalFlexNode = node.children[0];
+    expect(verticalFlexNode.frame).to.eql(new Frame(50, 50, 1820, 980));
+    expect(verticalFlexNode.isContainer).to.equal(true);
+    expect(verticalFlexNode.children.length).to.equal(2);
+
+    const horizontalFlexNode = verticalFlexNode.children[0];
+    expect(horizontalFlexNode.frame).to.eql(new Frame(0, 0, 1820, 465));
+    expect(horizontalFlexNode.isContainer).to.equal(true);
+    expect(horizontalFlexNode.children.length).to.equal(2);
+
+    const bottomSourceNode = verticalFlexNode.children[1];
+    expect(bottomSourceNode.frame).to.eql(new Frame(496.66666666666663, 515, 826.6666666666667, 465));
+    expect(bottomSourceNode.isContainer).to.equal(false);
+    expect(bottomSourceNode.children).to.eql([]);
+
+    const topLeftSourceNode = horizontalFlexNode.children[0];
+    expect(topLeftSourceNode.frame).to.eql(new Frame(58.33333333333326, 0, 826.6666666666667, 465));
+    expect(topLeftSourceNode.isContainer).to.equal(false);
+    expect(topLeftSourceNode.children).to.eql([]);
+
+    const topRightSourceNode = horizontalFlexNode.children[1];
+    expect(topRightSourceNode.frame).to.eql(new Frame(935, 0, 826.6666666666667, 465));
+    expect(topRightSourceNode.isContainer).to.equal(false);
+    expect(topRightSourceNode.children).to.eql([]);
+  });
+});

tests/layout/SourceComponent.ts

@@ -0,0 +1,14 @@
+import { describe } from 'mocha';
+import { expect } from 'chai';
+import { Frame, Size, SourceComponent } from '@/layout';
+
+describe('SourceComponent', () => {
+  it('should layout', () => {
+    const component = new SourceComponent();
+
+    const node = component.exerciseLayout(new Size(1920, 1080));
+    expect(node.frame).to.eql(new Frame(0, 0, 1920, 1080));
+    expect(node.isContainer).to.equal(false);
+    expect(node.children).to.eql([]);
+  })
+});