From be91af53f951c11c95babb2e8cab1ff0455e51b1 Mon Sep 17 00:00:00 2001 From: Karthik Iyengar Date: Wed, 15 Feb 2023 12:27:42 +0100 Subject: [PATCH 1/2] Draft: Add support for inspecting multiple iframes --- package-lock.json | 11 ++ package.json | 1 + src/application/App.tsx | 42 ++++-- src/application/components/Cache/Cache.tsx | 20 ++- .../components/Layouts/Navigation.tsx | 18 +++ .../components/Mutations/Mutations.tsx | 52 ++++--- .../components/Queries/Queries.tsx | 64 +++++--- src/application/index.tsx | 142 +++++++++++++----- src/extension/background/background.ts | 17 ++- src/extension/devtools/devtools.ts | 10 +- src/extension/manifest.json | 3 +- src/extension/tab/hook.ts | 5 +- 12 files changed, 275 insertions(+), 110 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2a7d26211..8368be1e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@emotion/cache": "^11.1.3", "@emotion/react": "^11.1.5", "@reach/tabs": "^0.18.0", + "cuid": "^2.1.8", "framer-motion": "^3.6.2", "graphql": "^15.5.0", "graphql-tag": "^2.11.0", @@ -7117,6 +7118,11 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz", "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==" }, + "node_modules/cuid": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/cuid/-/cuid-2.1.8.tgz", + "integrity": "sha512-xiEMER6E7TlTPnDxrM4eRiC6TRgjNX9xzEZ5U/Se2YJKr7Mq4pJn/2XEHjl3STcSh96GmkHPcBXLES8M29wyyg==" + }, "node_modules/dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", @@ -24427,6 +24433,11 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz", "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==" }, + "cuid": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/cuid/-/cuid-2.1.8.tgz", + "integrity": "sha512-xiEMER6E7TlTPnDxrM4eRiC6TRgjNX9xzEZ5U/Se2YJKr7Mq4pJn/2XEHjl3STcSh96GmkHPcBXLES8M29wyyg==" + }, "dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", diff --git a/package.json b/package.json index 5bd515cfb..c9377ab54 100755 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@emotion/cache": "^11.1.3", "@emotion/react": "^11.1.5", "@reach/tabs": "^0.18.0", + "cuid": "^2.1.8", "framer-motion": "^3.6.2", "graphql": "^15.5.0", "graphql-tag": "^2.11.0", diff --git a/src/application/App.tsx b/src/application/App.tsx index 6bc9d3b2d..91897e616 100644 --- a/src/application/App.tsx +++ b/src/application/App.tsx @@ -6,6 +6,7 @@ import { Queries } from "./components/Queries/Queries"; import { Mutations } from "./components/Mutations/Mutations"; import { Explorer } from "./components/Explorer/Explorer"; import { Cache } from "./components/Cache/Cache"; +import { clients, currentClient } from "."; export const reloadStatus = makeVar(false); @@ -16,19 +17,35 @@ const screens = { [Screens.Cache]: Cache, }; -const GET_OPERATION_COUNTS = gql` - query GetOperationCounts { - watchedQueries @client { - count - } - mutationLog @client { - count +export const GET_OPERATION_COUNTS = gql` + query GetOperationCounts($clientId: ID!) { + client(id: $id) @client { + watchedQueries { + queries { + id + } + count + } + mutationLog { + count + } } } `; export const App = (): JSX.Element => { - const { data } = useQuery(GET_OPERATION_COUNTS); + const selectedClient = useReactiveVar(currentClient) + const allClients = useReactiveVar(clients); + + if (allClients.length > 0 && !selectedClient) { + currentClient(allClients[0]) + } + + const { data } = useQuery(GET_OPERATION_COUNTS, { + variables: { + id: selectedClient + }, + }); const selected = useReactiveVar(currentScreen); const reloading = useReactiveVar(reloadStatus); const [embeddedExplorerIFrame, setEmbeddedExplorerIFrame] = useState(null); @@ -52,8 +69,8 @@ export const App = (): JSX.Element => { { { ); }; + diff --git a/src/application/components/Cache/Cache.tsx b/src/application/components/Cache/Cache.tsx index 1220fd7b3..add3b8a3e 100644 --- a/src/application/components/Cache/Cache.tsx +++ b/src/application/components/Cache/Cache.tsx @@ -2,7 +2,7 @@ import { Fragment, useState } from "react"; import { jsx, css } from "@emotion/react"; -import { gql, useQuery } from "@apollo/client"; +import { gql, useQuery, useReactiveVar } from "@apollo/client"; import { rem } from "polished"; import { colors } from "@apollo/space-kit/colors"; @@ -11,6 +11,7 @@ import { Search } from "./sidebar/Search"; import { EntityList } from "./sidebar/EntityList"; import { EntityView } from "./main/EntityView"; import { Loading } from "./common/Loading"; +import { currentClient } from "../.."; const { Header, Sidebar, Main, Content } = SidebarLayout; @@ -39,8 +40,10 @@ const noDataStyles = css` `; const GET_CACHE = gql` - query GetCache { - cache @client + query GetCache($clientId: ID!) { + client(id: $clientId) @client { + cache + } } `; @@ -52,12 +55,17 @@ export function Cache({ navigationProps }: { }): jsx.JSX.Element { const [searchResults, setSearchResults] = useState({}); const [cacheId, setCacheId] = useState("ROOT_QUERY"); + const selectedClient = useReactiveVar(currentClient); - const { loading, data } = useQuery(GET_CACHE); + const { loading, data } = useQuery(GET_CACHE, { + variables: { + clientId: selectedClient + } + }); let parsedData: Record = {}; - if (!loading && data && data.cache) { - parsedData = JSON.parse(data.cache); + if (!loading && data && data?.client?.cache) { + parsedData = JSON.parse(data.client.cache); } const dataExists = parsedData && Object.keys(parsedData).length > 0; diff --git a/src/application/components/Layouts/Navigation.tsx b/src/application/components/Layouts/Navigation.tsx index 84a07146f..ce70dfc95 100644 --- a/src/application/components/Layouts/Navigation.tsx +++ b/src/application/components/Layouts/Navigation.tsx @@ -6,6 +6,7 @@ import { jsx, css } from "@emotion/react"; 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", @@ -101,8 +102,14 @@ export const Navigation: React.FC = ({ mutationsCount, }) => { const selected = useReactiveVar(currentScreen); + const allClients = useReactiveVar(clients) + const selectedClient = useReactiveVar(currentClient); + const isSelected = (NavButton: Screens) => selected === NavButton; const onNavigate = (screen: Screens) => currentScreen(screen); + const handleClientChange = (event: React.ChangeEvent) => { + currentClient(event.target.value) + } return ( ); diff --git a/src/application/components/Mutations/Mutations.tsx b/src/application/components/Mutations/Mutations.tsx index bcf0051e4..8c479541c 100644 --- a/src/application/components/Mutations/Mutations.tsx +++ b/src/application/components/Mutations/Mutations.tsx @@ -2,7 +2,7 @@ import { Fragment, useState } from "react"; import { jsx } from "@emotion/react"; -import { gql, useQuery } from "@apollo/client"; +import { gql, useQuery, useReactiveVar } from "@apollo/client"; import { List } from "@apollo/space-kit/List"; import { ListItem } from "@apollo/space-kit/ListItem"; @@ -16,25 +16,30 @@ import { listStyles, } from "../Queries/Queries"; import { MutationViewer } from "./MutationViewer"; +import { currentClient } from "../.."; const GET_MUTATIONS = gql` - query GetMutations { - mutationLog @client { - mutations { - id - name + query GetMutations($clientId: ID!) { + client(id: $clientId) { + mutationLog { + mutations { + id + name + } } } } `; const GET_SELECTED_MUTATION = gql` - query GetSelectedMutation($id: ID!) { - mutation(id: $id) @client { - id - name - mutationString - variables + query GetSelectedMutation($clientId: ID!, $id: ID!) { + client(id: $clientId) { + mutation(id: $id) @client { + id + name + mutationString + variables + } } } `; @@ -49,14 +54,19 @@ export const Mutations = ({ navigationProps, embeddedExplorerProps }: { } }): jsx.JSX.Element => { const [selected, setSelected] = useState(0); + const selectedClient = useReactiveVar(currentClient) const theme = useTheme(); - const { data } = useQuery(GET_MUTATIONS); + const { data } = useQuery(GET_MUTATIONS, { + variables: { + clientId: selectedClient + } + }); const { data: selectedMutationData } = useQuery(GET_SELECTED_MUTATION, { - variables: { id: selected }, + variables: { clientId: selectedClient, id: selected }, returnPartialData: true, }); - const shouldRender = !!data?.mutationLog?.mutations?.length; + const shouldRender = !!data?.client?.mutationLog?.mutations?.length; return ( @@ -69,7 +79,7 @@ export const Mutations = ({ navigationProps, embeddedExplorerProps }: { selectedColor={theme.sidebarSelected} hoverColor={theme.sidebarHover} > - {data?.mutationLog?.mutations.map(({ name, id }) => { + {data?.client?.mutationLog?.mutations.map(({ name, id }) => { return ( {shouldRender && ( -

{selectedMutationData?.mutation.name}

+

{selectedMutationData?.client?.mutation?.name}

Mutation @@ -99,8 +109,8 @@ export const Mutations = ({ navigationProps, embeddedExplorerProps }: { {shouldRender && ( )} diff --git a/src/application/components/Queries/Queries.tsx b/src/application/components/Queries/Queries.tsx index e0bebbbbf..0c226b316 100644 --- a/src/application/components/Queries/Queries.tsx +++ b/src/application/components/Queries/Queries.tsx @@ -1,9 +1,10 @@ /** @jsx jsx */ +import React, { useEffect } from "react" import { Fragment, useState } from "react"; import { jsx, css } from "@emotion/react"; import { rem } from "polished"; -import { gql, useQuery } from "@apollo/client"; +import { gql, useApolloClient, useQuery, makeVar, useReactiveVar } from "@apollo/client"; import { List } from "@apollo/space-kit/List"; import { ListItem } from "@apollo/space-kit/ListItem"; import { colors } from "@apollo/space-kit/colors"; @@ -12,6 +13,7 @@ import { useTheme } from "../../theme"; import { SidebarLayout } from "../Layouts/SidebarLayout"; import { RunInExplorerButton } from "./RunInExplorerButton"; import { QueryViewer } from "./QueryViewer"; +import { clients, currentClient } from "../.."; export const sidebarHeadingStyles = css` margin-left: ${rem(12)}; @@ -48,24 +50,30 @@ export const listStyles = css` `; const GET_WATCHED_QUERIES = gql` - query GetWatchedQueries { - watchedQueries @client { - queries { - id - name + query GetWatchedQueries($clientId: ID!) { + client(id: $clientId) @client { + watchedQueries @client { + queries { + id + name + } } } } `; const GET_WATCHED_QUERY = gql` - query GetWatchedQuery($id: ID!) { - watchedQuery(id: $id) @client { - id - name - queryString - variables - cachedData + query GetWatchedQuery($clientId: ID!, $id: ID!) { + client(id: $clientId) @client { + watchedQuery(id: $id) { + count + id + name + queryString + variables + cachedData + clientId + } } } `; @@ -79,15 +87,25 @@ export const Queries = ({ navigationProps, embeddedExplorerProps }: { embeddedExplorerIFrame: HTMLIFrameElement | null, } }): jsx.JSX.Element => { + const selectedClient = useReactiveVar(currentClient) const [selected, setSelected] = useState(0); const theme = useTheme(); - const { data } = useQuery(GET_WATCHED_QUERIES); + + const { data } = useQuery(GET_WATCHED_QUERIES, { + variables: { + clientId: selectedClient + }, + }); + const { data: watchedQueryData } = useQuery(GET_WATCHED_QUERY, { - variables: { id: selected }, + variables: { + clientId: selectedClient, + id: selected + }, returnPartialData: true, }); - const shouldRender = !!data?.watchedQueries?.queries?.length; + const shouldRender = !!data?.client?.watchedQueries?.queries?.length; return ( @@ -100,7 +118,7 @@ export const Queries = ({ navigationProps, embeddedExplorerProps }: { selectedColor={theme.sidebarSelected} hoverColor={theme.sidebarHover} > - {data?.watchedQueries?.queries.map(({ name, id }) => { + {data?.client?.watchedQueries?.queries.map(({ name, id }) => { return ( {shouldRender && ( -

{watchedQueryData?.watchedQuery?.name}

+

{watchedQueryData?.client?.watchedQuery?.name}

Query @@ -130,9 +148,9 @@ export const Queries = ({ navigationProps, embeddedExplorerProps }: { {shouldRender && ( )} diff --git a/src/application/index.tsx b/src/application/index.tsx index 40fb2bf88..30f1808d9 100755 --- a/src/application/index.tsx +++ b/src/application/index.tsx @@ -20,23 +20,33 @@ import { App, reloadStatus } from "./App"; import "@apollo/space-kit/reset.css"; -const cache = new InMemoryCache({ +const queryCacheMap = new Map(); + +const inMemoryCache = new InMemoryCache({ typePolicies: { WatchedQuery: { + keyFields: ["id", "clientId"], fields: { name(_) { return _ ?? "Unnamed"; }, + clientId(_) { + return _ + } }, }, Mutation: { + keyFields: ["id", "clientId"], fields: { name(_) { return _ ?? "Unnamed"; }, + clientId(_) { + return _ + } }, }, - Query: { + Client: { fields: { watchedQueries(_ = { queries: [], count: 0 }) { return _; @@ -44,56 +54,74 @@ const cache = new InMemoryCache({ mutationLog(_ = { mutations: [], count: 0 }) { return _; }, - watchedQuery(_, { toReference, args, canRead }) { + watchedQuery(_, { toReference, variables, canRead }) { const ref = toReference({ __typename: "WatchedQuery", - id: args?.id, + id: variables?.id, + clientId: variables?.clientId }); return canRead(ref) ? ref : _; }, - mutation(_, { toReference, args }) { + mutation(_, { toReference, variables }) { return toReference({ __typename: "Mutation", - id: args?.id, + id: variables?.id, + clientId: variables?.clientId }); }, - cache() { - return cacheVar(); + cache(_, { variables }) { + const cacheVar = queryCacheMap.get(variables?.clientId); + return cacheVar && cacheVar() + }, + } + }, + Query: { + fields: { + client: { + read(_) { + return _ + } }, }, }, }, }); -const cacheVar = makeVar(null); export const client = new ApolloClient({ - cache, + cache: inMemoryCache, }); + export const GET_QUERIES = gql` - query GetQueries { - watchedQueries @client { - queries { - name - queryString - variables - cachedData + query GetQueries($clientId: ID!) { + client(id: $clientId) @client { + watchedQueries { + queries { + name + clientId + queryString + variables + cachedData + } + count } - count } } `; export const GET_MUTATIONS = gql` - query GetMutations { - mutationLog @client { - mutations { - name - mutationString - variables + query GetMutations($clientId: ID!) { + client(id: $clientId) @client { + mutationLog { + mutations { + name + clientId + mutationString + variables + } + count } - count } } `; @@ -147,44 +175,84 @@ export function getMutationData(mutation, key: number): Mutation | undefined { }; } -export const writeData = ({ queries, mutations, cache }) => { +export const clients = makeVar([]) +export const currentClient = makeVar(null); + +export const writeData = ({ id, queries, mutations, cache }) => { + const registeredClients = clients(); + if (!registeredClients.includes(id)) { + clients([...registeredClients, id]) + } + const filteredQueries: WatchedQuery[] = queries .map((q, i: number) => getQueryData(q, i)) - .filter(Boolean); + .filter(Boolean) + .map(data => { + return { ...data, clientId: id } + }) client.writeQuery({ query: GET_QUERIES, data: { - watchedQueries: { - queries: filteredQueries, - count: filteredQueries.length, - }, + client: { + id: id, + __typename: "Client", + watchedQueries: { + queries: filteredQueries, + count: filteredQueries.length, + }, + } }, + variables: { + clientId: id + } }); const mappedMutations: Mutation[] = mutations.map((m, i: number) => getMutationData(m, i) - ); + ) + .filter(Boolean) + .map(data => { + return { ...data, clientId: id } + }) + client.writeQuery({ query: GET_MUTATIONS, data: { - mutationLog: { - mutations: mappedMutations, - count: mappedMutations.length, - }, + client: { + id, + __typename: "Client", + mutationLog: { + mutations: mappedMutations, + count: mappedMutations.length, + }, + } }, + variables: { + clientId: id + } }); + + const cacheVar = queryCacheMap.get(id) ?? makeVar(null); cacheVar(cache); + queryCacheMap.set(id, cacheVar) }; +const reset = () => { + clients([]) + currentClient(null) + queryCacheMap.clear(); + client.resetStore(); +} + export const handleReload = () => { reloadStatus(true); }; export const handleReloadComplete = () => { reloadStatus(false); - client.resetStore(); + reset(); }; export const AppProvider = () => { diff --git a/src/extension/background/background.ts b/src/extension/background/background.ts index 64779c781..fd81e6246 100644 --- a/src/extension/background/background.ts +++ b/src/extension/background/background.ts @@ -1,6 +1,6 @@ import Relay from '../../Relay'; -import { - REQUEST_TAB_ID, +import { + REQUEST_TAB_ID, } from '../constants'; // This sends the tab id to the inspected tab. @@ -14,9 +14,18 @@ const background = new Relay(); chrome.runtime.onConnect.addListener(port => { background.addConnection(port.name, message => { - port.postMessage(message); + try { + port.postMessage(message); + } catch { + /* + * With multiple frames, we receive a onDisconnect event twice, + * resulting in stale ports. Without the try/catch, we drop + * legitimate messages as well. + */ + console.error('Error sending message to ' + port.name) + } }); - + port.onMessage.addListener(message => { background.broadcast(message); }); diff --git a/src/extension/devtools/devtools.ts b/src/extension/devtools/devtools.ts index adb6b8cfc..46a805a3d 100755 --- a/src/extension/devtools/devtools.ts +++ b/src/extension/devtools/devtools.ts @@ -56,7 +56,7 @@ devtools.listen(CREATE_DEVTOOLS_PANEL, ({ payload }) => { "panel.html", function (panel) { isPanelCreated = true; - const { queries, mutations, cache } = JSON.parse(payload); + const { id, queries, mutations, cache } = JSON.parse(payload); let removeUpdateListener; let removeExplorerForward; let removeSubscriptionTerminationListener; @@ -81,15 +81,15 @@ devtools.listen(CREATE_DEVTOOLS_PANEL, ({ payload }) => { if (!isAppInitialized) { initialize(); - writeData({ queries, mutations, cache: JSON.stringify(cache) }); + writeData({ id, queries, mutations, cache: JSON.stringify(cache) }); isAppInitialized = true; } clearRequestInterval = startRequestInterval(); removeUpdateListener = devtools.listen(UPDATE, ({ payload }) => { - const { queries, mutations, cache } = JSON.parse(payload); - writeData({ queries, mutations, cache: JSON.stringify(cache) }); + const { id, queries, mutations, cache } = JSON.parse(payload); + writeData({ id, queries, mutations, cache: JSON.stringify(cache) }); }); // Add connection so client can send to `background:devtools-${inspectedTabId}:explorer` @@ -138,4 +138,4 @@ devtools.listen(CREATE_DEVTOOLS_PANEL, ({ payload }) => { } }); -sendMessageToClient(DEVTOOLS_INITIALIZED); \ No newline at end of file +sendMessageToClient(DEVTOOLS_INITIALIZED); diff --git a/src/extension/manifest.json b/src/extension/manifest.json index 5a223058d..a713dba66 100755 --- a/src/extension/manifest.json +++ b/src/extension/manifest.json @@ -19,7 +19,8 @@ { "matches": [""], "js": ["tab.js"], - "run_at": "document_start" + "run_at": "document_start", + "all_frames": true } ], "manifest_version": 2 diff --git a/src/extension/tab/hook.ts b/src/extension/tab/hook.ts index 3df74634d..95a062b5e 100755 --- a/src/extension/tab/hook.ts +++ b/src/extension/tab/hook.ts @@ -6,7 +6,7 @@ import { ApolloClient, ApolloError, NetworkStatus } from "@apollo/client"; import gql from "graphql-tag"; import Observable from "zen-observable"; import { OperationDefinitionNode } from "graphql/language"; - +import cuid from "cuid" import { version as devtoolsVersion } from "../manifest.json"; import Relay from "../../Relay"; import { @@ -47,6 +47,8 @@ type Hook = { getCache: () => void; }; +const apolloClientId = cuid(); + function initializeHook() { const hook: Hook = { ApolloClient: undefined, @@ -105,6 +107,7 @@ function initializeHook() { sendMessageToTab( eventName, JSON.stringify({ + id: apolloClientId, queries: hook.getQueries(), mutations: hook.getMutations(), cache: hook.getCache(), From c0b0c99e5ded35a9d883868f45ee653c620b0844 Mon Sep 17 00:00:00 2001 From: Karthik Iyengar Date: Fri, 13 Jan 2023 17:39:16 +0530 Subject: [PATCH 2/2] Fix failing tests --- src/application/App.tsx | 7 ++-- src/application/__tests__/App.test.tsx | 5 ++- .../components/Cache/__tests__/Cache.test.tsx | 14 +++++-- .../components/Layouts/Navigation.tsx | 8 +--- src/application/components/Layouts/screens.ts | 6 +++ .../Mutations/__tests__/Mutations.test.tsx | 39 ++++++++++++++----- .../Queries/RunInExplorerButton.tsx | 3 +- .../Queries/__tests__/Queries.test.tsx | 34 ++++++++++++---- 8 files changed, 84 insertions(+), 32 deletions(-) create mode 100644 src/application/components/Layouts/screens.ts diff --git a/src/application/App.tsx b/src/application/App.tsx index 91897e616..52dd55bd8 100644 --- a/src/application/App.tsx +++ b/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 => { ({ Queries: ({ navigationProps }) => ( @@ -37,7 +38,7 @@ describe("", () => { test("after reload, renders the Queries screen", async () => { currentScreen(Screens.Mutations); - const { getByText, debug } = renderWithApolloClient(); + const { getByText } = renderWithApolloClient(); const element = getByText("Mutations (0)"); expect(element).toBeInTheDocument(); await waitFor(() => { diff --git a/src/application/components/Cache/__tests__/Cache.test.tsx b/src/application/components/Cache/__tests__/Cache.test.tsx index 7d23c93e9..aff36227e 100644 --- a/src/application/components/Cache/__tests__/Cache.test.tsx +++ b/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( @@ -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), diff --git a/src/application/components/Layouts/Navigation.tsx b/src/application/components/Layouts/Navigation.tsx index ce70dfc95..5c9a797c3 100644 --- a/src/application/components/Layouts/Navigation.tsx +++ b/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; diff --git a/src/application/components/Layouts/screens.ts b/src/application/components/Layouts/screens.ts new file mode 100644 index 000000000..6ef49c96f --- /dev/null +++ b/src/application/components/Layouts/screens.ts @@ -0,0 +1,6 @@ +export enum Screens { + Cache = "cache", + Queries = "queries", + Mutations = "mutations", + Explorer = "explorer", +} diff --git a/src/application/components/Mutations/__tests__/Mutations.test.tsx b/src/application/components/Mutations/__tests__/Mutations.test.tsx index 05fa8414a..740312c56 100644 --- a/src/application/components/Mutations/__tests__/Mutations.test.tsx +++ b/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("", () => { const mutations = [ { id: 0, + clientId, __typename: "Mutation", name: null, }, { id: 1, + clientId, __typename: "Mutation", name: "AddColorToFavorites", }, @@ -34,14 +39,22 @@ describe("", () => { }); 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("", () => { }); 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( diff --git a/src/application/components/Queries/RunInExplorerButton.tsx b/src/application/components/Queries/RunInExplorerButton.tsx index 89378c3b3..f4d3276fb 100644 --- a/src/application/components/Queries/RunInExplorerButton.tsx +++ b/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; diff --git a/src/application/components/Queries/__tests__/Queries.test.tsx b/src/application/components/Queries/__tests__/Queries.test.tsx index 8c747d805..33e8bce6e 100644 --- a/src/application/components/Queries/__tests__/Queries.test.tsx +++ b/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("", () => { const queries = [ { id: 0, __typename: "WatchedQuery", + clientId, name: null, }, { id: 1, __typename: "WatchedQuery", + clientId, name: "GetColors", }, ]; @@ -34,14 +38,22 @@ describe("", () => { }); 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("", () => { }); 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(