GEDOPLAN
Webprogrammierung

Angular E2E mit json-server

Webprogrammierung
2021 02 09 12 45 23 neues dokument 1 inkscape
2021 02 09 12 45 23 neues dokument 1 inkscape

Ein E2E-Test dient dazu eine Anwendung “von Vorne bis Hinten” durchzutesten. Dabei sind viele Hürden zu meistern, angefangen von erreichbarer Infrastruktur, über Authentifizierung bis hin zu konstanten Datenbeständen. Das mag in einigen Projekten nur schwer und mit viel Aufwand realisiert bar sein. Ein Unit-Testing in Angular ist hier in vielen Fällen kaum ein ausreichender Ersatz. Also muss ein Mock her, um die Datenschnittstellen abzulösen. Eine praktikable Lösung: json-server

“Get a full fake REST API with zero coding” das ist json-server. Die Grundlage dafür ist ein Node-Projekt: https://github.com/typicode/json-server + in der einfachsten Form eine projektspezifische JSON Datei die unseren Daten enthält. Eine solche Datei “db.json”:

  {
    "data": [
      {
        "id": 1,
        "message": "Lorem ipsum"
      },
      {
        "id": 3,
        "message": "Clita kasd gubergren"
      },
      {
        "id": 4,
        "message": "Takimata sanctus est Lorem"
      }
    ],
    "demo": {
      "message": "Demo Object"
    }
  }
  

und der Start von json-Server (Default Port: 4000) :

json-server --watch db.json

Fertig ist unser “backend”. In unserem Beispiel generiert json-server basierend auf unserer json-Datei zwei Rest-Schnittstellen: http://localhost:4000/data und http://localhost:4000/demo die sich direkt Abfragen lassen und die angegebenen Daten liefern. Aber nicht nur das. Auch POST/PUT/DELETE Funktionen werden direkt unterstützt. Sollte die zu simulierende Schnittstelle komplexer sein gibt es die Möglichkeit individuelle Routen anzugeben oder sogar programmatisch auf bestimmte Anfragen zu reagieren.

+ Protractor

Um das zusammen mit Protractor zu nutzen sind folgende Schritte zu implementieren

  1. für unsere Tests benötigen wir den laufenden JSON-Server. Charmant: wir starten den Server in der prepare Methode von Protractor mittels _child_process_
  onPrepare() {
    const { spawn } = require('child_process')
    const serverPath = require('path').join(__dirname, './json/server.js');
    spawn('node', [serverPath]);
    ...

(protractor.conf.js , wir verwenden hier ein individuelles json-server-Script, um wie bereits angesprochen programmatisch auf einige Anfragen zu reagieren, siehe server.js-Demo + Doku “Module” )

2. wir verwenden eine proxy-Konfiguration um alle Anfragen an bestimmte URLs (unsre Backend) auf unseren json-server um zu leiten:

{
  "/api/*": {
    "target": "http://localhost:4000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api/": "/"
    }
  }
}
alle Anfragen an "http://.../api/... werden umgeleitet auf http://localhost:4000/...

3. eine solche Proxy-Konfiguration lässt sich eigentlich beim serve-Befehl mittels “-proxy-config” übergeben. Leider unterstützt das E2E-Ziel diese Option nicht ( s. github issue ). Stattdessen müssen wir die entsprechende Konfiguration ergänzen die wir dann beim E2E-Target verwenden( angular.json ).

      "architect": {
       ...
        "serve": {... },
        "serve-e2e": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ng-json-server:build",
            "proxyConfig": "e2e/proxy.conf.json",
            "port": 4300
          },

....
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ng-json-server:serve-e2e"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ng-json-server:serve-e2e:production"
            }
          }
        }

Vollständiges Beispiel @GitHub

Das war’s. Ein

npm run e2e

Startet nun unseren JSON-Server, konfiguriert den Development Server mit unserem Proxy und lässt alle E2E-Tests Laufen.

Alles. Live. In Farbe. @GitHub

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Autor

Diesen Artikel teilen

LinkedIn
Xing

Gibt es noch Fragen?

Fragen beantworten wir sehr gerne! Schreibe uns einfach per Kontaktformular.

Kurse

weitere Blogbeiträge

geometry 1044090 640 jpg
Webprogrammierung

Angular 18.1 @let Variablen

“Template Locale Variables” ist eines der am meisten gewünschten Features in der Angular Community. Ist? War. Mit Angular 18.1 werden…
demo
Webprogrammierung

Angular – WebWorker

Der Browser dient schon lange nicht mehr nur als einfaches Anzeigeinstrument für Webseiten. JavaScript übernimmt mehr und mehr Aufgaben die…

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!