Fix failing tests

Author: karthikiyengar

src/application/App.tsx

@@ -9,6 +9,7 @@ import { Cache } from "./components/Cache/Cache";
 import { clients, currentClient } from ".";
 
 export const reloadStatus = makeVar<boolean>(false);
+console.log(Screens)
 
 const screens = {
   [Screens.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

@@ -37,7 +37,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": {
@@ -66,8 +66,10 @@ 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),
@@ -122,7 +124,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/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/__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(