Skip to content

Commit

Permalink
test : Adds test for Avatar (#124)
Browse files Browse the repository at this point in the history 
Co-authored-by: sowmya198 <[email protected]>
  • Loading branch information
@sowmya-AS
sowmya-AS and sowmya-AS authored Oct 31, 2023
1 parent ddb9c4f commit 359668c
Show file tree
Hide file tree
Showing 2 changed files with 381 additions and 0 deletions.
329 changes: 329 additions & 0 deletions src/packages/Avatar/__snapshots__/test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,329 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Avatar /> Should render Avatar with given children 1`] = `
.c0 {
border-radius: 50%;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.8rem;
width: 4rem;
height: 4rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
color: #F8F7FB;
color: #EFF0F9;
background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
background-size: 80rem 14rem;
-webkit-animation: placeholder 1s linear infinite forwards;
animation: placeholder 1s linear infinite forwards;
border-radius: 50%;
}
<div>
<div
class="c0"
>
John
</div>
</div>
`;

exports[`<Avatar /> Should render Avatar with the different shape variants 1`] = `
.c0 {
border-radius: 50%;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.8rem;
width: 4rem;
height: 4rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
color: #F8F7FB;
color: #EFF0F9;
background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
background-size: 80rem 14rem;
-webkit-animation: placeholder 1s linear infinite forwards;
animation: placeholder 1s linear infinite forwards;
border-radius: 50%;
}
.c1 {
border-radius: 50%;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.8rem;
width: 4rem;
height: 4rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
color: #F8F7FB;
color: #EFF0F9;
background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
background-size: 80rem 14rem;
-webkit-animation: placeholder 1s linear infinite forwards;
animation: placeholder 1s linear infinite forwards;
border-radius: 0;
}
.c2 {
border-radius: 50%;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.8rem;
width: 4rem;
height: 4rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
color: #F8F7FB;
color: #EFF0F9;
background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
background-size: 80rem 14rem;
-webkit-animation: placeholder 1s linear infinite forwards;
animation: placeholder 1s linear infinite forwards;
border-radius: 0.4rem;
}
<div>
<div
class="c0"
>
Circle
</div>
<div
class="c1"
>
Square
</div>
<div
class="c2"
>
Rounded
</div>
</div>
`;

exports[`<Avatar /> Should render Avatar with the different sizes 1`] = `
.c0 {
border-radius: 50%;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.8rem;
width: 2rem;
height: 2rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
color: #F8F7FB;
color: #EFF0F9;
background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
background-size: 80rem 14rem;
-webkit-animation: placeholder 1s linear infinite forwards;
animation: placeholder 1s linear infinite forwards;
border-radius: 50%;
}
.c1 {
border-radius: 50%;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.8rem;
width: 3rem;
height: 3rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
color: #F8F7FB;
color: #EFF0F9;
background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
background-size: 80rem 14rem;
-webkit-animation: placeholder 1s linear infinite forwards;
animation: placeholder 1s linear infinite forwards;
border-radius: 50%;
}
.c2 {
border-radius: 50%;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.8rem;
width: 4rem;
height: 4rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
color: #F8F7FB;
color: #EFF0F9;
background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
background-size: 80rem 14rem;
-webkit-animation: placeholder 1s linear infinite forwards;
animation: placeholder 1s linear infinite forwards;
border-radius: 50%;
}
.c3 {
border-radius: 50%;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.8rem;
width: 6rem;
height: 6rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
color: #F8F7FB;
color: #EFF0F9;
background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
background-size: 80rem 14rem;
-webkit-animation: placeholder 1s linear infinite forwards;
animation: placeholder 1s linear infinite forwards;
border-radius: 50%;
}
<div>
<div
class="c0"
>
XS
</div>
<div
class="c1"
>
S
</div>
<div
class="c2"
>
M
</div>
<div
class="c3"
>
L
</div>
</div>
`;

exports[`<Avatar /> Should render Avatar with the given image 1`] = `
.c0 {
border-radius: 50%;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.8rem;
width: 4rem;
height: 4rem;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
color: #F8F7FB;
color: #EFF0F9;
background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
background-size: 80rem 14rem;
-webkit-animation: placeholder 1s linear infinite forwards;
animation: placeholder 1s linear infinite forwards;
border-radius: 50%;
}
.c1 {
width: 100%;
height: 100%;
text-align: center;
object-fit: cover;
}
<div>
<div
class="c0"
>
<img
alt="John Doe"
class="c1"
src="https://picsum.photos/id/237/300/300"
/>
</div>
</div>
`;
52 changes: 52 additions & 0 deletions src/packages/Avatar/test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from 'react'
import { render } from '../../utils/testUtils'

import Avatar from '.'

describe('<Avatar />', () => {
it('Should render Avatar with given children', () => {
const { container } = render(<Avatar>John</Avatar>)
expect(container).toMatchSnapshot()
})

it('Should render Avatar with the given image', () => {
const { container } = render(
<Avatar src="https://picsum.photos/id/237/300/300" alt="John Doe">
John
</Avatar>
)
expect(container).toMatchSnapshot()
})

it('Should render Avatar with the different sizes', () => {
const { container } = render(
<>
<Avatar size="xsmall">XS</Avatar>
<Avatar size="small">S</Avatar>
<Avatar size="medium">M</Avatar>
<Avatar size="large">L</Avatar>
</>
)
expect(container).toMatchSnapshot()
})

it('Should render Avatar with the different shape variants', () => {
const { container } = render(
<>
<Avatar variant="circle">Circle</Avatar>
<Avatar variant="square">Square</Avatar>
<Avatar variant="rounded">Rounded</Avatar>
</>
)
expect(container).toMatchSnapshot()
})
it('should render Avatar by handling custom props correctly', () => {
const { getByTestId } = render(
<Avatar data-testid="custom-avatar" title="Custom Title">
John
</Avatar>
)
const avatar = getByTestId('custom-avatar')
expect(avatar).toHaveAttribute('title', 'Custom Title')
})
})

0 comments on commit 359668c

Please sign in to comment.