ng-apimock icon indicating copy to clipboard operation
ng-apimock copied to clipboard

Add documentation on how to use ng-apimock with other testing frameworks than protractor

Open sandervalstar opened this issue 7 years ago • 2 comments

I'm working on a project where I wanted to do the testing using Cypress: https://www.cypress.io/ It took me some time to figure out how to best integrate Cypress and ng-apimock, but this is what I ended up doing:

Assuming ng-apimock is running on port 8101. Define the following custom cypress commands in cypress/support/commands.js:

Cypress.Commands.add("selectScenario", function (identifier, scenario) {
  cy.request("PUT", 'http://localhost:8101/ngapimock/mocks', JSON.stringify({
    identifier: identifier,
    scenario: scenario
  }))
});

Cypress.Commands.add("resetScenariosToDefaults", function () {
  cy.request("PUT", 'http://localhost:8101/ngapimock/mocks/defaults', null);
});

You can then use these commands in your tests as follows: cypress/integration/example_spec.js:

cy.selectScenario('yourMockName', 'yourScenarioName');
cy.resetScenariosToDefaults();

I'd love to hear if I should be doing something differently. If you agree this is the correct way of integrating ng-apimock with Cypress could you add this to the ng-apimock documentation?

It would be super awesome if there is some kind of cypress-commands.js file in the ng-apimock package which we can simply import in cypress/support/commands.js

I believe implementing that would look something like this: ng-apimock/lib/cypress/cypress-commands.js:

module.exports = function setupCustomCommands(host, port) {
  const baseUrl = `http://${host}:${port}/ngapimock/mocks`;

  Cypress.Commands.add("selectScenario", function (identifier, scenario) {
    cy.request("PUT", baseUrl, JSON.stringify({
      identifier: identifier,
      scenario: scenario
    }))
  });

  Cypress.Commands.add("resetScenariosToDefaults", function () {
    cy.request("PUT", `${baseUrl}/defaults`, null);
  });

}

cypress/support/commands.js:

const setupCustomCommands = require('ng-apimock/lib/cypress/cypress-commands');
setupCustomCommands('localhost', '8101');

I think it would be cooler though if we don't have to pass in the host and port, because ng-apimock should already know where it is running.

sandervalstar avatar Nov 30 '17 05:11 sandervalstar

Hi @sandervalstar

Nice that you are also trying to use ng-Apimock with a different framework then Protractor. I'm currently also investigating the use of ng-Apimock with Webdriver.io i.c.m. native mobile apps. I also talked about this with @mdasberg to pull out some logic from ng-Apimock template for Protractor to a more generic api that can be used by any framework. This will definitely help in getting that done ;-)

wswebcreation avatar Nov 30 '17 05:11 wswebcreation

Is there a document how to use ngapimock with cypress? I am getting error for selectCommand that i defined as defined on site.

rajjaiswalsaumya avatar Mar 03 '22 14:03 rajjaiswalsaumya