Add tests with apollo-mocked-provider

Author: lorensr

.eslintrc.js

@@ -2,6 +2,14 @@ module.exports = {
   extends: 'react-app',
   plugins: ['graphql'],
   parser: 'babel-eslint',
+  globals: {
+    wait: 'readonly',
+    render: 'readonly',
+    mockedRender: 'readonly',
+    ApolloMockedProvider: 'readonly',
+    ApolloErrorProvider: 'readonly',
+    ApolloLoadingProvider: 'readonly',
+  },
   rules: {
     'graphql/template-strings': [
       'error',
@@ -15,5 +23,6 @@ module.exports = {
         schemaJson: require('./spacex.json'),
       },
     ],
+    'react/jsx-no-undef': ['error', { allowGlobals: true }],
   },
 }

package-lock.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "EXTEND_ESLINT=true react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
     "eject": "react-scripts eject",
     "lint": "eslint src/",
     "update-schema": "apollo schema:download --endpoint https://api.graphql.guide/graphql schema.json",
@@ -14,15 +14,16 @@
   },
   "dependencies": {
     "@apollo/client": "^3.2.5",
+    "@graphql-tools/wrap": "^7.0.1",
     "@material-ui/core": "3.9.3",
     "@material-ui/icons": "3.0.2",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.1",
     "ajv": "6.12.3",
     "apollo": "^2.30.2",
     "apollo-cache-persist": "0.1.1",
     "apollo-link-rest": "0.8.0-beta.0",
+    "apollo-mocked-provider": "^5.0.0",
     "apollo3-cache-persist": "^0.8.0",
     "auth0-helpers": "0.4.3",
     "auth0-js": "9.13.4",
@@ -33,6 +34,7 @@
     "eslint-plugin-graphql": "4.0.0",
     "graphql": "15.3.0",
     "graphql-anywhere": "4.2.7",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
     "jss": "^9.8.7",
     "lodash": "4.17.19",
     "react": "16.13.1",

package.json

@@ -163,7 +163,7 @@ export default ({ review }) => {
           }
           action={
             user && (
-              <IconButton onClick={openMenu}>
+              <IconButton aria-label="Open menu" onClick={openMenu}>
                 <MoreVert />
               </IconButton>
             )

src/components/App.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { screen, fireEvent } from '@testing-library/react'
+
+import Reviews from './Reviews'
+
+describe('Reviews', () => {
+  it('alerts when deleting', async () => {
+    jest.spyOn(window, 'alert').mockImplementation(() => {})
+
+    mockedRender(<Reviews />, {
+      Mutation: () => ({
+        removeReview: () => {
+          throw new Error('unauthorized')
+        },
+      }),
+    })
+
+    await wait()
+    fireEvent.click(screen.getAllByRole('button', { name: 'Open menu' })[0])
+    await wait()
+    fireEvent.click(screen.getAllByRole('menuitem', { name: 'Delete' })[0])
+    await wait()
+    fireEvent.click(screen.getAllByRole('button', { name: 'Sudo delete' })[0])
+    await wait()
+    expect(window.alert).toHaveBeenCalled()
+  })
+})

src/components/Review.js

@@ -203,7 +203,11 @@ export default () => {
         <Skeleton />
       </h1>
     )
-    sectionContent = <Skeleton count={7} />
+    sectionContent = (
+      <div role="status">
+        <Skeleton count={7} />
+      </div>
+    )
   } else if (!section) {
     headerContent = (
       <h1>

src/components/Reviews.test.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { screen } from '@testing-library/react'
+
+import Section from './Section'
+
+describe('Section', () => {
+  it('should render loading status', async () => {
+    render(
+      <ApolloLoadingProvider>
+        <Section />
+      </ApolloLoadingProvider>
+    )
+
+    screen.getByRole('status')
+    await wait()
+    screen.getByRole('status')
+  })
+})

src/components/Section.js

@@ -9,14 +9,17 @@ import { SECTION_BY_ID_QUERY } from './Section'
 
 const LoadingSkeleton = () => (
   <div>
+    <div className="sr-only" role="status">
+      Loading...
+    </div>
     <h1>
       <Skeleton />
     </h1>
     <Skeleton count={4} />
   </div>
 )
 
-const CHAPTER_QUERY = gql`
+export const CHAPTER_QUERY = gql`
   query ChapterQuery {
     chapters {
       id

src/components/Section.test.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import { screen } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing'
+
+import TableOfContents, { CHAPTER_QUERY } from './TableOfContents'
+
+const mocks = [
+  {
+    request: { query: CHAPTER_QUERY },
+    result: {
+      data: {
+        chapters: [
+          {
+            id: 1,
+            number: 1,
+            title: 'mocks-title',
+            sections: [
+              {
+                id: '1',
+                number: 1,
+                title: 'Hello World',
+              },
+              {
+                id: '2',
+                number: 2,
+                title: 'Hello World',
+              },
+            ],
+          },
+          {
+            id: 2,
+            number: 2,
+            title: 'mocks-title',
+            sections: [
+              {
+                id: '3',
+                number: 3,
+                title: 'Hello World',
+              },
+              {
+                id: '4',
+                number: 4,
+                title: 'Hello World',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+]
+
+describe('TableOfContents', () => {
+  it('renders loading status and chapters', async () => {
+    mockedRender(<TableOfContents />, {
+      Chapter: () => ({
+        title: () => 'Chapter-title',
+      }),
+    })
+
+    screen.getByRole('status')
+    await wait()
+    screen.getAllByText('Chapter-title')
+  })
+
+  it('works with MockedProvider', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <TableOfContents />
+      </MockedProvider>
+    )
+
+    await wait()
+    screen.getAllByText('mocks-title')
+  })
+})

src/components/TableOfContents.js

@@ -99,6 +99,19 @@ code {
   padding: 0 5px;
 }
 
+/* hidden, for screen readers only */
+/* https://stackoverflow.com/a/19758620/627729 */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 .App-logo {
   height: 80px;
 }

src/components/TableOfContents.test.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import {
+  createApolloErrorProvider,
+  createApolloMockedProvider,
+  createApolloLoadingProvider,
+} from 'apollo-mocked-provider'
+import { ApolloLink } from '@apollo/client'
+import { printSchema, buildClientSchema } from 'graphql'
+import fs from 'fs'
+import { render, waitFor } from '@testing-library/react'
+import { createMemoryHistory } from 'history'
+import { Router } from 'react-router-dom'
+
+import '@testing-library/jest-dom/extend-expect'
+
+const responseLogger = new ApolloLink((operation, forward) => {
+  return forward(operation).map((result) => {
+    console.log(JSON.stringify(result, null, '  '))
+    return result
+  })
+})
+
+const schema = JSON.parse(fs.readFileSync('schema.json'))
+const typeDefs = printSchema(buildClientSchema(schema.data))
+const ApolloMockedProvider = createApolloMockedProvider(typeDefs, {
+  links: () => [responseLogger],
+})
+
+global.ApolloMockedProvider = ApolloMockedProvider
+global.ApolloErrorProvider = createApolloErrorProvider()
+global.ApolloLoadingProvider = createApolloLoadingProvider()
+
+const RouterWrapper = ({ children }) => {
+  const history = createMemoryHistory()
+
+  return <Router history={history}>{children}</Router>
+}
+
+global.render = (ui, options) =>
+  render(ui, { wrapper: RouterWrapper, ...options })
+
+global.mockedRender = (ui, customResolvers, options) => {
+  let id = 1
+
+  const MockedWrapper = ({ children }) => (
+    <RouterWrapper>
+      <ApolloMockedProvider
+        customResolvers={{
+          Section: () => ({
+            id: id++,
+            number: id++,
+          }),
+          ObjID: () => id++,
+          ...customResolvers,
+        }}
+      >
+        {children}
+      </ApolloMockedProvider>
+    </RouterWrapper>
+  )
+
+  return render(ui, { wrapper: MockedWrapper, ...options })
+}
+
+global.wait = () => waitFor(() => {})