fix cypress flake in modelVersionDeployModal.cy.ts (opendatahub-io#3119)

Gkrumbach07 · Aug 26, 2024 · 5e854fe · 5e854fe
1 parent fa84620
commit 5e854fe
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 73 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDeployModal.ts b/frontend/src/__tests__/cypress/cypress/pages/modelRegistry/modelVersionDeployModal.ts
@@ -6,11 +6,12 @@ class ModelVersionDeployModal extends Modal {
   }
 
   findProjectSelector() {
-    return cy.findByTestId('deploy-model-project-selector');
+    return this.find().findByTestId('deploy-model-project-selector');
   }
 
   selectProjectByName(name: string) {
-    this.findProjectSelector().findDropdownItem(name).click();
+    this.findProjectSelector().click();
+    this.find().findByRole('menuitem', { name }).click();
   }
 }
 

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/executions.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/executions.ts
@@ -34,7 +34,10 @@ class ExecutionFilter {
   }
 
   findTypeSearchFilterItem(item: string) {
-    return this.find().findByTestId('filter-toolbar-text-field').findSelectOption(item);
+    return this.find()
+      .findByTestId('filter-toolbar-text-field')
+      .findByRole('button')
+      .findSelectOption(item);
   }
 }
 

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/experiments.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/experiments.ts
@@ -150,7 +150,7 @@ class ExperimentsTable {
   }
 
   findActionsKebab() {
-    return cy.findByTestId('experiment-table-toolbar-actions').parent();
+    return cy.findByTestId('experiment-table-toolbar-actions');
   }
 
   findRestoreExperimentButton() {

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunTable.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineRunTable.ts
@@ -54,7 +54,7 @@ class PipelineRunsTable {
   }
 
   findActionsKebab() {
-    return cy.findByRole('button', { name: 'Actions' }).parent();
+    return cy.findByRole('button', { name: 'Actions' });
   }
 
   findEmptyState() {

diff --git a/frontend/src/__tests__/cypress/cypress/support/commands/application.ts b/frontend/src/__tests__/cypress/cypress/support/commands/application.ts
@@ -177,7 +177,7 @@ Cypress.Commands.add(
 Cypress.Commands.add('findDropdownItem', { prevSubject: 'element' }, (subject, name) => {
   Cypress.log({ displayName: 'findDropdownItem', message: name });
   return cy.wrap(subject).then(($el) => {
-    if ($el.find('[aria-expanded=false]').addBack().length) {
+    if ($el.attr('aria-expanded') === 'false') {
       cy.wrap($el).click();
     }
     return cy.wrap($el).parent().findByRole('menuitem', { name });
@@ -187,7 +187,7 @@ Cypress.Commands.add('findDropdownItem', { prevSubject: 'element' }, (subject, n
 Cypress.Commands.add('findDropdownItemByTestId', { prevSubject: 'element' }, (subject, testId) => {
   Cypress.log({ displayName: 'findDropdownItemByTestId', message: testId });
   return cy.wrap(subject).then(($el) => {
-    if ($el.find('[aria-expanded=false]').addBack().length) {
+    if ($el.attr('aria-expanded') === 'false') {
       cy.wrap($el).click();
     }
     return cy.wrap($el).parent().findByTestId(testId);
@@ -197,7 +197,7 @@ Cypress.Commands.add('findDropdownItemByTestId', { prevSubject: 'element' }, (su
 Cypress.Commands.add('findSelectOption', { prevSubject: 'element' }, (subject, name) => {
   Cypress.log({ displayName: 'findSelectOption', message: name });
   return cy.wrap(subject).then(($el) => {
-    if ($el.find('[aria-expanded=false]').addBack().length) {
+    if ($el.attr('aria-expanded') === 'false') {
       cy.wrap($el).click();
     }
     //cy.get('[role=listbox]') TODO fix cases where there are multiple listboxes
@@ -208,7 +208,7 @@ Cypress.Commands.add('findSelectOption', { prevSubject: 'element' }, (subject, n
 Cypress.Commands.add('findSelectOptionByTestId', { prevSubject: 'element' }, (subject, testId) => {
   Cypress.log({ displayName: 'findSelectOptionByTestId', message: testId });
   return cy.wrap(subject).then(($el) => {
-    if ($el.find('[aria-expanded=false]').addBack().length) {
+    if ($el.attr('aria-expanded') === 'false') {
       cy.wrap($el).click();
     }
     return cy.wrap($el).parent().findByTestId(testId);

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionArchive.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelRegistry/modelVersionArchive.cy.ts
@@ -121,6 +121,10 @@ const initIntercepts = ({
 
 describe('Model version archive list', () => {
   it('No archive versions in the selected registered model', () => {
+    // Bypass patternfly ExpandableSection error https://github.com/patternfly/patternfly-react/issues/10410
+    // Cannot destructure property 'offsetWidth' of 'this.expandableContentRef.current' as it is null.
+    Cypress.on('uncaught:exception', () => false);
+
     initIntercepts({ modelVersions: [mockModelVersion({ id: '3', name: 'model version 2' })] });
     modelVersionArchive.visitModelVersionList();
     verifyRelativeURL('/modelRegistry/modelregistry-sample/registeredModels/1/versions');

diff --git a/frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx b/frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx
@@ -27,6 +27,7 @@ const DeployRegisteredModelModal: React.FC<DeployRegisteredModelModalProps> = ({
   onCancel,
   onSubmit,
 }) => {
+  const [isProjectSelectorOpen, setProjectSelectorOpen] = React.useState(false);
   const {
     servingRuntimeTemplates: [templates],
     servingRuntimeTemplateOrder: { data: templateOrder },
@@ -62,69 +63,82 @@ const DeployRegisteredModelModal: React.FC<DeployRegisteredModelModalProps> = ({
     [onCancel, onSubmit],
   );
 
-  if (
-    (platform === ServingRuntimePlatform.MULTI && !projectDeployStatusLoaded) ||
-    !selectedProject ||
-    !platform
-  ) {
-    return (
-      <Modal
-        title="Deploy model"
-        description="Configure properties for deploying your model"
-        variant="medium"
-        isOpen={isOpen}
-        onClose={() => onClose(false)}
-        actions={[
-          <Button key="deploy" variant="primary" isDisabled>
-            Deploy
-          </Button>,
-          <Button key="cancel" variant="link" onClick={() => onClose(false)}>
-            Cancel
-          </Button>,
-        ]}
-        showClose
-      >
-        <Form>
-          {deployInfoError ? (
-            <Alert variant="danger" isInline title={deployInfoError.name}>
-              {deployInfoError.message}
-            </Alert>
-          ) : !deployInfoLoaded ? (
-            <Spinner />
-          ) : (
-            <FormSection title="Model deployment">
-              <ProjectSelector
-                selectedProject={selectedProject}
-                setSelectedProject={setSelectedProject}
-                error={error}
-              />
-            </FormSection>
-          )}
-        </Form>
-      </Modal>
-    );
-  }
+  if (isOpen) {
+    if (
+      (platform === ServingRuntimePlatform.MULTI && !projectDeployStatusLoaded) ||
+      !selectedProject ||
+      !platform
+    ) {
+      return (
+        <Modal
+          title="Deploy model"
+          description="Configure properties for deploying your model"
+          variant="medium"
+          isOpen
+          onClose={() => onClose(false)}
+          actions={[
+            <Button key="deploy" variant="primary" isDisabled>
+              Deploy
+            </Button>,
+            <Button key="cancel" variant="link" onClick={() => onClose(false)}>
+              Cancel
+            </Button>,
+          ]}
+          showClose
+        >
+          <Form>
+            {deployInfoError ? (
+              <Alert variant="danger" isInline title={deployInfoError.name}>
+                {deployInfoError.message}
+              </Alert>
+            ) : !deployInfoLoaded ? (
+              <Spinner />
+            ) : (
+              <FormSection title="Model deployment">
+                <ProjectSelector
+                  selectedProject={selectedProject}
+                  setSelectedProject={setSelectedProject}
+                  error={error}
+                  isOpen={isProjectSelectorOpen}
+                  setOpen={setProjectSelectorOpen}
+                />
+              </FormSection>
+            )}
+          </Form>
+        </Modal>
+      );
+    }
 
-  return (
-    <>
-      <ManageKServeModal
-        onClose={onClose}
-        isOpen={isOpen && platform === ServingRuntimePlatform.SINGLE}
-        servingRuntimeTemplates={getKServeTemplates(templates, templateOrder, templateDisablement)}
-        shouldFormHidden={!!error}
-        registeredModelDeployInfo={registeredModelDeployInfo}
-        projectContext={{ currentProject: selectedProject, dataConnections }}
-        projectSection={
-          <ProjectSelector
-            selectedProject={selectedProject}
-            setSelectedProject={setSelectedProject}
-            error={error}
-          />
-        }
-      />
+    if (platform === ServingRuntimePlatform.SINGLE) {
+      return (
+        <ManageKServeModal
+          onClose={onClose}
+          isOpen
+          servingRuntimeTemplates={getKServeTemplates(
+            templates,
+            templateOrder,
+            templateDisablement,
+          )}
+          shouldFormHidden={!!error}
+          registeredModelDeployInfo={registeredModelDeployInfo}
+          projectContext={{ currentProject: selectedProject, dataConnections }}
+          projectSection={
+            <ProjectSelector
+              selectedProject={selectedProject}
+              setSelectedProject={setSelectedProject}
+              error={error}
+              isOpen={isProjectSelectorOpen}
+              setOpen={setProjectSelectorOpen}
+            />
+          }
+        />
+      );
+    }
+    // platform === ServingRuntimePlatform.MULTI
+    return (
       <ManageInferenceServiceModal
         onClose={onClose}
-        isOpen={isOpen && platform === ServingRuntimePlatform.MULTI}
+        isOpen
         shouldFormHidden={!!error}
         registeredModelDeployInfo={registeredModelDeployInfo}
         projectContext={{ currentProject: selectedProject, dataConnections }}
@@ -133,11 +147,14 @@ const DeployRegisteredModelModal: React.FC<DeployRegisteredModelModalProps> = ({
             selectedProject={selectedProject}
             setSelectedProject={setSelectedProject}
             error={error}
+            isOpen={isProjectSelectorOpen}
+            setOpen={setProjectSelectorOpen}
           />
         }
       />
-    </>
-  );
+    );
+  }
+  return null;
 };
 
 export default DeployRegisteredModelModal;
diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ProjectSelector.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ProjectSelector.tsx
@@ -19,15 +19,17 @@ type ProjectSelectorProps = {
   selectedProject: ProjectKind | null;
   setSelectedProject: (project: ProjectKind | null) => void;
   error?: Error;
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
 };
 
 const ProjectSelector: React.FC<ProjectSelectorProps> = ({
   selectedProject,
   setSelectedProject,
   error,
+  isOpen,
+  setOpen,
 }) => {
-  const [isOpen, setOpen] = React.useState(false);
-
   const { projects } = React.useContext(ProjectsContext);
 
   return (