todo-graphql-example 
Blog posts
- Make GraphQL Calls From Cypress Tests
- Dynamic API Tests Using Cypress-Each Plugin
- Refactor Tests To Be Independent And Fast Using Cypress-Each Plugin
- Faster test execution with cypress-grep
- Add Timestamps To Cypress
Read Smart GraphQL Stubbing in Cypress. Note that with the addition of cy.intercept all extra hacks became unnecessary.
Videos
- Toggle Todo When Using GraphQL Calls
- Set GraphQL Network Intercept Alias
- Set GraphQL Operation Name As Custom Header And Use It In cy.intercept
- Add A New Item By Making GraphQL Call Using cy.request Command
- Use Application GraphQL Client To Make Calls From The Cypress Test
- Stub The Initial Data Load Using A Fixture
- Delete All Items Using GraphQL Client As Part Of Cypress Test
- Directly Spying on GraphQL Calls Made By The Application
- Dynamic Tests From Cypress.io Fixture File
- Introduction To cypress-data-session Plugin using cypress-data-session
Cypress tests
All tests are in the cypress/integration folder.
By mocking network calls using cy.intercept see the intercept-spec.js file.
Spec client-spec.js is testing making individual GraphQL calls using app's own client.
Spec ui-spec.js has simple tests that do not depend on the network, and thus are hard to write.
We can use cy.request command to make GraphQL requests ourselves, see the request-spec.js file.
We can stub the initial items load using a fixture file. See the spec file fixture-spec.js.
We delete all items in the delete-spec.js test. First we query all todo items, then delete them one by one.
We can import the list of items from a fixture file cypress/fixtures/three.json and create a dynamic test for each item, see the spec file dynamic-spec.js.
App
Start server with npm start. You can find GraphQL playground at http://localhost:3000
Example asking for all todos
query {
allTodos {
id,
title,
completed
}
}
Response
{
"data": {
"allTodos": [
{
"id": "1",
"title": "do something",
"completed": false
},
{
"id": "2",
"title": "another",
"completed": false
}
]
}
}Example creating new todo object
mutation {
createTodo(id: 2, title: "another", completed: false) {
id
}
}
Response
{
"data": {
"createTodo": {
"id": "2"
}
}
}Example asking for a single todo (notice id argument)
query {
Todo(id: 2) {
id,
title,
completed
}
}
Response
{
"data": {
"Todo": {
"id": "2",
"title": "another",
"completed": false
}
}
}Development
Backend is json-graphql-server. Front-end React code is in src folder, modeled after Getting Started With React And GraphQL post.
To start the applications and open Cypress
$ npm run dev
# starts the API, starts the web application
# when the application responds
# opens Cypress test runnerTo start the application and run headless Cypress tests
$ npm run localTypes
Look at cypress/jsconfig.json that loads all 3rd party types, and includes the link to cypress/support/index.d.ts where I describe the type for custom command cy.createTodos defined in cypress/support/index.js.