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] 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>
     );