6

I would like to mock the backend for quicker development by providing json response without reling on the real backend. The frontend app is an Angular app and we use Gulp as a development and build tool.

E.g. have a specific api (.../custumers/123) return a static json result.

Is there perhaps already a gulp tool for this?

per_jansson
  • 2,103
  • 4
  • 29
  • 46

3 Answers3

3

I recommend you check out https://github.com/wongatech/angular-multimocks. This allows you to create mock responses for your apis and allows you to switch between them in real time via the url in your app.

We originally created it where I work to solve this exact issue and it is now being used in multiple large tech companies in London.

You define each of your mocks like below, you can create multiple different response for a resource and then arrange them into scenarios. The file mockResources.json defines the available scenarios and describes which version of each resource should be used for each scenario.

Mock example:

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

Scenario Listing Example: 

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

It allows you to mock different rest verbs, different uris, add delays to responses (for either testing slow responses, or just too give you app a more live like feel).

It's a core part of our development and strongly integrated with our acceptance testing.

Checkout the demo @ http://tech.wonga.com/angular-multimocks, the project readme gives detailed instructions on setup happy to help with any further questions.

cconolly
  • 366
  • 1
  • 9
  • 1
    I was about to look into this, because it sounds very promising. I would like to run using Gulp, is that possible? I could only find Grunt tasks in your repo. – per_jansson Dec 07 '15 at 14:03
  • 1
    It's only grunt right now unfortunately - please do add an issue to make it gulpable. It's not something we plan on doing tight now but feel free to fork and add the functionality or get people to swarm us with requests for gulp. It would certainly be a great addition. – cconolly Dec 08 '15 at 17:00
  • I realise this is well after you need it, but in case anybody stumbles upon this it does now work with Gulp as well. The docs show what is needed – cconolly Nov 21 '16 at 08:39
1

I went with json-server and gulp-json-srv which I think had some benefits of simplicity and quick setup.

gulpfile.js config to start json-server and to proxy the http calls using a "gulp mock" task:

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 with mocked data:

{
    "customers": [
        { "id": 1, "name": "Johnny B" },
        { "id": 2, "name": "Steve G" },
        { "id": 3, "name": "Glenn H" }
    ]
per_jansson
  • 2,103
  • 4
  • 29
  • 46
  • can you be more specific, please? that doesnt work in my gulpfile. i'm new at gulp so idont know how to start with this mock-server. the "connect"-object that you used in connect-mock, is not declared or injected, so where it comes? – Marcus Wolf Mar 28 '16 at 15:58
  • @MarcusWolf `connect` comes from the [gulp-connect](https://www.npmjs.com/package/gulp-connect) package – jamiebarrow May 11 '16 at 10:59
0

You can use mock server for this.

Jerome Anthony
  • 7,823
  • 2
  • 40
  • 31