1
resposta

Desafio: Não fazer a transação caso o tipo e o valor não estiverem preenchidos.

Minha solução

Componente Conta.js

const Conta = ({ saldo, realizarTransacao }) => {
    const [valores, atualizarValores] = useState({transacao: '', valor: 0});
    const disabledButton = valores.transacao === '' || valores.valor === 0
.....
<div>
    <button disabled={disabledButton} type='submit'>
        Realizar operação
    </button>
</div>

Teste:

import React from "react";
import { render, screen, fireEvent } from '@testing-library/react';

import Conta from "./Conta";

describe('Testando transações', () => {
  it('se tipo de transação e valor estiver vazio, não chamar a função', () => {
    const mockRealizarTransacao = jest.fn()
    render(<Conta saldo={1000} realizarTransacao={mockRealizarTransacao}/>)

    const button = screen.getByRole('button', { name: /realizar operação/i })
    fireEvent.click(button)
    expect(mockRealizarTransacao).not.toHaveBeenCalled()
  })

  it('se tipo de transação e valor estiver preenchido, chamar a função', () => {
    const mockRealizarTransacao = jest.fn()
    render(<Conta saldo={1000} realizarTransacao={mockRealizarTransacao}/>)

    const button = screen.getByRole('button', { name: /realizar operação/i })
    const tipoTransacao = screen.getByRole('radio', { name: /depósito/i })
    const inputValor = screen.getByTestId('valor')

    fireEvent.click(tipoTransacao, {target: { value: 'deposito' }})
    fireEvent.change(inputValor, {target: { value: 100 }})

    fireEvent.click(button)
    expect(tipoTransacao.value).toBe('deposito')
    expect(inputValor.value).toBe("100")
    expect(mockRealizarTransacao).toHaveBeenCalled()
  })
})
1 resposta

Fala Francisco, tudo bem? Espero que sim!

Boaaaa, muito bem, achei bem interessante essa sua forma de resolver.

Continue sempre praticando e fazendo os exercicios, essa é a melhor forma de fixar algo que aprendemos.

Ao terminar um curso você pode compartilhar lá no Linkedin e marcar a Alura :)

Abraços e bons estudos :D

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software