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

package/dist/index.js

@@ -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}
@@ -308,7 +339,7 @@ export const page = {
   viewport(width, height) {
     const id = __vitest_browser_runner__.iframeId
     channel.postMessage({ type: 'viewport', width, height, id })
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       channel.addEventListener('message', function handler(e) {
         if (e.data.type === 'viewport:done' && e.data.id === id) {
           channel.removeEventListener('message', handler)
@@ -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

@@ -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

@@ -1,7 +1,7 @@
 {
   "name": "@vitest/browser",
   "type": "module",
-  "version": "2.0.0-beta.5",
+  "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.5"
+    "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.5"
+    "@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/runner": "2.0.0-beta.5",
-    "@vitest/ui": "2.0.0-beta.5",
-    "@vitest/ws-client": "2.0.0-beta.5",
-    "vitest": "2.0.0-beta.5"
+    "@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

@@ -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 }