Improve end2end test.

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

@@ -1,12 +1,12 @@
+/// <reference types="cypress" />
+
+import { css } from 'cypress/types/jquery';
+
 describe('Relationship Topics', () => {
   beforeEach(() => {
     // Remove storage for autosave ...
     cy.visit('/editor.html');
-    cy.clearLocalStorage('welcome-xml');
-    cy.reload();
-
-    // Wait for load complate ...
-    cy.get('[aria-label="vortex-loading"]').should('not.exist');
+    cy.waitEditorLoaded();
   });
 
   it('Add Relationship', () => {

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

@@ -1,3 +1,4 @@
+/// <reference types="cypress" />
 describe('Render all sample maps', () => {
   [
     'complex',
@@ -22,7 +23,7 @@ describe('Render all sample maps', () => {
   ].forEach((mapId) => {
     it(`Render map => ${mapId}`, () => {
       cy.visit(`/viewmode.html?id=${mapId}`);
-      cy.reload();
+      cy.waitEditorLoaded();
 
       cy.get('svg > path').should('be.visible');
       cy.get('[aria-label="vortex-loading"]', { timeout: 120000 }).should('not.exist');

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

@@ -1,19 +1,22 @@
+/// <reference types="cypress" />
 describe('Edit Topic', () => {
   beforeEach(() => {
     // Remove storage for autosave ...
     cy.visit('/editor.html');
-    cy.clearLocalStorage('welcome-xml');
-    cy.reload();
-
-    // Wait for load complate ...
-    cy.get('[aria-label="vortex-loading"]').should('not.exist');
+    cy.waitEditorLoaded();
     cy.get('[test-id=1]').click();
   });
 
+  it('Open Font Shape Panel', () => {
+    cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
+    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.contains('Mind Mapping').click({ force: true });
     cy.matchImageSnapshot('changeMainTopicText');
   });
 
@@ -51,6 +54,7 @@ describe('Edit Topic', () => {
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic');
 
+    cy.contains('Mind Mapping').click({ force: true });
     cy.matchImageSnapshot('changeFontItalic');
   });
 
@@ -60,6 +64,7 @@ describe('Edit Topic', () => {
 
     cy.get('[test-id=1] > text').invoke('attr', 'font-weight').should('eq', 'normal');
 
+    cy.contains('Mind Mapping').click({ force: true });
     cy.matchImageSnapshot('changeFontBold');
   });
 
@@ -70,6 +75,7 @@ describe('Edit Topic', () => {
 
     cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', '#cc0000');
 
+    cy.contains('Mind Mapping').click({ force: true });
     cy.matchImageSnapshot('changeFontColor');
   });
 });

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

@@ -1,9 +1,8 @@
+/// <reference types="cypress" />
 describe('Node manager', () => {
   beforeEach(() => {
     cy.visit('/editor.html');
-
-    // Wait for load complate ...
-    cy.get('[aria-label="vortex-loading"]').should('not.exist');
+    cy.waitEditorLoaded();
 
     // Select root node ...
     cy.contains('Mind Mapping').click({ force: true });

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

@@ -1,9 +1,9 @@
+/// <reference types="cypress" />
 describe('Change topic position', () => {
   beforeEach(() => {
     // Remove storage for autosave ...
     cy.visit('/editor.html');
-    cy.clearLocalStorage('welcome-xml');
-    cy.reload();
+    cy.waitEditorLoaded();
 
     // Wait for load complate ...
     cy.get('[aria-label="vortex-loading"]').should('not.exist');

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

@@ -1,10 +1,20 @@
+/// <reference types="cypress" />
 describe('Change Topic shape', () => {
   beforeEach(() => {
     cy.visit('/editor.html');
-    cy.reload();
+
+    // Wait all has been loaded ...
+    cy.waitEditorLoaded();
+
+    // Select one node ...
     cy.contains('Try it Now!').click();
   });
 
+  it('open shape', () => {
+    cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
+    cy.matchImageSnapshot('topicShapePanel');
+  });
+
   it('change to square shape', () => {
     cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
     cy.get(`[aria-label="Rectangle shape"]`).first().click();
@@ -16,6 +26,7 @@ describe('Change Topic shape', () => {
       .should('be.a', 'number')
       .should('eq', 0);
 
+    cy.contains('Mind Mapping').click({ force: true });
     cy.matchImageSnapshot('changeToSquareShape');
   });
 
@@ -39,6 +50,7 @@ describe('Change Topic shape', () => {
       .should('be.a', 'number')
       .should('be.lt', 5);
 
+    cy.contains('Mind Mapping').click({ force: true });
     cy.matchImageSnapshot('changeToRoundedRectangle');
   });
 
@@ -48,6 +60,7 @@ describe('Change Topic shape', () => {
     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.matchImageSnapshot('changeToLine');
   });
 
@@ -71,6 +84,7 @@ describe('Change Topic shape', () => {
       .should('be.a', 'number')
       .should('be.lt', 15);
 
+    cy.contains('Mind Mapping').click({ force: true });
     cy.matchImageSnapshot('changeToEllipseShape');
   });
 });

packages/editor/cypress/support/e2e.js

@@ -1,13 +0,0 @@
-import './commands';
-
-Cypress.on('window:before:load', (win) => {
-  cy.spy(win.console, 'error');
-  cy.spy(win.console, 'warn');
-});
-
-// afterEach(() => {
-//   cy.window().then((win) => {
-//     expect(win.console.error).to.have.callCount(0);
-//     expect(win.console.warn).to.have.callCount(0);
-//   });
-// });

packages/editor/cypress/support/e2e.ts

@@ -0,0 +1,28 @@
+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(() => {
+//   cy.window().then((win) => {
+//     expect(win.console.error).to.have.callCount(0);
+//     expect(win.console.warn).to.have.callCount(0);
+//   });
+// });

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

@@ -1,7 +1,7 @@
 describe('Editor Page', () => {
   beforeEach(() => {
     cy.visit('/c/maps/11/edit');
-    cy.get('[aria-label="vortex-loading"]', { timeout: 120000 }).should('not.exist');
+    cy.waitForEditorLoaded();
   });
 
   it('page loaded', () => {

packages/webapp/cypress/e2e/forgot-password.ts

@@ -1,6 +1,7 @@
 describe('Forgot Password Page', () => {
   beforeEach(() => {
     cy.visit('/c/forgot-password');
+    cy.waitForPageLoaded();
   });
 
   it('page loaded', () => {

packages/webapp/cypress/e2e/login.cy.ts

@@ -1,6 +1,7 @@
 describe('Login Page', () => {
   beforeEach(() => {
     cy.visit('/c/login');
+    cy.waitForPageLoaded();
   });
 
   it('page loaded', () => {

packages/webapp/cypress/e2e/maps.cy.ts

@@ -1,6 +1,7 @@
 describe('Maps Page', () => {
   beforeEach(() => {
     cy.visit('/c/maps');
+    cy.waitForPageLoaded();
     cy.get('.MuiCard-root').should('have.length', 3);
   });
 

packages/webapp/cypress/e2e/registration.cy.ts

@@ -1,6 +1,7 @@
 describe('Registration Page', () => {
   beforeEach(() => {
     cy.visit('/c/registration');
+    cy.waitForPageLoaded();
   });
 
   it('registation load', () => {

packages/webapp/cypress/support/e2e.ts

@@ -1,5 +1,20 @@
 import './commands';
 
+Cypress.Commands.add('waitForEditorLoaded', () => {
+  // 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('waitForPageLoaded', () => {
+  // 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');

packages/webapp/package.json

@@ -8,6 +8,7 @@
         "dev": "webpack --config webpack.dev.js",
         "lint": "eslint src --ext js,ts,tsx",
         "cy:run": "cypress run",
+        "cy:open": "cypress open",
         "test:integration": "start-server-and-test start http-get://localhost:3000 cy:run",
         "i18n:extract": "formatjs extract 'src/**/*.ts*' --ignore 'src/@types/**/*' --out-file lang/en.json",
         "i18n:compile": "for lang in {'es','en','fr','de','zh','ru'};do formatjs compile lang/${lang}.json --ast --out-file src/compiled-lang/${lang}.json;done",