test(rsc-mf): broaden rsc federation exposure matrix

Author: cursoragent

tests/integration/rsc-mf/host/src/server-component-root/App.tsx

@@ -1,19 +1,38 @@
 import 'server-only';
 import { Suspense } from 'react';
+import { AsyncRemoteServerInfo } from 'rscRemote/AsyncRemoteServerInfo';
+import RemoteClientBadge from 'rscRemote/RemoteClientBadge';
 import { RemoteNestedMixed } from 'rscRemote/RemoteNestedMixed';
+import RemoteServerDefault from 'rscRemote/RemoteServerDefault';
+import remoteMeta, { getRemoteMetaLabel } from 'rscRemote/remoteMeta';
 import { getServerOnlyInfo } from 'rscRemote/remoteServerOnly';
+import getServerOnlyDefaultInfo from 'rscRemote/remoteServerOnlyDefault';
 import styles from './App.module.less';
+import HostRemoteActionRunner from './HostRemoteActionRunner';
 
 const App = () => {
   const remoteServerOnlyInfo = getServerOnlyInfo();
+  const remoteServerOnlyDefaultInfo = getServerOnlyDefaultInfo();
+  const remoteMetaLabel = getRemoteMetaLabel();
 
   return (
     <div className={styles.root}>
       <h1>Host RSC Module Federation</h1>
       <p className="host-remote-server-only">{remoteServerOnlyInfo}</p>
+      <p className="host-remote-server-only-default">
+        {remoteServerOnlyDefaultInfo}
+      </p>
+      <p className="host-remote-meta-kind">{remoteMeta.kind}</p>
+      <p className="host-remote-meta-label">{remoteMetaLabel}</p>
+      <Suspense fallback={<div>Loading Remote Async Server Info...</div>}>
+        <AsyncRemoteServerInfo />
+      </Suspense>
+      <RemoteServerDefault label="Remote Default Server Card" />
       <Suspense fallback={<div>Loading Remote RSC...</div>}>
         <RemoteNestedMixed label="Remote Federated Tree" />
       </Suspense>
+      <RemoteClientBadge initialLabel="remote-client-badge-initial" />
+      <HostRemoteActionRunner />
     </div>
   );
 };

tests/integration/rsc-mf/host/src/server-component-root/HostRemoteActionRunner.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useState } from 'react';
+import { remoteActionEcho } from 'rscRemote/actions';
+import defaultRemoteAction from 'rscRemote/defaultAction';
+
+export default function HostRemoteActionRunner() {
+  const [defaultResult, setDefaultResult] = useState('');
+  const [echoResult, setEchoResult] = useState('');
+  const [isPending, setIsPending] = useState(false);
+
+  const runActions = async () => {
+    setIsPending(true);
+    try {
+      const [defaultValue, echoValue] = await Promise.all([
+        defaultRemoteAction('from-host-client'),
+        remoteActionEcho('from-host-client'),
+      ]);
+      setDefaultResult(defaultValue);
+      setEchoResult(echoValue);
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  return (
+    <div className="host-remote-action-runner">
+      <button
+        className="host-remote-run-actions"
+        disabled={isPending}
+        onClick={runActions}
+      >
+        {isPending ? 'Running...' : 'Run Host Remote Actions'}
+      </button>
+      <p className="host-remote-default-action-result">{defaultResult}</p>
+      <p className="host-remote-echo-action-result">{echoResult}</p>
+    </div>
+  );
+}

tests/integration/rsc-mf/remote/module-federation.config.ts

@@ -8,11 +8,17 @@ export default createModuleFederationConfig({
   filename: 'static/remoteEntry.js',
   exposes: {
     './RemoteClientCounter': './src/components/RemoteClientCounter.tsx',
+    './RemoteClientBadge': './src/components/RemoteClientBadge.tsx',
     './RemoteServerCard': './src/components/RemoteServerCard.tsx',
+    './RemoteServerDefault': './src/components/RemoteServerDefault.tsx',
+    './AsyncRemoteServerInfo': './src/components/AsyncRemoteServerInfo.tsx',
     './RemoteNestedMixed': './src/components/RemoteNestedMixed.tsx',
     './remoteServerOnly': './src/components/serverOnly.ts',
+    './remoteServerOnlyDefault': './src/components/serverOnlyDefault.ts',
+    './remoteMeta': './src/components/remoteMeta.ts',
     './actions': './src/components/actions.ts',
     './nestedActions': './src/components/nestedActions.ts',
+    './defaultAction': './src/components/defaultAction.ts',
   },
   shared: {
     react: { singleton: true },

tests/integration/rsc-mf/remote/src/components/AsyncRemoteServerInfo.tsx

@@ -0,0 +1,5 @@
+export async function AsyncRemoteServerInfo() {
+  const value = await Promise.resolve('remote-async-server-info-ok');
+
+  return <p className="remote-async-server-info">{value}</p>;
+}

tests/integration/rsc-mf/remote/src/components/RemoteClientBadge.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import 'client-only';
+import { useState } from 'react';
+
+export default function RemoteClientBadge({
+  initialLabel,
+}: {
+  initialLabel: string;
+}) {
+  const [label, setLabel] = useState(initialLabel);
+
+  return (
+    <div className="remote-client-badge">
+      <p className="remote-client-badge-value">{label}</p>
+      <button
+        className="remote-client-badge-toggle"
+        onClick={() => setLabel('remote-client-badge-toggled')}
+      >
+        Toggle Badge
+      </button>
+    </div>
+  );
+}

tests/integration/rsc-mf/remote/src/components/RemoteServerDefault.tsx

@@ -0,0 +1,10 @@
+import { getServerOnlyInfo } from './serverOnly';
+
+export default function RemoteServerDefault({ label }: { label: string }) {
+  return (
+    <section className="remote-server-default-card">
+      <h2>{label}</h2>
+      <p className="remote-server-default-server-only">{getServerOnlyInfo()}</p>
+    </section>
+  );
+}

tests/integration/rsc-mf/remote/src/components/defaultAction.ts

@@ -0,0 +1,5 @@
+'use server';
+
+export default async function defaultRemoteAction(value: string) {
+  return `default-action:${value}`;
+}

tests/integration/rsc-mf/remote/src/components/remoteMeta.ts

@@ -0,0 +1,12 @@
+export const remoteFeatureFlags = ['rsc', 'mf', 'actions'] as const;
+
+export function getRemoteMetaLabel() {
+  return remoteFeatureFlags.join('|');
+}
+
+const remoteMeta = {
+  kind: 'remote-meta-default',
+  version: 'v1',
+};
+
+export default remoteMeta;

tests/integration/rsc-mf/remote/src/components/serverOnlyDefault.ts

@@ -0,0 +1,5 @@
+import 'server-only';
+
+export default function getServerOnlyDefaultInfo() {
+  return 'remote-server-only-default-ok';
+}

tests/integration/rsc-mf/tests/index.test.ts

@@ -16,8 +16,6 @@ const fixtureDir = path.resolve(__dirname, '../');
 const hostDir = path.resolve(fixtureDir, 'host');
 const remoteDir = path.resolve(fixtureDir, 'remote');
 const HOST_RSC_URL = '/server-component-root';
-const RSC_RUNTIME_BLOCKER_PATTERN =
-  /Cannot find (render handler|server bundle) for RSC/;
 
 type Mode = 'dev' | 'build';
 
@@ -56,16 +54,14 @@ function createHostEnv(remotePort: number) {
 async function renderRemoteRscIntoHost({ hostPort, page }: TestContext) {
   const response = await fetch(`http://127.0.0.1:${hostPort}${HOST_RSC_URL}`);
   const html = await response.text();
-  if (RSC_RUNTIME_BLOCKER_PATTERN.test(html)) {
-    return {
-      blocked: true,
-      html,
-    };
-  }
-
   expect(html).toContain('Host RSC Module Federation');
   expect(html).toContain('Remote Federated Tree');
   expect(html).toContain('remote-server-only-ok');
+  expect(html).toContain('remote-server-only-default-ok');
+  expect(html).toContain('remote-meta-default');
+  expect(html).toContain('rsc|mf|actions');
+  expect(html).toContain('remote-async-server-info-ok');
+  expect(html).toContain('Remote Default Server Card');
 
   await page.goto(`http://127.0.0.1:${hostPort}${HOST_RSC_URL}`, {
     waitUntil: ['networkidle0', 'domcontentloaded'],
@@ -75,11 +71,24 @@ async function renderRemoteRscIntoHost({ hostPort, page }: TestContext) {
     el => el.textContent?.trim(),
   );
   expect(hostRemoteServerOnly).toBe('remote-server-only-ok');
-
-  return {
-    blocked: false,
-    html,
-  };
+  const hostRemoteServerOnlyDefault = await page.$eval(
+    '.host-remote-server-only-default',
+    el => el.textContent?.trim(),
+  );
+  expect(hostRemoteServerOnlyDefault).toBe('remote-server-only-default-ok');
+  const hostRemoteMetaKind = await page.$eval('.host-remote-meta-kind', el =>
+    el.textContent?.trim(),
+  );
+  expect(hostRemoteMetaKind).toBe('remote-meta-default');
+  const hostRemoteMetaLabel = await page.$eval('.host-remote-meta-label', el =>
+    el.textContent?.trim(),
+  );
+  expect(hostRemoteMetaLabel).toBe('rsc|mf|actions');
+  const hostRemoteAsyncServerInfo = await page.$eval(
+    '.remote-async-server-info',
+    el => el.textContent?.trim(),
+  );
+  expect(hostRemoteAsyncServerInfo).toBe('remote-async-server-info-ok');
 }
 
 async function supportRemoteClientAndServerActions({
@@ -129,6 +138,31 @@ async function supportRemoteClientAndServerActions({
       remoteAction?.textContent?.trim() === 'remote-action:from-client'
     );
   });
+
+  let badgeValue = await page.$eval('.remote-client-badge-value', el =>
+    el.textContent?.trim(),
+  );
+  expect(badgeValue).toBe('remote-client-badge-initial');
+  await page.click('.remote-client-badge-toggle');
+  badgeValue = await page.$eval('.remote-client-badge-value', el =>
+    el.textContent?.trim(),
+  );
+  expect(badgeValue).toBe('remote-client-badge-toggled');
+
+  await page.click('.host-remote-run-actions');
+  await page.waitForFunction(() => {
+    const defaultActionResult = document.querySelector(
+      '.host-remote-default-action-result',
+    );
+    const echoActionResult = document.querySelector(
+      '.host-remote-echo-action-result',
+    );
+    return (
+      defaultActionResult?.textContent?.trim() ===
+        'default-action:from-host-client' &&
+      echoActionResult?.textContent?.trim() === 'remote-action:from-host-client'
+    );
+  });
 }
 
 function runTests({ mode }: TestConfig) {
@@ -140,8 +174,6 @@ function runTests({ mode }: TestConfig) {
     let page: Page;
     let browser: Browser;
     const runtimeErrors: string[] = [];
-    let runtimeBlocked = false;
-    let runtimeBlockerHtml = '';
 
     if (skipForLowerNodeVersion()) {
       return;
@@ -206,24 +238,11 @@ function runTests({ mode }: TestConfig) {
       }
     });
 
-    it('should render remote RSC content in host app', async () => {
-      const renderResult = await renderRemoteRscIntoHost({ hostPort, page });
-      runtimeBlocked = renderResult.blocked;
-      runtimeBlockerHtml = renderResult.html;
-
-      if (runtimeBlocked) {
-        expect(runtimeBlockerHtml).toMatch(RSC_RUNTIME_BLOCKER_PATTERN);
-      }
-    });
+    it('should render remote RSC content in host app', () =>
+      renderRemoteRscIntoHost({ hostPort, page }));
 
-    it('should support remote use client and server actions', async () => {
-      if (runtimeBlocked) {
-        expect(runtimeBlockerHtml).toMatch(RSC_RUNTIME_BLOCKER_PATTERN);
-        return;
-      }
-
-      await supportRemoteClientAndServerActions({ hostPort, page });
-    });
+    it('should support remote use client and server actions', () =>
+      supportRemoteClientAndServerActions({ hostPort, page }));
 
     if (mode === 'build') {
       it('should have no browser runtime errors', () => {