From 97725ba6283d0786679205ed35cfd22c68a209ad Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 8 Feb 2023 10:09:12 +0300 Subject: [PATCH 01/21] test: Add tests for stickies --- cypress/e2e/17-stickies.cy.ts | 40 +++++++++++++++++++ .../src/components/Node/NodeCreation.vue | 1 + packages/editor-ui/src/components/Sticky.vue | 1 + 3 files changed, 42 insertions(+) create mode 100644 cypress/e2e/17-stickies.cy.ts diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts new file mode 100644 index 0000000000000..fcfc118a7c485 --- /dev/null +++ b/cypress/e2e/17-stickies.cy.ts @@ -0,0 +1,40 @@ +import { WorkflowPage as WorkflowPageClass } from '../pages/workflow'; + +const WorkflowPage = new WorkflowPageClass(); + +describe('Canvas Actions', () => { + beforeEach(() => { + cy.resetAll(); + cy.skipSetup(); + WorkflowPage.actions.visit(); + cy.waitForLoad(); + }); + + it('adds sticky to canvas with default text and position', () => { + + }); + + it('drags sticky around and position is saved correctly', () => { + + }); + + it('deletes sticky', () => { + + }); + + it('edits sticky and updates content', () => { + + }); + + it('expands sticky from all sides and size is saved correctly', () => { + + }); + + it('is positioned behind nodes and above when editing', () => { + + }); + + it('is positioned based on size', () => { + + }); +}); diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue index 58f4948226766..7125c715195bb 100644 --- a/packages/editor-ui/src/components/Node/NodeCreation.vue +++ b/packages/editor-ui/src/components/Node/NodeCreation.vue @@ -17,6 +17,7 @@
cy.get(`.connection-actions[data-source-node="${sourceNodeName}"][data-target-node="${targetNodeName}"]`), + addStickyButton: () => cy.getByTestId('add-sticky-button'), + stickies: () => cy.getByTestId('sticky'), }; actions = { visit: () => { @@ -183,5 +185,9 @@ export class WorkflowPage extends BasePage { this.getters.getConnectionBetweenNodes(sourceNodeName, targetNodeName).first().realHover(); this.getters.getConnectionActionsBetweenNodes(sourceNodeName, targetNodeName).find('.delete').first().click({ force: true }); }, + addSticky: () => { + this.getters.nodeCreatorPlusButton().realHover(); + this.getters.addStickyButton().click(); + }, }; } From 7b81b755ce32f5867368d74ed607d397136db377 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 8 Feb 2023 12:51:45 +0300 Subject: [PATCH 03/21] test: add size dragging tests --- cypress/e2e/17-stickies.cy.ts | 88 ++++++++++++++++++-- cypress/pages/workflow.ts | 4 + packages/editor-ui/src/components/Sticky.vue | 7 +- 3 files changed, 90 insertions(+), 9 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index d5a248c41c358..da33f0d9a7e56 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -13,28 +13,57 @@ describe('Canvas Actions', () => { it('adds sticky to canvas with default text and position', () => { workflowPage.getters.addStickyButton().should('not.be.visible'); workflowPage.actions.addSticky(); - cy.wait(100); workflowPage.getters.stickies().should('have.length', 1) + .and(($el) => { + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }) .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') + .and(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + }) .find('a').contains('Guide').should('have.attr', 'href'); - - // , 'left: 400px; top: 340px;' }); - // it('always adds stickies in the middle of the canvas', () => { + it('drags sticky around and position is saved correctly', () => { + workflowPage.actions.addSticky(); - // }); + workflowPage.getters.stickies().should('have.length', 1) + .should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + }); + + cy.drag('[data-test-id="sticky"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + }); + + workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); + cy.waitForLoad(); - // it('drags sticky around and position is saved correctly', () => { + cy.reload(); - // }); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + }); + }); // it('deletes sticky', () => { // }); - // it('edits sticky and updates content', () => { + // it('edits sticky with double click and updates content', () => { + + // }); + + // it('edits sticky with enterand updates content', () => { // }); @@ -49,4 +78,47 @@ describe('Canvas Actions', () => { // it('is positioned based on size', () => { // }); + + // it('can select stickies using lasso tool', () => { + + // }); + + // it('zooms to fit stickies', () => { + + // }); + + // it('can undo position drag', () => { + + // }); + + // it('always adds stickies in the middle of the canvas', () => { + // workflowPage.getters.nodeView() + // .should(($el) => { + // expect($el).to.have.css('top', '-80px'); + // expect($el).to.have.css('left', '0px'); + // }); + + // cy.window() + // .trigger('keydown', { key: '{ctrl}', force: true}) + // .realMouseMove(100, 100) + // .realMouseDown() + // .realMouseMove(200, 200) + // .realMouseUp() + // .trigger('keyup', {key: '{ctrl}', force: true}); + + // // cy.wait(1000); + // workflowPage.getters.nodeView() + // .should(($el) => { + // expect($el).to.have.css('top', '-80px'); + // expect($el).to.have.css('left', '0px'); + // }); + + // workflowPage.actions.addSticky(); + + // workflowPage.getters.stickies().should('have.length', 1) + // .and(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '400px'); + // }); + // }); }); diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts index 5b46525b28754..3ed68eebb14c7 100644 --- a/cypress/pages/workflow.ts +++ b/cypress/pages/workflow.ts @@ -189,5 +189,9 @@ export class WorkflowPage extends BasePage { this.getters.nodeCreatorPlusButton().realHover(); this.getters.addStickyButton().click(); }, + moveAroundCanvas: (diff: [number, number]) => { + + // cy.drag('node-view-root', end, start); + }, }; } diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue index 04ee11bb836d8..9150637600047 100644 --- a/packages/editor-ui/src/components/Sticky.vue +++ b/packages/editor-ui/src/components/Sticky.vue @@ -42,7 +42,12 @@
-
+
From 39bc218e2c34864d1c399f55091962afe0796caa Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 8 Feb 2023 12:56:04 +0300 Subject: [PATCH 04/21] test: add delete sticky test --- cypress/e2e/17-stickies.cy.ts | 9 +++++++-- cypress/pages/workflow.ts | 8 +++++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index da33f0d9a7e56..891bef8d38e6c 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -55,9 +55,14 @@ describe('Canvas Actions', () => { }); }); - // it('deletes sticky', () => { + it('deletes sticky', () => { + workflowPage.actions.addSticky(); + workflowPage.getters.stickies().should('have.length', 1) - // }); + workflowPage.actions.deleteSticky(); + + workflowPage.getters.stickies().should('have.length', 0) + }); // it('edits sticky with double click and updates content', () => { diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts index 3ed68eebb14c7..8ea839a02018e 100644 --- a/cypress/pages/workflow.ts +++ b/cypress/pages/workflow.ts @@ -189,9 +189,11 @@ export class WorkflowPage extends BasePage { this.getters.nodeCreatorPlusButton().realHover(); this.getters.addStickyButton().click(); }, - moveAroundCanvas: (diff: [number, number]) => { - - // cy.drag('node-view-root', end, start); + deleteSticky: () => { + this.getters.stickies().eq(0) + .realHover() + .find('[data-test-id="delete-sticky"]') + .click(); }, }; } From 29520af829b3965198060e9348dc1e9837b4e610 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 8 Feb 2023 13:12:43 +0300 Subject: [PATCH 05/21] test: add editing test --- cypress/e2e/17-stickies.cy.ts | 101 ++++++++++++++++++---------------- cypress/pages/workflow.ts | 8 +++ 2 files changed, 61 insertions(+), 48 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index 891bef8d38e6c..9f3e8b1cb8a9f 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -10,67 +10,72 @@ describe('Canvas Actions', () => { cy.waitForLoad(); }); - it('adds sticky to canvas with default text and position', () => { - workflowPage.getters.addStickyButton().should('not.be.visible'); - workflowPage.actions.addSticky(); - - workflowPage.getters.stickies().should('have.length', 1) - .and(($el) => { - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }) - .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') - .and(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - }) - .find('a').contains('Guide').should('have.attr', 'href'); - }); + // it('adds sticky to canvas with default text and position', () => { + // workflowPage.getters.addStickyButton().should('not.be.visible'); + // workflowPage.actions.addSticky(); + + // workflowPage.getters.stickies().should('have.length', 1) + // .and(($el) => { + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '240px'); + // }) + // .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') + // .and(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '400px'); + // }) + // .find('a').contains('Guide').should('have.attr', 'href'); + // }); - it('drags sticky around and position is saved correctly', () => { - workflowPage.actions.addSticky(); + // it('drags sticky around and position is saved correctly', () => { + // workflowPage.actions.addSticky(); - workflowPage.getters.stickies().should('have.length', 1) - .should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - }); + // workflowPage.getters.stickies().should('have.length', 1) + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '400px'); + // }); - cy.drag('[data-test-id="sticky"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - }); + // cy.drag('[data-test-id="sticky"]', [100, 100]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '360px'); + // expect($el).to.have.css('left', '620px'); + // }); - workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); - cy.waitForLoad(); + // workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); + // cy.waitForLoad(); - cy.reload(); + // cy.reload(); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - }); - }); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '360px'); + // expect($el).to.have.css('left', '620px'); + // }); + // }); - it('deletes sticky', () => { - workflowPage.actions.addSticky(); - workflowPage.getters.stickies().should('have.length', 1) + // it('deletes sticky', () => { + // workflowPage.actions.addSticky(); + // workflowPage.getters.stickies().should('have.length', 1) - workflowPage.actions.deleteSticky(); + // workflowPage.actions.deleteSticky(); - workflowPage.getters.stickies().should('have.length', 0) - }); + // workflowPage.getters.stickies().should('have.length', 0) + // }); - // it('edits sticky with double click and updates content', () => { + it('edits sticky and updates content', () => { + workflowPage.actions.addSticky(); - // }); + workflowPage.getters.stickies() + .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') - // it('edits sticky with enterand updates content', () => { + workflowPage.getters.stickies().dblclick(); + workflowPage.actions.editSticky('# hello world \n ## text text'); + workflowPage.getters.stickies().find('h1').should('have.text', 'hello world'); + workflowPage.getters.stickies().find('h2').should('have.text', 'text text'); - // }); + }); // it('expands sticky from all sides and size is saved correctly', () => { diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts index 8ea839a02018e..9cb37bd1b5cae 100644 --- a/cypress/pages/workflow.ts +++ b/cypress/pages/workflow.ts @@ -195,5 +195,13 @@ export class WorkflowPage extends BasePage { .find('[data-test-id="delete-sticky"]') .click(); }, + editSticky: (content: string) => { + this.getters.stickies() + .dblclick() + .find('textarea') + .clear() + .type(content) + .type('{esc}'); + }, }; } From 2c5ad360b5b0d2a05a3fe1112d58b7304b224b36 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 8 Feb 2023 13:13:12 +0300 Subject: [PATCH 06/21] test: update editing text --- cypress/e2e/17-stickies.cy.ts | 90 +++++++++++++++++------------------ 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index 9f3e8b1cb8a9f..ef628d948a648 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -10,61 +10,61 @@ describe('Canvas Actions', () => { cy.waitForLoad(); }); - // it('adds sticky to canvas with default text and position', () => { - // workflowPage.getters.addStickyButton().should('not.be.visible'); - // workflowPage.actions.addSticky(); - - // workflowPage.getters.stickies().should('have.length', 1) - // .and(($el) => { - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '240px'); - // }) - // .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') - // .and(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '400px'); - // }) - // .find('a').contains('Guide').should('have.attr', 'href'); - // }); + it('adds sticky to canvas with default text and position', () => { + workflowPage.getters.addStickyButton().should('not.be.visible'); + workflowPage.actions.addSticky(); - // it('drags sticky around and position is saved correctly', () => { - // workflowPage.actions.addSticky(); + workflowPage.getters.stickies().should('have.length', 1) + .and(($el) => { + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }) + .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') + .and(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + }) + .find('a').contains('Guide').should('have.attr', 'href'); + }); - // workflowPage.getters.stickies().should('have.length', 1) - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '400px'); - // }); + it('drags sticky around and position is saved correctly', () => { + workflowPage.actions.addSticky(); + + workflowPage.getters.stickies().should('have.length', 1) + .should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + }); - // cy.drag('[data-test-id="sticky"]', [100, 100]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '360px'); - // expect($el).to.have.css('left', '620px'); - // }); + cy.drag('[data-test-id="sticky"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + }); - // workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); - // cy.waitForLoad(); + workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); + cy.waitForLoad(); - // cy.reload(); + cy.reload(); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '360px'); - // expect($el).to.have.css('left', '620px'); - // }); - // }); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + }); + }); - // it('deletes sticky', () => { - // workflowPage.actions.addSticky(); - // workflowPage.getters.stickies().should('have.length', 1) + it('deletes sticky', () => { + workflowPage.actions.addSticky(); + workflowPage.getters.stickies().should('have.length', 1) - // workflowPage.actions.deleteSticky(); + workflowPage.actions.deleteSticky(); - // workflowPage.getters.stickies().should('have.length', 0) - // }); + workflowPage.getters.stickies().should('have.length', 0) + }); - it('edits sticky and updates content', () => { + it('edits sticky and updates content as markdown', () => { workflowPage.actions.addSticky(); workflowPage.getters.stickies() From ddb194342ff089a55887ae63efa74987cfb80f2d Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 8 Feb 2023 13:52:27 +0300 Subject: [PATCH 07/21] test: add expansion tests --- cypress/e2e/17-stickies.cy.ts | 133 ++++++++++++++++++++++++++++++++-- 1 file changed, 126 insertions(+), 7 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index ef628d948a648..45feaa7feca2f 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -16,24 +16,24 @@ describe('Canvas Actions', () => { workflowPage.getters.stickies().should('have.length', 1) .and(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); expect($el).to.have.css('height', '160px'); expect($el).to.have.css('width', '240px'); }) .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') - .and(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - }) .find('a').contains('Guide').should('have.attr', 'href'); }); - it('drags sticky around and position is saved correctly', () => { + it('drags sticky around and position/size are saved correctly', () => { workflowPage.actions.addSticky(); workflowPage.getters.stickies().should('have.length', 1) .should(($el) => { expect($el).to.have.css('top', '340px'); expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); }); cy.drag('[data-test-id="sticky"]', [100, 100]); @@ -41,6 +41,8 @@ describe('Canvas Actions', () => { .should(($el) => { expect($el).to.have.css('top', '360px'); expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); }); workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); @@ -52,6 +54,8 @@ describe('Canvas Actions', () => { .should(($el) => { expect($el).to.have.css('top', '360px'); expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); }); }); @@ -77,9 +81,124 @@ describe('Canvas Actions', () => { }); - // it('expands sticky from all sides and size is saved correctly', () => { + it('expands/shrinks sticky from the right edge', () => { + workflowPage.actions.addSticky(); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="right"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '346px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="right"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '302px'); + }); + }); + + it('expands/shrinks sticky from the left edge', () => { + workflowPage.actions.addSticky(); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '490px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '150px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="left"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '446px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '194px'); + }); + }); + + it('expands/shrinks sticky from the top edge', () => { + workflowPage.actions.addSticky(); + cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="top"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '440px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '80px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="top"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '384px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '136px'); + expect($el).to.have.css('width', '240px'); + }); + }); + + it('expands/shrinks sticky from the bottom edge', () => { + workflowPage.actions.addSticky(); + cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '254px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '198px'); + expect($el).to.have.css('width', '240px'); + }); + }); - // }); // it('is positioned behind nodes and above when editing', () => { From 6e2424dc28c0ebd4dfa990d43e3dce25c821f338 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 8 Feb 2023 14:21:40 +0300 Subject: [PATCH 08/21] test: add more tests --- cypress/e2e/17-stickies.cy.ts | 87 +++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index 45feaa7feca2f..9837abd6b7ea2 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -199,6 +199,93 @@ describe('Canvas Actions', () => { }); }); + it('expands/shrinks sticky from the bottom right edge', () => { + workflowPage.actions.addSticky(); + cy.drag('[data-test-id="sticky"]', [-100, -100]); // move away from canvas button + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '160px'); + expect($el).to.have.css('left', '420px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '160px'); + expect($el).to.have.css('left', '420px'); + expect($el).to.have.css('height', '254px'); + expect($el).to.have.css('width', '346px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '160px'); + expect($el).to.have.css('left', '420px'); + expect($el).to.have.css('height', '198px'); + expect($el).to.have.css('width', '302px'); + }); + }); + + it('expands/shrinks sticky from the top right edge', () => { + workflowPage.actions.addSticky(); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '420px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '80px'); + expect($el).to.have.css('width', '346px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '364px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '136px'); + expect($el).to.have.css('width', '302px'); + }); + }); + + it('expands/shrinks sticky from the top left edge, and reach min height/width', () => { + workflowPage.actions.addSticky(); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '420px'); + expect($el).to.have.css('left', '490px'); + expect($el).to.have.css('height', '80px'); + expect($el).to.have.css('width', '150px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '264px'); + expect($el).to.have.css('left', '346px'); + expect($el).to.have.css('height', '236px'); + expect($el).to.have.css('width', '294px'); + }); + }); // it('is positioned behind nodes and above when editing', () => { From 7bae279d616920bdc81b2745a265030d701406d9 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 8 Feb 2023 15:09:23 +0300 Subject: [PATCH 09/21] test: clean up tests --- cypress/e2e/17-stickies.cy.ts | 51 ----------------------------------- 1 file changed, 51 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index 9837abd6b7ea2..2f35b3e977f46 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -286,55 +286,4 @@ describe('Canvas Actions', () => { expect($el).to.have.css('width', '294px'); }); }); - - // it('is positioned behind nodes and above when editing', () => { - - // }); - - // it('is positioned based on size', () => { - - // }); - - // it('can select stickies using lasso tool', () => { - - // }); - - // it('zooms to fit stickies', () => { - - // }); - - // it('can undo position drag', () => { - - // }); - - // it('always adds stickies in the middle of the canvas', () => { - // workflowPage.getters.nodeView() - // .should(($el) => { - // expect($el).to.have.css('top', '-80px'); - // expect($el).to.have.css('left', '0px'); - // }); - - // cy.window() - // .trigger('keydown', { key: '{ctrl}', force: true}) - // .realMouseMove(100, 100) - // .realMouseDown() - // .realMouseMove(200, 200) - // .realMouseUp() - // .trigger('keyup', {key: '{ctrl}', force: true}); - - // // cy.wait(1000); - // workflowPage.getters.nodeView() - // .should(($el) => { - // expect($el).to.have.css('top', '-80px'); - // expect($el).to.have.css('left', '0px'); - // }); - - // workflowPage.actions.addSticky(); - - // workflowPage.getters.stickies().should('have.length', 1) - // .and(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '400px'); - // }); - // }); }); From abb76101758f9ce454af6647b8ff8091aa7533e4 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 10 Feb 2023 15:48:45 +0300 Subject: [PATCH 10/21] refactor: update dragging tests to make sense --- cypress/e2e/14-mapping.cy.ts | 2 +- cypress/e2e/17-stickies.cy.ts | 487 ++++++++++++++++++---------------- cypress/support/commands.ts | 6 +- cypress/support/index.ts | 2 +- 4 files changed, 257 insertions(+), 240 deletions(-) diff --git a/cypress/e2e/14-mapping.cy.ts b/cypress/e2e/14-mapping.cy.ts index ade387e454f6b..f579e12ef4807 100644 --- a/cypress/e2e/14-mapping.cy.ts +++ b/cypress/e2e/14-mapping.cy.ts @@ -13,7 +13,7 @@ describe('Data mapping', () => { cy.window() // @ts-ignore - .then(win => win.onBeforeUnload && win.removeEventListener('beforeunload', win.onBeforeUnload)) + .then(win => win.onBeforeUnload && win.removeEventListener('beforeunload', win.onBeforeUnload)); }); it('maps expressions from table header', () => { diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index 2f35b3e977f46..b554303f835d6 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -2,61 +2,78 @@ import { WorkflowPage as WorkflowPageClass } from '../pages/workflow'; const workflowPage = new WorkflowPageClass(); +function shouldHaveOneSticky(): Cypress.Chainable> { + return workflowPage.getters.stickies().should('have.length', 1); +} + +function shouldBeInDefaultLocaiton(sticky: Cypress.Chainable>): Cypress.Chainable> { + return sticky.should(($el) => { + expect($el).to.have.css('top', '340px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }) +} + +function stickyShouldBePositionedCorrectly(position: [number, number]) { + const yOffset = -60; + const xOffset = -180; + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', `${yOffset + position[0]}px`); + expect($el).to.have.css('left', `${xOffset + position[1]}px`); + }); +} + +function moveSticky(target: [number, number]) { + cy.drag('[data-test-id="sticky"]', target, {abs: true}); + stickyShouldBePositionedCorrectly(target); +} + describe('Canvas Actions', () => { beforeEach(() => { cy.resetAll(); cy.skipSetup(); workflowPage.actions.visit(); cy.waitForLoad(); + + cy.window() + // @ts-ignore + .then(win => win.onBeforeUnload && win.removeEventListener('beforeunload', win.onBeforeUnload)) }); it('adds sticky to canvas with default text and position', () => { workflowPage.getters.addStickyButton().should('not.be.visible'); workflowPage.actions.addSticky(); - workflowPage.getters.stickies().should('have.length', 1) - .and(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }) + shouldBeInDefaultLocaiton(shouldHaveOneSticky()) .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') .find('a').contains('Guide').should('have.attr', 'href'); }); + it('drags sticky around to top left corner', () => { + // used to caliberate rest of tests + // if this does not pass, rest would fail + workflowPage.actions.addSticky(); + + shouldBeInDefaultLocaiton(shouldHaveOneSticky()) + + moveSticky([0, 0]); + }); + it('drags sticky around and position/size are saved correctly', () => { workflowPage.actions.addSticky(); - workflowPage.getters.stickies().should('have.length', 1) - .should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); - - cy.drag('[data-test-id="sticky"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); + shouldBeInDefaultLocaiton(shouldHaveOneSticky()) + + moveSticky([500, 500]); workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); cy.waitForLoad(); cy.reload(); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); + stickyShouldBePositionedCorrectly([500, 500]); }); it('deletes sticky', () => { @@ -81,209 +98,209 @@ describe('Canvas Actions', () => { }); - it('expands/shrinks sticky from the right edge', () => { - workflowPage.actions.addSticky(); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="right"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '346px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="right"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '302px'); - }); - }); - - it('expands/shrinks sticky from the left edge', () => { - workflowPage.actions.addSticky(); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '490px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '150px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="left"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '446px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '194px'); - }); - }); - - it('expands/shrinks sticky from the top edge', () => { - workflowPage.actions.addSticky(); - cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="top"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '440px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '80px'); - expect($el).to.have.css('width', '240px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="top"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '384px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '136px'); - expect($el).to.have.css('width', '240px'); - }); - }); - - it('expands/shrinks sticky from the bottom edge', () => { - workflowPage.actions.addSticky(); - cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '254px'); - expect($el).to.have.css('width', '240px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '198px'); - expect($el).to.have.css('width', '240px'); - }); - }); - - it('expands/shrinks sticky from the bottom right edge', () => { - workflowPage.actions.addSticky(); - cy.drag('[data-test-id="sticky"]', [-100, -100]); // move away from canvas button - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '160px'); - expect($el).to.have.css('left', '420px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '160px'); - expect($el).to.have.css('left', '420px'); - expect($el).to.have.css('height', '254px'); - expect($el).to.have.css('width', '346px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '160px'); - expect($el).to.have.css('left', '420px'); - expect($el).to.have.css('height', '198px'); - expect($el).to.have.css('width', '302px'); - }); - }); - - it('expands/shrinks sticky from the top right edge', () => { - workflowPage.actions.addSticky(); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '420px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '80px'); - expect($el).to.have.css('width', '346px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '364px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '136px'); - expect($el).to.have.css('width', '302px'); - }); - }); - - it('expands/shrinks sticky from the top left edge, and reach min height/width', () => { - workflowPage.actions.addSticky(); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '420px'); - expect($el).to.have.css('left', '490px'); - expect($el).to.have.css('height', '80px'); - expect($el).to.have.css('width', '150px'); - }); - - cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '264px'); - expect($el).to.have.css('left', '346px'); - expect($el).to.have.css('height', '236px'); - expect($el).to.have.css('width', '294px'); - }); - }); + // it('expands/shrinks sticky from the right edge', () => { + // workflowPage.actions.addSticky(); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '400px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '240px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="right"]', [100, 100]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '400px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '346px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="right"]', [-50, -50]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '400px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '302px'); + // }); + // }); + + // it('expands/shrinks sticky from the left edge', () => { + // workflowPage.actions.addSticky(); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '400px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '240px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '490px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '150px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="left"]', [-50, -50]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '446px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '194px'); + // }); + // }); + + // it('expands/shrinks sticky from the top edge', () => { + // workflowPage.actions.addSticky(); + // cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '360px'); + // expect($el).to.have.css('left', '620px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '240px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="top"]', [100, 100]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '440px'); + // expect($el).to.have.css('left', '620px'); + // expect($el).to.have.css('height', '80px'); + // expect($el).to.have.css('width', '240px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="top"]', [-50, -50]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '384px'); + // expect($el).to.have.css('left', '620px'); + // expect($el).to.have.css('height', '136px'); + // expect($el).to.have.css('width', '240px'); + // }); + // }); + + // it('expands/shrinks sticky from the bottom edge', () => { + // workflowPage.actions.addSticky(); + // cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '360px'); + // expect($el).to.have.css('left', '620px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '240px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [100, 100]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '360px'); + // expect($el).to.have.css('left', '620px'); + // expect($el).to.have.css('height', '254px'); + // expect($el).to.have.css('width', '240px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [-50, -50]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '360px'); + // expect($el).to.have.css('left', '620px'); + // expect($el).to.have.css('height', '198px'); + // expect($el).to.have.css('width', '240px'); + // }); + // }); + + // it('expands/shrinks sticky from the bottom right edge', () => { + // workflowPage.actions.addSticky(); + // cy.drag('[data-test-id="sticky"]', [-100, -100]); // move away from canvas button + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '160px'); + // expect($el).to.have.css('left', '420px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '240px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [100, 100]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '160px'); + // expect($el).to.have.css('left', '420px'); + // expect($el).to.have.css('height', '254px'); + // expect($el).to.have.css('width', '346px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [-50, -50]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '160px'); + // expect($el).to.have.css('left', '420px'); + // expect($el).to.have.css('height', '198px'); + // expect($el).to.have.css('width', '302px'); + // }); + // }); + + // it('expands/shrinks sticky from the top right edge', () => { + // workflowPage.actions.addSticky(); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '400px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '240px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [100, 100]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '420px'); + // expect($el).to.have.css('left', '400px'); + // expect($el).to.have.css('height', '80px'); + // expect($el).to.have.css('width', '346px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [-50, -50]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '364px'); + // expect($el).to.have.css('left', '400px'); + // expect($el).to.have.css('height', '136px'); + // expect($el).to.have.css('width', '302px'); + // }); + // }); + + // it('expands/shrinks sticky from the top left edge, and reach min height/width', () => { + // workflowPage.actions.addSticky(); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '400px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '240px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [100, 100]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '420px'); + // expect($el).to.have.css('left', '490px'); + // expect($el).to.have.css('height', '80px'); + // expect($el).to.have.css('width', '150px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '264px'); + // expect($el).to.have.css('left', '346px'); + // expect($el).to.have.css('height', '236px'); + // expect($el).to.have.css('width', '294px'); + // }); + // }); }); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index ff64f69599c3b..014f643f8e623 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -225,7 +225,7 @@ Cypress.Commands.add('paste', { prevSubject: true }, (selector, pastePayload) => }); }); -Cypress.Commands.add('drag', (selector, pos) => { +Cypress.Commands.add('drag', (selector, pos, options) => { const [xDiff, yDiff] = pos; const element = cy.get(selector); element.should('exist'); @@ -235,8 +235,8 @@ Cypress.Commands.add('drag', (selector, pos) => { element.trigger('mousedown'); element.trigger('mousemove', { which: 1, - pageX: originalLocation.right + xDiff, - pageY: originalLocation.top + yDiff, + pageX: options?.abs? xDiff: originalLocation.right + xDiff, + pageY: options?.abs? yDiff: originalLocation.top + yDiff, force: true, }); element.trigger('mouseup', { force: true }); diff --git a/cypress/support/index.ts b/cypress/support/index.ts index 93927c98e8ee8..afa2ec0e41c0a 100644 --- a/cypress/support/index.ts +++ b/cypress/support/index.ts @@ -47,7 +47,7 @@ declare global { grantBrowserPermissions(...permissions: string[]): void; readClipboard(): Chainable; paste(pastePayload: string): void; - drag(selector: string, target: [number, number]): void; + drag(selector: string, target: [number, number], options?: {abs?: true}): void; draganddrop(draggableSelector: string, droppableSelector: string): void; } } From f385aa1dccff50b688239391cc4845b24e9283e5 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 10 Feb 2023 16:33:08 +0300 Subject: [PATCH 11/21] refactor: upate drag right test --- cypress/e2e/17-stickies.cy.ts | 167 ++++++++++++++++------------------ 1 file changed, 78 insertions(+), 89 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index b554303f835d6..f733290012dc6 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -2,34 +2,6 @@ import { WorkflowPage as WorkflowPageClass } from '../pages/workflow'; const workflowPage = new WorkflowPageClass(); -function shouldHaveOneSticky(): Cypress.Chainable> { - return workflowPage.getters.stickies().should('have.length', 1); -} - -function shouldBeInDefaultLocaiton(sticky: Cypress.Chainable>): Cypress.Chainable> { - return sticky.should(($el) => { - expect($el).to.have.css('top', '340px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }) -} - -function stickyShouldBePositionedCorrectly(position: [number, number]) { - const yOffset = -60; - const xOffset = -180; - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', `${yOffset + position[0]}px`); - expect($el).to.have.css('left', `${xOffset + position[1]}px`); - }); -} - -function moveSticky(target: [number, number]) { - cy.drag('[data-test-id="sticky"]', target, {abs: true}); - stickyShouldBePositionedCorrectly(target); -} - describe('Canvas Actions', () => { beforeEach(() => { cy.resetAll(); @@ -44,9 +16,8 @@ describe('Canvas Actions', () => { it('adds sticky to canvas with default text and position', () => { workflowPage.getters.addStickyButton().should('not.be.visible'); - workflowPage.actions.addSticky(); - shouldBeInDefaultLocaiton(shouldHaveOneSticky()) + addDefaultSticky() .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') .find('a').contains('Guide').should('have.attr', 'href'); }); @@ -54,18 +25,12 @@ describe('Canvas Actions', () => { it('drags sticky around to top left corner', () => { // used to caliberate rest of tests // if this does not pass, rest would fail - workflowPage.actions.addSticky(); - - shouldBeInDefaultLocaiton(shouldHaveOneSticky()) - + addDefaultSticky(); moveSticky([0, 0]); }); it('drags sticky around and position/size are saved correctly', () => { - workflowPage.actions.addSticky(); - - shouldBeInDefaultLocaiton(shouldHaveOneSticky()) - + addDefaultSticky(); moveSticky([500, 500]); workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); @@ -95,47 +60,27 @@ describe('Canvas Actions', () => { workflowPage.actions.editSticky('# hello world \n ## text text'); workflowPage.getters.stickies().find('h1').should('have.text', 'hello world'); workflowPage.getters.stickies().find('h2').should('have.text', 'text text'); - }); - // it('expands/shrinks sticky from the right edge', () => { - // workflowPage.actions.addSticky(); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '400px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '240px'); - // }); + it('expands/shrinks sticky from the right edge', () => { + addDefaultSticky(); - // cy.drag('[data-test-id="sticky"] [data-dir="right"]', [100, 100]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '400px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '346px'); - // }); + moveSticky([200, 200]); - // cy.drag('[data-test-id="sticky"] [data-dir="right"]', [-50, -50]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '400px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '302px'); - // }); - // }); + dragRightEdge([200, 200, 160, 240], 100); + + // cy.drag('[data-test-id="sticky"] [data-dir="right"]', [-50, -50]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '400px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '302px'); + // }); + }); // it('expands/shrinks sticky from the left edge', () => { - // workflowPage.actions.addSticky(); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '400px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '240px'); - // }); + // addDefaultSticky(); // cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); // workflowPage.getters.stickies() @@ -247,14 +192,7 @@ describe('Canvas Actions', () => { // }); // it('expands/shrinks sticky from the top right edge', () => { - // workflowPage.actions.addSticky(); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '400px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '240px'); - // }); + // addDefaultSticky(); // cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [100, 100]); // workflowPage.getters.stickies() @@ -276,14 +214,7 @@ describe('Canvas Actions', () => { // }); // it('expands/shrinks sticky from the top left edge, and reach min height/width', () => { - // workflowPage.actions.addSticky(); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '400px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '240px'); - // }); + // addDefaultSticky(); // cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [100, 100]); // workflowPage.getters.stickies() @@ -304,3 +235,61 @@ describe('Canvas Actions', () => { // }); // }); }); + + +function dragRightEdge(curr: [number, number, number, number], move: number) { + workflowPage.getters.stickies().first().then(($el) => { + const [left, top, height, width] = curr; + cy.drag(`[data-test-id="sticky"] [data-dir="right"]`, [left + width + move, 0], {abs: true}); + stickyShouldBePositionedCorrectly([top, left]); + stickyShouldHaveCorrectSize([height, width * 1.5 + move]); + }); +} + +function shouldHaveOneSticky(): Cypress.Chainable> { + return workflowPage.getters.stickies().should('have.length', 1); +} + +function shouldBeInDefaultLocation(sticky: Cypress.Chainable>): Cypress.Chainable> { + return sticky.should(($el) => { + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }) +} + +function shouldHaveDefaultSize(sticky: Cypress.Chainable>): Cypress.Chainable> { + return sticky.should(($el) => { + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }) +} + +function addDefaultSticky() { + workflowPage.actions.addSticky(); + return shouldHaveDefaultSize(shouldBeInDefaultLocation(shouldHaveOneSticky())); +} + +function stickyShouldBePositionedCorrectly(position: [number, number]) { + const yOffset = -60; + const xOffset = -180; + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', `${yOffset + position[0]}px`); + expect($el).to.have.css('left', `${xOffset + position[1]}px`); + }); +} + +function stickyShouldHaveCorrectSize(size: [number, number]) { + const yOffset = 0; + const xOffset = 0; + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('height', `${yOffset + size[0]}px`); + expect($el).to.have.css('width', `${xOffset + size[1]}px`); + }); +} + +function moveSticky(target: [number, number]) { + cy.drag('[data-test-id="sticky"]', target, {abs: true}); + stickyShouldBePositionedCorrectly(target); +} From a5eecccf6667a4918347d319e1c06e0fe0cbdebe Mon Sep 17 00:00:00 2001 From: Mutasem Date: Mon, 13 Feb 2023 15:28:16 +0300 Subject: [PATCH 12/21] test: add shrink from right test --- cypress/e2e/17-stickies.cy.ts | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index f733290012dc6..99e1911edc95c 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -68,19 +68,11 @@ describe('Canvas Actions', () => { moveSticky([200, 200]); dragRightEdge([200, 200, 160, 240], 100); - - // cy.drag('[data-test-id="sticky"] [data-dir="right"]', [-50, -50]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '400px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '302px'); - // }); + dragRightEdge([200, 200, 160, 240], -50); }); // it('expands/shrinks sticky from the left edge', () => { - // addDefaultSticky(); + // addDefaultSticky(); // cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); // workflowPage.getters.stickies() From b16c86f0f41530161b7d7d59f6f85d581911bf60 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Mon, 13 Feb 2023 16:59:39 +0300 Subject: [PATCH 13/21] test: refactor some more --- cypress/e2e/17-stickies.cy.ts | 154 +++++++++++++++++++--------------- 1 file changed, 88 insertions(+), 66 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index 99e1911edc95c..d9cfc22c5e942 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -14,84 +14,86 @@ describe('Canvas Actions', () => { .then(win => win.onBeforeUnload && win.removeEventListener('beforeunload', win.onBeforeUnload)) }); - it('adds sticky to canvas with default text and position', () => { - workflowPage.getters.addStickyButton().should('not.be.visible'); + // it('adds sticky to canvas with default text and position', () => { + // workflowPage.getters.addStickyButton().should('not.be.visible'); - addDefaultSticky() - .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') - .find('a').contains('Guide').should('have.attr', 'href'); - }); + // addDefaultSticky() + // .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') + // .find('a').contains('Guide').should('have.attr', 'href'); + // }); - it('drags sticky around to top left corner', () => { - // used to caliberate rest of tests - // if this does not pass, rest would fail - addDefaultSticky(); - moveSticky([0, 0]); - }); + // it('drags sticky around to top left corner', () => { + // // used to caliberate rest of tests + // // if this does not pass, rest would fail + // addDefaultSticky(); + // moveSticky({top: 0, left: 0}); + // }); - it('drags sticky around and position/size are saved correctly', () => { - addDefaultSticky(); - moveSticky([500, 500]); + // it('drags sticky around and position/size are saved correctly', () => { + // addDefaultSticky(); + // moveSticky([500, 500]); - workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); - cy.waitForLoad(); + // workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); + // cy.waitForLoad(); - cy.reload(); + // cy.reload(); - stickyShouldBePositionedCorrectly([500, 500]); - }); + // stickyShouldBePositionedCorrectly([500, 500]); + // }); - it('deletes sticky', () => { - workflowPage.actions.addSticky(); - workflowPage.getters.stickies().should('have.length', 1) + // it('deletes sticky', () => { + // workflowPage.actions.addSticky(); + // workflowPage.getters.stickies().should('have.length', 1) - workflowPage.actions.deleteSticky(); + // workflowPage.actions.deleteSticky(); - workflowPage.getters.stickies().should('have.length', 0) - }); + // workflowPage.getters.stickies().should('have.length', 0) + // }); - it('edits sticky and updates content as markdown', () => { - workflowPage.actions.addSticky(); + // it('edits sticky and updates content as markdown', () => { + // workflowPage.actions.addSticky(); - workflowPage.getters.stickies() - .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') + // workflowPage.getters.stickies() + // .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') - workflowPage.getters.stickies().dblclick(); - workflowPage.actions.editSticky('# hello world \n ## text text'); - workflowPage.getters.stickies().find('h1').should('have.text', 'hello world'); - workflowPage.getters.stickies().find('h2').should('have.text', 'text text'); - }); + // workflowPage.getters.stickies().dblclick(); + // workflowPage.actions.editSticky('# hello world \n ## text text'); + // workflowPage.getters.stickies().find('h1').should('have.text', 'hello world'); + // workflowPage.getters.stickies().find('h2').should('have.text', 'text text'); + // }); it('expands/shrinks sticky from the right edge', () => { addDefaultSticky(); - moveSticky([200, 200]); + moveSticky({top: 200, left: 200}); - dragRightEdge([200, 200, 160, 240], 100); - dragRightEdge([200, 200, 160, 240], -50); + dragRightEdge({left: 200, top: 200, height: 160, width: 240}, 100); + dragRightEdge({left: 200, top: 200, height: 160, width: 240}, -50); }); - // it('expands/shrinks sticky from the left edge', () => { - // addDefaultSticky(); - - // cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '490px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '150px'); - // }); + it('expands/shrinks sticky from the left edge', () => { + addDefaultSticky(); - // cy.drag('[data-test-id="sticky"] [data-dir="left"]', [-50, -50]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '446px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '194px'); - // }); - // }); + moveSticky({left: 630, top: 200}); + dragLeftEdge({left: 630, top: 200, height: 160, width: 440}, -200); + // cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '490px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '150px'); + // }); + + // cy.drag('[data-test-id="sticky"] [data-dir="left"]', [-50, -50]); + // workflowPage.getters.stickies() + // .should(($el) => { + // expect($el).to.have.css('top', '340px'); + // expect($el).to.have.css('left', '446px'); + // expect($el).to.have.css('height', '160px'); + // expect($el).to.have.css('width', '194px'); + // }); + }); // it('expands/shrinks sticky from the top edge', () => { // workflowPage.actions.addSticky(); @@ -228,12 +230,32 @@ describe('Canvas Actions', () => { // }); }); +type Position = { + top: number; + left: number; +}; -function dragRightEdge(curr: [number, number, number, number], move: number) { +type BoundingBox = { + height: number; + width: number; + top: number; + left: number; +} + +function dragRightEdge(curr: BoundingBox, move: number) { workflowPage.getters.stickies().first().then(($el) => { - const [left, top, height, width] = curr; + const {left, top, height, width} = curr; cy.drag(`[data-test-id="sticky"] [data-dir="right"]`, [left + width + move, 0], {abs: true}); - stickyShouldBePositionedCorrectly([top, left]); + stickyShouldBePositionedCorrectly({top, left}); + stickyShouldHaveCorrectSize([height, width * 1.5 + move]); + }); +} + +function dragLeftEdge(curr: BoundingBox, move: number) { + workflowPage.getters.stickies().first().then(($el) => { + const {left, top, height, width} = curr; + cy.drag(`[data-test-id="sticky"] [data-dir="left"]`, [left + move, 0], {abs: true}); + stickyShouldBePositionedCorrectly({top, left: left + move}); stickyShouldHaveCorrectSize([height, width * 1.5 + move]); }); } @@ -261,13 +283,13 @@ function addDefaultSticky() { return shouldHaveDefaultSize(shouldBeInDefaultLocation(shouldHaveOneSticky())); } -function stickyShouldBePositionedCorrectly(position: [number, number]) { +function stickyShouldBePositionedCorrectly(position: Position) { const yOffset = -60; const xOffset = -180; workflowPage.getters.stickies() .should(($el) => { - expect($el).to.have.css('top', `${yOffset + position[0]}px`); - expect($el).to.have.css('left', `${xOffset + position[1]}px`); + expect($el).to.have.css('top', `${yOffset + position.top}px`); + expect($el).to.have.css('left', `${xOffset + position.left}px`); }); } @@ -281,7 +303,7 @@ function stickyShouldHaveCorrectSize(size: [number, number]) { }); } -function moveSticky(target: [number, number]) { - cy.drag('[data-test-id="sticky"]', target, {abs: true}); +function moveSticky(target: Position) { + cy.drag('[data-test-id="sticky"]', [target.left, target.top], {abs: true}); stickyShouldBePositionedCorrectly(target); } From ee1098b782456e1a3e27580ea8bfbc231a85fdd1 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 24 Mar 2023 15:53:47 +0100 Subject: [PATCH 14/21] test: fix all tests --- cypress/e2e/17-stickies.cy.ts | 373 +++++++++++++++++----------------- 1 file changed, 186 insertions(+), 187 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index d9cfc22c5e942..041bb1889f223 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -14,53 +14,53 @@ describe('Canvas Actions', () => { .then(win => win.onBeforeUnload && win.removeEventListener('beforeunload', win.onBeforeUnload)) }); - // it('adds sticky to canvas with default text and position', () => { - // workflowPage.getters.addStickyButton().should('not.be.visible'); + it('adds sticky to canvas with default text and position', () => { + workflowPage.getters.addStickyButton().should('not.be.visible'); - // addDefaultSticky() - // .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') - // .find('a').contains('Guide').should('have.attr', 'href'); - // }); + addDefaultSticky() + .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') + .find('a').contains('Guide').should('have.attr', 'href'); + }); - // it('drags sticky around to top left corner', () => { - // // used to caliberate rest of tests - // // if this does not pass, rest would fail - // addDefaultSticky(); - // moveSticky({top: 0, left: 0}); - // }); + it('drags sticky around to top left corner', () => { + // used to caliberate rest of tests + // if this does not pass, rest would fail + addDefaultSticky(); + moveSticky({top: 0, left: 0}); + }); - // it('drags sticky around and position/size are saved correctly', () => { - // addDefaultSticky(); - // moveSticky([500, 500]); + it('drags sticky around and position/size are saved correctly', () => { + addDefaultSticky(); + moveSticky({top: 500, left: 500}); - // workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); - // cy.waitForLoad(); + workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); - // cy.reload(); + cy.reload(); + cy.waitForLoad(); - // stickyShouldBePositionedCorrectly([500, 500]); - // }); + stickyShouldBePositionedCorrectly({top: 500, left: 500}); + }); - // it('deletes sticky', () => { - // workflowPage.actions.addSticky(); - // workflowPage.getters.stickies().should('have.length', 1) + it('deletes sticky', () => { + workflowPage.actions.addSticky(); + workflowPage.getters.stickies().should('have.length', 1) - // workflowPage.actions.deleteSticky(); + workflowPage.actions.deleteSticky(); - // workflowPage.getters.stickies().should('have.length', 0) - // }); + workflowPage.getters.stickies().should('have.length', 0) + }); - // it('edits sticky and updates content as markdown', () => { - // workflowPage.actions.addSticky(); + it('edits sticky and updates content as markdown', () => { + workflowPage.actions.addSticky(); - // workflowPage.getters.stickies() - // .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') + workflowPage.getters.stickies() + .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') - // workflowPage.getters.stickies().dblclick(); - // workflowPage.actions.editSticky('# hello world \n ## text text'); - // workflowPage.getters.stickies().find('h1').should('have.text', 'hello world'); - // workflowPage.getters.stickies().find('h2').should('have.text', 'text text'); - // }); + workflowPage.getters.stickies().dblclick(); + workflowPage.actions.editSticky('# hello world \n ## text text'); + workflowPage.getters.stickies().find('h1').should('have.text', 'hello world'); + workflowPage.getters.stickies().find('h2').should('have.text', 'text text'); + }); it('expands/shrinks sticky from the right edge', () => { addDefaultSticky(); @@ -74,160 +74,159 @@ describe('Canvas Actions', () => { it('expands/shrinks sticky from the left edge', () => { addDefaultSticky(); - moveSticky({left: 630, top: 200}); - dragLeftEdge({left: 630, top: 200, height: 160, width: 440}, -200); - // cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '490px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '150px'); - // }); - - // cy.drag('[data-test-id="sticky"] [data-dir="left"]', [-50, -50]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '340px'); - // expect($el).to.have.css('left', '446px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '194px'); - // }); + moveSticky({left: 600, top: 200}); + cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '140px'); + expect($el).to.have.css('left', '510px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '150px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="left"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '140px'); + expect($el).to.have.css('left', '466px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '194px'); + }); + }); + + it('expands/shrinks sticky from the top edge', () => { + workflowPage.actions.addSticky(); + cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="top"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '440px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '80px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="top"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '384px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '136px'); + expect($el).to.have.css('width', '240px'); + }); + }); + + it('expands/shrinks sticky from the bottom edge', () => { + workflowPage.actions.addSticky(); + cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '254px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '360px'); + expect($el).to.have.css('left', '620px'); + expect($el).to.have.css('height', '198px'); + expect($el).to.have.css('width', '240px'); + }); }); - // it('expands/shrinks sticky from the top edge', () => { - // workflowPage.actions.addSticky(); - // cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '360px'); - // expect($el).to.have.css('left', '620px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '240px'); - // }); - - // cy.drag('[data-test-id="sticky"] [data-dir="top"]', [100, 100]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '440px'); - // expect($el).to.have.css('left', '620px'); - // expect($el).to.have.css('height', '80px'); - // expect($el).to.have.css('width', '240px'); - // }); - - // cy.drag('[data-test-id="sticky"] [data-dir="top"]', [-50, -50]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '384px'); - // expect($el).to.have.css('left', '620px'); - // expect($el).to.have.css('height', '136px'); - // expect($el).to.have.css('width', '240px'); - // }); - // }); - - // it('expands/shrinks sticky from the bottom edge', () => { - // workflowPage.actions.addSticky(); - // cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '360px'); - // expect($el).to.have.css('left', '620px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '240px'); - // }); - - // cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [100, 100]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '360px'); - // expect($el).to.have.css('left', '620px'); - // expect($el).to.have.css('height', '254px'); - // expect($el).to.have.css('width', '240px'); - // }); - - // cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [-50, -50]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '360px'); - // expect($el).to.have.css('left', '620px'); - // expect($el).to.have.css('height', '198px'); - // expect($el).to.have.css('width', '240px'); - // }); - // }); - - // it('expands/shrinks sticky from the bottom right edge', () => { - // workflowPage.actions.addSticky(); - // cy.drag('[data-test-id="sticky"]', [-100, -100]); // move away from canvas button - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '160px'); - // expect($el).to.have.css('left', '420px'); - // expect($el).to.have.css('height', '160px'); - // expect($el).to.have.css('width', '240px'); - // }); - - // cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [100, 100]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '160px'); - // expect($el).to.have.css('left', '420px'); - // expect($el).to.have.css('height', '254px'); - // expect($el).to.have.css('width', '346px'); - // }); - - // cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [-50, -50]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '160px'); - // expect($el).to.have.css('left', '420px'); - // expect($el).to.have.css('height', '198px'); - // expect($el).to.have.css('width', '302px'); - // }); - // }); - - // it('expands/shrinks sticky from the top right edge', () => { - // addDefaultSticky(); - - // cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [100, 100]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '420px'); - // expect($el).to.have.css('left', '400px'); - // expect($el).to.have.css('height', '80px'); - // expect($el).to.have.css('width', '346px'); - // }); - - // cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [-50, -50]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '364px'); - // expect($el).to.have.css('left', '400px'); - // expect($el).to.have.css('height', '136px'); - // expect($el).to.have.css('width', '302px'); - // }); - // }); - - // it('expands/shrinks sticky from the top left edge, and reach min height/width', () => { - // addDefaultSticky(); - - // cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [100, 100]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '420px'); - // expect($el).to.have.css('left', '490px'); - // expect($el).to.have.css('height', '80px'); - // expect($el).to.have.css('width', '150px'); - // }); - - // cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]); - // workflowPage.getters.stickies() - // .should(($el) => { - // expect($el).to.have.css('top', '264px'); - // expect($el).to.have.css('left', '346px'); - // expect($el).to.have.css('height', '236px'); - // expect($el).to.have.css('width', '294px'); - // }); - // }); + it('expands/shrinks sticky from the bottom right edge', () => { + workflowPage.actions.addSticky(); + cy.drag('[data-test-id="sticky"]', [-100, -100]); // move away from canvas button + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '160px'); + expect($el).to.have.css('left', '420px'); + expect($el).to.have.css('height', '160px'); + expect($el).to.have.css('width', '240px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '160px'); + expect($el).to.have.css('left', '420px'); + expect($el).to.have.css('height', '254px'); + expect($el).to.have.css('width', '346px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '160px'); + expect($el).to.have.css('left', '420px'); + expect($el).to.have.css('height', '198px'); + expect($el).to.have.css('width', '302px'); + }); + }); + + it('expands/shrinks sticky from the top right edge', () => { + addDefaultSticky(); + + cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '420px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '80px'); + expect($el).to.have.css('width', '346px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [-50, -50]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '364px'); + expect($el).to.have.css('left', '400px'); + expect($el).to.have.css('height', '136px'); + expect($el).to.have.css('width', '302px'); + }); + }); + + it('expands/shrinks sticky from the top left edge, and reach min height/width', () => { + addDefaultSticky(); + + cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [100, 100]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '420px'); + expect($el).to.have.css('left', '490px'); + expect($el).to.have.css('height', '80px'); + expect($el).to.have.css('width', '150px'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '264px'); + expect($el).to.have.css('left', '346px'); + expect($el).to.have.css('height', '236px'); + expect($el).to.have.css('width', '294px'); + }); + }); }); type Position = { From 0ecc3cb8bc41dd6197a3cf7242675c9e7801869b Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 24 Mar 2023 15:58:54 +0100 Subject: [PATCH 15/21] test: clean up --- cypress/e2e/17-stickies.cy.ts | 26 ++++++++++---------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/17-stickies.cy.ts index 041bb1889f223..73afa860e3ca1 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/17-stickies.cy.ts @@ -18,6 +18,7 @@ describe('Canvas Actions', () => { workflowPage.getters.addStickyButton().should('not.be.visible'); addDefaultSticky() + workflowPage.getters.stickies().eq(0) .should('have.text', 'I’m a note\nDouble click to edit me. Guide\n') .find('a').contains('Guide').should('have.attr', 'href'); }); @@ -250,28 +251,19 @@ function dragRightEdge(curr: BoundingBox, move: number) { }); } -function dragLeftEdge(curr: BoundingBox, move: number) { - workflowPage.getters.stickies().first().then(($el) => { - const {left, top, height, width} = curr; - cy.drag(`[data-test-id="sticky"] [data-dir="left"]`, [left + move, 0], {abs: true}); - stickyShouldBePositionedCorrectly({top, left: left + move}); - stickyShouldHaveCorrectSize([height, width * 1.5 + move]); - }); -} - -function shouldHaveOneSticky(): Cypress.Chainable> { - return workflowPage.getters.stickies().should('have.length', 1); +function shouldHaveOneSticky() { + workflowPage.getters.stickies().should('have.length', 1); } -function shouldBeInDefaultLocation(sticky: Cypress.Chainable>): Cypress.Chainable> { - return sticky.should(($el) => { +function shouldBeInDefaultLocation() { + workflowPage.getters.stickies().eq(0).should(($el) => { expect($el).to.have.css('height', '160px'); expect($el).to.have.css('width', '240px'); }) } -function shouldHaveDefaultSize(sticky: Cypress.Chainable>): Cypress.Chainable> { - return sticky.should(($el) => { +function shouldHaveDefaultSize() { + workflowPage.getters.stickies().should(($el) => { expect($el).to.have.css('height', '160px'); expect($el).to.have.css('width', '240px'); }) @@ -279,7 +271,9 @@ function shouldHaveDefaultSize(sticky: Cypress.Chainable>): function addDefaultSticky() { workflowPage.actions.addSticky(); - return shouldHaveDefaultSize(shouldBeInDefaultLocation(shouldHaveOneSticky())); + shouldHaveOneSticky(); + shouldHaveDefaultSize(); + shouldBeInDefaultLocation(); } function stickyShouldBePositionedCorrectly(position: Position) { From d70001b8a9456fd763b30802a302e35ddbf14386 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 24 Mar 2023 16:01:22 +0100 Subject: [PATCH 16/21] test: update number --- cypress/e2e/{17-stickies.cy.ts => 22-stickies.cy.ts} | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) rename cypress/e2e/{17-stickies.cy.ts => 22-stickies.cy.ts} (99%) diff --git a/cypress/e2e/17-stickies.cy.ts b/cypress/e2e/22-stickies.cy.ts similarity index 99% rename from cypress/e2e/17-stickies.cy.ts rename to cypress/e2e/22-stickies.cy.ts index 73afa860e3ca1..e41afb4aa9c2e 100644 --- a/cypress/e2e/17-stickies.cy.ts +++ b/cypress/e2e/22-stickies.cy.ts @@ -24,8 +24,7 @@ describe('Canvas Actions', () => { }); it('drags sticky around to top left corner', () => { - // used to caliberate rest of tests - // if this does not pass, rest would fail + // used to caliberate move sticky function addDefaultSticky(); moveSticky({top: 0, left: 0}); }); From 0b822f743e672b89952ca08f78ffe28a85a8de63 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 24 Mar 2023 16:29:23 +0100 Subject: [PATCH 17/21] test: add z-index tests --- cypress/e2e/22-stickies.cy.ts | 42 +++++++++++++++++++++++++++++++++++ cypress/support/commands.ts | 5 +++-- cypress/support/index.ts | 2 +- 3 files changed, 46 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/22-stickies.cy.ts b/cypress/e2e/22-stickies.cy.ts index e41afb4aa9c2e..8efe930776a7a 100644 --- a/cypress/e2e/22-stickies.cy.ts +++ b/cypress/e2e/22-stickies.cy.ts @@ -227,6 +227,48 @@ describe('Canvas Actions', () => { expect($el).to.have.css('width', '294px'); }); }); + + it('sets sticky behind node', () => { + workflowPage.actions.addInitialNodeToCanvas('Manual Trigger'); + addDefaultSticky(); + + cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]); + workflowPage.getters.stickies() + .should(($el) => { + expect($el).to.have.css('top', '184px'); + expect($el).to.have.css('left', '256px'); + expect($el).to.have.css('height', '316px'); + expect($el).to.have.css('width', '384px'); + expect($el).to.have.css('z-index', '-121'); + }); + + workflowPage.getters.canvasNodes().eq(0) + .should(($el) => { + expect($el).to.have.css('z-index', 'auto'); + }); + + workflowPage.actions.addSticky(); + workflowPage.getters.stickies().eq(0) + .should(($el) => { + expect($el).to.have.css('z-index', '-121'); + }); + workflowPage.getters.stickies().eq(1) + .should(($el) => { + expect($el).to.have.css('z-index', '-38'); + }); + + cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-200, -200], { index: 1}); + workflowPage.getters.stickies().eq(0) + .should(($el) => { + expect($el).to.have.css('z-index', '-121'); + }); + + workflowPage.getters.stickies().eq(1) + .should(($el) => { + expect($el).to.have.css('z-index', '-158'); + }); + + }); }); type Position = { diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 22d59e96c2f3f..132745510cbfa 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -233,11 +233,12 @@ Cypress.Commands.add('paste', { prevSubject: true }, (selector, pastePayload) => }); Cypress.Commands.add('drag', (selector, pos, options) => { + const index = options?.index || 0; const [xDiff, yDiff] = pos; - const element = cy.get(selector); + const element = cy.get(selector).eq(index); element.should('exist'); - const originalLocation = Cypress.$(selector)[0].getBoundingClientRect(); + const originalLocation = Cypress.$(selector)[index].getBoundingClientRect(); element.trigger('mousedown'); element.trigger('mousemove', { diff --git a/cypress/support/index.ts b/cypress/support/index.ts index f27deb5b48776..7665602dafcb4 100644 --- a/cypress/support/index.ts +++ b/cypress/support/index.ts @@ -47,7 +47,7 @@ declare global { grantBrowserPermissions(...permissions: string[]): void; readClipboard(): Chainable; paste(pastePayload: string): void; - drag(selector: string, target: [number, number], options?: {abs?: true}): void; + drag(selector: string, target: [number, number], options?: {abs?: true, index?: number}): void; draganddrop(draggableSelector: string, droppableSelector: string): void; } } From a60945178925f413cf3cd41233dc7b02b1c76031 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 21 Apr 2023 14:09:06 +0200 Subject: [PATCH 18/21] test: address comments --- .../{22-stickies.cy.ts => 25-stickies.cy.ts} | 188 +++++------------- 1 file changed, 53 insertions(+), 135 deletions(-) rename cypress/e2e/{22-stickies.cy.ts => 25-stickies.cy.ts} (56%) diff --git a/cypress/e2e/22-stickies.cy.ts b/cypress/e2e/25-stickies.cy.ts similarity index 56% rename from cypress/e2e/22-stickies.cy.ts rename to cypress/e2e/25-stickies.cy.ts index 8efe930776a7a..c34ac12ac6d2a 100644 --- a/cypress/e2e/22-stickies.cy.ts +++ b/cypress/e2e/25-stickies.cy.ts @@ -2,18 +2,33 @@ import { WorkflowPage as WorkflowPageClass } from '../pages/workflow'; const workflowPage = new WorkflowPageClass(); +function checkStickiesStyle(i = 0, top: number, left: number, height: number, width: number, zIndex?: number) { + workflowPage.getters.stickies(i).should(($el) => { + expect($el).to.have.css('top', `${top}px`); + expect($el).to.have.css('left', `${left}px`); + expect($el).to.have.css('height', `${height}px`); + expect($el).to.have.css('width', `${width}px`); + if (zIndex) { + expect($el).to.have.css('z-index', `${zIndex}`); + } + }); +} + describe('Canvas Actions', () => { beforeEach(() => { cy.resetAll(); cy.skipSetup(); workflowPage.actions.visit(); - cy.waitForLoad(); - cy.window() - // @ts-ignore - .then(win => win.onBeforeUnload && win.removeEventListener('beforeunload', win.onBeforeUnload)) + cy.window().then( + (win) => { + // @ts-ignore + win.preventNodeViewBeforeUnload = true; + }, + ); }); + it('adds sticky to canvas with default text and position', () => { workflowPage.getters.addStickyButton().should('not.be.visible'); @@ -26,19 +41,19 @@ describe('Canvas Actions', () => { it('drags sticky around to top left corner', () => { // used to caliberate move sticky function addDefaultSticky(); - moveSticky({top: 0, left: 0}); + moveSticky({ top: 0, left: 0 }); }); it('drags sticky around and position/size are saved correctly', () => { addDefaultSticky(); - moveSticky({top: 500, left: 500}); + moveSticky({ top: 500, left: 500 }); workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); cy.reload(); cy.waitForLoad(); - stickyShouldBePositionedCorrectly({top: 500, left: 500}); + stickyShouldBePositionedCorrectly({ top: 500, left: 500 }); }); it('deletes sticky', () => { @@ -65,167 +80,77 @@ describe('Canvas Actions', () => { it('expands/shrinks sticky from the right edge', () => { addDefaultSticky(); - moveSticky({top: 200, left: 200}); + moveSticky({ top: 200, left: 200 }); - dragRightEdge({left: 200, top: 200, height: 160, width: 240}, 100); - dragRightEdge({left: 200, top: 200, height: 160, width: 240}, -50); + dragRightEdge({ left: 200, top: 200, height: 160, width: 240 }, 100); + dragRightEdge({ left: 200, top: 200, height: 160, width: 240 }, -50); }); it('expands/shrinks sticky from the left edge', () => { addDefaultSticky(); - moveSticky({left: 600, top: 200}); + moveSticky({ left: 600, top: 200 }); cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '140px'); - expect($el).to.have.css('left', '510px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '150px'); - }); + checkStickiesStyle(0, 140, 510, 160, 150); cy.drag('[data-test-id="sticky"] [data-dir="left"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '140px'); - expect($el).to.have.css('left', '466px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '194px'); - }); + checkStickiesStyle(0, 140, 466, 160, 194); }); it('expands/shrinks sticky from the top edge', () => { workflowPage.actions.addSticky(); cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); + checkStickiesStyle(0, 360, 620, 160, 240); cy.drag('[data-test-id="sticky"] [data-dir="top"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '440px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '80px'); - expect($el).to.have.css('width', '240px'); - }); + checkStickiesStyle(0, 440, 620, 80, 240); cy.drag('[data-test-id="sticky"] [data-dir="top"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '384px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '136px'); - expect($el).to.have.css('width', '240px'); - }); + checkStickiesStyle(0, 384, 620, 136, 240); }); it('expands/shrinks sticky from the bottom edge', () => { workflowPage.actions.addSticky(); cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); + checkStickiesStyle(0, 360, 620, 160, 240); cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '254px'); - expect($el).to.have.css('width', '240px'); - }); + checkStickiesStyle(0, 360, 620, 254, 240); cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '360px'); - expect($el).to.have.css('left', '620px'); - expect($el).to.have.css('height', '198px'); - expect($el).to.have.css('width', '240px'); - }); + checkStickiesStyle(0, 360, 620, 198, 240); }); it('expands/shrinks sticky from the bottom right edge', () => { workflowPage.actions.addSticky(); cy.drag('[data-test-id="sticky"]', [-100, -100]); // move away from canvas button - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '160px'); - expect($el).to.have.css('left', '420px'); - expect($el).to.have.css('height', '160px'); - expect($el).to.have.css('width', '240px'); - }); + checkStickiesStyle(0, 160, 420, 160, 240); cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '160px'); - expect($el).to.have.css('left', '420px'); - expect($el).to.have.css('height', '254px'); - expect($el).to.have.css('width', '346px'); - }); + checkStickiesStyle(0, 160, 420, 254, 346); cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '160px'); - expect($el).to.have.css('left', '420px'); - expect($el).to.have.css('height', '198px'); - expect($el).to.have.css('width', '302px'); - }); + checkStickiesStyle(0, 160, 420, 198, 302); }); it('expands/shrinks sticky from the top right edge', () => { addDefaultSticky(); cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '420px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '80px'); - expect($el).to.have.css('width', '346px'); - }); + checkStickiesStyle(0, 420, 400, 80, 346); cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [-50, -50]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '364px'); - expect($el).to.have.css('left', '400px'); - expect($el).to.have.css('height', '136px'); - expect($el).to.have.css('width', '302px'); - }); + checkStickiesStyle(0, 364, 400, 136, 302); }); it('expands/shrinks sticky from the top left edge, and reach min height/width', () => { addDefaultSticky(); cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [100, 100]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '420px'); - expect($el).to.have.css('left', '490px'); - expect($el).to.have.css('height', '80px'); - expect($el).to.have.css('width', '150px'); - }); + checkStickiesStyle(0, 420, 490, 80, 150); cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '264px'); - expect($el).to.have.css('left', '346px'); - expect($el).to.have.css('height', '236px'); - expect($el).to.have.css('width', '294px'); - }); + checkStickiesStyle(0, 264, 346, 236, 294); }); it('sets sticky behind node', () => { @@ -233,14 +158,7 @@ describe('Canvas Actions', () => { addDefaultSticky(); cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]); - workflowPage.getters.stickies() - .should(($el) => { - expect($el).to.have.css('top', '184px'); - expect($el).to.have.css('left', '256px'); - expect($el).to.have.css('height', '316px'); - expect($el).to.have.css('width', '384px'); - expect($el).to.have.css('z-index', '-121'); - }); + checkStickiesStyle(0, 184, 256, 316, 384, -121); workflowPage.getters.canvasNodes().eq(0) .should(($el) => { @@ -257,16 +175,16 @@ describe('Canvas Actions', () => { expect($el).to.have.css('z-index', '-38'); }); - cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-200, -200], { index: 1}); + cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-200, -200], { index: 1 }); workflowPage.getters.stickies().eq(0) - .should(($el) => { - expect($el).to.have.css('z-index', '-121'); - }); + .should(($el) => { + expect($el).to.have.css('z-index', '-121'); + }); workflowPage.getters.stickies().eq(1) - .should(($el) => { - expect($el).to.have.css('z-index', '-158'); - }); + .should(($el) => { + expect($el).to.have.css('z-index', '-158'); + }); }); }); @@ -285,9 +203,9 @@ type BoundingBox = { function dragRightEdge(curr: BoundingBox, move: number) { workflowPage.getters.stickies().first().then(($el) => { - const {left, top, height, width} = curr; - cy.drag(`[data-test-id="sticky"] [data-dir="right"]`, [left + width + move, 0], {abs: true}); - stickyShouldBePositionedCorrectly({top, left}); + const { left, top, height, width } = curr; + cy.drag(`[data-test-id="sticky"] [data-dir="right"]`, [left + width + move, 0], { abs: true }); + stickyShouldBePositionedCorrectly({ top, left }); stickyShouldHaveCorrectSize([height, width * 1.5 + move]); }); } @@ -338,6 +256,6 @@ function stickyShouldHaveCorrectSize(size: [number, number]) { } function moveSticky(target: Position) { - cy.drag('[data-test-id="sticky"]', [target.left, target.top], {abs: true}); + cy.drag('[data-test-id="sticky"]', [target.left, target.top], { abs: true }); stickyShouldBePositionedCorrectly(target); } From 71f6d3ad2d7ad16269cefb37e2d06bc957bd9342 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 21 Apr 2023 14:09:50 +0200 Subject: [PATCH 19/21] test: fix mistake --- cypress/e2e/25-stickies.cy.ts | 36 +++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/cypress/e2e/25-stickies.cy.ts b/cypress/e2e/25-stickies.cy.ts index c34ac12ac6d2a..e5a58de7488ab 100644 --- a/cypress/e2e/25-stickies.cy.ts +++ b/cypress/e2e/25-stickies.cy.ts @@ -2,8 +2,8 @@ import { WorkflowPage as WorkflowPageClass } from '../pages/workflow'; const workflowPage = new WorkflowPageClass(); -function checkStickiesStyle(i = 0, top: number, left: number, height: number, width: number, zIndex?: number) { - workflowPage.getters.stickies(i).should(($el) => { +function checkStickiesStyle( top: number, left: number, height: number, width: number, zIndex?: number) { + workflowPage.getters.stickies().should(($el) => { expect($el).to.have.css('top', `${top}px`); expect($el).to.have.css('left', `${left}px`); expect($el).to.have.css('height', `${height}px`); @@ -91,66 +91,66 @@ describe('Canvas Actions', () => { moveSticky({ left: 600, top: 200 }); cy.drag('[data-test-id="sticky"] [data-dir="left"]', [100, 100]); - checkStickiesStyle(0, 140, 510, 160, 150); + checkStickiesStyle(140, 510, 160, 150); cy.drag('[data-test-id="sticky"] [data-dir="left"]', [-50, -50]); - checkStickiesStyle(0, 140, 466, 160, 194); + checkStickiesStyle(140, 466, 160, 194); }); it('expands/shrinks sticky from the top edge', () => { workflowPage.actions.addSticky(); cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button - checkStickiesStyle(0, 360, 620, 160, 240); + checkStickiesStyle(360, 620, 160, 240); cy.drag('[data-test-id="sticky"] [data-dir="top"]', [100, 100]); - checkStickiesStyle(0, 440, 620, 80, 240); + checkStickiesStyle(440, 620, 80, 240); cy.drag('[data-test-id="sticky"] [data-dir="top"]', [-50, -50]); - checkStickiesStyle(0, 384, 620, 136, 240); + checkStickiesStyle(384, 620, 136, 240); }); it('expands/shrinks sticky from the bottom edge', () => { workflowPage.actions.addSticky(); cy.drag('[data-test-id="sticky"]', [100, 100]); // move away from canvas button - checkStickiesStyle(0, 360, 620, 160, 240); + checkStickiesStyle(360, 620, 160, 240); cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [100, 100]); - checkStickiesStyle(0, 360, 620, 254, 240); + checkStickiesStyle(360, 620, 254, 240); cy.drag('[data-test-id="sticky"] [data-dir="bottom"]', [-50, -50]); - checkStickiesStyle(0, 360, 620, 198, 240); + checkStickiesStyle(360, 620, 198, 240); }); it('expands/shrinks sticky from the bottom right edge', () => { workflowPage.actions.addSticky(); cy.drag('[data-test-id="sticky"]', [-100, -100]); // move away from canvas button - checkStickiesStyle(0, 160, 420, 160, 240); + checkStickiesStyle(160, 420, 160, 240); cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [100, 100]); - checkStickiesStyle(0, 160, 420, 254, 346); + checkStickiesStyle(160, 420, 254, 346); cy.drag('[data-test-id="sticky"] [data-dir="bottomRight"]', [-50, -50]); - checkStickiesStyle(0, 160, 420, 198, 302); + checkStickiesStyle(160, 420, 198, 302); }); it('expands/shrinks sticky from the top right edge', () => { addDefaultSticky(); cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [100, 100]); - checkStickiesStyle(0, 420, 400, 80, 346); + checkStickiesStyle(420, 400, 80, 346); cy.drag('[data-test-id="sticky"] [data-dir="topRight"]', [-50, -50]); - checkStickiesStyle(0, 364, 400, 136, 302); + checkStickiesStyle(364, 400, 136, 302); }); it('expands/shrinks sticky from the top left edge, and reach min height/width', () => { addDefaultSticky(); cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [100, 100]); - checkStickiesStyle(0, 420, 490, 80, 150); + checkStickiesStyle(420, 490, 80, 150); cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]); - checkStickiesStyle(0, 264, 346, 236, 294); + checkStickiesStyle(264, 346, 236, 294); }); it('sets sticky behind node', () => { @@ -158,7 +158,7 @@ describe('Canvas Actions', () => { addDefaultSticky(); cy.drag('[data-test-id="sticky"] [data-dir="topLeft"]', [-150, -150]); - checkStickiesStyle(0, 184, 256, 316, 384, -121); + checkStickiesStyle(184, 256, 316, 384, -121); workflowPage.getters.canvasNodes().eq(0) .should(($el) => { From 5dab15a2cdaf8919f7a95bba0bf5df7f704a595f Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 21 Apr 2023 14:39:26 +0200 Subject: [PATCH 20/21] test: wait on save --- cypress/e2e/25-stickies.cy.ts | 1 + cypress/pages/workflow.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/cypress/e2e/25-stickies.cy.ts b/cypress/e2e/25-stickies.cy.ts index e5a58de7488ab..645a326806f19 100644 --- a/cypress/e2e/25-stickies.cy.ts +++ b/cypress/e2e/25-stickies.cy.ts @@ -49,6 +49,7 @@ describe('Canvas Actions', () => { moveSticky({ top: 500, left: 500 }); workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); + cy.wait('@createWorkflow'); cy.reload(); cy.waitForLoad(); diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts index a32d441c6e529..67913f5550619 100644 --- a/cypress/pages/workflow.ts +++ b/cypress/pages/workflow.ts @@ -174,6 +174,7 @@ export class WorkflowPage extends BasePage { this.getters.saveButton().should('contain', 'Saved'); }, saveWorkflowUsingKeyboardShortcut: () => { + cy.intercept('POST', '/rest/workflows').as('createWorkflow'); cy.get('body').type('{meta}', { release: false }).type('s'); }, deleteNode: (name: string) => { From ce5f1e3fd63d3605b2f337d4d721110886998242 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 21 Apr 2023 15:03:13 +0200 Subject: [PATCH 21/21] test: try button instead --- cypress/e2e/25-stickies.cy.ts | 2 +- cypress/pages/workflow.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/25-stickies.cy.ts b/cypress/e2e/25-stickies.cy.ts index 645a326806f19..0746fddc0326a 100644 --- a/cypress/e2e/25-stickies.cy.ts +++ b/cypress/e2e/25-stickies.cy.ts @@ -48,7 +48,7 @@ describe('Canvas Actions', () => { addDefaultSticky(); moveSticky({ top: 500, left: 500 }); - workflowPage.actions.saveWorkflowUsingKeyboardShortcut(); + workflowPage.actions.saveWorkflowOnButtonClick(); cy.wait('@createWorkflow'); cy.reload(); diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts index 67913f5550619..d42b2850c4e93 100644 --- a/cypress/pages/workflow.ts +++ b/cypress/pages/workflow.ts @@ -169,6 +169,7 @@ export class WorkflowPage extends BasePage { this.getters.shareButton().click(); }, saveWorkflowOnButtonClick: () => { + cy.intercept('POST', '/rest/workflows').as('createWorkflow'); this.getters.saveButton().should('contain', 'Save'); this.getters.saveButton().click(); this.getters.saveButton().should('contain', 'Saved');