2021-03-05 05:52:05 +00:00
# Cómo agregar pruebas de Cypress
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
Al realizar cambios en JavaScript, CSS o HTML que podrían cambiar la funcionalidad o el diseño de una página, es importante agregar una prueba de integración de [Cypress ](https://docs.cypress.io ) correspondiente.
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
Para aprender como escribir pruebas de Cypress, o especificaciones, observa la [documentación ](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html ) oficial de Cypress.
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
> Nota: Cuando escribimos pruebas para freeCodeCamp, recuerda agregar `/* global cy */` al inicio del archivo para evitar problemas con ESLint.
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
## Donde agregar una prueba
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
- Las pruebas de Cypress están en el directorio `./cypress` .
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
- Las pruebas de Cypress para un módulo curricular están en el directorio curricular correspondiente, por ejemplo: `cypress/integration/learn/responsive-web-design/basic-css/index.js` .
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
## Como ejecutar pruebas
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
> [!NOTE] Si utilizas GitPod, por favor mira la [Configuración de Cypress-GitPod ](/how-to-add-cypress-tests#cypress-gitpod-setup)
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
### 1. Asegúrate de que MongoDB y la aplicación de cliente se estén ejecutando
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
- [Inicia MongoDB y propaga la base de Datos ](/how-to-setup-freecodecamp-locally#step-3-start-mongodb-and-seed-the-database )
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
- [Inicia la aplicación de cliente de freeCodeCamp y el servidor API ](/how-to-setup-freecodecamp-locally#step-4-start-the-freecodecamp-client-application-and-api-server )
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
### 2. Ejecuta las pruebas de Cypress
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
Para ejecutar pruebas en las compilaciones de producción, reemplaza `dev` con `prd` abajo.
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
- Para ejecutar todas las pruebas en el directorio `./cypress` :
2021-02-14 22:18:51 +00:00
2021-02-21 06:14:29 +00:00
```console
npm run cypress:dev:run
```
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
- Para ejecutar una sola prueba:
2021-02-14 22:18:51 +00:00
2021-02-21 06:14:29 +00:00
```console
npm run cypress:dev:run -- --spec=cypress/pathToYourSpec/youSpecFileName.js
```
2021-02-14 22:18:51 +00:00
2021-03-05 05:52:05 +00:00
- Para crear una compilación de desarrollo, inicia el servidor de desarrollo y ejecuta todas las pruebas de cypress existentes de extremo a extremo:
2021-02-21 06:14:29 +00:00
```console
npm run e2e:dev:run
```
2021-03-05 05:52:05 +00:00
## Configuración de Cypress-GitPod
2021-02-21 06:14:29 +00:00
2021-03-05 05:52:05 +00:00
### 1. Asegúrate de estar en la _Feature Preview_ (vista previa de funciones) de GitPod _a partir del 01/02/2021_
2021-02-21 06:14:29 +00:00
2021-03-05 05:52:05 +00:00
- Ve hacia [GitPod Docs - Feature Preview ](https://www.gitpod.io/docs/feature-preview/ ) para ver como habilitar la _Feature Preview_
2021-02-21 06:14:29 +00:00
2021-03-05 05:52:05 +00:00
### 2. Asegúrate de que el entorno de desarrollo se esté ejecutando
2021-02-21 06:14:29 +00:00
2021-03-05 05:52:05 +00:00
Si al iniciar el entorno de GitPod no se creó automáticamente el ambiente:
2021-02-21 06:14:29 +00:00
2021-03-05 05:52:05 +00:00
- Inicia la base de datos
2021-02-21 06:14:29 +00:00
```console
mongod
```
2021-03-05 05:52:05 +00:00
- Propaga la base de datos
2021-02-21 06:14:29 +00:00
```console
npm run seed
```
2021-03-05 05:52:05 +00:00
- Inicia el servidor de desarrollo y cliente
2021-02-21 06:14:29 +00:00
```console
npm run develop
```
2021-03-05 05:52:05 +00:00
### 3. Instala las herramientas de compilación de Cypress
2021-02-21 06:14:29 +00:00
```console
npm run cypress:install-build-tools
```
2021-03-05 05:52:05 +00:00
- Cuando se te solicite en la terminal, selecciona la distribución de tu teclado por idioma / área
2021-02-21 06:14:29 +00:00
2021-03-05 05:52:05 +00:00
Ahora, [Cypress puede ejecutarse ](/how-to-add-cypress-tests#_2-run-the-cypress-tests )
