Merge branch 'google-login' of bitbucket.org:wisemapping/wisemapping-frontend into google-login

docker-compose.snapshots.update.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
     e2e:
-        image: cypress/included:10.11.0 
+        image: cypress/included:11.2.0 
         container_name: wisemapping-integration-tests
         entrypoint: '/bin/sh -c "yarn install && yarn bootstrap && yarn build && yarn test:integration"'
         working_dir: /e2e

docker-compose.snapshots.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
     e2e:
-        image: cypress/included:10.11.0
+        image: cypress/included:11.2.0
         container_name: wisemapping-integration-tests
         entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"'
         working_dir: /e2e

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.js

@@ -1,30 +0,0 @@
-context('Relationship Topics', () => {
-  beforeEach(() => {
-    cy.visit('/editor.html');
-    cy.reload();
-    cy.get('[test-id="30-11-relationship"]').first().click({ force: true });
-  });
-
-  it('Add 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"]').first().click({ force: true });
-    cy.get('[test-id="11-15-relationship"]').should('exist');
-
-    cy.matchImageSnapshot('addRelationship');
-  });
-
-  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"]').click({ force: true });
-    cy.get('body').type('{backspace}');
-
-    cy.get('[test-id="11-15-relationship"]').should('not.exist');
-    cy.matchImageSnapshot('delete relationship');
-  });
-});

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

@@ -0,0 +1,79 @@
+context('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');
+  });
+
+  it('Add Relationship', () => {
+    // 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.get('[test-id="11-15-relationship"]').as('rel');
+    cy.get('@rel').click({ force: true });
+    cy.get('@rel').should('exist');
+
+    cy.matchImageSnapshot('addRelationship');
+
+    // Undo relationship ...
+    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.get('@rel').should('not.exist');
+  });
+
+  it('Delete Relationship', () => {
+    // Add new relationship ...
+    cy.contains('Features').first().click({ force: true });
+    cy.get(`[aria-label="Add Relationship"]`).first().click();
+    cy.contains('Try it Now!').first().click();
+
+    // Delete it ...
+    cy.get('[test-id="11-15-relationship"]').as('rel');
+    cy.get('@rel').should('exist');
+    cy.get('@rel').click({ force: true });
+
+    cy.get('body').type('{backspace}');
+
+    cy.get('@rel').should('not.exist');
+    cy.matchImageSnapshot('delete relationship');
+
+    // Undo relationship ...
+    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.get('@rel').should('exist');
+  });
+
+  it('Change Control Point', () => {
+    // Create new relationship ...
+    cy.contains('Features').click({ force: true });
+    cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true });
+    cy.contains('Try it Now!').click();
+
+    // Select relationship ...
+    cy.get('[test-id="11-15-relationship"]').as('rel');
+    cy.get('@rel').should('exist');
+    cy.get('@rel').click({ force: true });
+
+    // Move control point start ...
+    cy.get('[test-id="relctl:0:11-15"]').first().trigger('mousedown');
+    cy.get('body').trigger('mousemove', { clientX: 350, clientY: 380 });
+    cy.get('body').trigger('mouseup');
+    cy.matchImageSnapshot('move ctl pont 0');
+
+    // Move control point end ...
+    cy.get('[test-id="relctl:1:11-15"]').first().trigger('mousedown');
+    cy.get('body').trigger('mousemove', { clientX: 350, clientY: 100 });
+    cy.get('body').trigger('mouseup');
+    cy.matchImageSnapshot('move ctl pont 1');
+
+    // Test undo and redo ...
+    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.get('[aria-label^="Undo ').eq(1).click();
+    cy.get('@rel').should('exist');
+    cy.matchImageSnapshot('rel ctl undo');
+  });
+});

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: 60000 }).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,73 @@
+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"]').as('smaller');
+    cy.get('@smaller').eq(1).click();
+    cy.get('@smaller').eq(1).click();
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.1');
+    cy.matchImageSnapshot('changeFontSizeSmall');
+
+    cy.get('[aria-label="Bigger"]').as('bigger');
+    cy.get('@bigger').eq(1).click();
+    cy.matchImageSnapshot('changeFontSizeNormal');
+
+    cy.get('@bigger').eq(1).click();
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4');
+    cy.matchImageSnapshot('changeFontSizeLarge');
+
+    cy.get('@bigger').eq(1).click();
+    cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2');
+    cy.matchImageSnapshot('changeFontSizeHuge');
+
+    cy.get('@bigger').eq(1).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"]').first().trigger('mouseover');
+    cy.get('[aria-label^="Italic ').first().click();
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic');
+
+    cy.matchImageSnapshot('changeFontItalic');
+  });
+
+  it('Change Font to Bold', () => {
+    cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover');
+    cy.get('[aria-label^="Bold ').first().click();
+
+    cy.get('[test-id=1] > text').invoke('attr', 'font-weight').should('eq', 'normal');
+
+    cy.matchImageSnapshot('changeFontBold');
+  });
+
+  it('Change Font Color', () => {
+    cy.get('[aria-label="Font Style"]').eq(1).trigger('mouseover');
+    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.matchImageSnapshot('changeFontColor');
+  });
+});

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

@@ -4,7 +4,7 @@ context('Node manager', () => {
   });
 
   it('shortcut add sibling node', () => {
-    cy.contains('Mind Mapping').click();
+    cy.contains('Mind Mapping').click({ force: true });
     cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}');
 
     cy.get('[test-id=36] > text > tspan').should('exist');
@@ -13,7 +13,7 @@ context('Node manager', () => {
   });
 
   it('shortcut add child node', () => {
-    cy.contains('Mind Mapping rocks!!').click();
+    cy.contains('Mind Mapping rocks!!').click({ force: true });
     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}');
 
@@ -47,7 +47,7 @@ context('Node manager', () => {
   });
 
   it('Save changes', () => {
-    cy.contains('Mind Mapping rocks!!').click();
+    cy.contains('Mind Mapping rocks!!').click({ force: true });
     cy.get('body').type('{ctrl}s');
 
     cy.matchImageSnapshot('saveChagesShortcut');

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')
-    cy.get('[test-id=6] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.lt', 5);
+      .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')
-    cy.get('[test-id=2] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.lt', 15);
+      .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:
+Cypress.on('window:before:load', (win) => {
-// require('./commands')
+  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/package.json

@@ -8,7 +8,7 @@
     "cy:run": "cypress run",
     "lint": "eslint src --ext js,ts,tsx",
     "test:integration": "start-server-and-test 'yarn playground' http-get://localhost:8081 'yarn cy:run'",
-    "test": "yarn test:unit test:integration",
+    "test": "yarn test:unit && yarn test:integration",
     "test:unit": "jest ./test/unit/* --detectOpenHandles",
     "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"
@@ -27,7 +27,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.2.1",
     "css-loader": "^6.7.1",
-    "cypress": "^10.11.0",
+    "cypress": "11.2.0",
     "cypress-image-snapshot": "^4.0.1",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^8.5.0",

packages/editor/src/components/index.tsx

@@ -47,6 +47,7 @@ import { SpinnerCentered } from './style';
 export type EditorOptions = {
   mode: EditorRenderMode;
   locale: string;
+  zoom?: number;
   enableKeyboardEvents: boolean;
 };
 
@@ -89,9 +90,7 @@ const Editor = ({
         })
         .catch((e) => {
           console.error(e);
-          window.newrelic?.noticeError(
+          window.newrelic?.noticeError(e);
-            new Error(`Unexpected error loading map ${mapInfo.getId()} = ${JSON.stringify(e)}`),
-          );
         });
       setModel(model);
     }
@@ -140,6 +139,7 @@ const Editor = ({
           id="mindmap-comp"
           mode={options.mode}
           locale={options.locale}
+          zoom={options.zoom}
         />
 
         <Notifier id="headerNotifier" />

packages/editor/test/playground/map-render/samples/rel-error.wxml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map name="1420830" version="tango"><topic central="true" text="sss" id="1"><topic position="108,-20" order="0" id="2"/><topic position="-107,0" order="3" id="5"/><topic position="-107,41" order="5" id="6"/><topic position="-107,-41" order="1" id="4" bgColor="rgb(224,229,239)"/><topic position="108,21" order="2" id="3" bgColor="rgb(224,229,239)"><topic position="236,25" order="0" id="7" bgColor="rgb(224,229,239)"/></topic></topic><relationship srcTopicId="3" destTopicId="4" lineType="3" destCtrlPoint="NaN,NaN" endArrow="false" startArrow="true"/><relationship srcTopicId="2" destTopicId="3" lineType="3" srcCtrlPoint="-145,229" destCtrlPoint="-36,188" endArrow="false" startArrow="true"/></map>

packages/mindplot/.eslintrc.json

@@ -24,7 +24,9 @@
     "rules": {
         // ignore errors when a line finishes with (setting this value to 0 ignores all errors)
         "operator-linebreak": [
-			"error", "after", { 
+            "error",
+            "after",
+            {
                 "overrides": {
                     "+": "ignore",
                     "-": "ignore",
@@ -48,10 +50,10 @@
         ],
         "class-methods-use-this": "off",
         "no-console": "off",
-        // codebase contains many this aliases, fix in the future?
+        "@typescript-eslint/no-explicit-any": "error",
+        "@typescript-eslint/no-unused-vars": "error",
         "@typescript-eslint/no-this-alias": "off",
-        // Remove once migration is completed ...
+        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/no-explicit-any": "warn",
         "import/extensions": [
             "error",
             "ignorePackages",

packages/mindplot/package.json

@@ -56,7 +56,7 @@
         "compression-webpack-plugin": "^9.2.0",
         "copy-webpack-plugin": "^10.0.0",
         "core-js": "^3.15.2",
-        "cypress": "^10.11.0",
+        "cypress": "^11.2.0",
         "cypress-image-snapshot": "^4.0.1",
         "eslint": "^8.4.1",
         "eslint-config-airbnb-base": "^14.2.1",