npm - @rstest/browser - Versions diffs - 0.8.2 → 0.8.4 - Mend

@rstest/browser 0.8.2 → 0.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/index.js CHANGED Viewed

@@ -1623,6 +1623,8 @@ function nanoid(size = 21) {
 const picomatch = __webpack_require__("../../node_modules/.pnpm/picomatch@4.0.3/node_modules/picomatch/index.js");
 const { createRsbuild: createRsbuild, rspack: rspack } = rsbuild;
 const hostController_dirname = dirname(fileURLToPath(import.meta.url));
+const OPTIONS_PLACEHOLDER = '__RSTEST_OPTIONS_PLACEHOLDER__';
+const serializeForInlineScript = (value)=>JSON.stringify(value).replace(/</g, '\\u003c').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
 class ContainerRpcManager {
     wss;
     ws = null;
@@ -1917,6 +1919,21 @@ const htmlTemplate = `<!DOCTYPE html>
   </body>
 </html>
 `;
+const fallbackSchedulerHtmlTemplate = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Rstest Browser Scheduler</title>
+    <script>
+      window.__RSTEST_BROWSER_OPTIONS__ = ${OPTIONS_PLACEHOLDER};
+    </script>
+  </head>
+  <body>
+    <script type="module" src="/container-static/js/scheduler.js"></script>
+  </body>
+</html>
+`;
+const VIRTUAL_MANIFEST_FILENAME = 'virtual-manifest.ts';
 const destroyBrowserRuntime = async (runtime)=>{
     try {
         await runtime.browser?.close?.();
@@ -1954,13 +1971,15 @@ const createBrowserRuntime = async ({ context, manifestPath, manifestSource, tem
     const virtualManifestPlugin = new rspack.experiments.VirtualModulesPlugin({
         [manifestPath]: manifestSource
     });
-    const optionsPlaceholder = '__RSTEST_OPTIONS_PLACEHOLDER__';
-    const containerHtmlTemplate = containerDistPath ? await promises.readFile(join(containerDistPath, 'container.html'), 'utf-8') : null;
+    const containerHtmlTemplate = containerDistPath ? await promises.readFile(join(containerDistPath, 'index.html'), 'utf-8') : null;
+    const schedulerHtmlTemplate = containerDistPath ? await promises.readFile(join(containerDistPath, 'scheduler.html'), 'utf-8').catch(()=>null) : null;
     let injectedContainerHtml = null;
+    let injectedSchedulerHtml = null;
     let serializedOptions = 'null';
     const setContainerOptions = (options)=>{
-        serializedOptions = JSON.stringify(options).replace(/</g, '\\u003c');
-        if (containerHtmlTemplate) injectedContainerHtml = containerHtmlTemplate.replace(optionsPlaceholder, serializedOptions);
+        serializedOptions = serializeForInlineScript(options);
+        if (containerHtmlTemplate) injectedContainerHtml = containerHtmlTemplate.replace(OPTIONS_PLACEHOLDER, serializedOptions);
+        injectedSchedulerHtml = (schedulerHtmlTemplate || fallbackSchedulerHtmlTemplate).replace(OPTIONS_PLACEHOLDER, serializedOptions);
     };
     const browserProjects = getBrowserProjects(context);
     const firstProject = browserProjects[0];
@@ -2080,7 +2099,7 @@ const createBrowserRuntime = async ({ context, manifestPath, manifestSource, tem
     });
     const serveContainer = containerDistPath ? sirv(containerDistPath, {
         dev: false,
-        single: 'container.html'
+        single: 'index.html'
     }) : null;
     const containerDevBase = containerDevServer ? new URL(containerDevServer) : null;
     const respondWithDevServerHtml = async (url, res)=>{
@@ -2090,7 +2109,7 @@ const createBrowserRuntime = async ({ context, manifestPath, manifestSource, tem
             const response = await fetch(target);
             if (!response.ok) return false;
             let html = await response.text();
-            html = html.replace(optionsPlaceholder, serializedOptions);
+            html = html.replace(OPTIONS_PLACEHOLDER, serializedOptions);
             res.statusCode = response.status;
             response.headers.forEach((value, key)=>{
                 if ('content-length' === key.toLowerCase()) return;
@@ -2148,9 +2167,14 @@ const createBrowserRuntime = async ({ context, manifestPath, manifestSource, tem
             }
             return;
         }
-        if ('/' === url.pathname) {
+        if ('/' === url.pathname || '/scheduler.html' === url.pathname) {
             if (await respondWithDevServerHtml(url, res)) return;
-            const html = injectedContainerHtml || containerHtmlTemplate?.replace(optionsPlaceholder, 'null');
+            if ('/scheduler.html' === url.pathname) {
+                res.setHeader('Content-Type', 'text/html');
+                res.end(injectedSchedulerHtml || (schedulerHtmlTemplate || fallbackSchedulerHtmlTemplate).replace(OPTIONS_PLACEHOLDER, 'null'));
+                return;
+            }
+            const html = injectedContainerHtml || containerHtmlTemplate?.replace(OPTIONS_PLACEHOLDER, 'null');
             if (html) {
                 res.setHeader('Content-Type', 'text/html');
                 res.end(html);
@@ -2244,6 +2268,39 @@ async function resolveProjectEntries(context, shardedEntries) {
 const runBrowserController = async (context, options)=>{
     const { skipOnTestRunEnd = false } = options ?? {};
     const buildStart = Date.now();
+    const browserProjects = getBrowserProjects(context);
+    const useSchedulerPage = browserProjects.every((project)=>project.normalizedConfig.browser.headless);
+    const buildErrorResult = async (error)=>{
+        const elapsed = Math.max(0, Date.now() - buildStart);
+        const errorResult = {
+            results: [],
+            testResults: [],
+            duration: {
+                totalTime: elapsed,
+                buildTime: elapsed,
+                testTime: 0
+            },
+            hasFailure: true,
+            unhandledErrors: [
+                error
+            ]
+        };
+        if (!skipOnTestRunEnd) for (const reporter of context.reporters)await reporter.onTestRunEnd?.({
+            results: [],
+            testResults: [],
+            duration: errorResult.duration,
+            snapshotSummary: context.snapshotManager.summary,
+            getSourcemap: async ()=>null,
+            unhandledErrors: errorResult.unhandledErrors
+        });
+        return errorResult;
+    };
+    const toError = (error)=>error instanceof Error ? error : new Error(String(error));
+    const failWithError = async (error, cleanup)=>{
+        ensureProcessExitCode(1);
+        await cleanup?.();
+        return buildErrorResult(toError(error));
+    };
     const containerDevServerEnv = process.env.RSTEST_CONTAINER_DEV_SERVER;
     let containerDevServer;
     let containerDistPath;
@@ -2251,16 +2308,14 @@ const runBrowserController = async (context, options)=>{
         containerDevServer = new URL(containerDevServerEnv).toString();
         logger.debug(`[Browser UI] Using dev server for container: ${containerDevServer}`);
     } catch (error) {
-        logger.error(color.red(`Invalid RSTEST_CONTAINER_DEV_SERVER value: ${String(error)}`));
-        ensureProcessExitCode(1);
-        return;
+        const originalError = toError(error);
+        originalError.message = `Invalid RSTEST_CONTAINER_DEV_SERVER value: ${originalError.message}`;
+        return failWithError(originalError);
     }
     if (!containerDevServer) try {
         containerDistPath = resolveContainerDist();
     } catch (error) {
-        logger.error(color.red(String(error)));
-        ensureProcessExitCode(1);
-        return;
+        return failWithError(error);
     }
     const projectEntries = await resolveProjectEntries(context, options?.shardedEntries);
     const totalTests = projectEntries.reduce((total, item)=>total + item.testFiles.length, 0);
@@ -2276,7 +2331,7 @@ const runBrowserController = async (context, options)=>{
     }
     const isWatchMode = 'watch' === context.command;
     const tempDir = isWatchMode && watchContext.runtime ? watchContext.runtime.tempDir : isWatchMode ? join(context.rootPath, TEMP_RSTEST_OUTPUT_DIR, 'browser', 'watch') : join(context.rootPath, TEMP_RSTEST_OUTPUT_DIR, 'browser', Date.now().toString());
-    const manifestPath = join(tempDir, 'manifest.ts');
+    const manifestPath = join(tempDir, VIRTUAL_MANIFEST_FILENAME);
     const manifestSource = generateManifestModule({
         manifestPath,
         entries: projectEntries
@@ -2302,13 +2357,12 @@ const runBrowserController = async (context, options)=>{
                 containerDevServer
             });
         } catch (error) {
-            logger.error(error instanceof Error ? error : new Error(String(error)));
-            ensureProcessExitCode(1);
-            await promises.rm(tempDir, {
-                recursive: true,
-                force: true
-            }).catch(()=>{});
-            return;
+            return failWithError(error, async ()=>{
+                await promises.rm(tempDir, {
+                    recursive: true,
+                    force: true
+                }).catch(()=>{});
+            });
         }
         if (isWatchMode) {
             watchContext.runtime = runtime;
@@ -2321,14 +2375,14 @@ const runBrowserController = async (context, options)=>{
                 testPath: normalize(testPath),
                 projectName: entry.project.name
             })));
-    const browserProjectsForRuntime = getBrowserProjects(context);
-    const projectRuntimeConfigs = browserProjectsForRuntime.map((project)=>({
+    const projectRuntimeConfigs = browserProjects.map((project)=>({
             name: project.name,
             environmentName: project.environmentName,
             projectRoot: normalize(project.rootPath),
-            runtimeConfig: serializableConfig(getRuntimeConfigFromProject(project))
+            runtimeConfig: serializableConfig(getRuntimeConfigFromProject(project)),
+            viewport: project.normalizedConfig.browser.viewport
         }));
-    const maxTestTimeoutForRpc = Math.max(...browserProjectsForRuntime.map((p)=>p.normalizedConfig.testTimeout ?? 5000));
+    const maxTestTimeoutForRpc = Math.max(...browserProjects.map((p)=>p.normalizedConfig.testTimeout ?? 5000));
     const hostOptions = {
         rootPath: normalize(context.rootPath),
         projects: projectRuntimeConfigs,
@@ -2374,7 +2428,7 @@ const runBrowserController = async (context, options)=>{
         }
         containerPage.on('console', (msg)=>{
             const text = msg.text();
-            if (text.includes('[Container]') || text.includes('[Runner]')) logger.log(color.gray(`[Browser Console] ${text}`));
+            if (text.startsWith('[Container]') || text.startsWith('[Runner]') || text.startsWith('[Scheduler]')) logger.log(color.gray(`[Browser Console] ${text}`));
         });
     }
     const createRpcMethods = ()=>({
@@ -2457,12 +2511,17 @@ const runBrowserController = async (context, options)=>{
         if (isWatchMode) runtime.rpcManager = rpcManager;
     }
     if (isNewPage) {
-        await containerPage.goto(`http://localhost:${port}/`, {
+        const pagePath = useSchedulerPage ? '/scheduler.html' : '/';
+        if (useSchedulerPage) {
+            const serializedOptions = serializeForInlineScript(hostOptions);
+            await containerPage.addInitScript(`window.__RSTEST_BROWSER_OPTIONS__ = ${serializedOptions};`);
+        }
+        await containerPage.goto(`http://localhost:${port}${pagePath}`, {
             waitUntil: 'load'
         });
-        logger.log(color.cyan(`\nBrowser mode opened at http://localhost:${port}/\n`));
+        logger.log(color.cyan(`\nBrowser mode opened at http://localhost:${port}${pagePath}\n`));
     }
-    const maxTestTimeout = Math.max(...browserProjectsForRuntime.map((p)=>p.normalizedConfig.testTimeout ?? 5000));
+    const maxTestTimeout = Math.max(...browserProjects.map((p)=>p.normalizedConfig.testTimeout ?? 5000));
     const totalTimeoutMs = maxTestTimeout * allTestFiles.length + 30000;
     let timeoutId;
     const testTimeout = new Promise((resolve)=>{
@@ -2497,12 +2556,16 @@ const runBrowserController = async (context, options)=>{
             for (const testFile of affectedFiles)await rpcManager.reloadTestFile(testFile);
         } else if (!filesChanged) logger.log(color.cyan('Tests will be re-executed automatically\n'));
     };
-    if (!isWatchMode) await destroyBrowserRuntime(runtime);
-    if (fatalError) {
-        logger.error(color.red(`Browser test run failed: ${fatalError.message}`));
-        ensureProcessExitCode(1);
-        return;
+    if (!isWatchMode) {
+        try {
+            await containerPage.close();
+        } catch  {}
+        try {
+            await containerContext.close();
+        } catch  {}
+        await destroyBrowserRuntime(runtime);
     }
+    if (fatalError) return failWithError(fatalError);
     const duration = {
         totalTime: buildTime + testTime,
         buildTime,
@@ -2538,7 +2601,7 @@ const listBrowserTests = async (context, options)=>{
         close: async ()=>{}
     };
     const tempDir = join(context.rootPath, TEMP_RSTEST_OUTPUT_DIR, 'browser', `list-${Date.now()}`);
-    const manifestPath = join(tempDir, 'manifest.ts');
+    const manifestPath = join(tempDir, VIRTUAL_MANIFEST_FILENAME);
     const manifestSource = generateManifestModule({
         manifestPath,
         entries: projectEntries
@@ -2565,7 +2628,8 @@ const listBrowserTests = async (context, options)=>{
             name: project.name,
             environmentName: project.environmentName,
             projectRoot: normalize(project.rootPath),
-            runtimeConfig: serializableConfig(getRuntimeConfigFromProject(project))
+            runtimeConfig: serializableConfig(getRuntimeConfigFromProject(project)),
+            viewport: project.normalizedConfig.browser.viewport
         }));
     const maxTestTimeoutForRpc = Math.max(...browserProjects.map((p)=>p.normalizedConfig.testTimeout ?? 5000));
     const hostOptions = {
@@ -2621,7 +2685,7 @@ const listBrowserTests = async (context, options)=>{
                 logger.debug(`[List] Unexpected message: ${message.type}`);
         }
     });
-    const serializedOptions = JSON.stringify(hostOptions).replace(/</g, '\\u003c');
+    const serializedOptions = serializeForInlineScript(hostOptions);
     await page.addInitScript(`window.__RSTEST_BROWSER_OPTIONS__ = ${serializedOptions};`);
     await page.goto(`http://localhost:${port}/runner.html`, {
         waitUntil: 'load'
@@ -2672,10 +2736,134 @@ const listBrowserTests = async (context, options)=>{
         close: cleanup
     };
 };
+const BROWSER_VIEWPORT_PRESET_IDS = [
+    'iPhoneSE',
+    'iPhoneXR',
+    'iPhone12Pro',
+    'iPhone14ProMax',
+    'Pixel7',
+    'SamsungGalaxyS8Plus',
+    'SamsungGalaxyS20Ultra',
+    'iPadMini',
+    'iPadAir',
+    'iPadPro',
+    'SurfacePro7',
+    'SurfaceDuo',
+    'GalaxyZFold5',
+    'AsusZenbookFold',
+    'SamsungGalaxyA51A71',
+    'NestHub',
+    'NestHubMax'
+];
+const BROWSER_VIEWPORT_PRESET_DIMENSIONS = {
+    iPhoneSE: {
+        width: 375,
+        height: 667
+    },
+    iPhoneXR: {
+        width: 414,
+        height: 896
+    },
+    iPhone12Pro: {
+        width: 390,
+        height: 844
+    },
+    iPhone14ProMax: {
+        width: 430,
+        height: 932
+    },
+    Pixel7: {
+        width: 412,
+        height: 915
+    },
+    SamsungGalaxyS8Plus: {
+        width: 360,
+        height: 740
+    },
+    SamsungGalaxyS20Ultra: {
+        width: 412,
+        height: 915
+    },
+    iPadMini: {
+        width: 768,
+        height: 1024
+    },
+    iPadAir: {
+        width: 820,
+        height: 1180
+    },
+    iPadPro: {
+        width: 1024,
+        height: 1366
+    },
+    SurfacePro7: {
+        width: 912,
+        height: 1368
+    },
+    SurfaceDuo: {
+        width: 540,
+        height: 720
+    },
+    GalaxyZFold5: {
+        width: 344,
+        height: 882
+    },
+    AsusZenbookFold: {
+        width: 853,
+        height: 1280
+    },
+    SamsungGalaxyA51A71: {
+        width: 412,
+        height: 914
+    },
+    NestHub: {
+        width: 1024,
+        height: 600
+    },
+    NestHubMax: {
+        width: 1280,
+        height: 800
+    }
+};
+const resolveBrowserViewportPreset = (presetId)=>{
+    const size = BROWSER_VIEWPORT_PRESET_DIMENSIONS[presetId];
+    return size ?? null;
+};
+const SUPPORTED_PROVIDERS = [
+    'playwright'
+];
+const isPlainObject = (value)=>'[object Object]' === Object.prototype.toString.call(value);
+const validateViewport = (viewport)=>{
+    if (null == viewport) return;
+    if ('string' == typeof viewport) {
+        const presetId = viewport.trim();
+        if (!presetId) throw new Error('browser.viewport must be a non-empty preset id.');
+        if (!resolveBrowserViewportPreset(presetId)) throw new Error(`browser.viewport must be a valid preset id. Received: ${viewport}`);
+        return;
+    }
+    if (isPlainObject(viewport)) {
+        const width = viewport.width;
+        const height = viewport.height;
+        if (!Number.isFinite(width) || width <= 0) throw new Error('browser.viewport.width must be a positive number.');
+        if (!Number.isFinite(height) || height <= 0) throw new Error('browser.viewport.height must be a positive number.');
+        return;
+    }
+    throw new Error('browser.viewport must be either a preset id or { width, height }.');
+};
+const validateBrowserConfig = (context)=>{
+    for (const project of context.projects){
+        const browser = project.normalizedConfig.browser;
+        if (browser.enabled) {
+            if (!browser.provider) throw new Error('browser.provider is required when browser.enabled is true.');
+            if (!SUPPORTED_PROVIDERS.includes(browser.provider)) throw new Error(`browser.provider must be one of: ${SUPPORTED_PROVIDERS.join(', ')}.`);
+            validateViewport(browser.viewport);
+        }
+    }
+};
 async function runBrowserTests(context, options) {
     return runBrowserController(context, options);
 }
 async function src_listBrowserTests(context) {
     return listBrowserTests(context);
 }
-export { runBrowserTests, src_listBrowserTests as listBrowserTests };
+export { BROWSER_VIEWPORT_PRESET_DIMENSIONS, BROWSER_VIEWPORT_PRESET_IDS, resolveBrowserViewportPreset, runBrowserTests, src_listBrowserTests as listBrowserTests, validateBrowserConfig };

package/dist/protocol.d.ts CHANGED Viewed

@@ -1,11 +1,17 @@
+import type { DevicePreset } from '@rstest/core/browser';
 import type { RuntimeConfig, Test, TestFileResult, TestResult } from '@rstest/core/browser-runtime';
 import type { SnapshotUpdateState } from '@vitest/snapshot';
 export type SerializedRuntimeConfig = RuntimeConfig;
+export type BrowserViewport = {
+    width: number;
+    height: number;
+} | DevicePreset;
 export type BrowserProjectRuntime = {
     name: string;
     environmentName: string;
     projectRoot: string;
     runtimeConfig: SerializedRuntimeConfig;
+    viewport?: BrowserViewport;
 };
 /**
  * Test file info with associated project name.

package/dist/viewportPresets.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * Runtime source of truth for browser viewport presets.
+ *
+ * IMPORTANT: Keep this list/map in sync with `DevicePreset` typing in
+ * `@rstest/core` (`packages/core/src/types/config.ts`) so `defineConfig`
+ * autocomplete and runtime validation stay consistent.
+ */
+export declare const BROWSER_VIEWPORT_PRESET_IDS: readonly ["iPhoneSE", "iPhoneXR", "iPhone12Pro", "iPhone14ProMax", "Pixel7", "SamsungGalaxyS8Plus", "SamsungGalaxyS20Ultra", "iPadMini", "iPadAir", "iPadPro", "SurfacePro7", "SurfaceDuo", "GalaxyZFold5", "AsusZenbookFold", "SamsungGalaxyA51A71", "NestHub", "NestHubMax"];
+type BrowserViewportPresetId = (typeof BROWSER_VIEWPORT_PRESET_IDS)[number];
+type BrowserViewportSize = {
+    width: number;
+    height: number;
+};
+export declare const BROWSER_VIEWPORT_PRESET_DIMENSIONS: Record<BrowserViewportPresetId, BrowserViewportSize>;
+export declare const resolveBrowserViewportPreset: (presetId: string) => BrowserViewportSize | null;
+export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@rstest/browser",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "Browser mode support for Rstest testing framework.",
   "bugs": {
     "url": "https://github.com/web-infra-dev/rstest/issues"
@@ -52,13 +52,13 @@
     "picocolors": "^1.1.1",
     "picomatch": "^4.0.3",
     "playwright": "^1.49.1",
-    "@rstest/core": "0.8.2",
+    "@rstest/browser-ui": "0.0.0",
     "@rstest/tsconfig": "0.0.1",
-    "@rstest/browser-ui": "0.0.0"
+    "@rstest/core": "0.8.4"
   },
   "peerDependencies": {
     "playwright": "^1.49.1",
-    "@rstest/core": "^0.8.2"
+    "@rstest/core": "^0.8.4"
   },
   "peerDependenciesMeta": {
     "playwright": {

package/src/configValidation.ts ADDED Viewed

@@ -0,0 +1,66 @@
+import type { Rstest } from '@rstest/core/browser';
+import { resolveBrowserViewportPreset } from './viewportPresets';
+const SUPPORTED_PROVIDERS = ['playwright'] as const;
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  return Object.prototype.toString.call(value) === '[object Object]';
+};
+const validateViewport = (viewport: unknown): void => {
+  if (viewport == null) {
+    return;
+  }
+  if (typeof viewport === 'string') {
+    const presetId = viewport.trim();
+    if (!presetId) {
+      throw new Error('browser.viewport must be a non-empty preset id.');
+    }
+    if (!resolveBrowserViewportPreset(presetId)) {
+      throw new Error(
+        `browser.viewport must be a valid preset id. Received: ${viewport}`,
+      );
+    }
+    return;
+  }
+  if (isPlainObject(viewport)) {
+    const width = (viewport as any).width;
+    const height = (viewport as any).height;
+    if (!Number.isFinite(width) || width <= 0) {
+      throw new Error('browser.viewport.width must be a positive number.');
+    }
+    if (!Number.isFinite(height) || height <= 0) {
+      throw new Error('browser.viewport.height must be a positive number.');
+    }
+    return;
+  }
+  throw new Error(
+    'browser.viewport must be either a preset id or { width, height }.',
+  );
+};
+export const validateBrowserConfig = (context: Rstest): void => {
+  for (const project of context.projects) {
+    const browser = project.normalizedConfig.browser;
+    if (!browser.enabled) {
+      continue;
+    }
+    if (!browser.provider) {
+      throw new Error(
+        'browser.provider is required when browser.enabled is true.',
+      );
+    }
+    if (!SUPPORTED_PROVIDERS.includes(browser.provider)) {
+      throw new Error(
+        `browser.provider must be one of: ${SUPPORTED_PROVIDERS.join(', ')}.`,
+      );
+    }
+    validateViewport(browser.viewport);
+  }
+};