import React, { useState } from 'react';
import renderer from 'react-test-renderer';
import { UserAvatar } from './index';
import 'jest-styled-components';

it('snapshot - padrão', () => {
   const tree = renderer
      .create(
         <>
            <UserAvatar
               user={{
                  name: 'veronica',
                  image:
                     'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
               }}
            />
         </>,
      )
      .toJSON();
   expect(tree).toMatchSnapshot();
});

it('snapshot - vários tamanhos sem imagem', () => {
   const tree = renderer
      .create(
         <>
            <UserAvatar user={{ name: 'Notorious Chase' }} size="xs" />
            <UserAvatar user={{ name: 'Made Heaven' }} size="s" />
            <UserAvatar user={{ name: 'Star Platinum' }} size="m" />
            <UserAvatar user={{ name: 'Crazy Diamond' }} size="l" />
            <UserAvatar user={{ name: 'King crimson' }} size="xl" />
         </>,
      )
      .toJSON();

   expect(tree).toMatchSnapshot();
});

it('snapshot - vários tamanhos com imagem', () => {
   const tree = renderer
      .create(
         <>
            <UserAvatar
               user={{
                  name: 'Notorious Chase',
                  image:
                     'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
               }}
               size="xs"
            />
            <UserAvatar
               user={{
                  name: 'Made Heaven',
                  image:
                     'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
               }}
               size="s"
            />
            <UserAvatar
               user={{
                  name: 'Star Platinum',
                  image:
                     'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
               }}
               size="m"
            />
            <UserAvatar
               user={{
                  name: 'Crazy Diamond',
                  image:
                     'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
               }}
               size="l"
            />
            <UserAvatar
               user={{
                  name: 'King crimson',
                  image:
                     'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
               }}
               size="xl"
            />
         </>,
      )
      .toJSON();

   expect(tree).toMatchSnapshot();
});

it('snapshot - tamanho customizado sem imagem', () => {
   const tree = renderer
      .create(
         <>
            <UserAvatar
               user={{
                  name: 'veronica',
               }}
               sizeCircle={52}
            />
         </>,
      )
      .toJSON();

   expect(tree).toMatchSnapshot();
});

it('snapshot - tamanho customizado com imagem', () => {
   const tree = renderer
      .create(
         <>
            <UserAvatar
               user={{
                  name: 'veronica',
                  image:
                     'https://user-images.githubusercontent.com/14295479/98430176-7f678b00-208a-11eb-9fd1-aefd8c3e9edf.png',
               }}
               sizeCircle={52}
            />
         </>,
      )
      .toJSON();

   expect(tree).toMatchSnapshot();
});
