Adds GraphQL variables integration test

test/graphql-api/variables.mocks.ts

@@ -0,0 +1,43 @@
+import { composeMocks, graphql } from 'msw'
+
+const { start } = composeMocks(
+  graphql.query({ operation: 'GetGithubUser' }, (req, res, ctx) => {
+    const { username } = req.variables
+
+    return res(
+      ctx.data({
+        user: {
+          firstName: 'John',
+          username,
+        },
+      }),
+    )
+  }),
+
+  graphql.mutation({ operation: 'DeletePost' }, (req, res, ctx) => {
+    const { postId } = req.variables
+
+    return res(
+      ctx.data({
+        deletePost: {
+          postId,
+        },
+      }),
+    )
+  }),
+
+  graphql.query({ operation: 'GetActiveUser' }, (req, res, ctx) => {
+    // Intentionally unused variable
+    const { foo } = req.variables
+
+    return res(
+      ctx.data({
+        user: {
+          id: 1,
+        },
+      }),
+    )
+  }),
+)
+
+start()

test/graphql-api/variables.test.ts

@@ -0,0 +1,120 @@
+import * as path from 'path'
+import { Response } from 'puppeteer'
+import { TestAPI, runBrowserWith } from '../support/runBrowserWith'
+import { executeOperation } from './utils/executeOperation'
+
+describe('GraphQL: Variables', () => {
+  let api: TestAPI
+
+  beforeAll(async () => {
+    api = await runBrowserWith(path.resolve(__dirname, 'variables.mocks.ts'))
+  })
+
+  afterAll(() => {
+    return api.cleanup()
+  })
+
+  describe('given a query with variables', () => {
+    let res: Response
+    let body: Record<string, any>
+
+    beforeAll(async () => {
+      res = await executeOperation(api.page, {
+        query: `
+          query GetGithubUser($username: String!) {
+            user(login: $username) {
+              firstName
+              username
+            }
+          }
+        `,
+        variables: {
+          username: 'octocat',
+        },
+      })
+      body = await res.json()
+    })
+
+    it('should return 200 status code', () => {
+      expect(res.status()).toBe(200)
+    })
+
+    it('should mock the response data', () => {
+      expect(body).toEqual({
+        data: {
+          user: {
+            firstName: 'John',
+            username: 'octocat',
+          },
+        },
+      })
+    })
+  })
+
+  describe('given a mutation with variables', () => {
+    let res: Response
+    let body: Record<string, any>
+
+    beforeAll(async () => {
+      res = await executeOperation(api.page, {
+        query: `
+          mutation DeletePost($postId: String!) {
+            deletePost(id: $postId) {
+              postId
+            }
+          }
+        `,
+        variables: {
+          postId: 'abc-123',
+        },
+      })
+      body = await res.json()
+    })
+
+    it('should return 200 status code', () => {
+      expect(res.status()).toBe(200)
+    })
+
+    it('should mock the response data', () => {
+      expect(body).toEqual({
+        data: {
+          deletePost: {
+            postId: 'abc-123',
+          },
+        },
+      })
+    })
+  })
+
+  describe('given GraphQL operation without variables', () => {
+    let res: Response
+    let body: Record<string, any>
+
+    beforeAll(async () => {
+      res = await executeOperation(api.page, {
+        query: `
+            query GetActiveUser {
+              user {
+                id
+              }
+            }
+          `,
+      })
+      body = await res.json()
+    })
+
+    it('should return 200 status code', () => {
+      expect(res.status()).toBe(200)
+    })
+
+    it('should mock the response data', () => {
+      expect(body).toEqual({
+        data: {
+          user: {
+            id: 1,
+          },
+        },
+      })
+    })
+  })
+})