#VemProReact #JEP #10

#VemProReact

Correção da atividade!

src/lib/components

#VemProReact

Correção da atividade!

Dados.styles.js

export const styles = {
  grid: {
    width: '100%',
    padding: '12px 24px'
  },
  title: {
    textTransform: 'uppercase'
  },
  form: {
    width: '100%'
  },
  button: {
    marginTop: '12px'
  }
};

#VemProReact

Correção da atividade!

LotacaoPrincipal.styles.js

export const styles = {
  grid: {
    width: '100%',
    padding: '12px 24px'
  },
  title: {
    textTransform: 'uppercase'
  }
};

App.styles.js

import { styled } from '@bayon/commons';

export const EmptyStateContainer = styled('div')({
  height: 'calc(100vh - 48px)'
});

#VemProReact

Correção da atividade!

...

"jest": {
  "coverageThreshold": {
    "global": {
      "statements": 0,
      "branches": 0,
      "functions": 0,
      "lines": 0
    }
  },
  "collectCoverageFrom": [
    "src/**/*.js",
    "!src/dev/**",
    "!src/lib/services/graphql/**",
    "!src/lib/setupTests.js"
  ]
}

...

package.json

#VemProReact

Correção da atividade!

import React from 'react';

// RTL
import { render } from '@testing-library/react';

// Components
import LotacaoPrincipal from '../LotacaoPrincipal';

describe('LotacaoPrincipal component', () => {
  test('Should renders the component', () => {
    const { container } = render(<LotacaoPrincipal foro={{}} />);

    expect(container).toBeDefined();
  });
});

LotacaoPrincipal.test.js

#VemProReact

Mocks

Providers
Hooks / HOCs
Components
Props
Queries / Mutations
Timers

#VemProReact

Mocks / Providers

Real Providers

...

import { render } from '@testing-library/react';

import { ToastProvider } from '@bayon/commons';

...

describe('Dados component', () => {
  test('Should renders the component', async () => {
    const { container } = render(
      <ToastProvider maxSnack={3}>
        ...
        <Dados {...props} />
        ...
      </ToastProvider>
    );

    expect(container).toBeDefined();
  });
});

#VemProReact

Mocks / Providers

Fake Providers

https://www.apollographql.com/docs/react/development-testing/testing/#mockedprovider

import { render } from '@testing-library/react';

import { MockedProvider } from '@apollo/react-testing';

describe('Dados component', () => {
  test('Should renders the component', async () => {
    const { container } = render(
      <MockedProvider mocks={[]} addTypename={false}>
        ...
        <Dados {...props} />
        ...
      </MockedProvider>
    );

    expect(container).toBeDefined();
  });
});

#VemProReact

Mocks / Hooks / HOCs

setupTests.js / MyComponent.test.js

jest.mock('@bayon/i18n', () => ({
  useTranslation: () => ({
    t: key => key,
    i18n: {}
  })
}));

jest.mock('@bayon/i18n', () => ({
  withTranslation: () => Component => {
    Component.defaultProps = {
      ...Component.defaultProps,
      t: key => key,
      i18n: {}
    };

    return Component;
  }
}));

#VemProReact

Mocks / Components

Dados.test.js

https://jestjs.io/docs/en/mock-functions

jest.mock('./components/SelectCargo', () => () => 'SelectCargo');

#VemProReact

Mocks / Props

Dados.test.js

...

let props;

describe('Dados component', () => {
  beforeEach(() => {
    props = {
      usuario: {}
    };
  });

  test('Should renders the component', async () => {
    const { container } = render(
      <MockedProvider mocks={[]} addTypename={false}>
        <ToastProvider maxSnack={3}>
          <Dados {...props} />
        </ToastProvider>
      </MockedProvider>
    );

    expect(container).toBeDefined();
  });
});

#VemProReact

Mocks / Queries

SelectCargo.test.js

import { MockedProvider } from '@apollo/react-testing';
import { GET_CARGOS } from '../../../../services/graphql/queries';

const mocks = [
  {
    request: {
      variables: { nome: '' },
      query: GET_CARGOS
    },
    result: {
      data: {
        cargos: {
          items: [
            {
              id: 4,
              descricao: 'Coordenador'
            }
          ]
        }
      }
    }
  }
];
...
<MockedProvider mocks={mocks} addTypename={false}>
...

#VemProReact

Mocks / Mutations

Dados.test.js

import { MockedProvider } from '@apollo/react-testing';
import { UPDATE_USUARIO } from '../../services/graphql/mutations';

const mocks = [
  {
    request: {
      variables: { ... },
      query: UPDATE_USUARIO
    },
    result: {
      data: {
        update_usuario: {
          id: 'KAZUMI',
          nome: 'Kazumi Futatsugi (Softplan - SC)',
          documento: '123456789',
          genero: 'FEMININO',
          ...
        }
      }
    }
  }
];
...
<MockedProvider mocks={mocks} addTypename={false}>
...

#VemProReact

Mocks / Timers

debounce.test.js

https://jestjs.io/docs/en/timer-mocks.html

import debounce from './debounce';

jest.useFakeTimers();

describe('debounce util', () => {
  test('Should execute callback function', () => {
    const callback = jest.fn();

    debounce(callback, 350)();

    expect(callback).not.toHaveBeenCalled();

    jest.runAllTimers();

    expect(callback).toHaveBeenCalled();
  });
});

#VemProReact

Jest

#DicasDeOuro 🥇

#VemProReact

Jest

Executar todos os testes de um arquivo:

Executar todos os testes de uma pasta:

Executar somente um teste do arquivo:

Ignorar testes do arquivo:

yarn test SelectCargo.test.js
yarn coverage SelectCargo.test.js

yarn test Dados
yarn coverage Dados

test.only('Should renders the component', () => { ...

test.skip('Should renders the component', () => { ...

#VemProReact

RTL

#DicasDeOuro 🥇

#VemProReact

RTL

SelectCargo.test.js

...

test.only('Should renders the component', () => {
  const { container, debug } = render(
    <MockedProvider mocks={[]} addTypename={false}>
      <SelectCargo {...props} />
    </MockedProvider>
  );

  debug();

  expect(container).toBeDefined();
});

...

#VemProReact

RTL

SelectCargo.test.js

#VemProReact

Dúvidas?

#VemProReact

Atividade!

Atualizar todos os pacotes do projeto
Excluir todos os arquivos .styles.js do cálculo do coverage
Criar um mock para as props do componente LotacaoPrincipal
Criar os testes necessários para atingir 100% de cobertura do componente SelectCargo
Criar o teste básico de renderização do componente Dados
Criar os testes necessários para atingir 100% de cobertura da função debounce