e2e for selecting catalog versions

packages/ui-tests/cypress/e2e/designer/catalogs/quarkusCatalog.cy.ts

@@ -0,0 +1,50 @@
+describe('Tests for Quarkus catalog type', () => {
+  beforeEach(() => {
+    cy.openHomePage();
+  });
+
+  const runtime = 'Quarkus';
+
+  it('Camel Quarkus catalog type with CR', () => {
+    cy.selectRuntimeVersion(runtime);
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+
+    cy.hoverOnRuntime(runtime);
+    cy.get(`[data-testid^="runtime-selector-Camel ${runtime}"]`).then(($element) => {
+      const dataTestidValue = $element.attr('data-testid');
+      const runtimeVersion = dataTestidValue!.substring(dataTestidValue!.lastIndexOf(' ') + 1);
+      cy.selectAppendNode('setHeader');
+      cy.checkCatalogVersion(runtimeVersion);
+    });
+
+    cy.chooseFromCatalog('component', 'as2');
+    cy.checkNodeExist('as2', 1);
+
+    cy.selectPrependNode('setHeader');
+    cy.chooseFromCatalog('processor', 'log');
+    cy.checkNodeExist('log', 2);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('uri: as2', 1);
+    cy.checkCodeSpanLine('log', 1);
+  });
+
+  it('Camel Quarkus catalog type with Kamelet', () => {
+    cy.selectRuntimeVersion(runtime);
+    cy.uploadFixture('flows/kamelet/basic.yaml');
+    cy.openDesignPage();
+
+    cy.selectPrependNode('setBody');
+    cy.chooseFromCatalog('component', 'as2');
+    cy.checkNodeExist('as2', 1);
+
+    cy.selectAppendNode('setBody');
+    cy.chooseFromCatalog('processor', 'log');
+    cy.checkNodeExist('log', 1);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('uri: as2', 1);
+    cy.checkCodeSpanLine('log', 1);
+  });
+});

packages/ui-tests/cypress/e2e/designer/catalogs/springBootCatalog.cy.ts

@@ -0,0 +1,50 @@
+describe('Tests for SpringBoot catalog type', () => {
+  beforeEach(() => {
+    cy.openHomePage();
+  });
+
+  const runtime = 'SpringBoot';
+
+  it('Camel SpringBoot catalog type with CR', () => {
+    cy.selectRuntimeVersion(runtime);
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+
+    cy.hoverOnRuntime(runtime);
+    cy.get(`[data-testid^="runtime-selector-Camel ${runtime}"]`).then(($element) => {
+      const dataTestidValue = $element.attr('data-testid');
+      const elementVersion = dataTestidValue!.substring(dataTestidValue!.lastIndexOf(' ') + 1);
+      cy.selectAppendNode('setHeader');
+      cy.checkCatalogVersion(elementVersion);
+    });
+
+    cy.chooseFromCatalog('component', 'spring-event');
+    cy.checkNodeExist('spring-event', 1);
+
+    cy.selectPrependNode('setHeader');
+    cy.chooseFromCatalog('processor', 'log');
+    cy.checkNodeExist('log', 2);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('uri: spring-event', 1);
+    cy.checkCodeSpanLine('log', 1);
+  });
+
+  it('Camel SpringBoot catalog type with Kamelet', () => {
+    cy.selectRuntimeVersion(runtime);
+    cy.uploadFixture('flows/kamelet/basic.yaml');
+    cy.openDesignPage();
+
+    cy.selectPrependNode('setBody');
+    cy.chooseFromCatalog('component', 'spring-event');
+    cy.checkNodeExist('spring-event', 1);
+
+    cy.selectAppendNode('setBody');
+    cy.chooseFromCatalog('processor', 'log');
+    cy.checkNodeExist('log', 1);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('uri: spring-event', 1);
+    cy.checkCodeSpanLine('log', 1);
+  });
+});

packages/ui-tests/cypress/e2e/designer/catalogs/userSpecifiedCatalog.cy.ts

@@ -0,0 +1,46 @@
+describe('Tests for user specified Quarkus catalog type', () => {
+  // Specify custom catalog URL
+  before(() => {
+    cy.openHomePage();
+    cy.openSettings();
+    cy.interactWithConfigInputObject('catalogUrl', Cypress.config().baseUrl + '/camel-catalog/index.json');
+    cy.get('[data-testid="settings-form-save-btn"]').click();
+    cy.waitSchemasLoading();
+  });
+
+  // Reset catalog URL
+  after(() => {
+    cy.openSettings();
+    cy.get('input[name="catalogUrl"]').clear();
+    cy.get('[data-testid="settings-form-save-btn"]').click();
+    cy.waitSchemasLoading();
+  });
+
+  const runtime = 'Quarkus';
+
+  it('User specified Camel Quarkus catalog with CR', () => {
+    cy.openDesignPage();
+    cy.selectRuntimeVersion(runtime);
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+
+    cy.hoverOnRuntime(runtime);
+    cy.get(`[data-testid^="runtime-selector-Camel ${runtime}"]`).then(($element) => {
+      const dataTestidValue = $element.attr('data-testid');
+      const elementVersion = dataTestidValue!.substring(dataTestidValue!.lastIndexOf(' ') + 1);
+      cy.selectAppendNode('setHeader');
+      cy.checkCatalogVersion(elementVersion);
+    });
+
+    cy.chooseFromCatalog('component', 'dropbox');
+    cy.checkNodeExist('dropbox', 1);
+
+    cy.selectPrependNode('setHeader');
+    cy.chooseFromCatalog('processor', 'log');
+    cy.checkNodeExist('log', 2);
+
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('uri: dropbox', 1);
+    cy.checkCodeSpanLine('log', 1);
+  });
+});

packages/ui-tests/cypress/support/cypress.d.ts

@@ -11,6 +11,7 @@ declare global {
     interface Chainable {
       // default
       openHomePage(): Chainable<JQuery<Element>>;
+      waitSchemasLoading(): Chainable<JQuery<Element>>;
       openTopbarKebabMenu(): Chainable<JQuery<Element>>;
       openAboutModal(): Chainable<JQuery<Element>>;
       closeAboutModal(): Chainable<JQuery<Element>>;
@@ -19,6 +20,7 @@ declare global {
       openSourceCode(): Chainable<JQuery<Element>>;
       openBeans(): Chainable<JQuery<Element>>;
       openMetadata(): Chainable<JQuery<Element>>;
+      openSettings(): Chainable<JQuery<Element>>;
       openPipeErrorHandler(): Chainable<JQuery<Element>>;
       openCatalog(): Chainable<JQuery<Element>>;
       addNewRoute(): Chainable<JQuery<Element>>;
@@ -46,6 +48,9 @@ declare global {
       checkEdgeExists(sourceName: string, targetName: string): Chainable<JQuery<Element>>;
       deleteBranch(branchIndex: number): Chainable<JQuery<Element>>;
       selectCamelRouteType(type: string, subType?: string): Chainable<JQuery<Element>>;
+      selectRuntimeVersion(type: string): Chainable<JQuery<Element>>;
+      hoverOnRuntime(type: string): Chainable<JQuery<Element>>;
+      checkCatalogVersion(version: string): Chainable<JQuery<Element>>;
       chooseFromCatalog(nodeType: string, name: string): Chainable<JQuery<Element>>;
       // nodeConfiguration
       interactWithExpressinInputObject(inputName: string, value?: string): Chainable<JQuery<Element>>;

packages/ui-tests/cypress/support/next-commands/default.ts

@@ -1,16 +1,20 @@
 Cypress.Commands.add('openHomePage', () => {
   const url = Cypress.config().baseUrl;
   cy.visit(url!);
+  cy.waitSchemasLoading();
+
+  cy.get('[data-testid="visualization-empty-state"]').should('exist');
+  // Wait for the element to become visible
+  cy.get('[data-testid="visualization-empty-state"]').should('be.visible');
+});
+
+Cypress.Commands.add('waitSchemasLoading', () => {
   // Wait for the loading schemas to disappear
   cy.get('[data-testid="loading-schemas"]').should('be.visible');
   cy.get('[data-testid="loading-schemas"]').should('not.exist');
   // Wait for the loading connectors to disappear
   cy.get('[data-testid="loading-catalogs"]').should('be.visible');
   cy.get('[data-testid="loading-catalogs"]').should('not.exist');
-
-  cy.get('[data-testid="visualization-empty-state"]').should('exist');
-  // Wait for the element to become visible
-  cy.get('[data-testid="visualization-empty-state"]').should('be.visible');
 });
 
 Cypress.Commands.add('expandVisualization', () => {
@@ -54,6 +58,11 @@ Cypress.Commands.add('openTopbarKebabMenu', () => {
   });
 });
 
+Cypress.Commands.add('openSettings', () => {
+  cy.openTopbarKebabMenu();
+  cy.get('[data-testid="settings-link"]').click();
+});
+
 Cypress.Commands.add('openAboutModal', () => {
   cy.openTopbarKebabMenu();
   cy.get('button#about').click();

packages/ui-tests/cypress/support/next-commands/design.ts

@@ -100,3 +100,29 @@ Cypress.Commands.add('selectCamelRouteType', (type: string, subType?: string) =>
   subType = subType ?? type;
   cy.get(`[data-testid="new-entity-${subType}"] button.pf-v5-c-menu__item`).click({ force: true });
 });
+
+Cypress.Commands.add('selectRuntimeVersion', (type: string) => {
+  cy.hoverOnRuntime(type);
+  cy.get(`[data-testid^="runtime-selector-Camel ${type}"] button.pf-v5-c-menu__item`).click({ force: true });
+  cy.waitSchemasLoading();
+
+  cy.get('[data-testid="visualization-empty-state"]').should('exist');
+  cy.get('[data-testid="visualization-empty-state"]').should('be.visible');
+});
+
+Cypress.Commands.add('hoverOnRuntime', (type: string) => {
+  cy.get('[data-testid="runtime-selector-list-dropdown"]').click({ force: true });
+  cy.get('ul.pf-v5-c-menu__list')
+    .should('exist')
+    .find(`[data-testid="runtime-selector-${type}"]`)
+    .should('exist')
+    .trigger('mouseover');
+});
+
+Cypress.Commands.add('checkCatalogVersion', (version?: string) => {
+  cy.get('.pf-v5-c-card__title-text')
+    .eq(0)
+    .within(() => {
+      cy.get('.pf-v5-c-label__text').should('contain', version);
+    });
+});