Herramientas para trabajar con Svelte profesionalmente

1

Proyecto del curso y estado del arte de Svelte

2

Setup inicial con Sapper

3

Estructura de un proyecto en Sapper

Estructura de rutas con Sapper

4

Sistema de rutas y rutas dinámicas en Sapper

5

Layout y estructura principal de nuestro blog

6

Ruta 404 con animaciones

7

Rutas principales del blog: about, contact y tags

Construye el Layout y Newsletter del blog

8

Diseño y maquetación del Header

9

Diseño y maquetación del Nav

10

Diseño y maquetación del Sidebar y Footer

11

Construye un Newsletter para el blog

12

Estructura de los blogposts

13

Sección principal del blog y blogposts

Integración de analytics, comentarios y tiempo de lectura en tu blog

14

Integración con Google Analytics

15

Calcula el tiempo de lectura de cada blogpost

16

Muestra un emoji aleatorio en cada blogpost

17

Manejo de fechas dentro del blog con JavaScript Vainilla

18

Estructura del blogpost con comentarios

19

Integración con Disqus para agregar comentarios

Construye tu API usando Ghost CMS

20

Instalación de Ghost

21

Configuración de Ghost en Heroku

22

Ghost Core API

23

Integra la API de Ghost en tu blog con Svelte

24

Guardando la información de nuestros blogposts

25

Terminando la integración

Despliega tu aplicación

26

Compra de un dominio y manejo del DNS con Cloudflare

27

Deploy a Netlify

28

Deploy a Heroku

SEO y optimización de tu sitio web

29

Metadatos y optimización del SEO

30

Transforma tu blog en una PWA

31

RSS

32

Terminando el RSS

33

Sitemap

34

Agrega pruebas de integración con Cypress

Cómo continúa tu camino profesional con Svelte

35

Siguientes pasos con Svelte

Agrega pruebas de integración con Cypress

34/35

Lectura

Para llevar a cabo pruebas de end-to-end testing necesitamos una herramienta que simule la interacción de los usuarios con el navegador. Afortunadamente, nuestro proyecto de Sapper ya incluye Cypress.

Antes de comenzar a correr las pruebas con Cypress, es necesario instalarlo con todas sus dependencias necesarias.

Nota: Si utilizas un Windows, te recomiendo utilizar WSL (Windows Subsystem for Linux) que te permite tener una instancia de Ubuntu en tu sistema operativo Windows y ejecutar comandos de GNU/Linux.

Instalación de Cypress:

sudo apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

Una vez instalado las dependencias necesarias debemos de instalar Cypress en nuestro proyecto:

npm install cypress --save-dev

Ahora ya estamos listos para ejecutar las pruebas por defecto que trae nuestro proyecto:

npm run test

Cómo hacer testing de nuestro proyecto

Para agregar más pruebas a nuestro proyecto debemos ubicar la carpeta y el archivo “cypress/integration/spec.js” donde corren las pruebas actuales. Edítalo y agrega tus pruebas.

Las pruebas escritas en Cypress están diseñadas para ser fáciles de leer y comprender. Agreguemos una nueva prueba para verificar que tenemos la sección de newsletter en el home de nuestro sitio. Para eso abrimos el archivo “cypress/integration/spec.js”, comenzamos editando la línea número 6 y agregamos nuestra propia prueba.

it('Check Newsletter section', ()  =>  {
   cy.contains('h4', 'NEWSLETTER')
});

Ahora corremos nuestras pruebas con el comando:

npm run test

Si quieres aprender más acerca de Cypress y cómo agregar integraciones a tus proyectos para probar su flujo de trabajo, te recomiendo los cursos de End to End Testing con Cypress e Introducción a Selenium con Python que están disponibles con tu suscripción de Platzi.

Aportes 0

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.