refactor: create separate svg component for DownArrow icon, create se…

…parate directory for fixtures and change API url
Real-Dev-Squad · Nov 5, 2023 · 0d51621 · 0d51621
1 parent 87c7172
commit 0d51621
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 33 deletions.
diff --git a/__tests__/components/Navbar.test.tsx b/__tests__/components/Navbar.test.tsx
@@ -24,10 +24,7 @@ describe('Navbar', () => {
         const googleLoginButton = screen.getByTestId('google-login');
         expect(googleLoginButton).toBeInTheDocument();
         expect(googleLoginButton).toHaveTextContent('Sign In');
-        expect(googleLoginButton).toHaveAttribute(
-            'href',
-            'https://tiny-site-backend.onrender.com/v1/auth/google/login'
-        );
+        expect(googleLoginButton).toHaveAttribute('href', 'https://api-tinysite.onrender.com/v1/auth/google/login');
     });
 
     it('should display "Sign In" when not logged in', () => {

diff --git a/__tests__/hooks/isAuthenticated.test.tsx b/__tests__/hooks/isAuthenticated.test.tsx
@@ -1,6 +1,7 @@
 import { renderHook } from '@testing-library/react-hooks';
 import fetchMock from 'jest-fetch-mock';
 import IsAuthenticated from '@/hooks/isAuthenticated';
+import { userData } from '../../fixtures/users';
 
 beforeAll(() => {
     fetchMock.enableMocks();
@@ -11,20 +12,7 @@ afterEach(() => {
 });
 
 it('should return isLoggedIn as true and userData if the request is successful', async () => {
-    const userDataMock = {
-        data: {
-            Id: 1,
-            Username: 'Sunny Sahsi',
-            Email: 'sunnysahsi@gmail.com',
-            Password: '',
-            IsVerified: false,
-            IsOnboarding: true,
-            CreatedAt: '2023-11-04T10:02:26.582699Z',
-            UpdatedAt: '2023-11-04T10:02:26.582699Z',
-        },
-        message: 'user fetched successfully',
-    };
-
+    const userDataMock = userData;
     fetchMock.mockResponseOnce(JSON.stringify(userDataMock), { status: 200 });
     const { result, waitForNextUpdate } = renderHook(() => IsAuthenticated());
     await waitForNextUpdate();

diff --git a/fixtures/users.ts b/fixtures/users.ts
@@ -0,0 +1,13 @@
+export const userData = {
+    data: {
+        Id: 1,
+        Username: 'Sunny Sahsi',
+        Email: 'sunnysahsi@gmail.com',
+        Password: '',
+        IsVerified: false,
+        IsOnboarding: true,
+        CreatedAt: '2023-11-04T10:02:26.582699Z',
+        UpdatedAt: '2023-11-04T10:02:26.582699Z',
+    },
+    message: 'user fetched successfully',
+};
diff --git a/public/assets/icons/downArrow.tsx b/public/assets/icons/downArrow.tsx
@@ -0,0 +1,13 @@
+const DownArrow = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-5 w-5 inline-block ml-1 transform group-hover:rotate-180 transition-transform"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+    >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+);
+
+export default DownArrow;
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Button from '@/components/Button';
 import ProfileIcon from '../ProfileIcon/ProfileIcon';
 import GoogleIcon from '../../../public/assets/icons/google';
+import DownArrowIcon from '../../../public/assets/icons/downArrow';
 import IsAuthenticated from '@/hooks/isAuthenticated';
 import { TINY_API_GOOGLE_LOGIN, TINY_API_LOGOUT } from '@/constants/url';
 
@@ -40,20 +41,7 @@ const Navbar: React.FC = () => {
                                 <div className="flex items-center space-x-2">
                                     <ProfileIcon firstName={firstName} lastName={lastName} size={50} />
                                     <span> {firstName}</span>
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        className="h-5 w-5 inline-block ml-1 transform group-hover:rotate-180 transition-transform"
-                                        fill="none"
-                                        viewBox="0 0 24 24"
-                                        stroke="currentColor"
-                                    >
-                                        <path
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"
-                                            strokeWidth={2}
-                                            d="M19 9l-7 7-7-7"
-                                        />
-                                    </svg>
+                                    <DownArrowIcon />
                                 </div>
                             </Button>
                         ) : (

diff --git a/src/constants/url.ts b/src/constants/url.ts
@@ -1,3 +1,3 @@
-export const TINY_API_URL = 'https://tiny-site-backend.onrender.com/v1';
+export const TINY_API_URL = 'https://api-tinysite.onrender.com/v1';
 export const TINY_API_GOOGLE_LOGIN = `${TINY_API_URL}/auth/google/login`;
 export const TINY_API_LOGOUT = `${TINY_API_URL}/auth/logout`;