Fix clo Playwright e2e by setting public path and handling fetch errors

clo/README.md

@@ -5,17 +5,19 @@ This example demos a basic host application loading remote component.
 - `host` is the host application (cra-based).
 - `remote` standalone application (cra-based) which exposes `Button` component.
 
-# Running Demo
+## Setup
 
-Run `pnpm run start`. This will build and serve both `host` and `remote` on ports 3001 and 3002 respectively.
+Run `pnpm install` in this directory to install dependencies for both `host` and `remote`.
 
-- [localhost:3001](http://localhost:3000/) (HOST)
-- [localhost:3002](http://localhost:3002/) (STANDALONE REMOTE)
+## Running Demo
+
+Run `pnpm run start`. This will build and serve both `host` and `remote` on ports 3000 and 3002 respectively.
 
-# Running Cypress E2E Tests
+- [localhost:3000](http://localhost:3000/) (HOST)
+- [localhost:3002](http://localhost:3002/) (STANDALONE REMOTE)
 
-To run tests in interactive mode, run `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress-e2e/README.md#how-to-run-tests)
+## Running Playwright E2E Tests
 
-To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
+To run tests in interactive UI mode, run `pnpm test:e2e:ui`.
 
-["Best Practices, Rules amd more interesting information here](../../cypress-e2e/README.md)
+To build the apps, start both servers, and run tests in headless mode, run `pnpm e2e:ci`.

clo/e2e/checkCraApps.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+const apps = [
+  { port: 3000, name: 'Host' },
+  { port: 3002, name: 'Remote' },
+];
+
+apps.forEach(({ port, name }) => {
+  test.describe(`Check ${name}`, () => {
+    test(`Check ${name} elements exist on the page`, async ({ page }) => {
+      await page.goto(`http://localhost:${port}`);
+      await expect(page.getByRole('heading', { level: 1 })).toContainText('Basic Host-Remote');
+      await expect(page.getByRole('heading', { level: 2, name })).toBeVisible();
+      await expect(page.getByRole('button')).toContainText('Hello from remote');
+    });
+  });
+});

clo/host/rsbuild.config.ts

@@ -9,4 +9,11 @@ export default defineConfig({
   },
   moduleFederation: { options: mfConfig },
   plugins: [pluginReact()],
+  tools: {
+    rspack: {
+      output: {
+        publicPath: 'auto',
+      },
+    },
+  },
 });

clo/package.json

@@ -9,12 +9,17 @@
   "scripts": {
     "start": "pnpm --filter clo_* start",
     "build": "pnpm --filter clo_* build",
-    "preview": "pnpm run build && pnpm --filter clo_* preview",
-    "e2e:ci": "pnpm start & npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome && lsof -ti tcp:3000,3001,3002 | xargs kill"
+    "preview": "pnpm run build && concurrently \"pnpm --filter clo_host preview\" \"pnpm --filter clo_remote preview\"",
+    "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui",
+    "test:e2e:debug": "npx playwright test --debug",
+    "e2e:ci": "pnpm install && npx playwright install --with-deps && npx playwright test --reporter=list"
   },
   "devDependencies": {
     "wait-on": "7.2.0",
     "concurrently": "8.2.2",
-    "forever": "4.0.3"
+    "forever": "4.0.3",
+    "@playwright/test": "^1.54.2",
+    "playwright": "^1.54.2"
   }
 }

clo/playwright.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 60000,
+  expect: {
+    timeout: 15000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['html', { outputFolder: 'playwright-report', open: 'never' }],
+    ['list'],
+  ],
+  use: {
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+    viewport: { width: 1920, height: 1080 },
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'pnpm preview',
+    port: 3000,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+});

clo/remote/rsbuild.config.ts

@@ -9,4 +9,11 @@ export default defineConfig({
   },
   moduleFederation: { options: mfConfig },
   plugins: [pluginReact()],
+  tools: {
+    rspack: {
+      output: {
+        publicPath: 'auto',
+      },
+    },
+  },
 });

clo/remote/src/ServiceComponent.js

@@ -21,7 +21,7 @@ function fetchData(url) {
       if (status === 'pending') {
         throw suspender;
       } else if (status === 'error') {
-        throw result;
+        return { error: result };
       } else if (status === 'success') {
         return result;
       }
@@ -33,6 +33,9 @@ const resource = fetchData('https://jsonplaceholder.typicode.com/todos/1');
 
 function HelloWorld() {
   const data = resource.read(); // This will suspend if the data isn't ready
+  if (data?.error) {
+    return <pre>Error loading data</pre>;
+  }
   return <pre>{JSON.stringify(data)}</pre>;
 }