fix(ct): preserve context changes (#13986)

1. add test (and fix) using context fixture with mount
2. add test for innerText that was failing prior to https://github.com/microsoft/playwright/pull/14008

packages/playwright-test/src/mount.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { Fixtures, Locator, Page, PlaywrightTestArgs, PlaywrightTestOptions, PlaywrightWorkerArgs, ViewportSize } from './types';
+import type { Fixtures, Locator, Page, PlaywrightTestArgs, PlaywrightTestOptions, PlaywrightWorkerArgs } from './types';
 
 let boundCallbacksForMount: Function[] = [];
 
@@ -35,14 +35,20 @@ export const fixtures: Fixtures<PlaywrightTestArgs & PlaywrightTestOptions & { m
     await use(page.context());
   },
 
-  page: async ({ _workerPage }, use) => {
+  page: async ({ _workerPage, viewport }, use) => {
+    const page = _workerPage;
+    await page.goto('about:blank');
+    await (page as any)._resetForReuse();
+    await (page.context() as any)._resetForReuse();
+    await page.setViewportSize(viewport || { width: 1280, height: 800 });
+    await page.goto(process.env.PLAYWRIGHT_VITE_COMPONENTS_BASE_URL!);
     await use(_workerPage);
   },
 
-  mount: async ({ page, viewport }, use) => {
+  mount: async ({ page }, use) => {
     await use(async (component, options) => {
       const selector = await (page as any)._wrapApiCall(async () => {
-        return await innerMount(page, component, options, viewport || { width: 1280, height: 800 });
+        return await innerMount(page, component, options);
       }, true);
       return page.locator(selector);
     });
@@ -50,13 +56,7 @@ export const fixtures: Fixtures<PlaywrightTestArgs & PlaywrightTestOptions & { m
   },
 };
 
-async function innerMount(page: Page, jsxOrType: any, options: any, viewport: ViewportSize): Promise<string> {
+async function innerMount(page: Page, jsxOrType: any, options: any): Promise<string> {
-  await page.goto('about:blank');
-  await (page as any)._resetForReuse();
-  await (page.context() as any)._resetForReuse();
-  await page.setViewportSize(viewport);
-  await page.goto(process.env.PLAYWRIGHT_VITE_COMPONENTS_BASE_URL!);
-
   let component;
   if (typeof jsxOrType === 'string')
     component = { kind: 'object', type: jsxOrType, options };

tests/components/ct-react/src/DelayedData.spec.tsx

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/experimental-ct-vue'
+import { DelayedData } from './DelayedData';
+
+test('toHaveText works on delayed data', async ({ mount }) => {
+  const component = await mount(<DelayedData data='complete' />);
+  await expect(component).toHaveText('complete');
+});

tests/components/ct-react/src/DelayedData.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect, useState } from 'react';
+
+export const DelayedData: React.FC<{ data: string }> = ({ data }) => {
+  const [status, setStatus] = useState('loading');
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setStatus(data), 500);
+    return () => {
+      clearTimeout(timeout);
+    }
+  }, [data])
+
+  return <p>{status}</p>
+};

tests/components/ct-react/src/Fetch.spec.tsx

@@ -0,0 +1,30 @@
+import { test as _test, expect } from '@playwright/experimental-ct-vue'
+import { Fetch } from './Fetch';
+import { serverFixtures } from '../../../../tests/config/serverFixtures';
+
+const test = _test.extend(serverFixtures);
+
+test('components routing should go through context', async ({ mount, context, server }) => {
+  server.setRoute('/hello', (req, res) => {
+    res.write('served via server');
+    res.end();
+  });
+
+  let markRouted: (url: string) => void;
+  const routedViaContext = new Promise(res => markRouted = res);
+  await context.route('**/hello', async (route, request) => {
+    markRouted(`${request.method()} ${request.url()}`);
+    await route.fulfill({
+      body: 'intercepted',
+    });
+  });
+
+  const whoServedTheRequest = Promise.race([
+    server.waitForRequest('/hello').then((req) => `served via server: ${req.method} ${req.url}`),
+    routedViaContext.then(req => `served via context: ${req}`),
+  ]);
+
+  const component = await mount(<Fetch url={server.PREFIX + '/hello'} />);
+  await expect.soft(whoServedTheRequest).resolves.toMatch(/served via context: GET.*\/hello.*/i);
+  await expect.soft(component).toHaveText('intercepted');
+});

tests/components/ct-react/src/Fetch.tsx

@@ -0,0 +1,9 @@
+import React, { useEffect, useState } from 'react';
+
+export const Fetch: React.FC<{ url: string }> = ({ url }) => {
+  const [data, setData] = useState('no response yet');
+  useEffect(() => {
+    fetch(url).then(res => res.text()).then(setData);
+  }, [url]);
+  return <p>{data}</p>;
+}