diff --git a/CHANGES.md b/CHANGES.md index 2be278b4c..89b272275 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -6,6 +6,7 @@ ### :sparkles: New features +- Create e2e tests for drawing basic fors [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608). - Improve file menu by adding semantically groups [Github #1203](https://github.com/penpot/penpot/issues/1203). - Create firsts e2e test [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608). - Add an option to hide artboards names on the viewport [Taiga #2034](https://tree.taiga.io/project/penpot/issue/2034). diff --git a/frontend/cypress/integration/09-draw/draw-shapes.spec.js b/frontend/cypress/integration/09-draw/draw-shapes.spec.js new file mode 100644 index 000000000..d1fd9ec5a --- /dev/null +++ b/frontend/cypress/integration/09-draw/draw-shapes.spec.js @@ -0,0 +1,69 @@ +/** + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * Copyright (c) UXBOX Labs SL + */ + + "use strict"; + + describe("draw shapes", () => { + beforeEach(() => { + cy.fixture('validuser.json').then((user) => { + cy.login(user.email, user.password) + cy.get(".project-th").first().dblclick() + cy.clearViewport(); + }); + }); + + it("draw an artboard", () => { + cy.get(".viewport-controls rect").should("not.exist"); + cy.get(".left-toolbar-options li[alt='Artboard (A)']").click() + cy.drawInViewport(300, 300, 400, 450) + cy.get(".viewport-controls rect").first().as("artboard"); + cy.get("@artboard").should("exist"); + cy.get("@artboard").invoke('attr', 'width').should('eq', '100') + cy.get("@artboard").invoke('attr', 'height').should('eq', '150') + }); + + it("draw a square", () => { + cy.get(".viewport-controls rect").should("not.exist"); + cy.get(".left-toolbar-options li[alt='Rectangle (R)']").click() + cy.drawInViewport(300, 300, 400, 450) + cy.get(".viewport-controls rect").should("exist"); + cy.get(".viewport-controls rect").invoke('attr', 'width').should('eq', '100') + cy.get(".viewport-controls rect").invoke('attr', 'height').should('eq', '150') + }); + + it("draw an ellipse", () => { + cy.get(".viewport-controls ellipse").should("not.exist"); + cy.get(".left-toolbar-options li[alt='Ellipse (E)']").click() + cy.drawInViewport(300, 300, 400, 450) + cy.get(".viewport-controls ellipse").as("ellipse") + cy.get("@ellipse").should("exist"); + cy.get("@ellipse").invoke('attr', 'rx').should('eq', '50') + cy.get("@ellipse").invoke('attr', 'ry').should('eq', '75') + }); + + it("draw a curve", () => { + cy.get(".viewport-controls path").should("not.exist"); + cy.get(".left-toolbar-options li[alt='Curve (Shift+C)']").click() + cy.drawMultiInViewport([{x:300, y:300}, {x:350, y:300}, {x:300, y:350}, {x:400, y:450}]) + cy.get(".viewport-controls path").as("curve") + cy.get("@curve").should("exist"); + cy.get("@curve").invoke('attr', 'd').should('eq', "M300,300L350,300L300,350L400,450") + }); + + it("draw a path", () => { + cy.get(".viewport-controls path").should("not.exist"); + cy.get(".left-toolbar-options li[alt='Path (P)']").click() + cy.clickMultiInViewport([{x:300, y:300}, {x:350, y:300}]) + cy.drawMultiInViewport([{x:400, y:450}, {x:450, y:450}], true) + cy.clickMultiInViewport([{x:300, y:300}]) + cy.get(".viewport-controls path").as("curve") + cy.get("@curve").should("exist"); + cy.get("@curve").invoke('attr', 'd').should('eq', "M300,300L350,300C350,300,350,450,400,450C450,450,300,300,300,300Z") + }); + + }); diff --git a/frontend/cypress/support/commands.js b/frontend/cypress/support/commands.js index 5a48d945c..a5c7845ed 100644 --- a/frontend/cypress/support/commands.js +++ b/frontend/cypress/support/commands.js @@ -35,4 +35,58 @@ Cypress.Commands.add('login', (email, password) => { Cypress.Commands.add('demoLogin', () => { cy.visit("http://localhost:3449/#/auth/login"); cy.get("a").contains("Create demo account").click() - }) \ No newline at end of file + }) + + Cypress.Commands.add('drawInViewport', (x1, y1, x2, y2) => { + cy.get(".viewport-controls") + .trigger('mousemove', { x: x1, y: y1 }) + .trigger('mousedown', { + x: x1, + y: y1, + which: 1 + }) + .trigger('mousemove', { x: x2, y: y2 }) + .trigger('mouseup', { x: x2, y: y2, which: 1 }); +}) + +Cypress.Commands.add('drawMultiInViewport', (coords, force=false) => { + cy.get(".viewport-controls") + .trigger('mousemove', { x: coords[0].x, y: coords[0].y, force: force}) + .trigger('mousedown', { + x: coords[0].x, + y: coords[0].y, + which: 1, + force: force + }); + + for (var i=1; i { + for (var i=0; i { + cy.get(".viewport-controls").type('{ctrl}a'); + cy.get(".viewport-controls").type('{del}'); + cy.window().its("debug").invoke('reset_viewport') +}) \ No newline at end of file diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index d46e0b35c..ef4bb46e5 100644 --- a/frontend/src/debug.cljs +++ b/frontend/src/debug.cljs @@ -11,7 +11,8 @@ [app.common.pages :as cp] [app.common.transit :as t] [app.common.uuid :as uuid] - [app.main.data.workspace.changes :as dwc] + [app.main.data.workspace :as dw] + [app.main.data.workspace.changes :as dwc] [app.main.store :as st] [app.util.object :as obj] [app.util.timers :as timers] @@ -270,3 +271,10 @@ (-> (p/let [response (js/fetch url)] (.text response)) (p/then apply-changes))) + +(defn ^:export reset-viewport + [] + (st/emit! + dw/reset-zoom + (dw/update-viewport-position {:x (constantly 0) :y (constantly 0)}))) +