Add extensions to Cypress setup and tabs e2e test

Author: dondonz

packages/graphiql/cypress/e2e/tabs.cy.ts

@@ -31,6 +31,12 @@ describe('Tabs', () => {
       .eq(1)
       .type('{"someHeader":"someValue"', { force: true });
 
+    // Enter extensions
+    cy.contains('Extensions').click();
+    cy.get('.graphiql-editor-tool textarea')
+        .eq(2)
+        .type('{"myExtension":"myString"', { force: true });
+
     // Run the query
     cy.clickExecuteQuery();
 
@@ -45,6 +51,7 @@ describe('Tabs', () => {
     cy.assertHasValues({
       query: '{id}',
       variablesString: '',
+      extensionsString: '',
       headersString: '',
       response: { data: { id: 'abc123' } },
     });
@@ -60,6 +67,7 @@ describe('Tabs', () => {
     cy.assertHasValues({
       query: 'query Foo {image}',
       variablesString: '{"someVar":42}',
+      extensionsString: '{"myExtension":"myString"}',
       headersString: '{"someHeader":"someValue"}',
       response: { data: { image: '/images/logo.svg' } },
     });
@@ -74,6 +82,7 @@ describe('Tabs', () => {
     cy.assertHasValues({
       query: '{id}',
       variablesString: '',
+      extensionsString: '',
       headersString: '',
       response: { data: { id: 'abc123' } },
     });

packages/graphiql/cypress/support/commands.ts

@@ -14,6 +14,7 @@ type Op = {
   query: string;
   variables?: Record<string, any>;
   variablesString?: string;
+  extensionsString?: string;
   headersString?: string;
   response?: Record<string, any>;
 };
@@ -73,7 +74,7 @@ Cypress.Commands.add('visitWithOp', ({ query, variables, variablesString }) => {
 
 Cypress.Commands.add(
   'assertHasValues',
-  ({ query, variables, variablesString, headersString, response }: Op) => {
+  ({ query, variables, variablesString, extensionsString, headersString, response }: Op) => {
     cy.get('.graphiql-query-editor').should(element => {
       expect(normalize(element.get(0).innerText)).to.equal(
         codeWithLineNumbers(query),
@@ -100,14 +101,24 @@ Cypress.Commands.add(
         });
     }
     if (headersString !== undefined) {
-      cy.contains('Headers').click();
-      cy.get('.graphiql-editor-tool .graphiql-editor')
-        .eq(1)
-        .should(element => {
-          expect(normalize(element.get(0).innerText)).to.equal(
-            codeWithLineNumbers(headersString),
-          );
-        });
+        cy.contains('Headers').click();
+        cy.get('.graphiql-editor-tool .graphiql-editor')
+            .eq(1)
+            .should(element => {
+                expect(normalize(element.get(0).innerText)).to.equal(
+                    codeWithLineNumbers(headersString),
+                );
+            });
+    }
+    if (extensionsString !== undefined) {
+        cy.contains('Extensions').click();
+        cy.get('.graphiql-editor-tool .graphiql-editor')
+            .eq(2)
+            .should(element => {
+                expect(normalize(element.get(0).innerText)).to.equal(
+                    codeWithLineNumbers(extensionsString),
+                );
+            });
     }
     if (response !== undefined) {
       cy.get('.result-window').should(element => {