Improve microfrontend e2e test with real plugin setup with module fed

Author: amortemousque

LICENSE-3rdparty.csv

@@ -13,6 +13,7 @@ prod,react-dom,MIT,Copyright (c) Facebook, Inc. and its affiliates.
 dev,typedoc,Apache-2.0,TypeStrong
 dev,@eslint/js,MIT,Copyright OpenJS Foundation and other contributors, <www.openjsf.org>
 dev,@jsdevtools/coverage-istanbul-loader,MIT,Copyright (c) 2015 James Messinger
+dev,@module-federation/enhanced,MIT, Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson) Zhou Shaw (zhouxiao)
 dev,@playwright/test,Apache-2.0,Copyright Microsoft Corporation
 dev,@swc/core,Apache-2.0,Copyright (c) SWC Contributors
 dev,@types/chrome,MIT,Copyright Microsoft Corporation

eslint.config.mjs

@@ -27,6 +27,7 @@ export default tseslint.config(
       'test/**/dist',
       'test/apps/react-heavy-spa',
       'test/apps/react-shopist-like',
+      'test/apps/microfrontend',
       'sandbox',
       'coverage',
       'rum-events-format',

scripts/build/build-test-apps.ts

@@ -18,6 +18,7 @@ runMain(async () => {
   buildApp('test/apps/react-router-v6-app')
   buildApp('test/apps/react-heavy-spa')
   buildApp('test/apps/react-shopist-like')
+  buildApp('test/apps/microfrontend')
   await buildReactRouterv7App()
   await buildExtensions()
 

test/apps/microfrontend/.gitignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+.yarn/*

test/apps/microfrontend/app1.ts

@@ -0,0 +1,3 @@
+import { createApp } from './common'
+
+createApp('app1', 'App 1 (mfe-app1-service v1.0.0)', 'blue')

test/apps/microfrontend/app2.ts

@@ -0,0 +1,3 @@
+import { createApp } from './common'
+
+createApp('app2', 'App 2 (mfe-app2-service v0.2.0)', 'green')

test/apps/microfrontend/bootstrap.ts

@@ -0,0 +1,2 @@
+// @ts-ignore The dynamic import keeps shell.ts out of the entry chunk,
+void import('./shell')

test/apps/microfrontend/common.ts

@@ -0,0 +1,67 @@
+function createContainer(id: string, title: string, borderColor: string) {
+  const container = document.createElement('div')
+  container.id = id
+  container.style.flex = '1'
+  container.style.border = `2px solid ${borderColor}`
+  container.style.padding = '10px'
+
+  const appTitle = document.createElement('h2')
+  appTitle.textContent = title
+  container.appendChild(appTitle)
+  document.body.appendChild(container)
+  return container
+}
+
+function createButton(container: HTMLElement, eventType: string, clickHandler: () => void) {
+  const button = document.createElement('button')
+  button.id = `${container.id}-${eventType}`
+  button.textContent = `${container.id}-${eventType}`
+  button.onclick = clickHandler
+  container.appendChild(button)
+}
+
+export function createApp(id: string, title: string, borderColor: string) {
+  const container = createContainer(id, title, borderColor)
+
+  createButton(container, 'fetch', () => {
+    void fetch('/ok')
+  })
+
+  createButton(container, 'xhr', () => {
+    const xhr = new XMLHttpRequest()
+    xhr.open('GET', '/ok')
+    xhr.send()
+  })
+
+  createButton(container, 'error', () => {
+    window.DD_RUM.addError(new Error(`${id}-error`))
+  })
+
+  createButton(container, 'console-error', () => {
+    console.error(`${id}-console-error`)
+  })
+
+  createButton(container, 'runtime-error', () => {
+    throw new Error(`${id}-runtime-error`)
+  })
+
+  createButton(container, 'loaf', () => {
+    const end = performance.now() + 55
+    while (performance.now() < end) {
+      // block the handler for ~55ms to trigger a long task
+    }
+  })
+
+  createButton(container, 'custom-action', () => {
+    window.DD_RUM.addAction(`${id}-action`)
+  })
+
+  createButton(container, 'vital', () => {
+    const ref = window.DD_RUM.startDurationVital(`${id}-vital`)
+    window.DD_RUM.stopDurationVital(ref)
+  })
+
+  createButton(container, 'view', () => {
+    window.DD_RUM.startView({ name: `${id}-view` })
+  })
+}

test/apps/microfrontend/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "microfrontend-test-app",
+  "private": true,
+  "scripts": {
+    "build": "webpack --config webpack.app1.js && webpack --config webpack.app2.js && webpack --config webpack.shell.js"
+  },
+  "devDependencies": {
+    "@datadog/webpack-plugin": "^3.1.0",
+    "@module-federation/enhanced": "^2.0.1",
+    "ts-loader": "9.5.4",
+    "typescript": "5.9.3",
+    "webpack": "5.105.2",
+    "webpack-cli": "^6.0.1"
+  }
+}

test/apps/microfrontend/shell.ts

@@ -0,0 +1,6 @@
+async function initShell() {
+  // @ts-ignore Module Federation remote entries
+  await Promise.all([import('app1/app1'), import('app2/app2')])
+}
+
+void initShell()