👷 e2e tests for dashboard

Including test for signing/singup, projects, files, teams, and misc

frontend/cypress/fixtures/validuser-sample.json

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

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

@@ -23,6 +23,17 @@ describe("account creation", () => {
     cy.getBySel("register-form-submit").should("exist");
   });
 
+  it("create an account", () => {
+    let email = "mail" +  Date.now() +"@mail.com";
+    cy.get("#email").type(email);
+    cy.get("#password").type("anewpassword");    
+    cy.get("input[type=submit]").click();
+    cy.getBySel("register-title").should("exist");
+    cy.get("#fullname").type("Test user")
+    cy.get("input[type=submit]").click();
+    cy.get(".dashboard-layout").should("exist");
+  });
+
   it("create an account of an existent email fails", () => {
     cy.get("#email").type(validUser.email);
     cy.get("#password").type("anewpassword");

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

@@ -0,0 +1,71 @@
+/**
+ * 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 options solo or team", () => {
+   beforeEach(() => {
+    cy.demoLogin();
+    cy.get(".modal-right button").click();    
+    cy.get(".onboarding button").click();
+    cy.get(".onboarding .skip").click();
+   });
+ 
+   it("choose solo option", () => {
+    cy.getBySel("onboarding-welcome-title").should("exist");
+    cy.getBySel("fly-solo-op").click();
+    cy.getBySel("onboarding-templates-title").should("exist");
+   });
+
+   it("choose team option and cancel", () => {
+    cy.getBySel("onboarding-welcome-title").should("exist");
+    cy.getBySel("team-up-button").click();
+    cy.getBySel("onboarding-choice-team-up").should("exist");
+    cy.get("button").click();
+    cy.getBySel("onboarding-welcome-title").should("exist");
+   });
+
+   it("choose team option, set team name and cancel", () => {
+    cy.getBySel("onboarding-welcome-title").should("exist");
+    cy.getBySel("team-up-button").click();
+    cy.getBySel("onboarding-choice-team-up").should("exist");
+    cy.get("#name").type("test team");
+    cy.get("input[type=submit]").first().click();
+    cy.get("#email").should("exist");
+    cy.get("button").click();
+    cy.getBySel("onboarding-welcome-title").should("exist");
+   });
+
+   it("choose team option, set team name and skip", () => {
+    cy.getBySel("onboarding-welcome-title").should("exist");
+    cy.getBySel("team-up-button").click();
+    cy.getBySel("onboarding-choice-team-up").should("exist");
+    cy.get("#name").type("test team");
+    cy.get("input[type=submit]").first().click();
+    cy.get("#email").should("exist");
+    cy.get(".skip-action").click();
+    cy.getBySel("onboarding-templates-title").should("exist");
+   });
+
+   it("choose team option, set team name and invite", () => {
+    cy.getBySel("onboarding-welcome-title").should("exist");
+    cy.getBySel("team-up-button").click();
+    cy.getBySel("onboarding-choice-team-up").should("exist");
+    cy.get("#name").type("test team");
+    cy.get("input[type=submit]").first().click();
+    cy.get("#email").should("exist");
+    cy.get("#email").type("test@test.com");
+    cy.get("input[type=submit]").first().click();
+    cy.getBySel("onboarding-templates-title").should("exist");
+   });
+
+
+
+ });
+ 
+ 

frontend/cypress/integration/03-dashboard/files.spec.js

@@ -0,0 +1,489 @@
+/**
+ * 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";
+
+ import {
+
+  createProject,
+  deleteFirstProject,
+  deleteFirstFile,
+  createFile
+
+} from '../../support/utils.js';
+
+
+
+ describe("files", () => {
+   beforeEach(() => {
+    cy.fixture('validuser.json').then((user) => {
+        cy.login(user.email, user.password);
+        createProject("test project" + Date.now());
+    });
+     
+   });
+
+   afterEach(() => {
+     //cleanup
+     deleteFirstProject();
+   });
+ 
+
+   it("can create a new file", () => {
+    cy.get(".grid-item").then((files) => {
+      cy.get('.project').first().find("[data-test=project-new-file]").click();
+      cy.get("#workspace").should("exist");
+      cy.get(".project-tree").should("contain", "New File");
+
+      //Go back
+      cy.get(".main-icon a").click();
+      cy.get(".grid-item").should('have.length', files.length + 1);
+    })
+      
+  })
+
+  it("can create a new file inside a project", () => {
+    cy.get(".project").first().find("h2").click();
+    cy.get(".grid-item").should('have.length', 0);
+    createFile();
+    cy.get(".grid-item").should('have.length', 1);
+
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+  it("can create a new file inside a project with shortcut", () => {
+    cy.get(".project").first().find("h2").click();
+    cy.get(".grid-item").should('have.length', 0);
+    cy.get("body").type("+");
+    cy.get(".grid-item").should('have.length', 1);
+
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+  it("can delete a file inside a project", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    cy.get(".grid-item").should('have.length', 1);
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-delete").click();
+    cy.get('.accept-button').click();      
+    cy.get(".grid-item").should('have.length', 0);    
+
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+  it("can cancel a file deletion inside a project", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    cy.get(".grid-item").should('have.length', 1);
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-delete").click();
+    cy.get('.cancel-button').click();      
+    cy.get(".grid-item").should('have.length', 1);    
+
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+
+  it("can delete a file outside a project", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    
+    //Go back
+    cy.get(".recent-projects").click();
+
+    cy.get(".grid-item").then((files) => {
+      cy.get('.menu')
+        .first()
+        .trigger('mouseover')
+        .click();
+      cy.getBySel("file-delete").click();
+      cy.get('.accept-button').click();      
+      cy.get(".grid-item").should('have.length', files.length-1);
+    });               
+  })
+
+  it("can cancel a file deletion outside a project", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    
+    //Go back
+    cy.get(".recent-projects").click();
+
+    cy.get(".grid-item").then((files) => {
+      cy.get('.menu')
+        .first()
+        .trigger('mouseover')
+        .click();
+      cy.getBySel("file-delete").click();
+      cy.get('.cancel-button').click();      
+      cy.get(".grid-item").should('have.length', files.length);    
+    });               
+  })
+
+  it("can rename a file", () => {
+    const fileName = "test file " + Date.now(); 
+
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-rename").click();
+    cy.get(".edit-wrapper").should("exist");
+    cy.get(".edit-wrapper").type(fileName + "{enter}");
+    
+    cy.get(".grid-item").first().should("contain", fileName);
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+  it("can duplicate a file", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    
+    cy.get(".grid-item").should('have.length', 1);
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-duplicate").click();
+    cy.get(".grid-item").should('have.length', 2);
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+
+  it("can move a file to another project", () => {
+    const projectToMoveName = "test project to move " + Date.now();
+    const fileName = "test file " + Date.now();
+
+    createProject(projectToMoveName);
+    cy.get(".project").eq(1).find("h2").click();
+    createFile(fileName);
+
+    //TODO: Bug workaround. When a file is selected, it doesn't open context menu
+    cy.get(".dashboard-grid").click();
+
+    
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.wait(500);
+    cy.getBySel("file-move-to").click();
+    
+    cy.get('a').contains(projectToMoveName).click();
+
+    cy.getBySel("project-title").should("contain", projectToMoveName);
+    cy.get(".grid-item").should('have.length', 1);
+    cy.get(".grid-item").first().should("contain", fileName);
+      
+
+    //Go back and cleanup: delete project
+    cy.get(".recent-projects").click();  
+    deleteFirstProject();   
+  });
+
+
+  it("can move a file to another team", () => {
+    const fileName = "test file " + Date.now();
+    cy.get(".project").first().find("h2").click();
+    createFile(fileName);    
+
+    //TODO: Bug workaround. When a file is selected, it doesn't open context menu
+    cy.get(".dashboard-grid").click();
+
+    
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.wait(500);
+    cy.getBySel("file-move-to").click();
+    
+    cy.getBySel("move-to-other-team").click();
+    cy.fixture('validuser.json').then((user) => {
+      cy.get('a').contains(user.team).click();          
+      cy.get('a').contains("Drafts").click();
+      cy.get(".current-team").should("contain", user.team);
+      cy.get(".dashboard-title").should("contain", "Drafts");
+      cy.get(".grid-item").first().should("contain", fileName);
+    });
+      
+
+    //cleanup
+    deleteFirstFile();
+    cy.get(".current-team").click();
+    cy.get(".team-name").contains("Your Penpot").click();
+  });
+
+
+  it("can make a file a shared library", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    
+    cy.get(".icon-library").should('have.length', 0);
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-add-shared").click();
+    cy.get(".accept-button").click();
+    cy.get(".icon-library").should('have.length', 1);
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+  it("can cancel make a file a shared library", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    
+    cy.get(".icon-library").should('have.length', 0);
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-add-shared").click();
+    cy.get(".modal-close-button").click();
+    cy.get(".icon-library").should('have.length', 0);
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+
+  it("can remove a file as shared library", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+        
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-add-shared").click();
+    cy.get(".accept-button").click();
+    cy.get(".icon-library").should('have.length', 1);
+
+    //TODO: Bug workaround. When a file is selected, it doesn't open context menu
+    cy.get(".dashboard-grid").click();
+
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-del-shared").click();
+    cy.get(".accept-button").click();
+    cy.get(".icon-library").should('have.length', 0);
+
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+  it("can cancel remove a file as shared library", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+        
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-add-shared").click();
+    cy.get(".accept-button").click();
+    cy.get(".icon-library").should('have.length', 1);
+
+    //TODO: Bug workaround. When a file is selected, it doesn't open context menu
+    cy.get(".dashboard-grid").click();
+
+    cy.get('.menu')
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-del-shared").click();
+    cy.get(".modal-close-button").click();
+    cy.get(".icon-library").should('have.length', 1);
+
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+
+  it("can search for a file", () => {
+    const fileName = "test file " + Date.now();
+
+    cy.get(".project").first().find("h2").click();
+    createFile(fileName);
+    
+    cy.get("#search-input").type("bad name");
+    cy.get(".grid-item").should('have.length', 0);
+
+    cy.get("#search-input").clear().type(fileName);
+    cy.get(".grid-item").should('have.length', 1);
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+
+  it("can multiselect files", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();    
+    createFile();
+    createFile();
+
+    cy.get(".selected").should('have.length', 0);
+
+    cy.get(".grid-item").eq(0).click({shiftKey: true});
+    cy.get(".selected").should('have.length', 1);
+
+    cy.get(".grid-item").eq(2).click({shiftKey: true});
+    cy.get(".selected").should('have.length', 2);
+
+    cy.get(".grid-item").eq(1).click({shiftKey: true});
+    cy.get(".selected").should('have.length', 3);
+
+    cy.get(".grid-item").eq(1).click({shiftKey: true});
+    cy.get(".selected").should('have.length', 2);
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+  it("can delete multiselected files", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    createFile();
+    createFile();
+
+    cy.get(".grid-item").eq(0).click({shiftKey: true});
+    cy.get(".grid-item").eq(2).click({shiftKey: true});
+    
+    cy.get(".grid-item").should('have.length', 3);
+    cy.get(".grid-item").eq(0).rightclick();
+    cy.getBySel("delete-multi-files").should("contain", "Delete 2 files");
+    cy.getBySel("delete-multi-files").click();
+    cy.get('.accept-button').click();      
+    cy.get(".grid-item").should('have.length', 1);
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+  it("can cancel delete multiselected files", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    createFile();
+    createFile();
+
+    cy.get(".grid-item").eq(0).click({shiftKey: true});
+    cy.get(".grid-item").eq(2).click({shiftKey: true});
+    
+    cy.get(".grid-item").should('have.length', 3);
+    cy.get(".grid-item").eq(0).rightclick();
+    cy.getBySel("delete-multi-files").should("contain", "Delete 2 files");
+    cy.getBySel("delete-multi-files").click();
+    cy.get('.cancel-button').click();      
+    cy.get(".grid-item").should('have.length', 3);
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+
+  it("can duplicate multiselected files", () => {
+    cy.get(".project").first().find("h2").click();
+    createFile();
+    createFile();
+    createFile();
+
+    cy.get(".grid-item").eq(0).click({shiftKey: true});
+    cy.get(".grid-item").eq(2).click({shiftKey: true});
+    
+    cy.get(".grid-item").should('have.length', 3);
+    cy.get(".grid-item").eq(0).rightclick();
+    cy.getBySel("duplicate-multi").should("contain", "Duplicate 2 files");
+    cy.getBySel("duplicate-multi").click();  
+    cy.get(".grid-item").should('have.length', 5);
+    
+    //Go back
+    cy.get(".recent-projects").click();                  
+  })
+
+  it("can move multiselected files to another project", () => {
+    const projectToMoveName = "test project to move " + Date.now();   
+    createProject(projectToMoveName);
+
+    cy.get(".project").eq(1).find("h2").click();
+    createFile();
+    createFile();
+    createFile();
+
+    cy.get(".grid-item").eq(0).click({shiftKey: true});
+    cy.get(".grid-item").eq(2).click({shiftKey: true});
+    
+    
+    cy.get(".grid-item").eq(0).rightclick();
+    cy.getBySel("move-to-multi").should("contain", "Move 2 files to");
+    cy.getBySel("move-to-multi").click();
+    cy.get('a').contains(projectToMoveName).click();
+
+    cy.getBySel("project-title").should("contain", projectToMoveName);
+    cy.get(".grid-item").should('have.length', 2);
+
+    
+    //Go back
+    cy.get(".recent-projects").click();
+    deleteFirstProject();
+  })
+
+
+  it("can move multiselected files to another team", () => {
+    const fileName1 = "test file " + Date.now();
+    const fileName2 = "test file " + Date.now();
+    const fileName3 = "test file " + Date.now();
+
+    cy.get(".project").first().find("h2").click();
+    createFile(fileName1)
+    createFile(fileName2)
+    createFile(fileName3)
+    
+
+    //multiselect first and third file
+    cy.get(".grid-item").eq(0).click({shiftKey: true});
+    cy.get(".grid-item").eq(2).click({shiftKey: true});
+    
+    
+    cy.get(".grid-item").eq(0).rightclick();
+    cy.getBySel("move-to-multi").should("contain", "Move 2 files to");
+    cy.getBySel("move-to-multi").click();
+    cy.getBySel("move-to-other-team").click();
+    cy.fixture('validuser.json').then((user) => {
+      cy.get('a').contains(user.team).click();          
+      cy.get('a').contains("Drafts").click();
+      cy.get(".current-team").should("contain", user.team);
+      cy.get(".dashboard-title").should("contain", "Drafts");
+      cy.get(".grid-item").eq(0).should("contain", fileName1);
+      cy.get(".grid-item").eq(1).should("contain", fileName2);
+    });
+      
+
+    //cleanup
+    deleteFirstFile()
+    deleteFirstFile()
+    cy.get(".current-team").click();
+    cy.get(".team-name").contains("Your Penpot").click();
+  })
+
+ });
+ 
+ 

frontend/cypress/integration/03-dashboard/misc.spec.js

@@ -0,0 +1,150 @@
+/**
+ * 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";
+
+ import {
+
+  deleteFirstFile,
+  deleteFirstFont
+
+} from '../../support/utils.js';
+
+
+
+describe("comments", () => {
+  beforeEach(() => {
+  cy.fixture('validuser.json').then((user) => {
+      cy.login(user.email, user.password);
+  });
+    
+  });
+
+  it("can open and close comments popup", () => {        
+    cy.get(".comments-section").should("not.exist");
+    cy.getBySel("open-comments").click();
+    cy.get(".comments-section").should("exist");
+    cy.getBySel("open-comments").click();
+    cy.get(".comments-section").should("not.exist");
+  });
+
+});
+
+describe("import and export", () => {
+  beforeEach(() => {
+    cy.fixture('validuser.json').then((user) => {
+        cy.login(user.email, user.password);
+    });
+  });
+
+  it("can export a file", () => {        
+    cy.get('.menu')
+      .first()
+      .trigger('mouseover')
+      .click();
+    cy.getBySel("file-export").click();
+    cy.get('.icon-tick').should("exist");
+  });
+
+  it("can import a file", () => {
+    cy.get(".grid-item").then((files) => {
+      cy.get('.project').first().find("[data-test=project-options]").click();
+      cy.getBySel("file-import").click();
+
+      cy.uploadBinaryFile("input[type=file]", "test-file-import.penpot");
+
+      cy.get(".accept-button").should('not.be.disabled');
+      cy.get(".accept-button").click();
+      cy.get(".accept-button").should('not.be.disabled');
+      cy.get(".accept-button").click();
+      cy.get(".grid-item").should('have.length', files.length+1);
+    });
+    
+    //cleanup
+    deleteFirstFile()    ;
+  })
+
+})
+
+describe("release notes", () => {
+  beforeEach(() => {
+    cy.fixture('validuser.json').then((user) => {
+        cy.login(user.email, user.password);
+    });
+  });
+
+  it("can show release notes", () => {
+    cy.get(".profile").click();
+    cy.getBySel("profile-profile-opt").click();
+    cy.get(".onboarding").should("not.exist");
+    cy.getBySel("release-notes").click();
+    cy.get(".onboarding").should("exist");
+  });
+});
+
+describe("fonts", () => {
+  beforeEach(() => {
+    cy.fixture('validuser.json').then((user) => {
+        cy.login(user.email, user.password);
+    });
+  });
+
+  it("can upload a font file", () => {  
+    cy.getBySel("fonts").click();
+    cy.get(".font-item").should('have.length', 0);
+    cy.uploadBinaryFile("#font-upload", "fonts/Viafont.otf");
+    cy.get(".upload-button").click();
+    cy.get(".font-item").should('have.length', 1);
+  
+    //cleanup
+    deleteFirstFont();
+
+  });
+
+  it("can upload multiple font files", () => {  
+    cy.getBySel("fonts").click();
+    cy.get(".font-item").should('have.length', 0);
+    cy.uploadBinaryFile("#font-upload", "fonts/Viafont.otf");
+    cy.uploadBinaryFile("#font-upload", "fonts/blkchcry.ttf");
+    cy.getBySel("upload-all").click();
+    cy.get(".font-item").should('have.length', 2);
+  
+    //cleanup
+    deleteFirstFont();
+    deleteFirstFont();
+  });
+
+  it("can dismiss multiple font files", () => {  
+    cy.getBySel("fonts").click();
+    cy.get(".font-item").should('have.length', 0);
+    cy.uploadBinaryFile("#font-upload", "fonts/Viafont.otf");
+    cy.uploadBinaryFile("#font-upload", "fonts/blkchcry.ttf");
+    cy.getBySel("dismiss-all").click();
+    cy.get(".font-item").should('have.length', 0);
+  });
+
+  it("can rename a font", () => {  
+    const fontName = "test font " + Date.now();
+    
+    //Upload a font
+    cy.getBySel("fonts").click();    
+    cy.uploadBinaryFile("#font-upload", "fonts/Viafont.otf");
+    cy.get(".upload-button").click();
+    cy.get(".font-item").should('have.length', 1);
+
+    //Rename font
+    cy.get(".font-item .options").first().click();
+    cy.getBySel("font-edit").click();
+    cy.get(".dashboard-installed-fonts input[value=Viafont]").type(fontName+"{enter}");
+    cy.get(".dashboard-installed-fonts").should("contain", fontName);
+
+    //cleanup
+    deleteFirstFont();
+
+  });
+});

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

@@ -0,0 +1,153 @@
+/**
+ * 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";
+
+ import {
+
+  createProject,
+  deleteFirstProject
+
+} from '../../support/utils.js';
+
+
+
+ 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");
+   });
+
+   it("can create a new project", () => {
+    let projectName = "test project " + Date.now();
+    cy.get(".project").then((projects) => {
+      cy.getBySel("new-project-button").click();
+      cy.get('.project').should('have.length', projects.length + 1);
+      cy.get('.project').first().find(".edit-wrapper").type(projectName + "{enter}")
+      cy.get('.project').first().find("h2").should("contain", projectName);
+
+      //cleanup: delete project
+      deleteFirstProject();
+    })
+
+  })
+
+  it("can rename a project", () => {
+      let projectName = "test project " + Date.now();
+      let projectName2 = "renamed project " + Date.now();
+
+      createProject(projectName);
+
+      cy.get('.project').first().find("h2").should("contain", projectName);
+      cy.get('.project').first().find("[data-test=project-options]").click();
+      cy.get('.project').first().find("[data-test=project-rename]").click();
+      cy.get('.project').first().find(".edit-wrapper").type(projectName2 + "{enter}")
+      cy.get('.project').first().find("h2").should("contain", projectName2)
+
+      //cleanup: delete project
+      deleteFirstProject();
+  });
+
+  it("can delete a project", () => {
+    createProject();
+    cy.get(".project").then((projects) => {
+      cy.get('.project').first().find("[data-test=project-options]").click();
+      cy.wait(500);
+      cy.getBySel("project-delete").click();
+      cy.wait(500);
+      cy.get('.accept-button').click();
+      cy.wait(500);
+
+      cy.get('.project').should('have.length', projects.length - 1);
+    })
+  });
+
+  it("can cancel the deletion of a project", () => {
+    createProject();
+    cy.get(".project").then((projects) => {
+      cy.get('.project').first().find("[data-test=project-options]").click();
+      cy.wait(500);
+      cy.getBySel("project-delete").click();
+      cy.wait(500);
+      cy.get('.cancel-button').click();
+      cy.wait(500);
+
+      cy.get('.project').should('have.length', projects.length);
+
+
+      //cleanup: delete project
+      deleteFirstProject();
+    })
+  });
+
+  it("can duplicate a project", () => {
+    let projectName = "test project " + Date.now();
+    createProject(projectName);
+    cy.get('.project').first().find("[data-test=project-options]").click();
+    cy.wait(500);
+    cy.getBySel("project-duplicate").click();
+    cy.getBySel("project-title").should("exist");
+    cy.getBySel("project-title").should("contain", projectName+" (");
+
+
+    //cleanup: delete project
+    cy.get(".recent-projects").click();
+    deleteFirstProject();
+    deleteFirstProject();
+  });
+
+
+  it("can move a project to a team", () => {
+    let projectName = "test project " + Date.now();
+    createProject(projectName);
+
+    cy.fixture('validuser.json').then((user) => {
+      cy.get('.project').first().find("[data-test=project-options]").click();
+      cy.get('.project').first().find("[data-test=project-move-to]").click();
+      cy.get('a').contains(user.team).click();
+
+      cy.get(".current-team").should("contain", user.team);
+      cy.get(".project").first().should("contain", projectName);
+
+
+      //cleanup: delete project
+      deleteFirstProject();
+    });
+  });
+
+
+  it("pin and unpin project to sidebar", () => {
+    let projectName = "test project " + Date.now();
+    createProject(projectName);
+
+    cy.get(".project").first().find(".icon-pin-fill").should("exist");
+    cy.getBySel("pinned-projects").should("contain", projectName);
+
+    //unpin
+    cy.get(".project").first().find(".pin-icon").click();
+    cy.get(".project").first().find(".icon-pin-fill").should("not.exist");
+    cy.getBySel("pinned-projects").should("not.contain", projectName);
+
+    //pin
+    cy.get(".project").first().find(".pin-icon").click();
+    cy.get(".project").first().find(".icon-pin-fill").should("exist");
+    cy.getBySel("pinned-projects").should("contain", projectName);
+
+    //cleanup: delete project
+    deleteFirstProject();
+  });
+
+ });
+
+

frontend/cypress/integration/03-dashboard/teams.spec.js

@@ -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";
+
+ import {
+
+    createTeam,
+    deleteCurrentTeam
+  
+  } from '../../support/utils.js';
+
+
+ describe("teams", () => {
+   beforeEach(() => {
+    cy.fixture('validuser.json').then((user) => {
+        cy.login(user.email, user.password);
+    });
+     
+   });
+
+   it("can create a new team", () => {
+    const teamName = "test team " + Date.now();
+    cy.get(".current-team").click();
+    cy.getBySel("create-new-team").click();
+    cy.get("#name").type(teamName);
+    cy.get("input[type=submit]").click();
+
+    cy.get(".current-team").should("contain", teamName);
+
+    //cleanup
+    deleteCurrentTeam();
+
+  })
+
+   it("can cancel create a new team", () => {
+    cy.get(".current-team").click();
+    cy.getBySel("create-new-team").click();
+    cy.get(".modal-close-button").click();
+
+    cy.get(".current-team").should("contain", "Your Penpot");
+  })
+
+  it("can delete a team", () => {
+    const teamName = "test team " + Date.now();
+    createTeam(teamName);
+
+    cy.get(".icon-actions").first().click();
+    cy.getBySel("delete-team").click();
+    cy.get(".accept-button").click();
+    cy.get(".current-team").should("contain", "Your Penpot");
+  })
+
+  it("can cancel the deletion of a team", () => {
+    const teamName = "test team " + Date.now();
+    createTeam(teamName);
+
+    cy.get(".icon-actions").first().click();
+    cy.getBySel("delete-team").click();
+    cy.get(".cancel-button").click();
+    cy.get(".current-team").should("contain", teamName);
+
+
+    //cleanup
+    deleteCurrentTeam();
+  })
+
+  it("can see the members page of a team", () => {
+    const teamName = "test team " + Date.now();
+    createTeam(teamName);
+
+    cy.get(".icon-actions").first().click();
+    cy.getBySel("team-members").click();
+
+    cy.get(".dashboard-title").should("contain", "Members");
+    cy.fixture('validuser.json').then((user) => {
+        cy.get(".dashboard-table").should("contain", user.email);
+    });
+
+    //cleanup
+    deleteCurrentTeam();
+  })
+
+  it("can invite someone to a team", () => {
+    const teamName = "test team " + Date.now();
+    createTeam(teamName);
+
+    cy.get(".icon-actions").first().click();
+    cy.getBySel("team-members").click();
+
+    cy.getBySel("invite-member").click();
+    cy.get("#email").type("mail@mail.com");
+    cy.get(".custom-select select").select("admin");
+    cy.get("input[type=submit]").click();
+
+    cy.get(".success").should("exist");
+
+    //cleanup
+    deleteCurrentTeam();
+  })
+
+  it("can see the settings page of a team", () => {
+    const teamName = "test team " + Date.now();
+    createTeam(teamName);
+
+    cy.get(".icon-actions").first().click();
+    cy.getBySel("team-settings").click();
+
+    cy.get(".dashboard-title").should("contain", "Settings");
+    
+    cy.get(".team-settings .name").should("contain", teamName);
+    
+    //cleanup
+    deleteCurrentTeam();
+  })
+
+  it("can rename team", () => {
+    const teamName = "test team " + Date.now();
+    const newTeamName = "test team " + Date.now();
+    createTeam(teamName);
+
+    cy.get(".icon-actions").first().click();
+    cy.getBySel("rename-team").click();
+    cy.get("#name").type(newTeamName);
+    cy.get("input[type=submit]").click();
+
+    cy.get(".current-team").should("contain", newTeamName);
+    
+    //cleanup
+    deleteCurrentTeam();
+  })
+
+  it("can cancel the rename of a team", () => {
+    const teamName = "test team " + Date.now();
+    createTeam(teamName);
+
+    cy.get(".icon-actions").first().click();
+    cy.getBySel("rename-team").click();
+    cy.get(".modal-close-button").click();
+
+    cy.get(".current-team").should("contain", teamName);
+    
+    //cleanup
+    deleteCurrentTeam();
+  })
+
+
+  
+
+})

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

@@ -1,25 +0,0 @@
-/**
- * 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("exist");    
-   });
-
- });
- 
- 

frontend/cypress/integration/09-draw/draw-shapes.spec.js

@@ -18,48 +18,48 @@ describe("draw shapes", () => {
   });
 
   it("draw an artboard", () => {
-    cy.get(".viewport-controls rect").should("not.exist");
-    cy.get(".left-toolbar-options li[alt='Artboard (A)']").click();
+    cy.get(".render-shapes rect").should("not.exist");
+    cy.getBySel("artboard-btn").click();
     cy.drawInViewport(300, 300, 400, 450);
-    cy.get(".viewport-controls rect").first().as("artboard");
+    cy.get(".render-shapes 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.get(".render-shapes rect").should("not.exist");
+    cy.getBySel("rect-btn").click();
     cy.drawInViewport(300, 300, 400, 450);
-    cy.get(".viewport-controls rect").should("exist");
-    cy.get(".viewport-controls rect")
+    cy.get(".render-shapes rect").should("exist");
+    cy.get(".render-shapes rect")
       .invoke("attr", "width")
       .should("eq", "100");
-    cy.get(".viewport-controls rect")
+    cy.get(".render-shapes 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.get(".render-shapes ellipse").should("not.exist");
+    cy.getBySel("ellipse-btn").click();
     cy.drawInViewport(300, 300, 400, 450);
-    cy.get(".viewport-controls ellipse").as("ellipse");
+    cy.get(".render-shapes 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.get(".render-shapes path").should("not.exist");
+    cy.getBySel("curve-btn").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(".render-shapes path").as("curve");
     cy.get("@curve").should("exist");
     cy.get("@curve")
       .invoke("attr", "d")
@@ -67,8 +67,8 @@ describe("draw shapes", () => {
   });
 
   it("draw a path", () => {
-    cy.get(".viewport-controls path").should("not.exist");
-    cy.get(".left-toolbar-options li[alt='Path (P)']").click();
+    cy.get(".render-shapes path").should("not.exist");
+    cy.getBySel("path-btn").click();
     cy.clickMultiInViewport([
       { x: 300, y: 300 },
       { x: 350, y: 300 },
@@ -81,7 +81,7 @@ describe("draw shapes", () => {
       true
     );
     cy.clickMultiInViewport([{ x: 300, y: 300 }]);
-    cy.get(".viewport-controls path").as("curve");
+    cy.get(".render-shapes path").as("curve");
     cy.get("@curve").should("exist");
     cy.get("@curve")
       .invoke("attr", "d")

frontend/cypress/support/commands.js

@@ -88,7 +88,7 @@ Cypress.Commands.add('clickMultiInViewport', (coords) => {
 Cypress.Commands.add('clearViewport', () => {
    cy.get(".viewport-controls").type('{ctrl}a');
    cy.get(".viewport-controls").type('{del}');
-   cy.window().its("debug").invoke('reset_viewport')
+   cy.window().its("debug").invoke('reset_viewport');
 })
 
 Cypress.Commands.add('getBySel', (selector, ...args) => {
@@ -97,4 +97,18 @@ Cypress.Commands.add('getBySel', (selector, ...args) => {
 
 Cypress.Commands.add('getBySelLike', (selector, ...args) => {
    return cy.get(`[data-test*=${selector}]`, ...args)
-})
+})
+
+Cypress.Commands.add('uploadBinaryFile', (fileInputSelector, fileName) => {
+   cy.fixture(fileName, "binary")
+   .then(Cypress.Blob.binaryStringToBlob)
+   .then(fileContent => {
+      cy.get(fileInputSelector).attachFile({
+         fileContent,
+         filePath: fileName,
+         encoding: 'utf-8',
+         lastModified: new Date().getTime()
+      });
+   });
+})
+

frontend/cypress/support/utils.js

@@ -5,8 +5,71 @@ export const checkOnboardingSlide = (number, checkSkip) => {
     cy.getBySel(`slide-${number}-btn`).should("exist");
     cy.getBySel(`slide-${number}-btn`).click();
 };
+export const deleteFirstProject = () => {
+    cy.get('.project').first().find("[data-test=project-options]").click();
+    cy.wait(500);
+    cy.get('.project').first().find("[data-test=project-delete]").click();
+    cy.wait(500);
+    cy.get('.accept-button').click();
+ }
+
+ export const createProject = (projectName="") => {
+    cy.getBySel("new-project-button").click();
+    cy.wait(500);
+    cy.get('.project').first().find(".edit-wrapper").type(projectName + "{enter}");
+    cy.wait(500);
+ }
+ 
+
+ export const deleteFirstFile = () => {
+   cy.get('.menu')
+   .first()
+   .trigger('mouseover')
+   .click();
+   cy.getBySel("file-delete").click();
+   cy.get('.accept-button').click();
+ }
+
+
+ export const createFile = (fileName="", projectNum=0) => {   
+   cy.getBySel("new-file").click();
+   cy.wait(500);
+   if (fileName !=""){
+      cy.get('.menu')
+      .first()
+      .trigger('mouseover')
+      .click();
+      cy.getBySel("file-rename").click();
+      cy.get(".edit-wrapper").type(fileName + "{enter}");
+      //TODO: Bug workaround. When a file is selected, it doesn't open context menu
+      cy.get(".dashboard-grid").click();
+   }
+ }
+
+ export const createTeam = (teamName) => {
+   cy.get(".current-team").click();
+    cy.getBySel("create-new-team").click();
+    cy.get("#name").type(teamName);
+    cy.get("input[type=submit]").click();
+    cy.wait(500);
+ }
+ 
+ export const deleteCurrentTeam = () => {
+   cy.get(".icon-actions").first().click();
+   cy.getBySel("delete-team").click();
+   cy.get(".accept-button").click();
+ }
+
+
+
 
 export const goToSlideByNumber = (number) => {
     cy.get(`.step-dots li:nth-child(${number})`).click();
     cy.getBySel(`slide-${number -1}-btn`).should("exist");
+};
+
+export const deleteFirstFont = () => {
+  cy.get(".font-item .options").first().click();
+  cy.getBySel("font-delete").click();
+  cy.get(".accept-button").click();
 };