npm - @vitest/browser - Versions diffs - 2.0.0-beta.6 → 2.0.0-beta.7 - Mend

@vitest/browser 2.0.0-beta.6 → 2.0.0-beta.7

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 (12) hide show

package/context.d.ts +21 -0
package/dist/client/.vite/manifest.json +2 -2
package/dist/client/__vitest__/assets/{index-T2_JR9hd.js → index-BNIf8EuF.js} +19 -19
package/dist/client/__vitest__/index.html +1 -1
package/dist/client/__vitest_browser__/{orchestrator-D24IzA4b.js → orchestrator-CTfJ7g35.js} +9 -3
package/dist/client/__vitest_browser__/{tester-C3Mchfpf.js → tester-Bo1gw1oi.js} +12 -2
package/dist/client/orchestrator.html +1 -1
package/dist/client/tester.html +1 -1
package/dist/index.js +121 -32
package/dist/providers.js +5 -5
package/package.json +9 -7
package/providers.d.ts +5 -5

package/dist/client/__vitest__/index.html CHANGED Viewed

@@ -17,7 +17,7 @@
       })()
     </script>
     <!-- !LOAD_METADATA! -->
-    <script type="module" crossorigin src="./assets/index-T2_JR9hd.js"></script>
+    <script type="module" crossorigin src="./assets/index-BNIf8EuF.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-DrQA2UkS.css">
   </head>
   <body>

package/dist/client/__vitest_browser__/{orchestrator-D24IzA4b.js → orchestrator-CTfJ7g35.js} RENAMED Viewed

@@ -66,10 +66,12 @@ async function getContainer(config) {
   }
   return document.querySelector("#vitest-tester");
 }
+const runningFiles = /* @__PURE__ */ new Set();
 client.ws.addEventListener("open", async () => {
   const testFiles = getBrowserState().files;
   debug("test files", testFiles.join(", "));
-  const runningFiles = new Set(testFiles);
+  runningFiles.clear();
+  testFiles.forEach((file) => runningFiles.add(file));
   channel.addEventListener("message", async (e) => {
     var _a;
     debug("channel event", JSON.stringify(e.data));
@@ -101,14 +103,14 @@ client.ws.addEventListener("open", async () => {
           }
           await done();
         } else {
-          const iframeId = filenames.length > 1 ? ID_ALL : filenames[0];
+          const iframeId = e.data.id;
           (_a = iframes.get(iframeId)) == null ? void 0 : _a.remove();
           iframes.delete(iframeId);
         }
         break;
       }
       case "error": {
-        const iframeId = e.data.files.length > 1 ? ID_ALL : e.data.files[0];
+        const iframeId = e.data.id;
         iframes.delete(iframeId);
         await client.rpc.onUnhandledError(e.data.error, e.data.errorType);
         if (iframeId === ID_ALL)
@@ -132,6 +134,8 @@ client.ws.addEventListener("open", async () => {
     await createTesters(testFiles);
 });
 async function createTesters(testFiles) {
+  runningFiles.clear();
+  testFiles.forEach((file) => runningFiles.add(file));
   const config = getConfig();
   const container = await getContainer(config);
   if (config.browser.ui) {
@@ -139,6 +143,8 @@ async function createTesters(testFiles) {
     container.textContent = "";
   }
   const { width, height } = config.browser.viewport;
+  iframes.forEach((iframe) => iframe.remove());
+  iframes.clear();
   if (config.isolate === false) {
     const iframe = createIframe(
       container,

package/dist/client/__vitest_browser__/{tester-C3Mchfpf.js → tester-Bo1gw1oi.js} RENAMED Viewed

@@ -492,7 +492,13 @@ function serializeError(unhandledError) {
 }
 async function defaultErrorReport(type, unhandledError) {
   const error = serializeError(unhandledError);
-  channel.postMessage({ type: "error", files: getBrowserState().runningFiles, error, errorType: type });
+  channel.postMessage({
+    type: "error",
+    files: getBrowserState().runningFiles,
+    error,
+    errorType: type,
+    id: getBrowserState().iframeId
+  });
 }
 function catchWindowErrors(cb) {
   let userErrorListenerCount = 0;
@@ -647,7 +653,11 @@ async function prepareTestEnvironment(files) {
   };
 }
 function done(files) {
-  channel.postMessage({ type: "done", filenames: files });
+  channel.postMessage({
+    type: "done",
+    filenames: files,
+    id: getBrowserState().iframeId
+  });
 }
 async function runTests(files) {
   await client.waitForConnection();

package/dist/client/orchestrator.html CHANGED Viewed

@@ -25,7 +25,7 @@
     </style>
     <script>{__VITEST_INJECTOR__}</script>
     {__VITEST_SCRIPTS__}
-    <script type="module" crossorigin src="/__vitest_browser__/orchestrator-D24IzA4b.js"></script>
+    <script type="module" crossorigin src="/__vitest_browser__/orchestrator-CTfJ7g35.js"></script>
     <link rel="modulepreload" crossorigin href="/__vitest_browser__/rpc-DBukiZYG.js">
   </head>
   <body>

package/dist/client/tester.html CHANGED Viewed

@@ -18,7 +18,7 @@
     </style>
     <script>{__VITEST_INJECTOR__}</script>
     {__VITEST_SCRIPTS__}
-    <script type="module" crossorigin src="/__vitest_browser__/tester-C3Mchfpf.js"></script>
+    <script type="module" crossorigin src="/__vitest_browser__/tester-Bo1gw1oi.js"></script>
     <link rel="modulepreload" crossorigin href="/__vitest_browser__/rpc-DBukiZYG.js">
   </head>
   <body style="width: 100%; height: 100%; transform: scale(1); transform-origin: left top;">

package/dist/index.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import { fileURLToPath } from 'node:url';
 import { readFile as readFile$1 } from 'node:fs/promises';
+import { createRequire } from 'node:module';
 import sirv from 'sirv';
 import { coverageConfigDefaults } from 'vitest/config';
 import { slash } from '@vitest/utils';
 import fs, { promises } from 'node:fs';
-import { resolve as resolve$1, dirname } from 'node:path';
+import { resolve as resolve$1, dirname as dirname$1 } from 'node:path';
 import { isFileServingAllowed } from 'vitest/node';
 import MagicString from 'magic-string';
 import { esmWalker } from '@vitest/utils/ast';
@@ -154,32 +155,56 @@ function normalizeString(path, allowAboveRoot) {
 const isAbsolute = function(p) {
   return _IS_ABSOLUTE_RE.test(p);
 };
+const dirname = function(p) {
+  const segments = normalizeWindowsPath(p).replace(/\/$/, "").split("/").slice(0, -1);
+  if (segments.length === 1 && _DRIVE_LETTER_RE.test(segments[0])) {
+    segments[0] += "/";
+  }
+  return segments.join("/") || (isAbsolute(p) ? "/" : ".");
+};
 const basename = function(p, extension) {
   const lastSegment = normalizeWindowsPath(p).split("/").pop();
   return extension && lastSegment.endsWith(extension) ? lastSegment.slice(0, -extension.length) : lastSegment;
 };
+const click = async ({ provider }, element, options = {}) => {
+  if (provider.name === "playwright") {
+    const page = provider.page;
+    await page.frameLocator("iframe[data-vitest]").locator(`xpath=${element}`).click(options);
+    return;
+  }
+  if (provider.name === "webdriverio") {
+    const page = provider.browser;
+    const frame = await page.findElement("css selector", "iframe[data-vitest]");
+    await page.switchToFrame(frame);
+    const xpath = `//${element}`;
+    await (await page.$(xpath)).click(options);
+    return;
+  }
+  throw new Error(`Provider "${provider.name}" doesn't support click command`);
+};
 function assertFileAccess(path, project) {
   if (!isFileServingAllowed(path, project.server) && !isFileServingAllowed(path, project.ctx.server))
     throw new Error(`Access denied to "${path}". See Vite config documentation for "server.fs": https://vitejs.dev/config/server-options.html#server-fs-strict.`);
 }
 const readFile = async ({ project, testPath = process.cwd() }, path, options = {}) => {
-  const filepath = resolve$1(dirname(testPath), path);
+  const filepath = resolve$1(dirname$1(testPath), path);
   assertFileAccess(filepath, project);
   if (typeof options === "object" && !options.encoding)
     options.encoding = "utf-8";
   return promises.readFile(filepath, options);
 };
 const writeFile = async ({ project, testPath = process.cwd() }, path, data, options) => {
-  const filepath = resolve$1(dirname(testPath), path);
+  const filepath = resolve$1(dirname$1(testPath), path);
   assertFileAccess(filepath, project);
-  const dir = dirname(filepath);
+  const dir = dirname$1(filepath);
   if (!fs.existsSync(dir))
     await promises.mkdir(dir, { recursive: true });
   await promises.writeFile(filepath, data, options);
 };
 const removeFile = async ({ project, testPath = process.cwd() }, path) => {
-  const filepath = resolve$1(dirname(testPath), path);
+  const filepath = resolve$1(dirname$1(testPath), path);
   assertFileAccess(filepath, project);
   await promises.rm(filepath);
 };
@@ -255,11 +280,13 @@ var builtinCommands = {
   readFile,
   removeFile,
   writeFile,
-  sendKeys
+  sendKeys,
+  __vitest_click: click
 };
 const VIRTUAL_ID_CONTEXT = "\0@vitest/browser/context";
 const ID_CONTEXT = "@vitest/browser/context";
+const __dirname = dirname(fileURLToPath(import.meta.url));
 function BrowserContext(project) {
   project.config.browser.commands ??= {};
   for (const [name, command] of Object.entries(builtinCommands))
@@ -277,24 +304,28 @@ function BrowserContext(project) {
     },
     load(id) {
       if (id === VIRTUAL_ID_CONTEXT)
-        return generateContextFile(project);
+        return generateContextFile.call(this, project);
     }
   };
 }
-function generateContextFile(project) {
+async function generateContextFile(project) {
   const commands = Object.keys(project.config.browser.commands ?? {});
   const filepathCode = "__vitest_worker__.filepath || __vitest_worker__.current?.file?.filepath || undefined";
+  const provider = project.browserProvider;
   const commandsCode = commands.map((command) => {
-    return `    ["${command}"]: (...args) => rpc().triggerCommand("${command}", ${filepathCode}, args),`;
+    return `    ["${command}"]: (...args) => rpc().triggerCommand("${command}", filepath(), args),`;
   }).join("\n");
+  const userEventNonProviderImport = await getUserEventImport(provider, this.resolve.bind(this));
   return `
+${userEventNonProviderImport}
+const filepath = () => ${filepathCode}
 const rpc = () => __vitest_worker__.rpc
 const channel = new BroadcastChannel('vitest')
 export const server = {
   platform: ${JSON.stringify(process.platform)},
   version: ${JSON.stringify(process.version)},
-  provider: ${JSON.stringify(project.browserProvider.name)},
+  provider: ${JSON.stringify(provider.name)},
   browser: ${JSON.stringify(project.config.browser.name)},
   commands: {
     ${commandsCode}
@@ -320,10 +351,56 @@ export const page = {
         }
       })
     })
+  },
+}
+export const userEvent = ${getUserEventScript(project)}
+function convertElementToXPath(element) {
+  if (!element || !(element instanceof Element)) {
+    // TODO: better error message
+    throw new Error('Expected element to be an instance of Element')
+  }
+  return getPathTo(element)
+}
+function getPathTo(element) {
+  if (element.id !== '')
+    return \`id("\${element.id}")\`
+  if (!element.parentNode || element === document.documentElement)
+    return element.tagName
+  let ix = 0
+  const siblings = element.parentNode.childNodes
+  for (let i = 0; i < siblings.length; i++) {
+    const sibling = siblings[i]
+    if (sibling === element)
+      return \`\${getPathTo(element.parentNode)}/\${element.tagName}[\${ix + 1}]\`
+    if (sibling.nodeType === 1 && sibling.tagName === element.tagName)
+      ix++
   }
 }
 `;
 }
+async function getUserEventImport(provider, resolve) {
+  if (provider.name !== "preview")
+    return "";
+  const resolved = await resolve("@testing-library/user-event", __dirname);
+  if (!resolved)
+    throw new Error(`Failed to resolve user-event package from ${__dirname}`);
+  return `import { userEvent as __vitest_user_event__ } from '${slash(`/@fs/${resolved.id}`)}'`;
+}
+function getUserEventScript(project) {
+  if (project.browserProvider?.name === "preview")
+    return `__vitest_user_event__`;
+  return `{
+  async click(element, options) {
+    const xpath = convertElementToXPath(element)
+    return rpc().triggerCommand('__vitest_click', filepath(), options ? [xpath, options] : [xpath]);
+  },
+}`;
+}
 function automockModule(code, parse) {
   const ast = parse(code);
@@ -598,8 +675,9 @@ var index = (project, base = "/") => {
             return;
           }
           const decodedTestFile = decodeURIComponent(url.pathname.slice(testerPrefix.length));
-          const tests = decodedTestFile === "__vitest_all__" || !files.includes(decodedTestFile) ? "__vitest_browser_runner__.files" : JSON.stringify([decodedTestFile]);
-          const iframeId = decodedTestFile === "__vitest_all__" ? '"__vitest_all__"' : JSON.stringify(decodedTestFile);
+          const testFiles = await project.globTestFiles();
+          const tests = decodedTestFile === "__vitest_all__" || !testFiles.includes(decodedTestFile) ? "__vitest_browser_runner__.files" : JSON.stringify([decodedTestFile]);
+          const iframeId = JSON.stringify(decodedTestFile);
           if (!testerScripts)
             testerScripts = await formatScripts(project.config.browser.testerScripts, server);
           const html = replacer(await testerHtml, {
@@ -643,25 +721,8 @@ var index = (project, base = "/") => {
       name: "vitest:browser:tests",
       enforce: "pre",
       async config() {
-        const {
-          include,
-          exclude,
-          includeSource,
-          dir,
-          root
-        } = project.config;
-        const projectRoot = dir || root;
-        const entries = await project.globAllTestFiles(include, exclude, includeSource, projectRoot);
         return {
           optimizeDeps: {
-            entries: [
-              ...entries,
-              "vitest",
-              "vitest/utils",
-              "vitest/browser",
-              "vitest/runners",
-              "@vitest/utils"
-            ],
             exclude: [
               "vitest",
               "vitest/utils",
@@ -671,6 +732,7 @@ var index = (project, base = "/") => {
               "std-env",
               "tinybench",
               "tinyspy",
+              "pathe",
               // loupe is manually transformed
               "loupe"
             ],
@@ -678,11 +740,14 @@ var index = (project, base = "/") => {
               "vitest > @vitest/utils > pretty-format",
               "vitest > @vitest/snapshot > pretty-format",
               "vitest > @vitest/snapshot > magic-string",
-              "vitest > diff-sequences",
               "vitest > pretty-format",
               "vitest > pretty-format > ansi-styles",
               "vitest > pretty-format > ansi-regex",
-              "vitest > chai"
+              "vitest > chai",
+              "vitest > @vitest/runner > p-limit",
+              "vitest > @vitest/utils > diff-sequences",
+              "@vitest/browser > @testing-library/user-event",
+              "@vitest/browser > @testing-library/dom"
             ]
           }
         };
@@ -708,7 +773,31 @@ export default globalThis.loupe`;
       }
     },
     BrowserContext(project),
-    DynamicImport()
+    DynamicImport(),
+    // TODO: remove this when @testing-library/vue supports ESM
+    {
+      name: "vitest:browser:support-vue-testing-library",
+      config() {
+        return {
+          optimizeDeps: {
+            esbuildOptions: {
+              plugins: [
+                {
+                  name: "test-utils-rewrite",
+                  setup(build) {
+                    const _require = createRequire(import.meta.url);
+                    build.onResolve({ filter: /@vue\/test-utils/ }, (args) => {
+                      const resolved = _require.resolve(args.path, { paths: [args.importer] });
+                      return { path: resolved };
+                    });
+                  }
+                }
+              ]
+            }
+          }
+        };
+      }
+    }
   ];
 };
 function resolveCoverageFolder(project) {

package/dist/providers.js CHANGED Viewed

@@ -104,8 +104,8 @@ class WebdriverBrowserProvider {
   }
 }
-class NoneBrowserProvider {
-  name = "none";
+class PreviewBrowserProvider {
+  name = "preview";
   ctx;
   open = false;
   getSupportedBrowsers() {
@@ -118,7 +118,7 @@ class NoneBrowserProvider {
     this.ctx = ctx;
     this.open = false;
     if (ctx.config.browser.headless)
-      throw new Error(`You've enabled headless mode for "none" provider but it doesn't support it.`);
+      throw new Error(`You've enabled headless mode for "preview" provider but it doesn't support it. Use "playwright" or "webdriverio" instead: https://vitest.dev/guide/browser#configuration`);
   }
   async openPage(_url) {
     this.open = true;
@@ -136,6 +136,6 @@ class NoneBrowserProvider {
 const webdriverio = WebdriverBrowserProvider;
 const playwright = PlaywrightBrowserProvider;
-const none = NoneBrowserProvider;
+const preview = PreviewBrowserProvider;
-export { none, playwright, webdriverio };
+export { playwright, preview, webdriverio };

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@vitest/browser",
   "type": "module",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "description": "Browser running for Vitest",
   "license": "MIT",
   "funding": "https://opencollective.com/vitest",
@@ -47,7 +47,7 @@
   "peerDependencies": {
     "playwright": "*",
     "webdriverio": "*",
-    "vitest": "2.0.0-beta.6"
+    "vitest": "2.0.0-beta.7"
   },
   "peerDependenciesMeta": {
     "playwright": {
@@ -61,9 +61,11 @@
     }
   },
   "dependencies": {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/user-event": "^14.5.2",
     "magic-string": "^0.30.10",
     "sirv": "^2.0.4",
-    "@vitest/utils": "2.0.0-beta.6"
+    "@vitest/utils": "2.0.0-beta.7"
   },
   "devDependencies": {
     "@types/ws": "^8.5.10",
@@ -75,10 +77,10 @@
     "playwright-core": "^1.44.0",
     "safaridriver": "^0.1.2",
     "webdriverio": "^8.36.1",
-    "@vitest/ui": "2.0.0-beta.6",
-    "@vitest/runner": "2.0.0-beta.6",
-    "@vitest/ws-client": "2.0.0-beta.6",
-    "vitest": "2.0.0-beta.6"
+    "@vitest/ws-client": "2.0.0-beta.7",
+    "vitest": "2.0.0-beta.7",
+    "@vitest/runner": "2.0.0-beta.7",
+    "@vitest/ui": "2.0.0-beta.7"
   },
   "scripts": {
     "build": "rimraf dist && pnpm build:node && pnpm build:client",

package/providers.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import type { BrowserProvider } from 'vitest/node'
+import type { BrowserProviderModule } from 'vitest/node'
-declare const webdriverio: BrowserProvider
-declare const playwright: BrowserProvider
-declare const none: BrowserProvider
+declare const webdriverio: BrowserProviderModule
+declare const playwright: BrowserProviderModule
+declare const preview: BrowserProviderModule
-export { webdriverio, playwright, none }
+export { webdriverio, playwright, preview }