Cambiando tu ánimo con Cypress.io

npx create-react-app humor-del-dia

npm install cypress --dev

import React, { Component } from "react"; // Importamos React

import logo from "./logo.svg"; // Dejamos el logito de React que viene por defecto, queda lindo

import "./App.css"; // Importamos los estilos que trae Create react app por defecto

class App extends Component {
  state = {
    humor: null, // Humor por defecto, nada por que no lo pedimos todavia
    cargando: false, // Cargando en false por que todavía no hicimos ningun pedido al servidor
    dia: "lunes" // Lunes por defecto por que hoy es lunes (por lo menos para mí)
  };

  obtenerHumor = async () => {
    this.setState({cargando: true}); // Cargando en true por que empezamos a hacer nuestro pedido

    const req = await fetch("http://mihumor.com/humor/" + this.state.dia); // Hacemos el pedido a una API que no existe
    const humor = await req.text(); // Nos traemos la respuesta

    this.setState({ humor, cargando: false }); // Guardamos la respuesta en "humor" de nuestro estado y ponemos cargando en false
  };

  render() {
    const { humor, cargando } = this.state; // Nos traemos humor y cargando de nuestro estado

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Bienvenido a mi humor según el día</h1>
        </header>
        <div className="App-intro">
          <select
            onChange={event => this.setState({ dia: event.target.value })} // Cuando el usuario cambie de día, nos guardamos el nuevo día en el estado
            name="dias"
          >
            <option value="lunes">Lunes</option>
            <option value="miercoles">Miercoles</option>
            <option value="viernes">Viernes</option>
          </select>
          {!!humor && <p>{humor}</p> /* Mostramos el humor solo si hay uno */}
          <button onClick={this.obtenerHumor} disabled={cargando}> {/* Cuando hacemos click obtenemos el humor, el boton esta deshabilitado mientras se busca */}
            Obtener mi humor
          </button>
        </div>
      </div>
    );
  }
}

export default App;

"test:integration": "cypress open"

npm run test:integration

{
  "baseUrl": "http://localhost:3000"
}

describe("Humor", () => {
  // Este hack es necesario por que Cypress no se lleva muy bien con el fetch nativo del browser, con suerte no lo vamos a necesitar en un futuro, basicamente reemplaza el fetch nativo por null para poder reemplazarlo con el fetch de cypress, esto va a servir para poder decidir que van a devolver nuestros calls http
  before(function() {
    Cypress.on("window:before:load", win => {
      win.fetch = null;
    });
  });

  beforeEach(function() { // Esto se va a ejecutar antes de CADA TEST
    cy.server(); // Le decimos a Cypress que vamos a hacer uso de su server

    cy.route("GET", "/humor/lunes", "😰"); // Le decimos a Cypress que cada pedido http dentro de nuestra app a /humor/lunes, debe devolver 😰
    cy.route("GET", "/humor/miercoles", "😐"); // Le decimos a Cypress que cada pedido http dentro de nuestra app a /humor/lunes, debe devolver 😐"
    cy.route("GET", "/humor/viernes", "😃"); // Le decimos a Cypress que cada pedido http dentro de nuestra app a /humor/lunes, debe devolver 😃

    cy.visit("/"); // Le decimos a Cypress que vaya al inicio de nuestra app
  });

  it("debería devolver una cara triste si es lunes", () => {
    cy.get("[name='dias']").select("lunes"); // Seleccionamos lunes de nuestro listado de dias

    cy.contains("Obtener mi humor").click(); // Clickeamos el boton de obtener humor

    cy.contains("😰"); // Esperamos que la app contenga 😰
  });

  it("debería devolver una cara neutral si es miercoles", () => {
    cy.get("[name='dias']").select("miercoles"); // Seleccionamos miercoles de nuestro listado de dias

    cy.contains("Obtener mi humor").click(); // Clickeamos el boton de obtener humor

    cy.contains("😐"); // Esperamos que la app contenga 😐
  });

  it("debería devolver una cara felíz si es viernes", () => {
    cy.get("[name='dias']").select("viernes"); // Seleccionamos viernes de nuestro listado de dias

    cy.contains("Obtener mi humor").click(); // Clickeamos el boton de obtener humor

    cy.contains("😃"); // Esperamos que la app contenga 😃
  });
});