refactor: Add data-testid attributes to Toast component

This commit adds data-testid attributes to the Toast component in order to improve testability. The "toast" element, "toast-icon" element, "title" element, "description" element, and "close-button" element now have corresponding data-testid attributes. This change allows for more precise targeting of elements in automated tests, enhancing the reliability and accuracy of the test suite.

CommonUI/src/Components/Toast/Toast.tsx

@@ -60,6 +60,7 @@ const Component: FunctionComponent<ComponentProps> = (
   if (show) {
     return (
       <div
+        data-testid="toast"
         aria-live="assertive"
         className={`pointer-events-none fixed z-40 top-${top} left-0 right-0  flex items-end px-4 py-6 sm:items-start sm:p-6`}
       >
@@ -68,13 +69,23 @@ const Component: FunctionComponent<ComponentProps> = (
             <div className="p-4">
               <div className="flex items-start">
                 <div className="flex-shrink-0">
-                  <Icon className={`h-6 w-6 ${typeCssClass}`} icon={iconType} />
+                  <Icon
+                    className={`h-6 w-6 ${typeCssClass}`}
+                    data-testid="toast-icon"
+                    icon={iconType}
+                  />
                 </div>
                 <div className="ml-3 w-0 flex-1 pt-0.5">
-                  <p className="text-sm font-medium text-gray-900">
+                  <p
+                    data-testId="title"
+                    className="text-sm font-medium text-gray-900"
+                  >
                     {props.title}
                   </p>
-                  <p className="mt-1 text-sm text-gray-500">
+                  <p
+                    data-testId="description"
+                    className="mt-1 text-sm text-gray-500"
+                  >
                     {props.description}
                   </p>
                   {/* <div className="mt-3 flex space-x-7">
@@ -90,6 +101,7 @@ const Component: FunctionComponent<ComponentProps> = (
                         props.onClose();
                       }
                     }}
+                    data-testid="close-button"
                     type="button"
                     className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                   >

CommonUI/src/Tests/Components/Toast.test.tsx

@@ -3,131 +3,72 @@ import "@testing-library/jest-dom/extend-expect";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
-import OneUptimeDate from "Common/Types/Date";
 import * as React from "react";
 import { describe, expect, test } from "@jest/globals";
 
 describe("Test for Toast.tsx", () => {
   test("should render the component", () => {
-    const date: Date = new Date();
     render(
-      <Toast
-        type={ToastType.SUCCESS}
-        title="Spread"
-        description="Love"
-        createdAt={date}
-      />,
+      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
     );
-    expect(screen.getByTestId("toast-main")).toHaveClass(
-      "position-fixed top-0 end-0 p-3",
+    expect(screen.getByTestId("toast")).toHaveClass(
+      "pointer-events-none fixed z-40 top-0 left-0 right-0  flex items-end px-4 py-6 sm:items-start sm:p-6",
     );
   });
 
+  test("should have close button", () => {
+    render(
+      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
+    );
+    expect(screen.getByTestId("close-button")).toBeInTheDocument();
+  });
+
   test("Checking Title", () => {
-    const date: Date = new Date();
     render(
-      <Toast
-        type={ToastType.SUCCESS}
-        title="Spread"
-        description="Love"
-        createdAt={date}
-      />,
+      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
     );
-    expect(screen.getByTestId("toast-strong")).toHaveTextContent("Spread");
+    expect(screen.getByTestId("title")).toHaveTextContent("Spread");
   });
 
   test("Checking Description", () => {
-    const date: Date = new Date();
     render(
-      <Toast
-        type={ToastType.SUCCESS}
-        title="Spread"
-        description="Love"
-        createdAt={date}
-      />,
+      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
     );
-    expect(screen.getByTestId("toast-desc")).toHaveTextContent("Love");
+    expect(screen.getByTestId("description")).toHaveTextContent("Love");
   });
-  test('Should say "seconds ago"', () => {
-    const date: Date = new Date();
-    render(
-      <Toast
-        type={ToastType.SUCCESS}
-        title="Spread"
-        description="Love"
-        createdAt={date}
-      />,
-    );
-    const now_date: string = OneUptimeDate.fromNow(date);
 
-    expect(screen.getByTestId("toast-time")).toHaveTextContent(now_date);
-  });
   test("Checking if Toast is for SUCCESS", () => {
-    const date: Date = new Date();
     render(
-      <Toast
-        type={ToastType.SUCCESS}
-        title="Spread"
-        description="Love"
-        createdAt={date}
-      />,
+      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
     );
-    expect(screen.getByTestId("toast-status")).toHaveClass("text-success");
+    expect(screen.getByTestId("toast-icon")).toHaveClass("text-green-400");
   });
   test("Checking if Toast is for INFO", () => {
-    const date: Date = new Date();
-    render(
-      <Toast
-        type={ToastType.INFO}
-        title="Spread"
-        description="Love"
-        createdAt={date}
-      />,
-    );
-    expect(screen.getByTestId("toast-status")).toHaveClass("text-info");
+    render(<Toast type={ToastType.INFO} title="Spread" description="Love" />);
+    expect(screen.getByTestId("toast-icon")).toHaveClass("text-blue-400");
   });
 
   test("Checking if Toast is for Warning", () => {
-    const date: Date = new Date();
     render(
-      <Toast
-        type={ToastType.WARNING}
-        title="Spread"
-        description="Love"
-        createdAt={date}
-      />,
+      <Toast type={ToastType.WARNING} title="Spread" description="Love" />,
     );
-    expect(screen.getByTestId("toast-status")).toHaveClass("text-warning");
+    expect(screen.getByTestId("toast-icon")).toHaveClass("text-yellow-400");
   });
 
   test("Checking if Toast is for Normal", () => {
-    const date: Date = new Date();
-    render(
-      <Toast
-        type={ToastType.NORMAL}
-        title="Spread"
-        description="Love"
-        createdAt={date}
-      />,
-    );
-    expect(screen.getByTestId("toast-status")).toHaveClass("text-normal");
+    render(<Toast type={ToastType.NORMAL} title="Spread" description="Love" />);
+    expect(screen.getByTestId("toast-icon")).toHaveClass("text-gray-400");
   });
   test("simulates button click and sets the state to flase, closing the toast", async () => {
-    const date: Date = new Date();
     const user: UserEvent = userEvent.setup();
 
     render(
-      <Toast
-        type={ToastType.SUCCESS}
-        title="Spread"
-        description="Love"
-        createdAt={date}
-      />,
+      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
     );
 
-    const loginButton: HTMLButtonElement = screen.getByTestId("toast-button");
-    await user.click(loginButton);
+    const closeButton: HTMLButtonElement = screen.getByTestId("close-button");
+    await user.click(closeButton);
 
-    expect(screen.queryByTestId("toast-main")).toBeFalsy();
+    expect(screen.queryByTestId("toast")).toBeFalsy();
   });
 });