angular-cypress-graphql-mock v0.4.0

angular-cypress-graphql-mock

This package adds the possibility to mock GraphQL request in cypress when using the apollo-graphql-angular framework.

It intercepts the XHR send method to manipulate the XHR and simulates a fake response when the request url matches the GraphQL endpoint.

Cypress Configuration

You can provide some configurations in the cypress.json file:

How to use?

Install it:

$ npm i angular-cypress-graphql-mock --save-dev

Import the package in your command.js file

import 'angular-cypress-graphql-mock';

In your test files you can then use it:

describe('My Mocked Test', function () {
   it('loads a mocked Post', function () {
      cy.addGraphQLMock('Post', (query) => ({
         "Post": {
            "id": "35",
            "title": "Lorem Ipsum",
            "views": 254,
            "User": {
               "name": "John Doe",
               "__typename": "User"
            },
            "Comments": [
               {
                  "date": "2017-07-03T00:00:00.000Z",
                  "body": "Consectetur adipiscing elit",
                  "__typename": "Comment"
               },
               {
                  "date": "2017-08-17T00:00:00.000Z",
                  "body": "Nam molestie pellentesque dui",
                  "__typename": "Comment"
               }
            ],
            "__typename": "Post"
         }
      }));

      cy.enableMocking();

      cy.visit('http://localhost:4200');
      cy.get('#title').contains('Lorem Ipsum');
   })
})

Possibilities to set the Mock Data

Limits

Every request that is intercepted will not appear in the Network tab of the developer console.