diff --git a/src/packages/Avatar/__snapshots__/test.tsx.snap b/src/packages/Avatar/__snapshots__/test.tsx.snap new file mode 100644 index 0000000..c3866c8 --- /dev/null +++ b/src/packages/Avatar/__snapshots__/test.tsx.snap @@ -0,0 +1,329 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` 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%; +} + +
+
+ John +
+
+`; + +exports[` 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; +} + +
+
+ Circle +
+
+ Square +
+
+ Rounded +
+
+`; + +exports[` 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%; +} + +
+
+ XS +
+
+ S +
+
+ M +
+
+ L +
+
+`; + +exports[` 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; +} + +
+
+ John Doe +
+
+`; diff --git a/src/packages/Avatar/test.tsx b/src/packages/Avatar/test.tsx new file mode 100644 index 0000000..653f54b --- /dev/null +++ b/src/packages/Avatar/test.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import { render } from '../../utils/testUtils' + +import Avatar from '.' + +describe('', () => { + it('Should render Avatar with given children', () => { + const { container } = render(John) + expect(container).toMatchSnapshot() + }) + + it('Should render Avatar with the given image', () => { + const { container } = render( + + John + + ) + expect(container).toMatchSnapshot() + }) + + it('Should render Avatar with the different sizes', () => { + const { container } = render( + <> + XS + S + M + L + + ) + expect(container).toMatchSnapshot() + }) + + it('Should render Avatar with the different shape variants', () => { + const { container } = render( + <> + Circle + Square + Rounded + + ) + expect(container).toMatchSnapshot() + }) + it('should render Avatar by handling custom props correctly', () => { + const { getByTestId } = render( + + John + + ) + const avatar = getByTestId('custom-avatar') + expect(avatar).toHaveAttribute('title', 'Custom Title') + }) +})