1
resposta

Melhoria de código!

Melhorias no código test para o componente Conta. botão realizar transação só pode ser clicado se valores de input alterados.

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

import Conta from "../conta/Conta";

describe("Componente de conta:", () => {
  it("Exibir saldo da conta com valor monetário", () => {
    render(<Conta saldo={2000} />);

    const saldo = screen.getByTestId("saldo-conta");

    expect(saldo.textContent).toBe("R$ 2000");
  });

  it("Chama a função de realizar a tansição, quando o botão é clicado...", () => {
    const funcaoRealizarTransacao = jest.fn();

    render(<Conta saldo={1000} realizarTransacao={funcaoRealizarTransacao} />);

    const checkBox = screen.getByDisplayValue("deposito");
    const input = screen.getByTestId("valor");
    const button = screen.getByText("Realizar operação");

    fireEvent.click(checkBox);
    fireEvent.change(input, { target: { value: "10" } });
    fireEvent.click(button);

    expect(funcaoRealizarTransacao).toHaveBeenCalled();
  });

  it("Não chama a função de realizar transição, quando valores default...", () => {
    const funcaoRealizarTransacao = jest.fn();

    render(<Conta saldo={3000} realizarTransacao={funcaoRealizarTransacao} />);

    const checkBox = screen.getAllByTestId("transacao");
    const input = screen.getByTestId("valor");
    const button = screen.getByText("Realizar operação");

    expect(checkBox.checked).toEqual(undefined);
    expect(input).toHaveValue("0");

    fireEvent.click(button);
    expect(funcaoRealizarTransacao).not.toHaveBeenCalled();
  });
});
1 resposta

Muito bom, Dev4!

Ficamos felizes por ver que você foi além e fez um teste mais elaborado! Continue assim.

Bons estudos!

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