improve(laboratory): validate editor content with TypeScript

cypress.config.ts

@@ -8,6 +8,14 @@ if (!process.env.RUN_AGAINST_LOCAL_SERVICES) {
   dotenv.config({ path: import.meta.dirname + '/integration-tests/.env' });
 }
 
+if (process.env.RUN_AGAINST_LOCAL_SERVICES === '1') {
+  process.env.SUPERTOKENS_API_KEY = process.env.SUPERTOKENS_API_KEY ?? 'bubatzbieber6942096420';
+  process.env.SUPERTOKENS_CONNECTION_URI =
+    process.env.SUPERTOKENS_CONNECTION_URI ?? 'http://localhost:3567';
+  // It seems that this has to be set in the environment that the cypress cli is executed from.
+  // process.env.CYPRESS_BASE_URL = process.env.CYPRESS_BASE_URL ?? 'http://localhost:3000';
+}
+
 const isCI = Boolean(process.env.CI);
 
 export const seed = initSeed();

cypress/e2e/laboratory/_cy.ts

@@ -0,0 +1,87 @@
+import { setMonacoEditorContents } from '../../support/monaco';
+
+export namespace cyLaboratory {
+  /**
+   * Updates the value of the graphiql editor
+   */
+  export function updateEditorValue(value: string) {
+    cy.get('.graphiql-query-editor .cm-s-graphiql').then($editor => {
+      const editor = ($editor[0] as any).CodeMirror; // Access the CodeMirror instance
+      editor.setValue(value);
+    });
+  }
+
+  /**
+   * Returns the value of the graphiql editor as Chainable<string>
+   */
+  export function getEditorValue() {
+    return cy.get('.graphiql-query-editor .cm-s-graphiql').then<string>($editor => {
+      const editor = ($editor[0] as any).CodeMirror; // Access the CodeMirror instance
+      return editor.getValue();
+    });
+  }
+
+  /**
+   * Opens a new tab
+   */
+  export function openNewTab() {
+    cy.get('button[aria-label="New tab"]').click();
+    // tab's title should be "untitled" as it's a default name
+    cy.contains('button[aria-controls="graphiql-session"]', 'untitled').should('exist');
+  }
+
+  /**
+   * Asserts that the tab with the given name is active
+   */
+  export function assertActiveTab(name: string) {
+    cy.contains('li.graphiql-tab-active > button[aria-controls="graphiql-session"]', name).should(
+      'exist',
+    );
+  }
+
+  /**
+   * Closes the active tab
+   */
+  export function closeActiveTab() {
+    cy.get('li.graphiql-tab-active > button.graphiql-tab-close').click();
+  }
+
+  /**
+   * Closes all tabs until one is left
+   */
+  export function closeTabsUntilOneLeft() {
+    cy.get('li.graphiql-tab').then($tabs => {
+      if ($tabs.length > 1) {
+        closeActiveTab();
+        // Recurse until there's only one tab left
+        return closeTabsUntilOneLeft();
+      }
+    });
+  }
+
+  export namespace preflight {
+    export const selectors = {
+      buttonGraphiQLPreflight: '[aria-label*="Preflight Script"]',
+      buttonModalCy: 'preflight-modal-button',
+      buttonToggleCy: 'toggle-preflight',
+      buttonHeaders: '[data-name="headers"]',
+      headersEditor: {
+        textArea: '.graphiql-editor-tool .graphiql-editor:last-child textarea',
+      },
+      graphiql: {
+        buttonExecute: '.graphiql-execute-button',
+      },
+
+      modal: {
+        buttonSubmitCy: 'preflight-modal-submit',
+        editorCy: 'preflight-editor',
+      },
+    };
+    /**
+     * Sets the content of the preflight editor
+     */
+    export function setEditorContent(value: string) {
+      setMonacoEditorContents(selectors.modal.editorCy, value);
+    }
+  }
+}

cypress/e2e/laboratory-collections.cy.ts → cypress/e2e/laboratory/collections.cy.ts

@@ -1,4 +1,4 @@
-import { laboratory } from '../support/testkit';
+import { cyLaboratory } from './_cy';
 
 beforeEach(() => {
   cy.clearAllLocalStorage().then(() => {
@@ -16,7 +16,7 @@ beforeEach(() => {
         .first()
         .click();
       cy.get('[aria-label="Show Operation Collections"]').click();
-      laboratory.closeTabsUntilOneLeft();
+      cyLaboratory.closeTabsUntilOneLeft();
     });
   });
 });
@@ -90,7 +90,7 @@ describe('Laboratory > Collections', () => {
       name: 'collection-1',
       description: 'Description 1',
     });
-    laboratory.updateEditorValue(`query op1 { test }`);
+    cyLaboratory.updateEditorValue(`query op1 { test }`);
     collections.saveCurrentOperationAs({
       name: 'operation-1',
       collectionName: 'collection-1',
@@ -103,7 +103,7 @@ describe('Laboratory > Collections', () => {
       name: 'collection-1',
       description: 'Description 1',
     });
-    laboratory.updateEditorValue(`query op1 { test }`);
+    cyLaboratory.updateEditorValue(`query op1 { test }`);
     collections.saveCurrentOperationAs({
       name: 'operation-1',
       collectionName: 'collection-1',
@@ -127,7 +127,7 @@ describe('Laboratory > Collections', () => {
       name: 'collection-1',
       description: 'Description 1',
     });
-    laboratory.updateEditorValue(`query op1 { test }`);
+    cyLaboratory.updateEditorValue(`query op1 { test }`);
     collections.saveCurrentOperationAs({
       name: 'operation-1',
       collectionName: 'collection-1',
@@ -151,7 +151,7 @@ describe('Laboratory > Collections', () => {
       name: 'collection-1',
       description: 'Description 1',
     });
-    laboratory.updateEditorValue(`query op1 { test }`);
+    cyLaboratory.updateEditorValue(`query op1 { test }`);
     collections.saveCurrentOperationAs({
       name: 'operation-1',
       collectionName: 'collection-1',
@@ -173,14 +173,14 @@ describe('Laboratory > Collections', () => {
       name: 'collection-1',
       description: 'Description 1',
     });
-    laboratory.updateEditorValue(`query op1 { test }`);
+    cyLaboratory.updateEditorValue(`query op1 { test }`);
     collections.saveCurrentOperationAs({
       name: 'operation-1',
       collectionName: 'collection-1',
     });
 
-    laboratory.openNewTab();
-    laboratory.updateEditorValue(`query op2 { test }`);
+    cyLaboratory.openNewTab();
+    cyLaboratory.updateEditorValue(`query op2 { test }`);
     collections.saveCurrentOperationAs({
       name: 'operation-2',
       collectionName: 'collection-1',
@@ -206,14 +206,14 @@ describe('Laboratory > Collections', () => {
       description: 'Description 2',
     });
     collections.clickCollectionButton('collection-1');
-    laboratory.updateEditorValue(`query op1 { test }`);
+    cyLaboratory.updateEditorValue(`query op1 { test }`);
     collections.saveCurrentOperationAs({
       name: 'operation-1',
       collectionName: 'collection-1',
     });
 
-    laboratory.openNewTab();
-    laboratory.updateEditorValue(`query op2 { test }`);
+    cyLaboratory.openNewTab();
+    cyLaboratory.updateEditorValue(`query op2 { test }`);
     collections.saveCurrentOperationAs({
       name: 'operation-2',
       collectionName: 'collection-2',
@@ -243,7 +243,7 @@ describe('Laboratory > Collections', () => {
         return cy.visit(copiedUrl);
       });
 
-    laboratory.assertActiveTab('operation-1');
-    laboratory.getEditorValue().should('contain', 'op1');
+    cyLaboratory.assertActiveTab('operation-1');
+    cyLaboratory.getEditorValue().should('contain', 'op1');
   });
 });