Not able to mock API calls using ng-apimock

Question

I am trying to mock the api requests to auth0 using ng-apimock while running the e2e tests using protractor in an angular project. While running the e2e tests using protractor the request to browser.get('/') redirects to localhost:4200/ngApimock/init before the request which I intend to mock (i.e. /authorize). This results in the tests to fail before the mocked response is received. I suspect that the mock setup itself results in such an error. Below is the current config that I am using

poxy.config:

"domain-url-to-target": {
    "target": "http://localhost:3000/authorize",
    "secure": false,
    "logLevel": "debug"
  },
  "/ngapimock/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }

mock:

{
    "expression": "/authorize",
    "method": "POST",
    "name": "postLoginForm",
    "responses": {
        "authSucess":{
        "status": "302",
        "location": "http://localhost:4200/callback/....",
        "access_token": "Mock_Access_Token",
        "expires_in": 8600,
        "id_token": "Some_id_Token",
        "scope": "openid profile email",
        "token_type:": "Bearer"
        }
    }
}

step definition:

Given('statement', async functions (<params>){
await browser.get('/');
await ngApimock.selectScenario('postLoginForm','authSucess');
});

Z2K · Answer 1 · 2019-12-20T12:53:47.183

It seems like your protractor startup is not exposing the ngApimock mocking API under /ngapimock/* for the protractor tests to use. From what i understand, it is the REST API, which the protractor plugin uses to initialize, change scenarios, etc.

You might want to serve the ngApimock mocks yourself under another port. In order to achieve that you can add a beforeLaunch callback to your protractor.conf.js file:

beforeLaunch: function () {
    serveRestMocks(XXX);
},

... where XXX is the port number you want to serve the rest mocks from, and serveRestMocks is your own function to serve the mocks, as inspired by the @ng-apimock/core tutorial in the README: https://github.com/ng-apimock/core#middleware

If you are using Angular with a proxy conf: Try adding the following entry to your proxy.conf.json/proxy.conf.js

"/ngapimock/*": {
    "target": "http://localhost:XXX/",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
},

where XXX is the port, where you serve your ngApimock mocks.

If you are not using Angular, you might need to figure out how to serve the rest mocks on the same port as your protractor server. You can use the following demo page for inspiration: https://github.com/ng-apimock/demo/tree/master/protractor-plugin

EDIT: you also need to make sure you convert your mocks from the old format to the new one using:

const converter = require('@ng-apimock/core').converter;
converter.convert('src', // the directory where your old mock.json files are located
                  'dest', // the directory where the converted mock files are written to
                  '**/*.json'); // the optional glob pattern (defaults to: **/*.mock.json)

... taken from this guide https://github.com/ng-apimock/core/blob/master/MIGRATION.md

score 0 · Answer 2 · answered Apr 20 '21 at 07:24

For this to work, you will have to use proxy configuration for routing those localhost:4200/ngApimock/init like calls to the mock server backend. This can be done using a mock-proxy.conf.json, configuring it in angular.json. Please refer to Mocking and Stubbing with protractor StackOverflow answer for all the required configurations and setup.

Not able to mock API calls using ng-apimock

2 Answers2