Improve end2end code.

packages/editor/cypress.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config);
+      return require('./cypress/plugins/index.ts')(on, config);
     },
     baseUrl: 'http://localhost:8081',
   },

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

@@ -4,7 +4,7 @@ describe('Edit Topic', () => {
     // Remove storage for autosave ...
     cy.visit('/editor.html');
     cy.waitEditorLoaded();
-    cy.get('[test-id=2]').click();
+    cy.onFocusTopicById(2);
   });
 
   it('Copy and Paste', () => {

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

@@ -13,7 +13,7 @@ describe('Relationship Topics', () => {
     // Create new relationship ...
     cy.contains('Features').click({ force: true });
     cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true });
-    cy.contains('Try it Now!').click();
+    cy.onFocusTopicByText('Try it Now!');
 
     cy.get('[test-id="11-15-relationship"]').as('rel');
     cy.get('@rel').click({ force: true });
@@ -49,7 +49,7 @@ describe('Relationship Topics', () => {
 
   it('Change Control Point', () => {
     // Create new relationship ...
-    cy.contains('Features').click({ force: true });
+    cy.onFocusTopicByText('Features');
     cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true });
     cy.contains('Try it Now!').click();
 

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

@@ -15,8 +15,7 @@ describe('Edit Topic', () => {
   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.contains('Mind Mapping').click({ force: true });
     cy.matchImageSnapshot('changeMainTopicText');
   });
 
@@ -75,7 +74,7 @@ describe('Edit Topic', () => {
 
     cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', '#cc0000');
 
-    cy.contains('Mind Mapping').click({ force: true });
+    cy.onFocusTopicByText('Mind Mapping');
     cy.matchImageSnapshot('changeFontColor');
   });
 });

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

@@ -5,7 +5,7 @@ describe('Node manager', () => {
     cy.waitEditorLoaded();
 
     // Select root node ...
-    cy.contains('Mind Mapping').click({ force: true });
+    cy.onFocusTopicByText('Mind Mapping');
   });
 
   it('shortcut add sibling node', () => {
@@ -26,7 +26,7 @@ describe('Node manager', () => {
 
   it('Delete topic', () => {
     cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}');
-    cy.get('[test-id=36]').click();
+    cy.onFocusTopicById(36);
     cy.get('body').type('{del}');
 
     cy.get('[test-id=37]').should('not.exist');

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

@@ -4,9 +4,6 @@ describe('Change topic position', () => {
     // Remove storage for autosave ...
     cy.visit('/editor.html');
     cy.waitEditorLoaded();
-
-    // Wait for load complate ...
-    cy.get('[aria-label="vortex-loading"]').should('not.exist');
   });
 
   it('Move up node "Mind Mapping"', () => {

packages/editor/cypress/plugins/index.ts

@@ -12,7 +12,7 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
 
 /**
  * @type {Cypress.PluginConfig}

packages/editor/cypress/support/commands.ts

@@ -1,3 +1,5 @@
+/// <reference types="cypress" />
+
 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 
 // make matchImageSnapshot() call the real implementation only if CYPRESS_imageSnaphots is set
@@ -17,7 +19,25 @@ if (Cypress.env('imageSnaphots')) {
   );
 }
 
-// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
+Cypress.Commands.add('waitEditorLoaded', () => {
-Cypress.Commands.add('getIframeBody', () =>
+  // Wait editor ...
-  cy.get('iframe').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap),
+  cy.get('svg > path').should('be.visible');
-);
+  cy.get('[aria-label="vortex-loading"]', { timeout: 120000 }).should('not.exist');
+  cy.clearLocalStorage('welcome-xml');
+
+  // Wait for font ...
+  cy.document().its('fonts.status').should('equal', 'loaded');
+});
+
+Cypress.Commands.add('waitForLoad', () => {
+  cy.document().its('fonts.status').should('equal', 'loaded');
+});
+
+// Mindmap commands ...
+Cypress.Commands.add('onFocusTopicById', (id: number) => {
+  cy.get(`[test-id=${id}]`).click();
+});
+
+Cypress.Commands.add('onFocusTopicByText', (text: string) => {
+  cy.contains(text).click({ force: true });
+});

packages/editor/cypress/support/e2e.ts

@@ -1,28 +1,13 @@
 import './commands';
 
-Cypress.Commands.add('waitEditorLoaded', () => {
-  // Wait editor ...
-  cy.get('svg > path').should('be.visible');
-  cy.get('[aria-label="vortex-loading"]', { timeout: 120000 }).should('not.exist');
-  cy.clearLocalStorage('welcome-xml');
-
-  // Wait for font ...
-  cy.document().its('fonts.status').should('equal', 'loaded');
-});
-
-Cypress.Commands.add('waitForLoad', () => {
-  // Wait page be loaded...
-  cy.document().its('fonts.status').should('equal', 'loaded');
-});
-
 Cypress.on('window:before:load', (win) => {
   cy.spy(win.console, 'error');
   cy.spy(win.console, 'warn');
 });
 
-// afterEach(() => {
+afterEach(() => {
-//   cy.window().then((win) => {
+  cy.window().then((win) => {
-//     expect(win.console.error).to.have.callCount(0);
+    expect(win.console.error).to.have.callCount(0);
-//     expect(win.console.warn).to.have.callCount(0);
+    expect(win.console.warn).to.have.callCount(0);
-//   });
+  });
-// });
+});

packages/editor/package.json

@@ -20,6 +20,7 @@
   "devDependencies": {
     "@formatjs/cli": "^5.1.3",
     "@testing-library/react": "^13.4.0",
+    "@types/cypress-image-snapshot": "^3.1.6",
     "@types/jest": "^29.0.0",
     "babel-polyfill": "^6.26.0",
     "copy-webpack-plugin": "^10.2.1",

yarn.lock

@@ -3864,6 +3864,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cypress-image-snapshot@npm:^3.1.6":
+  version: 3.1.6
+  resolution: "@types/cypress-image-snapshot@npm:3.1.6"
+  checksum: cd0128d330233702095dac1d2b4524c8bab9f9bc4070e27942e3e26e7701ec2f1d90faa7901bf335523160e4b9689eff9f6c192f30c0e90b9b846b8dde310ebc
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.3":
   version: 3.7.4
   resolution: "@types/eslint-scope@npm:3.7.4"
@@ -4732,6 +4739,7 @@ __metadata:
   dependencies:
     "@formatjs/cli": ^5.1.3
     "@testing-library/react": ^13.4.0
+    "@types/cypress-image-snapshot": ^3.1.6
     "@types/jest": ^29.0.0
     "@wisemapping/mindplot": ^5.0.15
     babel-polyfill: ^6.26.0