Revamp modulefederation config for testing

Author: lucferbux

frontend/config/moduleFederation.js

@@ -42,6 +42,11 @@ const readModuleFederationConfigFromPackages = () => {
 };
 
 const getModuleFederationConfig = () => {
+  // Disable module federation for Cypress tests
+  if (process.env.CYPRESS_TESTS === 'true') {
+    return [];
+  }
+
   if (process.env.MODULE_FEDERATION_CONFIG) {
     try {
       return JSON.parse(process.env.MODULE_FEDERATION_CONFIG);

frontend/package.json

@@ -54,10 +54,10 @@
     "cypress:run:mock:coverage": "rimraf src/__tests__/cypress/coverage src/__tests__/cypress/.nyc_output && CY_COVERAGE=true npm run cypress:run:mock -- {@}",
     "cypress:open:record": "CY_RECORD=1 npm run cypress:open",
     "cypress:run:record": "CY_RECORD=1 npm run cypress:run && npm run cypress:format",
-    "cypress:server:build": "ODH_DIST_DIR=./public-cypress POLL_INTERVAL=9999999 FAST_POLL_INTERVAL=9999999 WS_HOSTNAME=localhost:9002 npm run build",
-    "cypress:server:build:coverage": "COVERAGE=true npm run cypress:server:build",
+    "cypress:server:build": "ODH_DIST_DIR=./public-cypress POLL_INTERVAL=9999999 FAST_POLL_INTERVAL=9999999 WS_HOSTNAME=localhost:9002 CYPRESS_TESTS=true npm run build",
+    "cypress:server:build:coverage": "COVERAGE=true CYPRESS_TESTS=true npm run cypress:server:build",
     "cypress:server": "serve ./public-cypress -p 9001 -s -L",
-    "cypress:server:dev": "POLL_INTERVAL=9999999 FAST_POLL_INTERVAL=9999999 ODH_PORT=9001 WS_HOSTNAME=localhost:9002 npm run start:dev",
+    "cypress:server:dev": "POLL_INTERVAL=9999999 FAST_POLL_INTERVAL=9999999 ODH_PORT=9001 WS_HOSTNAME=localhost:9002 CYPRESS_TESTS=true npm run start:dev",
     "cypress:format": "prettier --write src/__tests__/**/*.snap.json",
     "test:cypress:e2e": "cd src/__tests__/cypress && npx cypress run --env grepTags=\"${CY_TEST_TAGS}\",skipTags=\"${CY_SKIP_TAGS}\" --browser chrome",
     "test:cypress:e2e:open": "cd src/__tests__/cypress && npx cypress open --env grepTags=\"${CY_TEST_TAGS}\",skipTags=\"${CY_SKIP_TAGS}\""

frontend/src/__tests__/cypress/cypress/support/e2e.ts

@@ -20,6 +20,7 @@ import '@cypress/code-coverage/support';
 import 'cypress-mochawesome-reporter/register';
 import 'cypress-plugin-steps';
 import './commands';
+import '#~/__tests__/cypress/cypress/utils/moduleFederationMock';
 import { asProjectAdminUser } from '#~/__tests__/cypress/cypress/utils/mockUsers';
 import { mockDscStatus } from '#~/__mocks__/mockDscStatus';
 import { addCommands as webSocketsAddCommands } from './websockets';
@@ -325,6 +326,10 @@ beforeEach(function beforeEachHook(this: Mocha.Context) {
   if (Cypress.env('MOCK')) {
     // Fallback: return 404 for all API requests.
     cy.intercept({ pathname: '/api/**' }, { statusCode: 404 });
+
+    // Set up module federation mocks
+    cy.setupModuleFederationMocks(['modelRegistry']);
+
     // Default intercepts.
     cy.interceptOdh('GET /api/dsc/status', mockDscStatus({}));
     asProjectAdminUser();

frontend/src/__tests__/cypress/cypress/utils/moduleFederationMock.ts

@@ -0,0 +1,87 @@
+/**
+ * Module Federation Mock Utilities for Cypress Tests
+ *
+ * This file provides utilities to mock module federation behavior
+ * during Cypress tests to prevent runtime errors.
+ */
+
+/**
+ * Mock remote entry content that provides a basic module federation interface
+ */
+export const createMockRemoteEntry = (moduleName: string): string => `
+  // Mock module federation remote entry for ${moduleName}
+  (function() {
+    if (!window.__FEDERATION__) {
+      window.__FEDERATION__ = {};
+    }
+    
+    if (!window.__FEDERATION__.moduleMap) {
+      window.__FEDERATION__.moduleMap = {};
+    }
+    
+    // Mock the module exports
+    window.__FEDERATION__.moduleMap['${moduleName}'] = {
+      get: function(scope) {
+        if (scope === 'extensions') {
+          return Promise.resolve({
+            default: []
+          });
+        }
+        return Promise.resolve({});
+      },
+      init: function() {
+        return Promise.resolve();
+      }
+    };
+    
+    // Export for ES modules compatibility
+    if (typeof module !== 'undefined' && module.exports) {
+      module.exports = window.__FEDERATION__.moduleMap['${moduleName}'];
+    }
+  })();
+`;
+
+/**
+ * Cypress command to set up module federation mocks
+ */
+export const setupModuleFederationMocks = (modules: string[] = ['modelRegistry']): void => {
+  modules.forEach((moduleName) => {
+    // Mock the remote entry file
+    cy.intercept(
+      { pathname: `/_mf/${moduleName}/remoteEntry.js` },
+      {
+        statusCode: 200,
+        headers: { 'content-type': 'application/javascript' },
+        body: createMockRemoteEntry(moduleName),
+      },
+    );
+
+    // Mock the extensions endpoint
+    cy.intercept(
+      { url: `**/_mf/${moduleName}/**/extensions` },
+      {
+        statusCode: 200,
+        headers: { 'content-type': 'application/javascript' },
+        body: 'export default [];',
+      },
+    );
+  });
+
+  // Mock any other module federation paths with 404
+  cy.intercept({ pathname: '/_mf/**' }, { statusCode: 404 });
+};
+
+/**
+ * Add the command to Cypress
+ */
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    interface Chainable {
+      setupModuleFederationMocks: (modules?: string[]) => Chainable<void>;
+    }
+  }
+}
+
+Cypress.Commands.add('setupModuleFederationMocks', setupModuleFederationMocks);

frontend/src/plugins/useAppExtensions.ts

@@ -24,18 +24,24 @@ const initRemotes = (remotes: MFConfig[]) => {
 };
 
 const loadModuleExtensions = (moduleName: string): Promise<Record<string, Extension[]>> =>
-  loadRemote<{ default: Extension[] }>(`${moduleName}/extensions`).then((result) => ({
-    [moduleName]: result ? result.default : [],
-  }));
+  loadRemote<{ default: Extension[] }>(`${moduleName}/extensions`)
+    .then((result) => ({
+      [moduleName]: result ? result.default : [],
+    }))
+    .catch((error) => {
+      // eslint-disable-next-line no-console
+      console.warn(`Failed to load module extensions for ${moduleName}:`, error);
+      return { [moduleName]: [] };
+    });
 
 export const useAppExtensions = (): [Record<string, Extension[]>, boolean] => {
   const [appExtensions, setAppExtensions] = React.useState<Record<string, Extension[]>>({});
   const [loaded, setLoaded] = React.useState(!MF_CONFIG);
 
   React.useEffect(() => {
     if (MF_CONFIG) {
-      const remotes: MFConfig[] = JSON.parse(MF_CONFIG);
       try {
+        const remotes: MFConfig[] = JSON.parse(MF_CONFIG);
         if (remotes.length > 0) {
           initRemotes(remotes);
           allSettledPromises(remotes.map((r) => loadModuleExtensions(r.name)))
@@ -46,13 +52,17 @@ export const useAppExtensions = (): [Record<string, Extension[]>, boolean] => {
                 );
               }
             })
+            .catch((error) => {
+              // eslint-disable-next-line no-console
+              console.warn('Error loading module federation extensions:', error);
+            })
             .finally(() => setLoaded(true));
         } else {
           setLoaded(true);
         }
       } catch (error) {
         // eslint-disable-next-line no-console
-        console.error('Error parsing module federation config:', error);
+        console.warn('Error with module federation setup:', error);
         setLoaded(true);
       }
     }