[CP-3093] Add data-testid to Success modal for Contact Support Form s…

…ending (#2054)

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

@@ -5,11 +5,12 @@
 
 import React from "react"
 import { defineMessages } from "react-intl"
-import { FunctionComponent } from "Core/core/types/function-component.interface"
+import { ContactSupportModalTestIds } from "e2e-test-ids"
 import { Modal } from "generic-view/ui"
+import { IconType } from "generic-view/utils"
+import { FunctionComponent } from "Core/core/types/function-component.interface"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { ButtonSecondary } from "../../../generic-view/ui/src/lib/buttons/button-secondary"
-import { IconType } from "generic-view/utils"
 
 const messages = defineMessages({
   title: { id: "component.supportModalSuccessTitle" },
@@ -26,10 +27,15 @@ export const ContactSupportModalSuccess: FunctionComponent<Props> = ({
 }) => (
   <>
     <Modal.TitleIcon config={{ type: IconType.Success }} />
-    <Modal.Title>{intl.formatMessage(messages.title)}</Modal.Title>
-    <p>{intl.formatMessage(messages.body)}</p>
+    <Modal.Title data-testid={ContactSupportModalTestIds.Title}>
+      {intl.formatMessage(messages.title)}
+    </Modal.Title>
+    <p data-testid={ContactSupportModalTestIds.Description}>
+      {intl.formatMessage(messages.body)}
+    </p>
     <Modal.Buttons config={{ vertical: true }}>
       <ButtonSecondary
+        data-testid={ContactSupportModalTestIds.CloseButton}
         config={{
           text: intl.formatMessage(messages.closeButtonLabel),
           action: {

libs/e2e-test-ids/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.js"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/e2e-test-ids/README.md

@@ -0,0 +1,7 @@
+# e2e-test-ids
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build e2e-test-ids` to build the library.

libs/e2e-test-ids/project.json

@@ -0,0 +1,23 @@
+{
+  "name": "e2e-test-ids",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/e2e-test-ids/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/e2e-test-ids",
+        "main": "libs/e2e-test-ids/src/index.ts",
+        "tsConfig": "libs/e2e-test-ids/tsconfig.lib.json",
+        "assets": ["libs/e2e-test-ids/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  },
+  "tags": []
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export enum ModalCloseButtonTestIds {
+  IconButton = "modal-close-button-icon-button",
+}
+
+export enum ContactSupportModalTestIds {
+  Title = "contact-support-modal-success-title",
+  Description = "contact-support-modal-success-description",
+  CloseButton = "contact-support-modal-success-close-button",
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export * from "./e2e-test-ids"

libs/e2e-test-ids/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/e2e-test-ids/tsconfig.lib.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/generic-view/theme/src/lib/generic-theme-provider.tsx

@@ -78,7 +78,7 @@ const GlobalStyle = createGlobalStyle<{ theme: Theme }>`
       box-shadow: 0 2rem 10rem 0 ${({ theme }) => theme.color.black + "26"};
     }
 
-    .modal-close-button:nth-child(2) {
+    .modal-close-icon-button:nth-child(2) {
       display: none;
     }
     * {

libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-close-button.tsx

@@ -5,24 +5,25 @@
 
 import React from "react"
 import styled, { css } from "styled-components"
+import { ModalCloseButtonTestIds } from "e2e-test-ids"
 import { APIFC, IconType } from "generic-view/utils"
+import { ModalCloseButtonConfig } from "generic-view/models"
 import { ButtonBase } from "../../../buttons/button-base/button-base"
 import { iconButtonStyles } from "../../../shared/button"
 import { Icon } from "../../../icon/icon"
-import { ModalCloseButtonConfig } from "generic-view/models"
 
 export const ModalCloseButton: APIFC<undefined, ModalCloseButtonConfig> = ({
   data,
   config,
-  className,
+  className = "",
   ...rest
 }) => {
   if (!config?.action) return null
   return (
     <ModalClose
       action={config.action}
-      test-id={"modal-close-button"}
-      className={"modal-close-button " + className}
+      data-testid={ModalCloseButtonTestIds.IconButton}
+      className={"modal-close-icon-button " + className}
       {...rest}
     >
       <ModalCloseIcon />

nx.json

@@ -39,5 +39,10 @@
         }
       }
     }
+  },
+  "pluginsConfig": {
+    "@nx/js": {
+      "analyzeSourceFiles": true
+    }
   }
 }

tsconfig.base.json

@@ -46,6 +46,7 @@
       "e2e-mock-client": ["libs/e2e-mock/client/src/index.ts"],
       "e2e-mock-responses": ["libs/e2e-mock/responses/src/index.ts"],
       "e2e-mock-server": ["libs/e2e-mock/server/src/index.ts"],
+      "e2e-test-ids": ["libs/e2e-test-ids/src/index.ts"],
       "electron/application-updater": [
         "libs/electron/application-updater/src/index.ts"
       ],