3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-02 07:38:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

👷 Add e2e test to profile area

Browse source
This commit is contained in:
Eva 2022-01-25 16:56:46 +01:00
parent bc2a0432b9
commit f185836fd4
31 changed files with 412 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,33 +9,31 @@
"use strict";
describe("account creation", () => {
let validUser
let validUser;
beforeEach(() => {
cy.fixture('validuser.json').then((user) => {
cy.fixture("validuser.json").then((user) => {
validUser = user;
});
cy.visit("http://localhost:3449/#/auth/login");
cy.get("a").contains("Create an account").click()
cy.getBySel("register-submit").click();
});
it("displays the account creation form", () => {
cy.get("input[type=submit]").contains("Create an account").should("exist");
cy.getBySel("register-form-submit").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")
cy.getBySel("register-form-submit").click();
cy.getBySel("email-input-error").should("exist");
});
it("can go back", () => {
cy.get("a").contains("Login here").click()
cy.contains("Great to see you again!").should("exist");
cy.getBySel("login-here-link").click();
cy.getBySel("login-title").should("exist");
cy.get("#email").should("exist");
cy.get("#password").should("exist");
});
});

11
frontend/cypress/integration/01-auth/demo-account.specs.js → frontend/cypress/integration/01-auth/demo-account.spec.js
View file

@ -10,13 +10,12 @@
describe("demo account", () => {
beforeEach(() => {
cy.visit("http://localhost:3449/#/auth/login");
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")
it("create demo account", () => {
cy.getBySel("demo-account-link").should("exist");
cy.getBySel("demo-account-link").click();
cy.get(".profile").contains("Demo User");
});
});

15
frontend/cypress/integration/01-auth/login.spec.js
View file

@ -14,7 +14,7 @@ describe("login", () => {
});
it("displays the login form", () => {
cy.contains("Great to see you again!").should("exist");
cy.getBySel("login-title").should("exist");
cy.get("#email").should("exist");
cy.get("#password").should("exist");
});
@ -22,20 +22,17 @@ describe("login", () => {
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.");
cy.getBySel("login-submit").click();
cy.getBySel("login-banner").should("exist");
});
it("can login with a valid user", () => {
cy.fixture('validuser.json').then((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.getBySel("login-submit").click();
cy.get(".dashboard-layout").should("exist");
});
});

25
frontend/cypress/integration/01-auth/recover.spec.js
View file

@ -11,36 +11,31 @@
describe("recover password", () => {
beforeEach(() => {
cy.visit("http://localhost:3449/#/auth/login");
cy.get("a").contains("Forgot password?").click()
cy.getBySel("forgot-password").click();
});
it("displays the recover form", () => {
cy.get("input[type=submit]").contains("Recover Password").should("exist");
cy.getBySel("recovery-resquest-submit").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.");
cy.getBySel("recovery-resquest-submit").click();
cy.get(".info").should("exist");
});
it("recover password with good mail works", () => {
cy.fixture('validuser.json').then((user) => {
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.");
});
cy.getBySel("recovery-resquest-submit").click();
cy.get(".info").should("exist");
});
it("can go back", () => {
cy.get("a").contains("Go back").click()
cy.contains("Great to see you again!").should("exist");
cy.getBySel("go-back-link").click();
cy.getBySel("login-title").should("exist");
cy.get("#email").should("exist");
cy.get("#password").should("exist");
});
});

105
frontend/cypress/integration/02-onboarding/slides.spec.js
View file

@ -6,75 +6,50 @@
* Copyright (c) UXBOX Labs SL
*/
"use strict";
"use strict";
import {
checkOnboardingSlide,
goToSlideByNumber,
} from "../../support/utils.js";
describe("onboarding slides", () => {
beforeEach(() => {
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();
it("go trough all the onboarding slides", () => {
cy.getBySel("onboarding-welcome").should("exist");
cy.getBySel("onboarding-next-btn").should("exist");
cy.getBySel("onboarding-next-btn").click();
cy.get(".onboarding").should("contain", "Welcome to Penpot")
cy.getBySel("opsource-next-btn").should("exist");
cy.getBySel("skip-btn").should("not.exist");
cy.getBySel("opsource-next-btn").click();
var genArr = Array.from(Array(3).keys());
cy.wrap(genArr).each((index) => {
checkOnboardingSlide(index, true);
});
checkOnboardingSlide("3", false);
cy.getBySel("onboarding-welcome-title").should("exist");
});
});
it("go to specific onboarding slides", () => {
cy.getBySel("onboarding-next-btn").click();
cy.getBySel(`opsource-next-btn`).click();
var genArr = Array.from(Array(4).keys());
cy.wrap(genArr).each((index) => {
goToSlideByNumber(4 - index);
});
});
it("skip onboarding slides", () => {
cy.getBySel("onboarding-next-btn").click();
cy.getBySel("opsource-next-btn").click();
cy.getBySel("skip-btn").click();
cy.getBySel("fly-solo-op").click();
cy.getBySel("onboarding-welcome-title").should("exist");
});
});

2
frontend/cypress/integration/03-projects/projects.spec.js
View file

@ -17,7 +17,7 @@
});
it("displays the projects page", () => {
cy.get(".dashboard-title").should("contain", "Projects");
cy.get(".dashboard-title").should("exist");
});
});

155
frontend/cypress/integration/04-profile/profile.spec.js Normal file
View file

@ -0,0 +1,155 @@
/**
* 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("profile", () => {
beforeEach(() => {
cy.fixture("validuser.json").then((user) => {
cy.login(user.email, user.password);
});
});
it("open profile section", () => {
cy.get(".profile").click();
cy.getBySel("profile-profile-opt").should("exist");
cy.getBySel("profile-profile-opt").click();
cy.getBySel("account-title").should("exist");
});
it("change profile name", () => {
cy.get(".profile").click();
cy.getBySel("profile-profile-opt").click();
cy.get("#fullname").should("exist");
cy.get("#fullname").clear().type("New name").type("{enter}");
cy.get(".banner.success").should("exist");
});
it("change profile image with png", () => {
cy.get(".profile").click();
cy.getBySel("profile-profile-opt").click();
cy.getBySel("profile-image-input").should("exist");
cy.get(".profile img").then((oldImg) => {
cy.getBySel("profile-image-input").attachFile("test-image-png.png");
cy.get(".profile img")
.invoke("attr", "src")
.should("not.eq", oldImg[0].src);
});
});
it("change profile image with jpg", () => {
cy.get(".profile").click();
cy.getBySel("profile-profile-opt").click();
cy.getBySel("profile-image-input").should("exist");
cy.get(".profile img").then((oldImg) => {
cy.getBySel("profile-image-input").attachFile("test-image-jpg.jpg");
cy.get(".profile img")
.invoke("attr", "src")
.should("not.eq", oldImg[0].src);
});
});
it("change profile email", () => {
cy.get(".profile").click();
cy.getBySel("profile-profile-opt").click();
cy.get(".change-email").should("exist");
cy.get(".change-email").click();
cy.getBySel("change-email-title").should("exist");
cy.fixture("validuser.json").then((user) => {
cy.get("#email-1").type(user.email);
cy.get("#email-2").type(user.email);
});
cy.getBySel("change-email-submit").click();
cy.get(".banner.info").should("exist");
});
it("type wrong email while trying to update should throw an error", () => {
cy.get(".profile").click();
cy.getBySel("profile-profile-opt").click();
cy.get(".change-email").click();
cy.fixture("validuser.json").then((user) => {
cy.get("#email-1").type(user.email);
});
cy.get("#email-2").type("bad@email.com");
cy.getBySel("change-email-submit").click();
cy.get(".error").should("exist");
});
it("open password section", () => {
cy.get(".profile").click();
cy.getBySel("password-profile-opt").click();
cy.get(".password-form").should("exist");
});
it("type old password wrong should throw an error", () => {
cy.get(".profile").click();
cy.getBySel("password-profile-opt").click();
cy.get("#password-old").type("badpassword");
cy.get("#password-1").type("pretty-new-password");
cy.get("#password-2").type("pretty-new-password");
cy.getBySel("submit-password").click();
cy.get(".error").should("exist");
});
it("type same old password should work", () => {
cy.get(".profile").click();
cy.getBySel("password-profile-opt").click();
cy.fixture("validuser.json").then((user) => {
cy.get("#password-old").type(user.password);
cy.get("#password-1").type(user.password);
cy.get("#password-2").type(user.password);
});
cy.getBySel("submit-password").click();
cy.get(".banner.success").should("exist");
});
it("open settings section", () => {
cy.get(".profile").click();
cy.getBySel("profile-profile-opt").click();
cy.getBySel("settings-profile").should("exist");
});
it("set lang to Spanish and back to english", () => {
cy.get(".profile").click();
cy.getBySel("profile-profile-opt").click();
cy.getBySel("settings-profile").click();
cy.getBySel("setting-lang").should("exist");
cy.getBySel("setting-lang").select("es");
cy.getBySel("submit-lang-change").should("exist");
cy.getBySel("submit-lang-change").click();
cy.contains("Tu cuenta").should("exist");
cy.getBySel("setting-lang").select("en");
cy.getBySel("submit-lang-change").click();
cy.contains("Your account").should("exist");
});
it("log out from app", () => {
cy.get(".profile").click();
cy.getBySel("logout-profile-opt").should("exist");
cy.getBySel("logout-profile-opt").click();
cy.getBySel("login-title").should("exist");
});
});
describe("remove account", () => {
it("create demo account and delete it", () => {
cy.visit("http://localhost:3449/#/auth/login");
cy.getBySel("demo-account-link").click();
cy.getBySel("onboarding-next-btn").click();
cy.getBySel("opsource-next-btn").click();
cy.getBySel("skip-btn").click();
cy.getBySel("fly-solo-op").click();
cy.getBySel("close-templates-btn").click();
cy.get(".profile").click();
cy.getBySel("profile-profile-opt").click();
cy.getBySel("remove-acount-btn").click();
cy.getBySel("delete-account-btn").click();
cy.getBySel("login-title").should("exist");
});
});

104
frontend/cypress/integration/09-draw/draw-shapes.spec.js
View file

@ -6,64 +6,88 @@
* Copyright (c) UXBOX Labs SL
*/
"use strict";
"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();
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", () => {
it("draw an artboard", () => {
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(".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')
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(".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')
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(".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")
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(".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")
cy.get("@curve")
.invoke("attr", "d")
.should(
"eq",
"M300,300L350,300C350,300,350,450,400,450C450,450,300,300,300,300Z"
);
});
});
});