Protractor-plugin setting port other than the especified in baseUrl

[juandados]

I am trying to run my e2e tests with the ng-apimock protractor-plugin over jasmine. My actual data api, the one I am trying to mock, runs in port 8000. Whereas, my angular application runs in port 4200.

Following what you explain on README files https://github.com/ng-apimock/protractor-plugin, https://github.com/ng-apimock/core and migration steps https://github.com/mdasberg/ng-apimock:

The package.json has as devDependencies:

...
"@ng-apimock/core": "^1.0.21",
"@ng-apimock/protractor-plugin": "^1.0.14"
...

and I already ran npm install.

My protractor config (protractor.conf.js) file looks like:

...
exports.config = {
...
  plugins: [{package: '@ng-apimock/protractor-plugin'}],
  framework: 'jasmine',
  baseUrl: 'http://localhost:4200/'
...
};

My spec file (sign-in.e2e-spec.ts) looks like:

import {Client} from '@ng-apimock/base-client';
declare const ngApimock: Client;
...
describe('login', () => {
...
 it('displays an error message if the signIn fails', async () => {
   await ngApimock.selectScenario('login', 'wrong-credentials');
   ...
   });
...
});

My mock file login.mock.json:

{
  "name": "login",
  "isArray": true,
  "request": {
    "url": "/login",
    "method": "POST",
    "body": {
      "username": "^[a-zA-Z]{3,10}$",
      "password": "^[a-zA-Z]{3,10}$"
    }   
  },  
  "responses": {
    "ok": {
      "status": 200,
      "default": true
    },  
    "wrong-credentials": {
      "default": false,
      "status": 400 
    }   
  }
}

But I am getting the following error

Failed: An error occured while invoking http://localhost:4200/ngapimock/mocks that resulted in status code 404

I think, I have to specify the port 8000 at some point but I do not find where. my protractor setup allows me run e2e tests calling the actual data api, that is why I discard any mistake on this part.

On the other hand, I am not sure if the plugin configuration is right or not. A demo for jasmine as the cucumber one, may help a lot as documentation. Thanks.

[mdasberg]

@juandados you need to make sure that you run your application and mocks on the same port. If you don't you will run into cors issues.

To do this, you can either use a connect / express server like this: https://raw.githubusercontent.com/ng-apimock/demo/master/protractor-plugin/serve.js

Or you can tell your ng serve to use a proxy.

Create a proxy.config.json file and copy paste the snipplet below:

{
 "/api/*": {
   "target": "http://localhost:8000",
   "secure": false,
   "logLevel": "debug"
 },
 "/ngapimock/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug"
  }
}

And start up your ng serve script with the proxy config:

"scripts": {
  "start": "ng serve --proxy-config proxy.config.json"
}

I will add some documentation

[mdasberg]

@juandados I have added https://github.com/ng-apimock/core/blob/master/ANGULAR_CLI.md which describes how you can use it in combination with angular.