From 93600eae33ca732d3f97704301945772cd0bc0f4 Mon Sep 17 00:00:00 2001
From: Daniel Karski <daniel.karski5q@gmail.com>
Date: Tue, 17 Sep 2024 10:30:32 +0200
Subject: [PATCH] [CP-3093] Add data-testid to Success modal for Contact
 Support Form sending (#2054)

---
 ...ontact-support-modal-success.component.tsx | 14 +++++++----
 libs/e2e-test-ids/.eslintrc.json              | 18 +++++++++++++++
 libs/e2e-test-ids/README.md                   |  7 ++++++
 libs/e2e-test-ids/project.json                | 23 +++++++++++++++++++
 libs/e2e-test-ids/src/e2e-test-ids.ts         | 14 +++++++++++
 libs/e2e-test-ids/src/index.ts                |  6 +++++
 libs/e2e-test-ids/tsconfig.json               | 16 +++++++++++++
 libs/e2e-test-ids/tsconfig.lib.json           |  9 ++++++++
 .../theme/src/lib/generic-theme-provider.tsx  |  2 +-
 .../modal/helpers/modal-close-button.tsx      |  9 ++++----
 nx.json                                       |  5 ++++
 tsconfig.base.json                            |  1 +
 12 files changed, 115 insertions(+), 9 deletions(-)
 create mode 100644 libs/e2e-test-ids/.eslintrc.json
 create mode 100644 libs/e2e-test-ids/README.md
 create mode 100644 libs/e2e-test-ids/project.json
 create mode 100644 libs/e2e-test-ids/src/e2e-test-ids.ts
 create mode 100644 libs/e2e-test-ids/src/index.ts
 create mode 100644 libs/e2e-test-ids/tsconfig.json
 create mode 100644 libs/e2e-test-ids/tsconfig.lib.json

diff --git a/libs/core/contact-support/components/contact-support-modal-success.component.tsx b/libs/core/contact-support/components/contact-support-modal-success.component.tsx
index f51cd23ee1..911630a3e1 100644
--- a/libs/core/contact-support/components/contact-support-modal-success.component.tsx
+++ b/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: {
diff --git a/libs/e2e-test-ids/.eslintrc.json b/libs/e2e-test-ids/.eslintrc.json
new file mode 100644
index 0000000000..d3e61a2ea8
--- /dev/null
+++ b/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": {}
+    }
+  ]
+}
diff --git a/libs/e2e-test-ids/README.md b/libs/e2e-test-ids/README.md
new file mode 100644
index 0000000000..c0c48b28af
--- /dev/null
+++ b/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.
diff --git a/libs/e2e-test-ids/project.json b/libs/e2e-test-ids/project.json
new file mode 100644
index 0000000000..f29b700ea1
--- /dev/null
+++ b/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": []
+}
diff --git a/libs/e2e-test-ids/src/e2e-test-ids.ts b/libs/e2e-test-ids/src/e2e-test-ids.ts
new file mode 100644
index 0000000000..3d7bc89b59
--- /dev/null
+++ b/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",
+}
diff --git a/libs/e2e-test-ids/src/index.ts b/libs/e2e-test-ids/src/index.ts
new file mode 100644
index 0000000000..5d40bd2492
--- /dev/null
+++ b/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"
diff --git a/libs/e2e-test-ids/tsconfig.json b/libs/e2e-test-ids/tsconfig.json
new file mode 100644
index 0000000000..1bc836d424
--- /dev/null
+++ b/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"
+    }
+  ]
+}
diff --git a/libs/e2e-test-ids/tsconfig.lib.json b/libs/e2e-test-ids/tsconfig.lib.json
new file mode 100644
index 0000000000..3f4fda4aa0
--- /dev/null
+++ b/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"]
+}
diff --git a/libs/generic-view/theme/src/lib/generic-theme-provider.tsx b/libs/generic-view/theme/src/lib/generic-theme-provider.tsx
index cf2fdd8de2..cea0d3d7b2 100644
--- a/libs/generic-view/theme/src/lib/generic-theme-provider.tsx
+++ b/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;
     }
     * {
diff --git a/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-close-button.tsx b/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-close-button.tsx
index 3bd02fa7d7..590d9493df 100644
--- a/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-close-button.tsx
+++ b/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 />
diff --git a/nx.json b/nx.json
index 1ee96c524d..4267796381 100644
--- a/nx.json
+++ b/nx.json
@@ -39,5 +39,10 @@
         }
       }
     }
+  },
+  "pluginsConfig": {
+    "@nx/js": {
+      "analyzeSourceFiles": true
+    }
   }
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 8cb30bec95..1a11ab9e48 100644
--- a/tsconfig.base.json
+++ b/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"
       ],