Jest test

package.json

@@ -4,7 +4,8 @@
   "description": "Ejemplo de pokedex para argentinaprograma.com",
   "private": true,
   "scripts": {
-    "test": "jest --collect-coverage",
+    "test": "jest",
+    "testcollect": "jest --collect-coverage",
     "test:dev": "jest --watch",
     "test:ui": "run-p serve test:cypress",
     "test:ui:dev": "run-p serve test:cypress:dev",
@@ -33,7 +34,7 @@
     "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jest": "^23.8.2",
-    "jest": "^25.2.3",
+    "jest": "^25.5.4",
     "npm-run-all": "^4.1.5"
   },
   "dependencies": {

src/ui/__tests__/listado.spec.js

@@ -0,0 +1,39 @@
+import { actualizarTextoIndicePokemones, mostrarListadoPokemones } from '../listado.js'
+
+const nombresPokemones = ["swanna", "vanillite", "vanillish", "vanilluxe", "deerling", "sawsbuck", "emolga", "karrablast", "escavalier", "foongus", "amoonguss", "frillish", "jellicent", "alomomola", "joltik", "galvantula", "ferroseed", "ferrothorn", "klink", "klang"]
+
+document.body.innerHTML = "<div id='indice'> </div>"
+
+test('actualiza texto de indice pokemones', () => {
+    actualizarTextoIndicePokemones('test');
+    expect(document.querySelector('#indice').textContent)
+        .toContain('test');
+});
+
+const mockCallBack = jest.fn();
+
+describe('Muestra el listado de pokemones', () => {
+
+    it('Muestra 20 pokemones',
+        () => {
+            mostrarListadoPokemones(nombresPokemones, mockCallBack);
+            expect(document.querySelectorAll('#indice .list-group-item')).toHaveLength(20);
+        });
+    it('Asigna todos los pokemones correctamente', () => {
+        mostrarListadoPokemones(nombresPokemones, mockCallBack);
+        let pokemonesEnLista = [];
+        document.querySelectorAll('#indice .list-group-item').forEach(itemListado => {
+            pokemonesEnLista.push(itemListado.textContent);
+        });
+        expect(pokemonesEnLista).toEqual(nombresPokemones);
+    });
+    it('Asigna callback a todos los pokemones listados', () => {
+        mostrarListadoPokemones(nombresPokemones, mockCallBack);
+        document.querySelectorAll("#indice .list-group-item").forEach(itemListado => {
+            itemListado.click();
+        })
+        expect(mockCallBack).toHaveBeenCalledTimes(20);
+    });
+
+
+});

src/ui/__tests__/paginador.fixture.js

@@ -0,0 +1,4 @@
+export default `<ul class="pagination flex-wrap" id="paginador">
+<li class="page-item"><a class="page-link" id="paginador-a" href="#" data-pagina="31">31</a></li>
+<li class="page-item"><a class="page-link" id="paginador-b" href="" data-pagina="31">31</a></li>
+</ul>`

src/ui/__tests__/paginadorA.spec.js

@@ -0,0 +1,20 @@
+import {  manejarCambioPagina} from "../paginador";
+import fixture from "./paginador.fixture"
+
+
+document.body.innerHTML = fixture;
+const mockCallback = jest.fn();
+
+describe('Maneja el cambio de paǵina',()=>{
+ document.querySelector("#paginador").onclick= (e)=>{
+ manejarCambioPagina(e,mockCallback)
+}
+it('Maneja el cambio de pagina cuando hay un numero',()=>{
+ document.querySelector("#paginador-a").click();
+ expect(mockCallback).toHaveBeenCalledWith(31);
+})
+it('No ejecuta el cambio de pagina si no cumple las condiciones',()=>{
+ document.querySelector("#paginador-b").click();
+ expect(mockCallback).toHaveBeenLastCalledWith("");
+})
+})

src/ui/__tests__/paginadorB.spec.js

@@ -0,0 +1,38 @@
+import mostrarPaginador from "../paginador";
+import fixture from "./paginador.fixture"
+
+document.body.innerHTML = fixture;
+    const totalPokemones = 1118;
+    const paginaActualPrueba = 5;
+    const urlPrueba = "url-de-prueba"
+    const mockCallback = jest.fn()
+
+describe("Muestra el paginador", ()=>{
+
+    it("Chequea el número de páginas",()=>{
+    mostrarPaginador(totalPokemones,paginaActualPrueba, urlPrueba, urlPrueba, mockCallback);
+    const $paginas = document.querySelector("#paginador").childNodes;
+    expect($paginas).toHaveLength(58)
+})
+mostrarPaginador(totalPokemones,paginaActualPrueba, urlPrueba, urlPrueba, mockCallback);
+
+it("Chequea que solo una página esté activa",()=>{
+    const $paginaActiva = document.querySelectorAll(".active");
+    expect($paginaActiva).toHaveLength(1);
+    })
+
+it("Chequea que la ṕágina activa sea la página actual",()=>{
+    const $paginaActiva = document.querySelectorAll(".active");
+    expect($paginaActiva[0].textContent).toEqual("5");
+})
+
+it("Chequea que el botón 'Anterior' esté desactivado al no tener 'urlAnterior'",()=>{
+    mostrarPaginador(totalPokemones,1, urlPrueba,"", mockCallback);
+const $paginaDesactivada = document.querySelector(".disabled");
+expect($paginaDesactivada.textContent).toEqual("Anterior");})
+
+it("Chequea que el botón 'Siguiente' esté desactivado al no tener 'urlSiguiente'",()=>{
+    mostrarPaginador(totalPokemones,paginaActualPrueba, "",urlPrueba, mockCallback);
+ const $paginaDesactivada = document.querySelector(".disabled");
+expect($paginaDesactivada.textContent).toEqual("Siguiente");})
+})

src/ui/__tests__/pokemon.fixture.js

@@ -0,0 +1,63 @@
+export default `<div class="container">
+    <div class="row">
+        <p>Hay <strong id="total-pokemones">...</strong> pokemones en la pokedex</p>
+    </div>
+    <div class="container">
+        <nav aria-label="Page navigation example">
+            <ul class="pagination flex-wrap" id="paginador">
+                <!-- -->
+            </ul>
+        </nav>
+    </div>
+    <div class="row">
+        <div class="col-4">
+            <div class="list-group" id="indice">
+                <p>Cargando...</p>
+                <!-- -->
+            </div>
+        </div>
+        <div class="col" id="pokemon">
+
+            <p id="ayuda">Seleccioná un pokemon para ver su información</p>
+
+            <div class="card" id="pokemon-contenedor">
+
+                <div class="card-body">
+                    <h5 class="card-title"><strong id="pokemon-nombre">...</strong> (<strong
+                            id="pokemon-id">...</strong>)</h5>
+
+                    <img class="card-img" id="pokemon-imagen" src="" alt="Imagen de pokemon"/>
+
+                    <div id="tipos-contenedor">
+                        <strong>Tipos</strong>
+                        <div id="tipos">
+                            <!-- -->
+                        </div>
+                    </div>
+
+                    <div id="habilidades-contenedor">
+                        <strong>Habilidades</strong>
+                        <div id="habilidades">
+                            <!-- -->
+                        </div>
+                    </div>
+
+                    <div id="movimientos-contendor">
+                        <strong>Movimientos</strong>
+                        <table class="table">
+                            <thead>
+                            <tr>
+                                <th scope="col">Movimiento</th>
+                                <th scope="col">Versiones</th>
+                            </tr>
+                            </thead>
+                            <tbody id="movimientos">
+                            <!-- -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`;

src/ui/__tests__/pokemon.spec.js

@@ -0,0 +1,46 @@
+import mostrarPokemon from "../pokemon"
+import fixture from "./pokemon.fixture"
+import pokemonFixture from './pokemon.fixture.json'
+
+document.body.innerHTML = fixture;
+mostrarPokemon(pokemonFixture)
+
+test("Chequea que actualice correctamente el texto de ayuda",()=>{
+    expect(document.querySelector(('#ayuda')).textContent)
+    .toEqual('')
+})
+
+test ("Chequea que asigne correctamente los datos básicos",()=>{
+    expect(document.querySelector("#pokemon-imagen").src).toEqual("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png")
+    expect(document.querySelector("#pokemon-imagen").alt).toEqual(`Imagen frontal del pokemon ${pokemonFixture.nombre}`)
+    expect(document.querySelector("#pokemon-nombre").textContent).toEqual(pokemonFixture.nombre);
+    expect(Number(document.querySelector('#pokemon-id').textContent)).toEqual(pokemonFixture.id);
+})
+
+test("Chequea que asigne los tipos correctamente",()=>{
+    const $tipos = document.querySelector("#tipos").children;
+Object.values(pokemonFixture.tipos).forEach((tipo,i)=>{
+expect($tipos[i].textContent).toEqual(tipo);
+})
+
+});
+
+test("Chequea que asigne las habilidades correctamente",()=>{
+    const $habilidades = document.querySelector("#habilidades").children;
+    Object.values(pokemonFixture.habilidades).forEach((habilidad,i)=>{
+        expect($habilidades[i].textContent).toEqual(habilidad)
+    })
+})
+
+test("Chequea que asigne los movimientos correctamente",()=>{
+    const $movimientos = document.querySelectorAll('#movimientos tr');
+
+    $movimientos.forEach (($movimiento,i)=>{
+        expect($movimiento.firstChild.textContent).toEqual(pokemonFixture.movimientos[i].nombre)
+
+    const $versiones = $movimiento.lastChild.childNodes; 
+    $versiones.forEach(($version,e)=>{
+        expect($version.textContent).toEqual(pokemonFixture.movimientos[i].versiones[e]);
+        })
+})
+})

src/ui/pokemon.js

@@ -20,7 +20,7 @@ function mostrarMovimientos(movimientos) {
   const $movimientos = document.querySelector('#movimientos');
 
   movimientos.forEach((movimiento) => {
-    const { movimiento: nombreMovimiento, versiones } = movimiento;
+    const { nombre: nombreMovimiento, versiones } = movimiento;
     const $movimientoFila = document.createElement('tr');
     const $movimiento = document.createElement('th');
     $movimiento.setAttribute('scope', 'row');
@@ -38,6 +38,8 @@ function mostrarMovimientos(movimientos) {
 
     $movimientoFila.appendChild($versiones);
     $movimientos.appendChild($movimientoFila);
+
+
   });
 }
 
@@ -65,7 +67,6 @@ export default function mostrarPokemon(pokemon) {
     habilidades,
     movimientos,
   } = pokemon;
-
   document.querySelector('#pokemon-contenedor').style.display = 'block';
   actualizarTextoAyuda('');
 
@@ -79,4 +80,5 @@ export default function mostrarPokemon(pokemon) {
   mostrarTipos(tipos);
   mostrarHabilidades(habilidades);
   mostrarMovimientos(movimientos);
-}
+
+ }