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.
You can provide some configurations in the cypress.json file:
| key | default | description |
|---|---|---|
| graphQLEndpoint | '/graphql' |
The GraphQL Endpoint |
| graphQLMethod | 'POST' |
The HTTP Method the GraphQL requests using |
| graphQLParseRegEx | /{\s*(?<query>[\w\-]+)(?:\((?<parameter>[^\)]+)\))?(?<body>(?:.*\s)*)}/ |
This RegExp is used to parse the GraphQL query to get the query name, query parameters and body. |
Install it:
$ npm i angular-cypress-graphql-mock --save-devImport 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');
})
})| command | parameter | description |
|---|---|---|
cy.resetGraphQLMocks() |
resets the current Mocks | |
cy.addGraphQLMockMap(queryToMockFnMap) |
queryToMockFnMap: like { [query]: (request: GraphQLRequest<InputType>) => graphql Mock } |
adds all mocks given in the map to the Mocks. |
cy.addGraphQLMock(query, mockFn) |
query Query Name this mock shall apply to mockFn The mock function that shall be executed |
Adds the Mock function to the Mocks. |
cy.removeGraphQLMock(query) |
query Name of the query |
removes the mock function for the query |
Every request that is intercepted will not appear in the Network tab of the developer console.