diff --git a/packages/editor/cypress/e2e/relationship.cy.ts b/packages/editor/cypress/e2e/relationship.cy.ts index 54126d81..ddced9f3 100644 --- a/packages/editor/cypress/e2e/relationship.cy.ts +++ b/packages/editor/cypress/e2e/relationship.cy.ts @@ -1,12 +1,12 @@ +/// + +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', () => { diff --git a/packages/editor/cypress/e2e/renderAll.cy.ts b/packages/editor/cypress/e2e/renderAll.cy.ts index 1f1538de..a7cbeed5 100644 --- a/packages/editor/cypress/e2e/renderAll.cy.ts +++ b/packages/editor/cypress/e2e/renderAll.cy.ts @@ -1,3 +1,4 @@ +/// 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'); diff --git a/packages/editor/cypress/e2e/topicFontChange.cy.ts b/packages/editor/cypress/e2e/topicFontChange.cy.ts index 81a0e797..8edd0278 100644 --- a/packages/editor/cypress/e2e/topicFontChange.cy.ts +++ b/packages/editor/cypress/e2e/topicFontChange.cy.ts @@ -1,19 +1,22 @@ +/// 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'); }); }); diff --git a/packages/editor/cypress/e2e/topicManager.cy.ts b/packages/editor/cypress/e2e/topicManager.cy.ts index 09511b92..b3612e87 100644 --- a/packages/editor/cypress/e2e/topicManager.cy.ts +++ b/packages/editor/cypress/e2e/topicManager.cy.ts @@ -1,9 +1,8 @@ +/// 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 }); diff --git a/packages/editor/cypress/e2e/topicPosition.cy.ts b/packages/editor/cypress/e2e/topicPosition.cy.ts index 6455af6e..52d57b32 100644 --- a/packages/editor/cypress/e2e/topicPosition.cy.ts +++ b/packages/editor/cypress/e2e/topicPosition.cy.ts @@ -1,9 +1,9 @@ +/// 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'); diff --git a/packages/editor/cypress/e2e/topicShape.cy.ts b/packages/editor/cypress/e2e/topicShape.cy.ts index 9ba094ca..f59f0cc5 100644 --- a/packages/editor/cypress/e2e/topicShape.cy.ts +++ b/packages/editor/cypress/e2e/topicShape.cy.ts @@ -1,10 +1,20 @@ +/// 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'); }); }); diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png index 02cad008..14b6b9a5 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png index 6b1bcebe..221e6827 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png index 57ebdc81..29c610c4 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png index 147da210..9caca3b7 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/fontShapePanel.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/fontShapePanel.snap.png new file mode 100644 index 00000000..a19c4cdf Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/fontShapePanel.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png index 4479b2ec..e5058229 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png index 95c5db75..58527ba3 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png index 48b5c2eb..8b7ecddf 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png index 84d772d4..25cc1b35 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/topicShapePanel.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/topicShapePanel.snap.png new file mode 100644 index 00000000..7c1021ee Binary files /dev/null and b/packages/editor/cypress/snapshots/topicShape.cy.ts/topicShapePanel.snap.png differ diff --git a/packages/editor/cypress/support/commands.js b/packages/editor/cypress/support/commands.ts similarity index 100% rename from packages/editor/cypress/support/commands.js rename to packages/editor/cypress/support/commands.ts diff --git a/packages/editor/cypress/support/e2e.js b/packages/editor/cypress/support/e2e.js deleted file mode 100644 index df4f8df7..00000000 --- a/packages/editor/cypress/support/e2e.js +++ /dev/null @@ -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); -// }); -// }); diff --git a/packages/editor/cypress/support/e2e.ts b/packages/editor/cypress/support/e2e.ts new file mode 100644 index 00000000..c5c3defe --- /dev/null +++ b/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); +// }); +// }); diff --git a/packages/webapp/cypress/e2e/editor.cy.ts b/packages/webapp/cypress/e2e/editor.cy.ts index e3cbf825..f37175f3 100644 --- a/packages/webapp/cypress/e2e/editor.cy.ts +++ b/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', () => { diff --git a/packages/webapp/cypress/e2e/forgot-password.ts b/packages/webapp/cypress/e2e/forgot-password.ts index d49ef63a..891fe03a 100644 --- a/packages/webapp/cypress/e2e/forgot-password.ts +++ b/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', () => { diff --git a/packages/webapp/cypress/e2e/login.cy.ts b/packages/webapp/cypress/e2e/login.cy.ts index 518ac885..9ff36a0b 100644 --- a/packages/webapp/cypress/e2e/login.cy.ts +++ b/packages/webapp/cypress/e2e/login.cy.ts @@ -1,6 +1,7 @@ describe('Login Page', () => { beforeEach(() => { cy.visit('/c/login'); + cy.waitForPageLoaded(); }); it('page loaded', () => { diff --git a/packages/webapp/cypress/e2e/maps.cy.ts b/packages/webapp/cypress/e2e/maps.cy.ts index 278aba68..dd60e11f 100644 --- a/packages/webapp/cypress/e2e/maps.cy.ts +++ b/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); }); diff --git a/packages/webapp/cypress/e2e/registration.cy.ts b/packages/webapp/cypress/e2e/registration.cy.ts index c21ec9ec..e993e1a1 100644 --- a/packages/webapp/cypress/e2e/registration.cy.ts +++ b/packages/webapp/cypress/e2e/registration.cy.ts @@ -1,6 +1,7 @@ describe('Registration Page', () => { beforeEach(() => { cy.visit('/c/registration'); + cy.waitForPageLoaded(); }); it('registation load', () => { diff --git a/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png b/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png index 9b31f0c5..bc4e31b3 100644 Binary files a/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png and b/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png differ diff --git a/packages/webapp/cypress/support/e2e.ts b/packages/webapp/cypress/support/e2e.ts index 25e0e1e5..a1c5f00a 100644 --- a/packages/webapp/cypress/support/e2e.ts +++ b/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'); diff --git a/packages/webapp/package.json b/packages/webapp/package.json index 52ad5cdd..1670307c 100644 --- a/packages/webapp/package.json +++ b/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",