UI : removed uncessary buttons and improve UI

.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

.gitignore

@@ -7,7 +7,6 @@
 
 # testing
 /coverage
-./__tests__/__snapshots__
 
 # next.js
 /.next/

__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');
     });
 
@@ -24,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', () => {
@@ -48,4 +49,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();
+    });
 });

__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');

__tests__/components/Toast.test.tsx

@@ -0,0 +1,25 @@
+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 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 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());
+    });
+});

__tests__/pages/dashboard.test.tsx

@@ -0,0 +1,100 @@
+import Dashboard from '../../src/pages/dashboard';
+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');
+        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]+$/);
+    });
+
+    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();
+    });
+});

__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;

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

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"
     },

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

src/components/Toast/index.tsx

@@ -0,0 +1,33 @@
+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"
+            data-testid="toast"
+        >
+            {message}
+        </div>
+    ) : null;
+};
+
+export default Toast;

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`;