Fix pipeline.cy.ts flakes via launcher pinning and form-array sync (#3389)

- createPipeline and focusPipelineEditor clicked launcher cards
   without pinning to the active main-area widget. JupyterLab keeps
   launchers in the DOM until Lumino disposes them, so the click
   could land on a card under a widget that was already retiring.
   Apply the active-widget pattern from the prior pythoneditor fix
   and centralize it in clickActiveLauncherCard. resetJupyterLab and
   createNewScriptEditor now share the same VISIBLE_LAUNCHER_SELECTOR
   constant.

- Add-then-type sequences in the complex-snapshot test typed into
   form-array inputs that React had not yet mounted. Add a
   formArrayAdd command that counts inputs under the parent before
   the Add click and waits for the count to grow before typing.
   Replaces six occurrences across the test.

- The complex-snapshot test wrote complex.pipeline after navigating
   into pipelines/, so the first directory listing did not contain
   it and openFile relied on the next file-browser poll to self-heal.
   Reorder so writeFile runs before openDirectory.

---------

Signed-off-by: Luciano Resende <lresende@apple.com>

Author: lresende

cypress/support/commands.ts

@@ -22,6 +22,23 @@ import 'cypress-real-events/support';
 
 import '../utils/snapshots/add-commands';
 
+// JupyterLab keeps every launcher widget in the DOM until Lumino disposes it,
+// so a launcher mid-tear-down can still expose its cards. Pinning to the
+// active main-area widget avoids clicking a card whose owning widget is
+// already hidden.
+const VISIBLE_LAUNCHER_SELECTOR =
+  '.jp-MainAreaWidget.jp-Activity:not(.lm-mod-hidden) .jp-Launcher';
+
+const clickActiveLauncherCard = (
+  cardTitle: string,
+  category = 'Elyra'
+): void => {
+  cy.get(VISIBLE_LAUNCHER_SELECTOR, { timeout: 10000 }).should('be.visible');
+  cy.get(
+    `.jp-LauncherCard[data-category="${category}"][title="${cardTitle}"]:visible`
+  ).click();
+};
+
 Cypress.Commands.add('installRuntimeConfig', ({ type } = {}): void => {
   const kfpRuntimeInstallCommand =
     'elyra-metadata create runtimes \
@@ -153,19 +170,13 @@ Cypress.Commands.add(
     if (name === undefined) {
       switch (type) {
         case 'kfp':
-          cy.get(
-            '.jp-LauncherCard[data-category="Elyra"][title="Kubeflow Pipelines Pipeline Editor"]'
-          ).click();
+          clickActiveLauncherCard('Kubeflow Pipelines Pipeline Editor');
           break;
         case 'airflow':
-          cy.get(
-            '.jp-LauncherCard[data-category="Elyra"][title="Apache Airflow Pipeline Editor"]'
-          ).click();
+          clickActiveLauncherCard('Apache Airflow Pipeline Editor');
           break;
         default:
-          cy.get(
-            '.jp-LauncherCard[data-category="Elyra"][title="Generic Pipeline Editor"]'
-          ).click();
+          clickActiveLauncherCard('Generic Pipeline Editor');
           break;
       }
     } else {
@@ -178,9 +189,7 @@ Cypress.Commands.add(
 );
 
 Cypress.Commands.add('focusPipelineEditor', (): void => {
-  cy.get(
-    '.jp-LauncherCard[data-category="Elyra"][title="Generic Pipeline Editor"]'
-  ).click();
+  clickActiveLauncherCard('Generic Pipeline Editor');
   cy.get('.common-canvas-drop-div').should('be.visible');
 });
 
@@ -252,9 +261,7 @@ Cypress.Commands.add('resetJupyterLab', (): void => {
     'exist'
   );
   // Wait for the launcher to be the active main-area widget (not just present in DOM).
-  cy.get('.jp-MainAreaWidget.jp-Activity:not(.lm-mod-hidden) .jp-Launcher', {
-    timeout: 10000
-  }).should('be.visible');
+  cy.get(VISIBLE_LAUNCHER_SELECTOR, { timeout: 10000 }).should('be.visible');
 });
 
 Cypress.Commands.add('checkTabMenuOptions', (fileType: string): void => {
@@ -282,23 +289,29 @@ Cypress.Commands.add('closeCurrentEditor', (): void => {
 });
 
 Cypress.Commands.add('createNewScriptEditor', (language: string): void => {
-  // Match only a launcher whose parent main-area widget is currently active;
-  // a hidden launcher (lm-mod-hidden parent) would fail be.visible and flake.
-  const visibleLauncherSelector =
-    '.jp-MainAreaWidget.jp-Activity:not(.lm-mod-hidden) .jp-Launcher';
-  cy.get('body').then(($body) => {
-    if ($body.find(visibleLauncherSelector).length === 0) {
-      // Self-heal: no active launcher (e.g. another widget is the active tab).
-      cy.findByRole('menuitem', { name: /^file$/i }).click();
-      cy.findByText(/^new launcher$/i).click({ force: true });
-    }
-  });
-  cy.get(visibleLauncherSelector, { timeout: 10000 }).should('be.visible');
-  cy.get(
-    `.jp-LauncherCard[data-category="Elyra"][title="Create a new ${language} Editor"]:visible`
-  ).click();
+  clickActiveLauncherCard(`Create a new ${language} Editor`);
 });
 
+// Click an "Add" button inside a form-array section, then type `value` into
+// the newly mounted input. Waits for the input count under `parentSelector`
+// to increase, closing the race where typing starts before React has
+// rendered the new <input>.
+Cypress.Commands.add(
+  'formArrayAdd',
+  (parentSelector: string, value: string): void => {
+    cy.get(parentSelector).then(($parent) => {
+      const prevCount = $parent.find('input').length;
+      cy.get(parentSelector).within(() => {
+        cy.findByRole('button', { name: /add/i }).click();
+      });
+      cy.get(parentSelector)
+        .find('input')
+        .should('have.length.greaterThan', prevCount);
+      cy.get(parentSelector).find('input').last().type(value);
+    });
+  }
+);
+
 Cypress.Commands.add('checkScriptEditorToolbarContent', (): void => {
   cy.get('.elyra-ScriptEditor .jp-Toolbar');
 

cypress/support/index.d.ts

@@ -49,5 +49,6 @@ declare namespace Cypress {
     openHelloWorld(fileExtension: string): Chainable<void>;
     dismissAssistant(fileType: string): Chainable<void>;
     focusPipelineEditor(): Chainable<void>;
+    formArrayAdd(parentSelector: string, value: string): Chainable<void>;
   }
 }

cypress/tests/pipeline.cy.ts

@@ -154,8 +154,11 @@ describe('Pipeline Editor tests', () => {
     cy.bootstrapFile('scripts/setup.txt');
 
     // Do this all manually because our command doesn't support directories yet
-    cy.openDirectory('pipelines');
+    // Write the pipeline file before navigating into the directory so the
+    // file-browser's first listing inside `pipelines/` already contains it,
+    // avoiding a poll-cycle wait inside openFile.
     cy.writeFile('build/cypress/pipelines/complex.pipeline', emptyPipeline);
+    cy.openDirectory('pipelines');
     cy.openFile('complex.pipeline');
     cy.get('.common-canvas-drop-div').should('be.visible');
 
@@ -186,18 +189,10 @@ describe('Pipeline Editor tests', () => {
       cy.openDirectory('producer.ipynb');
     });
 
-    cy.get('#jp-main-dock-panel').within(() => {
-      cy.get('#root_component_parameters_outputs').within(() => {
-        cy.findByRole('button', { name: /add/i }).click();
-        cy.get('input[id="root_component_parameters_outputs_0"]').type(
-          'output-1.csv'
-        );
+    cy.formArrayAdd('#root_component_parameters_outputs', 'output-1.csv');
+    cy.formArrayAdd('#root_component_parameters_outputs', 'output-2.csv');
 
-        cy.findByRole('button', { name: /add/i }).click();
-        cy.get('input[id="root_component_parameters_outputs_1"]').type(
-          'output-2.csv'
-        );
-      });
+    cy.get('#jp-main-dock-panel').within(() => {
       cy.get('#root_component_parameters_runtime_image').within(() => {
         selectRuntimeImage();
       });
@@ -231,35 +226,19 @@ describe('Pipeline Editor tests', () => {
       cy.get('#root_component_parameters_runtime_image').within(() => {
         selectRuntimeImage();
       });
-      cy.get('#root_component_parameters_outputs').within(() => {
-        cy.findByRole('button', { name: /add/i }).click();
-        cy.get('input[id="root_component_parameters_outputs_0"]').type(
-          'input-1.csv'
-        );
-
-        cy.findByRole('button', { name: /add/i }).click();
-        cy.get('input[id="root_component_parameters_outputs_1"]').type(
-          'input-2.csv'
-        );
-      });
+    });
+    cy.formArrayAdd('#root_component_parameters_outputs', 'input-1.csv');
+    cy.formArrayAdd('#root_component_parameters_outputs', 'input-2.csv');
 
+    cy.get('#jp-main-dock-panel').within(() => {
       // producer-script props
       cy.findByText('producer-script.py').click();
       cy.get('#root_component_parameters_runtime_image').within(() => {
         selectRuntimeImage();
       });
-      cy.get('#root_component_parameters_outputs').within(() => {
-        cy.findByRole('button', { name: /add/i }).click();
-        cy.get('input[id="root_component_parameters_outputs_0"]').type(
-          'output-3.csv'
-        );
-
-        cy.findByRole('button', { name: /add/i }).click();
-        cy.get('input[id="root_component_parameters_outputs_1"]').type(
-          'output-4.csv'
-        );
-      });
     });
+    cy.formArrayAdd('#root_component_parameters_outputs', 'output-3.csv');
+    cy.formArrayAdd('#root_component_parameters_outputs', 'output-4.csv');
 
     cy.savePipeline();