Fix misleading variables printing; add failing tests for MockedProvider regarding missing/undefined variables

package.json

@@ -81,6 +81,7 @@
     "hoist-non-react-statics": "^3.3.2",
     "optimism": "^0.16.0",
     "prop-types": "^15.7.2",
+    "stringify-object": "^3.3.0",
     "symbol-observable": "^4.0.0",
     "ts-invariant": "^0.7.0",
     "tslib": "^1.10.0",
@@ -101,6 +102,7 @@
     "@types/react": "17.0.3",
     "@types/react-dom": "17.0.2",
     "@types/recompose": "0.30.7",
+    "@types/stringify-object": "^3.3.0",
     "bundlesize": "0.18.1",
     "cross-fetch": "3.1.4",
     "crypto-hash": "1.3.0",

src/utilities/testing/mocking/__tests__/MockedProvider.test.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { render, wait } from '@testing-library/react';
 import gql from 'graphql-tag';
+import { act } from 'react-dom/test-utils';
 
 import { itAsync } from '../../itAsync';
 import { MockedProvider } from '../MockedProvider';
@@ -9,6 +10,7 @@ import { DocumentNode } from 'graphql';
 import { useQuery } from '../../../../react/hooks/useQuery';
 import { InMemoryCache } from '../../../../cache/inmemory/inMemoryCache';
 import { ApolloLink } from '../../../../link/core';
+import { QueryResult } from '../../../../react/types/types';
 
 const variables = {
   username: 'mock_username'
@@ -567,3 +569,199 @@ describe('@client testing', () => {
     return wait().then(resolve, reject);
   });
 });
+
+describe('missing and undefined optional fields', () => {
+  describe('no mocks available', () => {
+    it("should print correct variables when no mocks available", async () => {
+      expect.assertions(3);
+
+      const variablesWithUndefined = {
+        username: 'other_user',
+        bar: 123,
+        thisFieldIsPresentButUndefined: undefined,
+      };
+
+      let queryResult: QueryResult<Data, Variables> | undefined;
+
+      const OptionalFieldsNoMocksAvailable: FC = () => {
+        queryResult = useQuery<Data, Variables>(query, { variables: variablesWithUndefined });
+        return null;
+      };
+
+      const link = ApolloLink.from([errorLink, new MockLink([])]);
+
+      await act(async () => {
+        render(
+          <MockedProvider link={link}>
+            <OptionalFieldsNoMocksAvailable />
+          </MockedProvider>
+        );
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+
+      expect(queryResult?.data).toBeUndefined();
+      expect(queryResult?.error?.message).toContain('No more mocked responses for the query');
+      expect(queryResult?.error?.message).toContain('thisFieldIsPresentButUndefined');
+    });
+  });
+
+  describe('mocks available', () => {
+    const queryWithOptionalInputFields: DocumentNode = gql`
+      # type Input {
+      #   required: String!
+      #   optional: String
+      # }
+      query OptionalFields($input: Input) {
+        user(input: $input) {
+          id
+        }
+      }
+    `;
+
+    const mockResult = { data: user };
+
+    type OptionalInputFieldVariables = {
+      input: {
+        required: string
+        optional?: string
+      }
+    };
+
+    const optionalUndefined: OptionalInputFieldVariables = {
+      input: {
+        required: "a",
+        optional: undefined,
+      }
+    };
+
+    const optionalMissing: OptionalInputFieldVariables = {
+      input: {
+        required: "a",
+      }
+    };
+
+
+    const mocksOptional = (mockVariables: OptionalInputFieldVariables) => [
+      {
+        request: {
+          query: queryWithOptionalInputFields,
+          variables: mockVariables,
+        },
+        result: mockResult,
+      },
+    ];
+
+    it("should load data when: undefined in input, undefined in mock", async () => {
+      expect.assertions(3);
+
+      let queryResult: QueryResult<Data, OptionalInputFieldVariables> | undefined;
+
+      const Component: FC = () => {
+        queryResult = useQuery<Data, OptionalInputFieldVariables>(queryWithOptionalInputFields, {
+          variables: optionalUndefined,
+        });
+        return null;
+      };
+
+      await act(async () => {
+        render(
+          <MockedProvider mocks={mocksOptional(optionalUndefined)}>
+            <Component />
+          </MockedProvider>
+        );
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+
+
+      expect(queryResult?.loading).toBe(false);
+      expect(queryResult?.error).toBeUndefined();
+      expect(queryResult?.data).toEqual(mockResult);
+    });
+
+    it("should load data when: undefined in input, missing in mock", async () => {
+      expect.assertions(3);
+
+      let queryResult: QueryResult<Data, OptionalInputFieldVariables> | undefined;
+
+      const Component: FC = () => {
+        queryResult = useQuery<Data, OptionalInputFieldVariables>(queryWithOptionalInputFields, {
+          variables: optionalUndefined,
+        });
+        return null;
+      };
+
+      await act(async () => {
+        render(
+          <MockedProvider mocks={mocksOptional(optionalMissing)}>
+            <Component />
+          </MockedProvider>
+        );
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+
+
+      expect(queryResult?.loading).toBe(false);
+      expect(queryResult?.error).toBeUndefined();
+      expect(queryResult?.data).toEqual(mockResult);
+    });
+
+    it("should load data when: missing in input, undefined in mock", async () => {
+      expect.assertions(3);
+
+      let queryResult: QueryResult<Data, OptionalInputFieldVariables> | undefined;
+
+      const Component: FC = () => {
+        queryResult = useQuery<Data, OptionalInputFieldVariables>(queryWithOptionalInputFields, {
+          variables: optionalMissing,
+        });
+        return null;
+      };
+
+      await act(async () => {
+        render(
+          <MockedProvider mocks={mocksOptional(optionalUndefined)}>
+            <Component />
+          </MockedProvider>
+        );
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+
+
+      expect(queryResult?.loading).toBe(false);
+      expect(queryResult?.error).toBeUndefined();
+      expect(queryResult?.data).toEqual(mockResult);
+    });
+
+    it("should load data when: missing in input, missing in mock", async () => {
+      expect.assertions(3);
+
+      let queryResult: QueryResult<Data, OptionalInputFieldVariables> | undefined;
+
+      const Component: FC = () => {
+        queryResult = useQuery<Data, OptionalInputFieldVariables>(queryWithOptionalInputFields, {
+          variables: optionalMissing,
+        });
+        return null;
+      };
+
+      await act(async () => {
+        render(
+          <MockedProvider mocks={mocksOptional(optionalMissing)}>
+            <Component />
+          </MockedProvider>
+        );
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+      });
+
+
+      expect(queryResult?.loading).toBe(false);
+      expect(queryResult?.error).toBeUndefined();
+      expect(queryResult?.data).toEqual(mockResult);
+    });
+  });
+});

src/utilities/testing/mocking/__tests__/__snapshots__/MockedProvider.test.tsx.snap

@@ -14,7 +14,9 @@ exports[`General use should error if the query in the mock and component do not
     __typename
   }
 }
-, variables: {"username":"mock_username"}]
+, variables: {
+	username: 'mock_username'
+}]
 `;
 
 exports[`General use should error if the variables do not deep equal 1`] = `
@@ -24,7 +26,10 @@ exports[`General use should error if the variables do not deep equal 1`] = `
     __typename
   }
 }
-, variables: {"username":"some_user","age":42}]
+, variables: {
+	username: 'some_user',
+	age: 42
+}]
 `;
 
 exports[`General use should error if the variables in the mock and component do not match 1`] = `
@@ -34,7 +39,9 @@ exports[`General use should error if the variables in the mock and component do
     __typename
   }
 }
-, variables: {"username":"other_user"}]
+, variables: {
+	username: 'other_user'
+}]
 `;
 
 exports[`General use should mock the data 1`] = `
@@ -74,5 +81,7 @@ exports[`General use should support custom error handling using setOnError 1`] =
     __typename
   }
 }
-, variables: {"username":"mock_username"}]
+, variables: {
+	username: 'mock_username'
+}]
 `;

src/utilities/testing/mocking/mockLink.ts

@@ -1,6 +1,7 @@
 import { print } from 'graphql';
 import { equal } from '@wry/equality';
 import { invariant } from 'ts-invariant';
+import stringifyObject from 'stringify-object'
 
 import {
   ApolloLink,
@@ -91,7 +92,7 @@ export class MockLink extends ApolloLink {
       configError = new Error(
         `No more mocked responses for the query: ${print(
           operation.query
-        )}, variables: ${JSON.stringify(operation.variables)}`
+        )}, variables: ${stringifyObject(operation.variables)}`
       );
     } else {
       this.mockedResponsesByKey[key].splice(responseIndex, 1);