Para hacer pruebas unitarias en HTML y JavaScript, puedes usar alguna de las siguientes herramientas:
- Jest: es una herramienta de pruebas de JavaScript muy popular y fácil de usar. Puedes usarla para hacer pruebas unitarias de tu código HTML y JavaScript.
- Mocha: es otra herramienta de pruebas de JavaScript muy popular. Permite escribir pruebas unitarias tanto para JavaScript como para HTML.
- QUnit: es una herramienta de pruebas de JavaScript diseñada específicamente para hacer pruebas unitarias de código HTML y JavaScript.
- Chai: es una librería de aserciones de JavaScript que se puede usar junto con cualquiera de las herramientas anteriores para hacer pruebas unitarias de tu código HTML y JavaScript.
Para empezar a hacer pruebas unitarias, primero debes instalar la herramienta o las librerías de aserciones que hayas elegido. Luego, puedes empezar a escribir pruebas para comprobar el comportamiento de tu código HTML y JavaScript. Cada prueba debe verificar un comportamiento específico del código y asegurarse de que el código se comporte de la manera esperada.
En los siguientes ejemplos uso npm para instalar las dependencias, también puedes usar el fichero .js de cada dependencia y agregarlo manualmente a la web.
Jest:
Primero, debes instalar Jest como dependencia de tu proyecto. Puedes hacerlo con el siguiente comando:
npm install --save-dev jest
Una vez instalado, puedes empezar a escribir tus pruebas. Por ejemplo, supongamos que tenemos un archivo HTML llamado index.html con el siguiente contenido:
<html>
<body>
<div id="app"></div>
</body>
</html>
Y también tenemos un archivo JavaScript llamado app.js con el siguiente contenido:
function render() {
const app = document.getElementById("app");
app.innerHTML = "Hello, world!";
}
Podemos escribir una prueba unitaria para comprobar que la función render escribe el mensaje «Hello, world!» en el elemento div con id app de la siguiente manera:
// En este ejemplo, estamos asumiendo que hemos importado Jest y que
// hemos configurado Jest para que pueda encontrar y ejecutar nuestras
// pruebas.
test("render should write hello, world in the app element", () => {
// Primero, cargamos el archivo index.html como un documento DOM
// en nuestra prueba.
document.body.innerHTML = `
<html>
<body>
<div id="app"></div>
</body>
</html>
`;
// Luego, ejecutamos la función render
render();
// Finalmente, comprobamos que el elemento div con id app contenga el
// mensaje "Hello, world!"
const app = document.getElementById("app");
expect(app.innerHTML).toBe("Hello, world!");
});
Este es sólo un ejemplo básico, pero puedes usar Jest para escribir pruebas más complejas y verificar múltiples comportamientos de tu código HTML y JavaScript.
Primero, debes instalar Mocha y Chai como dependencias de tu proyecto. Puedes hacerlo con los siguientes comandos:
npm install --save-dev mocha npm install --save-dev chai
Una vez instalado, puedes empezar a escribir tus pruebas. Por ejemplo, supongamos que tenemos un archivo HTML llamado index.html con el siguiente contenido.
<html>
<body>
<div id="app"></div>
</body>
</html>
Y también tenemos un archivo JavaScript llamado app.js con el siguiente contenido:
function render() {
const app = document.getElementById("app");
app.innerHTML = "Hello, world!";
}
Podemos escribir una prueba unitaria para comprobar que la función render escribe el mensaje «Hello, world!» en el elemento div con id app de la siguiente manera:
// En este ejemplo, estamos asumiendo que hemos importado Mocha, Chai y
// hemos configurado Mocha para que pueda encontrar y ejecutar nuestras
// pruebas.
const { expect } = require("chai");
describe("render", () => {
it("should write hello, world in the app element", () => {
// Primero, cargamos el archivo index.html como un documento DOM
// en nuestra prueba.
document.body.innerHTML = `
<html>
<body>
<div id="app"></div>
</body>
</html>
`;
// Luego, ejecutamos la función render
render();
// Finalmente, comprobamos que el elemento div con id app contenga el
// mensaje "Hello, world!"
const app = document.getElementById("app");
expect(app.innerHTML).to.equal("Hello, world!");
});
});
Este es solo un ejemplo básico, pero puedes usar Mocha y Chai para escribir pruebas más complejas y verificar múltiples comportamientos de tu código HTML y JavaScript.
QUnit es una herramienta de pruebas de JavaScript que se utiliza a menudo para probar código de cliente, como en aplicaciones web. Aquí hay un ejemplo de una prueba unitaria de QUnit que verifica la función «sum» que se encarga de sumar dos números:
QUnit.test('sum', function(assert) {
var result = sum(2, 3);
assert.equal(result, 5, 'La suma de 2 y 3 debe ser 5');
});
La función QUnit.test toma dos argumentos: una cadena que describe la prueba y una función que contiene la prueba en sí. Dentro de la función de la prueba, se puede usar assert para verificar los resultados. En este caso, se llama a la función sum con los argumentos 2 y 3, y luego se usa el método assert.equal para verificar que el resultado es igual a 5. Si la función sum devuelve el valor correcto, la prueba se considerará un éxito y se mostrará un mensaje verde en la consola. Si devuelve un valor incorrecto, la prueba fallará y se mostrará un mensaje rojo.
Chai:
Primero, debes instalar Chai como dependencia de tu proyecto. Puedes hacerlo con el siguiente comando:
npm install --save-dev chai
Una vez instalado, puedes empezar a escribir tus pruebas. Por ejemplo, supongamos que tenemos un archivo HTML llamado index.html con el siguiente contenido:
<html>
<body>
<div id="app"></div>
</body>
</html>
Y también tenemos un archivo JavaScript llamado app.js con el siguiente contenido:
function render() {
const app = document.getElementById("app");
app.innerHTML = "Hello, world!";
}
Podemos escribir una prueba unitaria para comprobar que la función render escribe el mensaje «Hello, world!» en el elemento div con id app de la siguiente manera:
// En este ejemplo, estamos asumiendo que hemos importado Chai y que
// hemos configurado una forma de ejecutar nuestras pruebas (por ejemplo,
// usando una herramienta de pruebas como Mocha o Jest).
const { expect } = require("chai");
describe("render", () => {
it("should write hello, world in the app element", () => {
// Primero, cargamos el archivo index.html como un documento DOM
// en nuestra prueba.
document.body.innerHTML = `
<html>
<body>
<div id="app"></div>
</body>
</html>
`;
// Luego, ejecutamos la función render
render();
// Finalmente, comprobamos que el elemento div con id app contenga el
// mensaje "Hello, world!"
const app = document.getElementById("app");
expect(app.innerHTML).to.equal("Hello, world!");
});
});
Espero que te sirva de ayuda para poder realizar tus pruebas.
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.