Cypress 2608 staff member tests (#2902)

* fix existing

* add SALEOR_3508

* add data-test-id needed for 3509

* add TODOs

* 3509 done, work on 3510

* done 3510

* found bug blocking test 3507, gh 2847

* pr review adjustments

* pr adjustments

* additional pr adjustments

cypress/e2e/catalog/giftCards/exportGiftCards.js

@@ -9,7 +9,10 @@ import { ASSIGN_ELEMENTS_SELECTORS } from "../../../elements/shared/assign-eleme
 import { BUTTON_SELECTORS } from "../../../elements/shared/button-selectors";
 import { TEST_ADMIN_USER } from "../../../fixtures/users";
 import { createGiftCard } from "../../../support/api/requests/GiftCard";
-import { updatePlugin } from "../../../support/api/requests/Plugins";
+import {
+  activatePlugin,
+  updatePlugin,
+} from "../../../support/api/requests/Plugins";
 import { deleteGiftCardsWithTagStartsWith } from "../../../support/api/utils/catalog/giftCardUtils";
 import { getMailWithGiftCardExportWithAttachment } from "../../../support/api/utils/users";
 import { enterAndSelectGiftCards } from "../../../support/pages/catalog/giftCardPage";
@@ -19,6 +22,7 @@ describe("As an admin I want to export gift card", () => {
 
   before(() => {
     cy.clearSessionData().loginUserViaRequest();
+    activatePlugin({ id: "mirumee.notifications.admin_email" });
     deleteGiftCardsWithTagStartsWith(startsWith);
   });
 

cypress/e2e/staffMembers.js

@@ -6,9 +6,11 @@ import faker from "faker";
 import { LEFT_MENU_SELECTORS } from "../elements/account/left-menu/left-menu-selectors";
 import { LOGIN_SELECTORS } from "../elements/account/login-selectors";
 import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import { SHARED_ELEMENTS } from "../elements/shared/sharedElements";
 import { STAFF_MEMBER_DETAILS } from "../elements/staffMembers/staffMemberDetails";
 import { STAFF_MEMBERS_LIST } from "../elements/staffMembers/staffMembersList";
 import { urlList, userDetailsUrl } from "../fixtures/urlList";
+import { TEST_ADMIN_USER } from "../fixtures/users";
 import { activatePlugin, updatePlugin } from "../support/api/requests/Plugins";
 import {
   deleteStaffMembersStartsWith,
@@ -22,8 +24,9 @@ import {
 import { expectWelcomeMessageIncludes } from "../support/pages/homePage";
 import { getDisplayedSelectors } from "../support/pages/permissionsPage";
 import {
+  fillUpOnlyUserDetails,
   fillUpSetPassword,
-  fillUpUserDetails,
+  fillUpUserDetailsAndAddFirstPermission,
   updateUserActiveFlag,
 } from "../support/pages/userPage";
 
@@ -32,6 +35,7 @@ describe("Staff members", () => {
   const password = Cypress.env("USER_PASSWORD");
   const lastName = faker.name.lastName();
   const email = `${startsWith}${lastName}@example.com`;
+
   let user;
 
   before(() => {
@@ -55,25 +59,29 @@ describe("Staff members", () => {
     cy.clearSessionData().loginUserViaRequest();
   });
 
-  it("should invite user", { tags: ["@staffMembers", "@stagedOnly"] }, () => {
+  it(
-    const firstName = faker.name.firstName();
+    "should be able to invite staff user. TC: SALEOR_3501",
-    const emailInvite = `${startsWith}${firstName}@example.com`;
+    { tags: ["@staffMembers", "@stagedOnly", "@allenv"] },
+    () => {
+      const firstName = faker.name.firstName();
+      const emailInvite = `${startsWith}${firstName}@example.com`;
 
-    cy.visit(urlList.staffMembers)
+      cy.visit(urlList.staffMembers)
-      .expectSkeletonIsVisible()
+        .expectSkeletonIsVisible()
-      .get(STAFF_MEMBERS_LIST.inviteStaffMemberButton)
+        .get(STAFF_MEMBERS_LIST.inviteStaffMemberButton)
-      .click();
+        .click({ force: true });
-    fillUpUserDetails(firstName, lastName, emailInvite);
+      fillUpUserDetailsAndAddFirstPermission(firstName, lastName, emailInvite);
-    getMailActivationLinkForUser(emailInvite).then(urlLink => {
+      getMailActivationLinkForUser(emailInvite).then(urlLink => {
-      cy.clearSessionData().visit(urlLink);
+        cy.clearSessionData().visit(urlLink);
-      fillUpSetPassword(password);
+        fillUpSetPassword(password);
-      expectWelcomeMessageIncludes(`${firstName} ${lastName}`);
+        expectWelcomeMessageIncludes(`${firstName} ${lastName}`);
-    });
+      });
-  });
+    },
+  );
 
   it(
-    "should deactivate user",
+    "should deactivate user. TC: SALEOR_3502",
-    { tags: ["@staffMembers", "@stagedOnly"] },
+    { tags: ["@staffMembers", "@stagedOnly", "@allenv"] },
     () => {
       updateStaffMember({ userId: user.id, isActive: true });
       updateUserActiveFlag(user.id);
@@ -90,20 +98,24 @@ describe("Staff members", () => {
     },
   );
 
-  it("should activate user", { tags: ["@staffMembers", "@stagedOnly"] }, () => {
+  it(
-    const serverStoredEmail = email.toLowerCase();
+    "should activate user. TC: SALEOR_3503",
+    { tags: ["@staffMembers", "@stagedOnly", "@allenv"] },
+    () => {
+      const serverStoredEmail = email.toLowerCase();
 
-    updateStaffMember({ userId: user.id, isActive: false });
+      updateStaffMember({ userId: user.id, isActive: false });
-    updateUserActiveFlag(user.id);
+      updateUserActiveFlag(user.id);
-    cy.clearSessionData()
+      cy.clearSessionData()
-      .loginUserViaRequest("auth", { email, password })
+        .loginUserViaRequest("auth", { email, password })
-      .visit(urlList.homePage);
+        .visit(urlList.homePage);
-    expectWelcomeMessageIncludes(serverStoredEmail);
+      expectWelcomeMessageIncludes(serverStoredEmail);
-  });
+    },
+  );
 
   it(
-    "should remove user permissions",
+    "should remove user permissions. TC: SALEOR_3504",
-    { tags: ["@staffMembers", "@stagedOnly"] },
+    { tags: ["@staffMembers", "@stagedOnly", "@allenv"] },
     () => {
       const serverStoredEmail = email.toLowerCase();
 
@@ -129,8 +141,8 @@ describe("Staff members", () => {
   );
 
   it(
-    "should reset password",
+    "should reset password. TC: SALEOR_3505",
-    { tags: ["@staffMembers", "@stagedOnly"] },
+    { tags: ["@staffMembers", "@stagedOnly", "@allenv"] },
     () => {
       const newPassword = faker.random.alphaNumeric(8);
       updatePlugin(
@@ -163,4 +175,145 @@ describe("Staff members", () => {
         });
     },
   );
+
+  it(
+    "should not be able to create staff member with not unique email. TC: SALEOR_3508",
+    { tags: ["@staffMembers", "@stagedOnly", "@allenv"] },
+    () => {
+      const firstName = faker.name.firstName();
+      const emailInvite = TEST_ADMIN_USER.email;
+      cy.visit(urlList.staffMembers)
+        .expectSkeletonIsVisible()
+        .get(STAFF_MEMBERS_LIST.inviteStaffMemberButton)
+        .click({ force: true });
+      fillUpOnlyUserDetails(firstName, lastName, emailInvite);
+      cy.confirmationErrorMessageShouldAppear();
+    },
+  );
+
+  it(
+    "should not be able to update staff member with not unique email. TC: SALEOR_3509",
+    { tags: ["@staffMembers", "@stagedOnly", "@allenv"] },
+    () => {
+      cy.visit(urlList.staffMembers)
+        .expectSkeletonIsVisible()
+        .get(SHARED_ELEMENTS.searchInput)
+        .type(`${email} {enter}`);
+      cy.waitForProgressBarToNotExist();
+      cy.get(STAFF_MEMBERS_LIST.staffAvatar)
+        .first()
+        .should("be.visible");
+      cy.waitForProgressBarToNotExist()
+        .get(STAFF_MEMBERS_LIST.staffStatusText)
+        .first()
+        .should("be.visible")
+        .click();
+      cy.get(STAFF_MEMBER_DETAILS.staffEmail)
+        .click()
+        .clear()
+        .type(`${TEST_ADMIN_USER.email} {enter}`)
+        .get(BUTTON_SELECTORS.confirm)
+        .click()
+        .confirmationErrorMessageShouldAppear();
+    },
+  );
+
+  // Test blocked by https://github.com/saleor/saleor-dashboard/issues/2847
+  it.skip(
+    "should update staff member name and email. TC: SALEOR_3507",
+    { tags: ["@staffMembers", "@stagedOnly", "@allenv"] },
+    () => {
+      const newLastName = faker.name.lastName();
+      const newEmail = `${startsWith}${newLastName}@example.com`;
+      const changedName = faker.name.lastName();
+      const changedEmail = `${startsWith}${changedName}@example.com`;
+
+      inviteStaffMemberWithFirstPermission({ email: newEmail })
+        .then(({ user: userResp }) => {
+          user = userResp;
+          getMailActivationLinkForUser(newEmail);
+        })
+        .then(urlLink => {
+          cy.clearSessionData().visit(urlLink);
+          fillUpSetPassword(password);
+          cy.clearSessionData();
+        });
+
+      cy.clearSessionData().loginUserViaRequest("auth", {
+        email: newEmail,
+        password: Cypress.env("USER_PASSWORD"),
+      });
+
+      cy.visit(urlList.staffMembers)
+        .get(LOGIN_SELECTORS.userMenu)
+        .click();
+      cy.get(LOGIN_SELECTORS.accountSettings).click();
+      cy.get(STAFF_MEMBER_DETAILS.staffFirstName)
+        .clear()
+        .type("สมชาย");
+      cy.get(STAFF_MEMBER_DETAILS.staffLastName)
+        .clear()
+        .type(newLastName);
+      cy.get(STAFF_MEMBER_DETAILS.staffEmail)
+        .clear()
+        .type(changedEmail);
+
+      // Test blocked from this point by https://github.com/saleor/saleor-dashboard/issues/2847
+      cy.get(BUTTON_SELECTORS.confirm).confirmationMessageShouldAppear();
+      cy.clearSessionData().loginUserViaRequest("auth", {
+        email: changedEmail,
+        password: Cypress.env("USER_PASSWORD"),
+      });
+
+      cy.visit(urlList.staffMembers);
+      expectWelcomeMessageIncludes(`${changedName}`);
+    },
+  );
+
+  it(
+    "should create new user and successfully change password. TC: SALEOR_3510",
+    { tags: ["@staffMembers", "@stagedOnly", "@allenv"] },
+    () => {
+      const newPass = "newTestPass";
+      const newLastName = faker.name.lastName();
+      const newEmail = `${startsWith}${newLastName}@example.com`;
+
+      inviteStaffMemberWithFirstPermission({ email: newEmail })
+        .then(({ user: userResp }) => {
+          user = userResp;
+          getMailActivationLinkForUser(newEmail);
+        })
+        .then(urlLink => {
+          cy.clearSessionData().visit(urlLink);
+          fillUpSetPassword(password);
+          cy.clearSessionData();
+        });
+
+      cy.clearSessionData().loginUserViaRequest("auth", {
+        email: newEmail,
+        password: Cypress.env("USER_PASSWORD"),
+      });
+
+      cy.visit(urlList.staffMembers)
+        .get(LOGIN_SELECTORS.userMenu)
+        .click();
+      cy.get(LOGIN_SELECTORS.accountSettings).click();
+      cy.get(STAFF_MEMBER_DETAILS.changePasswordBtn).click();
+      cy.get(STAFF_MEMBER_DETAILS.changePasswordModal.oldPassword).type(
+        Cypress.env("USER_PASSWORD"),
+      );
+      cy.get(STAFF_MEMBER_DETAILS.changePasswordModal.newPassword).type(
+        newPass,
+      );
+      cy.get(BUTTON_SELECTORS.submit)
+        .click()
+        .confirmationMessageShouldAppear();
+
+      cy.clearSessionData().loginUserViaRequest("auth", {
+        email: newEmail,
+        password: newPass,
+      });
+      cy.visit(urlList.staffMembers).expectSkeletonIsVisible();
+    },
+  );
 });

cypress/elements/shared/sharedElements.js

@@ -7,6 +7,7 @@ export const SHARED_ELEMENTS = {
   table: 'table[class*="Table"]',
   tableRow: '[data-test-id*="id"], [class*="MuiTableRow"]',
   notificationSuccess: '[data-test="notification"][data-test-type="success"]',
+  notificationFailure: '[data-test="notification"][data-test-type="error"]',
   dialog: '[role="dialog"]',
   searchInput: '[data-test-id="search-input"]',
   selectOption: '[data-test-id*="select-field-option"]',

cypress/elements/staffMembers/staffMemberDetails.js

@@ -1,5 +1,13 @@
 export const STAFF_MEMBER_DETAILS = {
   permissionsSelect: '[data-test-id="permission-groups"]',
   isActiveCheckBox: '[name="isActive"]',
-  removePermissionButton: '[data-test-id="remove"]'
+  removePermissionButton: '[data-test-id="remove"]',
+  staffEmail: '[data-test-id="staffEmail"]',
+  staffFirstName: '[data-test-id="staffFirstName"]',
+  staffLastName: '[data-test-id="staffLastName',
+  changePasswordBtn: '[data-test-id="changePasswordBtn"]',
+  changePasswordModal: {
+    oldPassword: 'input[name="oldPassword"]',
+    newPassword: 'input[name="newPassword"]',
+  },
 };

cypress/elements/staffMembers/staffMembersList.js

@@ -1,3 +1,5 @@
 export const STAFF_MEMBERS_LIST = {
-  inviteStaffMemberButton: '[data-test-id="invite-staff-member"]'
+  inviteStaffMemberButton: '[data-test-id="invite-staff-member"]',
+  staffStatusText: '[data-test-id="staffStatusText"]',
+  staffAvatar: '[data-test-id="staffAvatar"]',
 };

cypress/support/api/requests/Plugins.js

@@ -25,7 +25,7 @@ export function activatePlugin({ id, channel, active = true }) {
 
   const mutation = `mutation{
     pluginUpdate(id: "${id}" ${channelLine} input:{
-      active:${active},configuration:
+      active:${active}
     }){
       errors{
         field

cypress/support/customCommands/sharedElementsOperations/confirmationMessages.js

@@ -10,3 +10,7 @@ Cypress.Commands.add("confirmationMessageShouldDisappear", () => {
 Cypress.Commands.add("confirmationMessageShouldAppear", () => {
   cy.get(SHARED_ELEMENTS.notificationSuccess).should("be.visible");
 });
+
+Cypress.Commands.add("confirmationErrorMessageShouldAppear", () => {
+  cy.get(SHARED_ELEMENTS.notificationFailure).should("be.visible");
+});

cypress/support/pages/userPage.js

@@ -15,16 +15,13 @@ export function fillUpSetPassword(password) {
     .waitForRequestAndCheckIfNoErrors("@setPassword");
 }
 
-export function fillUpUserDetails(firstName, lastName, email) {
+export function fillUpUserDetailsAndAddFirstPermission(
-  cy.get(INVITE_STAFF_MEMBER_FORM.firstNameInput)
+  firstName,
-    .type(firstName)
+  lastName,
-    .get(INVITE_STAFF_MEMBER_FORM.lastNameInput)
+  email,
-    .type(lastName)
+) {
-    .get(INVITE_STAFF_MEMBER_FORM.emailInput)
+  fillUpOnlyUserDetails(firstName, lastName, email);
-    .type(email)
+  cy.confirmationMessageShouldDisappear()
-    .get(BUTTON_SELECTORS.submit)
-    .click()
-    .confirmationMessageShouldDisappear()
     .fillAutocompleteSelect(STAFF_MEMBER_DETAILS.permissionsSelect)
     .get(STAFF_MEMBER_DETAILS.permissionsSelect)
     .find("input")
@@ -36,6 +33,17 @@ export function fillUpUserDetails(firstName, lastName, email) {
     .waitForRequestAndCheckIfNoErrors("@StaffMemberUpdate");
 }
 
+export function fillUpOnlyUserDetails(firstName, lastName, email) {
+  cy.get(INVITE_STAFF_MEMBER_FORM.firstNameInput)
+    .type(firstName)
+    .get(INVITE_STAFF_MEMBER_FORM.lastNameInput)
+    .type(lastName)
+    .get(INVITE_STAFF_MEMBER_FORM.emailInput)
+    .type(email)
+    .get(BUTTON_SELECTORS.submit)
+    .click();
+}
+
 export function updateUserActiveFlag(userId) {
   cy.visitAndWaitForProgressBarToDisappear(userDetailsUrl(userId))
     .get(STAFF_MEMBER_DETAILS.isActiveCheckBox)

package-lock.json

@@ -35,6 +35,7 @@
         "color-convert": "^2.0.1",
         "crc-32": "^1.2.0",
         "currency-codes": "^2.1.0",
+        "cypress-repeat": "^2.3.3",
         "downshift": "^6.1.7",
         "editorjs-inline-tool": "^0.4.0",
         "faker": "^5.1.0",
@@ -14284,8 +14285,7 @@
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
-      "devOptional": true
     },
     "node_modules/blueimp-md5": {
       "version": "2.18.0",
@@ -17042,6 +17042,52 @@
         "mocha": ">=3.1.2"
       }
     },
+    "node_modules/cypress-repeat": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/cypress-repeat/-/cypress-repeat-2.3.3.tgz",
+      "integrity": "sha512-DoPiN5A/SMC9p6B2lRbvOxQvQUS6LO8Zeblkc3ZQQl5cQMmGBa15EOMLdBpQ1ctjOgssvcYawodBkxiNMHI49g==",
+      "dependencies": {
+        "arg": "5.0.2",
+        "bluebird": "3.7.2",
+        "debug": "4.3.4",
+        "dotenv": "8.2.0"
+      },
+      "bin": {
+        "cypress-repeat": "index.js"
+      },
+      "peerDependencies": {
+        "cypress": ">=5.3.0"
+      }
+    },
+    "node_modules/cypress-repeat/node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
+    "node_modules/cypress-repeat/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cypress-repeat/node_modules/dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/cypress-timings": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/cypress-timings/-/cypress-timings-1.0.0.tgz",
@@ -55627,8 +55673,7 @@
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
-      "devOptional": true
     },
     "blueimp-md5": {
       "version": "2.18.0",
@@ -58188,6 +58233,37 @@
         "lodash": "^4.17.15"
       }
     },
+    "cypress-repeat": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/cypress-repeat/-/cypress-repeat-2.3.3.tgz",
+      "integrity": "sha512-DoPiN5A/SMC9p6B2lRbvOxQvQUS6LO8Zeblkc3ZQQl5cQMmGBa15EOMLdBpQ1ctjOgssvcYawodBkxiNMHI49g==",
+      "requires": {
+        "arg": "5.0.2",
+        "bluebird": "3.7.2",
+        "debug": "4.3.4",
+        "dotenv": "8.2.0"
+      },
+      "dependencies": {
+        "arg": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+          "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+        },
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "dotenv": {
+          "version": "8.2.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+          "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+        }
+      }
+    },
     "cypress-timings": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/cypress-timings/-/cypress-timings-1.0.0.tgz",

package.json

@@ -184,6 +184,7 @@
     "cypress-mailhog": "^1.3.0",
     "cypress-mochawesome-reporter": "^2.3.0",
     "cypress-multi-reporters": "^1.5.0",
+    "cypress-repeat": "^2.3.3",
     "cypress-timings": "^1.0.0",
     "eslint": "^7.4.0",
     "eslint-config-prettier": "^8.5.0",
@@ -292,4 +293,4 @@
     "prepare": "is-ci || husky install"
   },
   "description": "![Saleor Dashboard](https://user-images.githubusercontent.com/249912/82305745-5c52fd00-99be-11ea-9ac6-cc04a6f28c91.png)"
-}
+}

src/staff/components/StaffList/StaffList.tsx

@@ -149,7 +149,7 @@ const StaffList: React.FC<StaffListProps> = props => {
               key={staffMember ? staffMember.id : "skeleton"}
             >
               <TableCell>
-                <div className={classes.avatar}>
+                <div className={classes.avatar} data-test-id="staffAvatar">
                   {maybe(() => staffMember.avatar.url) ? (
                     <img
                       className={classes.avatarImage}
@@ -164,7 +164,11 @@ const StaffList: React.FC<StaffListProps> = props => {
                 <Typography>
                   {getUserName(staffMember) || <Skeleton />}
                 </Typography>
-                <Typography variant={"caption"} className={classes.statusText}>
+                <Typography
+                  variant={"caption"}
+                  className={classes.statusText}
+                  data-test-id="staffStatusText"
+                >
                   {maybe<React.ReactNode>(
                     () =>
                       staffMember.isActive

src/staff/components/StaffPassword/StaffPassword.tsx

@@ -20,7 +20,7 @@ const StaffPassword: React.FC<StaffPasswordProps> = ({ onChangePassword }) => {
           description: "header",
         })}
         toolbar={
-          <Button onClick={onChangePassword}>
+          <Button onClick={onChangePassword} data-test-id="changePasswordBtn">
             <FormattedMessage
               id="N3Zot1"
               defaultMessage="Change your password"

src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx

@@ -110,6 +110,7 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
             <DialogActions>
               <BackButton onClick={onClose} />
               <ConfirmButton
+                data-test-id="submit"
                 disabled={data.newPassword.length < 8}
                 transitionState={confirmButtonState}
                 type="submit"

src/staff/components/StaffProperties/StaffProperties.tsx

@@ -215,6 +215,7 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                   fullWidth
                   inputProps={{
                     spellCheck: false,
+                    "data-test-id": "staffFirstName",
                   }}
                 />
               </div>
@@ -225,6 +226,7 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                   fullWidth
                   inputProps={{
                     spellCheck: false,
+                    "data-test-id": "staffLastName",
                   }}
                 />
               </div>
@@ -235,6 +237,7 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                   fullWidth
                   inputProps={{
                     spellCheck: false,
+                    "data-test-id": "staffEmail",
                   }}
                 />
               </div>