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 ? (
-