chore: add e2e PR hook

.github/workflows/e2e-tests.yml

@@ -0,0 +1,236 @@
+name: 🏗️ E2E Tests (Cypress)
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [ opened, synchronize, reopened ]
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+
+    container:
+      image: cypress/browsers:node-18.16.0-chrome-112.0.5615.121-1-ff-112.0.1-edge-112.0.1722.48-1
+      options: --user 1001
+
+    steps:
+      - name: 👷‍♀️ Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/cache@v3
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - uses: actions/cache@v3
+        with:
+          path: ~/.m2/repository
+          key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
+          restore-keys: |
+            ${{ runner.os }}-maven-
+
+      - uses: actions/setup-java@v3
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+
+      # Install dependencies
+      - run: yarn install --immutable
+
+      # Build packages excluding @kaoto-next/camel-catalog since it was build during installing dependencies
+      - name: Build packages
+        run: yarn workspaces foreach --verbose --topological-dev --exclude @kaoto-next/camel-catalog run build
+
+      # Build lib
+      - name: Build @kaoto-next/ui package in lib mode
+        run: yarn workspace @kaoto-next/ui run build:lib
+
+      - name: 💾 Save build folder
+        uses: actions/upload-artifact@v3
+        with:
+          name: ui-dist
+          if-no-files-found: error
+          path: packages/ui/dist
+
+      - name: 💾 Save catalog build folder
+        uses: actions/upload-artifact@v3
+        with:
+          name: catalog-dist
+          if-no-files-found: error
+          path: packages/camel-catalog/dist
+
+  test-on-firefox:
+    needs: install
+    runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-18.16.0-chrome-112.0.5615.121-1-ff-112.0.1-edge-112.0.1722.48-1
+      options: --user 1001
+
+    steps:
+      - name: 👷‍♀️ Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-java@v3
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+
+      - name: 🗄️ Download the UI build folder
+        uses: actions/download-artifact@v3
+        with:
+          name: ui-dist
+          path: packages/ui/dist
+
+      - name: 🗄️ Download the catalog build folder
+        uses: actions/download-artifact@v3
+        with:
+          name: catalog-dist
+          path: packages/camel-catalog/dist
+
+      - name: 🔨 Cypress run
+        uses: cypress-io/[email protected]
+        with:
+          browser: firefox
+          # we have already installed all dependencies above
+          # install: false
+          start: yarn workspace @kaoto-next/ui run start
+          working-directory: packages/ui-tests
+          wait-on: 'http://localhost:5173'
+          wait-on-timeout: 120
+        env:
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 💾 Save videos
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: videos-firefox
+          path: packages/ui-tests/cypress/videos
+
+      - name: 💾 Save screenshots
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: screenshots-firefox
+          path: packages/ui-tests/cypress/screenshots
+
+  test-on-chrome:
+    needs: install
+    runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-18.16.0-chrome-112.0.5615.121-1-ff-112.0.1-edge-112.0.1722.48-1
+      options: --user 1001
+
+    steps:
+      - name: 👷‍♀️ Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-java@v3
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+
+      - name: 🗄️ Download the UI build folder
+        uses: actions/download-artifact@v3
+        with:
+          name: ui-dist
+          path: packages/ui/dist
+
+      - name: 🗄️ Download the catalog build folder
+        uses: actions/download-artifact@v3
+        with:
+          name: catalog-dist
+          path: packages/camel-catalog/dist
+
+      - name: 🔨 Cypress run
+        uses: cypress-io/[email protected]
+        with:
+          browser: chrome
+          # we have already installed all dependencies above
+          # install: false
+          start: yarn workspace @kaoto-next/ui run start
+          working-directory: packages/ui-tests
+          wait-on: 'http://localhost:5173'
+          wait-on-timeout: 120
+        env:
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 💾 Save videos
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: videos-chrome
+          path: packages/ui-tests/cypress/videos
+
+      - name: 💾 Save screenshots
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: screenshots-chrome
+          path: packages/ui-tests/cypress/screenshots
+
+  test-on-edge:
+    needs: install
+    runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-18.16.0-chrome-112.0.5615.121-1-ff-112.0.1-edge-112.0.1722.48-1
+      options: --user 1001
+
+    steps:
+      - name: 👷‍♀️ Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-java@v3
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+
+      - name: 🗄️ Download the UI build folder
+        uses: actions/download-artifact@v3
+        with:
+          name: ui-dist
+          path: packages/ui/dist
+
+      - name: 🗄️ Download the catalog build folder
+        uses: actions/download-artifact@v3
+        with:
+          name: catalog-dist
+          path: packages/camel-catalog/dist
+
+      - name: 🔨 Cypress run
+        uses: cypress-io/[email protected]
+        with:
+          browser: edge
+          # we have already installed all dependencies above
+          # install: false
+          start: yarn workspace @kaoto-next/ui run start
+          working-directory: packages/ui-tests
+          wait-on: 'http://localhost:5173'
+          wait-on-timeout: 120
+        env:
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 💾 Save videos
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: videos-edge
+          path: packages/ui-tests/cypress/videos
+
+      - name: 💾 Save screenshots
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: screenshots-edge
+          path: packages/ui-tests/cypress/screenshots

packages/ui-tests/cypress/e2e/beans.cy.ts

@@ -3,24 +3,31 @@ describe('Test for Bean support', () => {
     cy.openHomePage();
   });
 
-  it('Beans - create a new bean using the bean editor', () => {
+  it('Beans - create a new bean using bean editor', () => {
     cy.uploadFixture('flows/CamelRoute.yaml');
     cy.openBeans();
     cy.get('[data-testid="metadata-add-Beans-btn"]').eq(0).click();
-    cy.get(`input[name="name"]`).type('test');
-    cy.get(`input[name="type"]`).type('org.acme');
+    cy.get(`input[name="name"]`).clear().type('test');
+    cy.get(`input[name="type"]`).clear().type('org.acme');
 
-    cy.get('[data-testid="expandable-section-properties"]').within(() => {
-      cy.get('.pf-v5-c-expandable-section__toggle').click();
-    });
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('- beans:');
+    cy.checkCodeSpanLine('- name: test');
+    cy.checkCodeSpanLine('type: org.acme');
+
+    cy.openBeans();
+    cy.forceSelectMetadataRow(0);
+    cy.expandWrappedSection('properties');
     cy.get('[data-testid="properties-add-string-property--btn"]').not(':hidden').first().click({ force: true });
-    cy.get('[data-testid="properties--placeholder-name-input"]').click();
+    cy.get('[data-testid="properties--placeholder-name-input"]').should('not.be.disabled');
+    cy.get('[data-testid="properties--placeholder-name-input"]').click({ force: true });
     cy.get('[data-testid="properties--placeholder-name-input"]').clear().type('test');
 
-    cy.get('[data-testid="properties--placeholder-value-input"]').click();
+    cy.get('[data-testid="properties--placeholder-value-input"]').should('not.be.disabled');
+    cy.get('[data-testid="properties--placeholder-value-input"]').click({ force: true });
     cy.get('[data-testid="properties--placeholder-value-input"]').clear().type('value');
 
-    cy.get('[data-testid="properties--placeholder-property-edit-confirm--btn"]').click();
+    cy.get('[data-testid="properties--placeholder-property-edit-confirm--btn"]').click({ force: true });
     cy.openSourceCode();
 
     // CHECK the bean was created in the code editor
@@ -42,10 +49,7 @@ describe('Test for Bean support', () => {
     cy.get('@row').find('td').eq(1).should('contain', 'org.acme');
     cy.get('@row').click();
 
-    cy.get('[data-testid="expandable-section-properties"]').within(() => {
-      cy.get('.pf-v5-c-expandable-section__toggle').click();
-    });
-
+    cy.expandWrappedSection('properties');
     cy.get('[data-testid="properties-property-name-label"]').should('exist');
     cy.get('[data-testid="properties-property-value-label"]').should('exist');
 
@@ -73,9 +77,7 @@ describe('Test for Bean support', () => {
     cy.openBeans();
 
     cy.get('[data-testid="metadata-row-0"]').click();
-    cy.get('[data-testid="expandable-section-properties"]').within(() => {
-      cy.get('.pf-v5-c-expandable-section__toggle').click();
-    });
+    cy.expandWrappedSection('properties');
     cy.get('[data-testid="properties-property-name-label"]').should('exist');
     cy.get('[data-testid="properties-property-value-label"]').should('exist');
     cy.get('[data-testid="properties-property-delete-property-btn"]').click();
@@ -93,9 +95,17 @@ describe('Test for Bean support', () => {
     cy.get('[data-testid="metadata-delete-1-btn"]').click();
     cy.get('[data-testid="metadata-row-1"]').should('not.exist');
 
-    // CHECK the bean was deleted in the code editor
+    // CHECK the first bean was deleted in the code editor
     cy.openSourceCode();
     cy.checkCodeSpanLine('- name: test2', 0);
     cy.checkCodeSpanLine('value: value', 0);
+    // blocked ATM by - https://github.com/KaotoIO/kaoto-next/issues/245
+    // cy.openBeans();
+    // cy.get('[data-testid="metadata-delete-0-btn"]').click();
+    // cy.get('[data-testid="metadata-row-0"]').should('not.exist');
+    // // CHECK the second bean was deleted in the code editor
+    // cy.openSourceCode();
+    // cy.checkCodeSpanLine('- name: test', 0);
+    // cy.checkCodeSpanLine('type: org.acme', 0);
   });
 });

packages/ui-tests/cypress/e2e/catalog.cy.ts

@@ -5,25 +5,25 @@ describe('Catalog related tests', () => {
 
   it('Catalog search', () => {
     cy.openCatalog();
-    cy.get('[data-testid="Component-catalog-tab"]').click();
+    cy.get('[data-testid="component-catalog-tab"]').click();
     cy.get('.pf-v5-c-text-input-group__text-input').click();
     cy.get('.pf-v5-c-text-input-group__text-input').type('timer');
     cy.get('div[id="timer"]').should('be.visible');
     cy.get('button[aria-label="Reset"]').click();
 
-    cy.get('[data-testid="Processor-catalog-tab"]').click();
+    cy.get('[data-testid="model-catalog-tab"]').click();
     cy.get('.pf-v5-c-text-input-group__text-input').type('choice');
     cy.get('div[id="choice"]').should('be.visible');
     cy.get('button[aria-label="Reset"]').click();
 
-    cy.get('[data-testid="Kamelet-catalog-tab"]').click();
+    cy.get('[data-testid="kamelet-catalog-tab"]').click();
     cy.get('.pf-v5-c-text-input-group__text-input').type('google');
     cy.get('div[id="google-storage-source"]').should('be.visible');
   });
 
   it('Catalog filtering usign tags', () => {
     cy.openCatalog();
-    cy.get('[data-testid="Component-catalog-tab"]').click();
+    cy.get('[data-testid="component-catalog-tab"]').click();
     cy.get('[data-testid="tag-cloud"]').first().click();
     cy.get('[data-testid="tag-database"]').first().click();
     cy.get('[data-testid="tag-serverless"]').first().click();
@@ -39,14 +39,13 @@ describe('Catalog related tests', () => {
   it('Catalog list view switch check', () => {
     cy.openCatalog();
     cy.get('#toggle-layout-button-List').click();
-    cy.get('[data-testid="Kamelet-catalog-tab"]').click();
+    cy.get('[data-testid="kamelet-catalog-tab"]').click();
+    cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'false');
+    cy.openSourceCode();
+    cy.openCatalog();
     cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'false');
-    // This does not work ATM - relates to https://github.com/KaotoIO/kaoto-next/issues/184
-    // cy.openSourceCode();
-    // cy.openCatalog();
-    // cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'false');
     cy.get('#toggle-layout-button-Gallery').click();
-    cy.get('[data-testid="Component-catalog-tab"]').click();
+    cy.get('[data-testid="component-catalog-tab"]').click();
     cy.get('#toggle-layout-button-Gallery').should('have.attr', 'aria-pressed', 'true');
   });
 });

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

@@ -30,4 +30,23 @@ describe('Tests for Design page', () => {
     cy.checkCodeSpanLine('user: user');
     cy.checkCodeSpanLine('password: password');
   });
+
+  it('Design - remove steps from CamelRoute', () => {
+    cy.uploadFixture('flows/CamelRoute.yaml');
+    cy.openDesignPage();
+    cy.removeNodeByName('setHeader');
+    cy.removeNodeByName('log:test');
+    cy.removeNodeByName('timer:test');
+    cy.openSourceCode();
+    cy.checkCodeSpanLine('uri: timer:test', 0);
+    cy.checkCodeSpanLine('setHeader', 0);
+    cy.checkCodeSpanLine('constant: test', 0);
+    cy.checkCodeSpanLine('name: test', 0);
+    cy.checkCodeSpanLine('uri: log:test', 0);
+  });
+
+  //   Blocked by - https://github.com/KaotoIO/kaoto-next/issues/253
+  // it('Design - remove steps from Pipe/KB', () => {
+  //   cy.uploadFixture('flows/TimerKafkaKB.yaml');
+  // });
 });