# Mock Service während Demo



## Wiplash4 (10. Dez 2021)

Ich versuche mich an einem Angular Projekt. Dieses Projekt soll 3 Umgebungen haben:
1. Prod: Produktion
2. Dev: Wie Prod, aber mit viel mehr Logausgaben
3. Demo: Eine Demonstrationsumgebung, die einfach nur den Service demonstriert
4. Test: Das sind die UnitTests, die via Jasmine ausgeführt werden sollen
. Für Nummer 3 aber brauche ich eine Reihe Mockservices, die automatisch starten soll. Wie erreiche ich das via package.json?

Wie sollen die Mockservices überhaupt aussehen?


----------



## httpdigest (10. Dez 2021)

Wiplash4 hat gesagt.:


> Für Nummer 3 aber brauche ich eine Reihe Mockservices, die automatisch starten soll. Wie erreiche ich das via package.json?




```
{
  ...
  "scripts": {
    "demo": "demoservice"
  }
}
```
Und dann per: `npm run demo`.
Oder halt einfach nur: `demoservice` (nur zum Starten einer Executable brauchst du ja nicht extra npm).



Wiplash4 hat gesagt.:


> Wie sollen die Mockservices überhaupt aussehen?


Gut?

Ehrlich: Du gibst hier viel zu wenig Informationen, als dass man dir sinnvoll helfen kann. Was meinst du denn mit "Mockservices"?
Meinst du HTTP Backend-Server/Services, die Mockverhalten haben, gegen die sich deine Angular Web-Anwendung verbindet? Oder meinst du gemockte Angular Komponenten im Frontend selbst?
Und was meinst du mit "Wie sollen die Mockservices überhaupt aussehen?" Naja, so, dass sie für dein Projekt Sinn ergeben.


----------



## Wiplash4 (11. Dez 2021)

[CODE lang="json" title="angular.json"]{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": "851e2529-ac16-4728-9d03-f0539ad6cc6a"
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-example": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-example",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "prod": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "dev": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            },
            "demo": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.demo.ts"
                }
              ]
            },
            "test": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "dev"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "prod": {
              "browserTarget": "angular-example:buildrod"
            },
            "dev": {
              "browserTarget": "angular-example:build:dev"
            },
            "demo": {
              "browserTarget": "angular-example:build:demo"
            },
            "test": {
              "browserTarget": "angular-example:build:test"
            }
          },
          "defaultConfiguration": "dev"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-example:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "beispiel"
}
[/CODE]
[CODE lang="json" title="package.json"]{
  "name": "Beispiel",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "demo": "mockserver -p 3001 -m ./src/test && ng demo",
    "debug": "mockserver -m ./src/test/Beispiel.service.mock.ts && ng debug",
    "build": "ng build",
    "watch": "ng build --watch --configuration dev",
    "uTest": "ng test",
    "mock:server": "json-server --watch src/test/beispielEntries.json",
    "postinstall": "ngcc"
  },
  "private": true,
  "angularCompilerOptions": {
    "enableIvy": false,
    "allowEmptyCodegenFiles": true
  },
  "dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/cdk": "^13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/material": "^13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "@material-ui/core": "^4.12.3",
    "material-table": "^1.63.0",
    "@types/node": "^12.20.37",
    "rxjs": "~6.6.7",
    "rxjs-compat": "~6.6.7",
    "rxjs-websockets": "~9.0.0",
    "tslib": "~2.3.0",
    "tslint": "~6.1.3",
    "typescript": "~4.4.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.1",
    "@angular/cli": "~13.0.1",
    "@angular/compiler-cli": "~13.0.0",
    "@types/mocha": "^9.0.0",
    "bootstrap": "^3.3.6",
    "chai": "*",
    "chai-spies": "*",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "mocha": "^9.1.3",
    "mocha-loader": "~5.1.5",
    "mocha-webpack": "~1.1.0",
    "ng-mocks": "~12.5.0",
    "json-server": "0.17.0"
  }
}
[/CODE]
[CODE lang="java" title="MockService BeispielServiceMock.ts"]import { OnInit, OnDestroy } from "@angular/core";
import { Output, Input, EventEmitter, Injectable } from '@angular/core';
import { BeispielService } from "../app/Beispiel.service";
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import makeWebSocketObservable, {WebSocketOptions} from 'rxjs-websockets';

import { JsonFormatter } from "tslint/lib/formatters";

@Injectable({
  providedIn: 'root'
})
export class BeispielServiceMock implements BeispielService, OnInit, OnDestroy
{
  wss = require('ws').Server({ port: 3001 });

  ngOnDestroy(): void
  {
    this.wss.on('connection', (ws: { on: (arg0: string, arg1: { (message: any): void; (error: any): void; (ws: any): void; }) => void; }) => {

    console.log("Deoo");
      this.onConnection(ws);
      ws.on('message', (message: any) => this.onMessage(message, ws));
      ws.on('error', (error: any) => this.onError(error));
      ws.on('close', (ws: any)=> this.onClose(ws))
    });
  }

  ngOnInit(): void
  {
    console.log("Deoo");
    this.wss.on('connection', (ws: { on: (arg0: string, arg1: { (message: any): void; (error: any): void; (ws: any): void; }) => void; }) => {
      this.onConnection(ws);
      ws.on('message', (message: any) => this.onMessage(message, ws));
      ws.on('error', (error: any) => this.onError(error));
      ws.on('close', (ws: any)=> this.onClose(ws))
    });
  }

  onConnection(ws: { on: (arg0: string, arg1: { (message: any): void; (error: any): void; (ws: any): void; }) => void; }) {
    console.log("Depp1");
  }
  onMessage(message: any, ws: { on: (arg0: string, arg1: { (message: any): void; (error: any): void; (ws: any): void; }) => void; }) {
    var request = JSON.parse(message);
    var response;
    switch(request.command)
    {
      case "TestRequest":
        "Beispiel";
    }
  }
  onError(ws: { on: (arg0: string, arg1: { (message: any): void; (error: any): void; (ws: any): void; }) => void; }) {
    console.log("Depp1");
  }
  onClose(ws: { on: (arg0: string, arg1: { (message: any): void; (error: any): void; (ws: any): void; }) => void; }) {
    console.log("Depp");
  }

}
[/CODE]


----------



## Wiplash4 (11. Dez 2021)

Das sind die 3 notwendigen Dateien. Es geht darum, dass fuer Demo sowohl der Beispiel.ts, aber auch der oben genannte Mockservice parallel gestartet wird.


----------

