Como probar

Es una buena práctica probar aplicaciones y componentes para asegurarse de que se comporten como se espera. Hay muchas formas de probar una interfaz de usuario: pruebas manuales, pruebas de integración, pruebas unitarias, etc.

En esta sección, discutiremos cómo escribir pruebas unitarias para componentes.

Pruebas unitarias

La redacción de pruebas unitarias para componentes Owl depende realmente del marco de pruebas utilizado en un proyecto, pero normalmente implica los siguientes pasos:

• crea un archivo de prueba: por ejemplo SomeComponent.test.js,
• En ese archivo, importe el código para SomeComponent,
• Agregar un caso de prueba:
  • crear un elemento DOM real para utilizar como elemento de prueba,
  • crear un entorno de prueba
  • Crear una instancia de SomeComponent, montarla en el dispositivo
  • interactuar con el componente y afirmar algunas propiedades.

Para ayudar con esto, es útil tener un archivo helper.js que contenga algunas funciones de utilidad comunes:

let lastFixture = null;

export function makeTestFixture() {
  let fixture = document.createElement("div");
  document.body.appendChild(fixture);
  if (lastFixture) {
    lastFixture.remove();
  }
  lastFixture = fixture;
  return fixture;
}

export async function nextTick() {
  await new Promise((resolve) => setTimeout(resolve));
  await new Promise((resolve) => requestAnimationFrame(resolve));
}

Con un archivo de este tipo, un conjunto de pruebas típico para Jest se verá así:

// in SomeComponent.test.js
import { SomeComponent } from "../../src/ui/SomeComponent";
import { nextTick, makeTestFixture } from '../helpers';


//------------------------------------------------------------------------------
// Setup
//------------------------------------------------------------------------------
let fixture: HTMLElement;
let env: Env;

beforeEach(() => {
  fixture = makeTestFixture();
});

afterEach(() => {
  fixture.remove();
});

//------------------------------------------------------------------------------
// Tests
//------------------------------------------------------------------------------
describe("SomeComponent", () => {
  test("component behaves as expected", async () => {
    const props = {...}; // depends on the component
    const comp = await mount(SomeComponent, fixture, { props });

    // do some assertions
    expect(...).toBe(...);

    fixture.querySelector('button').click();
    await nextTick();

    // some other assertions
    expect(...).toBe(...);
  });
});

Tenga en cuenta que Owl espera hasta el siguiente cuadro de animación para actualizar el DOM. Por eso es necesario esperar con nextTick (u otros métodos) para asegurarse de que el DOM esté actualizado.