Annotates queries and variables in GraphQL tests

mswjs · Feb 8, 2021 · fedf608 · fedf608
1 parent 1434c90
commit fedf608
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 46 deletions.
diff --git a/test/graphql-api/link.mocks.ts b/test/graphql-api/link.mocks.ts
@@ -3,8 +3,28 @@ import { setupWorker, graphql } from 'msw'
 const github = graphql.link('https://api.github.com/graphql')
 const stripe = graphql.link('https://api.stripe.com/graphql')
 
+interface GetUserQuery {
+  user: {
+    id: string
+    username: string
+  }
+}
+
+interface PaymentQuery {
+  bankAccount: {
+    totalFunds: number
+  }
+}
+
+interface GetUserQuery {
+  user: {
+    id: string
+    username: string
+  }
+}
+
 const worker = setupWorker(
-  github.query('GetUser', (req, res, ctx) => {
+  github.query<GetUserQuery>('GetUser', (req, res, ctx) => {
     return res(
       ctx.data({
         user: {
@@ -14,7 +34,7 @@ const worker = setupWorker(
       }),
     )
   }),
-  stripe.mutation('Payment', (req, res, ctx) => {
+  stripe.mutation<PaymentQuery>('Payment', (req, res, ctx) => {
     return res(
       ctx.data({
         bankAccount: {
@@ -23,7 +43,7 @@ const worker = setupWorker(
       }),
     )
   }),
-  graphql.query('GetUser', (req, res, ctx) => {
+  graphql.query<GetUserQuery>('GetUser', (req, res, ctx) => {
     return res(
       ctx.set('x-request-handler', 'fallback'),
       ctx.data({

diff --git a/test/graphql-api/logging.mocks.ts b/test/graphql-api/logging.mocks.ts
@@ -1,7 +1,20 @@
 import { setupWorker, graphql } from 'msw'
 
+interface GetUserDetailQuery {
+  user: {
+    firstName: string
+    lastName: string
+  }
+}
+
+interface LoginQuery {
+  user: {
+    id: string
+  }
+}
+
 const worker = setupWorker(
-  graphql.query('GetUserDetail', (req, res, ctx) => {
+  graphql.query<GetUserDetailQuery>('GetUserDetail', (req, res, ctx) => {
     return res(
       ctx.data({
         user: {
@@ -11,7 +24,7 @@ const worker = setupWorker(
       }),
     )
   }),
-  graphql.mutation('Login', (req, res, ctx) => {
+  graphql.mutation<LoginQuery>('Login', (req, res, ctx) => {
     return res(
       ctx.data({
         user: {

diff --git a/test/graphql-api/mutation.mocks.ts b/test/graphql-api/mutation.mocks.ts
@@ -1,7 +1,13 @@
 import { setupWorker, graphql } from 'msw'
 
+interface LogoutQuery {
+  logout: {
+    userSession: boolean
+  }
+}
+
 const worker = setupWorker(
-  graphql.mutation('Logout', (req, res, ctx) => {
+  graphql.mutation<LogoutQuery>('Logout', (req, res, ctx) => {
     return res(
       ctx.data({
         logout: {

diff --git a/test/graphql-api/query.mocks.ts b/test/graphql-api/query.mocks.ts
@@ -1,7 +1,14 @@
 import { setupWorker, graphql } from 'msw'
 
+interface GetUserDetailQuery {
+  user: {
+    firstName: string
+    lastName: string
+  }
+}
+
 const worker = setupWorker(
-  graphql.query('GetUserDetail', (req, res, ctx) => {
+  graphql.query<GetUserDetailQuery>('GetUserDetail', (req, res, ctx) => {
     return res(
       ctx.data({
         user: {

diff --git a/test/graphql-api/response-patching.mocks.ts b/test/graphql-api/response-patching.mocks.ts
@@ -1,8 +1,15 @@
 import { setupWorker, graphql } from 'msw'
 import { createGraphQLClient, gql } from '../support/graphql'
 
+interface GetUserQuery {
+  user: {
+    firstName: string
+    lastName: string
+  }
+}
+
 const worker = setupWorker(
-  graphql.query('GetUser', async (req, res, ctx) => {
+  graphql.query<GetUserQuery>('GetUser', async (req, res, ctx) => {
     const originalResponse = await ctx.fetch(req)
     const originalJson = await originalResponse.json()
 

diff --git a/test/graphql-api/variables.mocks.ts b/test/graphql-api/variables.mocks.ts
@@ -1,44 +1,84 @@
 import { setupWorker, graphql } from 'msw'
 
+interface GetGitHubUserQuery {
+  user: {
+    username: string
+    firstName: string
+  }
+}
+
+interface GetGitHubUserQueryVariables {
+  username: string
+}
+
+interface DeletePostQuery {
+  deletePost: {
+    postId: string
+  }
+}
+
+interface DeletePostQueryVariables {
+  postId: string
+}
+
+interface GetActiveUserQuery {
+  user: {
+    id: number
+  }
+}
+
+interface GetActiveUserQueryVariables {
+  foo: string
+}
+
 const worker = setupWorker(
-  graphql.query('GetGithubUser', (req, res, ctx) => {
-    const { username } = req.variables
-
-    return res(
-      ctx.data({
-        user: {
-          firstName: 'John',
-          username,
-        },
-      }),
-    )
-  }),
-
-  graphql.mutation('DeletePost', (req, res, ctx) => {
-    const { postId } = req.variables
-
-    return res(
-      ctx.data({
-        deletePost: {
-          postId,
-        },
-      }),
-    )
-  }),
-
-  graphql.query('GetActiveUser', (req, res, ctx) => {
-    // Intentionally unused variable
-    // eslint-disable-next-line
-    const { foo } = req.variables
-
-    return res(
-      ctx.data({
-        user: {
-          id: 1,
-        },
-      }),
-    )
-  }),
+  graphql.query<GetGitHubUserQuery, GetGitHubUserQueryVariables>(
+    'GetGithubUser',
+    (req, res, ctx) => {
+      const { username } = req.variables
+
+      return res(
+        ctx.data({
+          user: {
+            username,
+            firstName: 'John',
+          },
+        }),
+      )
+    },
+  ),
+
+  graphql.mutation<DeletePostQuery, DeletePostQueryVariables>(
+    'DeletePost',
+    (req, res, ctx) => {
+      const { postId } = req.variables
+
+      return res(
+        ctx.data({
+          deletePost: {
+            postId,
+          },
+        }),
+      )
+    },
+  ),
+
+  graphql.query<GetActiveUserQuery, GetActiveUserQueryVariables>(
+    'GetActiveUser',
+    (req, res, ctx) => {
+      // Intentionally unused variable
+      // eslint-disable-next-line
+      const { foo } = req.variables
+
+      return res(
+        ctx.data({
+          user: {
+            id: 1,
+          },
+        }),
+      )
+    },
+  ),
 )
 
 worker.start()