Mock backend per Angular/Gulp app

Question

Mi piacerebbe prendere in giro il backend per uno sviluppo più veloce fornendo una risposta JSON senza fare affidamento sul vero backend. L'app frontend è un'app Angular e usiamo Gulp come strumento di sviluppo e creazione.

E.g. avere una API specifica (.../custumers/123) restituisce un risultato JSON statico.

C'è forse già uno strumento per questo?

Answer 1

Sono andato con json-server e gulp-json-srv che penso abbia avuto alcuni vantaggi di semplicità e configurazione rapida.

gulpfile.js config per iniziare JSON-server e per delega le chiamate HTTP usando un "sorso finto" compito:

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 con i dati deriso:

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

Answer 2

Per questo è possibile utilizzare mock server.

Answer 3

mi raccomando si controlla https://github.com/wongatech/angular-multimocks. Ciò ti consente di creare risposte simulate alle tue apis e ti consente di passare da una all'altra in tempo reale tramite l'url nella tua app.

Inizialmente l'abbiamo creato dove lavoro per risolvere questo problema esatto e ora viene utilizzato in diverse grandi aziende tecnologiche a Londra.

Definisci ognuno dei tuoi mazzi come di seguito, puoi creare più risposte diverse per una risorsa e quindi organizzarle in scenari. Il file mockResources.json definisce gli scenari disponibili e descrive quale versione di ciascuna risorsa deve essere utilizzata per ogni scenario.

esempio Mock:

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

Scenario Esempio annuncio:

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

Ti permette di deridere diversi verbi di riposo, diversi URI, aggiungere ritardi per le risposte (sia per i test risposte lente, o anche solo dare un aspetto più vivo al tuo app).

È una parte fondamentale del nostro sviluppo e fortemente integrata con i nostri test di accettazione.

Verificare la demo @http://tech.wonga.com/angular-multimocks, il file readme del progetto fornisce istruzioni dettagliate sulla configurazione per aiutare con ulteriori domande.