ci: add e2e tests for multi-example app (#120)

---------

Co-authored-by: gioboa <giorgiob.boa@gmail.com>

.github/workflows/e2e-test.yml

@@ -0,0 +1,49 @@
+name: multi-example - e2e tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  pull-requests: read
+
+jobs:
+  run-playwright-tests:
+    name: Playwright Tests
+    runs-on: ubuntu-latest
+    container: node:20
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Enable Corepack and Setup PNPM
+        run: |
+          corepack enable
+          corepack prepare pnpm@9.1.3 --activate
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Chromium Browser
+        run: pnpm playwright install --with-deps chromium
+
+      - name: Build Projects
+        run: pnpm build
+
+      - name: Start Application multi-example
+        run: nohup pnpm run multi-example & pnpm exec wait-on http://localhost:5173;
+
+      - name: Run Playwright Tests
+        run: pnpm playwright test
+
+      - name: Upload Artifacts on Failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results
+          path: reports/e2e/output
+          retention-days: 3

.gitignore

@@ -4,4 +4,6 @@ dist
 .idea
 .__mf__win
 lib
-**/.__mf__temp
+**/.__mf__temp
+reports/*
+nohup.out

.vscode/settings.json

@@ -3,5 +3,6 @@
     "source.organizeImports": "always",
     "source.fixAll": "always"
   },
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "cSpell.words": ["microfrontend"]
 }

e2e/vite-webpack-rspack/tests/index.spec.ts

@@ -0,0 +1,73 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Vite Host Tests', () => {
+  test.beforeEach(async ({ page, baseURL }) => {
+    await page.goto(baseURL!);
+  });
+
+  test('test header - vite host', async ({ page }) => {
+    const womenButton = page.getByRole('button', { name: 'Women', exact: true });
+    const manButton = page.getByRole('button', { name: 'Man', exact: true });
+    const companyButton = page.getByRole('button', { name: 'Company', exact: true });
+    const storesButton = page.getByRole('button', { name: 'Stores', exact: true });
+
+    await Promise.all([
+      expect(womenButton).toBeVisible(),
+      expect(manButton).toBeVisible(),
+      expect(companyButton).toBeVisible(),
+      expect(storesButton).toBeVisible(),
+    ]);
+  });
+
+  test('test footer - vite host', async ({ page }) => {
+    const productsHeading = page.getByRole('heading', { level: 3, name: 'Products', exact: true });
+    const companyHeading = page.getByRole('heading', { level: 3, name: 'Company', exact: true });
+    const customerServiceHeading = page.getByRole('heading', {
+      level: 3,
+      name: 'Customer Service',
+      exact: true,
+    });
+
+    await Promise.all([
+      expect(productsHeading).toBeVisible(),
+      expect(companyHeading).toBeVisible(),
+      expect(customerServiceHeading).toBeVisible(),
+    ]);
+  });
+});
+
+test.describe('Vite remote', () => {
+  test('has title', async ({ page, baseURL }) => {
+    await page.goto(baseURL!);
+    const productHeader = page.getByRole('heading', {
+      level: 1,
+      name: 'Basic Tee',
+      exact: true,
+    });
+    await expect(productHeader).toBeVisible();
+  });
+});
+
+test.describe('Rspack remote', () => {
+  test('has title', async ({ page, baseURL }) => {
+    await page.goto(baseURL!);
+    const recentReviews = page.getByRole('heading', {
+      level: 2,
+      name: 'Recent reviews',
+      exact: true,
+    });
+    await expect(recentReviews).toBeVisible();
+  });
+});
+
+test.describe('Webpack remote', () => {
+  test('has title', async ({ page, baseURL }) => {
+    await page.goto(baseURL!);
+    const furtherRecommendations = page.getByRole('heading', {
+      level: 2,
+      name: 'Customers also purchased',
+      exact: true,
+    });
+    await expect(furtherRecommendations).toBeVisible();
+  });
+});

examples/vite-webpack-rspack/host/vite.config.js

@@ -23,6 +23,9 @@ const mfConfig = {
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    host: true,
+  },
   plugins: [
     react(),
     federation({

examples/vite-webpack-rspack/remote/src/Product.jsx

@@ -5,6 +5,7 @@ import ProductImage from './ProductImage';
 export default () => {
   const [size, setSize] = useState('M');
   const [color, setColor] = useState('black');
+
   return (
     <div className="lg:grid lg:auto-rows-min lg:grid-cols-12 lg:gap-x-8">
       <ProductHeader />
@@ -76,7 +77,7 @@ export default () => {
             </div>
           </div>
           <button
-            type="submit"
+            type="button"
             className="mt-8 flex w-full items-center justify-center rounded-md border border-transparent bg-slate-600 px-8 py-3 text-base font-medium text-white hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
             onClick={() => {
               window.dispatchEvent(new CustomEvent('ADD_CART'));

package.json

@@ -50,16 +50,19 @@
     "defu": "^6.1.4",
     "estree-walker": "^2",
     "magic-string": "^0.30.11",
-    "pathe": "^1.1.2",
-    "vitest": "^2.1.1"
+    "vitest": "^2.1.1",
+    "pathe": "^1.1.2"
   },
   "devDependencies": {
+    "@playwright/test": "^1.47.2",
+    "@types/node": "^22.7.4",
     "husky": "^8.0.3",
     "microbundle": "^0.15.1",
     "mime-types": "^2.1.35",
     "prettier": "3.3.3",
     "pretty-quick": "^4.0.0",
     "rimraf": "^6.0.1",
-    "vite": "^5.4.3"
+    "vite": "^5.4.3",
+    "wait-on": "^8.0.1"
   }
 }

playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'tests',
+  timeout: 30 * 1000,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  forbidOnly: Boolean(process.env.CI),
+  use: {
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'multi-example',
+      testDir: 'e2e/vite-webpack-rspack',
+      use: {
+        baseURL: 'http://localhost:5173',
+        browserName: 'chromium',
+      },
+    },
+  ],
+  outputDir: 'reports/e2e/output',
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: 'reports/e2e/playwright-report', open: 'never' }],
+    ['json', { outputFile: 'reports/e2e/test-results.json' }],
+  ],
+});