test: improve test of dashboard page

Real-Dev-Squad · Nov 7, 2023 · a476986 · a476986
1 parent 63073c9
commit a476986
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;