Add test on push

packages/editor/cypress.config.ts

@@ -2,9 +2,11 @@ import { defineConfig } from 'cypress';
 
 export default defineConfig({
   projectId: 'it9g7s',
-  video: false,
+  video: true,
   videoUploadOnPasses: false,
   includeShadowDom: true,
+  viewportWidth: 1000,
+  viewportHeight: 660,
   e2e: {
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.

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

@@ -1,30 +1,36 @@
 context('Relationship Topics', () => {
   beforeEach(() => {
+    // Remove storage for autosave ...
     cy.visit('/editor.html');
+    cy.clearLocalStorage('welcome-xml');
     cy.reload();
-    cy.get('[test-id="30-11-relationship"]').first().click({ force: true });
+
+    // Wait for load complate ...
+    cy.get('svg > path').should('be.visible');
   });
 
   it('Add Relationship', () => {
-    cy.contains('Features').first().click();
+    cy.contains('Features').click();
     cy.get(`[aria-label="Add Relationship"]`).first().click();
-    cy.contains('Try it Now!').first().click();
+    cy.contains('Try it Now!').click();
 
-    cy.get('[test-id="11-15-relationship"]').first().click({ force: true });
+    cy.get('[test-id="11-15-relationship"]').click();
     cy.get('[test-id="11-15-relationship"]').should('exist');
 
     cy.matchImageSnapshot('addRelationship');
   });
 
-  it.skip('Delete Relationship', () => {
+  it('Delete Relationship', () => {
     cy.contains('Features').first().click();
     cy.get(`[aria-label="Add Relationship"]`).first().click();
     cy.contains('Try it Now!').first().click();
 
+    cy.get('[test-id="11-15-relationship"]').should('exist');
     cy.get('[test-id="11-15-relationship"]').click();
+
     cy.get('body').type('{backspace}');
 
-    // cy.get('[test-id="11-15-relationship"]').should('not.exist');
+    cy.get('[test-id="11-15-relationship"]').should('not.exist');
     cy.matchImageSnapshot('delete relationship');
   });
 });

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

@@ -1,30 +0,0 @@
-context('Render all sample maps', () => {
-  ['complex',
-    'emoji',
-    'emptyNodes',
-    'error-on-load',
-    'huge',
-    'huge2',
-    'icon-sample',
-    'img-support',
-    'order',
-    'rel-error',
-    'sample1',
-    'sample2',
-    'sample3',
-    'sample4',
-    'sample5',
-    'sample6',
-    'sample8',
-    'welcome'].forEach((mapId) => {
-      it(`Render map => ${mapId}`, () => {
-        cy.visit(`/viewmode.html?id=${mapId}`);
-        cy.reload();
-
-
-        cy.get('svg > path').should('be.visible');
-        cy.get('[aria-label="vortex-loading"]', { timeout: 20000 }).should('not.exist');
-        cy.matchImageSnapshot(`map-${mapId}`);
-      });
-    });
-});

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

@@ -0,0 +1,31 @@
+context('Render all sample maps', () => {
+  [
+    'complex',
+    'emoji',
+    'emptyNodes',
+    'error-on-load',
+    'huge',
+    'huge2',
+    'icon-sample',
+    'img-support',
+    'order',
+    'rel-error',
+    'sample1',
+    'sample2',
+    'sample3',
+    'sample4',
+    'sample5',
+    'sample6',
+    'sample8',
+    'welcome',
+  ].forEach((mapId) => {
+    it(`Render map => ${mapId}`, () => {
+      cy.visit(`/viewmode.html?id=${mapId}`);
+      cy.reload();
+
+      cy.get('svg > path').should('be.visible');
+      cy.get('[aria-label="vortex-loading"]', { timeout: 40000 }).should('not.exist');
+      cy.matchImageSnapshot(`map-${mapId}`);
+    });
+  });
+});

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

@@ -1,75 +0,0 @@
-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', () => {
-
-    // Go to the minimal size.
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
-    cy.get(`[aria-label="Smaller"]`).first().click();
-    cy.get(`[aria-label="Smaller"]`).first().click();
-
-
-    // cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.1');
-    cy.matchImageSnapshot('changeFontSizeSmall');
-
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
-    cy.get(`[aria-label="Bigger"]`).first().click();
-    // cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '10.8');
-    cy.matchImageSnapshot('changeFontSizeNormal');
-
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
-    cy.get(`[aria-label="Bigger"]`).first().click();
-    // cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4');
-    cy.matchImageSnapshot('changeFontSizeLarge');
-
-    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
-    cy.get(`[aria-label="Bigger"]`).first().click();
-
-    // cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2');
-    cy.matchImageSnapshot('changeFontSizeHuge');
-
-    // Can not scale it more.
-    cy.get(`[aria-label="Bigger"]`).first().click();
-    // cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2');
-    cy.matchImageSnapshot('changeFontSizeHuge');
-
-  });
-
-  // it('Change Font To Italic', () => {
-  //   cy.get(`[aria-label="Font Style"]`).trigger('mouseover');
-  //   cy.contains(`[data-test-id="FormactItalicIcon"]`).click();
-
-  //   cy.get('[test-id=1] > text').invoke('attr', 'font-family').should('eq', 'Times');
-  //   cy.matchImageSnapshot('changeFontType');
-  // });
-
-  // it('Change Font Italic', () => {
-  //   cy.get(`[aria-label="Font Style"]`).trigger('mouseover');
-  //   cy.contains('[data-testid="FormatItalicIcon"]').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/e2e/topicFontChange.cy.ts

@@ -0,0 +1,74 @@
+context('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.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', () => {
+    // Go to the minimal size.
+    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get(`[aria-label="Smaller"]`).first().click();
+    cy.get(`[aria-label="Smaller"]`).first().click();
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.1');
+    cy.matchImageSnapshot('changeFontSizeSmall');
+
+    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get(`[aria-label="Bigger"]`).first().click();
+    cy.matchImageSnapshot('changeFontSizeNormal');
+
+    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get(`[aria-label="Bigger"]`).first().click();
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4');
+    cy.matchImageSnapshot('changeFontSizeLarge');
+
+    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get(`[aria-label="Bigger"]`).first().click();
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2');
+    cy.matchImageSnapshot('changeFontSizeHuge');
+
+    // Can not scale it more.
+    cy.get(`[aria-label="Bigger"]`).first().click();
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2');
+    cy.matchImageSnapshot('changeFontSizeHuge');
+  });
+
+  it.skip('Change Font To Italic', () => {
+    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get(`[data-test-id="FormatItalicIcon"]`).first().click();
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-family').should('eq', 'Times');
+    cy.matchImageSnapshot('changeFontType');
+  });
+
+  it.skip('Change Font to Bold', () => {
+    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.contains('[data-testid="FormatItalicIcon"]').click();
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic');
+
+    cy.matchImageSnapshot('changeFontItalic');
+  });
+
+  it.skip('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/e2e/topicPosition.cy.ts

@@ -1,7 +1,12 @@
 context('Change topic position', () => {
   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');
   });
 
   it('Move up node "Mind Mapping"', () => {

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

@@ -9,7 +9,12 @@ context('Change Topic shape', () => {
     cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover');
     cy.get(`[aria-label="Rectangle shape"]`).first().click();
 
-    cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('eq', 0);
+    cy.get('[test-id=11] > rect')
+      .eq(1)
+      .invoke('attr', 'rx')
+      .then(parseInt)
+      .should('be.a', 'number')
+      .should('eq', 0);
 
     cy.matchImageSnapshot('changeToSquareShape');
   });
@@ -21,8 +26,18 @@ context('Change Topic shape', () => {
     cy.get(`[aria-label="Rounded shape"]`).first().click();
 
     // Todo: Check how to validate this. Difference when it run in docker vs test:integration
-    cy.get('[test-id=6] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.gte', 4);
-    cy.get('[test-id=6] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.lt', 5);
+    cy.get('[test-id=6] > rect')
+      .eq(1)
+      .invoke('attr', 'rx')
+      .then(parseInt)
+      .should('be.a', 'number')
+      .should('be.gte', 4);
+    cy.get('[test-id=6] > rect')
+      .eq(1)
+      .invoke('attr', 'rx')
+      .then(parseInt)
+      .should('be.a', 'number')
+      .should('be.lt', 5);
 
     cy.matchImageSnapshot('changeToRoundedRectangle');
   });
@@ -43,8 +58,18 @@ context('Change Topic shape', () => {
     cy.get(`[aria-label="Ellipse shape"]`).first().click();
 
     // Todo: Check how to validate this. Difference when it run in docker vs test:integration
-    cy.get('[test-id=2] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.gte', 12);
-    cy.get('[test-id=2] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.lt', 15);
+    cy.get('[test-id=2] > rect')
+      .eq(1)
+      .invoke('attr', 'rx')
+      .then(parseInt)
+      .should('be.a', 'number')
+      .should('be.gte', 12);
+    cy.get('[test-id=2] > rect')
+      .eq(1)
+      .invoke('attr', 'rx')
+      .then(parseInt)
+      .should('be.a', 'number')
+      .should('be.lt', 15);
 
     cy.matchImageSnapshot('changeToEllipseShape');
   });

packages/editor/cypress/support/e2e.js

@@ -1,20 +1,13 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
 import './commands';
 
-// Alternatively you can use CommonJS syntax:
-// require('./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);
+// //   });
+// });