Broken tests fix and Github Action update to run the Cypress tests (#32)

Co-authored-by: Andreas Kienle <[email protected]>

Author: lucasgoral

.github/workflows/build.yaml

@@ -1,10 +1,10 @@
-name: Build
+name: Build and Test
 
 on:
   workflow_call:
 
 jobs:
-  build:
+  build-and-test:
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -16,9 +16,24 @@ jobs:
         uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
         with:
           node-version: 22
+          cache: 'npm' # Added caching for faster installs
 
       - name: Install dependencies
         run: npm ci
 
       - name: Build
         run: npm run build
+
+      - name: Run Cypress Tests
+        run: npm run test
+
+      - name: Upload Cypress Screenshots
+        if: always() # Run this step even if tests fail
+        uses: actions/upload-artifact@v4
+        with:
+          name: cypress-screenshots
+          path: |
+            cypress/screenshots/
+          retention-days: 7 # Keep artifacts for 7 days
+          if-no-files-found: warn # Warn instead of fail if no screenshots found
+

cypress/support/component.tsx

@@ -20,7 +20,8 @@ import { ThemeProvider } from '@ui5/webcomponents-react';
 import { mount } from 'cypress/react';
 // Import commands.js using ES2015 syntax:
 import './commands';
-import { FrontendConfigProvider, Landscape } from "../../src/context/FrontendConfigContext";
+import { FrontendConfigContext } from '../../src/context/FrontendConfigContext';
+import { mockedFrontendConfig } from '../../src/utils/testing';
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -36,12 +37,11 @@ declare global {
 }
 
 
-
 Cypress.Commands.add('mount', (component, options) => {
-  return mount(<ThemeProvider><FrontendConfigProvider config={{
-    "backendUrl": "http://localhost:3000",
-    "landscape": "DEV" as Landscape,
-    "documentationBaseUrl": "http://localhost:3000"
-  }}>{component} </FrontendConfigProvider></ThemeProvider>, options);
+  return mount(<ThemeProvider>
+    <FrontendConfigContext value={mockedFrontendConfig}>
+      {component}
+    </FrontendConfigContext>
+  </ThemeProvider>, options);
 });
 

src/context/FrontendConfigContext.tsx

@@ -6,6 +6,7 @@ export enum Landscape {
   Canary = 'CANARY',
   Staging = 'STAGING',
   Development = 'DEV',
+  Local = 'LOCAL',
 }
 
 interface FrontendConfigContextProps {
@@ -15,19 +16,18 @@ interface FrontendConfigContextProps {
   links: DocLinkCreator;
 }
 
-const FrontendConfigContext = createContext<FrontendConfigContextProps | null>(
+export const FrontendConfigContext = createContext<FrontendConfigContextProps | null>(
   null,
 );
 
+
 const fetchPromise = fetch('/frontend-config.json').then((res) => res.json());
 
 interface FrontendConfigProviderProps {
   children: ReactNode;
 }
 
-export function FrontendConfigProvider({
-  children,
-}: FrontendConfigProviderProps) {
+export function FrontendConfigProvider({ children }: FrontendConfigProviderProps) {
   const config = use(fetchPromise);
   const docLinks = new DocLinkCreator(config.documentationBaseUrl);
   const value: FrontendConfigContextProps = {

src/utils/index.ts

@@ -10,3 +10,4 @@ export const extractWorkspaceNameFromNamespace = (namespace: string) => {
 export const projectnameToNamespace = (projectname: string) => {
   return `project-${projectname}`;
 };
+

src/utils/testing.ts

@@ -0,0 +1,11 @@
+import { DocLinkCreator } from '../lib/shared/links.ts';
+import { Landscape } from '../context/FrontendConfigContext.tsx';
+
+export const isInTestingMode: Boolean = !!window.Cypress;
+const documentationBaseUrl = 'http://localhost:3000';
+export const mockedFrontendConfig = {
+  backendUrl: 'http://localhost:3000',
+  landscape: Landscape.Local,
+  documentationBaseUrl: 'http://localhost:3000',
+  links: new DocLinkCreator(documentationBaseUrl),
+};