Fix failing tests

Author: karthikiyengar

src/application/App.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useReactiveVar, gql, useQuery, makeVar } from "@apollo/client";
 
-import { currentScreen, Screens } from "./components/Layouts/Navigation";
+import { currentScreen } from "./components/Layouts/Navigation";
+import { Screens } from "./components/Layouts/screens";
 import { Queries } from "./components/Queries/Queries";
 import { Mutations } from "./components/Mutations/Mutations";
 import { Explorer } from "./components/Explorer/Explorer";
@@ -69,8 +70,8 @@ export const App = (): JSX.Element => {
         <Screen
           isVisible={undefined}
           navigationProps={{
-            queriesCount: data?.client?.watchedQueries?.count,
-            mutationsCount: data?.client?.mutationLog?.count,
+            queriesCount: data?.client?.watchedQueries?.count ?? 0,
+            mutationsCount: data?.client?.mutationLog?.count ?? 0,
           }}
           embeddedExplorerProps={{
             embeddedExplorerIFrame,

src/application/__tests__/App.test.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 
 import { renderWithApolloClient } from "../utilities/testing/renderWithApolloClient";
-import { currentScreen, Screens } from "../components/Layouts/Navigation";
+import { currentScreen } from "../components/Layouts/Navigation";
 import { App, reloadStatus } from "../App";
+import { Screens } from "../components/Layouts/screens";
 
 jest.mock("../components/Queries/Queries", () => ({
   Queries: ({ navigationProps }) => (
@@ -37,7 +38,7 @@ describe("<App />", () => {
 
   test("after reload, renders the Queries screen", async () => {
     currentScreen(Screens.Mutations);
-    const { getByText, debug } = renderWithApolloClient(<App />);
+    const { getByText } = renderWithApolloClient(<App />);
     const element = getByText("Mutations (0)");
     expect(element).toBeInTheDocument();
     await waitFor(() => {

src/application/components/Cache/__tests__/Cache.test.tsx

@@ -3,7 +3,7 @@ import { within, waitFor, fireEvent } from "@testing-library/react";
 
 import { Cache } from "../Cache";
 import { renderWithApolloClient } from "../../../utilities/testing/renderWithApolloClient";
-import { client, writeData } from "../../../index";
+import { client, currentClient, writeData } from "../../../index";
 
 const CACHE_DATA = {
   "Result:1": {
@@ -65,15 +65,20 @@ describe("Cache component tests", () => {
 
   describe("With cache data", () => {
     beforeEach(() => {
-      client.resetStore();
-
+      const clientId = "client-1";
+      currentClient(clientId);
       writeData({
+        id: clientId,
         queries: [],
         mutations: [],
         cache: JSON.stringify(CACHE_DATA),
       });
     });
 
+    afterEach(() => {
+      client.resetStore();
+    });
+
     it("should show list of root cache ids in the sidebar", () => {
       const { getByTestId } = renderWithApolloClient(
         <Cache navigationProps={navigationProps} />
@@ -122,7 +127,10 @@ describe("Cache component tests", () => {
     const selectedMainStyles = "background-color: yellow";
 
     beforeEach(() => {
+      const clientId = "client-1";
+      currentClient(clientId);
       writeData({
+        id: clientId,
         queries: [],
         mutations: [],
         cache: JSON.stringify(CACHE_DATA),

src/application/components/Layouts/Navigation.tsx

@@ -7,13 +7,7 @@ import { rem } from "polished";
 import { colors } from "@apollo/space-kit/colors";
 import { ApolloLogo } from "@apollo/space-kit/icons/ApolloLogo";
 import { clients, currentClient } from "../..";
-
-export enum Screens {
-  Cache = "cache",
-  Queries = "queries",
-  Mutations = "mutations",
-  Explorer = "explorer",
-}
+import { Screens } from "./screens";
 
 type NavButtonProps = {
   isSelected: boolean;

src/application/components/Layouts/screens.ts

@@ -0,0 +1,6 @@
+export enum Screens {
+  Cache = "cache",
+  Queries = "queries",
+  Mutations = "mutations",
+  Explorer = "explorer",
+}

src/application/components/Mutations/__tests__/Mutations.test.tsx

@@ -3,22 +3,27 @@ import { within, waitFor } from "@testing-library/react";
 import user from "@testing-library/user-event";
 
 import { renderWithApolloClient } from "../../../utilities/testing/renderWithApolloClient";
-import { client, GET_MUTATIONS } from "../../../index";
+import { client, currentClient, GET_MUTATIONS } from "../../../index";
 import { Mutations } from "../Mutations";
 
 jest.mock("../MutationViewer", () => ({
   MutationViewer: () => null,
 }));
 
+
+const clientId = "client-1";
+
 describe("<Mutations />", () => {
   const mutations = [
     {
       id: 0,
+      clientId,
       __typename: "Mutation",
       name: null,
     },
     {
       id: 1,
+      clientId,
       __typename: "Mutation",
       name: "AddColorToFavorites",
     },
@@ -34,14 +39,22 @@ describe("<Mutations />", () => {
   });
 
   test("queries render in the sidebar", async () => {
+    currentClient(clientId);
     client.writeQuery({
       query: GET_MUTATIONS,
       data: {
-        mutationLog: {
-          mutations,
-          count: mutations.length,
-        },
+        client: {
+          id: clientId,
+          __typename: "Client",
+          mutationLog: {
+            mutations,
+            count: mutations.length,
+          },
+        }
       },
+      variables: {
+        clientId
+      }
     });
 
     const { getByTestId } = renderWithApolloClient(
@@ -63,14 +76,22 @@ describe("<Mutations />", () => {
   });
 
   test("renders query name", async () => {
+    currentClient(clientId)
     client.writeQuery({
       query: GET_MUTATIONS,
       data: {
-        mutationLog: {
-          mutations,
-          count: mutations.length,
-        },
+        client: {
+          id: clientId,
+          __typename: "Client",
+          mutationLog: {
+            mutations,
+            count: mutations.length,
+          }
+        }
       },
+      variables: {
+        clientId
+      }
     });
 
     const { getByTestId } = renderWithApolloClient(

src/application/components/Queries/RunInExplorerButton.tsx

@@ -7,7 +7,8 @@ import {
   postMessageToEmbed,
   SET_OPERATION,
 } from "../Explorer/postMessageHelpers";
-import { currentScreen, Screens } from "../Layouts/Navigation";
+import { currentScreen } from "../Layouts/Navigation";
+import { Screens } from "../Layouts/screens";
 
 interface RunInExplorerButtonProps {
   operation: string;

src/application/components/Queries/__tests__/Queries.test.tsx

@@ -3,23 +3,27 @@ import { within, waitFor } from "@testing-library/react";
 import user from "@testing-library/user-event";
 
 import { renderWithApolloClient } from "../../../utilities/testing/renderWithApolloClient";
-import { client, GET_QUERIES } from "../../../index";
+import { client, currentClient, GET_QUERIES } from "../../../index";
 import { Queries } from "../Queries";
 
 jest.mock("../QueryViewer", () => ({
   QueryViewer: () => null,
 }));
 
+const clientId = "client-1";
+
 describe("<Queries />", () => {
   const queries = [
     {
       id: 0,
       __typename: "WatchedQuery",
+      clientId,
       name: null,
     },
     {
       id: 1,
       __typename: "WatchedQuery",
+      clientId,
       name: "GetColors",
     },
   ];
@@ -34,14 +38,22 @@ describe("<Queries />", () => {
   });
 
   test("queries render in the sidebar", async () => {
+    currentClient(clientId);
     client.writeQuery({
       query: GET_QUERIES,
       data: {
-        watchedQueries: {
-          queries,
-          count: queries.length,
+        client: {
+          id: clientId,
+          __typename: "Client",
+          watchedQueries: {
+            queries,
+            count: queries.length,
+          },
         },
       },
+      variables: {
+        clientId,
+      },
     });
 
     const { getByTestId } = renderWithApolloClient(
@@ -61,14 +73,22 @@ describe("<Queries />", () => {
   });
 
   test("renders query name", async () => {
+    currentClient(clientId);
     client.writeQuery({
       query: GET_QUERIES,
       data: {
-        watchedQueries: {
-          queries,
-          count: queries.length,
+        client: {
+          id: clientId,
+          __typename: "Client",
+          watchedQueries: {
+            queries,
+            count: queries.length,
+          },
         },
       },
+      variables: {
+        clientId,
+      },
     });
 
     const { getByTestId } = renderWithApolloClient(