mdasberg / ng-apimock

Node plugin that provides the ability to use scenario based api mocking: for local development for protractor testing
MIT License
99 stars 26 forks source link

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

Open sandervalstar opened 6 years ago

sandervalstar commented 6 years ago

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.

wswebcreation commented 6 years ago

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 ;-)

rajjaiswalsaumya commented 2 years ago

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