Added test-id to relationship and checkpoint components and also added editor tests

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,74 @@
+context('Edit Topic', () => {
+  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('#small').click();
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.0625');
+
+    cy.matchImageSnapshot('changeFontSizeSmall');
+
+    cy.get('#fontSizeTip').click();
+    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
+    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();
+    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
+    cy.get('#large').click({ force: true });
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4375');
+
+    cy.matchImageSnapshot('changeFontSizeNormal');
+
+    cy.get('#fontSizeTip').click();
+    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
+    cy.get('#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();
+    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
+    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();
+    // TODO: The parameter {force: true} was placed because it does not detect that the element is visible
+    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,51 @@
+context('Node manager', () => {
+  before(() => {
+    cy.visit('/editor.html');
+  });
+
+  it('shortcut add sibling node', () => {
+    // TODO: why is the editor appearing twice in the snapshot?
+    // cy.matchImageSnapshot('editor');
+    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,50 @@
+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').each((element, index, $list) => {
+      cy.get($list[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').each((element, index, $list) => {
+      cy.get($list[1]).invoke('attr', 'rx').should('eq', '4.6499999999999995');
+    });
+
+    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').each((element, index, $list) => {
+      cy.get($list[1]).invoke('attr', 'rx').should('eq', '13.950000000000001');
+    });
+
+    cy.matchImageSnapshot('changeToElipseShape');
+  });
+});

packages/editor/test/playground/map-render/samples/welcome.wxml

@@ -67,4 +67,4 @@ Sibling]]></text>
         </topic>
     </topic>
     <relationship srcTopicId="30" destTopicId="11" lineType="3" srcCtrlPoint="-80,-56" destCtrlPoint="110,-116" endArrow="false" startArrow="true"/>
-</map>
+</map>

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,22 +34,18 @@ 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;
 
 class Topic extends NodeGraph {
   /**
-   * @extends mindplot.NodeGraph
+     * @extends mindplot.NodeGraph
-   * @constructs
+     * @constructs
-   * @param model
+     * @param model
-   * @param options
+     * @param options
-   */
+     */
   constructor(model, options) {
     super(model, options);
     this._children = [];
@@ -92,9 +81,9 @@ class Topic extends NodeGraph {
   }
 
   /**
-   * @param {String} type the topic shape type
+     * @param {String} type the topic shape type
-   * @see {@link mindplot.model.INodeModel}
+     * @see {@link mindplot.model.INodeModel}
-   */
+     */
   setShapeType(type) {
     this._setShapeType(type, true);
   }
@@ -331,10 +320,10 @@ class Topic extends NodeGraph {
   }
 
   /**
-   * assigns the new feature model to the topic's node model and adds the respective icon
+     * assigns the new feature model to the topic's node model and adds the respective icon
-   * @param {mindplot.model.FeatureModel} featureModel
+     * @param {mindplot.model.FeatureModel} featureModel
-   * @return {mindplot.Icon} the icon corresponding to the feature model
+     * @return {mindplot.Icon} the icon corresponding to the feature model
-   */
+     */
   addFeature(featureModel) {
     const iconGroup = this.getOrBuildIconGroup();
     this.closeEditors();
@@ -648,6 +637,9 @@ class Topic extends NodeGraph {
 
     // Register listeners ...
     this._registerDefaultListenersToElement(group, this);
+
+    // Set test id
+    group.setTestId(model.getId());
   }
 
   _registerDefaultListenersToElement(elem, topic) {
@@ -852,8 +844,8 @@ class Topic extends NodeGraph {
   }
 
   /**
-   * Point: references the center of the rect shape.!!!
+     * Point: references the center of the rect shape.!!!
-   */
+     */
   setPosition(point) {
     $assert(point, 'position can not be null');
     // allowed param reassign to avoid risks of existing code relying in this side-effect
@@ -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());
   }
 
   /** */
@@ -986,8 +979,8 @@ class Topic extends NodeGraph {
       const sourceParent = sourceTopic.getModel().getParent();
       relationship.setVisibility(
         value
-        && (targetParent == null || !targetParent.areChildrenShrunken())
+                    && (targetParent == null || !targetParent.areChildrenShrunken())
-        && (sourceParent == null || !sourceParent.areChildrenShrunken()),
+                    && (sourceParent == null || !sourceParent.areChildrenShrunken()),
       );
     });
   }
@@ -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);
 
@@ -1329,9 +1321,9 @@ class Topic extends NodeGraph {
   }
 
   /**
-   * @param childTopic
+     * @param childTopic
-   * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
+     * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
-   */
+     */
   isChildTopic(childTopic) {
     let result = this.getId() === childTopic.getId();
     if (!result) {

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

@@ -61,7 +61,7 @@ class XMLSerializerPela implements XMLMindmapSerializer {
     relationships.forEach((relationship) => {
       if (
         mindmap.findNodeById(relationship.getFromNode()) !== null
-        && mindmap.findNodeById(relationship.getToNode()) !== null
+                && mindmap.findNodeById(relationship.getToNode()) !== null
       ) {
         // Isolated relationships are not persisted ....
         const relationDom = XMLSerializerPela._relationshipToXML(document, relationship);
@@ -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()}`,
         );
       }
     }
@@ -132,10 +133,10 @@ class XMLSerializerPela implements XMLMindmapSerializer {
 
     if (
       $defined(fontFamily)
-      || $defined(fontSize)
+            || $defined(fontSize)
-      || $defined(fontColor)
+            || $defined(fontColor)
-      || $defined(fontWeight)
+            || $defined(fontWeight)
-      || $defined(fontStyle)
+            || $defined(fontStyle)
     ) {
       parentTopic.setAttribute('fontStyle', font);
     }
@@ -226,13 +227,13 @@ class XMLSerializerPela implements XMLMindmapSerializer {
   }
 
   /**
-   * @param dom
+     * @param dom
-   * @param mapId
+     * @param mapId
-   * @throws will throw an error if dom is null or undefined
+     * @throws will throw an error if dom is null or undefined
-   * @throws will throw an error if mapId is null or undefined
+     * @throws will throw an error if mapId is null or undefined
-   * @throws will throw an error if the document element is not consistent with a wisemap's root
+     * @throws will throw an error if the document element is not consistent with a wisemap's root
-   * element
+     * element
-   */
+     */
   loadFromDom(dom: Document, mapId: string) {
     $assert(dom, 'dom can not be null');
     $assert(mapId, 'mapId can not be null');
@@ -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;
@@ -480,16 +483,16 @@ class XMLSerializerPela implements XMLMindmapSerializer {
   }
 
   /**
-       * This method ensures that the output String has only
+     * This method ensures that the output String has only
-       * valid XML unicode characters as specified by the
+     * valid XML unicode characters as specified by the
-       * XML 1.0 standard. For reference, please see
+     * XML 1.0 standard. For reference, please see
-       * <a href="http://www.w3.org/TR/2000/REC-xml-20001006#NT-Char">the
+     * <a href="http://www.w3.org/TR/2000/REC-xml-20001006#NT-Char">the
-       * standard</a>. This method will return an empty
+     * standard</a>. This method will return an empty
-       * String if the input is null or empty.
+     * String if the input is null or empty.
-       *
+     *
-       * @param in The String whose non-valid characters we want to remove.
+     * @param in The String whose non-valid characters we want to remove.
-       * @return The in String, stripped of non-valid characters.
+     * @return The in String, stripped of non-valid characters.
-       */
+     */
   // eslint-disable-next-line class-methods-use-this
   rmXmlInv(str) {
     if (str == null || str === undefined) return null;
@@ -499,11 +502,11 @@ class XMLSerializerPela implements XMLMindmapSerializer {
       const c = str.charCodeAt(i);
       if (
         c === 0x9
-        || c === 0xa
+                || c === 0xa
-        || c === 0xd
+                || c === 0xd
-        || (c >= 0x20 && c <= 0xd7ff)
+                || (c >= 0x20 && c <= 0xd7ff)
-        || (c >= 0xe000 && c <= 0xfffd)
+                || (c >= 0xe000 && c <= 0xfffd)
-        || (c >= 0x10000 && c <= 0x10ffff)
+                || (c >= 0x10000 && c <= 0x10ffff)
       ) {
         result += str.charAt(i);
       }

packages/web2d/src/components/ElementClass.js

@@ -117,9 +117,9 @@ class ElementClass {
   }
 
   /**
-   * /*
+     * /*
-   * Returns element type name.
+     * Returns element type name.
-   */
+     */
   // eslint-disable-next-line class-methods-use-this
   getType() {
     throw new Error(
@@ -161,12 +161,12 @@ class ElementClass {
   setStroke(width, style, color, opacity) {
     if (
       style != null
-      && style !== undefined
+            && style !== undefined
-      && style !== 'dash'
+            && style !== 'dash'
-      && style !== 'dot'
+            && style !== 'dot'
-      && style !== 'solid'
+            && style !== 'solid'
-      && style !== 'longdash'
+            && style !== 'longdash'
-      && style !== 'dashdot'
+            && style !== 'dashdot'
     ) {
       throw new Error(`Unsupported stroke style: '${style}'`);
     }
@@ -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/Group.js

@@ -144,6 +144,12 @@ class Group extends ElementClass {
   setOpacity(value) {
     this.peer.setOpacity(value);
   }
+
+  /*
+  setTestId(testId) {
+    this.peer._native.setAttribute('test-id', testId);
+  }
+  */
 }
 
 export default Group;