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(); + 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(); 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(); + + 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(); + 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(); + 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(); + 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(); + 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(); + const toast = screen.queryByTestId('toast'); + expect(toast).not.toBeInTheDocument(); + }); + + test('should not show toast message after 3 seconds', async () => { + jest.useFakeTimers(); + render(); + const copyButton = screen.getByTestId('copy-button'); + fireEvent.click(copyButton); + const toast = screen.getByTestId('toast'); + expect(toast).toBeInTheDocument(); + await act(async () => { + jest.advanceTimersByTime(3000); + }); + render(); + 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 = ({ message, isVisible, timeToShow, onDismiss }, [isVisible, timeToShow, onDismiss]); return isVisible ? ( -
+
{message}
) : null;