Creando el proyecto

Clase 5 de 27 • Curso de Introducción al Testing con JavaScript

Jazziel Horacio Puente Verdugo

student•

código de .editorconfig

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf
# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = off

[CHANGELOG.md]
indent_size = false

Axel Neil

student•

tengan, para que solo busquen la documentacion y peguen las cosas en los archivos correspondientes

mkdir testing-js
cd testing-js
git init
touch .gitingore
mkdir api
mkdir webapp
mkdir demos
touch .editorconfig
cd demos
npm init -y
touch .gitingore
npm install --save-dev jest
mkdir src
cd src
touch 01-sum.js
touch sum.test.js

Rodrigo Andrés Moreno Pertúz

student•

Te debo una beerScript

Andres Velasquez

student•

Wow!

Nunca habia tomado un curso con Nicolas Molina Es realmente bueno explicando y enseñando!

Andrés Esteban Rodríguez Jiménez

student•

Creando el proyecto

Vamos a empezar a crear un proyecto para aprender de testing con Jest. Para esto debemos ir a la página oficial de jest y vamos a leer un poco la documentación.

Vamos ahora a instalar Jest en nuestro proyecto, para esto ya debimos haber inicializado nuestro proyecto en Node.

Vamos entonces a descargar Jest:

npm install --save-dev jest

Para probar la funcionalidad de Jest vamos a copiar una prueba que tiene Jest en su página oficial.

Vamos a crear un archivo dentro de una carpeta src, este se llamará por ejemplo sum.js.

Dentro de este archivo vamos a copiar la siguiente función.

function sum(a, b) {
  return a + b;
}
module.exports = sum;

Para poder crear nuestra prueba, vamos a tener que crear un archivo de prueba que se llame igual que nuestro archivo creado, solo que al final debe tener la extensión .test.js ósea que nuestro archivo de test para nuestro archivo anterior se llamará sum.test.js.

Dentro de este vamos a crear nuestro test:

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Ya con esto lo último que nos falta es el como correr las pruebas, para esto iremos a nuestro archivo de configuración package.json y en el apartado de scripts vamos a modificar el comando de test:

{
  ...
  "scripts": {
    **"test": "jest"**
  },
  ...
}

Ahora en nuestra terminal vamos a poder ejecutar nuestro comando:

npm run test

Y si nuestra prueba sale como exitosa, ya tendríamos configurado Jest en nuestro proyecto.

Emanuel Nieto

student•

Recuerden cambiar en el archivo 01-sum.test.js en lugar de: const sum = require('./sum'); es: const sum = require('./01-sum');

Andres Velasquez

student•

Gracias buen hombre

Liliana Vasquez Saiz

student•

Muchas gracias.

Paulina Ignacio Sanvicente

student•

Uuuy, ¿cómo configuraste tu consola para que se vea así?

Ronald Amiquero Zoiqui

student•

Dejo mi comentario para que me notifique la aplicación xd

Josue Quevedo Portas

student•

Lo pueden hacer a través de zsh y oh-my-zsh e instalando si no me equivoco los temas de powerlevel10k.

zsh es una Shell, si trabajan con Linux la shell más usada es Bash, que es la que se encarga de ejecutar los comandos que introducimos en la terminal, en este caso para poder usar los temas de PowerLevel10k es necesario tener instala la shell "Zsh", la cual la pueden instalar a través de Oh My Zsh, ahi viene el comando a ejecutar para tenerla instalada.

Posterior a eso tienen que instalar PowerLevel10K que es basicamente un conjunto de temas par ala terminal, las instrucciones las encuentran dentro de su Github: PowerLevel10K.

Recomiendo leer muy bien las instrucciones y antes de hacer cualquier movimiento ver algun tutoría por YT o por internet donde vean paso a paso como instalar powerlevel10k... la primera vez que lo instale me hice un enredo total jajaja ya ahora se me hace muy fácil, pero recomiendo ver algun tutoría antes de meter mano...

A mi me encanta lo minimalista, asi es que tengo mi terminal muy limpia, pero hay muchos temas a probar...

Mucha suerte!!! 💪🏼

Segrit Rodríguez

student•

quisiera saber cual es la terminal que el profesor utiliza para iniciar el proceso ?

SANDRO SIMON

student•

Hola. Tengo claro que el .gitignore es para ignorar ciertos archivos al hacer commit. Lo que no me queda claro es cuales serían esos archivos que se quieren ignorar en este caso ¿son archivos generados automáticamente al ejecutar los testings? Slds.

Nicolas Molina

teacher•

Hola, en este caso de pruebas igual se deben ignorar algunos archivos de configuración comunes de un proyecto de Node además que si hay algunos archivos que se generan a la hora de hacer pruebas que no es buena práctica subirlos, por ejemplo cuando generamos el reporte de cobertura normalmente esto no se sube al repo.

Rubén Ernesto Aragón Gil

student•

Ivan Mendez

student•

Que emocionado estoy de hacer este curso

Dany R

student•

EditorConfig es una herramienta que ayuda a los desarrolladores a mantener un estilo consistente de código entre diferentes editores y plataformas. Al utilizar un archivo .editorconfig en un proyecto, puedes especificar opciones como la cantidad de espacios en blanco, el uso de tabulaciones u otros estilos de codificación. Esto es útil cuando varias personas trabajan en un proyecto y pueden estar utilizando diferentes editores de código, ya que asegura que todo el código tenga un formato consistente.😌

Santiago Gonzalez

student•

Contenido del ignore:

# Created by https://www.toptal.com/developers/gitignore/api/macos,windows,linux
# Edit at https://www.toptal.com/developers/gitignore?templates=macos,windows,linux

### Linux ###
*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*

# .nfs files are created when an open file is removed but is still being accessed
.nfs*

### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon


# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

### macOS Patch ###
# iCloud generated files
*.icloud

### Windows ###
# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk

# End of https://www.toptal.com/developers/gitignore/api/macos,windows,linux

abigailrp

student•

Buenisimo, muchas gracias!!!

Oriana Morillo

student•

Editor config

Reinaldo Mendoza

student•

.editorconfig buenisimo para trabajar en equipos, sino despues van a haber un monton de commits que no tienen nada que ver con la logica

Daniel Andres Rojas Paredes

student•

la parte del editor config no entendi el porque y para que de ese archivo y esa extencion?

Jorge Arias Argüelles

student•

Hola Daniel!

El archivo .editorconfig sirve para asegurar que todos los desarrolladores del proyecto usen las mismas reglas de formato al escribir código, sin importar el editor o IDE que estén usando (VS Code, WebStorm, Sublime, etc.).


root = true //Indica que este archivo es la raíz de la configuración. El editor no debe buscar .editorconfig en carpetas superiores.

[*]
indent_style = space         // Usar espacios (no tabs)
indent_size = 2               // Cada indentación será de 2 espacios
charset = utf-8               // Codificación de caracteres
trim_trailing_whitespace = true // Elimina espacios en blanco al final de cada línea
insert_final_newline = true     // Asegura una línea vacía al final del archivo
end_of_line = lf                // Usar salto de línea tipo Unix (LF)
max_line_length = off           // No aplicar límite de caracteres por línea

[CHANGELOG.md]
indent_size = false            // No se forzará indentación específica en ese archivo

Oscar Uriel Zuñiga Mejia

student•

Me podrian apoyar? al realizar la pruema me marca un error en sum is not a function, y no me permite que la prueba sea correcta

CESAR AUGUSTO TOBON CUARTAS

student•

Hola.

Tengo el siguiente problema.

Estoy siguiente el curso en un entorno virtual con Linux Ubuntu y al momento de correr el comando npm run test, me esta arrojando la siguiente información

npm ERR! Linux 5.4.0-144-generic npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "test" npm ERR! node v8.10.0 npm ERR! npm v3.5.2 npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! demos@1.0.0 test: jest npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the demos@1.0.0 test script 'jest'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the demos package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! jest npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs demos npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls demos npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /home/admin1/Desktop/TestingJS/demos/npm-debug.log

Y seguí la instalación de acuerdo al video. Alguien me puede accesorar de como darle solución a este problema

Alejandro Rodriguez Ortiz

student•

¿Como se llama la consola que estas usando?

Jhon Pulido

student•

no me funciono

SyntaxError: Unexpected token '.' at wrapSafe (internal/modules/cjs/loader.js:915:16) at Module._compile (internal/modules/cjs/loader.js:963:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (/home//Documentos/github-repository/platzi_practice/testing-js/demo/node_modules/jest-cli/build/index.js:12:12) at Module._compile (internal/modules/cjs/loader.js:999:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

Amanda Sierra

student•

Buenas tardes, volví a instalar todo y ahora en el ejercicio de prueba de la instalación me sale este error, alguien me podría decir por favor qué es? FAIL src/01-sum.test.js ● Test suite failed to run

Cannot find module './sum' from 'src/01-sum.test.js'

> 1 | const sum = require('./sum');
    | ^
  2 |
  3 | test('sumar 1 + 2 es igual a 3', () => {
  4 |   expect(sum(1, 2)).toBe(3);

  at Resolver._throwModNotFoundError (node_modules/jest-

Xavier Medina Veintimilla

student•

¡Hola! :D

Parace que jest no está instalado. Prueba corriendo en la consola esto npm install --save-dev jest

Nunca pares de aprender 💚

Jorge Iván Otero Vargas

student•

Cuando importaste el archivo de origen, dejaste el que trae por defecto el ejemplo de jest, debes cambiarlo a:

const suma = require("./01-sum");

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf
# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = off

[CHANGELOG.md]
indent_size = false

mkdir testing-js
cd testing-js
git init
touch .gitingore
mkdir api
mkdir webapp
mkdir demos
touch .editorconfig
cd demos
npm init -y
touch .gitingore
npm install --save-dev jest
mkdir src
cd src
touch 01-sum.js
touch sum.test.js

# Created by https://www.toptal.com/developers/gitignore/api/macos,windows,linux
# Edit at https://www.toptal.com/developers/gitignore?templates=macos,windows,linux

### Linux ###
*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*

# .nfs files are created when an open file is removed but is still being accessed
.nfs*

### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon


# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

### macOS Patch ###
# iCloud generated files
*.icloud

### Windows ###
# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk

# End of https://www.toptal.com/developers/gitignore/api/macos,windows,linux

root = true //Indica que este archivo es la raíz de la configuración. El editor no debe buscar .editorconfig en carpetas superiores.

[*]
indent_style = space         // Usar espacios (no tabs)
indent_size = 2               // Cada indentación será de 2 espacios
charset = utf-8               // Codificación de caracteres
trim_trailing_whitespace = true // Elimina espacios en blanco al final de cada línea
insert_final_newline = true     // Asegura una línea vacía al final del archivo
end_of_line = lf                // Usar salto de línea tipo Unix (LF)
max_line_length = off           // No aplicar límite de caracteres por línea

[CHANGELOG.md]
indent_size = false            // No se forzará indentación específica en ese archivo

Cannot find module './sum' from 'src/01-sum.test.js'

> 1 | const sum = require('./sum');
    | ^
  2 |
  3 | test('sumar 1 + 2 es igual a 3', () => {
  4 |   expect(sum(1, 2)).toBe(3);

  at Resolver._throwModNotFoundError (node_modules/jest-

Creando el proyecto

Introduccion

¿Qué es el testing?

La piramide del testing

Hablemos sobre deuda técnica

Herramientas de testing

Creando el proyecto

Tu primer test

Escribiendo pruebas

Pruebas estáticas

Assertions / matchers

Setup and Teardown

Implementado Setup

Tipos de pruebas

Metodologías

Pruebas Unitarias

Pruebas unitarias

Coverage report

Instalación de Docker en Windows, macOS y Ubuntu

Proyecto de API

Mocking, Stub, doubles

Mocking

Spies

Generando Fake Books

Integration Test & E2E

Configurando supertest en el API

Integration Test

e2e

UI Test

UI Test

Automatizar

Unit tests en GitHubActions

E2E en GitHubActions

¿Quieres más cursos de testing?