Mock Service während Demo

Wiplash4

Aktives Mitglied
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

Top Contributor
Für Nummer 3 aber brauche ich eine Reihe Mockservices, die automatisch starten soll. Wie erreiche ich das via package.json?
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).

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

Aktives Mitglied
[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:build:prod"
},
"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

Aktives Mitglied
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.
 

Ähnliche Java Themen

Neue Themen


Oben