e2e test cypress-graphql-mock-network

Author: Fi1osof

.github/workflows/node.js.yml

@@ -24,6 +24,6 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: yarn
+    - run: yarn --ignore-engines
     - run: yarn build
     - run: yarn test:all --updateSnapshot

e2e/App/index.e2e-test.ts

@@ -1,10 +1,21 @@
 import { expect } from 'chai'
+import { initMockServer } from '../mock'
 
 describe('App', () => {
+  beforeEach(() => {
+    initMockServer({
+      authed: false,
+    })
+  })
+
   before(() => {
     cy.visit('/')
   })
 
+  after(() => {
+    cy.mockNetworkReset()
+  })
+
   describe('Load App', () => {
     it('Check content', () => {
       cy.contains('#__next > h2', 'My awesome component')
@@ -14,6 +25,51 @@ describe('App', () => {
       })
     })
   })
+
+  describe('Test mock API', () => {
+    it('Mock API', () => {
+      cy.mockNetworkAdd({
+        Query: () => ({
+          me: () => {
+            return {
+              id: 'test-user-1',
+              username: 'test-user',
+              fullname: 'Test User',
+            }
+          },
+        }),
+      })
+
+      return fetch('/api', {
+        method: 'POST',
+        body: JSON.stringify(
+          {
+            query: `
+              query me {
+                me {
+                  id
+                }
+              }
+            `,
+            variables: {},
+          },
+          undefined,
+          2
+        ),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+        .then(async (r) => {
+          const response = await r.json()
+          return response
+        })
+        .then((result) => {
+          expect(result.data).not.undefined
+          expect(result.data?.me).not.null
+        })
+    })
+  })
 })
 
 export default true

e2e/mock/index.ts

@@ -0,0 +1,62 @@
+import 'cypress-graphql-mock-network'
+import { MockNetworkOptions } from 'cypress-graphql-mock-network'
+
+type initMockServerProps = Omit<MockNetworkOptions, 'schema'> & {
+  /**
+   * If false, me query returns null
+   */
+  authed?: boolean
+}
+
+export const initMockServer = (props?: initMockServerProps) => {
+  const mocks: initMockServerProps['mocks'] = {
+    ...((props && props.mocks) || {}),
+  }
+
+  if (props?.authed === false) {
+    mocks.Query = (source, args, ctx, info) => {
+      const fields = {
+        me: () => {
+          return null
+        },
+        usersConnection: () => {
+          return {
+            aggregate: {
+              count: 0,
+            },
+            edges: [],
+          }
+        },
+      }
+
+      if (props && props.mocks && props.mocks.Query) {
+        Object.assign(fields, props.mocks.Query(source, args, ctx, info))
+      }
+
+      return fields
+    }
+  }
+
+  const schema = `
+    type User {
+      id: String!
+    }
+    
+    type Query {
+      me: User!
+    }
+  `
+
+  return cy.mockNetwork({
+    schema,
+    mocks: {
+      DateTime: () => {
+        return new Date()
+      },
+      Json: () => {
+        return {}
+      },
+      ...mocks,
+    },
+  })
+}

e2e/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    // https://github.com/scottohara/loot/issues/185
+    "target": "ES2019"
+  }
+}

package.json

@@ -49,7 +49,6 @@
     "@testing-library/react-hooks": "^3.4.2",
     "@testing-library/user-event": "^12.1.10",
     "@types/chai": "^4.2.14",
-    "@types/cypress": "^1.1.3",
     "@types/express": "^4.17.9",
     "@types/http-proxy-middleware": "^0.19.3",
     "@types/jest": "^26.0.15",
@@ -62,7 +61,8 @@
     "chai": "^4.2.0",
     "cross-env": "^7.0.2",
     "css-loader": "^5.0.1",
-    "cypress": "^6.2.0",
+    "cypress": "^9.5.3",
+    "cypress-graphql-mock-network": "^0.2.2",
     "dotenv": "^8.2.0",
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.10.1",
@@ -72,6 +72,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "http-proxy-middleware": "^1.0.6",
     "husky": "^4.3.0",
+    "immer": "^9.0.12",
     "jest": "^26.6.3",
     "jest-styled-components": "^7.0.3",
     "jest-watch-typeahead": "^0.5.0",
@@ -93,7 +94,9 @@
     "typescript": "^4.5.2",
     "typescript-styled-plugin": "^0.15.0"
   },
-  "resolutions": {},
+  "resolutions": {
+    "immer": "^9.0.12"
+  },
   "browserslist": {
     "production": [
       ">0.2%",