[#19] Add some tests for Header component with Sidebar

src/components/Header/index.test.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable camelcase */
+import { BrowserRouter } from 'react-router-dom';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { User } from 'types/User';
+
+import Header from '.';
+
+const mockUserProfileData = {
+  email: '[email protected]',
+  name: 'TestName',
+  avatar_url: 'https://secure.gravatar.com/avatar/6733d09432e89459dba795de8312ac2d',
+};
+
+describe('Header', () => {
+  const user: User = { name: 'Test User', email: '[email protected]', avatarUrl: mockUserProfileData.avatar_url };
+
+  test('renders a header on the page with sidebar interaction', async () => {
+    render(<Header user={user} />, { wrapper: BrowserRouter });
+
+    const profileImage = screen.getByTestId('header-avatar') as HTMLImageElement;
+    expect(profileImage).toBeInTheDocument();
+    expect(profileImage.src).toContain(mockUserProfileData.avatar_url);
+
+    expect(screen.queryByTestId('sidebar-avatar')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('username')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Logout' })).not.toBeInTheDocument();
+
+    const sidebarButton = screen.getByTestId('open-sidebar');
+
+    await userEvent.click(sidebarButton);
+
+    expect(screen.getByTestId('sidebar-avatar')).toBeInTheDocument();
+    expect(screen.getByTestId('username')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Logout' })).toBeInTheDocument();
+
+    expect(screen.queryByTestId('header-avatar')).not.toBeInTheDocument();
+  });
+});

src/components/Header/index.tsx

@@ -16,12 +16,19 @@ function Header({ user }: HeaderProps) {
       <div>
         <img src={logo} alt="logo"></img>
       </div>
-      <div onClick={() => setSidebarVisible(!sidebarVisible)} role="presentation">
+      <div data-test-id="open-sidebar" onClick={() => setSidebarVisible(!sidebarVisible)} role="presentation">
         {sidebarVisible ? (
           <Sidebar user={user} />
         ) : (
           <div>
-            <img className="cursor-pointer rounded-full" height={36} width={36} src={user.avatarUrl} alt="profile"></img>
+            <img
+              data-test-id="header-avatar"
+              className="cursor-pointer rounded-full"
+              height={36}
+              width={36}
+              src={user.avatarUrl}
+              alt="profile"
+            ></img>
           </div>
         )}
       </div>

src/components/Sidebar/index.test.tsx

@@ -8,15 +8,7 @@ import AuthAdapter from 'adapters/authAdapter';
 import { User } from 'types/User';
 
 import Sidebar from '.';
-import { setItem } from '../../helpers/localStorage';
-
-const mockTokenData = {
-  access_token: 'test_access_token',
-  refresh_token: 'test_refresh_token',
-  token_type: 'Bearer',
-  expires_in: 7200,
-  created_at: 1677045997,
-};
+// import * as localStorage from '../../helpers/localStorage';
 
 const mockUserProfileData = {
   email: '[email protected]',
@@ -25,28 +17,36 @@ const mockUserProfileData = {
 };
 
 describe('Sidebar', () => {
-  const user: User = { name: 'Test User', email: '[email protected]', avatarUrl: 'an-avatar-url' };
+  const user: User = { name: 'Test User', email: '[email protected]', avatarUrl: mockUserProfileData.avatar_url };
 
-  test("renders a sidebar on the page with the user's name, profile image", () => {
+  test("renders a sidebar on the page with the user's name and avatar image", () => {
     render(<Sidebar user={user} />, { wrapper: BrowserRouter });
 
     expect(screen.getByTestId('username')).toHaveTextContent(user.name);
 
-    const profileImage = screen.getByAltText('profile') as HTMLImageElement;
-    expect(profileImage.src).toContain('an-avatar-url');
+    const profileImage = screen.getByTestId('sidebar-avatar') as HTMLImageElement;
+    expect(profileImage.src).toContain(mockUserProfileData.avatar_url);
   });
 
-  test('renders a sidebar on the page with a logout button that when clicked, calls Logout adapter', async () => {
-    setItem('UserProfile', { auth: mockTokenData, user: mockUserProfileData });
-
+  test('renders a sidebar on the page with a logout button that when clicked, calls Logout adapter and removes storage', async () => {
     const mockLogout = jest.spyOn(AuthAdapter, 'logout');
 
+    // jest.spyOn(localStorage, 'getItem').mockImplementation(() => {
+    //   return { auth: 'mockTokenData', user: mockUserProfileData };
+    // });
+
+    // const mockStorageClear = jest.spyOn(localStorage, 'clearItem');
+
     render(<Sidebar user={user} />, { wrapper: BrowserRouter });
 
     const submitButton = screen.getByRole('button', { name: 'Logout' });
 
     await userEvent.click(submitButton);
 
-    expect(mockLogout).toHaveBeenCalled();
+    expect(mockLogout).toBeCalledTimes(1);
+
+    // expect(mockStorageClear).toBeCalled();
+
+    // navigates to LOGIN URL
   });
 });

src/components/Sidebar/index.tsx

@@ -24,13 +24,16 @@ function Sidebar({ user }: SidebarProps) {
   };
 
   return (
-    <aside className={`${styles.sidebar} fixed top-0 right-0 flex h-screen w-1/6 min-w-fit flex-col gap-10 p-0`}>
+    <aside
+      data-test-id="sidebar"
+      className={`${styles.sidebar} fixed top-0 right-0 flex h-screen w-1/6 min-w-fit flex-col gap-10 p-0`}
+    >
       <div className="flex h-16 flex-col items-center justify-between px-5 md:flex-row md:border-b md:border-b-white">
         <span data-test-id="username" className="pt-2 font-bold text-white">
           {user.name}
         </span>
         <img
-          data-test-id="avatar"
+          data-test-id="sidebar-avatar"
           className="cursor-pointer rounded-full"
           height={36}
           width={36}