no cy selectors

Author: jasonkuhrt

.changeset/funny-poets-hang.md

@@ -29,7 +29,7 @@ a = b;
 a = b;
 ```
 
-The advantage of `@ts-expect-error` is that if there is no error to ignore, then the comment itself becomes an error whereas `@ts-ignore` sits there quietly whether it has effect or not.
+The advantage of `@ts-expect-error` is that if there is no error to ignore, then the comment itself becomes an error whereas `@ts-ignore` sits there quietly whether it has an effect or not.
 
 There is more you can do with TypeScript in JavaScript, such as providing type annotations via JSDoc. Learn more about it all here:
 

cypress/e2e/laboratory/__cypress__.ts

@@ -62,8 +62,8 @@ export namespace cyLaboratory {
   export namespace preflight {
     export const selectors = {
       buttonGraphiQLPreflight: '[aria-label*="Preflight Script"]',
-      buttonModalCy: 'preflight-modal-button',
-      buttonToggleCy: 'toggle-preflight',
+      buttonModal: '[data-cy="preflight-modal-button"]',
+      buttonToggle: '[data-cy="toggle-preflight"]',
       buttonHeaders: '[data-name="headers"]',
       headersEditor: {
         textArea: '.graphiql-editor-tool .graphiql-editor:last-child textarea',
@@ -73,23 +73,18 @@ export namespace cyLaboratory {
       },
 
       modal: {
-        buttonSubmitCy: 'preflight-modal-submit',
-        editorCy: 'preflight-editor',
-        variablesEditorCy: 'env-editor',
+        buttonSubmit: '[data-cy="preflight-modal-submit"]',
+        scriptEditor: '[data-cy="preflight-editor"]',
+        variablesEditor: '[data-cy="env-editor"]',
       },
     };
-    /**
-     * Sets the content of the preflight editor
-     */
+
     export const setScriptEditorContent = (value: string) => {
-      cyMonaco.setContent(selectors.modal.editorCy, value);
+      cyMonaco.setContent(selectors.modal.scriptEditor, value);
     };
 
-    /**
-     * Sets the content of the variables editor
-     */
     export const setEnvironmentEditorContent = (value: string) => {
-      cyMonaco.setContent(selectors.modal.variablesEditorCy, value);
+      cyMonaco.setContent(selectors.modal.variablesEditor, value);
     };
   }
 }

cypress/e2e/laboratory/preflight.cy.ts

@@ -53,12 +53,21 @@ describe('Preflight Modal', () => {
 
   it('script is validated with TypeScript', () => {
     cyPreflight.setScriptEditorContent('let a = 1; a = ""');
-    cyMonaco.nextProblemContains(selectors.modal.editorCy, "Type 'string' is not assignable to type 'number'."); // prettier-ignore
+    cyMonaco.nextProblemContains(selectors.modal.scriptEditor, "Type 'string' is not assignable to type 'number'."); // prettier-ignore
   });
 
   it('script cannot have TypeScript syntax', () => {
     cyPreflight.setScriptEditorContent('let a:number = 1');
-    cyMonaco.nextProblemContains(selectors.modal.editorCy, 'Type annotations can only be used in TypeScript files.'); // prettier-ignore
+    cyMonaco.nextProblemContains(selectors.modal.scriptEditor, 'Type annotations can only be used in TypeScript files.'); // prettier-ignore
+  });
+
+  it('regression: saving and re-opening clears previous validation state', () => {
+    cyPreflight.setScriptEditorContent('const a = 1');
+    cy.get(selectors.modal.buttonSubmit).click();
+    cy.get(selectors.buttonModal).click();
+    cy.wait(1000);
+    cyMonaco.goToNextProblem(selectors.modal.scriptEditor);
+    cy.contains('Cannot redeclare block-scoped variable').should('not.exist');
   });
 
   it('save script and environment variables when submitting', () => {
@@ -191,12 +200,12 @@ describe('Execution', () => {
     const preflightHeaders = {
       foo: 'bar',
     };
-    cy.dataCy(selectors.buttonToggleCy).click();
-    cy.dataCy(selectors.buttonModalCy).click();
+    cy.get(selectors.buttonToggle).click();
+    cy.get(selectors.buttonModal).click();
     cyPreflight.setScriptEditorContent(
       `lab.request.headers.append('foo', '${preflightHeaders.foo}')`,
     );
-    cy.dataCy(selectors.modal.buttonSubmitCy).click();
+    cy.get(selectors.modal.buttonSubmit).click();
     // Run GraphiQL
     cy.intercept({ headers: preflightHeaders }).as('request');
     cy.get(selectors.graphiql.buttonExecute).click();
@@ -217,12 +226,12 @@ describe('Execution', () => {
     const preflightHeaders = {
       accept: 'application/graphql-response+json; charset=utf-8, application/json; charset=utf-8',
     };
-    cy.dataCy(selectors.buttonToggleCy).click();
-    cy.dataCy(selectors.buttonModalCy).click();
+    cy.get(selectors.buttonToggle).click();
+    cy.get(selectors.buttonModal).click();
     cyPreflight.setScriptEditorContent(
       `lab.request.headers.append('accept', '${preflightHeaders.accept}')`,
     );
-    cy.dataCy(selectors.modal.buttonSubmitCy).click();
+    cy.get(selectors.modal.buttonSubmit).click();
     // Run GraphiQL
     cy.intercept({ headers: preflightHeaders }).as('request');
     cy.get(selectors.graphiql.buttonExecute).click();
@@ -247,13 +256,13 @@ describe('Execution', () => {
     const preflightHeaders = {
       foo_preflight: barEnVarInterpolation,
     };
-    cy.dataCy(selectors.buttonToggleCy).click();
-    cy.dataCy(selectors.buttonModalCy).click();
+    cy.get(selectors.buttonToggle).click();
+    cy.get(selectors.buttonModal).click();
     cyPreflight.setScriptEditorContent(`
       lab.environment.set('bar', '${environmentVariables.bar}')
       lab.request.headers.append('foo_preflight', '${preflightHeaders.foo_preflight}')
     `);
-    cy.dataCy(selectors.modal.buttonSubmitCy).click();
+    cy.get(selectors.modal.buttonSubmit).click();
     // Run GraphiQL
     cy.intercept({
       headers: {

cypress/support/monaco.ts

@@ -2,14 +2,16 @@ import type * as Monaco from 'monaco-editor';
 
 export namespace cyMonaco {
   /** Helper function for setting the text within a monaco editor as typing manually results in flaky tests */
-  export function setContent(editorCyName: string, text: string) {
+  export function setContent(editorSelector: string, text: string) {
     // wait for textarea appearing which indicates monaco is loaded
-    cy.dataCy(editorCyName).find('textarea');
+    cy.get(editorSelector).find('textarea');
     cy.window().then((win: Window & typeof globalThis & { monaco: typeof Monaco }) => {
       // First, check if monaco is available on the main window
       const editor = win.monaco.editor
         .getEditors()
-        .find(e => e.getContainerDomNode().parentElement.getAttribute('data-cy') === editorCyName);
+        .find(
+          e => e.getContainerDomNode().parentElement.getAttribute('data-cy') === editorSelector,
+        );
 
       // If Monaco instance is found
       if (editor) {
@@ -20,14 +22,14 @@ export namespace cyMonaco {
     });
   }
 
-  export function goToNextProblem(editorCyName: string) {
-    cy.dataCy(editorCyName).find('textarea').focus().realPress(['Alt', 'F8']);
+  export function goToNextProblem(editorSelector: string) {
+    cy.get(editorSelector).find('textarea').focus().realPress(['Alt', 'F8']);
   }
 
-  export function nextProblemContains(editorCyName: string, problem: string, waitMs = 1000) {
+  export function nextProblemContains(editorSelector: string, problem: string, waitMs = 1000) {
     // Hack: Seemingly only way to reliably interact with the monaco text area from Cypress.
     if (waitMs) cy.wait(waitMs);
-    goToNextProblem(editorCyName);
+    goToNextProblem(editorSelector);
     cy.contains(problem);
   }
 }