update cypress to v11.0.1

packages/graphiql/cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+  },
+  video: false,
+});

packages/graphiql/cypress/integration/docs.spec.ts → packages/graphiql/cypress/e2e/docs.cy.ts

@@ -1,30 +1,32 @@
 import { version } from 'graphql/version';
 
+beforeEach(() => {
+  cy.visit('/');
+});
+
 describe('GraphiQL DocExplorer - button', () => {
-  before(() => {
-    cy.visit(`/`);
+  beforeEach(() => {
+    cy.get('.graphiql-sidebar button').eq(0).click();
   });
   it('Toggles doc pane on', () => {
-    cy.get('.graphiql-sidebar button').eq(0).click();
     cy.get('.graphiql-doc-explorer').should('be.visible');
   });
 
   it('Toggles doc pane back off', () => {
     cy.get('.graphiql-sidebar button').eq(0).click();
-    cy.get('.graphiql-doc-explorer').should('not.be.visible');
+    cy.get('.graphiql-doc-explorer').should('not.exist');
   });
 });
 
 describe('GraphiQL DocExplorer - search', () => {
-  before(() => {
-    cy.visit(`/`);
+  beforeEach(() => {
     cy.get('.graphiql-sidebar button').eq(0).click();
+    cy.get('[data-reach-combobox-input]').type('test');
+    cy.get('[data-reach-combobox-option]').should('have.length', 7);
   });
 
   it('Searches docs for values', () => {
-    cy.get('[data-reach-combobox-input]').type('test');
     cy.get('[data-reach-combobox-popover]').should('not.have.attr', 'hidden');
-    cy.get('[data-reach-combobox-option]').should('have.length', 7);
   });
 
   it('Navigates to a docs entry on selecting a search result', () => {
@@ -33,11 +35,9 @@ describe('GraphiQL DocExplorer - search', () => {
   });
 
   it('Allows searching fields within a type', () => {
+    cy.get('[data-reach-combobox-option]').eq(4).children().click();
     cy.get('[data-reach-combobox-input]').type('list');
     cy.get('[data-reach-combobox-option]').should('have.length', 14);
-  });
-
-  it('Shows "other results" section', () => {
     cy.get(
       '[data-reach-combobox-popover] .graphiql-doc-explorer-search-divider',
     ).should('have.text', 'Other results');
@@ -50,15 +50,13 @@ describe('GraphiQL DocExplorer - search', () => {
   });
 
   it('Navigates back', () => {
+    cy.get('[data-reach-combobox-option]').eq(4).children().click();
     cy.get('.graphiql-doc-explorer-back').click();
     cy.get('.graphiql-doc-explorer-title').should('have.text', 'Docs');
   });
 
   it('Type fields link to their own docs entry', () => {
-    cy.get('[data-reach-combobox-input]').type('test');
-    cy.wait(250);
     cy.get('[data-reach-combobox-option]').last().click();
-
     cy.get('.graphiql-doc-explorer-title').should('have.text', 'isTest');
     cy.get('.graphiql-markdown-description').should(
       'have.text',
@@ -69,7 +67,6 @@ describe('GraphiQL DocExplorer - search', () => {
 
 describe('GraphQL DocExplorer - deprecated fields', () => {
   it('should show deprecated fields details when expanding', () => {
-    cy.visit(`/`);
     // Open doc explorer
     cy.get('.graphiql-sidebar button').eq(0).click();
 
@@ -105,6 +102,12 @@ if (!version.includes('15.5')) {
 
 describeOrSkip('GraphQL DocExplorer - deprecated arguments', () => {
   it('should show deprecated arguments category title', () => {
+    // Open doc explorer
+    cy.get('.graphiql-sidebar button').eq(0).click();
+
+    // Select query type
+    cy.get('.graphiql-doc-explorer-type-name').first().click();
+
     cy.get('.graphiql-doc-explorer-field-name').contains('hasArgs').click();
     cy.contains('Show Deprecated Arguments').click();
     cy.get('.graphiql-doc-explorer-section-title').contains(

packages/graphiql/cypress/integration/errors.spec.ts → packages/graphiql/cypress/e2e/errors.cy.ts

@@ -12,18 +12,20 @@ describe('Errors', () => {
            * we use to run the tests headless), the error in the latest Chrome
            * version is different!
            */
-          message: 'Unexpected token B in JSON at position 0',
-          stack: 'SyntaxError: Unexpected token B in JSON at position 0',
+          message: `Unexpected token 'B', "Bad Gateway" is not valid JSON`,
+          stack: `SyntaxError: Unexpected token 'B', "Bad Gateway" is not valid JSON`,
         },
       ],
     });
   });
+
   it('Should show an error when introspection fails', () => {
     cy.visit('/?graphql-error=true');
     cy.assertQueryResult({
       errors: [{ message: 'Something unexpected happened...' }],
     });
   });
+
   it('Should show an error when the schema is invalid', () => {
     cy.visit('/?bad=true');
     /**
@@ -38,6 +40,7 @@ describe('Errors', () => {
       );
     });
   });
+
   it('Should show an error when sending an invalid query', () => {
     cy.visitWithOp({ query: '{thisDoesNotExist}' });
     cy.clickExecuteQuery();
@@ -50,6 +53,7 @@ describe('Errors', () => {
       ],
     });
   });
+
   it('Should show an error when sending an invalid subscription', () => {
     cy.visitWithOp({ query: 'subscription {thisDoesNotExist}' });
     cy.clickExecuteQuery();
@@ -62,5 +66,12 @@ describe('Errors', () => {
         },
       ],
     });
+
+    cy.on('uncaught:exception', () => {
+      // TODO: should GraphiQL doesn't throw an unhandled promise rejection for subscriptions ?
+
+      // return false to prevent the error from failing this test
+      return false;
+    });
   });
 });

packages/graphiql/cypress/plugins/index.ts

@@ -0,0 +1,3 @@
+export default (on, config) => {
+  return config;
+};

packages/graphiql/cypress/support/index.js → packages/graphiql/cypress/support/e2e.ts

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/e2e.ts is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -14,10 +14,4 @@
 // ***********************************************************
 /// <reference types="cypress" />
 
-// import '@cypress/code-coverage/support';
-
-// Import commands.js using ES2015 syntax:
-// import './commands';
-
-// Alternatively you can use CommonJS syntax:
-require('./commands');
+import './commands';

packages/graphiql/cypress/tsconfig.json

@@ -1,10 +1,8 @@
 {
   "compilerOptions": {
-    "rootDir": ".",
-    "typeRoots": ["./support"],
-    "lib": ["DOM", "ESNext"],
-    "types": ["cypress"],
-    "outDir": "dist"
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
   },
   "include": ["**/*.ts"]
 }

packages/graphiql/package.json

@@ -74,7 +74,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "^3.5.1",
     "cssnano": "^4.1.10",
-    "cypress": "^4.7.0",
+    "cypress": "^12.6.0",
     "express": "^4.17.3",
     "express-graphql": "experimental-stream-defer",
     "fork-ts-checker-webpack-plugin": "4.1.3",

packages/graphiql/resources/renderExample.js

@@ -98,9 +98,9 @@ ReactDOM.render(
     variables: parameters.variables,
     headers: parameters.headers,
     defaultHeaders: parameters.defaultHeaders,
-    onEditQuery: onEditQuery,
-    onEditVariables: onEditVariables,
-    onEditHeaders: onEditHeaders,
+    onEditQuery,
+    onEditVariables,
+    onEditHeaders,
     defaultEditorToolsVisibility: true,
     isHeadersEditorEnabled: true,
     shouldPersistHeaders: true,

packages/graphiql/tsconfig.json

@@ -12,10 +12,7 @@
   "exclude": [
     "**/__tests__/**",
     "**/dist/**.*",
-    "**/*.spec.ts",
-    "**/*.spec.js",
-    "**/*-test.ts",
-    "**/*-test.js",
+    "cypress/**",
     "**/*.stories.js",
     "**/*.stories.ts",
     "**/*.stories.tsx"