[CP-3153] Added test ids to start backup action and contact support modal

apps/mudita-center-e2e/src/helpers/index.ts

@@ -4,3 +4,4 @@
  */
 
 export * from "./sleep.helper"
+export * from "./testid.helper"

apps/mudita-center-e2e/src/helpers/testid.helper.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+const PRIMARY_BUTTON_TEST_ID = "primary-button"
+
+export const getPrimaryButtonTestId = (componentId: string) => {
+  return `${PRIMARY_BUTTON_TEST_ID}-${componentId}`
+}

libs/core/contact-support/components/contact-support-modal.component.test.tsx

@@ -12,6 +12,19 @@ import { ContactSupportModalTestIds } from "Core/contact-support/components/cont
 import { noop } from "Core/__deprecated__/renderer/utils/noop"
 import { FileListTestIds } from "Core/__deprecated__/renderer/components/core/file-list/file-list-test-ids.enum"
 
+jest.mock("e2e-test-ids", () => {
+  return {
+    NewContactSupportModalTestIds: {
+      Title: "contact-support-modal-title",
+      Subtitle: "contact-support-modal-subtitle",
+      EmailLabel: "email-label",
+      MessageLabel: "message-label",
+      AttachedFilesLabel: "attached-files-label",
+      AttachedFilesSubtext: "attached-files-subtext",
+    },
+  }
+})
+
 type Props = ComponentProps<typeof ContactSupportModal>
 const defaultProps: Props = {
   open: true,

libs/core/contact-support/components/contact-support-modal.component.tsx

@@ -36,6 +36,7 @@ import { HelpActions } from "Core/__deprecated__/common/enums/help-actions.enum"
 import { ModalTestIds } from "Core/__deprecated__/renderer/components/core/modal/modal-test-ids.enum"
 import { Close } from "Core/__deprecated__/renderer/components/core/modal/modal.styled.elements"
 import { SpinnerLoader } from "../../../generic-view/ui/src/lib/shared/spinner-loader"
+import { NewContactSupportModalTestIds } from "e2e-test-ids"
 
 const messages = defineMessages({
   actionButton: {
@@ -95,8 +96,12 @@ interface FormInputLabelProps {
 
 export const FormInputLabelComponent: FunctionComponent<
   FormInputLabelProps
-> = ({ className, label, optional }) => (
-  <Text className={className} displayStyle={TextDisplayStyle.Paragraph3}>
+> = ({ className, label, optional, ...rest }) => (
+  <Text
+    className={className}
+    displayStyle={TextDisplayStyle.Paragraph3}
+    {...rest}
+  >
     <FormattedMessage {...label} />
     {optional && (
       <Text
@@ -211,15 +216,18 @@ const ContactSupportModal: FunctionComponent<Props> = ({
             <IconWrapper>
               <Icon type={IconType.Support} />
             </IconWrapper>
-            <h1>
+            <h1 data-testid={NewContactSupportModalTestIds.Title}>
               <FormattedMessage {...messages.title} />
             </h1>
-            <p>
+            <p data-testid={NewContactSupportModalTestIds.Subtitle}>
               <FormattedMessage {...messages.description} />
             </p>
           </ModalHeader>
           <Form onSubmit={sendEmail}>
-            <FormInputLabel label={messages.emailLabel} />
+            <FormInputLabel
+              label={messages.emailLabel}
+              data-testid={NewContactSupportModalTestIds.EmailLabel}
+            />
             <InputComponent
               disabled={sending}
               outlined
@@ -230,7 +238,11 @@ const ContactSupportModal: FunctionComponent<Props> = ({
               label={intl.formatMessage(messages.emailPlaceholder)}
               {...register(FieldKeys.Email, emailValidator)}
             />
-            <FormInputLabel optional label={messages.messageLabel} />
+            <FormInputLabel
+              optional
+              label={messages.messageLabel}
+              data-testid={NewContactSupportModalTestIds.MessageLabel}
+            />
             <DescriptionInput
               disabled={sending}
               type="textarea"
@@ -239,11 +251,15 @@ const ContactSupportModal: FunctionComponent<Props> = ({
               data-testid={ContactSupportModalTestIds.DescriptionInput}
               {...register(FieldKeys.Description)}
             />
-            <FormInputLabel label={messages.filesLabel} />
+            <FormInputLabel
+              label={messages.filesLabel}
+              data-testid={NewContactSupportModalTestIds.AttachedFilesLabel}
+            />
             <FilesDescription
               displayStyle={TextDisplayStyle.Paragraph3}
               element={"p"}
               message={messages.filesLabelDescription}
+              data-testid={NewContactSupportModalTestIds.AttachedFilesSubtext}
             />
             <Files
               files={files}

libs/core/contact-support/containers/contact-support-flow.container.test.tsx

@@ -20,6 +20,14 @@ jest.mock("e2e-test-ids", () => {
     ModalTestIds: {
       Modal: "modal-content",
     },
+    NewContactSupportModalTestIds: {
+      Title: "contact-support-modal-title",
+      Subtitle: "contact-support-modal-subtitle",
+      EmailLabel: "email-label",
+      MessageLabel: "message-label",
+      AttachedFilesLabel: "attached-files-label",
+      AttachedFilesSubtext: "attached-files-subtext",
+    },
   }
 })
 

libs/e2e-test-ids/src/e2e-test-ids.ts

@@ -29,6 +29,10 @@ export enum ContactSupportModalTestIds {
   CloseButton = "contact-support-modal-success-close-button",
 }
 
+export enum ButtonTestIds {
+  PrimaryButton = "primary-button",
+}
+
 export enum BackupModalTestIds {
   Title = "backup-features-modal-title",
   Description = "backup-features-modal-description",
@@ -41,3 +45,12 @@ export enum BackupModalTestIds {
 export enum ModalTestIds {
   Modal = "modal-content",
 }
+
+export enum NewContactSupportModalTestIds {
+  Title = "contact-support-modal-title",
+  Subtitle = "contact-support-modal-subtitle",
+  EmailLabel = "email-label",
+  MessageLabel = "message-label",
+  AttachedFilesLabel = "attached-files-label",
+  AttachedFilesSubtext = "attached-files-subtext",
+}

libs/generic-view/ui/src/lib/buttons/button-primary.tsx

@@ -9,6 +9,7 @@ import { APIFC } from "generic-view/utils"
 import { ButtonBase } from "./button-base/button-base"
 import { Icon } from "../icon/icon"
 import { ButtonPrimaryConfig } from "generic-view/models"
+import { ButtonTestIds } from "e2e-test-ids"
 
 export const ButtonPrimary: APIFC<undefined, ButtonPrimaryConfig> = ({
   data,
@@ -17,7 +18,12 @@ export const ButtonPrimary: APIFC<undefined, ButtonPrimaryConfig> = ({
   ...props
 }) => {
   return (
-    <Button {...props} disabled={config.disabled} action={config.action}>
+    <Button
+      data-testid={`${ButtonTestIds.PrimaryButton}-${props.componentKey}`}
+      {...props}
+      disabled={config.disabled}
+      action={config.action}
+    >
       {children}
       {config.icon && <Icon data={{ type: config.icon }} />}
       <span>{config.text}</span>