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 un como realizar pruebas del servidor con PHPunit.
En la práctica, los sistemas deben pasar todas las pruebas. En este ejemplo se fallan algunas.
Puedes correr las pruebas en https://replit.com/@GilbertoPachec5/phpunit?v=1. Hazle fork al proyecto y córrelo.
Este ejercicio usa la librería PHPUnit para PHP. Puedes profundizar en este tema en la URL https://phpunit.de/
Revisa el proyecto en Replit con la URL https://replit.com/@GilbertoPachec5/phpunit?v=11. Hazle fork al proyecto y córrelo. En el ambiente de desarrollo tienes la opción de descargar el proyecto en un zip.
Crea el proyecto phpunit con la categoría PHP CLI en Replit y edita o sube los archivos de phpunit.
El proyecto ya contiene la carpeta vendor
y el
archivo composer.lock
, pero si quieres crearlos, debes seguir estos
pasos:
Instalar composer. Si trabajas desde Replit, los archivos .replit
y
replit.nix
de este proyecto lo instalan automáticamente. Para
Windows, usa el instalador de
https://getcomposer.org/download/.
Para Replit, usa la pestaña shell
, que ya está posicionada en la
carpeta del proyecto.
Si estas en Windows, debes abrir el símbolo del sistema y usar el comando
cd para llegar a la carpeta del proyecto.
Ejecuta el comando
composer update
Haz clic en el botón Run
. En la página de desarrollo, en la pestaña
Console aparece la salida de las pruebas.
Para correrlo desde Windows, ejecuta el comando
./vendor/bin/phpunit tests
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
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 |
| 1 | run = ["./vendor/bin/phpunit", "tests"] |
| 2 | |
| 3 | entrypoint = "tests/RecomiendaTest.php" |
| 4 | |
| 5 | [nix] |
| 6 | channel = "stable-23_05" |
| 1 | { pkgs }: { |
| 2 | deps = [ |
| 3 | pkgs.php82 |
| 4 | pkgs.php82Packages.composer |
| 5 | ]; |
| 6 | } |
Las pruebas de unidad permiten asegurar que una parte del código cumple correctamente con sus funciones.
A continuación se muestra un como realizar pruebas del cliente con Jasmine.
En la práctica, los sistemas deben pasar todas las pruebas. En este ejemplo se fallan algunas.
Puedes correr las pruebas en https://replit.com/@GilbertoPachec5/jasmine?v=1. Hazle fork al proyecto y córrelo.
Este ejercicio usa la librería Jasmine para JavaScript. Puedes profundizar en este tema en la URL https://jasmine.github.io/
Revisa el proyecto en Replit con la URL https://replit.com/@GilbertoPachec5/jasmine?v=1. Hazle fork al proyecto y córrelo. En el ambiente de desarrollo tienes la opción de descargar el proyecto en un zip.
Crear un proyecto de tipo Node.js
en
https://replit.com. Algunos archivos se generan con
las instrucciones que siguen, por lo que no se incluyen en el zip, pero si
se muestra su contenido en las páginas siguientes.
Si trabajas desde Windows, instala Node.js desde
https://nodejs.org/en. Crea una carpeta y pásate a ella
desde el símbolo del sistema. o con Visual Studio Code abre la carpeta
y muestra una terminal. Inicializa un proyecto de node con la instrucción
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
Añade los archivos que vienen en el proyecto; esto incluye modificar el
archivo .replit
. El código a probar se coloca en la carpeta
src
y las pruebas en la carpeta spec
.
Haz clic en el botón Run
. En la página de desarrollo, en la pestaña
Console aparece la salida de las pruebas.
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)
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 |
| 1 | run = ["npx", "jasmine"] |
| 2 | entrypoint = "src/recomienda.js" |
| 3 | modules = ["nodejs-20:v8-20230920-bd784b9"] |
| 4 | hidden = [".config", "package-lock.json"] |
| 5 | |
| 6 | [nix] |
| 7 | channel = "stable-23_05" |
| 8 | |
| 9 | [unitTest] |
| 10 | language = "nodejs" |
| 11 | |
| 12 | [deployment] |
| 13 | run = ["node", "index.js"] |
| 14 | deploymentTarget = "cloudrun" |
| 15 | ignorePorts = false |
| 16 |
| 1 | {pkgs}: { |
| 2 | deps = [ ]; |
| 3 | } |
| 4 |
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": "ES6", |
| 7 | "moduleResolution": "classic", |
| 8 | "lib": [ |
| 9 | "ES2017", |
| 10 | "WebWorker", |
| 11 | "DOM" |
| 12 | ] |
| 13 | } |
| 14 | } |
Este ejercicio usa el comando curl para bash, que nos permite realizar una conexión a un sitio. Puedes profundizar en este tema en la URL https://curl.se/
Revisa el proyecto en Replit con la URL https://replit.com/@GilbertoPachec5/curl?v=1
Crear un proyecto curl
de tipo Bash
en
https://replit.com.
En el archivo principal añade la linea
Haz clic en el botón Run
. En la página de desarrollo, en la pestaña
Console aparece el resultado devuelto por el servicio.
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.