test #174: created unit test for Avatar component #637
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import Avatar from './Avatar'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { type ComponentProps } from 'react'; | ||
|
|
||
| jest.mock('@radix-ui/react-avatar', () => { | ||
| const actual = jest.requireActual('@radix-ui/react-avatar'); | ||
| return ({ | ||
| ...actual, | ||
| Image: (props: ComponentProps<'img'>) => { | ||
| return <img {...props}/>; | ||
| } | ||
| }) | ||
| }); | ||
|
|
||
| describe('Avatar Component', () => { | ||
|
|
||
| it('Renders the component with user image using valid src attribute', () => { | ||
|
Collaborator
There was a problem hiding this comment. Should the fallback component show here?
Contributor
Author
There was a problem hiding this comment. Not for this scenario. I wanted to test that the user provided image is correctly added to the document.
Collaborator
There was a problem hiding this comment. Add an exception to check that fallback doesn't show in this default scenario.
Contributor
Author
There was a problem hiding this comment. Interestingly the fallback image is still showing in the document for this scenario. I tried using 1st attempt: + const avatarElementFallbackImage = screen.getByTestId('avatar-fallback')
+ expect(avatarElementFallbackImage).not.toBeVisible();2nd attempt: + const avatarElementFallbackImage = screen.getByTestId('avatar-fallback')
+ expect(avatarElementFallbackImage).not.toBeInTheDocument();I tried looking at 
|
||
| render(<Avatar userAvatar='https://mdbcdn.b-cdn.net/img/new/avatars/2.webp' />); | ||
|
|
||
| const avatarElementWithImage = screen.getByTestId('avatar-image') | ||
| expect(avatarElementWithImage).toBeInTheDocument(); | ||
| expect(avatarElementWithImage).toHaveAttribute( | ||
| 'src', | ||
| 'https://mdbcdn.b-cdn.net/img/new/avatars/2.webp', | ||
| ); | ||
|
|
||
| }); | ||
|
|
||
| it('Renders the fallback image when src is undefined', () => { | ||
|
Collaborator
There was a problem hiding this comment. What about when there's a string given bug the image is not found?
Contributor
Author
There was a problem hiding this comment. That makes sense, I'll add this test scenario. |
||
| render(<Avatar userAvatar={undefined} />); | ||
|
|
||
| const avatarElementFallbackImage = screen.getByTestId('avatar-fallback') | ||
| expect(avatarElementFallbackImage).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('Renders the fallback image when an invalid src is provided', () => { | ||
| render(<Avatar userAvatar='https://mdbcdn.b-cdn.net/img/new/avatars/bad-img-url.webp' />); | ||
|
|
||
| const avatarElementFallbackImage = screen.getByTestId('avatar-fallback') | ||
| expect(avatarElementFallbackImage).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| }); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just FYI for anyone coming across this. My first instinct was to ask why are we mocking this as you always want to mock as little as possible or not at all so we are testing the actual implementation.
In this case, we mock Radix’s Avatar.Image because in JSDOM, what we use in Jest tests, image load events don’t fire as it's not a real browser environment, so only the fallback is ever shown in tests if we don't mock.