From 5e471e699a4589595a948aaeebabc36b367e25d4 Mon Sep 17 00:00:00 2001
From: Daniel Karski <daniel.karski5q@gmail.com>
Date: Fri, 20 Dec 2024 10:07:24 +0100
Subject: [PATCH] [CP-3360] add test-ids for Contacts (#2242)

Co-authored-by: Katarzyna Stegienko <katarzyna.stegienko@mudita.com>
---
 libs/e2e-test-ids/src/e2e-test-ids.ts         | 26 +++++++++++++++++++
 .../interactive/form/input/checkbox-input.tsx |  6 +++--
 .../ui/src/lib/table/table-cell.tsx           |  2 ++
 .../ui/src/lib/table/table-header-cell.tsx    |  3 ++-
 libs/generic-view/ui/src/lib/table/table.tsx  | 11 ++++----
 .../generic-view/ui/src/lib/texts/headers.tsx |  8 ++++--
 .../ui/src/lib/texts/paragraphs.tsx           | 16 ++++++++----
 7 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/libs/e2e-test-ids/src/e2e-test-ids.ts b/libs/e2e-test-ids/src/e2e-test-ids.ts
index fd55e24944..f9948c5b9d 100644
--- a/libs/e2e-test-ids/src/e2e-test-ids.ts
+++ b/libs/e2e-test-ids/src/e2e-test-ids.ts
@@ -14,6 +14,32 @@ export enum InteractiveTextInputTestIds {
   ErrorText = "interactive-text-input-error-text",
 }
 
+export enum TypographyTestIds {
+  H1 = "ui-typography-h1",
+  H2 = "ui-typography-h2",
+  H3 = "ui-typography-h3",
+  H4 = "ui-typography-h4",
+  H5 = "ui-typography-h5",
+  P1 = "ui-typography-p1",
+  P2 = "ui-typography-p2",
+  P3 = "ui-typography-p3",
+  P4 = "ui-typography-p4",
+  P5 = "ui-typography-p5",
+}
+
+export enum CheckboxTestIds {
+  Checkbox = "ui-checkbox",
+}
+
+export enum TableTestIds {
+  Table = "ui-table",
+  TableRow = "ui-table-row",
+  TableHeaderRow = "ui-table-header-row",
+  TablePlaceholderRow = "ui-table-place-holder-row",
+  TableCell = "ui-table-cell",
+  TableHeaderCell = "ui-table-header-cell",
+}
+
 export enum PredefinedBackupPasswordTestIds {
   Title = "predefined-backup-password-title",
   Description = "predefined-backup-password-description",
diff --git a/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx b/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx
index 72b1df1f3a..f8e7c03849 100644
--- a/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx
@@ -4,10 +4,11 @@
  */
 
 import React, { useCallback, useEffect, useId, useMemo, useRef } from "react"
-import { APIFC, IconType, useViewFormContext } from "generic-view/utils"
 import styled from "styled-components"
-import { Icon } from "../../../icon/icon"
+import { CheckboxTestIds } from "e2e-test-ids"
+import { APIFC, IconType, useViewFormContext } from "generic-view/utils"
 import { FormCheckboxInputConfig } from "generic-view/models"
+import { Icon } from "../../../icon/icon"
 
 interface Config extends FormCheckboxInputConfig {
   onToggle?: (checked: boolean) => void
@@ -110,6 +111,7 @@ export const CheckboxInput: APIFC<undefined, Config> = ({
     >
       <Input
         id={"checkbox-" + id}
+        data-testid={CheckboxTestIds.Checkbox}
         type={"checkbox"}
         value={config.value}
         checked={config.checked}
diff --git a/libs/generic-view/ui/src/lib/table/table-cell.tsx b/libs/generic-view/ui/src/lib/table/table-cell.tsx
index 6d2ac8d7e7..466f28ab71 100644
--- a/libs/generic-view/ui/src/lib/table/table-cell.tsx
+++ b/libs/generic-view/ui/src/lib/table/table-cell.tsx
@@ -7,6 +7,7 @@ import React, { useMemo } from "react"
 import { APIFC } from "generic-view/utils"
 import { TableCellConfig } from "generic-view/models"
 import styled from "styled-components"
+import { TableTestIds } from "e2e-test-ids"
 
 export const TableCell: APIFC<undefined, TableCellConfig> = ({
   children,
@@ -20,6 +21,7 @@ export const TableCell: APIFC<undefined, TableCellConfig> = ({
     () => {
       return (
         <Cell
+          data-testid={TableTestIds.TableCell}
           {...props}
           colSpan={config.colSpan}
           rowSpan={config.rowSpan}
diff --git a/libs/generic-view/ui/src/lib/table/table-header-cell.tsx b/libs/generic-view/ui/src/lib/table/table-header-cell.tsx
index 23a77d67fe..d15db64cde 100644
--- a/libs/generic-view/ui/src/lib/table/table-header-cell.tsx
+++ b/libs/generic-view/ui/src/lib/table/table-header-cell.tsx
@@ -7,10 +7,11 @@ import React from "react"
 import { APIFC } from "generic-view/utils"
 import { TableCellConfig } from "generic-view/models"
 import { TableCell } from "./table-cell"
+import { TableTestIds } from "e2e-test-ids"
 
 // @ts-ignore
 const Wrapper = (props) => <TableCell {...props} as={"th"} />
 
 export const TableHeaderCell: APIFC<undefined, TableCellConfig> = (props) => (
-  <Wrapper {...props} />
+  <Wrapper data-testid={TableTestIds.TableHeaderCell} {...props}  />
 )
diff --git a/libs/generic-view/ui/src/lib/table/table.tsx b/libs/generic-view/ui/src/lib/table/table.tsx
index 61b994c6af..21e37d917a 100644
--- a/libs/generic-view/ui/src/lib/table/table.tsx
+++ b/libs/generic-view/ui/src/lib/table/table.tsx
@@ -15,6 +15,7 @@ import React, {
 } from "react"
 import styled from "styled-components"
 import { difference, intersection } from "lodash"
+import { TableTestIds } from "e2e-test-ids"
 import { APIFC, useViewFormContext } from "generic-view/utils"
 import {
   TableConfig,
@@ -139,8 +140,8 @@ export const Table: APIFC<TableData, TableConfig> & {
     (id: string) => {
       const isActive = activeRowId === id
       return (
-        <RowPlaceholder key={id} className={isActive ? "active" : ""}>
-          <td colSpan={Children.count(children)}>
+        <RowPlaceholder key={id} data-testid={TableTestIds.TablePlaceholderRow} className={isActive ? "active" : ""}>
+          <td data-testid={TableTestIds.TableCell} colSpan={Children.count(children)}>
             <div />
           </td>
         </RowPlaceholder>
@@ -188,7 +189,7 @@ export const Table: APIFC<TableData, TableConfig> & {
       const isActive = activeRowId === id
 
       return (
-        <tr key={id} onClick={onClick} className={isActive ? "active" : ""}>
+        <tr key={id} data-testid={TableTestIds.TableRow} onClick={onClick} className={isActive ? "active" : ""}>
           {renderChildren(id)}
         </tr>
       )
@@ -205,9 +206,9 @@ export const Table: APIFC<TableData, TableConfig> & {
   return useMemo(
     () => (
       <ScrollableWrapper ref={scrollWrapperRef} {...props}>
-        <TableWrapper>
+        <TableWrapper data-testid={TableTestIds.Table} >
           <TableHeader>
-            <tr>{renderHeaderChildren()}</tr>
+            <tr data-testid={TableTestIds.TableHeaderRow} >{renderHeaderChildren()}</tr>
           </TableHeader>
           <TableBody $clickable={isClickable}>
             {data?.map((id, index) => renderRow(id, index))}
diff --git a/libs/generic-view/ui/src/lib/texts/headers.tsx b/libs/generic-view/ui/src/lib/texts/headers.tsx
index aeb5b5d254..99a1670ab1 100644
--- a/libs/generic-view/ui/src/lib/texts/headers.tsx
+++ b/libs/generic-view/ui/src/lib/texts/headers.tsx
@@ -4,10 +4,11 @@
  */
 
 import React from "react"
-import { APIFC } from "generic-view/utils"
+import { isEmpty } from "lodash"
 import styled, { css } from "styled-components"
+import { TypographyTestIds } from "e2e-test-ids"
+import { APIFC } from "generic-view/utils"
 import { HeaderConfig, UnboldValidator } from "generic-view/models"
-import { isEmpty } from "lodash"
 import { CommonTextProps, commonTextStyles } from "./common-text-styles"
 
 interface HeaderProps extends CommonTextProps {
@@ -37,6 +38,7 @@ export const Header3: APIFC<undefined, HeaderConfig> = ({
 }) => {
   return (
     <H3
+      data-testid={TypographyTestIds.H3}
       $unbold={config?.unbold}
       $singleLine={config?.singleLine}
       $color={config?.color}
@@ -63,6 +65,7 @@ export const Header4: APIFC<undefined, HeaderConfig> = ({
 }) => {
   return (
     <H4
+      data-testid={TypographyTestIds.H4}
       $unbold={config?.unbold}
       $singleLine={config?.singleLine}
       $color={config?.color}
@@ -89,6 +92,7 @@ export const Header5: APIFC<undefined, HeaderConfig> = ({
 }) => {
   return (
     <H5
+      data-testid={TypographyTestIds.H5}
       $unbold={config?.unbold}
       $singleLine={config?.singleLine}
       $color={config?.color}
diff --git a/libs/generic-view/ui/src/lib/texts/paragraphs.tsx b/libs/generic-view/ui/src/lib/texts/paragraphs.tsx
index 1c20ae6a4f..8295871f9b 100644
--- a/libs/generic-view/ui/src/lib/texts/paragraphs.tsx
+++ b/libs/generic-view/ui/src/lib/texts/paragraphs.tsx
@@ -11,6 +11,7 @@ import { ParagraphConfig, ParagraphData } from "generic-view/models"
 import { Content } from "../data-rows/text-formatted"
 import { CommonTextProps, commonTextStyles } from "./common-text-styles"
 import { applyTextTransform } from "./apply-text-transform"
+import { TypographyTestIds } from "e2e-test-ids"
 
 type ParagraphsProps = CommonTextProps
 
@@ -37,11 +38,12 @@ export const Paragraph1: APIFC<ParagraphData, ParagraphConfig> = ({
 
   return (
     <P1
-      {...props}
+      data-testid={TypographyTestIds.P1}
       $color={config?.color}
       $textTransform={config?.textTransform}
       $singleLine={config?.singleLine}
       $textAlign={config?.textAlign}
+      {...props}
     >
       {isEmpty(children) ? transformedText : children}
     </P1>
@@ -80,11 +82,12 @@ export const Paragraph2: APIFC<ParagraphData, ParagraphConfig> = ({
 
   return (
     <P2
-      {...props}
+      data-testid={TypographyTestIds.P2}
       $color={config?.color}
       $textTransform={config?.textTransform}
       $singleLine={config?.singleLine}
       $textAlign={config?.textAlign}
+      {...props}
     >
       {isEmpty(children) ? transformedText : children}
     </P2>
@@ -120,11 +123,12 @@ export const Paragraph3: APIFC<ParagraphData, ParagraphConfig> = ({
 
   return (
     <P3
-      {...props}
+      data-testid={TypographyTestIds.P3}
       $color={config?.color}
       $textTransform={config?.textTransform}
       $singleLine={config?.singleLine}
       $textAlign={config?.textAlign}
+      {...props}
     >
       {isEmpty(children) ? transformedText : children}
     </P3>
@@ -160,11 +164,12 @@ export const Paragraph4: APIFC<ParagraphData, ParagraphConfig> = ({
 
   return (
     <P4
-      {...props}
+      data-testid={TypographyTestIds.P4}
       $color={config?.color}
       $textTransform={config?.textTransform}
       $singleLine={config?.singleLine}
       $textAlign={config?.textAlign}
+      {...props}
     >
       {isEmpty(children) ? transformedText : children}
     </P4>
@@ -200,11 +205,12 @@ export const Paragraph5: APIFC<ParagraphData, ParagraphConfig> = ({
 
   return (
     <P5
-      {...props}
+      data-testid={TypographyTestIds.P5}
       $color={config?.color}
       $textTransform={config?.textTransform}
       $singleLine={config?.singleLine}
       $textAlign={config?.textAlign}
+      {...props}
     >
       {isEmpty(children) ? transformedText : children}
     </P5>