Fix test should not be able to create staff member with not unique email. TC: SALEOR_3508 (#3055)

* add data-test-id for error text and update test SALEOR_3508

* undo xit

* move selector form test body to elements

cypress/e2e/staffMembers.js

@@ -7,6 +7,7 @@ import { LEFT_MENU_SELECTORS } from "../elements/account/left-menu/left-menu-sel
 import { LOGIN_SELECTORS } from "../elements/account/login-selectors";
 import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
 import { SHARED_ELEMENTS } from "../elements/shared/sharedElements";
+import { INVITE_STAFF_MEMBER_FORM } from "../elements/staffMembers/inviteStaffMemberForm";
 import { STAFF_MEMBER_DETAILS } from "../elements/staffMembers/staffMemberDetails";
 import { STAFF_MEMBERS_LIST } from "../elements/staffMembers/staffMembersList";
 import { urlList, userDetailsUrl } from "../fixtures/urlList";
@@ -188,6 +189,10 @@ describe("Staff members", () => {
         .get(STAFF_MEMBERS_LIST.inviteStaffMemberButton)
         .click({ force: true });
       fillUpOnlyUserDetails(firstName, lastName, emailInvite);
+      cy.get(INVITE_STAFF_MEMBER_FORM.emailValidationMessage).should(
+        "be.visible",
+      );
+      cy.get(BUTTON_SELECTORS.dialogBackButton).click();
       cy.confirmationErrorMessageShouldAppear();
     },
   );

cypress/elements/shared/button-selectors.js

@@ -18,4 +18,5 @@ export const BUTTON_SELECTORS = {
   deleteAssignedItemsConsentCheckbox: '[name="delete-assigned-items-consent"]',
   deleteSelectedElementsButton:
     '[data-test-id = "delete-selected-elements-icon"]',
+  dialogBackButton: '[data-test-id="back"]',
 };

cypress/elements/staffMembers/inviteStaffMemberForm.js

@@ -1,5 +1,6 @@
 export const INVITE_STAFF_MEMBER_FORM = {
   firstNameInput: '[name="firstName"]',
   lastNameInput: '[name="lastName"]',
-  emailInput: '[name="email"]'
+  emailInput: '[name="email"]',
+  emailValidationMessage: "[data-test-id='email-text-input-helper-text']",
 };

src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx

@@ -22,6 +22,8 @@ import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { ExtendedFormHelperTextProps } from "./types";
+
 export interface AddMemberFormData {
   email: string;
   firstName: string;
@@ -122,6 +124,11 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
                 type="email"
                 value={formData.email}
                 onChange={change}
+                FormHelperTextProps={
+                  {
+                    "data-test-id": "email-text-input-helper-text",
+                  } as ExtendedFormHelperTextProps
+                }
               />
             </DialogContent>
             <hr className={classes.hr} />

src/staff/components/StaffAddMemberDialog/types.ts

@@ -0,0 +1,5 @@
+import { FormHelperTextProps } from "@material-ui/core/FormHelperText";
+
+export type ExtendedFormHelperTextProps = FormHelperTextProps & {
+  "data-test-id": string;
+};