Curso de Testing Frontend en Vue y TypeScript para empresas

Introducción a Jest

Introducción a librería de pruebas de Vue

Sintáxis y léxico de Jest

Test Cases y Test Suites

Asserts

Before Each y Before All

After Each y After All

Anidando tests suites

Jest Matchers

Jest Spies

Jest Mocks

Sintaxis para ejecutar determinadas pruebas

Sintaxis para saltar pruebas durante la ejecución

Instalación de Eslint y configuración

Instalación y configuración de Jest en proyectos Vue con Typescript

Instalación de Babel y configuraciones necesarias

Escribiendo scripts npm para linting y ejecución de pruebas

Escribiendo tu primer test unitario con Jest

Ejecución y análisis de informa generado

Modificando el script para obtener el coverage del proyecto

Habilitando Jest en modo Watch

Habilitando Jest en modo No Cache

Otras flags y opciones de configuración en la ejecución de jest

Depuración y puntos de ruptura en tests unitarios

Decidiendo qué componentes son necesarios

Escribiendo tests unitarios para cada componente

Implementando código a cada componente

Añadiendo snapshot tests para componentes terminados

Pruebas manuales en el navegador

Pruebas automatizadas con tests e2e

Aprendiendo a saber qué no probar

Entendiendo la API de librería de tests de Vue

Creación pruebas para componentes con librería de tests de Vue

Trabajando con la instancia de Vue

Montando un componente

Plantillas y funciones render

Comprendiendo correctamente el sistema de componentes de Vue

Decidiendo qué probar en un componente

Ideando las especificaciones de alto nivel y nivel de componente

Redactando pruebas para las props de un componente

Redactando pruebas para renderizados condicionales

Búsqueda de elementos en un componente

Redactando pruebsa de para acciones de ususario

Redactando pruebas para el obtener atributos DOM de elementos en un componente

¿Cómo evitar Assertions booleanas y por qué debemos hacerlo?

Redactando pruebas para atributos class en elementos de un componente

Buenas prácticas

¿Cómo acceder a elementos wrapper?

Accediendo a atributo style de un elemento

Buenas prácticas

Redactando pruebas para encontrar todos los elementos de un componente

Redactando pruebas con componentes con childs embebidos

Buenas prácticas

Redactando pruebas para probar funciones públicas y privadas de un componente

Redactando pruebas para funciones que usen timeouts e intervalos a través de fake timers

Buenas prácticas

Usando Jest Spies para espiar la ejecución de funciones

Entendiendo qué son los side effects y cómo lo controlamos a través de Mocks

Mocking de instancia de Vue y propiedades de componentes

Usando Jest Mocks para mocking de funciones

Usando Jest para mocking de peticiones http de axios

Añadiendo propiedades a una instancia de Vue

Redactando pruebas para el ciclo de vida de un componente

Usando Jest Mocks para mocking de dependencias de módulo

Buenas prácticas

Redactando pruebas para código asíncrono

Buenas prácticas

Redactando pruebas para eventos nativos del DOM

Redactando pruebas para eventos Vue

Redactando pruebas para comprobar que un componente emite un evento

Redactando pruebas para formularios

Buenas prácticas

¿Debemos probar cada parte de Vuex por separado?

Redactando pruebas para las store mutations de Vuex

Redactando pruebas para los store getters de Vuex

Redactando pruebas para las store actions de Vuex

Redactando pruebas para la instancia del store de Vuex

Redactando pruebas para componentes conectados al store de Vuex

Buenas prácticas

¿Cómo emplear funciones factoría para organizar las pruebas de un proyecto?

DRY

Usando una funciójn factoría para pruebas del store de Vuex

Buenas prácticas

Redactando pruebas para componentes que usan Vue Router

Redactando pruebas para componentes RouterLink

Usando propiedades de Vue Router en un store de Vuex

Problemáticas habituales

Buenas prácticas

Redactando pruebas para mixins de Vue

Redactando pruebas para filters de Vue

Redactando pruebas para componentes que emplean mixins y filters

Entendiendo correctamente lo que son las pruebas de snapshot

Redactando pruebas snapshots para componentes estáticos

Redactando pruebas snapshots para componentes dinámicos

Añadiendo pruebas de Snapshot al flujo de trabajo habitual

Buenas prácticas

Introducción a Cypress

Analizando la API de Cypress con Typescript

Instalación, configuración y puesta en marcha

Analizando proyectos de prueba de Cypress

Iniciando Cypress y análisis de la UI

Captura de elementos con XPath desde la UI

Creación de comandos personalizados en Cypress

Compatibilidades y pruebas en diferentes navegadores

Usando Cypress en modo headless

Metodología BDD

Features, Escenarios y Stages

Buenas prácticas

Configuración de GitIgnore en proyectos Vue con TypeScript

Configuración de archivos YAML en proyectos Vue con TypeScript

Especificando Stages de pruebas

Creación de pipelines

Análisis de Jobs

Configuraciones y buenas prácticas en Gitlab CI/CD