👷 Create firsts e2e tests

.gitignore

@@ -47,3 +47,5 @@ clj-profiler/
 .clj-kondo
 .lsp
 /frontend/cypress/videos/*/
+/frontend/cypress/fixtures/validuser.json
+

CHANGES.md

@@ -6,6 +6,7 @@
 
 ### :sparkles: New features
 
+- 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).
 - Limit pasted object position to container boundaries [Taiga #2449](https://tree.taiga.io/project/penpot/us/2449).
 - Add new options for zoom widget in workspace and viewer mode [Taiga #896](https://tree.taiga.io/project/penpot/us/896).

frontend/cypress.json

@@ -1 +1,4 @@
-{}
+{
+    "watchForFileChanges": false,
+    "video": false
+}

frontend/cypress/fixtures/validuser-sample.json

@@ -0,0 +1,4 @@
+{
+    "email": "validuser@penpot.app",
+    "password": "password"
+}

frontend/cypress/integration/01-auth/create-account.spec.js

@@ -0,0 +1,41 @@
+/**
+ * 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("account creation", () => {
+  let validUser
+
+  beforeEach(() => {
+    cy.fixture('validuser.json').then((user) => {
+      validUser = user;
+    });
+    cy.visit("http://localhost:3449/#/auth/login");
+    cy.get("a").contains("Create an account").click()
+  });
+
+  it("displays the account creation form", () => {
+    cy.get("input[type=submit]").contains("Create an account").should("exist");
+  });
+
+  it("create an account of an existent email fails", () => {
+    cy.get("#email").type(validUser.email);
+    cy.get("#password").type("anewpassword");
+    cy.get("input[type=submit]").contains("Create an account").click();
+    cy.get(".error").should("contain", "Email already used")
+  });
+
+
+  it("can go back", () => {
+    cy.get("a").contains("Login here").click()
+    cy.contains("Great to see you again!").should("exist");
+    cy.get("#email").should("exist");
+    cy.get("#password").should("exist");
+  });
+});
+

frontend/cypress/integration/01-auth/demo-account.specs.js

@@ -0,0 +1,22 @@
+/**
+ * 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("demo account", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3449/#/auth/login");    
+  });
+
+  it.only("create demo account", () => {
+    cy.get("a").contains("Create demo account").click()    
+    cy.get(".profile").contains("Demo User")
+  });
+
+});
+

frontend/cypress/integration/01-auth/login.spec.js

@@ -14,8 +14,28 @@ describe("login", () => {
   });
 
   it("displays the login form", () => {
+    cy.contains("Great to see you again!").should("exist");
     cy.get("#email").should("exist");
     cy.get("#password").should("exist");
   });
+
+  it("can't login with an invalid user", () => {
+    cy.get("#email").type("bad@mail.com");
+    cy.get("#password").type("badpassword");
+    cy.get("input[type=submit]").first().click();
+    cy.get(".warning")
+      .should("exist")
+      .should("contain", "Username or password seems to be wrong.");
+  });
+
+  it("can login with a valid user", () => {
+    cy.fixture('validuser.json').then((user) => {
+      cy.get("#email").type(user.email);
+      cy.get("#password").type(user.password);
+    });
+    
+    cy.get("input[type=submit]").first().click();
+    cy.get(".dashboard-layout").should("exist");
+  });
 });
 

frontend/cypress/integration/01-auth/recover.spec.js

@@ -0,0 +1,46 @@
+/**
+ * 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("recover password", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3449/#/auth/login");
+    cy.get("a").contains("Forgot password?").click()
+  });
+
+  it("displays the recover form", () => {
+    cy.get("input[type=submit]").contains("Recover Password").should("exist");
+  });
+
+  it("recover password with wrong mail works", () => {
+    cy.get("#email").type("bad@mail.com");
+    cy.get("input[type=submit]").contains("Recover Password").click();
+    cy.get(".info")
+      .should("exist")
+      .should("contain", "Password recovery link sent to your inbox.");
+  });
+
+  it("recover password with good mail works", () => {
+    cy.fixture('validuser.json').then((user) => {
+      cy.get("#email").type(user.email);
+    });    
+    cy.get("input[type=submit]").contains("Recover Password").click();
+    cy.get(".info")
+      .should("exist")
+      .should("contain", "Password recovery link sent to your inbox.");
+  });
+
+  it("can go back", () => {
+    cy.get("a").contains("Go back").click()
+    cy.contains("Great to see you again!").should("exist");
+    cy.get("#email").should("exist");
+    cy.get("#password").should("exist");
+  });
+});
+

frontend/cypress/integration/02-onboarding/slides.spec.js

@@ -0,0 +1,80 @@
+/**
+ * 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("onboarding slides", () => {
+   beforeEach(() => {
+    cy.demoLogin();
+     
+   });
+ 
+   it("go trough all the onboarding slides", () => {
+     cy.get(".modal-right").should("contain", "Welcome to Penpot");
+     cy.get(".modal-right button").should("contain", "Continue");
+     cy.get(".modal-right button").click();
+
+     cy.get(".onboarding").should("contain", "Open Source Contributor?")
+     cy.get(".onboarding .skip").should("not.exist");
+     cy.get(".onboarding button").should("contain", "Continue");
+     cy.get(".onboarding button").click();
+
+     cy.get(".onboarding").should("contain", "Design libraries, styles and components")
+     cy.get(".onboarding .skip").should("exist");
+     cy.get(".onboarding .step-dots").should("exist");
+     cy.get(".onboarding button").should("contain", "Continue");
+     cy.get(".onboarding button").click();
+
+     cy.get(".onboarding").should("contain", "Bring your designs to life with interactions")
+     cy.get(".onboarding .skip").should("exist");
+     cy.get(".onboarding .step-dots").should("exist");
+     cy.get(".onboarding button").should("contain", "Continue");
+     cy.get(".onboarding button").click();
+
+     
+     cy.get(".onboarding").should("contain", "Get feedback, present and share your work")
+     cy.get(".onboarding .skip").should("exist");
+     cy.get(".onboarding .step-dots").should("exist");
+     cy.get(".onboarding button").should("contain", "Continue");
+     cy.get(".onboarding button").click();
+     
+     cy.get(".onboarding").should("contain", "One shared source of truth")
+     cy.get(".onboarding .skip").should("not.exist");
+     cy.get(".onboarding .step-dots").should("exist");
+     cy.get(".onboarding button").should("contain", "Start");
+     cy.get(".onboarding button").click();
+
+     cy.get(".onboarding").should("contain", "Welcome to Penpot")
+   });
+
+   it("go to specific onboarding slides", () => {    
+    cy.get(".modal-right button").click();    
+    cy.get(".onboarding button").click();
+
+    cy.get(".step-dots li:nth-child(4)").click();
+    cy.get(".onboarding").should("contain", "One shared source of truth")
+    cy.get(".step-dots li:nth-child(3)").click();
+    cy.get(".onboarding").should("contain", "Get feedback, present and share your work")
+    cy.get(".step-dots li:nth-child(2)").click();
+    cy.get(".onboarding").should("contain", "Bring your designs to life with interactions")
+    cy.get(".step-dots li:nth-child(1)").click();
+    cy.get(".onboarding").should("contain", "Design libraries, styles and components")
+    
+  });
+
+  it("skip onboarding slides", () => {    
+    cy.get(".modal-right button").click();    
+    cy.get(".onboarding button").click();
+    cy.get(".onboarding .skip").click();
+
+    cy.get(".onboarding").should("contain", "Welcome to Penpot")
+  });
+
+ });
+ 
+ 

frontend/cypress/integration/03-projects/projects.spec.js

@@ -0,0 +1,25 @@
+/**
+ * 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("projects", () => {
+   beforeEach(() => {
+    cy.fixture('validuser.json').then((user) => {
+        cy.login(user.email, user.password)
+    });
+     
+   });
+ 
+   it("displays the projects page", () => {
+     cy.get(".dashboard-title").should("contain", "Projects");    
+   });
+
+ });
+ 
+ 

frontend/cypress/support/commands.js

@@ -23,3 +23,16 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+
+Cypress.Commands.add('login', (email, password) => { 
+    cy.visit("http://localhost:3449/#/auth/login");
+    cy.get("#email").type(email);
+    cy.get("#password").type(password);
+    cy.get("input[type=submit]").first().click();
+ })
+
+ Cypress.Commands.add('demoLogin', () => { 
+    cy.visit("http://localhost:3449/#/auth/login");
+    cy.get("a").contains("Create demo account").click()
+ })

frontend/package.json

@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.1",
-    "cypress": "^9.2.0",
+    "cypress": "^9.2.1",
     "gettext-parser": "^4.2.0",
     "gulp": "4.0.2",
     "gulp-concat": "^2.6.1",