En esta lección se muestra como probar una aplicación web.
Lighthouse es una herramienta automatizada para mejorar el rendimiento, calidad y corrección de aplicaciones web.
Las pruebas de unidad permiten asegurar que una parte del código cumple correctamente con sus funciones.
A continuación se muestra como realizar pruebas del servidor con PHPunit.
En la práctica, los sistemas deben pasar todas las pruebas. En este ejemplo se fallan algunas.
Esta salida muestra algunos fallos para que te des cuenta como se ven. En la práctica, todas la pruebas deben aprobarse.
PHPUnit 10.5.5 by Sebastian Bergmann and contributors. Runtime: PHP 8.2.7 ..F 3 / 3 (100%) Time: 00:00.091, Memory: 8.00 MB There was 1 failure: 1) RecomiendaTest::testReg2 Probando reg 2 Failed asserting that two strings are equal. --- Expected +++ Actual @@ @@ -'Daddy Yankee.' +'Bad Bunny.' /home/runner/phpunit/tests/RecomiendaTest.php:19
Este ejercicio usa la librería PHPUnit para PHP. Puedes profundizar en este tema en la URL https://phpunit.de/
Descarga el archivo /src/phpunit.zip y descompáctalo.
Abre la carpeta descompactada con Visual Studio Code.
Edita los archivos que que desees.
El proyecto ya contiene la carpeta vendor
y el
archivo composer.lock
, pero si quieres crearlos, debes seguir estos
pasos:
Instalar composer. Para Windows, usa el instalador de https://getcomposer.org/download/.
Abre una terminal y ejecuta el comando
composer update
Abre una terminal y ejecuta el comando
./vendor/bin/phpunit tests
Haz clic en los triángulos para expandir las carpetas
| 1 | <?php |
| 2 | |
| 3 | function recomienda(string $genero): string |
| 4 | { |
| 5 | if ($genero === "pop") { |
| 6 | return "Dua Lipa."; |
| 7 | } elseif ($genero === "reg") { |
| 8 | return "Bad Bunny."; |
| 9 | } else { |
| 10 | return "De eso no conozco"; |
| 11 | } |
| 12 | } |
| 13 |
| 1 | <?php |
| 2 | |
| 3 | use PHPUnit\Framework\TestCase; |
| 4 | |
| 5 | require_once __DIR__ . "/../src/recomienda.php"; |
| 6 | |
| 7 | final class RecomiendaTest extends TestCase |
| 8 | { |
| 9 | public function testPop() |
| 10 | { |
| 11 | $this->assertEquals("Dua Lipa.", recomienda("pop"), "Probando pop"); |
| 12 | } |
| 13 | public function testReg() |
| 14 | { |
| 15 | $this->assertEquals("Bad Bunny.", recomienda("reg"), "Probando reg"); |
| 16 | } |
| 17 | public function testReg2() |
| 18 | { |
| 19 | $this->assertEquals("Daddy Yankee.", recomienda("reg"), "Probando reg 2"); |
| 20 | } |
| 21 | } |
| 22 |
| 1 | { |
| 2 | "require-dev": { |
| 3 | "phpunit/phpunit": "^10" |
| 4 | } |
| 5 | } |
| 1 | -- No se muestra eñ contenido de este archivo -- |
| 1 |
Las pruebas de unidad permiten asegurar que una parte del código cumple correctamente con sus funciones.
A continuación se muestra como realizar pruebas del cliente con Jasmine.
En la práctica, los sistemas deben pasar todas las pruebas. En este ejemplo se fallan algunas.
Esta salida muestra algunos fallos para que te des cuenta como se ven. En la práctica, todas la pruebas deben aprobarse.
> nodejs@1.0.0 test > jasmine Randomized with seed 87173 Started .F. Failures: 1) recomienda reg2 Message: Expected 'Bad Bunny.' to be 'Daddy Yankee.'. Stack: at <Jasmine> at UserContext.<anonymous> (file:///D:/gilpg/Documents/Sitios/awoas/jasminewin/spec/recomiendaSpec.js:6:45) at <Jasmine> 3 specs, 1 failure Finished in 0.012 seconds Randomized with seed 87173 (jasmine --random=true --seed=87173)
Este ejercicio usa la librería Jasmine para JavaScript. Puedes profundizar en este tema en la URL https://jasmine.github.io/
Descarga el archivo /src/jasmine.zip y descompáctalo.
Abre la carpeta descompactada con Visual Studio Code.
Edita los archivos que desees. El código a probar se coloca en la
carpeta src
y las pruebas en la carpeta spec
.
El proyecto ya contiene la carpeta node_modules
y el
archivo package-lock.json
, pero si quieres crearlos, debes seguir
estos pasos:
Instala Node.js desde https://nodejs.org/en.
Desde Visual Studio Code abre una terminal y usa el siguiente comando para
inicializar el proyecto de node:
npm init -y
Edita el archivo packege.json
e inserta en la linea 6, sin borrar
ni sobreescribir nada, la siguiente línea
"type": "module",
En el mismo archivo packege.json
cambia la línea que dice
"test" a que diga:
"test": "jasmine"
Instala Jasmine en el proyecto con la orden:
npm install --save-dev jasmine
Inicializa Jasmine con la orden:
npx jasmine init
Ejecuta las pruebas con la orden:
npm run test
Haz clic en los triángulos para expandir las carpetas
| 1 | /** |
| 2 | * @param {string} genero |
| 3 | */ |
| 4 | export function recomienda(genero) { |
| 5 | if (genero === "pop") { |
| 6 | return "Dua Lipa." |
| 7 | } else if (genero === "reg") { |
| 8 | return "Bad Bunny." |
| 9 | } else { |
| 10 | return "De eso no conozco." |
| 11 | } |
| 12 | } |
| 1 | import { recomienda } from '../src/recomienda.js' |
| 2 | |
| 3 | describe("recomienda", () => { |
| 4 | it("pop", () => expect(recomienda("pop")).toBe("Dua Lipa.")) |
| 5 | it("reg", () => expect(recomienda("reg")).toBe("Bad Bunny.")) |
| 6 | it("reg2", () => expect(recomienda("reg")).toBe("Daddy Yankee.")) |
| 7 | }) |
| 1 | { |
| 2 | "spec_dir": "spec", |
| 3 | "spec_files": [ |
| 4 | "**/*[sS]pec.?(m)js" |
| 5 | ], |
| 6 | "helpers": [ |
| 7 | "helpers/**/*.?(m)js" |
| 8 | ], |
| 9 | "env": { |
| 10 | "stopSpecOnExpectationFailure": false, |
| 11 | "random": true |
| 12 | } |
| 13 | } |
| 14 |
| 1 | { |
| 2 | "name": "nodejs", |
| 3 | "version": "1.0.0", |
| 4 | "description": , |
| 5 | "main": "index.js", |
| 6 | "type": "module", |
| 7 | "scripts": { |
| 8 | "test": "jasmine" |
| 9 | }, |
| 10 | "keywords": [], |
| 11 | "author": , |
| 12 | "license": "ISC", |
| 13 | "dependencies": { |
| 14 | "@types/node": "^18.0.6", |
| 15 | "node-fetch": "^3.2.6" |
| 16 | }, |
| 17 | "devDependencies": { |
| 18 | "jasmine": "^5.1.0" |
| 19 | } |
| 20 | } |
| 21 |
| 1 | -- No se muestra el contenido de este archivo. -- |
| 1 |
Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.
| 1 | { |
| 2 | "compilerOptions": { |
| 3 | "checkJs": true, |
| 4 | "strictNullChecks": true, |
| 5 | "target": "ES6", |
| 6 | "module": "Node16", |
| 7 | "moduleResolution": "Node16", |
| 8 | "lib": [ |
| 9 | "ES2017", |
| 10 | "WebWorker", |
| 11 | "DOM" |
| 12 | ] |
| 13 | } |
| 14 | } |
Este ejercicio usa el comando curl, que nos permite realizar una conexión a un sitio. Puedes profundizar en este tema en la URL https://curl.se/
Aunque hay herramientas gráficar como Postman (https://www.postman.com/), la ventaja de curl es que se puede integrar a lenguajes como shell o bat para automatizar las pruebas.
Si usas un sistema similar a Unix, como Linux o macOS, curl ya está instalado. Si usas Windows, descarga curl desde https://curl.se/windows/. Descompáctalo y copia la carpeta a C:, Añáde la ruta hasta la subcarpeta bin a la variable de ambiente Path.
Corre localmente el proyecto srvdevuelve.
Crea una carpeta para el proyecto y ábrela con Visual Studio Code.
Crea el archivo test.bat
(en Linux y macOS debe llamarse
test.sh
) y ponle el siguiente contenido.
Abre una terminal.
Este paso solo se ejecuta en Windows. Teclea el comando:
cmd
En Windows teclea:
test
En Linux y macOS teclea:
./test.sh
La salida se ve algo como esto:
PS C:\xxx\Documents\xx\curl> cmd
Microsoft Windows [Versión 10.0.19045.4894]
(c) Microsoft Corporation. Todos los derechos reservados.
C:\xxx\Documents\xx\curl>test
C:\xxx\Documents\xx\curl>curl http://localhost/srv/devuelve.php
{"nombre":"pp","mensaje":"Hola."}
C:\xxx\Documents\xx\curl>
Hay herramientas que permiten probar toda la aplicación.
Cypress: https://www.cypress.io/.
Selenium: https://www.selenium.dev/.
Puppeteer: https://github.com/puppeteer/puppeteer.
En esta lección se mostró como probar una aplicación web.