Mock Backend für Angular/Gulp App

Question

Ich möchte das Backend für eine schnellere Entwicklung verspotten, indem Sie JSON-Antwort ohne Reling auf dem realen Backend. Die Frontend-App ist eine Angular-App und wir verwenden Gulp als Entwicklungs- und Build-Tool.

z. habe ein spezifisches api (.../custumers/123) gebe ein statisches json result zurück.

Gibt es vielleicht schon ein Schluckwerkzeug dafür?

Answer 1

Ich ging mit json-server und gulp-json-srv, die ich denke, hatte einige Vorteile der Einfachheit und schnelle Einrichtung.

gulpfile.js config-json-Server und Proxy die HTTP-Anrufe mit einem "großen Schluck mock" Aufgabe zu starten:

gulp.task('mock', ['connect-mock'], function() { 
    jsonServer.start({ 
     data: 'db.json', 
     port: 8087 
    }); 
}); 

gulp.task('connect-mock', function() { 
    connect.server({ 
     port: 8085, 
     livereload: true, 
     middleware: function (connect, o) { 
      return [(function() { 
       var url = require('url'); 
       var proxy = require('proxy-middleware'); 
       var options = url.parse('http://127.0.0.1:8087'); 
       options.route = '/v2'; 
       return proxy(options); 
      })()]; 
     } 
    }); 
}); 

db.json mit verspott Daten:

{ 
    "customers": [ 
     { "id": 1, "name": "Johnny B" }, 
     { "id": 2, "name": "Steve G" }, 
     { "id": 3, "name": "Glenn H" } 
    ] 

Answer 2

Sie können dazu mock server verwenden.

Answer 3

Ich empfehle Sie überprüfen https://github.com/wongatech/angular-multimocks. Dies ermöglicht es Ihnen, Scheinantworten für Ihre Apis zu erstellen und ermöglicht es Ihnen, in Echtzeit über die URL in Ihrer App zwischen ihnen zu wechseln.

Wir haben es ursprünglich erstellt, wo ich arbeite, um genau dieses Problem zu lösen, und es wird jetzt in mehreren großen Tech-Unternehmen in London verwendet.

Sie definieren jeden Ihrer Mocks wie unten, Sie können mehrere verschiedene Antworten für eine Ressource erstellen und diese dann in Szenarien einordnen. Die Datei mockResources.json definiert die verfügbaren Szenarien und beschreibt, welche Version jeder Ressource für jedes Szenario verwendet werden soll.

Mock Beispiel:

{ 
    "httpMethod": "GET", 
    "statusCode": 200, 
    "uri": "/customer/cart", 
    "response": { 
    "id": "foo" 
    } 
} 

Szenario Listing Beispiel:

{ 
    "_default": [ 
    "root/_default.json", 
    "account/anonymous.json", 
    "orders/_default.json" 
    ], 
    "loggedIn": [ 
    "account/loggedIn.json" 
    ] 
} 

Es ermöglicht Ihnen, verschiedene Ruhe Verben, verschiedene URIs zu verspotten, fügen Verzögerungen Antworten (entweder für Tests langsame Antworten, oder einfach nur geben Sie App ein mehr leben wie fühlen).

Es ist ein Kernstück unserer Entwicklung und stark in unsere Abnahmetests integriert.

Checkout die Demo @http://tech.wonga.com/angular-multimocks, gibt das Projekt Readme detaillierte Anweisungen zur Einrichtung gerne bei weiteren Fragen helfen.