Arrays

Clase 10 de 25 • Curso de JavaScript Testing con Jest 2019

Resumen

En esta clase, Vamos a trabajar con arreglos.

Crearemos un archivo JavaScript donde crearemos nuestros arreglos.
Luego creamos las funciones para exportar los arrays.

Métodos:

.toContain()
.toHaveLength()

Adrian Guerrero

student•

No solo test se aprende aquí, sino que el pepino es una fruta, increíble

Jhon Manuel Angulo Moncada

student•

jajaja

Cristian Caballero

student•

Asumiendo la ironia, este es un pepino y es una fruta https://www.google.com/search?q=pepino+fruta&rlz=1C5CHFA_enCA862CA862&sxsrf=ALeKk01iC-_KsM3x35h0w_I1iAOxkuVMqQ:1588293211928&source=lnms&tbm=isch&sa=X&ved=2ahUKEwifvciltZHpAhWQJzQIHYsACZMQ_AUoAXoECBkQAw&biw=1440&bih=765&dpr=2#imgrc=EjehYhlkFiW9FM

Daniel Vaca

student•

Creo que las clases pueden ser más rápidas, al final las funciones de Jest son autodescriptivas y fáciles de entender, al menos lo que se ha vista hasta el momento.

Daniel Páez

student•

Comparto tu perspectiva! Realmente me encanta la actitud del profesor Oscar pero sientp que las clases serian mejor si fuera ir aplicando test sobre algun proyecto real o darle algun otro enfooque

Simplemente ir tocando prueba a prueba se torna repetitivo aunque se que es necesario

La práctica hace al mastro

Edgar Ubaldo

student•

Estoy de acuerdo con ustedes, para una actualización de cursos seria bueno que leyeran todo el feedback que dejamos nostros los estudiantes para mejorar el contenido

Jorge Méndez Ortega

student•

Es bueno leer nuestro código, se que actualmente existen herramientas como eslint que nos facilitan detección de buenas prácticas e incluso errores, pero siempre e pensado que es bueno no depender mucho de este tipo e herramientas.

Gleycer Parra

student•

Al contrario, debes hacerlo parte de tus prácticas, para eso están. Es como decir que no debemos depender de tests para saber si nuestro código funciona. Saludos compañero.

German Gerardo Guerci

student•

Concuerdo con Gleycer, un colega Senior me recomendó usar SonarLint y gracias a esto puedo escribir código mas limpio y aprender buenas practicas. Programar bien es difícil, hay que usar todo lo que este en nuestro alcance para lograr el mejor resultado posible.

Jorge Méndez Ortega

student•

El operador not es muy útil ya que se puede anteponer a cualquier comparador con lo cual siempre conseguiremos lo contrario por ejemplo.

// De esta manera buscamos dentro de un arreglo que exista "banana"
expect(arrayFruits()).toContain('banana');

// 

// De esta manera buscamos dentro de un arreglo que no exista "guanabana"
expect(arrayFruits()).not.toContain('Guanabana');

El abanico de posibilidades que brinda not es muy amplio

Henry De La Hoz

student•

Oscar invita constantemente a revisar el código, una manera de hacerlo y ya lo hemos visto en otros cursos de javascript de Platzi, es mediante el uso de herramientas de Lint. Una módulo fácil y que funciona bien out-of-the-box es Standard o si eres un usuario más avanzado puedes usar el módulo sobre el cual se basa Standar, ESLint y en este último puedes armar el conjunto de reglas que se han de evaluar de la forma que desees.

Gianfranco Correa

student•

Tambien existe el Eslint de AirBnB, que trae reglas muy útiles para trabajar en builds con React.js / Redux / etc…

Jeffer Barragan

student•

Para configurar ESLINT

pueden instalarlo de forma global

npm i -g eslint

( si están en Mac o Linux anteponen el comando sudo )

sudo npm i -g eslint

y luego en la raíz del proyecto.

eslint --init

JUAN FELIPE CONTRERAS DELGADO

student•

Si es visible que se podría ir mas rápido, pero en mi experiencia este tipo de ritmo deja resultados mejores a largo plazo en mi conocimiento.

Fadith Enrique Escorcia Mujica

student•

const fruits = ['banana', 'melon', 'sandia', 'naranja', 'limon', 'pepino']
const colors = ['azul','verde', 'rojo', 'rosa','amarillo']

Andrea Estefania Blanco Avila

student•

una consulta, test es igual que colocar it ?

Miguel Angel Martelo Quiroz

student•

Si, puedes usar cualquiera de los dos y funcionan exactamente igual.

Miguel Angel Reyes Moreno

student•

Recuerda: Somos humanos y es normal cometer errores. Como desarrolladores es importante NO tener prisas. Hay que leer detenidamente nuestro código y verificar que no hay errores.

Edgar Lopez Arroyo

student•

import { arrayFruits, arrayVerduras } from '../arrays';

describe("comprobando que existe en un array", ()=>{
    test('Hay manzanas?', ()=>{
        expect(arrayFruits()).toContain('manzana')
    });
    test('Hay cebollas?', ()=>{
        expect(arrayVerduras()).toContain('cebolla')
    });
    test('Tamaño de un array', ()=>{
        expect(arrayFruits()).toHaveLength(3)
    });
});

Briggi Rivera Guillén

student•

Hola yo tuve que ejecutar jest usando ./node_modules/.bin/jest imagino que no instalé jest globalmente, :) de todas formas el curso está muy interesante.

Oscar Barajas Tavares

Team Platzi•

Puedes probar con npx jest

Santiago Cuello

student•

describe("Tratamiento de arrays", () => {
    const fruits = ['banana', 'melon', 'sandia', 'naranja', 'limon', 'pepino']
    const colors = ['azul','verde', 'rojo', 'rosa','amarillo']

  test("Contiene una banana?", () => {
    expect(fruits).toContain('banana');
  });

//   test("Contiene un platano?", () => {
//     expect(fruits).toContain('platano');
//   });

  test("No contiene un platano", () => {
    expect(fruits).not.toContain('platano');
  });

  test("Tamano del arreglo", () => {
    expect(fruits).toHaveLength(6);
  });

});

Carlos Pérez

student•

Existe alguna razón para exportar una función que retorne una constante en lugar de exportar la constante directamente?

Germán Martinez

student•

export const arrayFruits = () => ['Mango', 'manzana', 'naranja', 'limon', 'pepino'];

jose ortiz

student•

se puede exportar la constante directamente y funcionara igual.

Mario Alejandro Crespo Reyes

student•

Hola, a la fecha no he podido correr una sola prueba especifica por que el comando que indica el profesor no funciona.

ya estuve revisando la pagina de jest pero no se por que no me funciona el comando de la pruebaespecifica.

Alguien sabe cual es ?

leonardo moreno

student•

hola, que error da la consola, has tratado con npm t ?

Oscar Barajas Tavares

Team Platzi•

Tienes un repositorio con tu proyecto, podría revisarlo a detalle

Platzi Team

student•

🔥🔥🔥

Emmanuel Jóse Dávila Duque

student•

import { arrayWowClass, arrayColors } from "../arrays";

describe("Testing Arrays WowClass", () => { test("Have a paladin class", () => { expect(arrayWowClass()).toContain("Paladin"); });

test("Don´t include iphone", () => { expect(arrayWowClass()).not.toContain("Iphone"); });

test('Length of the array', () => { expect(arrayWowClass()).toHaveLength(7); }); });

describe("Testing Arrays arrayColors", () => { test("Have a paladin class", () => { expect(arrayColors()).toContain("brown"); });

test("Don´t include iphone", () => {
  expect(arrayColors()).not.toContain("Azul");
});

test('Length of the array', () => {
  expect(arrayColors()).toHaveLength(6);
});

});

const wowClass = [ "Paladin", "Warrior", "Mage", "Hunter", "Warlock", "Druid", "Prist", ]; const colors = ["blue", "green", "brown", "pink", "yellow", "amatist"];

export const arrayWowClass = () => wowClass; export const arrayColors = () => colors;

Naldo Duran

student•

// De esta manera buscamos dentro de un arreglo que exista "banana"
expect(arrayFruits()).toContain('banana');

// 

// De esta manera buscamos dentro de un arreglo que no exista "guanabana"
expect(arrayFruits()).not.toContain('Guanabana');

import { arrayFruits, arrayVerduras } from '../arrays';

describe("comprobando que existe en un array", ()=>{
    test('Hay manzanas?', ()=>{
        expect(arrayFruits()).toContain('manzana')
    });
    test('Hay cebollas?', ()=>{
        expect(arrayVerduras()).toContain('cebolla')
    });
    test('Tamaño de un array', ()=>{
        expect(arrayFruits()).toHaveLength(3)
    });
});

describe("Tratamiento de arrays", () => {
    const fruits = ['banana', 'melon', 'sandia', 'naranja', 'limon', 'pepino']
    const colors = ['azul','verde', 'rojo', 'rosa','amarillo']

  test("Contiene una banana?", () => {
    expect(fruits).toContain('banana');
  });

//   test("Contiene un platano?", () => {
//     expect(fruits).toContain('platano');
//   });

  test("No contiene un platano", () => {
    expect(fruits).not.toContain('platano');
  });

  test("Tamano del arreglo", () => {
    expect(fruits).toHaveLength(6);
  });

});

Arrays

Introducción al curso

¿Dónde aprender testing con JavaScript?

Qué son pruebas Unitarias

Herramientas para pruebas en Javascript

Configuración

¿Qué es Jest?

Instalación y configuración

Creando nuestra primera prueba unitaria

Matchers

Common Matchers / Comparadores Comunes

Numbers

Truthness / Verdadero

Arrays

Coverage

Strings

Monitoreo

Setup de pruebas

Testing Asynchronous Code

Callbacks

Promesas

Reject y resolve

Async/Await

Aplicaciones de testing para Async/Await

Snapshot Testing

Snapshot Testing

Excepciones Snapshot

Implementando Jest en diferentes Frameworks

Preparar proyecto para trabajar con React JS

Preparar proyecto para trabajar con Vue JS

Preparar proyecto para trabajar con Express JS

Beneficios de las Pruebas Unitarias