From 540c546546681da6edc52bfdcfaeb8837ce2363e Mon Sep 17 00:00:00 2001
From: Sunny Sahsi <sahsisunny@gmail.com>
Date: Mon, 6 Nov 2023 12:51:05 +0530
Subject: [PATCH 1/7] UI : removed uncessary buttons and improve UI

---
 __tests__/components/Navbar.test.tsx |  2 -
 src/components/Navbar/index.tsx      | 10 -----
 src/pages/dashboard/index.tsx        | 57 ++++++++--------------------
 3 files changed, 16 insertions(+), 53 deletions(-)

diff --git a/__tests__/components/Navbar.test.tsx b/__tests__/components/Navbar.test.tsx
index ac626e3..9b06708 100644
--- a/__tests__/components/Navbar.test.tsx
+++ b/__tests__/components/Navbar.test.tsx
@@ -13,9 +13,7 @@ describe('Navbar', () => {
     it('should have dropdown menu', () => {
         const { container } = render(<Navbar />);
         expect(container.querySelector('ul')).toBeInTheDocument();
-        expect(container.querySelector('ul')).toContainHTML('Profile');
         expect(container.querySelector('ul')).toContainHTML('Dashboard');
-        expect(container.querySelector('ul')).toContainHTML('Settings');
         expect(container.querySelector('ul')).toContainHTML('Sign Out');
     });
 
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 5c1dfae..804aceb 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -57,21 +57,11 @@ const Navbar: React.FC = () => {
                         )}
                     </li>
                     <ul className={`${menuOpen ? 'block' : 'hidden'} absolute top-[8vh] right-0 bg-gray-800 p-2 z-10`}>
-                        <li>
-                            <a href="#" className="text-white hover:bg-gray-700 block px-4 py-2">
-                                Profile
-                            </a>
-                        </li>
                         <li>
                             <a href="#" className="text-white hover:bg-gray-700 block px-4 py-2">
                                 Dashboard
                             </a>
                         </li>
-                        <li>
-                            <a href="#" className="text-white hover:bg-gray-700 block px-4 py-2">
-                                Settings
-                            </a>
-                        </li>
                         <li>
                             <a href={TINY_API_LOGOUT} className="text-white hover:bg-gray-700 block px-4 py-2">
                                 Sign Out
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 45d3cca..831b2db 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -3,9 +3,7 @@ import InputBox from '@/components/InputBox';
 import Layout from '@/components/Layout';
 import { randomString } from '@/utils/constants';
 import { useState } from 'react';
-import AddIcon from '../../../public/assets/icons/add';
 import CopyIcon from '../../../public/assets/icons/copy';
-import ReloadIcon from '../../../public/assets/icons/reload';
 
 const Dashboard = () => {
     const [url, getUrl] = useState<string>('');
@@ -18,64 +16,41 @@ const Dashboard = () => {
         <Layout title="Home | URL Shortener">
             <div className="w-screen">
                 <div className="flex flex-col justify-center items-center m-4">
-                    <div className="w-full lg:w-[42rem]">
+                    <div className="w-full lg:w-[42rem] md:w-[32rem] sm:w-[22rem]">
                         <h1 className="text-4xl text-center text-white font-semibold">URL Shortener</h1>{' '}
-                        <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 my-2">
+                        <div className="bg-gray-200 flex flex-row justify-center items-center space-y-0 space-x-0 rounded-2xl mt-5 sm:mt-10">
                             <InputBox
                                 type="text"
                                 hideLabel={true}
-                                className="w-full bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
-                                onChange={(e) => {
-                                    getUrl(e.target.value);
-                                }}
+                                className="bg-gray-200 w-full outline-none p-4 rounded-l-2xl"
+                                onChange={(e) => getUrl(e.target.value)}
                                 value={url}
-                                placeholder="Enter the URL"
+                                placeholder="🔗 Enter the URL"
                                 name="URL"
                             />
                             <Button
-                                className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl  px-4 md:px-8 py-4 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                                onClick={() => handleUniqueUrl()}
+                                className="bg-gray-300 rounded-r-2xl p-4 hover:bg-gray-400"
+                                onClick={handleUniqueUrl}
                             >
                                 Generate
                             </Button>
                         </div>
-                        <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1">
+                        <div className="bg-gray-200 flex flex-row justify-center items-center space-y-0 space-x-0 rounded-2xl mt-2">
                             <InputBox
                                 type="text"
                                 name="URL"
                                 hideLabel={true}
-                                className="w-full bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
+                                className="bg-gray-200 w-full outline-none p-4 rounded-l-2xl"
                                 value={shortUrl}
-                                disabled={true}
                                 placeholder="Copy the URL"
                             />
-                            <div className="flex flex-row justify-center items-center space-x-1">
-                                <Button
-                                    type="button"
-                                    className="w-full h-100 md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                                    onClick={() => handleUniqueUrl()}
-                                >
-                                    <ReloadIcon />
-                                </Button>
-                                <Button
-                                    type="button"
-                                    className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                                    onClick={() => {
-                                        setUrl('');
-                                    }}
-                                >
-                                    <AddIcon />
-                                </Button>
-                                <Button
-                                    type="button"
-                                    className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                                    onClick={() => {
-                                        navigator.clipboard.writeText(shortUrl);
-                                    }}
-                                >
-                                    <CopyIcon />
-                                </Button>
-                            </div>
+                            <Button
+                                type="button"
+                                className="bg-gray-200 rounded-r-2xl p-4 hover:bg-gray-400"
+                                onClick={() => navigator.clipboard.writeText(shortUrl)}
+                            >
+                                <CopyIcon />
+                            </Button>
                         </div>
                     </div>
                 </div>

From b8620851e326d5485c43461cccb59edd6df0ae82 Mon Sep 17 00:00:00 2001
From: Sunny Sahsi <sahsisunny@gmail.com>
Date: Tue, 7 Nov 2023 13:14:34 +0530
Subject: [PATCH 2/7] feat: add test component

---
 __tests__/components/Toast.test.tsx | 41 +++++++++++++++++++++++++++++
 __tests__/hello.test.tsx            | 10 -------
 __tests__/pages/dashboard.test.tsx  | 26 ++++++++++++++++++
 src/components/Toast/index.tsx      | 30 +++++++++++++++++++++
 src/pages/dashboard/index.tsx       | 21 ++++++++++++++-
 5 files changed, 117 insertions(+), 11 deletions(-)
 create mode 100644 __tests__/components/Toast.test.tsx
 delete mode 100644 __tests__/hello.test.tsx
 create mode 100644 __tests__/pages/dashboard.test.tsx
 create mode 100644 src/components/Toast/index.tsx

diff --git a/__tests__/components/Toast.test.tsx b/__tests__/components/Toast.test.tsx
new file mode 100644
index 0000000..2a6f9a8
--- /dev/null
+++ b/__tests__/components/Toast.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import Toast from '../../src/components/Toast';
+
+describe('Toast', () => {
+    const onDismiss = jest.fn();
+
+    test('should render the toast component', () => {
+        const { container } = render(
+            <Toast message="This is a toast message" isVisible={true} timeToShow={5000} onDismiss={onDismiss} />
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+
+    test('should render the toast component with the message', () => {
+        render(<Toast message="This is a toast message" isVisible={true} timeToShow={5000} onDismiss={onDismiss} />);
+
+        expect(screen.getByText('This is a toast message')).toBeInTheDocument();
+    });
+
+    test('should not render the toast component', () => {
+        const { container } = render(
+            <Toast message="This is a toast message" isVisible={false} timeToShow={5000} onDismiss={onDismiss} />
+        );
+
+        expect(container).toMatchSnapshot();
+    });
+
+    test('should not call onDismiss function when the timeToShow is not completed', () => {
+        render(<Toast message="This is a toast message" isVisible={true} timeToShow={5000} onDismiss={onDismiss} />);
+
+        expect(onDismiss).not.toHaveBeenCalled();
+    });
+
+    test('should call onDismiss function when the timeToShow is completed', async () => {
+        render(<Toast message="This is a toast message" isVisible={true} timeToShow={0} onDismiss={onDismiss} />);
+
+        await waitFor(() => expect(onDismiss).toHaveBeenCalled());
+    });
+});
diff --git a/__tests__/hello.test.tsx b/__tests__/hello.test.tsx
deleted file mode 100644
index e62397d..0000000
--- a/__tests__/hello.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Hello } from '../src/app/hello';
-
-describe('Hello', () => {
-    it('should render', () => {
-        const { container } = render(<Hello />);
-        expect(container).toHaveTextContent('Hello');
-    });
-});
diff --git a/__tests__/pages/dashboard.test.tsx b/__tests__/pages/dashboard.test.tsx
new file mode 100644
index 0000000..65efbc7
--- /dev/null
+++ b/__tests__/pages/dashboard.test.tsx
@@ -0,0 +1,26 @@
+import Dashboard from '../../src/pages/dashboard';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+describe('Dashboard Component', () => {
+    test('renders the Dashboard component', () => {
+        render(<Dashboard />);
+        const urlInput = screen.getByPlaceholderText('🔗 Enter the URL');
+        const generateButton = screen.getByText('Generate');
+        const copyButton = screen.getByTestId('copy-button');
+
+        expect(urlInput).toBeInTheDocument();
+        expect(generateButton).toBeInTheDocument();
+        expect(copyButton).toBeInTheDocument();
+    });
+
+    test('generates a short URL when clicking the Generate button', () => {
+        render(<Dashboard />);
+        const generateButton = screen.getByText('Generate');
+        const shortUrlInput = screen.getByPlaceholderText('Copy the URL');
+
+        fireEvent.click(generateButton);
+        const shortUrlValue = shortUrlInput.value;
+
+        expect(shortUrlValue).toMatch(/^https:\/\/rds\.li\/[a-zA-Z0-9]+$/);
+    });
+});
diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
new file mode 100644
index 0000000..dbf907c
--- /dev/null
+++ b/src/components/Toast/index.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+
+interface ToastProps {
+    message: string;
+    isVisible: boolean;
+    timeToShow: number;
+    onDismiss: () => void;
+}
+
+const Toast: React.FC<ToastProps> = ({ message, isVisible, timeToShow, onDismiss }) => {
+    useEffect(() => {
+        if (isVisible) {
+            const timer = setTimeout(() => {
+                onDismiss();
+            }, timeToShow);
+
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    }, [isVisible, timeToShow, onDismiss]);
+
+    return isVisible ? (
+        <div className="fixed bottom-10 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white px-4 py-2 rounded-lg border-2 border-cyan-100">
+            {message}
+        </div>
+    ) : null;
+};
+
+export default Toast;
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 831b2db..c2fb498 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -1,6 +1,7 @@
 import Button from '@/components/Button';
 import InputBox from '@/components/InputBox';
 import Layout from '@/components/Layout';
+import Toast from '@/components/Toast';
 import { randomString } from '@/utils/constants';
 import { useState } from 'react';
 import CopyIcon from '../../../public/assets/icons/copy';
@@ -8,10 +9,19 @@ import CopyIcon from '../../../public/assets/icons/copy';
 const Dashboard = () => {
     const [url, getUrl] = useState<string>('');
     const [shortUrl, setUrl] = useState<string>('');
+    const [toastMessage, setToastMessage] = useState<string>('');
+    const [showToast, setShowToast] = useState(false);
 
     const handleUniqueUrl = () => {
         setUrl(`https://rds.li/${randomString}`);
     };
+
+    const handleCopyUrl = () => {
+        shortUrl ? setToastMessage('Copied to clipboard') : setToastMessage('No URL to copy');
+        navigator.clipboard.writeText(shortUrl);
+        setShowToast(true);
+    };
+
     return (
         <Layout title="Home | URL Shortener">
             <div className="w-screen">
@@ -47,13 +57,22 @@ const Dashboard = () => {
                             <Button
                                 type="button"
                                 className="bg-gray-200 rounded-r-2xl p-4 hover:bg-gray-400"
-                                onClick={() => navigator.clipboard.writeText(shortUrl)}
+                                testId="copy-button"
+                                onClick={handleCopyUrl}
                             >
                                 <CopyIcon />
                             </Button>
                         </div>
                     </div>
                 </div>
+                {showToast && (
+                    <Toast
+                        message={toastMessage}
+                        isVisible={showToast}
+                        timeToShow={3000}
+                        onDismiss={() => setShowToast(false)}
+                    />
+                )}
             </div>
         </Layout>
     );

From 8e5a52830620405dd47289a07814ccabc8121453 Mon Sep 17 00:00:00 2001
From: Sunny Sahsi <sahsisunny@gmail.com>
Date: Tue, 7 Nov 2023 13:25:49 +0530
Subject: [PATCH 3/7] config: add changes to not generate snapshots

---
 .gitignore     | 1 -
 jest.config.js | 1 +
 package.json   | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index eef19c9..b7d2741 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,6 @@
 
 # testing
 /coverage
-./__tests__/__snapshots__
 
 # next.js
 /.next/
diff --git a/jest.config.js b/jest.config.js
index 213f270..5a85076 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -7,6 +7,7 @@ const createJestConfig = nextJest({
 const customJestConfig = {
     setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
     testEnvironment: 'jest-environment-jsdom',
+    snapshotSerializers: [],
 };
 
 module.exports = createJestConfig(customJestConfig);
diff --git a/package.json b/package.json
index 708fd43..0777cd7 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
         "check:all": "yarn format:check && yarn lint:check",
         "fix:all": "yarn format:fix && yarn lint:fix",
         "prepare": "husky install",
-        "test": "jest --coverage -u",
+        "test": "jest --coverage",
         "lint": "eslint .",
         "lint-fix": "eslint . --fix"
     },

From 64dbee49849c85d05d9cf25d9a02899b95c7ab59 Mon Sep 17 00:00:00 2001
From: Sunny Sahsi <sahsisunny@gmail.com>
Date: Tue, 7 Nov 2023 13:26:44 +0530
Subject: [PATCH 4/7] config: add changes to not generate snapshots

---
 .github/workflows/pre-commit-checks.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pre-commit-checks.yml b/.github/workflows/pre-commit-checks.yml
index 043e47d..b117cd7 100644
--- a/.github/workflows/pre-commit-checks.yml
+++ b/.github/workflows/pre-commit-checks.yml
@@ -35,4 +35,4 @@ jobs:
               run: yarn format:check
 
             - name: Test check
-              run: yarn test -u
+              run: yarn test

From 63073c97c78821cfb368698b81dfc495f12538eb Mon Sep 17 00:00:00 2001
From: Sunny Sahsi <sahsisunny@gmail.com>
Date: Tue, 7 Nov 2023 13:28:32 +0530
Subject: [PATCH 5/7] test: removing test which generate snpshots

---
 __tests__/components/ProfileIcon.test.tsx |  5 -----
 __tests__/components/Toast.test.tsx       | 16 ----------------
 __tests__/pages/login.test.tsx            |  5 -----
 3 files changed, 26 deletions(-)

diff --git a/__tests__/components/ProfileIcon.test.tsx b/__tests__/components/ProfileIcon.test.tsx
index fe2ba6e..ef5d75a 100644
--- a/__tests__/components/ProfileIcon.test.tsx
+++ b/__tests__/components/ProfileIcon.test.tsx
@@ -3,11 +3,6 @@ import { render } from '@testing-library/react';
 import ProfileIcon from '@/components/ProfileIcon/ProfileIcon';
 
 describe('ProfileIcon', () => {
-    it('should render', () => {
-        const { container } = render(<ProfileIcon firstName="Sunny" lastName="Sahsi" size={50} />);
-        expect(container).toMatchSnapshot();
-    });
-
     it('should have the correct initials', () => {
         const { container } = render(<ProfileIcon firstName="Sunny" lastName="Sahsi" size={50} />);
         expect(container).toHaveTextContent('SS');
diff --git a/__tests__/components/Toast.test.tsx b/__tests__/components/Toast.test.tsx
index 2a6f9a8..a54a10c 100644
--- a/__tests__/components/Toast.test.tsx
+++ b/__tests__/components/Toast.test.tsx
@@ -5,28 +5,12 @@ import Toast from '../../src/components/Toast';
 describe('Toast', () => {
     const onDismiss = jest.fn();
 
-    test('should render the toast component', () => {
-        const { container } = render(
-            <Toast message="This is a toast message" isVisible={true} timeToShow={5000} onDismiss={onDismiss} />
-        );
-
-        expect(container).toMatchSnapshot();
-    });
-
     test('should render the toast component with the message', () => {
         render(<Toast message="This is a toast message" isVisible={true} timeToShow={5000} onDismiss={onDismiss} />);
 
         expect(screen.getByText('This is a toast message')).toBeInTheDocument();
     });
 
-    test('should not render the toast component', () => {
-        const { container } = render(
-            <Toast message="This is a toast message" isVisible={false} timeToShow={5000} onDismiss={onDismiss} />
-        );
-
-        expect(container).toMatchSnapshot();
-    });
-
     test('should not call onDismiss function when the timeToShow is not completed', () => {
         render(<Toast message="This is a toast message" isVisible={true} timeToShow={5000} onDismiss={onDismiss} />);
 
diff --git a/__tests__/pages/login.test.tsx b/__tests__/pages/login.test.tsx
index 6b1da04..21a5fe2 100644
--- a/__tests__/pages/login.test.tsx
+++ b/__tests__/pages/login.test.tsx
@@ -2,11 +2,6 @@ import { fireEvent, render } from '@testing-library/react';
 import LoginPage from '../../src/pages/login';
 
 describe('LoginPage', () => {
-    it('should render without throwing an error', () => {
-        const { container } = render(<LoginPage />);
-        expect(container).toMatchSnapshot();
-    });
-
     it('should render username input', () => {
         const { getByLabelText } = render(<LoginPage />);
         const usernameInput = getByLabelText('username') as HTMLInputElement;

From a476986e087195595f9f0b0b32065cf12a566db2 Mon Sep 17 00:00:00 2001
From: Sunny Sahsi <sahsisunny@gmail.com>
Date: Tue, 7 Nov 2023 19:12:57 +0530
Subject: [PATCH 6/7] test: improve test of dashboard page

---
 __tests__/components/Navbar.test.tsx |  9 ++++
 __tests__/pages/dashboard.test.tsx   | 76 +++++++++++++++++++++++++++-
 src/components/Toast/index.tsx       |  5 +-
 3 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/__tests__/components/Navbar.test.tsx b/__tests__/components/Navbar.test.tsx
index 9b06708..d0e46ce 100644
--- a/__tests__/components/Navbar.test.tsx
+++ b/__tests__/components/Navbar.test.tsx
@@ -46,4 +46,13 @@ describe('Navbar', () => {
         const signInButton = screen.getByText('Sign In');
         expect(signInButton).toBeInTheDocument();
     });
+
+    it('should display "Sign Out" when logged in', () => {
+        render(<Navbar />);
+        const originalIsLoggedIn = screen.getByText('Sign In');
+        fireEvent.click(originalIsLoggedIn);
+
+        const signOutButton = screen.getByText('Sign Out');
+        expect(signOutButton).toBeInTheDocument();
+    });
 });
diff --git a/__tests__/pages/dashboard.test.tsx b/__tests__/pages/dashboard.test.tsx
index 65efbc7..609de23 100644
--- a/__tests__/pages/dashboard.test.tsx
+++ b/__tests__/pages/dashboard.test.tsx
@@ -1,7 +1,10 @@
 import Dashboard from '../../src/pages/dashboard';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 
 describe('Dashboard Component', () => {
+    const mockWriteText = jest.fn();
+    global.navigator.clipboard = { writeText: mockWriteText };
+
     test('renders the Dashboard component', () => {
         render(<Dashboard />);
         const urlInput = screen.getByPlaceholderText('🔗 Enter the URL');
@@ -23,4 +26,75 @@ describe('Dashboard Component', () => {
 
         expect(shortUrlValue).toMatch(/^https:\/\/rds\.li\/[a-zA-Z0-9]+$/);
     });
+
+    it('should have two inputs and two buttons', () => {
+        render(<Dashboard />);
+
+        const urlInput = screen.getByPlaceholderText('🔗 Enter the URL');
+        expect(urlInput).toBeInTheDocument();
+        const shortUrlInput = screen.getByPlaceholderText('Copy the URL');
+        expect(shortUrlInput).toBeInTheDocument();
+
+        const generateButton = screen.getByText('Generate');
+        expect(generateButton).toBeInTheDocument();
+
+        const copyButton = screen.getByTestId('copy-button');
+        expect(copyButton).toBeInTheDocument();
+    });
+
+    it('should get the value from the input box', () => {
+        render(<Dashboard />);
+        const urlInput = screen.getByPlaceholderText('🔗 Enter the URL');
+        fireEvent.change(urlInput, { target: { value: 'https://www.google.com' } });
+        expect(urlInput.value).toBe('https://www.google.com');
+    });
+
+    test('should generate the short url when clicking the generate button', () => {
+        render(<Dashboard />);
+        const generateButton = screen.getByText('Generate');
+        fireEvent.click(generateButton);
+        const shortUrlInput = screen.getByPlaceholderText('Copy the URL');
+        const shortUrlValue = shortUrlInput.value;
+        expect(shortUrlValue).toMatch(/^https:\/\/rds\.li\/[a-zA-Z0-9]+$/);
+    });
+
+    it('should copy the short url when clicking the copy button', () => {
+        render(<Dashboard />);
+        const generateButton = screen.getByText('Generate');
+        fireEvent.click(generateButton);
+        const shortUrlInput = screen.getByPlaceholderText('Copy the URL');
+        const shortUrlValue = shortUrlInput.value;
+        expect(shortUrlValue).toMatch(/^https:\/\/rds\.li\/[a-zA-Z0-9]+$/);
+        const copyButton = screen.getByTestId('copy-button');
+        fireEvent.click(copyButton);
+        expect(mockWriteText).toHaveBeenCalledWith(shortUrlValue);
+    });
+
+    test('should show toast message when clicking the copy button', () => {
+        render(<Dashboard />);
+        const copyButton = screen.getByTestId('copy-button');
+        fireEvent.click(copyButton);
+        const toast = screen.getByTestId('toast');
+        expect(toast).toBeInTheDocument();
+    });
+
+    test('should not show toast message when not clicking the copy button', () => {
+        render(<Dashboard />);
+        const toast = screen.queryByTestId('toast');
+        expect(toast).not.toBeInTheDocument();
+    });
+
+    test('should not show toast message after 3 seconds', async () => {
+        jest.useFakeTimers();
+        render(<Dashboard />);
+        const copyButton = screen.getByTestId('copy-button');
+        fireEvent.click(copyButton);
+        const toast = screen.getByTestId('toast');
+        expect(toast).toBeInTheDocument();
+        await act(async () => {
+            jest.advanceTimersByTime(3000);
+        });
+        render(<Dashboard />);
+        expect(toast).not.toBeInTheDocument();
+    });
 });
diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
index dbf907c..e0db960 100644
--- a/src/components/Toast/index.tsx
+++ b/src/components/Toast/index.tsx
@@ -21,7 +21,10 @@ const Toast: React.FC<ToastProps> = ({ message, isVisible, timeToShow, onDismiss
     }, [isVisible, timeToShow, onDismiss]);
 
     return isVisible ? (
-        <div className="fixed bottom-10 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white px-4 py-2 rounded-lg border-2 border-cyan-100">
+        <div
+            className="fixed bottom-10 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white px-4 py-2 rounded-lg border-2 border-cyan-100"
+            data-testid="toast"
+        >
             {message}
         </div>
     ) : null;

From 48cff5a03bd7c50664a6bff501c36bcc1c6bd81f Mon Sep 17 00:00:00 2001
From: Sunny Sahsi <sahsisunny@gmail.com>
Date: Tue, 7 Nov 2023 20:07:32 +0530
Subject: [PATCH 7/7] fix: change backend API URL

---
 __tests__/components/Navbar.test.tsx | 5 ++++-
 src/constants/url.ts                 | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/__tests__/components/Navbar.test.tsx b/__tests__/components/Navbar.test.tsx
index d0e46ce..8ef8642 100644
--- a/__tests__/components/Navbar.test.tsx
+++ b/__tests__/components/Navbar.test.tsx
@@ -22,7 +22,10 @@ describe('Navbar', () => {
         const googleLoginButton = screen.getByTestId('google-login');
         expect(googleLoginButton).toBeInTheDocument();
         expect(googleLoginButton).toHaveTextContent('Sign In');
-        expect(googleLoginButton).toHaveAttribute('href', 'https://api-tinysite.onrender.com/v1/auth/google/login');
+        expect(googleLoginButton).toHaveAttribute(
+            'href',
+            'https://staging-tinysite-api.realdevsquad.com/v1/auth/google/login'
+        );
     });
 
     it('should display "Sign In" when not logged in', () => {
diff --git a/src/constants/url.ts b/src/constants/url.ts
index 2bc6f6d..118b8b5 100644
--- a/src/constants/url.ts
+++ b/src/constants/url.ts
@@ -1,3 +1,3 @@
-export const TINY_API_URL = 'https://api-tinysite.onrender.com/v1';
+export const TINY_API_URL = 'https://staging-tinysite-api.realdevsquad.com/v1';
 export const TINY_API_GOOGLE_LOGIN = `${TINY_API_URL}/auth/google/login`;
 export const TINY_API_LOGOUT = `${TINY_API_URL}/auth/logout`;