From 1c7138c3f2e3034a094d2a6bd6d0edb2d5f4b486 Mon Sep 17 00:00:00 2001 From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com> Date: Tue, 21 Mar 2023 07:42:47 +0700 Subject: [PATCH] [#19] Add some tests for Header component with Sidebar --- src/components/Header/index.test.tsx | 41 +++++++++++++++++++++++++++ src/components/Header/index.tsx | 11 +++++-- src/components/Sidebar/index.test.tsx | 34 +++++++++++----------- src/components/Sidebar/index.tsx | 7 +++-- 4 files changed, 72 insertions(+), 21 deletions(-) create mode 100644 src/components/Header/index.test.tsx diff --git a/src/components/Header/index.test.tsx b/src/components/Header/index.test.tsx new file mode 100644 index 0000000..783c353 --- /dev/null +++ b/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: 'testemail@gmail.com', + name: 'TestName', + avatar_url: 'https://secure.gravatar.com/avatar/6733d09432e89459dba795de8312ac2d', +}; + +describe('Header', () => { + const user: User = { name: 'Test User', email: 'testemail@email.com', avatarUrl: mockUserProfileData.avatar_url }; + + test('renders a header on the page with sidebar interaction', async () => { + render(
, { 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(); + }); +}); diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 1e0bf4a..70a1176 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -16,12 +16,19 @@ function Header({ user }: HeaderProps) {
logo
-
setSidebarVisible(!sidebarVisible)} role="presentation"> +
setSidebarVisible(!sidebarVisible)} role="presentation"> {sidebarVisible ? ( ) : (
- profile + profile
)}
diff --git a/src/components/Sidebar/index.test.tsx b/src/components/Sidebar/index.test.tsx index 175bfbf..d0f4cbf 100644 --- a/src/components/Sidebar/index.test.tsx +++ b/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: 'testemail@gmail.com', @@ -25,28 +17,36 @@ const mockUserProfileData = { }; describe('Sidebar', () => { - const user: User = { name: 'Test User', email: 'testemail@email.com', avatarUrl: 'an-avatar-url' }; + const user: User = { name: 'Test User', email: 'testemail@email.com', 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(, { 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(, { 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 }); }); diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index f3cd33c..22bfa81 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -24,13 +24,16 @@ function Sidebar({ user }: SidebarProps) { }; return ( -