generated from nimblehq/git-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#19] Add some tests for Header component with Sidebar
- Loading branch information
1 parent
a16da9a
commit 02c636c
Showing
4 changed files
with
72 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters