diff --git a/__tests__/pages/[redirect].test.tsx b/__tests__/pages/[redirect].test.tsx new file mode 100644 index 0000000..7d0405b --- /dev/null +++ b/__tests__/pages/[redirect].test.tsx @@ -0,0 +1,62 @@ +import { render, screen, act, fireEvent } from '@testing-library/react'; +import Redirect from '../../src/pages/[redirect]/index'; +import { useRouter } from 'next/router'; + +jest.mock('next/router', () => ({ + useRouter: jest.fn(), +})); + +describe('Redirect Component', () => { + const mockRouterPush = jest.fn(); + const mockRouterReplace = jest.fn(); + const mockRouter = { + push: mockRouterPush, + replace: mockRouterReplace, + query: { redirect: 'ffdsfds' }, + }; + + beforeEach(() => { + (useRouter as jest.Mock).mockReturnValue(mockRouter); + }); + + test('renders the Redirect component with countdown and Go button', () => { + render(); + const goButton = screen.getByText('Go'); + + expect(goButton).toBeInTheDocument(); + }); + + test('redirects to original URL on Go button click', async () => { + render(); + const goButton = screen.getByText('Go'); + await act(async () => { + fireEvent.click(goButton); + }); + expect(mockRouterPush).toHaveBeenCalled(); + }); + + test('redirects to original URL on Go button click', async () => { + render(); + const goButton = screen.getByText('Go'); + await act(async () => { + fireEvent.click(goButton); + }); + expect(mockRouterPush).toHaveBeenCalled(); + }); + + test('show tooltip on Go button click', async () => { + render(); + const goButton = screen.getByText('Go'); + await act(async () => { + fireEvent.click(goButton); + }); + expect(mockRouterPush).toHaveBeenCalled(); + }); + + test('fetchOriginalUrl function returns original URL', async () => { + const mockFetchOriginalUrl = jest.fn(); + mockFetchOriginalUrl.mockReturnValue('https://www.google.com'); + const originalUrl = await mockFetchOriginalUrl(); + expect(originalUrl).toBe('https://www.google.com'); + }); +}); diff --git a/__tests__/utils/fetchOriginalUrl.test.ts b/__tests__/utils/fetchOriginalUrl.test.ts new file mode 100644 index 0000000..e66545e --- /dev/null +++ b/__tests__/utils/fetchOriginalUrl.test.ts @@ -0,0 +1,39 @@ +import fetchMock from 'jest-fetch-mock'; +import fetchOriginalUrl from '../../src/utils/fetchOriginalUrl'; +import { act } from 'react-dom/test-utils'; + +fetchMock.enableMocks(); + +describe('fetchOriginalUrl', () => { + const shortUrlCode = '442d39ac'; + const originalUrl = 'https://github.com/Real-Dev-Squad/tiny-site-frontend/pull/40'; + + it('fetches and displays the original URL if the response is successful', async () => { + const responseData = { url: { OriginalUrl: originalUrl } }; + + fetchMock.mockResponse(JSON.stringify(responseData), { status: 200 }); + + await act(async () => { + const result = await fetchOriginalUrl(shortUrlCode); + expect(result).toEqual(originalUrl); + }); + }); + + it('returns null if the response is not successful', async () => { + fetchMock.mockResponse('', { status: 404 }); + + await act(async () => { + const result = await fetchOriginalUrl(shortUrlCode); + expect(result).toBeNull(); + }); + }); + + it('handles errors gracefully', async () => { + fetchMock.mockReject(new Error('Network error')); + + await act(async () => { + const result = await fetchOriginalUrl(shortUrlCode); + expect(result).toBeNull(); + }); + }); +}); diff --git a/src/pages/[slug]/index.tsx b/src/pages/[redirect]/index.tsx similarity index 96% rename from src/pages/[slug]/index.tsx rename to src/pages/[redirect]/index.tsx index 6ad33f3..d151ee1 100644 --- a/src/pages/[slug]/index.tsx +++ b/src/pages/[redirect]/index.tsx @@ -1,4 +1,4 @@ -import fetchOriginalUrl from '@/utils/fetchOriginalUrl '; +import fetchOriginalUrl from '@/utils/fetchOriginalUrl'; import RedirectIcon from '../../../public/assets/icons/redirect'; import { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; @@ -7,7 +7,7 @@ import { TINY_SITE } from '@/constants/url'; const Redirect = () => { const router = useRouter(); - const { slug: shortUrlCode } = router.query as { slug: string }; + const { redirect: shortUrlCode } = router.query as { redirect: string }; const [originalUrl, setOriginalUrl] = useState(''); const [timer, setTimer] = useState(5); const [isPremiumUser, setIsPremiumUser] = useState(false); diff --git a/src/utils/fetchOriginalUrl .ts b/src/utils/fetchOriginalUrl.ts similarity index 82% rename from src/utils/fetchOriginalUrl .ts rename to src/utils/fetchOriginalUrl.ts index 0c03429..682db12 100644 --- a/src/utils/fetchOriginalUrl .ts +++ b/src/utils/fetchOriginalUrl.ts @@ -9,11 +9,11 @@ async function fetchOriginalUrl(shortUrlCode: string): Promise { const data = (await response.json()) as UrlResponseTypes; return data.url.OriginalUrl; } else { - return null; // Return null if the response is not ok + return null; } } catch (error) { console.error('Error fetching original URL:', error); - return null; // Return null in case of an error + return null; } }