feat(module-federation/bridge): Enhance Bridge capabilities and fix some issues (#2792)

Co-authored-by: Zhou xiao <[email protected]>

Author: danpeen

.changeset/good-bobcats-refuse.md

@@ -0,0 +1,8 @@
+---
+'@module-federation/bridge-react-webpack-plugin': patch
+'@module-federation/bridge-shared': patch
+'@module-federation/bridge-react': patch
+'@module-federation/bridge-vue3': patch
+---
+
+feat(@module-federation/bridge): enhance Bridge capabilities and fix some issues

.github/workflows/build-and-test.yml

@@ -71,3 +71,8 @@ jobs:
     needs: checkout-install
     uses: ./.github/workflows/e2e-modern-ssr.yml
     secrets: inherit
+
+  e2e-router:
+    needs: checkout-install
+    uses: ./.github/workflows/e2e-router.yml
+    secrets: inherit

.github/workflows/e2e-router.yml

@@ -0,0 +1,46 @@
+# .github/workflows/e2e-router-host-2000.yml
+name: E2E Test for Router
+
+on:
+  workflow_call:
+
+jobs:
+  e2e-runtime:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Pnpm
+        run: corepack enable
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'pnpm'
+
+      - name: Set Nx SHA
+        uses: nrwl/nx-set-shas@v3
+
+      - name: Set SKIP_DEVTOOLS_POSTINSTALL environment variable
+        run: echo "SKIP_DEVTOOLS_POSTINSTALL=true" >> $GITHUB_ENV
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Install Cypress
+        run: npx cypress install
+
+      - name: Run Build for All
+        run: npx nx run-many --targets=build --projects=tag:type:pkg
+
+      - name: Run condition check script
+        id: check-ci
+        run: node tools/scripts/ci-is-affected.mjs --appName=router-host-2000,router-host-v5-2200,router-host-vue3-2100,router-remote1-2001,router-remote2-2002,router-remote3-2003,router-remote4-2004
+
+      - name: E2E Test for Runtime Demo
+        if: steps.check-ci.outcome == 'success'
+        run: npx kill-port --port 2000,2001,2002,2003,2004,2200,2100 && pnpm run app:router:dev & echo "done" && sleep 20 && npx nx run-many --target=test:e2e --projects=router-host-2000 --parallel=1 && lsof -ti tcp:2000,2001,2002,2003,2004,2200,2100 | xargs kill

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "diffEditor.wordWrap": "on"
+  "diffEditor.wordWrap": "on",
+  "editor.rename.enablePreview": false
 }

apps/router-demo/router-host-2000/CHANGELOG.md

@@ -1,4 +1,4 @@
-import { getH2, getH3, wait2s } from '../support/app.po';
+import { getH2, getP, getPre } from '../support/app.po';
 
 describe('router-host-2000/', () => {
   beforeEach(() => cy.visit('/'));
@@ -17,6 +17,7 @@ describe('router-host-2000/memory-router', () => {
   });
 
   describe('memory-router', () => {
+    Cypress.on('uncaught:exception', () => false);
     it('remote1', () => {
       getH2().contains('Remote1 home page');
       cy.get('.self-remote1-detail-link').click();
@@ -28,9 +29,9 @@ describe('router-host-2000/memory-router', () => {
       getH2().contains('Remote2 home page');
     });
     it('remote3', () => {
-      getH2().contains('Remote3 detail page');
-      cy.get('.self-remote3-home-link').click();
       getH2().contains('Remote3 home page');
+      cy.get('.self-remote3-detail-link').click();
+      getH2().contains('Remote3 detail page');
     });
   });
 });

apps/router-demo/router-host-2000/cypress/e2e/host.ts renamed to apps/router-demo/router-host-2000/cypress/e2e/host.cy.ts

@@ -0,0 +1,13 @@
+import { getPre, getP } from '../support/app.po';
+
+describe('router-remote-error in host', () => {
+  beforeEach(() => cy.visit('/'));
+  describe('Remote Error render and will trigger ErrorBoundary', () => {
+    Cypress.on('uncaught:exception', () => false);
+    it('jump to remote error page', () => {
+      cy.get('.host-menu > li:nth-child(7)').click();
+      getP().contains('Something went wrong');
+      getPre().contains('This is a deliberately thrown error');
+    });
+  });
+});

apps/router-demo/router-host-2000/cypress/e2e/memory-router.cy.ts

@@ -0,0 +1,23 @@
+import { wait5s, getP, getPre } from '../support/app.po';
+
+describe('router-remote-error in host', () => {
+  beforeEach(() => cy.visit('/'));
+
+  describe('Remote Resource Error render and will trigger ErrorBoundary', () => {
+    Cypress.on('uncaught:exception', () => false);
+    it('jump to remote error page', async () => {
+      cy.get('.host-menu > li:nth-child(8)').click();
+
+      cy.get('[data-test-id="loading"]').should('have.length', 1);
+      cy.get('[data-test-id="loading"]')
+        .first()
+        .should('have.text', 'loading...');
+
+      await wait5s();
+      getP().contains('Something went wrong');
+      getPre().contains(
+        'Error: The request failed three times and has now been abandoned',
+      );
+    });
+  });
+});

apps/router-demo/router-host-2000/cypress/e2e/remote-render-error.cy.ts

@@ -1,4 +1,4 @@
-import { getH2, getH3, wait2s } from '../support/app.po';
+import { getH2, getH3, getH4, wait2s } from '../support/app.po';
 
 describe('router-remote1-2001/', () => {
   beforeEach(() => cy.visit('http://localhost:2001/'));
@@ -12,17 +12,21 @@ describe('router-remote1-2001/', () => {
   });
 });
 
-// describe('router-remote1-2001 in host', () => {
-//   beforeEach(() => cy.visit('/'));
+describe('router-remote1-2001 in host', () => {
+  beforeEach(() => cy.visit('/'));
 
-//   describe('Remote1 render and destroy', () => {
-//     it('jump to remote1 home page', () => {
-//       cy.get('.host-menu > li:nth-child(3)').click();
-//       cy.get('.menu-remote1-home-link').click();
+  describe('Remote1 render and destroy', () => {
+    it('jump to remote1 home page', () => {
+      cy.get('.host-menu > li:nth-child(3)').click();
+      cy.get('.menu-remote1-home-link').click();
 
-//       getH2().contains('Remote1 home page');
-//       cy.get('.menu-remote1-detail-link').click();
-//       getH2().contains('Remote1 detail page');
-//     });
-//   });
-// });
+      getH2().contains('Remote1 home page');
+      getH3().contains('Ming');
+      getH3().contains('12');
+      getH4().contains('Some text');
+
+      cy.get('.menu-remote1-detail-link').click();
+      getH2().contains('Remote1 detail page');
+    });
+  });
+});