Fix integration tests and patch @graphiql/react (#1781)

Author: ardatan

examples/sveltekit/__integration-tests__/sveltekit.spec.ts

@@ -109,7 +109,7 @@ describe('SvelteKit integration', () => {
 				page.waitForResponse((res) => res.url().endsWith('/api/graphql'), {
 					timeout: timings.waitForResponse
 				}),
-				page.click(`button[class="execute-button"]`)
+				page.click(`.graphiql-execute-button`)
 			]);
 
 			const json = await res.json();

packages/graphql-yoga/__integration-tests__/browser.spec.ts

@@ -148,8 +148,8 @@ describe('browser', () => {
   let browser: puppeteer.Browser
   let page: puppeteer.Page
 
-  const playButtonSelector = `[d="M 11 9 L 24 16 L 11 23 z"]`
-  const stopButtonSelector = `[d="M 10 10 L 23 10 L 23 23 L 10 23 z"]`
+  const playButtonSelector = `[aria-label^="Execute"]`
+  const stopButtonSelector = `[aria-label^="Stop"]`
 
   let port: number
   const server = createServer(yogaApp)
@@ -177,14 +177,14 @@ describe('browser', () => {
   })
 
   const typeOperationText = async (text: string) => {
-    await page.type('.query-editor .CodeMirror textarea', text)
+    await page.type('.graphiql-query-editor .CodeMirror textarea', text)
     // TODO: figure out how we can avoid this wait
     // it is very likely that there is a delay from textarea -> react state update
     await new Promise((res) => setTimeout(res, 100))
   }
 
   const typeVariablesText = async (text: string) => {
-    await page.type('.variable-editor .CodeMirror textarea', text)
+    await page.type('[aria-label="Variables"] .CodeMirror textarea', text)
     // TODO: figure out how we can avoid this wait
     // it is very likely that there is a delay from textarea -> react state update
     await new Promise((res) => setTimeout(res, 100))
@@ -210,7 +210,7 @@ describe('browser', () => {
       await page.goto(`http://localhost:${port}${endpoint}`)
       await typeOperationText('{ alwaysTrue }')
 
-      await page.click('.execute-button')
+      await page.click('.graphiql-execute-button')
       const resultContents = await waitForResult()
 
       expect(resultContents).toEqual(
@@ -232,7 +232,7 @@ describe('browser', () => {
         `mutation ($number: Int!) {  setFavoriteNumber(number: $number) }`,
       )
       await typeVariablesText(`{ "number": 3 }`)
-      await page.click('.execute-button')
+      await page.click('.graphiql-execute-button')
       const resultContents = await waitForResult()
 
       expect(resultContents).toEqual(
@@ -251,7 +251,7 @@ describe('browser', () => {
     test('execute SSE (subscription) operation', async () => {
       await page.goto(`http://localhost:${port}${endpoint}`)
       await typeOperationText(`subscription { count(to: 2) }`)
-      await page.click('.execute-button')
+      await page.click('.graphiql-execute-button')
 
       await new Promise((res) => setTimeout(res, 50))
 
@@ -299,7 +299,7 @@ describe('browser', () => {
           query,
         )}`,
       )
-      await page.click('.execute-button')
+      await page.click('.graphiql-execute-button')
       const resultContents = await waitForResult()
 
       expect(resultContents).toEqual(
@@ -318,7 +318,7 @@ describe('browser', () => {
     test('should show BigInt correctly', async () => {
       await page.goto(`http://localhost:${port}${endpoint}`)
       await typeOperationText(`{ bigint }`)
-      await page.click('.execute-button')
+      await page.click('.graphiql-execute-button')
       const resultContents = await waitForResult()
 
       expect(resultContents).toEqual(`{
@@ -330,7 +330,7 @@ describe('browser', () => {
     test('should show live queries correctly', async () => {
       await page.goto(`http://localhost:${port}${endpoint}`)
       await typeOperationText(`query @live { liveCounter }`)
-      await page.click('.execute-button')
+      await page.click('.graphiql-execute-button')
 
       await new Promise((res) => setTimeout(res, 50))
 

patches/@graphiql+react+0.13.1.patch

@@ -0,0 +1,33 @@
+diff --git a/node_modules/@graphiql/react/dist/index.es.js b/node_modules/@graphiql/react/dist/index.es.js
+index f7ba535..752285c 100644
+--- a/node_modules/@graphiql/react/dist/index.es.js
++++ b/node_modules/@graphiql/react/dist/index.es.js
+@@ -18839,11 +18839,9 @@ function ExecutionContextProvider(props2) {
+               ...rest
+             };
+           }
+-          setIsFetching(false);
+           setResponse(formatResult(fullResponse));
+         } else {
+           const response = formatResult(result);
+-          setIsFetching(false);
+           setResponse(response);
+         }
+       }, "handleResponse");
+@@ -21891,12 +21889,16 @@ function hasStringOrNullKey(obj, key) {
+ }
+ __name(hasStringOrNullKey, "hasStringOrNullKey");
+ __name$c(hasStringOrNullKey, "hasStringOrNullKey");
++window.g = {};
+ function useSynchronizeActiveTabValues({
+   queryEditor,
+   variableEditor,
+   headerEditor,
+   responseEditor
+ }) {
++  window.g.resultComponent = {
++    viewer: responseEditor,
++  };
+   return useCallback(
+     (state2) => {
+       var _a, _b, _c, _d, _e;

website/route-lockfile.txt

@@ -45,3 +45,32 @@
 /tutorial/basic/09-error-handling
 /tutorial/basic/10-filtering-and-pagination
 /tutorial/basic/11-summary
+/v3
+/v3/comparison
+/v3/features/apollo-federation
+/v3/features/automatic-persisted-queries
+/v3/features/context
+/v3/features/cors
+/v3/features/envelop-plugins
+/v3/features/error-masking
+/v3/features/file-uploads
+/v3/features/graphiql
+/v3/features/persisted-operations
+/v3/features/response-caching
+/v3/features/subscriptions
+/v3/features/testing
+/v3/integrations/integration-with-aws-lambda
+/v3/integrations/integration-with-bun
+/v3/integrations/integration-with-cloudflare-workers
+/v3/integrations/integration-with-deno
+/v3/integrations/integration-with-express
+/v3/integrations/integration-with-fastify
+/v3/integrations/integration-with-koa
+/v3/integrations/integration-with-nestjs
+/v3/integrations/integration-with-nextjs
+/v3/integrations/integration-with-sveltekit
+/v3/integrations/z-other-environments
+/v3/migration/migration-from-apollo-server
+/v3/migration/migration-from-express-graphql
+/v3/migration/migration-from-yoga-v1
+/v3/migration/migration-from-yoga-v2

website/src/pages/_app.tsx

@@ -1,7 +1,6 @@
-import { AppProps } from 'next/app'
 import '@theguild/components/style.css'
 
-export default function App({ Component, pageProps }: AppProps) {
+export default function App({ Component, pageProps }: any) {
   return <Component {...pageProps} />
 }