├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc ├── .travis.yml ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── client.js ├── index.js ├── registerServiceWorker.js └── test ├── client-mock.js ├── schema.js └── setup.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: rwieruch 4 | patreon: # rwieruch 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with a single custom sponsorship URL 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "trailingComma": "all", 4 | "singleQuote": true, 5 | "printWidth": 70, 6 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - stable 5 | 6 | install: 7 | - npm install 8 | 9 | script: 10 | - npm test 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-apollo-client-testing-example 2 | 3 | [![Build Status](https://travis-ci.org/the-road-to-graphql/react-apollo-client-testing-example.svg?branch=master)](https://travis-ci.org/the-road-to-graphql/react-apollo-client-testing-example) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/the-road-to-graphql/react-apollo-client-testing-example.svg)](https://greenkeeper.io/) 4 | 5 | A minimal React application using Apollo Client with a **mocked** GitHub's GraphQL API by implementing an own GraphQL schema. [Read more about it here.](https://www.robinwieruch.de/graphql-server-mock-apollo-client/) In addition, it uses the mocked GraphQL server to conduct tests for Apollo's Query and Mutation components. [Read more about it here.](https://www.robinwieruch.de/react-apollo-client-testing) 6 | 7 | ## Installation 8 | 9 | * `git clone git@github.com:the-road-to-graphql/react-apollo-client-testing-example.git` 10 | * cd react-apollo-client-testing-example 11 | * npm install 12 | * [add your own REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN in .env file](https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/) 13 | * scopes/permissions you need to check: admin:org, repo, user, notifications 14 | * npm test 15 | 16 | ## Want to learn more about React + GraphQL + Apollo? 17 | 18 | * Don't miss [upcoming Tutorials and Courses](https://www.getrevue.co/profile/rwieruch) 19 | * Check out current [React Courses](https://roadtoreact.com) 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-apollo-client-testing-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "apollo-cache-inmemory": "^1.3.6", 7 | "apollo-client": "^2.4.3", 8 | "apollo-link-http": "^1.5.5", 9 | "apollo-link-schema": "^1.1.1", 10 | "graphql": "^14.0.2", 11 | "graphql-tag": "^2.10.0", 12 | "graphql-tools": "^4.0.2", 13 | "react": "^16.6.0", 14 | "react-apollo": "^2.2.4", 15 | "react-dom": "^16.6.0", 16 | "react-scripts": "3.1.0" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | }, 24 | "devDependencies": { 25 | "enzyme": "^3.7.0", 26 | "enzyme-adapter-react-16": "^1.6.0", 27 | "sinon": "^7.0.0" 28 | }, 29 | "browserslist": [ 30 | ">0.2%", 31 | "not dead", 32 | "not ie <= 11", 33 | "not op_mini all" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-road-to-graphql/react-apollo-client-testing-example/2a5fcb4d2212ad17e3be1b9c753f9acbcbecbc7b/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .row { 2 | padding: 5px; 3 | } 4 | 5 | .row:hover { 6 | background-color: lightblue; 7 | } 8 | 9 | .row_selected { 10 | background-color: orange; 11 | } 12 | 13 | .row_selected:hover { 14 | background-color: orange; 15 | } 16 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import gql from 'graphql-tag'; 3 | import { Query, Mutation } from 'react-apollo'; 4 | 5 | import './App.css'; 6 | 7 | const GET_REPOSITORIES_OF_ORGANIZATION = gql` 8 | { 9 | organization(login: "the-road-to-learn-react") { 10 | repositories(first: 20) { 11 | edges { 12 | node { 13 | id 14 | name 15 | url 16 | viewerHasStarred 17 | } 18 | } 19 | } 20 | } 21 | } 22 | `; 23 | 24 | const STAR_REPOSITORY = gql` 25 | mutation($id: ID!) { 26 | addStar(input: { starrableId: $id }) { 27 | starrable { 28 | id 29 | viewerHasStarred 30 | } 31 | } 32 | } 33 | `; 34 | 35 | const App = () => ( 36 | 37 | {({ data: { organization }, loading }) => { 38 | if (loading || !organization) { 39 | return
Loading ...
; 40 | } 41 | 42 | return ( 43 | 44 | ); 45 | }} 46 |
47 | ); 48 | 49 | class Repositories extends React.Component { 50 | state = { 51 | selectedRepositoryIds: [], 52 | }; 53 | 54 | toggleSelectRepository = (id, isSelected) => { 55 | let { selectedRepositoryIds } = this.state; 56 | 57 | selectedRepositoryIds = isSelected 58 | ? selectedRepositoryIds.filter(itemId => itemId !== id) 59 | : selectedRepositoryIds.concat(id); 60 | 61 | this.setState({ selectedRepositoryIds }); 62 | }; 63 | 64 | render() { 65 | return ( 66 | 71 | ); 72 | } 73 | } 74 | 75 | const RepositoryList = ({ 76 | repositories, 77 | selectedRepositoryIds, 78 | toggleSelectRepository, 79 | }) => ( 80 |