Add automation

.gitignore

@@ -50,3 +50,5 @@ Thumbs.db
 
 **/build/**/*
 .vscode
+
+*/test/playground/dist

bitbucket-pipelines.yml

@@ -17,7 +17,6 @@ pipelines:
             - cypress
           script:
             - export CYPRESS_imageSnaphots="true"
-            - yarn install
             - yarn bootstrap
             - yarn build
             - yarn lint

docker-compose.snapshots.update.yml

@@ -3,7 +3,7 @@ services:
     e2e:
         image: cypress/included:8.4.1
         container_name: wisemapping-integration-tests
-        entrypoint: '/bin/sh -c "yarn bootstrap && yarn test:integration"'
+        entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"'
         working_dir: /e2e
         environment:
             - CYPRESS_imageSnaphots=true

docker-compose.snapshots.yml

@@ -3,7 +3,7 @@ services:
     e2e:
         image: cypress/included:8.4.1
         container_name: wisemapping-integration-tests
-        entrypoint: '/bin/sh -c "yarn bootstrap && yarn test:integration"'
+        entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"'
         working_dir: /e2e
         environment:
             - CYPRESS_imageSnaphots=true

packages/core-js/src/index.js

@@ -16,8 +16,6 @@
  *   limitations under the License.
  */
 
-
-
 /**
  * Cross-browser implementation of creating an XML document object.
  */
@@ -48,7 +46,7 @@ export const createDocument = function () {
  obj - object to inspect
  */
 
- export const $defined = function (obj) {
+export const $defined = function (obj) {
     return obj != undefined;
 };
 

packages/editor/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

packages/editor/cypress/integration/relationship.test.js

@@ -0,0 +1,16 @@
+context('Relationship Topics', () => {
+    beforeEach(() => {
+        cy.visit('/editor.html');
+        cy.reload();
+        cy.get('[test-id="30-11-relationship"]').click({ force: true });
+    });
+
+    it('Change shape relationship', () => {
+        cy.get('[test-id="control-56"]').trigger('mousedown', { force: true });
+        cy.get('body').trigger('mousemove', { clientX: 500, clientY: 200 });
+        cy.get('body').trigger('mouseup');
+        cy.matchImageSnapshot('changeShapeRealtionship');
+
+        cy.get('[test-id="control-56"]').invoke('attr', 'cy').should('eq', '-131.75');
+    });
+});

packages/editor/cypress/integration/topicFontChange.test.js

@@ -0,0 +1,67 @@
+context('Edit Topic', () => {
+  // TODO: review why click({force: true}) is needed in these tests
+  // also, why is the element outside the viewport in screenshots?
+  beforeEach(() => {
+    cy.visit('/editor.html');
+    cy.reload();
+    cy.get('[test-id=1]').click();
+  });
+
+  it('Change Main Topic Text', () => {
+    cy.get('body').type('New Title Main Topic{enter}');
+    cy.get('[test-id=1] > text > tspan').should('have.text', 'New Title Main Topic');
+    cy.matchImageSnapshot('changeMainTopicText');
+  });
+
+  it('Change Font Size', () => {
+    cy.get('#fontSizeTip').click();
+    cy.get('.popover #small').click();
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.0625');
+    cy.matchImageSnapshot('changeFontSizeSmall');
+
+    cy.get('#fontSizeTip').click();
+    cy.get('.popover #normal').click({ force: true });
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '10.75');
+    cy.matchImageSnapshot('changeFontSizeNormal');
+
+    cy.get('#fontSizeTip').click();
+    cy.get('.popover #large').click({ force: true });
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4375');
+    cy.matchImageSnapshot('changeFontSizeLarge');
+
+    cy.get('#fontSizeTip').click();
+    cy.get('.popover #huge').click({ force: true });
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.15625');
+    cy.matchImageSnapshot('changeFontSizeHuge');
+  });
+
+  it('Change Font type', () => {
+    cy.get('#fontFamilyTip').click();
+    cy.get('[model="Times"]').click({ force: true });
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-family').should('eq', 'Times');
+
+    cy.matchImageSnapshot('changeFontType');
+  });
+
+  it('Change Font Italic', () => {
+    cy.get('#fontItalicTip').click();
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic');
+
+    cy.matchImageSnapshot('changeFontItalic');
+  });
+
+  it('Change Font color', () => {
+    cy.get('#fontColorTip').click();
+    cy.get('[title="RGB (153, 0, 255)"]').click({ force: true });
+
+    cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', 'rgb(153, 0, 255)');
+
+    cy.matchImageSnapshot('changeFontColor');
+  });
+});

packages/editor/cypress/integration/topicManager.test.js

@@ -0,0 +1,49 @@
+context('Node manager', () => {
+  before(() => {
+    cy.visit('/editor.html');
+  });
+
+  it('shortcut add sibling node', () => {
+    cy.contains('Mind Mapping').click();
+    cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}');
+
+    cy.get('[test-id=36] > text > tspan').should('exist');
+
+    cy.matchImageSnapshot('editor-shortcut-edit');
+  });
+
+  it('shortcut add child node', () => {
+    cy.contains('Mind Mapping rocks!!').click();
+    cy.get('body').type('{insert}').type('Child 1 mind Mapping rocks!!').type('{enter}');
+    cy.get('body').type('{enter}').type('Child 2 mind Mapping rocks!!').type('{enter}');
+
+    cy.get('[test-id=36] > text > tspan').should('exist');
+    cy.get('[test-id=37] > text > tspan').should('exist');
+
+    cy.matchImageSnapshot('addChildNodeSortcut');
+  });
+
+  it('Delete topic', () => {
+    cy.get('[test-id=37]').click();
+    cy.get('body').type('{del}');
+
+    cy.get('[test-id=37]').should('not.exist');
+
+    cy.matchImageSnapshot('deleteTopicShortcut');
+  });
+
+  it('undo changes', () => {
+    cy.get('#undoEditionTip').click();
+
+    cy.get('[test-id=36] > text > tspan').should('exist');
+
+    cy.matchImageSnapshot('undoChange');
+  });
+
+  it('Save changes', () => {
+    cy.contains('Mind Mapping rocks!!').click();
+    cy.get('body').type('{ctrl}s');
+
+    cy.matchImageSnapshot('saveChagesShortcut');
+  });
+});

packages/editor/cypress/integration/topicPosition.test.js

@@ -0,0 +1,35 @@
+context('Change topic position', () => {
+  beforeEach(() => {
+    cy.visit('/editor.html');
+    cy.reload();
+  });
+
+  it('Move up node "Mind Mapping"', () => {
+    const position = { clientX: 270, clientY: 160 };
+    cy.contains('Mind Mapping').trigger('mousedown');
+    cy.get('body').trigger('mousemove', position);
+    cy.get('body').trigger('mouseup');
+    cy.matchImageSnapshot('moveupNode');
+  });
+
+  it('Move down node "Mind Mapping"', () => {
+    cy.contains('Mind Mapping').trigger('mousedown');
+    cy.get('body').trigger('mousemove', { clientX: 350, clientY: 380 });
+    cy.get('body').trigger('mouseup');
+    cy.matchImageSnapshot('movedownNode');
+  });
+
+  it('Move default position node "Mind Mapping"', () => {
+    cy.contains('Mind Mapping').trigger('mousedown');
+    cy.get('body').trigger('mousemove', { clientX: 270, clientY: 240 });
+    cy.get('body').trigger('mouseup');
+    cy.matchImageSnapshot('moveDefaultPosition');
+  });
+
+  it('Move left node "Mind Mapping"', () => {
+    cy.contains('Mind Mapping').trigger('mousedown');
+    cy.get('body').trigger('mousemove', { clientX: 700, clientY: 240 });
+    cy.get('body').trigger('mouseup');
+    cy.matchImageSnapshot('moveleftNode');
+  });
+});

packages/editor/cypress/integration/topicShape.test.js

@@ -0,0 +1,44 @@
+context('Change Topic shape', () => {
+  beforeEach(() => {
+    cy.visit('/editor.html');
+    cy.reload();
+    cy.contains('Try it Now!').click();
+  });
+
+  it('change to square shape', () => {
+    cy.get('#topicShapeTip').click();
+    cy.get('#rectagle').click();
+
+    cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').should('eq', '0');
+
+    cy.matchImageSnapshot('changeToSquareShape');
+  });
+
+  it('change to rounded rectagle', () => {
+    cy.get('#topicShapeTip').click();
+    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
+    cy.get('#rounded_rectagle').click({ force: true });
+
+    cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').should('eq', '4.05');
+
+    cy.matchImageSnapshot('changeToRoundedRectagle');
+  });
+
+  it('change to line', () => {
+    cy.get('#topicShapeTip').click();
+    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
+    cy.get('#line').click({ force: true });
+
+    cy.matchImageSnapshot('changeToLine');
+  });
+
+  it('change to elipse shape', () => {
+    cy.get('#topicShapeTip').click();
+    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
+    cy.get('#elipse').click({ force: true });
+
+    cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').should('eq', '12.15');
+
+    cy.matchImageSnapshot('changeToElipseShape');
+  });
+});

packages/editor/webpack.playground.js

@@ -8,13 +8,12 @@ const { merge } = require('webpack-merge');
 const playgroundConfig = {
   mode: 'development',
   entry: {
-    "editor.bundle": path.join(__dirname, 'src', 'index.tsx'),
     viewmode: path.resolve(__dirname, './test/playground/map-render/js/viewmode'),
     embedded: path.resolve(__dirname, './test/playground/map-render/js/embedded'),
     editor: path.resolve(__dirname, './test/playground/map-render/js/editor'),
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, 'test/playground/dist'),
     filename: '[name].js',
     library: {
       type: 'umd',
@@ -24,7 +23,6 @@ const playgroundConfig = {
     historyApiFallback: true,
     port: 8081,
     open: false,
-    writeToDisk: true,
   },
   module: {
     rules: [

packages/mindplot/src/components/ControlPoint.js

@@ -23,25 +23,25 @@ import ActionDispatcher from './ActionDispatcher';
 
 class ControlPoint {
   constructor() {
-    const control1 = new Elipse({
+    this.control1 = new Elipse({
       width: 6,
       height: 6,
       stroke: '1 solid #6589de',
       fillColor: 'gray',
       visibility: false,
     });
-    control1.setCursor('pointer');
+    this.control1.setCursor('pointer');
 
-    const control2 = new Elipse({
+    this.control2 = new Elipse({
       width: 6,
       height: 6,
       stroke: '1 solid #6589de',
       fillColor: 'gray',
       visibility: false,
     });
-    control2.setCursor('pointer');
+    this.control2.setCursor('pointer');
 
-    this._controlPointsController = [control1, control2];
+    this._controlPointsController = [this.control1, this.control2];
     this._controlLines = [
       new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }),
       new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }),
@@ -84,6 +84,11 @@ class ControlPoint {
     this._endPoint[1] = { ...this._line.getLine().getTo() };
   }
 
+  setControlPointTestId(ctrlPoint1, ctrlPoint2) {
+    this.control1.setTestId(ctrlPoint1);
+    this.control2.setTestId(ctrlPoint2);
+  }
+
   redraw() {
     if ($defined(this._line)) this._createControlPoint();
   }

packages/mindplot/src/components/Relationship.ts

@@ -56,6 +56,7 @@ class Relationship extends ConnectionLine {
     this._line2d.setCursor('pointer');
     this._line2d.setStroke(1, 'solid', strokeColor);
     this._line2d.setDashed(4, 2);
+    this._line2d.setTestId(`${model.getFromNode()}-${model.getToNode()}-relationship`);
     this._focusShape = this._createLine(this.getLineType(), ConnectionLine.SIMPLE_CURVED);
     this._focusShape.setStroke(2, 'solid', '#3f96ff');
 
@@ -83,6 +84,12 @@ class Relationship extends ConnectionLine {
     if ($defined(model.getSrcCtrlPoint())) {
       const srcPoint = { ...model.getSrcCtrlPoint() };
       this.setSrcControlPoint(srcPoint);
+
+      // Set test id in control point
+      this._controlPointsController.setControlPointTestId(
+        `control-${Math.abs(srcPoint.x)}`,
+        `control-${Math.abs(srcPoint.y)}`,
+      );
     }
     if ($defined(model.getDestCtrlPoint())) {
       const destPoint = { ...model.getDestCtrlPoint() };

packages/mindplot/src/components/RelationshipPivot.ts

@@ -103,9 +103,9 @@ class RelationshipPivot {
       const model = this._designer.getModel();
       const topics = model.getTopics();
 
-      topics.forEach(((topic) => {
+      topics.forEach((topic) => {
         topic.removeEvent('ontfocus', this._onTopicClick);
-      }));
+      });
 
       workspace.removeChild(this._pivot);
       workspace.removeChild(this._startArrow);
@@ -166,9 +166,7 @@ class RelationshipPivot {
     // Avoid circular connections ...
     if (targetTopic.getId() !== sourceTopic.getId()) {
       const relModel = mindmap.createRelationship(targetTopic.getId(), sourceTopic.getId());
-      this._designer
+      this._designer.getActionDispatcher().addRelationship(relModel);
-        .getActionDispatcher()
-        .addRelationship(relModel);
     }
     this.dispose();
   }

packages/mindplot/src/components/Topic.js

@@ -16,16 +16,9 @@
  *   limitations under the License.
  */
 import $ from 'jquery';
+import { $assert, $defined } from '@wisemapping/core-js';
 import {
-  $assert,
+  Rect, Image, Line, Text, Group,
-  $defined,
-} from '@wisemapping/core-js';
-import {
-  Rect,
-  Image,
-  Line,
-  Text,
-  Group,
 } from '@wisemapping/web2d';
 
 import NodeGraph from './NodeGraph';
@@ -41,12 +34,8 @@ import NoteEditor from './widget/NoteEditor';
 import ActionDispatcher from './ActionDispatcher';
 import LinkEditor from './widget/LinkEditor';
 
-import TopicEventDispatcher, {
+import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
-  TopicEvent,
+import { TopicShape } from './model/INodeModel';
-} from './TopicEventDispatcher';
-import {
-  TopicShape,
-} from './model/INodeModel';
 
 const ICON_SCALING_FACTOR = 1.3;
 
@@ -648,6 +637,9 @@ class Topic extends NodeGraph {
 
     // Register listeners ...
     this._registerDefaultListenersToElement(group, this);
+
+    // Set test id
+    group.setTestId(model.getId());
   }
 
   _registerDefaultListenersToElement(elem, topic) {
@@ -890,8 +882,9 @@ class Topic extends NodeGraph {
 
   getIncomingLines() {
     const children = this.getChildren();
-    return children.filter((node) => $defined(node.getOutgoingLine()))
+    return children
-      .map(((node) => node.getOutgoingLine()));
+      .filter((node) => $defined(node.getOutgoingLine()))
+      .map((node) => node.getOutgoingLine());
   }
 
   /** */
@@ -1055,8 +1048,7 @@ class Topic extends NodeGraph {
     };
 
     const oldSize = this.getSize();
-    const hasSizeChanged = oldSize.width !== roundedSize.width
+    const hasSizeChanged = oldSize.width !== roundedSize.width || oldSize.height !== roundedSize.height;
-      || oldSize.height !== roundedSize.height;
     if (hasSizeChanged || force) {
       NodeGraph.prototype.setSize.call(this, roundedSize);
 

packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js

@@ -34,7 +34,9 @@ class BootstrapDialog extends Options {
 
     this.setOptions(options);
     this.options.onEventData.dialog = this;
-    this._native = $('<div class="modal fade" tabindex="-1"></div>').append('<div class="modal-dialog"></div>');
+    this._native = $('<div class="modal fade" tabindex="-1"></div>').append(
+      '<div class="modal-dialog"></div>',
+    );
     const content = $('<div class="modal-content"></div>');
     const header = this._buildHeader(title);
 
@@ -65,17 +67,31 @@ class BootstrapDialog extends Options {
       footer = $('<div class="modal-footer" style="paddingTop:5;textAlign:center">');
     }
     if (this.options.acceptButton) {
-      this.acceptButton = $(`<button type="button" class="btn btn-primary" id="acceptBtn" data-dismiss="modal">${$msg('ACCEPT')}</button>`);
+      this.acceptButton = $(
+        `<button type="button" class="btn btn-primary" id="acceptBtn" data-dismiss="modal">${$msg(
+          'ACCEPT',
+        )}</button>`,
+      );
       footer.append(this.acceptButton);
-      this.acceptButton.unbind('click').on('click', this.options.onEventData, this.onAcceptClick);
+      this.acceptButton
+        .unbind('click')
+        .on('click', this.options.onEventData, this.onAcceptClick);
     }
     if (this.options.removeButton) {
-      this.removeButton = $(`<button type="button" class="btn btn-secondary" id="removeBtn" data-dismiss="modal">${$msg('REMOVE')}</button>`);
+      this.removeButton = $(
+        `<button type="button" class="btn btn-secondary" id="removeBtn" data-dismiss="modal">${$msg(
+          'REMOVE',
+        )}</button>`,
+      );
       footer.append(this.removeButton);
       this.removeButton.on('click', this.options.onEventData, this.onRemoveClick);
     }
     if (this.options.cancelButton) {
-      footer.append(`<button type="button" class="btn btn-secondary" data-dismiss="modal">${$msg('CANCEL')}</button>`);
+      footer.append(
+        `<button type="button" class="btn btn-secondary" data-dismiss="modal">${$msg(
+          'CANCEL',
+        )}</button>`,
+      );
     }
     return footer;
   }

packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js

@@ -49,7 +49,10 @@ class BootstrapDialogRequest extends BootstrapDialog {
 
     this._native.find('.modal-body').load(url, () => {
       me.acceptButton.unbind('click').click(() => {
-        if ($defined(global.submitDialogForm) && typeof (global.submitDialogForm) === 'function') {
+        if (
+          $defined(global.submitDialogForm)
+                    && typeof global.submitDialogForm === 'function'
+        ) {
           global.submitDialogForm();
         }
       });
@@ -61,7 +64,7 @@ class BootstrapDialogRequest extends BootstrapDialog {
   }
 
   onDialogShown() {
-    if ($defined(global.onDialogShown) && typeof (global.onDialogShown) === 'function') {
+    if ($defined(global.onDialogShown) && typeof global.onDialogShown === 'function') {
       global.onDialogShown();
     }
   }

packages/mindplot/src/components/persistence/XMLSerializerPela.ts

@@ -83,7 +83,9 @@ class XMLSerializerPela implements XMLMindmapSerializer {
       parentTopic.setAttribute('position', `${pos.x},${pos.y}`);
 
       const order = topic.getOrder();
-      if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order.toString()); }
+      if (typeof order === 'number' && Number.isFinite(order)) {
+        parentTopic.setAttribute('order', order.toString());
+      }
     }
 
     const text = topic.getText();
@@ -99,8 +101,7 @@ class XMLSerializerPela implements XMLMindmapSerializer {
         const size = topic.getImageSize();
         parentTopic.setAttribute(
           'image',
-          `${size.width},${size.height
+          `${size.width},${size.height}:${topic.getImageUrl()}`,
-          }:${topic.getImageUrl()}`,
         );
       }
     }
@@ -253,7 +254,9 @@ class XMLSerializerPela implements XMLMindmapSerializer {
     // Add all the topics nodes ...
     const childNodes = Array.from(rootElem.childNodes);
     const topicsNodes = childNodes
-      .filter((child: ChildNode) => (child.nodeType === 1 && (child as Element).tagName === 'topic'))
+      .filter(
+        (child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'topic',
+      )
       .map((c) => c as Element);
     topicsNodes.forEach((child) => {
       const topic = this._deserializeNode(child, mindmap);
@@ -262,7 +265,9 @@ class XMLSerializerPela implements XMLMindmapSerializer {
 
     // Then all relationshops, they are connected to topics ...
     const relationshipsNodes = childNodes
-      .filter((child: ChildNode) => (child.nodeType === 1 && (child as Element).tagName === 'relationship'))
+      .filter(
+        (child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'relationship',
+      )
       .map((c) => c as Element);
     relationshipsNodes.forEach((child) => {
       try {
@@ -280,9 +285,7 @@ class XMLSerializerPela implements XMLMindmapSerializer {
   }
 
   _deserializeNode(domElem: Element, mindmap: Mindmap) {
-    const type = domElem.getAttribute('central') != null
+    const type = domElem.getAttribute('central') != null ? 'CentralTopic' : 'MainTopic';
-      ? 'CentralTopic'
-      : 'MainTopic';
 
     // Load attributes...
     let id: number | null = null;

packages/mindplot/src/components/widget/ColorPalettePanel.js

@@ -21,11 +21,11 @@ import ToolbarPaneItem from './ToolbarPaneItem';
 import { buildHtml, css } from './ColorPaletteHtml';
 
 // rgbToHex implementation from https://stackoverflow.com/a/3627747/58128
-export const rgb2hex = (rgb) => `#${
+export const rgb2hex = (rgb) => `#${rgb
-  rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
+  .match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
   .slice(1)
-    .map((n) => parseInt(n, 10)
+  .map((n) => parseInt(n, 10).toString(16).padStart(2, '0'))
-      .toString(16).padStart(2, '0')).join('')}`;
+  .join('')}`;
 
 class ColorPalettePanel extends ToolbarPaneItem {
   constructor(buttonId, model, baseUrl) {
@@ -38,10 +38,7 @@ class ColorPalettePanel extends ToolbarPaneItem {
   _load() {
     if (!ColorPalettePanel._panelContent) {
       // Load all the CSS styles ...
-      $('<style>')
+      $('<style>').append(css).appendTo($('head')).attr({ type: 'text/css' });
-        .append(css)
-        .appendTo($('head'))
-        .attr({ type: 'text/css' });
 
       ColorPalettePanel._panelContent = buildHtml();
     }

packages/mindplot/webpack.common.js

@@ -20,9 +20,7 @@ module.exports = {
       {
         test: /.(js$)/,
         use: ['babel-loader'],
-        exclude: [
+        exclude: [/node_modules/],
-          /node_modules/,
-        ],
         enforce: 'pre',
       },
       {

packages/mindplot/webpack.playground.js

@@ -8,23 +8,25 @@ const common = require('./webpack.common');
 const playgroundConfig = {
   mode: 'development',
   entry: {
-    mindplot: path.resolve(__dirname, './src/index.js'),
     layout: path.resolve(__dirname, './test/playground/layout/context-loader'),
   },
+  output: {
+    path: path.resolve(__dirname, 'test/playground/dist'),
+    filename: '[name].js',
+    library: {
+      type: 'umd',
+    },
+  },
   devServer: {
     historyApiFallback: true,
     port: 8083,
     open: false,
-    writeToDisk: true,
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
-        use: [
+        use: ['style-loader', 'css-loader?url=false'],
-          'style-loader',
-          'css-loader?url=false',
-        ],
       },
     ],
   },

packages/web2d/src/components/ElementClass.js

@@ -288,6 +288,10 @@ class ElementClass {
   getParent() {
     return this.peer.getParent();
   }
+
+  setTestId(testId) {
+    this.peer._native.setAttribute('test-id', testId);
+  }
 }
 
 Element._SIGNATURE_MULTIPLE_ARGUMENTS = -1;

packages/web2d/src/components/peer/svg/WorkspacePeer.js

@@ -51,7 +51,6 @@ class WorkspacePeer extends ElementPeer {
 
   setCoordSize(width, height) {
     const viewBox = this._native.getAttribute('viewBox');
-
     let coords = [0, 0, 0, 0];
     if (viewBox != null) {
       coords = viewBox.split(/ /);

packages/web2d/webpack.playground.js

@@ -20,7 +20,7 @@ module.exports = {
     image: './test/playground/image.js',
   },
   output: {
-    path: path.resolve(__dirname, 'dist', 'tests'),
+    path: path.resolve(__dirname, 'test/playground/dist'),
     filename: '[name].js',
     publicPath: '/',
   },
@@ -36,9 +36,7 @@ module.exports = {
       {
         use: 'babel-loader',
         test: /.js$/,
-        exclude: [
+        exclude: [/node_modules/],
-          /node_modules/,
-        ],
       },
       {
         test: /\.(png|svg)$/i,
@@ -55,107 +53,77 @@ module.exports = {
   plugins: [
     new CleanWebpackPlugin(),
     new CopyPlugin({
-      patterns: [
+      patterns: [{ from: 'test/playground/styles.css', to: 'styles.css' }],
-        { from: 'test/playground/styles.css', to: 'styles.css' },
-      ],
     }),
-    new HtmlWebpackPlugin(
+    new HtmlWebpackPlugin({
-      {
       chunks: ['index'],
       filename: 'index.html',
       template: 'test/playground/index.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['arrow'],
       filename: 'arrow.html',
       template: 'test/playground/arrow.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['curvedLine'],
       filename: 'curvedLine.html',
       template: 'test/playground/curvedLine.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['events'],
       filename: 'events.html',
       template: 'test/playground/events.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['font'],
       filename: 'font.html',
       template: 'test/playground/font.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['rect'],
       filename: 'rect.html',
       template: 'test/playground/rect.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['line'],
       filename: 'line.html',
       template: 'test/playground/line.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['workspace'],
       filename: 'workspace.html',
       template: 'test/playground/workspace.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['polyLine'],
       filename: 'polyLine.html',
       template: 'test/playground/polyLine.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['shapes'],
       filename: 'shapes.html',
       template: 'test/playground/shapes.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['group'],
       filename: 'group.html',
       template: 'test/playground/group.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['prototype'],
       filename: 'prototype.html',
       template: 'test/playground/prototype.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['text'],
       filename: 'text.html',
       template: 'test/playground/text.html',
-      },
+    }),
-    ),
+    new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin(
-      {
       chunks: ['image'],
       filename: 'image.html',
       template: 'test/playground/image.html',
-      },
+    }),
-    ),
   ],
 };

packages/webapp/webpack.common.js

@@ -1,35 +1,36 @@
 /* eslint-disable no-undef */
 const path = require('path');
-const webpack = require('webpack')
+const webpack = require('webpack');
 
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
-webpack
+webpack;
 
 module.exports = {
     entry: {
-        app: path.join(__dirname, 'src', 'index.tsx')
+        app: path.join(__dirname, 'src', 'index.tsx'),
     },
     target: 'web',
     resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx']
+        extensions: ['.ts', '.tsx', '.js', '.jsx'],
     },
     output: {
         filename: '[name].bundle.js',
-        path: path.resolve(__dirname, 'dist')
+        path: path.resolve(__dirname, 'dist'),
     },
     module: {
-        rules: [{
+        rules: [
+            {
                 test: /\.tsx?$/,
                 use: 'ts-loader',
-            exclude: '/node_modules/'
+                exclude: '/node_modules/',
             },
             {
                 test: /\.(png|jpe?g|gif|svg)$/,
                 type: 'asset/inline',
             },
-        ]
+        ],
     },
     optimization: {
         usedExports: true,
@@ -37,23 +38,24 @@ module.exports = {
             cacheGroups: {
                 vendors: {
                     test: /node_modules\/.*/,
-                    name: "vendors",
+                    name: 'vendors',
-                    chunks: "all",
+                    chunks: 'all',
-                }
+                },
+            },
         },
-        }
     },
     plugins: [
         new CleanWebpackPlugin(),
         new CopyWebpackPlugin({
-            patterns: [{
+            patterns: [
+                {
                     from: 'public/*',
                     to: '[name].[ext]',
                     globOptions: {
-                    ignore: [
+                        ignore: ['**/index.html'],
-                        '**/index.html'
+                    },
-                    ]
+                },
-                }
+            ],
-            }]
+        }),
-        })]
+    ],
-}
+};

packages/webapp/webpack.prod.js

@@ -7,15 +7,17 @@ module.exports = merge(common, {
     mode: 'production',
     devtool: 'source-map',
     optimization: {
-    minimize: true
+        minimize: true,
     },
     plugins: [
         new HtmlWebpackPlugin({
             template: path.join(__dirname, 'public/index.html'),
             templateParameters: {
-        PUBLIC_URL: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'https://www.wisemapping.com'
+                PUBLIC_URL: process.env.PUBLIC_URL
+                    ? process.env.PUBLIC_URL
+                    : 'https://www.wisemapping.com',
             },
-      base: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'https://www.wisemapping.com'
+            base: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'https://www.wisemapping.com',
-    })
+        }),
-  ]
+    ],
 });