e2e tests that work

cypress.config.ts

@@ -1,6 +1,7 @@
 import * as fs from 'node:fs';
 // eslint-disable-next-line import/no-extraneous-dependencies -- cypress SHOULD be a dev dependency
 import { defineConfig } from 'cypress';
+import cypressPluginLocalStorageCommands from 'cypress-localstorage-commands/plugin';
 import { initSeed } from './integration-tests/testkit/seed';
 
 if (!process.env.RUN_AGAINST_LOCAL_SERVICES) {
@@ -25,7 +26,9 @@ export default defineConfig({
   defaultCommandTimeout: 15_000, // sometimes the app takes longer to load, especially in the CI
   retries: isCI ? 2 : 0,
   e2e: {
-    setupNodeEvents(on) {
+    setupNodeEvents(on, config) {
+      cypressPluginLocalStorageCommands(on, config);
+
       on('task', {
         async seedTarget() {
           const owner = await seed.createOwner();

cypress/e2e/laboratory-environment-variables.cy.ts

@@ -1,3 +1,9 @@
+import { persistAuthenticationCookies } from '../support/testkit';
+
+Cypress.Cookies.debug(true);
+
+const as = <$Type>() => undefined as $Type;
+
 const selectors = {
   editorEnvironmentVariables: '[data-cy="preflight-editor-mini"]',
   buttonGraphiQLPreflight: '[aria-label*="Preflight Script"]',
@@ -30,55 +36,63 @@ const data = {
   envarsJson: '{"foo":"123"}',
 };
 
-const as = <$Type>() => undefined as $Type;
-
 const ctx = {
-  // test export interfaces from testKit
+  // todo get an exported type from testKit
   targetDevelopment: as<{ id: string; slug: string; path: string }>(),
   targetProduction: as<{ id: string; slug: string; path: string }>(),
+  cookies: [] as Cypress.Cookie[],
 };
 
 before(() => {
-  cy.clearLocalStorage().then(async () => {
-    cy.task('seedTarget').then(({ refreshToken, targets }: any) => {
-      cy.setCookie('sRefreshToken', refreshToken);
-      ctx.targetDevelopment = targets.development;
-      ctx.targetProduction = targets.production;
-    });
+  cy.task('seedTarget').then(({ refreshToken, targets }: any) => {
+    cy.setCookie('sRefreshToken', refreshToken);
+    ctx.targetDevelopment = targets.development;
+    ctx.targetProduction = targets.production;
   });
 });
 
-const visitTargetDevelopment = () => cy.visit(`/${ctx.targetDevelopment.path}/laboratory`);
-const visitTargetProduction = () => cy.visit(`/${ctx.targetProduction.path}/laboratory`);
+persistAuthenticationCookies();
+
+const visitTargetDevelopment = () => cy.visit(`${ctx.targetDevelopment.path}/laboratory`);
+// const visitTargetProduction = () => cy.visit(`${ctx.targetProduction.path}/laboratory`);
+
 const openPreflightTab = () => cy.get(selectors.buttonGraphiQLPreflight).click();
 
+const storageGlobalGet = () => cy.getLocalStorage(environmentVariablesStorageKey.global);
+const storageGlobalSet = (value: string) => cy.setLocalStorage(environmentVariablesStorageKey.global, value); // prettier-ignore
+
+const storageTargetDevelopmentGet = () => cy.getLocalStorage(environmentVariablesStorageKey.scoped(ctx.targetDevelopment.id)); // prettier-ignore
+const storageTargetDevelopmentSet = (value: string) => cy.setLocalStorage(environmentVariablesStorageKey.scoped(ctx.targetDevelopment.id), value); // prettier-ignore
+
+beforeEach(() => {
+  cy.removeLocalStorage(environmentVariablesStorageKey.global);
+  cy.removeLocalStorage(environmentVariablesStorageKey.scoped(ctx.targetDevelopment.id));
+  cy.removeLocalStorage(environmentVariablesStorageKey.scoped(ctx.targetProduction.id));
+});
+
 describe('tab editor', () => {
   it('if state empty, is null', () => {
     visitTargetDevelopment();
     openPreflightTab();
-    expect(
-      window.localStorage.getItem(
-        environmentVariablesStorageKey.scoped(ctx.targetDevelopment.slug),
-      ),
-    ).equals(null);
-    expect(window.localStorage.getItem(environmentVariablesStorageKey.global)).equals(null);
-    // cy.dataCy('preflight-editor-mini').should('have.text', '');
+    storageTargetDevelopmentGet().should('equal', null);
+    storageGlobalGet().should('equal', null);
   });
 
-  it('if state just global value, shows that', () => {
-    window.localStorage.setItem(environmentVariablesStorageKey.global, data.envarsJson);
+  it('if state just scoped value, shows that', () => {
+    storageTargetDevelopmentSet(data.envarsJson);
     visitTargetDevelopment();
     openPreflightTab();
     cy.contains(data.envarsJson);
+    storageGlobalGet().should('equal', null);
   });
 
-  it.only('if state just scoped value, shows that', () => {
-    window.localStorage.setItem(
-      environmentVariablesStorageKey.scoped(ctx.targetDevelopment.id),
-      data.envarsJson,
-    );
+  it('if state just global value, copied to scoped, shows that', () => {
+    storageTargetDevelopmentGet().should('equal', null);
+    storageGlobalSet(data.envarsJson);
     visitTargetDevelopment();
     openPreflightTab();
     cy.contains(data.envarsJson);
+    storageTargetDevelopmentGet().should('equal', data.envarsJson);
+    storageGlobalGet().should('equal', data.envarsJson);
   });
 });

cypress/e2e/laboratory-preflight.cy.ts

@@ -17,15 +17,15 @@ const selectors = {
   },
 };
 
-const data: { slug: string } = {
-  slug: '',
+const ctx = {
+  targetSlug: '',
 };
 
 beforeEach(() => {
   cy.clearLocalStorage().then(async () => {
     cy.task('seedTarget').then(({ slug, refreshToken }: any) => {
       cy.setCookie('sRefreshToken', refreshToken);
-      data.slug = slug;
+      ctx.targetSlug = slug;
       cy.visit(`/${slug}/laboratory`);
       cy.get(selectors.buttonGraphiQLPreflight).click();
     });
@@ -59,7 +59,7 @@ describe('Laboratory > Preflight Script', () => {
   // https://github.com/graphql-hive/console/pull/6450
   it('regression: loads even if local storage is set to {}', () => {
     window.localStorage.setItem('hive:laboratory:environment', '{}');
-    cy.visit(`/${data.slug}/laboratory`);
+    cy.visit(`/${ctx.targetSlug}/laboratory`);
     cy.get(selectors.buttonGraphiQLPreflight).click();
   });
   it('mini script editor is read only', () => {

cypress/support/e2e.ts

@@ -1,4 +1,5 @@
 import './commands';
+import 'cypress-localstorage-commands';
 
 Cypress.on('uncaught:exception', (_err, _runnable) => {
   return false;

cypress/support/testkit.ts

@@ -1,3 +1,44 @@
+export function persistAuthenticationCookies() {
+  const ctx = {
+    cookies: [] as Cypress.Cookie[],
+  };
+
+  before(() => {
+    cy.getCookie('sRefreshToken').should('exist');
+    cy.visit('/');
+    cy.wait(2000);
+
+    cy.getCookie('sAccessToken').should('exist');
+    cy.getCookie('sFrontToken').should('exist');
+    cy.getCookie('st-last-access-token-update').should('exist');
+
+    cy.getCookie('sAccessToken').then(sAccessToken => {
+      ctx.cookies.push(sAccessToken);
+    });
+    cy.getCookie('sFrontToken').then(sFrontToken => {
+      ctx.cookies.push(sFrontToken);
+    });
+    cy.getCookie('sRefreshToken').then(sRefreshToken => {
+      ctx.cookies.push(sRefreshToken);
+    });
+
+    cy.getCookie('st-last-access-token-update').then(stLastAccessTokenUpdate => {
+      ctx.cookies.push(stLastAccessTokenUpdate);
+    });
+
+    cy.clearCookie('st-last-access-token-update');
+    cy.clearCookie('sRefreshToken');
+    cy.clearCookie('sAccessToken');
+    cy.clearCookie('sFrontToken');
+  });
+
+  beforeEach(() => {
+    ctx.cookies.forEach(cookie => {
+      cy.setCookie(cookie.name, cookie.value, cookie);
+    });
+  });
+}
+
 export function generateRandomSlug() {
   return Math.random().toString(36).substring(2);
 }

package.json

@@ -77,6 +77,7 @@
     "@types/node": "22.10.5",
     "bob-the-bundler": "7.0.1",
     "cypress": "13.17.0",
+    "cypress-localstorage-commands": "^2.2.7",
     "dotenv": "16.4.7",
     "eslint": "8.57.1",
     "eslint-plugin-cypress": "4.1.0",

packages/web/app/src/lib/preflight/graphiql-plugin.tsx

@@ -160,8 +160,6 @@ export function usePreflight(args: {
 
   const target = useFragment(PreflightScript_TargetFragment, args.target);
   const [isEnabled, setIsEnabled] = useLocalStorageJson(
-    // todo
-    // 'hive:laboratory:isPreflightEnabled',
     'hive:laboratory:isPreflightScriptEnabled',
     z.boolean().default(false),
   );