Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bahmutov/todo-graphql-example
Example Todo app on top of json-graphql-server
https://github.com/bahmutov/todo-graphql-example
cypress cypress-example cypress-io example graphql todomvc
Last synced: about 2 months ago
JSON representation
Example Todo app on top of json-graphql-server
- Host: GitHub
- URL: https://github.com/bahmutov/todo-graphql-example
- Owner: bahmutov
- Created: 2018-12-12T15:19:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-27T18:46:10.000Z (3 months ago)
- Last Synced: 2024-08-27T20:47:02.082Z (3 months ago)
- Topics: cypress, cypress-example, cypress-io, example, graphql, todomvc
- Language: JavaScript
- Homepage:
- Size: 1.52 MB
- Stars: 27
- Watchers: 2
- Forks: 14
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# todo-graphql-example 
[![ci status][gh image]][gh url] [![badges status][badges image]][badges url] [](https://github.com/bahmutov/todo-graphql-example/actions/workflows/tags.yml) [![renovate-app badge][renovate-badge]][renovate-app] [](https://dashboard.cypress.io/projects/ahwxj4/runs) [](https://circleci.com/gh/bahmutov/todo-graphql-example/tree/master)
## Blog posts
- [Make GraphQL Calls From Cypress Tests](https://glebbahmutov.com/blog/request-graphql/)
- [Dynamic API Tests Using Cypress-Each Plugin](https://glebbahmutov.com/blog/dynamic-api-tests-using-cypress-each/)
- [Refactor Tests To Be Independent And Fast Using Cypress-Each Plugin](https://glebbahmutov.com/blog/refactor-using-each/)
- [Faster test execution with cypress-grep](https://glebbahmutov.com/blog/cypress-grep-filters/)
- [Add Timestamps To Cypress](https://glebbahmutov.com/blog/cypress-timestamps/)
Read [Smart GraphQL Stubbing in Cypress](https://glebbahmutov.com/blog/smart-graphql-stubbing/). Note that with the addition of [cy.intercept](https://on.cypress.io/intercept) all extra hacks became unnecessary.
## Videos
- [Toggle Todo When Using GraphQL Calls](https://www.youtube.com/watch?v=QA_moq_Yh5M)
- [Set GraphQL Network Intercept Alias](https://www.youtube.com/watch?v=jN1vsGGXAjw)
- [Set GraphQL Operation Name As Custom Header And Use It In cy.intercept](https://www.youtube.com/watch?v=AcU5mkedchM)
- [Add A New Item By Making GraphQL Call Using cy.request Command](https://www.youtube.com/watch?v=ubnJ9kWD1yQ)
- [Use Application GraphQL Client To Make Calls From The Cypress Test](https://youtu.be/6ykTS40_scM)
- [Stub The Initial Data Load Using A Fixture](https://youtu.be/IxgWmzy26gM)
- [Delete All Items Using GraphQL Client As Part Of Cypress Test](https://www.youtube.com/watch?v=l7E7K7x7V8g)
- [Directly Spying on GraphQL Calls Made By The Application](https://youtu.be/XadOqS0YNJE)
- [Dynamic Tests From Cypress.io Fixture File](https://youtu.be/EXVwvJrUGJ8)
- [Introduction To cypress-data-session Plugin](https://youtu.be/7ipCvJQixI0) using [cypress-data-session](https://github.com/bahmutov/cypress-data-session)
## Cypress tests
All tests are in the [cypress/integration](./cypress/integration) folder.
By mocking network calls using [cy.intercept](https://on.cypress.io/intercept) see the [intercept-spec.js](cypress/integration/intercept-spec.js) file.
Spec [client-spec.js](cypress/integration/client-spec.js) is testing making individual GraphQL calls using app's own client.
Spec [ui-spec.js](cypress/integration/ui-spec.js) has simple tests that do not depend on the network, and thus are hard to write.
We can use [cy.request](https://on.cypress.io/request) command to make GraphQL requests ourselves, see the [request-spec.js](./cypress/integration/request-spec.js) file.
We can stub the initial items load using a fixture file. See the spec file [fixture-spec.js](./cypress/integration/fixture-spec.js).
We delete all items in the [delete-spec.js](./cypress/integration/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](./cypress/fixtures/three.json) and create a dynamic test for each item, see the spec file [dynamic-spec.js](./cypress/integration/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
```json
{
"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
```json
{
"data": {
"createTodo": {
"id": "2"
}
}
}
```
Example asking for a single todo (notice `id` argument)
```
query {
Todo(id: 2) {
id,
title,
completed
}
}
```
Response
```json
{
"data": {
"Todo": {
"id": "2",
"title": "another",
"completed": false
}
}
}
```
## Development
Backend is [json-graphql-server](https://github.com/marmelab/json-graphql-server). Front-end React code is in [src](src) folder, modeled after [Getting Started With React And GraphQL](https://medium.com/codingthesmartway-com-blog/getting-started-with-react-and-graphql-395311c1e8da) post.
To start the applications and open Cypress
```shell
$ npm run dev
# starts the API, starts the web application
# when the application responds
# opens Cypress test runner
```
To start the application and run headless Cypress tests
```shell
$ npm run local
```
## Types
Look at [cypress/jsconfig.json](./cypress/jsconfig.json) that loads all 3rd party types, and includes the link to [cypress/support/index.d.ts](./cypress/support/index.d.ts) where I describe the type for custom command `cy.createTodos` defined in [cypress/support/index.js](./cypress/support/index.js).
## About me
- [@bahmutov](https://twitter.com/bahmutov)
- [glebbahmutov.com](https://glebbahmutov.com)
- [blog](https://glebbahmutov.com/blog)
- [videos](https://www.youtube.com/glebbahmutov)
- [presentations](https://slides.com/bahmutov)
- [cypress.tips](https://cypress.tips)
[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/
[badges image]: https://github.com/bahmutov/todo-graphql-example/workflows/badges/badge.svg?branch=master
[badges url]: https://github.com/bahmutov/todo-graphql-example/actions
[gh image]: https://github.com/bahmutov/todo-graphql-example/workflows/ci/badge.svg?branch=master
[gh url]: https://github.com/bahmutov/todo-graphql-example/actions