Cypress test for the manage users page (ToolJet#3187)

* Added cypress test for manage users page

* Updated common text file

* Updated common utils file

* Added data-cy attributes for the elements

* Modified cypress test for manage users

* Added data-cy attributes for elements

cypress/constants/selectors/manageUsers.js

@@ -0,0 +1,50 @@
+export const usersSelector ={
+  dropdown: "[data-cy=workspace-dropdown]",
+  inviteUserButton:"[data-cy=invite-new-user]",
+  usersElements:{
+    pageTitle: "[data-cy=users-page-title]",
+    nameTitile: "[data-cy=name-title]",
+    emailTitle: "[data-cy=email-title]",
+    statusTitle: "[data-cy=status-title]",
+    userName: "[data-cy=user-name]:eq(0)",
+    userEmail: "[data-cy=user-email]:eq(0)",
+    userStatus: "[data-cy=user-status]:eq(0)",
+    userState: "[data-cy=user-state]:eq(0)",
+  },
+  userStatus: "[data-cy=user-status]",
+  cardTitle: "[data-cy=add-new-user]",
+  firstNameInput: "[data-cy=first-name-input]",
+  lastNameInput: "[data-cy=last-name-input]",
+  emailLabel: "[data-cy=email-label]",
+  emailInput: "[data-cy=email-input]",
+  cancelButton: "[data-cy=cancel-button]",
+  createUserButton: "[data-cy=create-user-button]",
+  fisrtNameError: "[data-cy=first-name-error]",
+  lastNameError: "[data-cy=last-name-error]",
+  emailError: "[data-cy=email-error]",
+  confirmInvitePage: "[data-cy=confirm-invite-container]",
+  pageLogo: "[data-cy=page-logo]",
+  confirmInviteElements:{
+    cardTitle: "[data-cy=card-title]",
+    firstNameLabel: "[data-cy=first-name-label]",
+    lastNameLabel:"[data-cy=last-name-label]",
+    companyLabel: "[data-cy=company-label]",
+    roleLable: "[data-cy=role-label]",
+    passwordLabel: "[data-cy=password-label]",
+    confirmpasswordLabel: "[data-cy=confirm-password-label]",
+    termsInfo: "[data-cy=terms-and-condition-info]",
+  },
+  acceptInvite: "[data-cy=accept-invite-button]",
+  firstNameField: "[data-cy=first-name-input]",
+  lastNameField: "[data-cy=last-name-input]",
+  workspaceField: "[data-cy=workspace-input]",
+  roleOptions: "[data-cy=role-options]",
+  passwordInput: "[data-cy=password-input]",
+  confirmPasswordInput: "[data-cy=confirm-password-input]",
+  finishSetup: "[data-cy=finish-setup-button]",
+  emptyImage: "[data-cy=empty-img]",
+  manageUsers: "[data-cy=manage-users]",
+  createNewApp: "[data-cy=create-new-application]",
+  dropdownText: "[data-cy=dropdown-organization-list]>>:eq(0)",
+  arrowIcon: "[data-cy=workspace-arrow-icon]",
+}

cypress/constants/texts/common.js

@@ -1,12 +1,14 @@
 export const path={
+    loginPath:"/login",
     loginPath: "/login",
-    profilePath: "/settings"
+    profilePath: "/settings",
+    manageUsers: "/users",
+    confirmInvite: "/confirm-invite"
 }
 
 export const commonText={
     autoSave: "All changes are saved",
     email: "dev@tooljet.io",
-    password: "password"
-}
-
-
+    password: "password",
+    loginErrorToast:"Invalid email or password",
+}

cypress/constants/texts/manageUsers.js

@@ -0,0 +1,44 @@
+export const usersText = {
+  usersElements:{
+    pageTitle: "Users & Permissions",
+    nameTitile: "Name",
+    emailTitle: "Email",
+    statusTitle: "Status",
+    userName: "The Developer",
+    userEmail: "dev@tooljet.io",
+    userStatus: "active",
+    userState: "Archive",
+  },
+  inviteUserButton:"Invite new user",
+  cardTitle: "Add new user",
+  emailLabel: "Email address",
+  cancelButton: "Cancel",
+  createUserButton: "Create User",
+  fieldRequired: "This field is required",
+  exsitingEmail: "User with such email already exists.",
+  inviteCopiedToast: "Invitation URL copied",
+  confirmInviteElements:{
+    cardTitle: "Set up your account",
+    firstNameLabel: "First name",
+    lastNameLabel: "Last name",
+    companyLabel: "Company",
+    roleLable: "Role",
+    passwordLabel: "Password",
+    confirmpasswordLabel: "Confirm Password",
+    termsInfo: "By clicking the button below, you agree to our Terms and Conditions.",
+  },
+  acceptInvite: "Accept invite",
+  acceptInviteErrorToast: "User not exist in the workspace, Please setup your account using link shared via email",
+  finishSetup: "Finish account setup",
+  password: "password",
+  mismatchPassword: "newpassword",
+  passwordErrToast:"Password shouldn't be empty or contain white space(s)",
+  passwordMismatchToast: "Passwords don't match",
+  passwordSuccessToast: "Account has been setup successfully.",
+  createAppPermissionToast: "You do not have permissions to perform this action",
+  activeStatus: "active",
+  archivedStatus: "archived",
+  invitedStatus: "invited",
+  archivedToast: "The user has been archived",
+  inviteToast: "Added to the workspace successfully."
+}

cypress/fixtures/fake.js

@@ -13,7 +13,14 @@ function firstName(){
 function lastName(){
   return (faker.name.lastName());
 }
+function companyName(){
+  return (faker.company.companyName());
+}
 Object.defineProperty(fake, "email", {get:email});
 Object.defineProperty(fake, "password", {get:password});
 Object.defineProperty(fake, "firstName", {get:firstName});
-Object.defineProperty(fake, "lastName", {get:lastName});
+Object.defineProperty(fake, "lastName", {get:lastName});
+Object.defineProperty(fake, "companyName", {get:companyName});
+
+
+

cypress/integration/dashboard/manageUsers.spec.js

@@ -0,0 +1,195 @@
+import {commonSelectors} from "Selectors/common";
+import { fake } from "Fixtures/fake";
+import { usersSelector } from "Selectors/manageUsers";
+import { usersText } from "Texts/manageUsers";
+import * as users from "Support/utils/manageUsers";
+import * as common from "Support/utils/common";
+import { path } from "Texts/common";
+
+const firstName = fake.firstName;
+const lastName = fake.lastName.replaceAll("[^A-Za-z]", "");
+const email = (`${firstName}@example.com`).toLowerCase();
+const newEmail = (`${lastName}@example.com`).toLowerCase();
+const companyName = fake.companyName;
+
+describe("Manage Users for multiple workspace", ()=>{
+ before(()=>{
+   cy.appUILogin();
+ });
+ it("Should verify the Manage users page", ()=>{
+  common.navigateToManageUsers();
+  users.manageUsersElements();
+
+  cy.get(usersSelector.cancelButton).click();
+  cy.get(usersSelector.usersElements.nameTitile).should("be.visible");
+  cy.get(usersSelector.inviteUserButton).click();
+
+  cy.get(usersSelector.createUserButton).click();
+  cy.get(usersSelector.fisrtNameError).should("be.visible").and("have.text", usersText.fieldRequired);
+  cy.get(usersSelector.lastNameError).should("be.visible").and("have.text", usersText.fieldRequired);
+  cy.get(usersSelector.emailError).should("be.visible").and("have.text", usersText.fieldRequired);
+
+  cy.clearAndType(usersSelector.firstNameInput, firstName);
+  cy.get(usersSelector.lastNameInput).clear();
+  cy.get(usersSelector.emailInput).clear();
+  cy.get(usersSelector.createUserButton).click();
+  cy.get(usersSelector.lastNameError).should("be.visible").and("have.text", usersText.fieldRequired);
+  cy.get(usersSelector.emailError).should("be.visible").and("have.text", usersText.fieldRequired);
+
+  cy.get(usersSelector.firstNameInput).clear();
+  cy.get(usersSelector.emailInput).clear();
+  cy.clearAndType(usersSelector.lastNameInput, lastName);
+  cy.get(usersSelector.createUserButton).click();
+  cy.get(usersSelector.fisrtNameError).should("be.visible").and("have.text", usersText.fieldRequired);
+  cy.get(usersSelector.emailError).should("be.visible").and("have.text", usersText.fieldRequired);
+
+  cy.get(usersSelector.firstNameInput).clear();
+  cy.get(usersSelector.lastNameInput).clear();
+  cy.clearAndType(usersSelector.emailInput, email);
+  cy.get(usersSelector.createUserButton).click();
+  cy.get(usersSelector.fisrtNameError).should("be.visible").and("have.text", usersText.fieldRequired);
+  cy.get(usersSelector.lastNameError).should("be.visible").and("have.text", usersText.fieldRequired);
+
+  cy.get(usersSelector.firstNameInput).clear();
+  cy.clearAndType(usersSelector.lastNameInput, lastName);
+  cy.clearAndType(usersSelector.emailInput, email);
+  cy.get(usersSelector.createUserButton).click();
+  cy.get(usersSelector.fisrtNameError).should("be.visible").and("have.text", usersText.fieldRequired);
+
+  cy.get(usersSelector.lastNameInput).clear();
+  cy.clearAndType(usersSelector.firstNameInput, firstName);
+  cy.clearAndType(usersSelector.emailInput, email);
+  cy.get(usersSelector.createUserButton).click();
+  cy.get(usersSelector.lastNameError).should("be.visible").and("have.text", usersText.fieldRequired);
+
+  cy.get(usersSelector.emailInput).clear();
+  cy.clearAndType(usersSelector.firstNameInput, firstName);
+  cy.clearAndType(usersSelector.lastNameInput, lastName);
+  cy.get(usersSelector.createUserButton).click();
+  cy.get(usersSelector.emailError).should("be.visible").and("have.text", usersText.fieldRequired);
+
+  cy.clearAndType(usersSelector.firstNameInput, firstName);
+  cy.clearAndType(usersSelector.lastNameInput, lastName);
+  cy.clearAndType(usersSelector.emailInput, usersText.usersElements.userEmail);
+  cy.get(usersSelector.createUserButton).click();
+  cy.verifyToastMessage(commonSelectors.toastMessage, usersText.exsitingEmail);
+ });
+
+ it("Should verify the confirm invite page", ()=>{
+  users.inviteUser(firstName,lastName,newEmail);
+  cy.get(usersSelector.acceptInvite).click();
+  cy.verifyToastMessage(commonSelectors.toastMessage, usersText.acceptInviteErrorToast);
+
+  cy.appUILogin();
+  common.navigateToManageUsers();
+  cy.get(usersSelector.inviteUserButton).click();
+  users.addNewUser(firstName,lastName,email);
+  users.confirmInviteElements();
+
+  cy.get(usersSelector.finishSetup).click();
+  cy.verifyToastMessage(commonSelectors.toastMessage, usersText.passwordErrToast);
+  cy.get(usersSelector.passwordInput).should("have.value", "");
+  cy.get(usersSelector.confirmPasswordInput).should("have.value", "");
+
+  cy.clearAndType(usersSelector.firstNameField, firstName);
+  cy.clearAndType(usersSelector.lastNameField, lastName);
+  cy.clearAndType(usersSelector.workspaceField, companyName);
+  cy.get(usersSelector.roleOptions).select("Developer");
+  cy.clearAndType(usersSelector.passwordInput, usersText.password);
+  cy.get(usersSelector.finishSetup).click();
+  cy.verifyToastMessage(commonSelectors.toastMessage, usersText.passwordErrToast);
+  cy.get(usersSelector.passwordInput).should("have.value", usersText.password);
+  cy.get(usersSelector.confirmPasswordInput).should("have.value", "");
+
+  cy.get(usersSelector.passwordInput).clear();
+  cy.clearAndType(usersSelector.confirmPasswordInput, usersText.password);
+  cy.get(usersSelector.finishSetup).click();
+  cy.verifyToastMessage(commonSelectors.toastMessage, usersText.passwordErrToast);
+  cy.get(usersSelector.passwordInput).should("have.value", "");
+  cy.get(usersSelector.confirmPasswordInput).should("have.value", usersText.password);
+
+  cy.clearAndType(usersSelector.passwordInput, usersText.password);
+  cy.clearAndType(usersSelector.confirmPasswordInput, usersText.mismatchPassword);
+  cy.get(usersSelector.finishSetup).click();
+  cy.verifyToastMessage(commonSelectors.toastMessage, usersText.passwordMismatchToast);
+  cy.get(usersSelector.passwordInput).should("have.value", usersText.password);
+  cy.get(usersSelector.confirmPasswordInput).should("have.value", usersText.mismatchPassword);
+
+  cy.clearAndType(usersSelector.passwordInput, usersText.password);
+  cy.clearAndType(usersSelector.confirmPasswordInput, usersText.password);
+  cy.get(usersSelector.finishSetup).click();
+  cy.verifyToastMessage(commonSelectors.toastMessage, usersText.passwordSuccessToast);
+  cy.url().should("include",path.loginPath);
+ });
+
+ it("should verify the new user account", ()=>{
+  cy.login(email,usersText.password);
+  cy.get(usersSelector.emptyImage).should("be.visible");
+  cy.get(usersSelector.dropdownText).should('be.visible').and('have.text', companyName);
+  cy.get(usersSelector.dropdown).invoke("show");
+  cy.get(usersSelector.arrowIcon).click();
+  cy.contains("My workspace").should('be.visible');
+  common.logout();
+
+  cy.appUILogin();
+  common.navigateToManageUsers();
+  cy.contains('td', email).parent().within(() => {
+   cy.get('td small').should("have.text", usersText.activeStatus);
+  });
+ });
+
+ it("Should verify the archive functionality",()=>{
+  cy.contains('td', email).parent().within(() => {
+   cy.get('td button').click();
+  });
+  cy.verifyToastMessage(commonSelectors.toastMessage,usersText.archivedToast);
+
+  cy.contains('td', email).parent().within(() => {
+   cy.get(usersSelector.userStatus, { timeout: 9000 }).should("have.text", usersText.archivedStatus);
+  });
+
+  common.logout();
+  cy.clearAndType(commonSelectors.emailField, email);
+  cy.clearAndType(commonSelectors.passwordField, usersText.password);
+  cy.get(commonSelectors.signInButton).click();
+  cy.get(usersSelector.dropdown).invoke("show");
+  cy.get(usersSelector.arrowIcon).click();
+  cy.contains("My workspace").should("not.exist");
+  common.logout();
+
+  cy.appUILogin();
+  common.navigateToManageUsers();
+  cy.contains('td', email).parent().within(() => {
+   cy.get('td button').click();
+  });
+
+  cy.wait(2000);
+  cy.window().then(win => {
+    cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPrompt');
+   });
+   cy.contains('td', email).parent().within(() => {
+   cy.get('td img').click();
+   });
+   cy.verifyToastMessage(commonSelectors.toastMessage, usersText.inviteCopiedToast);
+
+  cy.contains('td', email).parent().within(() => {
+   cy.get(usersSelector.userStatus, { timeout: 9000 }).should("have.text", usersText.invitedStatus);
+  });
+
+  cy.get('@copyToClipboardPrompt').then(prompt => {
+   common.logout();
+   cy.visit(prompt.args[0][1]);
+   cy.url().should("include",path.confirmInvite);
+  });
+
+  cy.get(usersSelector.acceptInvite).click();
+  cy.verifyToastMessage(commonSelectors.toastMessage, usersText.inviteToast);
+  cy.url().should("include",path.loginPath);
+
+  cy.appUILogin();
+  common.navigateToManageUsers();
+  cy.contains('td', email).parent().within(() => {
+   cy.get('td small').should("have.text", usersText.activeStatus);
+  });
+ });
+});

cypress/support/utils/common.js

@@ -1,4 +1,5 @@
 import { path } from "Texts/common";
+import { usersSelector } from "Selectors/manageUsers";
 import { profileSelector } from "Selectors/profile";
 
 export const navigateToProfile=()=>{
@@ -11,4 +12,10 @@ export const logout=()=>{
  cy.get(profileSelector.profileDropdown).invoke("show");
  cy.contains("Logout").click();
  cy.url().should("include",path.loginPath);
+};
+
+export const navigateToManageUsers=()=>{
+ cy.get(usersSelector.dropdown).invoke("show");
+ cy.contains("Manage Users").click();
+ cy.url().should("include",path.manageUsers );
 };