diff --git a/CommonUI/jest.config.json b/CommonUI/jest.config.json
index 22237df8ba..c7449e66bb 100644
--- a/CommonUI/jest.config.json
+++ b/CommonUI/jest.config.json
@@ -14,7 +14,7 @@
     "testEnvironment": "jsdom",
     "collectCoverage": true,
     "coverageReporters": ["text", "html"],
-    "testRegex": ".src/Tests/(.*).test.(tsx||ts)",
+    "testRegex": "./src/Tests/(.*).test.(tsx||ts)",
     "collectCoverageFrom": ["./**/*.(tsx||ts)"],
     "coverageThreshold": {
         "global": {
diff --git a/CommonUI/src/Components/Alerts/Alert.tsx b/CommonUI/src/Components/Alerts/Alert.tsx
index c68040481a..9c8b570b8c 100644
--- a/CommonUI/src/Components/Alerts/Alert.tsx
+++ b/CommonUI/src/Components/Alerts/Alert.tsx
@@ -59,6 +59,7 @@ const Alert: FunctionComponent<ComponentProps> = (
                 >
                     {props.onClose && (
                         <button
+                            role={'alert-close-button'}
                             type="button"
                             className="close"
                             onClick={() => {
diff --git a/CommonUI/src/Components/Badge/Badge.tsx b/CommonUI/src/Components/Badge/Badge.tsx
index 501016181d..2891d09407 100644
--- a/CommonUI/src/Components/Badge/Badge.tsx
+++ b/CommonUI/src/Components/Badge/Badge.tsx
@@ -26,7 +26,10 @@ const Badge: FunctionComponent<ComponentProps> = (
 
     if (props.badgeCount) {
         return (
-            <span className={`mt-1 badge ${className} float-end`}>
+            <span
+                role={'badge'}
+                className={`mt-1 badge ${className} float-end`}
+            >
                 {props.badgeCount}
             </span>
         );
diff --git a/CommonUI/src/Components/HiddenText/HiddenText.tsx b/CommonUI/src/Components/HiddenText/HiddenText.tsx
index d44bb443dd..4e6faa0c95 100644
--- a/CommonUI/src/Components/HiddenText/HiddenText.tsx
+++ b/CommonUI/src/Components/HiddenText/HiddenText.tsx
@@ -4,7 +4,6 @@ import Icon, { IconProp } from '../Icon/Icon';
 export interface ComponentProps {
     text: string;
     isCopyable?: boolean;
-    dataTestId?: string;
 }
 
 const HiddenText: FunctionComponent<ComponentProps> = (
@@ -12,10 +11,11 @@ const HiddenText: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
     const [showText, setShowText] = useState<boolean>(false);
     const [copiedToClipboard, setCopyToClipboard] = useState<boolean>(false);
+
     if (!showText) {
         return (
             <p
-                role="paragraph"
+                role="hidden-text"
                 className="pointer underline"
                 onClick={() => {
                     setShowText(true);
@@ -25,6 +25,7 @@ const HiddenText: FunctionComponent<ComponentProps> = (
             </p>
         );
     }
+
     return (
         <div>
             <div className="flex">
@@ -32,6 +33,7 @@ const HiddenText: FunctionComponent<ComponentProps> = (
                     style={{
                         marginRight: '5px',
                     }}
+                    role="revealed-text"
                 >
                     {props.text}
                 </div>{' '}
@@ -47,16 +49,16 @@ const HiddenText: FunctionComponent<ComponentProps> = (
             {props.isCopyable && (
                 <div>
                     <span
-                        data-testid={props.dataTestId}
                         className="pointer underline"
                         onClick={async () => {
-                            await navigator.clipboard.writeText(props.text);
                             setCopyToClipboard(true);
+                            await navigator.clipboard.writeText(props.text);
                         }}
+                        role="copy-to-clipboard"
                     >
                         {' '}
                         {copiedToClipboard
-                            ? 'Copied to clipboard'
+                            ? 'Copied to Clipboard'
                             : 'Copy to Clipboard'}{' '}
                     </span>
                 </div>
diff --git a/CommonUI/src/Components/Loader/Loader.tsx b/CommonUI/src/Components/Loader/Loader.tsx
index 0034251532..21fffef8bb 100644
--- a/CommonUI/src/Components/Loader/Loader.tsx
+++ b/CommonUI/src/Components/Loader/Loader.tsx
@@ -20,11 +20,19 @@ const Loader: FunctionComponent<ComponentProps> = ({
     loaderType = LoaderType.Bar,
 }: ComponentProps) => {
     if (loaderType === LoaderType.Bar) {
-        return <BarLoader height={4} width={size} color={color.toString()} />;
+        return (
+            <div role="bar-loader">
+                <BarLoader height={4} width={size} color={color.toString()} />
+            </div>
+        );
     }
 
     if (loaderType === LoaderType.Beats) {
-        return <BeatLoader size={size} color={color.toString()} />;
+        return (
+            <div role="beat-loader">
+                <BeatLoader size={size} color={color.toString()} />
+            </div>
+        );
     }
 
     return <></>;
diff --git a/CommonUI/src/Tests/Components/Alert.test.tsx b/CommonUI/src/Tests/Components/Alert.test.tsx
index 5d6d057aa5..1e41fab859 100644
--- a/CommonUI/src/Tests/Components/Alert.test.tsx
+++ b/CommonUI/src/Tests/Components/Alert.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Alert, { AlertType } from '../../Components/Alerts/Alert';
-import Icon from '../../Components/Icon/Icon';
 
 describe('alert tests', () => {
     test('it should render all props passed', () => {
@@ -17,42 +16,58 @@ describe('alert tests', () => {
                 onClose={handleClose}
             />
         );
-        expect(Icon).toBeInTheDocument()
+
+        const icon: HTMLElement = screen.getByRole('icon');
+        expect(icon).toBeInTheDocument();
+
+        const alert: HTMLElement = screen.getByRole('alert');
+        expect(alert).toBeInTheDocument();
+        alert.click();
+
+        const alertCloseButton: HTMLElement =
+            screen.getByRole('alert-close-button');
+        expect(alertCloseButton).toBeInTheDocument();
+        alertCloseButton.click();
+
         expect(handleClick).toBeCalled();
         expect(handleClose).toBeCalled();
     });
     test('it should show icon when alert type is equal to success', () => {
         render(<Alert dataTestId="test-id" type={AlertType.SUCCESS} />);
-        expect(Icon).toBeInTheDocument()
+        const icon: HTMLElement = screen.getByRole('icon');
+        expect(icon).toBeInTheDocument();
         const testId: HTMLElement = screen.getByTestId('test-id');
         expect(testId).toHaveClass('alert-success');
     });
     test('it should show icon when alert type is equal to info', () => {
         render(<Alert dataTestId="test-id" type={AlertType.INFO} />);
-        expect(Icon).toBeInTheDocument()
+        const icon: HTMLElement = screen.getByRole('icon');
+        expect(icon).toBeInTheDocument();
         const testId: HTMLElement = screen.getByTestId('test-id');
         expect(testId).toHaveClass('alert-info');
     });
     test('it should show icon when alert type is equal to warning', () => {
         render(<Alert dataTestId="test-id" type={AlertType.WARNING} />);
-        expect(Icon).toBeInTheDocument()
+        const icon: HTMLElement = screen.getByRole('icon');
+        expect(icon).toBeInTheDocument();
         const testId: HTMLElement = screen.getByTestId('test-id');
         expect(testId).toHaveClass('alert-warning');
     });
     test('it should show icon when alert type is equal to danger', () => {
         render(<Alert dataTestId="test-id" type={AlertType.DANGER} />);
-        expect(Icon).toBeInTheDocument()
+        const icon: HTMLElement = screen.getByRole('icon');
+        expect(icon).toBeInTheDocument();
         const testId: HTMLElement = screen.getByTestId('test-id');
         expect(testId).toHaveClass('alert-danger');
     });
     test('it should have a title content displayed in document', () => {
         render(<Alert title="title" />);
-        expect(screen.getByText('title')).toBeInTheDocument()
+        expect(screen.getByText('title')).toBeInTheDocument();
         expect(screen.getByText('title')).toHaveTextContent('title');
     });
     test('it should have a strong text content displayed in document ', () => {
         render(<Alert strongTitle="strong" />);
-        expect(screen.getByText('strong')).toBeInTheDocument()
+        expect(screen.getByText('strong')).toBeInTheDocument();
         expect(screen.getByText('strong')).toHaveTextContent('strong');
     });
     test('it should handle onClick event', () => {
@@ -64,13 +79,23 @@ describe('alert tests', () => {
     test('it should handle onClose event', () => {
         const handleClose: undefined | (() => void) = jest.fn();
         render(<Alert title="title" onClose={handleClose} />);
-        fireEvent.click(screen.getByText('title'));
+
+        const alertCloseButton: HTMLElement =
+            screen.getByRole('alert-close-button');
+        expect(alertCloseButton).toBeInTheDocument();
+        alertCloseButton.click();
+
         expect(handleClose).toBeCalled();
     });
     test('it should  display button  onClose event', () => {
         const handleClose: undefined | (() => void) = jest.fn();
         render(<Alert onClose={handleClose} />);
-        fireEvent.click(screen.getByRole('button'));
-        expect(screen.getByRole('button')).toBeVisible();
+
+        const alert: HTMLElement = screen.getByRole('alert');
+        expect(alert).toBeInTheDocument();
+
+        const alertCloseButton: HTMLElement =
+            screen.getByRole('alert-close-button');
+        expect(alertCloseButton).toBeInTheDocument();
     });
 });
diff --git a/CommonUI/src/Tests/Components/Badge.test.tsx b/CommonUI/src/Tests/Components/Badge.test.tsx
index 592ce79e2c..0b956ede8c 100644
--- a/CommonUI/src/Tests/Components/Badge.test.tsx
+++ b/CommonUI/src/Tests/Components/Badge.test.tsx
@@ -2,16 +2,17 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Badge, { BadgeType } from '../../Components/Badge/Badge';
-import Icon from '../../Components/Icon/Icon';
 
 describe('Badge', () => {
     test('it should render all props', () => {
         render(<Badge badgeCount={2} badgeType={BadgeType.SUCCESS} />);
-        expect(Icon).toBeInTheDocument()
+        const badge: HTMLElement = screen.getByRole('badge');
+        expect(badge).toBeInTheDocument();
     });
-    test('it should show icon when badgetype is equal to success', () => {
+    test('it should show badge when badgetype is equal to success', () => {
         render(<Badge badgeCount={1} badgeType={BadgeType.SUCCESS} />);
-        expect(Icon).toBeInTheDocument()
+        const badge: HTMLElement = screen.getByRole('badge');
+        expect(badge).toBeInTheDocument();
         const testId: HTMLElement = screen.getByText(1);
         expect(testId).toHaveClass('bg-success');
     });
@@ -50,4 +51,9 @@ describe('Badge', () => {
         const testId: HTMLElement = screen.getByText(2);
         expect(testId).toHaveTextContent('2');
     });
+
+    test('should not show a badge when the count is 0', () => {
+        render(<Badge badgeCount={0} badgeType={BadgeType.WARNING} />);
+        expect(screen.queryByRole('badge')).toBeFalsy();
+    });
 });
diff --git a/CommonUI/src/Tests/Components/BasicForm.test.tsx b/CommonUI/src/Tests/Components/BasicForm.test.tsx
index 07cb705538..20e8909255 100644
--- a/CommonUI/src/Tests/Components/BasicForm.test.tsx
+++ b/CommonUI/src/Tests/Components/BasicForm.test.tsx
@@ -10,7 +10,6 @@ import Fields from '../../Components/Forms/Types/Fields';
 import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
 import '@testing-library/jest-dom/extend-expect';
 
-
 describe('BasicForm test', () => {
     const fields: Fields<FormValues<any>> = [
         {
@@ -57,8 +56,8 @@ describe('BasicForm test', () => {
         const forgotPasswordText: HTMLElement = screen.getByTestId(
             'login-forgot-password'
         );
-        expect(inputEmail).toBeInTheDocument()
-        expect(inputPassword).toBeInTheDocument()
+        expect(inputEmail).toBeInTheDocument();
+        expect(inputPassword).toBeInTheDocument();
         expect(footer).toHaveTextContent('Footer');
         expect(forgotPasswordText).toHaveTextContent('Forgot password?');
     });
diff --git a/CommonUI/src/Tests/Components/Button.test.tsx b/CommonUI/src/Tests/Components/Button.test.tsx
index 5b78263bc6..461574a1f1 100644
--- a/CommonUI/src/Tests/Components/Button.test.tsx
+++ b/CommonUI/src/Tests/Components/Button.test.tsx
@@ -4,10 +4,10 @@ import '@testing-library/jest-dom/extend-expect';
 import Button, {
     ButtonSize,
     ButtonStyleType,
-} from '../Components/Button/Button';
-import ButtonType from '../Components/Button/ButtonTypes';
-import ShortcutKey from '../Components/ShortcutKey/ShortcutKey';
-import Icon from '../Components/Icon/Icon';
+} from '../../Components/Button/Button';
+import ButtonType from '../../Components/Button/ButtonTypes';
+import ShortcutKey from '../../Components/ShortcutKey/ShortcutKey';
+import { IconProp } from '../../Components/Icon/Icon';
 
 describe('Button', () => {
     test('it should render correctly with title and icon', () => {
@@ -18,17 +18,19 @@ describe('Button', () => {
                 disabled={true}
                 type={ButtonType.Button}
                 showIconOnRight={true}
+                icon={IconProp.Add}
             />
         );
         const title: HTMLElement = screen.getByText('sample title');
         const testId: HTMLElement = screen.getByTestId('test-id');
 
-        expect(title).toBeInTheDocument()
-        expect(testId).toBeInTheDocument()
+        expect(title).toBeInTheDocument();
+        expect(testId).toBeInTheDocument();
         expect(testId).toHaveAttribute('type', 'button');
         expect(testId).toHaveAttribute('disabled');
         expect(testId).toHaveClass('btn');
-        expect(Icon).toBeInTheDocument()
+        const icon: HTMLElement = screen.getByRole('icon');
+        expect(icon).toBeInTheDocument();
     });
 
     test('it should have shortcutKey Setting', () => {
@@ -181,7 +183,7 @@ describe('Button', () => {
         render(<Button dataTestId="test-id" disabled={false} />);
         const testId: HTMLElement = screen.getByTestId('test-id');
 
-        expect(testId).not.toBeDisabled;
+        expect(testId).not.toBeDisabled();
     });
 
     test('it should handle onClick event', () => {
diff --git a/CommonUI/src/Tests/Components/HiddenText.test.tsx b/CommonUI/src/Tests/Components/HiddenText.test.tsx
index fa66f8c0da..8f068da4c3 100644
--- a/CommonUI/src/Tests/Components/HiddenText.test.tsx
+++ b/CommonUI/src/Tests/Components/HiddenText.test.tsx
@@ -1,73 +1,66 @@
 import React from 'react';
-import { render, screen, fireEvent, act } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import HiddenText from '../../Components/HiddenText/HiddenText';
-import Icon from '../../Components/Icon/Icon';
+
 describe('tests for HiddenText component', () => {
-    it('it should click paragraph and show text in document', async () => {
-        act(() => {
-            render(<HiddenText text="text" />);
+    test('it should click hidden-text and reveal text in document', async () => {
+        render(<HiddenText text="Special" />);
+        const hiddenText: HTMLElement = screen.getByRole('hidden-text');
+        fireEvent.click(hiddenText);
+
+        await waitFor(() => {
+            expect(screen.getByRole('revealed-text')).toBeInTheDocument();
         });
-        const paragraph: HTMLElement = screen.getByRole('paragraph');
-        await act(async () => {
-            fireEvent.click(paragraph);
-        });
-        expect(screen.getByText('text')).toBeInTheDocument();
-    });
-    it('it should call function after clicking paragraph', async () => {
-        const setShowText: () => true = jest.fn();
-        act(() => {
-            render(<HiddenText text="text" />);
-        });
-        const paragraph: HTMLElement = screen.getByRole('paragraph');
-        await act(async () => {
-            fireEvent.click(paragraph);
-        });
-        expect(setShowText).toBeCalled();
-    });
-    it('it should click paragraph and copy to clipboard', async () => {
-        act(() => {
-            render(
-                <HiddenText
-                    text="text"
-                    isCopyable={true}
-                    dataTestId="test-id"
-                />
-            );
-        });
-        const paragraph: HTMLElement = screen.getByRole('paragraph');
-        await act(async () => {
-            fireEvent.click(paragraph);
-        });
-        expect(screen.getByTestId('test-id')).toHaveTextContent(
-            'Copy to Clipboard'
+
+        expect(screen.queryByRole('hidden-text')).toBeFalsy();
+        expect(screen.queryByRole('revealed-text')).toHaveTextContent(
+            'Special'
         );
     });
-    it('it should call function after clicking paragraph', async () => {
-        const setCopyToClipboard: () => false = jest.fn();
-        act(() => {
-            render(<HiddenText text="text" isCopyable={true} />);
+
+    test('it should not show copy to clipboard if isCopyable is false', async () => {
+        render(<HiddenText text="text" isCopyable={false} />);
+        const hiddenText: HTMLElement = screen.getByRole('hidden-text');
+        fireEvent.click(hiddenText);
+
+        await waitFor(() => {
+            expect(screen.getByRole('revealed-text')).toBeInTheDocument();
         });
-        const paragraph: HTMLElement = screen.getByRole('paragraph');
-        await act(async () => {
-            fireEvent.click(paragraph);
-        });
-        expect(setCopyToClipboard).toBeCalled();
-    });
-    test('it should show icon in the document', () => {
-        render(<HiddenText text="text" />);
-        expect(Icon).toBeInTheDocument()
-    });
-    test('it should show paragraph in the document and its content ', () => {
-        render(<HiddenText dataTestId="test-id" text="text" />);
-        const testId: HTMLElement = screen.getByRole('paragraph');
-        expect(testId).toBeInTheDocument()
-        expect(testId).toHaveTextContent('Click here to reveal');
+
+        expect(screen.queryByRole('hidden-text')).toBeFalsy();
+        expect(screen.queryByRole('copy-to-clipboard')).toBeFalsy();
     });
 
-    test('it should have a paragraph and its role attribute', () => {
-        render(<HiddenText text="text" />);
-        const testId: HTMLElement = screen.getByRole('paragraph');
-        expect(testId).toHaveAttribute('role', 'paragraph');
+    test('it should click hidden-text and reveal icon', async () => {
+        render(<HiddenText text="text" isCopyable={true} />);
+        const hiddenText: HTMLElement = screen.getByRole('hidden-text');
+        fireEvent.click(hiddenText);
+        await waitFor(() => {
+            expect(screen.getByRole('revealed-text')).toBeInTheDocument();
+        });
+        expect(screen.queryByRole('icon')).toBeTruthy();
+    });
+
+    test('it should click hidden-text and copy to clipboard', async () => {
+        render(<HiddenText text="text" isCopyable={true} />);
+        const hiddenText: HTMLElement = screen.getByRole('hidden-text');
+        fireEvent.click(hiddenText);
+        await waitFor(() => {
+            expect(screen.getByRole('revealed-text')).toBeInTheDocument();
+        });
+
+        expect(screen.getByRole('copy-to-clipboard')).toHaveTextContent(
+            'Copy to Clipboard'
+        );
+
+        const copy: HTMLElement = screen.getByRole('copy-to-clipboard');
+        fireEvent.click(copy);
+
+        await waitFor(() => {
+            expect(screen.getByRole('copy-to-clipboard')).toHaveTextContent(
+                'Copied to Clipboard'
+            );
+        });
     });
 });
diff --git a/CommonUI/src/Tests/Components/Loader.test.tsx b/CommonUI/src/Tests/Components/Loader.test.tsx
index 99061ca55e..da88b006d5 100644
--- a/CommonUI/src/Tests/Components/Loader.test.tsx
+++ b/CommonUI/src/Tests/Components/Loader.test.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import BarLoader from 'react-spinners/BarLoader';
-import BeatLoader from 'react-spinners/BeatLoader';
 import Loader, { LoaderType } from '../../Components/Loader/Loader';
 import Color from 'Common/Types/Color';
 
@@ -15,7 +13,8 @@ describe('Loader tests', () => {
                 loaderType={LoaderType.Bar}
             />
         );
-        expect(BarLoader).toBeInTheDocument();
+        const barLoader: HTMLElement = screen.getByRole('bar-loader');
+        expect(barLoader).toBeInTheDocument();
     });
     test('it should render if beats loader show up', () => {
         render(
@@ -25,6 +24,7 @@ describe('Loader tests', () => {
                 loaderType={LoaderType.Beats}
             />
         );
-        expect(BeatLoader).toBeInTheDocument()
+        const beatLoader: HTMLElement = screen.getByRole('beat-loader');
+        expect(beatLoader).toBeInTheDocument();
     });
 });
diff --git a/CommonUI/src/Tests/Components/Pill.test.tsx b/CommonUI/src/Tests/Components/Pill.test.tsx
index 77c8c5a6f7..316f1d5fb5 100644
--- a/CommonUI/src/Tests/Components/Pill.test.tsx
+++ b/CommonUI/src/Tests/Components/Pill.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import Pill, { PillSize } from '../Components/Pill/Pill';
+import Pill, { PillSize } from '../../Components/Pill/Pill';
 import Color from 'Common/Types/Color';
 
 describe('<Pill />', () => {
diff --git a/CommonUI/src/Tests/Components/Toast.test.tsx b/CommonUI/src/Tests/Components/Toast.test.tsx
index 784a95000e..dd2ef46433 100644
--- a/CommonUI/src/Tests/Components/Toast.test.tsx
+++ b/CommonUI/src/Tests/Components/Toast.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
 import userEvent from '@testing-library/user-event';
-import Toast, { ToastType } from '../Components/Toast/Toast';
+import Toast, { ToastType } from '../../Components/Toast/Toast';
 import OneUptimeDate from 'Common/Types/Date';
 
 describe('Test for Toast.tsx', () => {
@@ -128,6 +128,6 @@ describe('Test for Toast.tsx', () => {
             screen.getByTestId('toast-button');
         await user.click(loginButton);
 
-        expect(screen.queryByTestId('toast-main')).toBeFalsy;
+        expect(screen.queryByTestId('toast-main')).toBeFalsy();
     });
 });