kyma-project · mrCherry97 · Jan 29, 2025 · Oct 31, 2024 · Nov 4, 2024 · Nov 4, 2024
@@ -16,12 +16,6 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.pull_request.draft == false
     steps:
-      - name: Install Chrome # this step could be removed after https://github.com/cypress-io/cypress/issues/30374 is resolved
-        shell: bash
-        run: |
-          wget --no-verbose -O /tmp/chrome.deb https://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_127.0.6533.119-1_amd64.deb 
-          sudo apt install --allow-downgrades -y /tmp/chrome.deb 
-          rm /tmp/chrome.deb
       - uses: gardenlinux/workflow-telemetry-action@v2
         with:
           comment_on_pr: false

@@ -16,12 +16,6 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.pull_request.draft == false
     steps:
-      - name: Install Chrome
-        shell: bash
-        run: |
-          wget --no-verbose -O /tmp/chrome.deb https://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_127.0.6533.119-1_amd64.deb 
-          sudo apt install --allow-downgrades -y /tmp/chrome.deb 
-          rm /tmp/chrome.deb
       - uses: gardenlinux/workflow-telemetry-action@v2
         with:
           comment_on_pr: false

@@ -1,16 +1,19 @@
-name: PR Unit Tests
+name: PR Unit and Component Tests
 
-on: 
+on:
   pull_request:
     types: [opened, edited, synchronize, reopened, ready_for_review]
     paths:
-      - ".github/workflows/pull-unit-tests.yml"
-      - "public/**"
-      - "src/**"
-      - "package.json"
+      - '.github/workflows/pull-unit-tests.yml'
+      - 'public/**'
+      - 'src/**'
+      - 'backend/**'
+      - 'package.json'
+      - 'cypress/**'
+      - 'cypress.config.component.ts'
 
 jobs:
-  run-unit-test:
+  run-unit-and-component-test:
     runs-on: ubuntu-latest
     if: github.event.pull_request.draft == false
     steps:
@@ -27,7 +30,11 @@ jobs:
         run: |
           set -e
           npm ci
-      - name: run_tests
+      - name: run_unit_tests
         shell: bash
-        run: |          
+        run: |
           npm run test
+      - name: run_component_tests
+        shell: bash
+        run: |
+          npm run component-test-headless
@@ -0,0 +1,14 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  component: {
+    screenshotOnRunFailure: false,
+    includeShadowDom: true,
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
+    specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/component.jsx',
+  },
+});
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
@@ -0,0 +1,37 @@
+/* global Cypress */
+import React from 'react';
+import { mount } from 'cypress/react18';
+import { ThemeProvider } from '@ui5/webcomponents-react';
+import { MemoryRouter } from 'react-router-dom';
+import { RecoilRoot } from 'recoil';
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { I18nextProvider } from 'react-i18next';
+
+i18n.use(initReactI18next).init({
+  lng: 'en',
+  fallbackLng: false,
+  nsSeparator: '::',
+  defaultNS: 'translation',
+  saveMissing: true,
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+Cypress.Commands.add(
+  'mount',
+  (component, { initializeRecoil, ...options } = {}) => {
+    return mount(
+      <RecoilRoot initializeState={initializeRecoil}>
+        <I18nextProvider i18n={i18n}>
+          <MemoryRouter>
+            <ThemeProvider>{component}</ThemeProvider>
+          </MemoryRouter>
+        </I18nextProvider>
+      </RecoilRoot>,
+      options,
+    );
+  },
+);
@@ -12,7 +12,7 @@ Each pull request (PR) to the repository triggers CI/CD jobs that verify the Bus
 - `PR Kyma Dashboard Smoke Tests Prod / run-smoke-test-prod` - Performs smoke testing for Busola with PROD environement and configuration related to the Kyma functionalities using a k3d cluster with installed Kyma.
 - `PR Lighthouse Test / run-lighthouse-test` - Performs performance testing for Busola - threshold for accessibility: 80, best-practices: 100.
 - `PR Lint Check / run-lint-check` - Performing ESlint and Prettier code quality.
-- `PR Unit Tests / run-unit-test` - Performs unit tests of the Busola.
+- `PR Unit and Component Tests / run-unit-and-component-test` - Performs unit tests and component tests of Busola.
 - `Lint Markdown Links PR / markdown-link-check` - Checks links in documentation.
 - `CodeQL / Analyze (javascript)` - Code quality static code check.