diff --git a/packages/editor/cypress/e2e/relationship.cy.ts b/packages/editor/cypress/e2e/relationship.cy.ts index 514876a5..e470b1c3 100644 --- a/packages/editor/cypress/e2e/relationship.cy.ts +++ b/packages/editor/cypress/e2e/relationship.cy.ts @@ -1,7 +1,5 @@ /// -import { css } from 'cypress/types/jquery'; - describe('Relationship Topics', () => { beforeEach(() => { // Remove storage for autosave ... @@ -11,9 +9,10 @@ describe('Relationship Topics', () => { it('Add Relationship', () => { // Create new relationship ... - cy.contains('Features').click({ force: true }); - cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true }); - cy.onFocusTopicByText('Try it Now!'); + cy.focusTopicByText('Features'); + cy.onClickToolbarButton('Add Relationship'); + + cy.focusTopicByText('Try it Now!'); cy.get('[test-id="11-15-relationship"]').as('rel'); cy.get('@rel').click({ force: true }); @@ -28,9 +27,9 @@ describe('Relationship Topics', () => { 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(); + cy.focusTopicByText('Features'); + cy.onClickToolbarButton('Add Relationship'); + cy.focusTopicByText('Try it Now!'); // Delete it ... cy.get('[test-id="11-15-relationship"]').as('rel'); @@ -43,15 +42,15 @@ describe('Relationship Topics', () => { cy.matchImageSnapshot('delete relationship'); // Undo relationship ... - cy.get('[aria-label^="Undo ').eq(1).click(); + cy.triggerUndo(); cy.get('@rel').should('exist'); }); it('Change Control Point', () => { // Create new relationship ... - cy.onFocusTopicByText('Features'); - cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true }); - cy.contains('Try it Now!').click(); + cy.focusTopicByText('Features'); + cy.onClickToolbarButton('Add Relationship'); + cy.focusTopicByText('Try it Now!'); // Select relationship ... cy.get('[test-id="11-15-relationship"]').as('rel'); @@ -71,8 +70,8 @@ describe('Relationship Topics', () => { 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.triggerUndo(); + cy.triggerUndo(); cy.get('@rel').should('exist'); cy.matchImageSnapshot('rel ctl undo'); }); diff --git a/packages/editor/cypress/e2e/copyAndPaste.cy.ts b/packages/editor/cypress/e2e/topicCopyAndPaste.cy.ts similarity index 87% rename from packages/editor/cypress/e2e/copyAndPaste.cy.ts rename to packages/editor/cypress/e2e/topicCopyAndPaste.cy.ts index 8f58d380..d45a4011 100644 --- a/packages/editor/cypress/e2e/copyAndPaste.cy.ts +++ b/packages/editor/cypress/e2e/topicCopyAndPaste.cy.ts @@ -1,10 +1,10 @@ /// -describe('Edit Topic', () => { +describe('Topic Copy and Paste Suite', () => { beforeEach(() => { // Remove storage for autosave ... cy.visit('/editor.html'); cy.waitEditorLoaded(); - cy.onFocusTopicById(2); + cy.focusTopicById(2); }); it('Copy and Paste', () => { diff --git a/packages/editor/cypress/e2e/topicPosition.cy.ts b/packages/editor/cypress/e2e/topicDragAndDrop.cy.ts similarity index 96% rename from packages/editor/cypress/e2e/topicPosition.cy.ts rename to packages/editor/cypress/e2e/topicDragAndDrop.cy.ts index 34bbdaec..1666b8fe 100644 --- a/packages/editor/cypress/e2e/topicPosition.cy.ts +++ b/packages/editor/cypress/e2e/topicDragAndDrop.cy.ts @@ -1,5 +1,5 @@ /// -describe('Change topic position', () => { +describe('Topic Drag and Drop', () => { beforeEach(() => { // Remove storage for autosave ... cy.visit('/editor.html'); diff --git a/packages/editor/cypress/e2e/topicFontChange.cy.ts b/packages/editor/cypress/e2e/topicFontChange.cy.ts index 23bd0be6..3fdd5ec3 100644 --- a/packages/editor/cypress/e2e/topicFontChange.cy.ts +++ b/packages/editor/cypress/e2e/topicFontChange.cy.ts @@ -1,27 +1,29 @@ /// -describe('Edit Topic', () => { +describe('Topic Font Suite', () => { beforeEach(() => { // Remove storage for autosave ... cy.visit('/editor.html'); cy.waitEditorLoaded(); - cy.get('[test-id=1]').click(); + + cy.focusTopicById(1); }); it('Open Font Shape Panel', () => { - cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover'); + cy.onMouseOverToolbarButton('Font Style'); 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.onFocusTopicByText('Mind Mapping'); + cy.focusTopicByText('Mind Mapping'); cy.matchImageSnapshot('changeMainTopicText'); }); it('Change Font Size', () => { // Go to the minimal size. - cy.get('[aria-label="Font Style"]').first().trigger('mouseover'); + cy.onMouseOverToolbarButton('Font Style'); + cy.get('[aria-label="Smaller"]').as('smaller'); cy.get('@smaller').eq(1).click(); cy.get('@smaller').eq(1).click(); @@ -48,7 +50,7 @@ describe('Edit Topic', () => { }); it('Change Font To Italic', () => { - cy.get('[aria-label="Font Style"]').first().trigger('mouseover'); + cy.onMouseOverToolbarButton('Font Style'); cy.get('[aria-label^="Italic ').first().click(); cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic'); @@ -58,7 +60,7 @@ describe('Edit Topic', () => { }); it('Change Font to Bold', () => { - cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover'); + cy.onMouseOverToolbarButton('Font Style'); cy.get('[aria-label^="Bold ').first().click(); cy.get('[test-id=1] > text').invoke('attr', 'font-weight').should('eq', 'normal'); @@ -68,13 +70,13 @@ describe('Edit Topic', () => { }); it('Change Font Color', () => { - cy.get('[aria-label="Font Style"]').eq(1).trigger('mouseover'); + cy.onMouseOverToolbarButton('Font Style'); 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.onFocusTopicByText('Mind Mapping'); + cy.focusTopicByText('Mind Mapping'); cy.matchImageSnapshot('changeFontColor'); }); }); diff --git a/packages/editor/cypress/e2e/topicIcon.cy.ts b/packages/editor/cypress/e2e/topicIcon.cy.ts new file mode 100644 index 00000000..8d169fdf --- /dev/null +++ b/packages/editor/cypress/e2e/topicIcon.cy.ts @@ -0,0 +1,20 @@ +/// +describe('Topic Icon Suite', () => { + beforeEach(() => { + cy.visit('/editor.html'); + cy.waitEditorLoaded(); + }); + + it('Open panel', () => { + cy.onClickToolbarButton('Add Icon'); + cy.matchImageSnapshot('icons-pannel'); + }); + + it('Add new icon', () => { + cy.focusTopicById(3); + cy.onClickToolbarButton('Add Icon'); + + cy.get('[aria-label="grinning"]').click(); + cy.matchImageSnapshot('add-new-icon'); + }); +}); diff --git a/packages/editor/cypress/e2e/topicManager.cy.ts b/packages/editor/cypress/e2e/topicManager.cy.ts index 5a636090..26ff3509 100644 --- a/packages/editor/cypress/e2e/topicManager.cy.ts +++ b/packages/editor/cypress/e2e/topicManager.cy.ts @@ -5,7 +5,7 @@ describe('Node manager', () => { cy.waitEditorLoaded(); // Select root node ... - cy.onFocusTopicByText('Mind Mapping'); + cy.focusTopicByText('Mind Mapping'); }); it('shortcut add sibling node', () => { @@ -18,15 +18,15 @@ describe('Node manager', () => { 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}'); - cy.get('[test-id=36] > text > tspan').should('exist'); - cy.get('[test-id=37] > text > tspan').should('exist'); + cy.focusTopicById(36); + cy.focusTopicById(37); cy.matchImageSnapshot('addChildNodeSortcut'); }); it('Delete topic', () => { cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}'); - cy.onFocusTopicById(36); + cy.focusTopicById(36); cy.get('body').type('{del}'); cy.get('[test-id=37]').should('not.exist'); @@ -36,19 +36,19 @@ describe('Node manager', () => { it('undo changes', () => { cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}'); - cy.get('[data-testid="UndoOutlinedIcon"]').click(); - cy.get('[test-id=36] > text > tspan').should('exist'); + cy.triggerUndo(); + cy.focusTopicById(36); cy.matchImageSnapshot('undoChange'); }); it('redo changes', () => { cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}'); - cy.get('[data-testid="UndoOutlinedIcon"]').click(); - cy.get('[test-id=36] > text > tspan').should('exist'); + cy.triggerUndo(); + cy.focusTopicById(36); - cy.get('[data-testid="RedoOutlinedIcon"]').click(); - cy.get('[test-id=36] > text > tspan').should('exist'); + cy.triggerRedo(); + cy.focusTopicById(36); cy.matchImageSnapshot('redoChange'); }); diff --git a/packages/editor/cypress/e2e/topicShape.cy.ts b/packages/editor/cypress/e2e/topicShape.cy.ts index f59f0cc5..10e9d920 100644 --- a/packages/editor/cypress/e2e/topicShape.cy.ts +++ b/packages/editor/cypress/e2e/topicShape.cy.ts @@ -1,5 +1,5 @@ /// -describe('Change Topic shape', () => { +describe('Topic Shape Suite', () => { beforeEach(() => { cy.visit('/editor.html'); @@ -7,16 +7,16 @@ describe('Change Topic shape', () => { cy.waitEditorLoaded(); // Select one node ... - cy.contains('Try it Now!').click(); + cy.focusTopicByText('Try it Now!'); }); it('open shape', () => { - cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover'); + cy.onMouseOverToolbarButton('Topic Style'); cy.matchImageSnapshot('topicShapePanel'); }); it('change to square shape', () => { - cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover'); + cy.onMouseOverToolbarButton('Topic Style'); cy.get(`[aria-label="Rectangle shape"]`).first().click(); cy.get('[test-id=11] > rect') @@ -26,14 +26,14 @@ describe('Change Topic shape', () => { .should('be.a', 'number') .should('eq', 0); - cy.contains('Mind Mapping').click({ force: true }); + cy.focusTopicByText('Mind Mapping'); cy.matchImageSnapshot('changeToSquareShape'); }); it('change to rounded rectangle', () => { - cy.contains('Mind Mapping').click(); + cy.focusTopicByText('Mind Mapping'); - cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover'); + cy.onMouseOverToolbarButton('Topic Style'); cy.get(`[aria-label="Rounded shape"]`).first().click(); // Todo: Check how to validate this. Difference when it run in docker vs test:integration @@ -50,24 +50,22 @@ describe('Change Topic shape', () => { .should('be.a', 'number') .should('be.lt', 5); - cy.contains('Mind Mapping').click({ force: true }); + cy.focusTopicByText('Mind Mapping'); cy.matchImageSnapshot('changeToRoundedRectangle'); }); it('change to line', () => { - cy.contains('Try it Now!').click(); - - cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover'); + cy.onMouseOverToolbarButton('Topic Style'); cy.get(`[aria-label="Line shape"]`).first().click(); - cy.contains('Mind Mapping').click({ force: true }); + cy.focusTopicByText('Mind Mapping'); cy.matchImageSnapshot('changeToLine'); }); it('change to ellipse shape', () => { - cy.contains('Productivity').click(); + cy.focusTopicByText('Productivity'); + cy.onMouseOverToolbarButton('Topic Style'); - cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover'); cy.get(`[aria-label="Ellipse shape"]`).first().click(); // Todo: Check how to validate this. Difference when it run in docker vs test:integration @@ -84,7 +82,7 @@ describe('Change Topic shape', () => { .should('be.a', 'number') .should('be.lt', 15); - cy.contains('Mind Mapping').click({ force: true }); + cy.focusTopicByText('Mind Mapping'); cy.matchImageSnapshot('changeToEllipseShape'); }); }); diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png index e2edcd4a..b12a6545 100644 Binary files a/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png and b/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveDefaultPosition.snap.png b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveDefaultPosition.snap.png new file mode 100644 index 00000000..65895025 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveDefaultPosition.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/movedownNode.snap.png b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/movedownNode.snap.png new file mode 100644 index 00000000..58527ba3 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/movedownNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveleftNode.snap.png b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveleftNode.snap.png new file mode 100644 index 00000000..e6f78abd Binary files /dev/null and b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveleftNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveupNode.snap.png b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveupNode.snap.png new file mode 100644 index 00000000..fbfb3e5c Binary files /dev/null and b/packages/editor/cypress/snapshots/topicDragAndDrop.cy.ts/moveupNode.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 index a19c4cdf..5f523362 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/fontShapePanel.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/fontShapePanel.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicIcon.cy.ts/add-new-icon.snap.png b/packages/editor/cypress/snapshots/topicIcon.cy.ts/add-new-icon.snap.png new file mode 100644 index 00000000..b9e83ef3 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicIcon.cy.ts/add-new-icon.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicIcon.cy.ts/editor-shortcut-edit.snap.png b/packages/editor/cypress/snapshots/topicIcon.cy.ts/editor-shortcut-edit.snap.png new file mode 100644 index 00000000..cef5da77 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicIcon.cy.ts/editor-shortcut-edit.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicIcon.cy.ts/icons-pannel.snap.png b/packages/editor/cypress/snapshots/topicIcon.cy.ts/icons-pannel.snap.png new file mode 100644 index 00000000..b5e4f160 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicIcon.cy.ts/icons-pannel.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png index c77bd5d0..f15afd3b 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png index c1fdf2c2..b1fdc22a 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.snap.png index f7218dd2..29173dd4 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.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 e5058229..d186824c 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 58527ba3..bcf527f8 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 8b7ecddf..4a21d2ad 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 25cc1b35..08f53b35 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 index 7c1021ee..27532612 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.ts/topicShapePanel.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.ts/topicShapePanel.snap.png differ diff --git a/packages/editor/cypress/support/commands.ts b/packages/editor/cypress/support/commands.ts index 50e2445c..b1f6ca95 100644 --- a/packages/editor/cypress/support/commands.ts +++ b/packages/editor/cypress/support/commands.ts @@ -1,7 +1,25 @@ +/* eslint-disable @typescript-eslint/no-namespace */ /// - import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command'; +declare global { + namespace Cypress { + interface Chainable { + waitForLoad(): void; + waitEditorLoaded(): void; + imageSnaphots(): void; + + focusTopicByText(value: string): void; + focusTopicById(id: number): void; + + onMouseOverToolbarButton(value: 'Topic Style' | 'Font Style'): void; + onClickToolbarButton(value: 'Add Relationship' | 'Add Icon'): void; + + triggerUndo(): void; + triggerRedo(): void; + } + } +} // make matchImageSnapshot() call the real implementation only if CYPRESS_imageSnaphots is set // otherwise it calls a noop if (Cypress.env('imageSnaphots')) { @@ -34,10 +52,26 @@ Cypress.Commands.add('waitForLoad', () => { }); // Mindmap commands ... -Cypress.Commands.add('onFocusTopicById', (id: number) => { +Cypress.Commands.add('focusTopicById', (id: number) => { cy.get(`[test-id=${id}]`).click(); }); -Cypress.Commands.add('onFocusTopicByText', (text: string) => { +Cypress.Commands.add('focusTopicByText', (text: string) => { cy.contains(text).click({ force: true }); }); + +Cypress.Commands.add('onMouseOverToolbarButton', (button: 'Topic Style' | 'Font Style') => { + cy.get(`[aria-label="${button}"]`).first().trigger('mouseover'); +}); + +Cypress.Commands.add('onClickToolbarButton', (button: 'Add Relationship' | 'Add Icon') => { + cy.get(`[aria-label="${button}"]`).click({ multiple: true, force: true }); +}); + +Cypress.Commands.add('triggerUndo', () => { + cy.get('[aria-label^="Undo ').eq(1).click(); +}); + +Cypress.Commands.add('triggerRedo', () => { + cy.get('[aria-label^="Redo ').eq(1).click(); +});