78 lines
2.4 KiB
Markdown
78 lines
2.4 KiB
Markdown
# Wie man Cypress Tests erstellt
|
|
|
|
Wenn du Änderungen an JavaScript, CSS oder HTML vornimmst, die die Funktionalität oder das Layout einer Seite verändern könnten, ist es wichtig, entsprechende [Cypress](https://docs.cypress.io)-Integrationstests hinzuzufügen.
|
|
|
|
Wie man Cypress-Tests oder "Specs" schreibt, erfährst du in der offiziellen [Dokumentation](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html) von Cypress.
|
|
|
|
## Wo du einen Test hinzufügen kannst
|
|
|
|
- Cypress-Tests befinden sich im Verzeichnis `./cypress`.
|
|
|
|
- Cypress-Tests für ein Studienplanmodul befinden sich im entsprechenden Studienplanverzeichnis, d.h. `cypress/integration/learn/responsive-web-design/basic-css/index.js`.
|
|
|
|
## Wie man Tests durchführt
|
|
|
|
> [!NOTE] Wenn du GitPod verwendest, lies bitte [Cypress-GitPod Setup](/how-to-add-cypress-tests#cypress-gitpod-setup)
|
|
|
|
### 1. Sicherstellen, dass MongoDB und Client-Anwendungen ausgeführt werden
|
|
|
|
- [Starte MongoDB und erstelle die Datenbank](/how-to-setup-freecodecamp-locally#step-3-start-mongodb-and-seed-the-database)
|
|
|
|
- [Starte die freeCodeCamp Client-Anwendung und den API-Server](/how-to-setup-freecodecamp-locally#step-4-start-the-freecodecamp-client-application-and-api-server)
|
|
|
|
### 2. Führe die Cypress-Tests durch
|
|
|
|
Um Tests mit Produktions-Builds durchzuführen, ersetze unten `dev` durch `prd`.
|
|
|
|
- Um alle Tests im Verzeichnis `./cypress` auszuführen:
|
|
|
|
```console
|
|
npm run cypress:dev:run
|
|
```
|
|
|
|
- Um einen einzelnen Test durchzuführen:
|
|
|
|
```console
|
|
npm run cypress:dev:run -- --spec=cypress/pathToYourSpec/youSpecFileName.js
|
|
```
|
|
|
|
- Um einen Entwicklungs-Build zu erstellen, starte den Entwicklungsserver und führe alle vorhandenen Cypress-End-to-End-Tests aus:
|
|
|
|
```console
|
|
npm run e2e:dev:run
|
|
```
|
|
|
|
## Cypress-GitPod Setup
|
|
|
|
### 1. Sicherstellen, dass die Entwicklungsumgebung läuft
|
|
|
|
Wenn das Starten der GitPod-Umgebung nicht automatisch die Umgebung aufgebaut hat:
|
|
|
|
- Starte die Datenbank
|
|
|
|
```console
|
|
mongod
|
|
```
|
|
|
|
- Richte die Datenbank ein
|
|
|
|
```console
|
|
npm run seed
|
|
```
|
|
|
|
- Entwickle den Server und den Client
|
|
|
|
```console
|
|
npm run develop
|
|
```
|
|
|
|
### 2. Cypress Build Tools installieren
|
|
|
|
```console
|
|
npm run cypress:install-build-tools
|
|
```
|
|
|
|
- Wenn du im Terminal dazu aufgefordert wirst, wähle dein Tastaturlayout nach Sprache/Region aus
|
|
|
|
Jetzt kann [Cypress ausgeführt werden](/how-to-add-cypress-tests#_2-run-the-cypress-tests)
|