👷 Tests e2e for drawing basic forms

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

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")
+  });
+
+ });

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()
- })
+ })
+
+ 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<coords.length; i++){
+      cy.get(".viewport-controls").trigger('mousemove', { x: coords[i].x, y: coords[i].y, force: force })
+   }
+
+   cy.get(".viewport-controls").trigger('mouseup', { 
+      x: coords[coords.length-1].x, 
+      y: coords[coords.length-1].y, 
+      which: 1,
+   force: force });
+})
+
+
+function click(x, y) {
+   cy.get(".viewport-controls")
+      .trigger('mousemove', { x: x, y: y })
+      .trigger('mousedown', {x: x, y: y, which: 1})
+      .trigger('mouseup', {x: x, y: y, which: 1});
+
+ }
+
+Cypress.Commands.add('clickMultiInViewport', (coords) => {   
+   for (var i=0; i<coords.length; i++){
+      click(coords[i].x, coords[i].y);
+   }
+})
+
+Cypress.Commands.add('clearViewport', () => {
+   cy.get(".viewport-controls").type('{ctrl}a');
+   cy.get(".viewport-controls").type('{del}');
+   cy.window().its("debug").invoke('reset_viewport')
+})

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)})))
+