Add icon to topic.

packages/editor/cypress/e2e/relationship.cy.ts

@@ -1,7 +1,5 @@
 /// <reference types="cypress" />
 
-import { css } from 'cypress/types/jquery';
-
 describe('Relationship Topics', () => {
   beforeEach(() => {
     // Remove storage for autosave ...
@@ -11,9 +9,10 @@ describe('Relationship Topics', () => {
 
   it('Add Relationship', () => {
     // Create new relationship ...
-    cy.contains('Features').click({ force: true });
+    cy.focusTopicByText('Features');
-    cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true });
+    cy.onClickToolbarButton('Add Relationship');
-    cy.onFocusTopicByText('Try it Now!');
+
+    cy.focusTopicByText('Try it Now!');
 
     cy.get('[test-id="11-15-relationship"]').as('rel');
     cy.get('@rel').click({ force: true });
@@ -28,9 +27,9 @@ describe('Relationship Topics', () => {
 
   it('Delete Relationship', () => {
     // Add new relationship ...
-    cy.contains('Features').first().click({ force: true });
+    cy.focusTopicByText('Features');
-    cy.get(`[aria-label="Add Relationship"]`).first().click();
+    cy.onClickToolbarButton('Add Relationship');
-    cy.contains('Try it Now!').first().click();
+    cy.focusTopicByText('Try it Now!');
 
     // Delete it ...
     cy.get('[test-id="11-15-relationship"]').as('rel');
@@ -43,15 +42,15 @@ describe('Relationship Topics', () => {
     cy.matchImageSnapshot('delete relationship');
 
     // Undo relationship ...
-    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.triggerUndo();
     cy.get('@rel').should('exist');
   });
 
   it('Change Control Point', () => {
     // Create new relationship ...
-    cy.onFocusTopicByText('Features');
+    cy.focusTopicByText('Features');
-    cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true });
+    cy.onClickToolbarButton('Add Relationship');
-    cy.contains('Try it Now!').click();
+    cy.focusTopicByText('Try it Now!');
 
     // Select relationship ...
     cy.get('[test-id="11-15-relationship"]').as('rel');
@@ -71,8 +70,8 @@ describe('Relationship Topics', () => {
     cy.matchImageSnapshot('move ctl pont 1');
 
     // Test undo and redo ...
-    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.triggerUndo();
-    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.triggerUndo();
     cy.get('@rel').should('exist');
     cy.matchImageSnapshot('rel ctl undo');
   });

packages/editor/cypress/e2e/topicCopyAndPaste.cy.ts

@@ -1,10 +1,10 @@
 /// <reference types="cypress" />
-describe('Edit Topic', () => {
+describe('Topic Copy and Paste Suite', () => {
   beforeEach(() => {
     // Remove storage for autosave ...
     cy.visit('/editor.html');
     cy.waitEditorLoaded();
-    cy.onFocusTopicById(2);
+    cy.focusTopicById(2);
   });
 
   it('Copy and Paste', () => {

packages/editor/cypress/e2e/topicDragAndDrop.cy.ts

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('Change topic position', () => {
+describe('Topic Drag and Drop', () => {
   beforeEach(() => {
     // Remove storage for autosave ...
     cy.visit('/editor.html');

packages/editor/cypress/e2e/topicFontChange.cy.ts

@@ -1,27 +1,29 @@
 /// <reference types="cypress" />
-describe('Edit Topic', () => {
+describe('Topic Font Suite', () => {
   beforeEach(() => {
     // Remove storage for autosave ...
     cy.visit('/editor.html');
     cy.waitEditorLoaded();
-    cy.get('[test-id=1]').click();
+
+    cy.focusTopicById(1);
   });
 
   it('Open Font Shape Panel', () => {
-    cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
+    cy.onMouseOverToolbarButton('Font Style');
     cy.matchImageSnapshot('fontShapePanel');
   });
 
   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.onFocusTopicByText('Mind Mapping');
+    cy.focusTopicByText('Mind Mapping');
     cy.matchImageSnapshot('changeMainTopicText');
   });
 
   it('Change Font Size', () => {
     // Go to the minimal size.
-    cy.get('[aria-label="Font Style"]').first().trigger('mouseover');
+    cy.onMouseOverToolbarButton('Font Style');
+
     cy.get('[aria-label="Smaller"]').as('smaller');
     cy.get('@smaller').eq(1).click();
     cy.get('@smaller').eq(1).click();
@@ -48,7 +50,7 @@ describe('Edit Topic', () => {
   });
 
   it('Change Font To Italic', () => {
-    cy.get('[aria-label="Font Style"]').first().trigger('mouseover');
+    cy.onMouseOverToolbarButton('Font Style');
     cy.get('[aria-label^="Italic ').first().click();
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic');
@@ -58,7 +60,7 @@ describe('Edit Topic', () => {
   });
 
   it('Change Font to Bold', () => {
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.onMouseOverToolbarButton('Font Style');
     cy.get('[aria-label^="Bold ').first().click();
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-weight').should('eq', 'normal');
@@ -68,13 +70,13 @@ describe('Edit Topic', () => {
   });
 
   it('Change Font Color', () => {
-    cy.get('[aria-label="Font Style"]').eq(1).trigger('mouseover');
+    cy.onMouseOverToolbarButton('Font Style');
     cy.get('[aria-label="Color"]').eq(1).click();
     cy.get('[title="#cc0000"]').click({ force: true });
 
     cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', '#cc0000');
 
-    cy.onFocusTopicByText('Mind Mapping');
+    cy.focusTopicByText('Mind Mapping');
     cy.matchImageSnapshot('changeFontColor');
   });
 });

packages/editor/cypress/e2e/topicIcon.cy.ts

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+describe('Topic Icon Suite', () => {
+  beforeEach(() => {
+    cy.visit('/editor.html');
+    cy.waitEditorLoaded();
+  });
+
+  it('Open panel', () => {
+    cy.onClickToolbarButton('Add Icon');
+    cy.matchImageSnapshot('icons-pannel');
+  });
+
+  it('Add new icon', () => {
+    cy.focusTopicById(3);
+    cy.onClickToolbarButton('Add Icon');
+
+    cy.get('[aria-label="grinning"]').click();
+    cy.matchImageSnapshot('add-new-icon');
+  });
+});

packages/editor/cypress/e2e/topicManager.cy.ts

@@ -5,7 +5,7 @@ describe('Node manager', () => {
     cy.waitEditorLoaded();
 
     // Select root node ...
-    cy.onFocusTopicByText('Mind Mapping');
+    cy.focusTopicByText('Mind Mapping');
   });
 
   it('shortcut add sibling node', () => {
@@ -18,15 +18,15 @@ describe('Node manager', () => {
     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.focusTopicById(36);
-    cy.get('[test-id=37] > text > tspan').should('exist');
+    cy.focusTopicById(37);
 
     cy.matchImageSnapshot('addChildNodeSortcut');
   });
 
   it('Delete topic', () => {
     cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}');
-    cy.onFocusTopicById(36);
+    cy.focusTopicById(36);
     cy.get('body').type('{del}');
 
     cy.get('[test-id=37]').should('not.exist');
@@ -36,19 +36,19 @@ describe('Node manager', () => {
 
   it('undo changes', () => {
     cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}');
-    cy.get('[data-testid="UndoOutlinedIcon"]').click();
+    cy.triggerUndo();
-    cy.get('[test-id=36] > text > tspan').should('exist');
+    cy.focusTopicById(36);
 
     cy.matchImageSnapshot('undoChange');
   });
 
   it('redo changes', () => {
     cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}');
-    cy.get('[data-testid="UndoOutlinedIcon"]').click();
+    cy.triggerUndo();
-    cy.get('[test-id=36] > text > tspan').should('exist');
+    cy.focusTopicById(36);
 
-    cy.get('[data-testid="RedoOutlinedIcon"]').click();
+    cy.triggerRedo();
-    cy.get('[test-id=36] > text > tspan').should('exist');
+    cy.focusTopicById(36);
 
     cy.matchImageSnapshot('redoChange');
   });

packages/editor/cypress/e2e/topicShape.cy.ts

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-describe('Change Topic shape', () => {
+describe('Topic Shape Suite', () => {
   beforeEach(() => {
     cy.visit('/editor.html');
 
@@ -7,16 +7,16 @@ describe('Change Topic shape', () => {
     cy.waitEditorLoaded();
 
     // Select one node ...
-    cy.contains('Try it Now!').click();
+    cy.focusTopicByText('Try it Now!');
   });
 
   it('open shape', () => {
-    cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
+    cy.onMouseOverToolbarButton('Topic Style');
     cy.matchImageSnapshot('topicShapePanel');
   });
 
   it('change to square shape', () => {
-    cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
+    cy.onMouseOverToolbarButton('Topic Style');
     cy.get(`[aria-label="Rectangle shape"]`).first().click();
 
     cy.get('[test-id=11] > rect')
@@ -26,14 +26,14 @@ describe('Change Topic shape', () => {
       .should('be.a', 'number')
       .should('eq', 0);
 
-    cy.contains('Mind Mapping').click({ force: true });
+    cy.focusTopicByText('Mind Mapping');
     cy.matchImageSnapshot('changeToSquareShape');
   });
 
   it('change to rounded rectangle', () => {
-    cy.contains('Mind Mapping').click();
+    cy.focusTopicByText('Mind Mapping');
 
-    cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
+    cy.onMouseOverToolbarButton('Topic Style');
     cy.get(`[aria-label="Rounded shape"]`).first().click();
 
     // Todo: Check how to validate this. Difference when it run in docker vs test:integration
@@ -50,24 +50,22 @@ describe('Change Topic shape', () => {
       .should('be.a', 'number')
       .should('be.lt', 5);
 
-    cy.contains('Mind Mapping').click({ force: true });
+    cy.focusTopicByText('Mind Mapping');
     cy.matchImageSnapshot('changeToRoundedRectangle');
   });
 
   it('change to line', () => {
-    cy.contains('Try it Now!').click();
+    cy.onMouseOverToolbarButton('Topic Style');
-
-    cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
     cy.get(`[aria-label="Line shape"]`).first().click();
 
-    cy.contains('Mind Mapping').click({ force: true });
+    cy.focusTopicByText('Mind Mapping');
     cy.matchImageSnapshot('changeToLine');
   });
 
   it('change to ellipse shape', () => {
-    cy.contains('Productivity').click();
+    cy.focusTopicByText('Productivity');
+    cy.onMouseOverToolbarButton('Topic Style');
 
-    cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
     cy.get(`[aria-label="Ellipse shape"]`).first().click();
 
     // Todo: Check how to validate this. Difference when it run in docker vs test:integration
@@ -84,7 +82,7 @@ describe('Change Topic shape', () => {
       .should('be.a', 'number')
       .should('be.lt', 15);
 
-    cy.contains('Mind Mapping').click({ force: true });
+    cy.focusTopicByText('Mind Mapping');
     cy.matchImageSnapshot('changeToEllipseShape');
   });
 });

packages/editor/cypress/support/commands.ts

@@ -1,7 +1,25 @@
+/* eslint-disable @typescript-eslint/no-namespace */
 /// <reference types="cypress" />
-
 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      waitForLoad(): void;
+      waitEditorLoaded(): void;
+      imageSnaphots(): void;
+
+      focusTopicByText(value: string): void;
+      focusTopicById(id: number): void;
+
+      onMouseOverToolbarButton(value: 'Topic Style' | 'Font Style'): void;
+      onClickToolbarButton(value: 'Add Relationship' | 'Add Icon'): void;
+
+      triggerUndo(): void;
+      triggerRedo(): void;
+    }
+  }
+}
 // make matchImageSnapshot() call the real implementation only if CYPRESS_imageSnaphots is set
 // otherwise it calls a noop
 if (Cypress.env('imageSnaphots')) {
@@ -34,10 +52,26 @@ Cypress.Commands.add('waitForLoad', () => {
 });
 
 // Mindmap commands ...
-Cypress.Commands.add('onFocusTopicById', (id: number) => {
+Cypress.Commands.add('focusTopicById', (id: number) => {
   cy.get(`[test-id=${id}]`).click();
 });
 
-Cypress.Commands.add('onFocusTopicByText', (text: string) => {
+Cypress.Commands.add('focusTopicByText', (text: string) => {
   cy.contains(text).click({ force: true });
 });
+
+Cypress.Commands.add('onMouseOverToolbarButton', (button: 'Topic Style' | 'Font Style') => {
+  cy.get(`[aria-label="${button}"]`).first().trigger('mouseover');
+});
+
+Cypress.Commands.add('onClickToolbarButton', (button: 'Add Relationship' | 'Add Icon') => {
+  cy.get(`[aria-label="${button}"]`).click({ multiple: true, force: true });
+});
+
+Cypress.Commands.add('triggerUndo', () => {
+  cy.get('[aria-label^="Undo ').eq(1).click();
+});
+
+Cypress.Commands.add('triggerRedo', () => {
+  cy.get('[aria-label^="Redo ').eq(1).click();
+});