From ee915262399458fb6335ad2f49cc8307c764cda6 Mon Sep 17 00:00:00 2001
From: Dulaj Kavinda <dulajkaavinda@gmail.com>
Date: Tue, 7 Nov 2023 12:39:29 +0530
Subject: [PATCH 1/2] tests: added test cases for  CommonUI/Tabs

---
 CommonUI/src/Tests/Components/Tabs.test.tsx | 73 +++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 CommonUI/src/Tests/Components/Tabs.test.tsx

diff --git a/CommonUI/src/Tests/Components/Tabs.test.tsx b/CommonUI/src/Tests/Components/Tabs.test.tsx
new file mode 100644
index 00000000000..cd2fb5fa540
--- /dev/null
+++ b/CommonUI/src/Tests/Components/Tabs.test.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Tabs from '../../Components/Tabs/Tabs';
+
+describe('Tabs', () => {
+    const tabs: Array<string> = ['tab1', 'tab2'];
+
+    test('it should render all props passed', () => {
+        const onTabChange: jest.Mock = jest.fn();
+
+        const { getByText } = render(
+            <Tabs tabs={tabs} onTabChange={onTabChange} />
+        );
+
+        expect(getByText('tab1')).toBeInTheDocument();
+        expect(getByText('tab2')).toBeInTheDocument();
+    });
+
+    test('it should render the first tab as active by default', () => {
+        const onTabChange: jest.Mock = jest.fn();
+
+        const { getByText } = render(
+            <Tabs tabs={tabs} onTabChange={onTabChange} />
+        );
+
+        expect(getByText('tab1')).toHaveClass('active');
+    });
+
+    test('it should call onTabChange with the correct tab when a tab is clicked', () => {
+        const onTabChange: jest.Mock = jest.fn();
+
+        const { getByText } = render(
+            <Tabs tabs={tabs} onTabChange={onTabChange} />
+        );
+
+        fireEvent.click(getByText('tab1'));
+        expect(onTabChange).toHaveBeenCalledWith('tab1');
+
+        fireEvent.click(getByText('tab2'));
+        expect(onTabChange).toHaveBeenCalledWith('tab2');
+    });
+
+    test('it should show the correct tab as active when a tab is clicked', () => {
+        const onTabChange: jest.Mock = jest.fn();
+
+        const { getByText } = render(
+            <Tabs tabs={tabs} onTabChange={onTabChange} />
+        );
+
+        fireEvent.click(getByText('tab2'));
+
+        expect(getByText('tab1')).not.toHaveClass('active');
+        expect(getByText('tab2')).toHaveClass('active');
+    });
+
+    test('it should handle empty tabs array gracefully', () => {
+        const tabs: Array<string> = [];
+        const onTabChange: jest.Mock = jest.fn();
+
+        const { getByText } = render(
+            <Tabs tabs={tabs} onTabChange={onTabChange} />
+        );
+
+        expect(() => {
+            return getByText('tab1');
+        }).toThrow();
+
+        expect(() => {
+            return getByText('tab2');
+        }).toThrow();
+    });
+});

From 03eb1dd1f25fb734b4da039d26768def796310a5 Mon Sep 17 00:00:00 2001
From: Dulaj Kavinda <dulajkaavinda@gmail.com>
Date: Tue, 7 Nov 2023 12:40:15 +0530
Subject: [PATCH 2/2] tests: added test cases for  CommonUI/Modal

---
 CommonUI/src/Components/Loader/Loader.tsx    |  12 +-
 CommonUI/src/Components/Modal/Modal.tsx      |   7 +-
 CommonUI/src/Tests/Components/Modal.test.tsx | 294 +++++++++++++++++++
 3 files changed, 310 insertions(+), 3 deletions(-)
 create mode 100644 CommonUI/src/Tests/Components/Modal.test.tsx

diff --git a/CommonUI/src/Components/Loader/Loader.tsx b/CommonUI/src/Components/Loader/Loader.tsx
index 1a3bbab28f4..b659b8e5f72 100644
--- a/CommonUI/src/Components/Loader/Loader.tsx
+++ b/CommonUI/src/Components/Loader/Loader.tsx
@@ -22,7 +22,11 @@ const Loader: FunctionComponent<ComponentProps> = ({
 }: ComponentProps) => {
     if (loaderType === LoaderType.Bar) {
         return (
-            <div role="bar-loader mt-1" className="justify-center">
+            <div
+                role="bar-loader mt-1"
+                className="justify-center"
+                data-testid="loader"
+            >
                 <BarLoader height={4} width={size} color={color.toString()} />
             </div>
         );
@@ -30,7 +34,11 @@ const Loader: FunctionComponent<ComponentProps> = ({
 
     if (loaderType === LoaderType.Beats) {
         return (
-            <div role="beat-loader mt-1" className="justify-center">
+            <div
+                role="beat-loader mt-1"
+                className="justify-center"
+                data-testid="loader"
+            >
                 <BeatLoader size={size} color={color.toString()} />
             </div>
         );
diff --git a/CommonUI/src/Components/Modal/Modal.tsx b/CommonUI/src/Components/Modal/Modal.tsx
index f5ca84b3eda..dbcb59bc76b 100644
--- a/CommonUI/src/Components/Modal/Modal.tsx
+++ b/CommonUI/src/Components/Modal/Modal.tsx
@@ -72,6 +72,7 @@ const Modal: FunctionComponent<ComponentProps> = (
                                 ? 'sm:max-w-3xl'
                                 : ''
                         } ${!props.modalWidth ? 'sm:max-w-lg' : ''} `}
+                        data-testid="modal"
                     >
                         {props.onClose && (
                             <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
@@ -80,6 +81,7 @@ const Modal: FunctionComponent<ComponentProps> = (
                                     icon={IconProp.Close}
                                     iconSize={SizeProp.Large}
                                     title="Close"
+                                    dataTestId="close-button"
                                     onClick={props.onClose}
                                 />
                             </div>
@@ -88,6 +90,7 @@ const Modal: FunctionComponent<ComponentProps> = (
                             {props.icon && (
                                 <div
                                     className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full ${iconBgColor} sm:mx-0 sm:h-10 sm:w-10`}
+                                    data-testid="icon"
                                 >
                                     <Icon
                                         thick={ThickProp.Thick}
@@ -128,7 +131,9 @@ const Modal: FunctionComponent<ComponentProps> = (
                                         )}
                                     </div>
                                     {props.rightElement && (
-                                        <div>{props.rightElement}</div>
+                                        <div data-testid="right-element">
+                                            {props.rightElement}
+                                        </div>
                                     )}
                                 </div>
                                 <div className="mt-2">
diff --git a/CommonUI/src/Tests/Components/Modal.test.tsx b/CommonUI/src/Tests/Components/Modal.test.tsx
new file mode 100644
index 00000000000..9f2330aec04
--- /dev/null
+++ b/CommonUI/src/Tests/Components/Modal.test.tsx
@@ -0,0 +1,294 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Modal, { ModalWidth } from '../../Components/Modal/Modal';
+import { ButtonStyleType } from '../../Components/Button/Button';
+import ButtonType from '../../Components/Button/ButtonTypes';
+import IconProp from 'Common/Types/Icon/IconProp';
+
+describe('Modal', () => {
+    test('renders the modal with the title and description', () => {
+        const onSubmit: jest.Mock = jest.fn();
+        const { getByTestId, getByText } = render(
+            <Modal
+                title="Test Modal Title"
+                description="Test modal description"
+                onSubmit={onSubmit}
+            >
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        expect(getByTestId('modal-title')).toHaveTextContent(
+            'Test Modal Title'
+        );
+        expect(getByText('Test modal description')).toBeInTheDocument();
+        expect(getByText('Modal content')).toBeInTheDocument();
+    });
+
+    it('closes the modal when the close button is clicked', () => {
+        const onCloseMock: jest.Mock = jest.fn();
+        const onSubmit: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal title="Test Modal" onSubmit={onSubmit} onClose={onCloseMock}>
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        const closeButton: HTMLElement = getByTestId('close-button');
+
+        fireEvent.click(closeButton);
+
+        expect(onCloseMock).toHaveBeenCalled();
+    });
+
+    it('calls the onSubmit function when the submit button is clicked', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal
+                title="Test Modal"
+                onSubmit={onSubmitMock}
+                submitButtonText="Submit"
+            >
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        const submitButton: HTMLElement = getByTestId(
+            'modal-footer-submit-button'
+        );
+
+        fireEvent.click(submitButton);
+
+        expect(onSubmitMock).toHaveBeenCalled();
+    });
+
+    it('displays the modal with the default width when modalWidth is not set', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal title="Test Modal" onSubmit={onSubmitMock}>
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        expect(getByTestId('modal')).toHaveClass('sm:max-w-lg');
+    });
+
+    it('displays the modal with the correct width when modalWidth is set', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal
+                title="Test Modal"
+                onSubmit={onSubmitMock}
+                modalWidth={ModalWidth.Medium}
+            >
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        expect(getByTestId('modal')).toHaveClass('sm:max-w-3xl');
+    });
+
+    it('displays the children passed to the modal', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByText } = render(
+            <Modal title="Test Modal" onSubmit={onSubmitMock}>
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        expect(getByText('Modal content')).toBeInTheDocument();
+    });
+
+    it('displays the loader when isBodyLoading is true', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal title="Test Modal" onSubmit={onSubmitMock} isBodyLoading>
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        expect(getByTestId('loader')).toBeInTheDocument();
+    });
+
+    it('does not display the loader when isBodyLoading is false', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { queryByTestId } = render(
+            <Modal title="Test Modal" onSubmit={onSubmitMock}>
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        expect(queryByTestId('loader')).not.toBeInTheDocument();
+    });
+
+    it('does not display the loader when isBodyLoading is undefined', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { queryByTestId } = render(
+            <Modal title="Test Modal" onSubmit={onSubmitMock}>
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        expect(queryByTestId('loader')).not.toBeInTheDocument();
+    });
+
+    it('disables the submit button when isLoading is true', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal
+                title="Test Modal"
+                onSubmit={onSubmitMock}
+                submitButtonText="Submit"
+                isLoading={true}
+            >
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        const submitButton: HTMLElement = getByTestId(
+            'modal-footer-submit-button'
+        );
+
+        expect(submitButton).toBeDisabled();
+    });
+
+    it('disables the submit button when disableSubmitButton is true', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal
+                title="Test Modal"
+                onSubmit={onSubmitMock}
+                submitButtonText="Submit"
+                disableSubmitButton={true}
+            >
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        const submitButton: HTMLElement = getByTestId(
+            'modal-footer-submit-button'
+        );
+
+        expect(submitButton).toBeDisabled();
+    });
+
+    it('disables the submit button when isBodyLoading is true', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal
+                title="Test Modal"
+                onSubmit={onSubmitMock}
+                submitButtonText="Submit"
+                isBodyLoading={true}
+            >
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        const submitButton: HTMLElement = getByTestId(
+            'modal-footer-submit-button'
+        );
+
+        expect(submitButton).toBeDisabled();
+    });
+
+    it('displays the icon when icon is set', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal
+                title="Test Modal"
+                onSubmit={onSubmitMock}
+                icon={IconProp.SMS}
+            >
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        expect(getByTestId('icon')).toBeInTheDocument();
+    });
+
+    it('displays the submit button with the default style when submitButtonStyleType is not set', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal title="Test Modal" onSubmit={onSubmitMock}>
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        const submitButton: HTMLElement = getByTestId(
+            'modal-footer-submit-button'
+        );
+
+        expect(submitButton).toHaveAttribute('type', 'button');
+    });
+
+    it('displays the submit button with the correct style when submitButtonStyleType is set', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal
+                title="Test Modal"
+                onSubmit={onSubmitMock}
+                submitButtonType={ButtonType.Reset}
+            >
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        const submitButton: HTMLElement = getByTestId(
+            'modal-footer-submit-button'
+        );
+
+        expect(submitButton).toHaveAttribute('type', 'reset');
+    });
+
+    it('displays the submit button with the default style when submitButtonStyleType is set', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal
+                title="Test Modal"
+                onSubmit={onSubmitMock}
+                submitButtonStyleType={ButtonStyleType.DANGER}
+            >
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        const submitButton: HTMLElement = getByTestId(
+            'modal-footer-submit-button'
+        );
+
+        expect(submitButton).toHaveClass('bg-red-600');
+    });
+
+    it('displays the right element when rightElement is set', () => {
+        const onSubmitMock: jest.Mock = jest.fn();
+
+        const { getByTestId } = render(
+            <Modal
+                title="Test Modal"
+                onSubmit={onSubmitMock}
+                rightElement={<div>Right element</div>}
+            >
+                <div>Modal content</div>
+            </Modal>
+        );
+
+        expect(getByTestId('right-element')).toBeInTheDocument();
+    });
+});