# 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.

## Where to Add a Test

- 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`.

## How to Run Tests

> [!NOTE] If using Gitpod, please see [Cypress-Gitpod Setup](how-to-add-cypress-tests.md#cypress-gitpod-setup)

### 1. Ensure that MongoDB and Client Applications are Running

- [Starte MongoDB und erstelle die Datenbank](how-to-setup-freecodecamp-locally.md#step-3-start-mongodb-and-seed-the-database)

- [Starte die freeCodeCamp Client-Anwendung und den API-Server](how-to-setup-freecodecamp-locally.md#step-4-start-the-freecodecamp-client-application-and-api-server)

### 2. Run the Cypress Tests

Um Tests mit Produktions-Builds durchzuführen, ersetze unten `dev` durch `prd`.

- Um alle Tests im Verzeichnis `./cypress` auszuführen:

  ```console
  pnpm run cypress:dev:run
  ```

- Um einen einzelnen Test durchzuführen:

  ```console
  pnpm run cypress -- run --spec=cypress/<path_to_test_file>
  ```

  For example:

  ```console
  pnpm run cypress -- run --spec=cypress/e2e/default/landing.ts
  ```

- Um einen Entwicklungs-Build zu erstellen, starte den Entwicklungsserver und führe alle vorhandenen Cypress-End-to-End-Tests aus:

  ```console
  pnpm run e2e:dev:run
  ```

## Cypress-Gitpod Setup

### 1. Sicherstellen, dass die Entwicklungsumgebung läuft

If starting the Gitpod environment did not automatically develop the environment:

- Follow the [MongoDB installation guide](https://www.mongodb.com/basics/get-started).
- Create a config file.

```console
pnpm run create:config
```

- Richte die Datenbank ein

```console
pnpm run seed
```

- Entwickle den Server und den Client

```console
pnpm run develop
```

### 2. Cypress Build Tools installieren

```console
pnpm 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.md#_2-run-the-cypress-tests)
