Pruebas estáticas

Pruebas estáticas

Las pruebas estáticas se caracterizan por no ejecutar código, solo lo analizan y nos dan un feedback temprano.

Estas nos ayudan a ver si estamos teniendo buenas prácticas al escribir nuestro código.

Hay herramientas que nos ayudan a ejecutar esta pruebas estáticas como lo son:

• ESLint
• Prettier
• TypeScript

Vamos a empezar a crear pruebas estáticas con ESLint, para esto debemos instalarlo:

npm i -D eslint

Luego de instalarlo, vamos a ejecutar el siguiente comando que nos permitirá traer ciertas configuraciones y establecer configuraciones por defecto:

npx eslint --init

Luego nos va a preguntar las siguientes opciones:

1. Si queremos hacer un check de nuestra sintaxis

2. Si queremos hacer check de sintaxis y encontrar problemas

3. Si queremos hacer check de sintaxis, encontrar problemas y forzar el estilo de código

   Luego nos preguntará una serie de cosas relacionadas a que tecnologías estamos utilizando en nuestro proyecto, respondemos estas preguntas.

   Luego nos pregunta si corre en navegador o en un entorno de Node.

   Nos pregunta si queremos usar una guía de estilo de código, la más popular y las más recomendable suele ser la de Airbnb.

   Luego elegimos el formato del código.

   Por ultimo nos pregunta si deseamos instalar esos paquetes.

Ya con esto podemos tener un análisis de código estático para poder tener un estándar en el cual nos podamos basar a la hora de escribir nuestro código y siguiendo buenas practicas, siguiendo un estándar que nos permita escribir un código de la misma forma siguiendo convenciones.

Luego en el archivo de configuración package.json podemos establecer un script que nos permita hacer un examen de cualquier archivo en nuestra carpeta scr.

{
  ...
  "scripts": {
    ...
		// Marca los errores
    "lint": "eslint src/**",
		// Marcar los errores y arreglar los problemas
    "lint:fix": "eslint src/** --fix"
  },
  ...
}

Arreglar errores de Jest

Para que no nos salte errores cuando usamos nuestras funciones de Jest usamos en el archivo de configuración de .eslint.js la siguiente configuración:

module.exports = {
  env: {
    ...
		// Todo lo que venga de Jest no los alerta
    jest: true,
  },
  ...
};

Les comparto un test de promedio:

02-math.js

Cree una función que recibe un array donde valida que no vaya vacio.

const average = (values) => {

  const valuesLength = values.length
  if(valuesLength === 0) return null

  const totalValues = values.reduce((a, b) => a + b, 0)

  return totalValues / valuesLength
}

02-math.test.js
Cree dos test, el primero valida que calcule correctamente el promedio de un array de elementos y el otro que retorne null al ser un array vacio.

  test("Average 2, 3, 3, 5, 7 and 10", () => {
    const values = [2, 3, 3, 5, 7, 10];
    const result = average(values)
    expect(result).toBe(5)
  });

  test("Should average for 0", () => {
    const result = average([])
    expect(result).toBe(null)
  })

Que suave esta clase, neta. Mis respetos siempre para el profe Nicolás por explicar tan bien.

Wow, no sabía que estos también se consideraban pruebas, ¡excelente! 😄

Para instalar eslint:

npm install -D eslint

Para configurarlo:

npx eslint --init

PS C:\Users\jotam\OneDrive\Escritorio\testing-js\demos> npm run lint

eslint src/**

Oops! Something went wrong! 😦

ESLint: 8.25.0

No files matching the pattern “src/**” were found.
Please check for typing mistakes in the pattern.

PS C:\Users\jotam\OneDrive\Escritorio\testing-js\demos>

Despues de la pregunta si queria instalar los paquetes ma agrego la pregunta de que manejador entre npm, yarn y pnpm. Yo elegi npm pero me agrego esa pregunta en comparacion con el video

Para los que tienen problemas con el espaciado que deja el enter en windows (LF CRLF Error), usen

  rules: {
    'linebreak-style': 0,
  },

en el documento .eslintrc.js

Mi estilo favorito es el de StandardJS 😄

Al igual que el profesor recomiendo Typescript 100% además de ayudar con los errores te ayuda a ser más ordenado gracias a las interfaces y tipos.

Solucion rapida (no la mejor)

Coloque las funciones que necesitamos como variables globales en el eslint ya que la documentacion de jest no esta actualizada para la nueva version de eslint version 9.

Nota

Si descubren la forma de implementar el eslint como plugin seria la mejor solucion debido a esta solucion requiere que coloquemos todas las herramientas que necesitemos de jest

import globals from "globals";
import pluginJs from "@eslint/js";


export default [

  {
    files: ["**/*.js"], 
    languageOptions: { // Config 
      sourceType: "commonjs"
    }
  },
  {
    languageOptions: {
      globals: {
        test: globals.jest.test,
        expect: globals.jest.expect
      }
    }
  },
  {languageOptions: { globals: globals.browser }}, // Config 

  pluginJs.configs.recommended,// Config 
];

¿Cómo customizar reglas de ESLint?

Cada regla puede tener uno de estos tres estados:

“off” o 0: la regla está desactivada.
"warn" o 1: la regla está activada en modo warning, por lo que nos saldrá un aviso no bloqueante. Puede ser útil para cambiar ciertas prácticas en nuestro código progresivamente.
"error" o 2: la regla está activada y nos dará un error si se incumple.

Por legibilidad, es preferible el uso de keyword de estado antes que por su equivalencia en cifra numerica.

Configuración de las reglas

Las reglas también pueden admitir configuración adicional. En ese caso, voy a usar un array con el estado en primera posición, seguido de la configuración que necesito. La configuración puede variar según la regla, así que lo mejor es siempre consultar la documentación.
Ejemplo:

{
	// Configuración simple con un array de strings
	"quotes": ["error", "double"],
	// configuración compleja con un array de string y un objeto
	"array-callback-return": ["error", { "checkForEach": "true" }],
}

Usar TypeScript en ESLint

Instalar parser y plugin de TypeScript para ESLint

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Agregar el siguiente código en tu archivo de configuración de ESLint

{
	"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
	"plugins": ["@typescript-eslint"],
}

Corregir automáticamente errores en Visual Studio Code

Formatear y corregir errores al guardar

Esta configuración nos va a permitir que nuestros archivos JavaScript y TypeScript se formateen y se corrijan (algunos) errores de forma automática. Esto funciona solo en caso de tener nuestro archivo de ESLint configurado.

Pasos

1. Instalar la extensión de ESLint para VSCode.

2. Abrir nuestro setting.json general de tu VSCode, podes usar el shortcut (Ctrl+,) para entrar a las settings.
   

   

3. Establecer ESLint como formateador.

{
	"eslint.format.enable": true,
}

1. Establecer el formateador por default para JavaScript y TypeScript.

{
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "explicit"
	},
	"[javascript]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
	},
	"[javascriptreact]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
	},
	"[typescript]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
	},
	"[typescriptreact]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
	}
}	

1. Permitir que se pueda realizar auto fix de nuestro código al guardar.

{
	"editor.codeActionsOnSave": {
        	"source.fixAll.eslint": "explicit",
	}
}

Guardar automáticamente al cambiar de contexto

Cuando cambiemos de archivo o demos click en otra sección de nuestro VSCode que no sea el archivo que estamos trabajando, se va a guardar los cambios que hemos realizado hasta ese momento. En caso de tener eslint y prettier configurados, se van a formatear y corregir (algunos) errores en el archivo.

Pasos

1. Ingresar a las configuraciones de VSCode.
2. Buscar “files.autoSave”.
3. Colocarlo en valor de “onFocusChange”.
   
   

O puedes agregarlo directamente desde tu setting.json general de tu VSCode:

{ 
	"files.autoSave": "onFocusChange"
}

Para saber cuantos errores detectados por eslint tiene su proyecto, vayan a la barra de estatus de vscode, que se encuentra por defecto abajo de todo del editor, y hagan click en un icono con una X, al hacer click se va a abrir esta pestaña

ESLint para pruebas estaticas, correcion automatica de codigo (se corrije lo que se econfugire en le archivo .eslint.js)

Increíble explicación. Muchas gracias, Nicolas.

Comparto con ustedes la configuración usada por Nicolás. Espero les sea útil al momento de iniciar nuevos proyectos.

✔ How would you like to use ESLint? To check syntax, find problems, and enforce code style
✔ What type of modules does your project use? commonjs
✔ Which framework does your project use? none
✔ Does your project use TypeScript? No
✔ Where does your code run? Node
✔ How would you like to define a style for your project? Guide
✔ Which style guide do you want to follow? Airbnb
✔ What format do you want your config file to be in? JavaScript