@vitest/browser-preview 4.0.0-beta.14

package/README.md

@@ -0,0 +1,49 @@
+# @vitest/browser-preview
+
+[![NPM version](https://img.shields.io/npm/v/@vitest/browser-preview?color=a1b858&label=)](https://www.npmjs.com/package/@vitest/browser-preview)
+
+See how your tests look like in a real browser. For proper and stable browser testing, we recommend running tests in a headless browser in your CI instead. For this, you should use either:
+
+- [@vitest/browser-playwright](https://www.npmjs.com/package/@vitest/browser-playwright) - run tests using [playwright](https://playwright.dev/)
+- [@vitest/browser-webdriverio](https://www.npmjs.com/package/@vitest/browser-webdriverio) - run tests using [webdriverio](https://webdriver.io/)
+
+## Installation
+
+Install the package with your favorite package manager:
+
+```sh
+npm install -D @vitest/browser-preview
+# or
+yarn add -D @vitest/browser-preview
+# or
+pnpm add -D @vitest/browser-preview
+```
+
+Then specify it in the `browser.provider` field of your Vitest configuration:
+
+```ts
+// vitest.config.ts
+import { defineConfig } from 'vitest/config'
+import { preview } from '@vitest/browser-preview'
+
+export default defineConfig({
+  test: {
+    browser: {
+      provider: preview(),
+      instances: [
+        { name: 'chromium' },
+      ],
+    },
+  },
+})
+```
+
+Then run Vitest in the browser mode:
+
+```sh
+npx vitest --browser
+```
+
+If browser didn't open automatically, follow the link in the terminal to open the browser preview.
+
+[GitHub](https://github.com/vitest-dev/vitest/tree/main/packages/browser-preview) | [Documentation](https://vitest.dev/guide/browser/)

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { BrowserProviderOption, BrowserProvider, TestProject } from 'vitest/node';
+export { defineBrowserCommand } from '@vitest/browser';
+
+declare function preview(): BrowserProviderOption;
+declare class PreviewBrowserProvider implements BrowserProvider {
+	name: "preview";
+	supportsParallelism: boolean;
+	private project;
+	private open;
+	distRoot: string;
+	initScripts: string[];
+	constructor(project: TestProject);
+	isOpen(): boolean;
+	getCommandsContext(): {};
+	openPage(_sessionId: string, url: string): Promise<void>;
+	close(): Promise<void>;
+}
+
+export { PreviewBrowserProvider, preview };

package/dist/index.js

@@ -0,0 +1,149 @@
+import { nextTick } from 'node:process';
+import { defineBrowserProvider } from '@vitest/browser';
+export { defineBrowserCommand } from '@vitest/browser';
+import { fileURLToPath } from 'node:url';
+
+const _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
+function normalizeWindowsPath(input = "") {
+  if (!input) {
+    return input;
+  }
+  return input.replace(/\\/g, "/").replace(_DRIVE_LETTER_START_RE, (r) => r.toUpperCase());
+}
+const _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/;
+function cwd() {
+  if (typeof process !== "undefined" && typeof process.cwd === "function") {
+    return process.cwd().replace(/\\/g, "/");
+  }
+  return "/";
+}
+const resolve = function(...arguments_) {
+  arguments_ = arguments_.map((argument) => normalizeWindowsPath(argument));
+  let resolvedPath = "";
+  let resolvedAbsolute = false;
+  for (let index = arguments_.length - 1; index >= -1 && !resolvedAbsolute; index--) {
+    const path = index >= 0 ? arguments_[index] : cwd();
+    if (!path || path.length === 0) {
+      continue;
+    }
+    resolvedPath = `${path}/${resolvedPath}`;
+    resolvedAbsolute = isAbsolute(path);
+  }
+  resolvedPath = normalizeString(resolvedPath, !resolvedAbsolute);
+  if (resolvedAbsolute && !isAbsolute(resolvedPath)) {
+    return `/${resolvedPath}`;
+  }
+  return resolvedPath.length > 0 ? resolvedPath : ".";
+};
+function normalizeString(path, allowAboveRoot) {
+  let res = "";
+  let lastSegmentLength = 0;
+  let lastSlash = -1;
+  let dots = 0;
+  let char = null;
+  for (let index = 0; index <= path.length; ++index) {
+    if (index < path.length) {
+      char = path[index];
+    } else if (char === "/") {
+      break;
+    } else {
+      char = "/";
+    }
+    if (char === "/") {
+      if (lastSlash === index - 1 || dots === 1) ; else if (dots === 2) {
+        if (res.length < 2 || lastSegmentLength !== 2 || res[res.length - 1] !== "." || res[res.length - 2] !== ".") {
+          if (res.length > 2) {
+            const lastSlashIndex = res.lastIndexOf("/");
+            if (lastSlashIndex === -1) {
+              res = "";
+              lastSegmentLength = 0;
+            } else {
+              res = res.slice(0, lastSlashIndex);
+              lastSegmentLength = res.length - 1 - res.lastIndexOf("/");
+            }
+            lastSlash = index;
+            dots = 0;
+            continue;
+          } else if (res.length > 0) {
+            res = "";
+            lastSegmentLength = 0;
+            lastSlash = index;
+            dots = 0;
+            continue;
+          }
+        }
+        if (allowAboveRoot) {
+          res += res.length > 0 ? "/.." : "..";
+          lastSegmentLength = 2;
+        }
+      } else {
+        if (res.length > 0) {
+          res += `/${path.slice(lastSlash + 1, index)}`;
+        } else {
+          res = path.slice(lastSlash + 1, index);
+        }
+        lastSegmentLength = index - lastSlash - 1;
+      }
+      lastSlash = index;
+      dots = 0;
+    } else if (char === "." && dots !== -1) {
+      ++dots;
+    } else {
+      dots = -1;
+    }
+  }
+  return res;
+}
+const isAbsolute = function(p) {
+  return _IS_ABSOLUTE_RE.test(p);
+};
+
+const pkgRoot = resolve(fileURLToPath(import.meta.url), "../..");
+const distRoot = resolve(pkgRoot, "dist");
+
+function preview() {
+	return defineBrowserProvider({
+		name: "preview",
+		providerFactory(project) {
+			return new PreviewBrowserProvider(project);
+		}
+	});
+}
+class PreviewBrowserProvider {
+	name = "preview";
+	supportsParallelism = false;
+	project;
+	open = false;
+	distRoot = distRoot;
+	initScripts = [resolve(distRoot, "locators.js")];
+	constructor(project) {
+		this.project = project;
+		this.open = false;
+		if (project.config.browser.headless) {
+			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");
+		}
+		nextTick(() => {
+			project.vitest.logger.printBrowserBanner(project);
+		});
+	}
+	isOpen() {
+		return this.open;
+	}
+	getCommandsContext() {
+		return {};
+	}
+	async openPage(_sessionId, url) {
+		this.open = true;
+		if (!this.project.browser) {
+			throw new Error("Browser is not initialized");
+		}
+		const options = this.project.browser.vite.config.server;
+		const _open = options.open;
+		options.open = url;
+		this.project.browser.vite.openBrowser();
+		options.open = _open;
+	}
+	async close() {}
+}
+
+export { PreviewBrowserProvider, preview };

package/dist/locators.js

@@ -0,0 +1,78 @@
+import { selectorEngine, getByTitleSelector, getByTextSelector, getByPlaceholderSelector, getByAltTextSelector, getByTestIdSelector, getByRoleSelector, getByLabelSelector, Locator, convertElementToCssSelector } from '@vitest/browser/locators';
+import { page, server, utils, userEvent } from 'vitest/browser';
+import { __INTERNAL } from 'vitest/internal/browser';
+
+class PreviewLocator extends Locator {
+	constructor(_pwSelector, _container) {
+		super();
+		this._pwSelector = _pwSelector;
+		this._container = _container;
+	}
+	get selector() {
+		const selectors = this.elements().map((element) => convertElementToCssSelector(element));
+		if (!selectors.length) {
+			throw utils.getElementError(this._pwSelector, this._container || document.body);
+		}
+		return selectors.join(", ");
+	}
+	click() {
+		return userEvent.click(this.element());
+	}
+	dblClick() {
+		return userEvent.dblClick(this.element());
+	}
+	tripleClick() {
+		return userEvent.tripleClick(this.element());
+	}
+	hover() {
+		return userEvent.hover(this.element());
+	}
+	unhover() {
+		return userEvent.unhover(this.element());
+	}
+	async fill(text) {
+		return userEvent.fill(this.element(), text);
+	}
+	async upload(file) {
+		return userEvent.upload(this.element(), file);
+	}
+	selectOptions(options) {
+		return userEvent.selectOptions(this.element(), options);
+	}
+	clear() {
+		return userEvent.clear(this.element());
+	}
+	locator(selector) {
+		return new PreviewLocator(`${this._pwSelector} >> ${selector}`, this._container);
+	}
+	elementLocator(element) {
+		return new PreviewLocator(selectorEngine.generateSelectorSimple(element), element);
+	}
+}
+page.extend({
+	getByLabelText(text, options) {
+		return new PreviewLocator(getByLabelSelector(text, options));
+	},
+	getByRole(role, options) {
+		return new PreviewLocator(getByRoleSelector(role, options));
+	},
+	getByTestId(testId) {
+		return new PreviewLocator(getByTestIdSelector(server.config.browser.locators.testIdAttribute, testId));
+	},
+	getByAltText(text, options) {
+		return new PreviewLocator(getByAltTextSelector(text, options));
+	},
+	getByPlaceholder(text, options) {
+		return new PreviewLocator(getByPlaceholderSelector(text, options));
+	},
+	getByText(text, options) {
+		return new PreviewLocator(getByTextSelector(text, options));
+	},
+	getByTitle(title, options) {
+		return new PreviewLocator(getByTitleSelector(title, options));
+	},
+	elementLocator(element) {
+		return new PreviewLocator(selectorEngine.generateSelectorSimple(element), element);
+	}
+});
+__INTERNAL._createLocator = (selector) => new PreviewLocator(selector);

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@vitest/browser-preview",
+  "type": "module",
+  "version": "4.0.0-beta.14",
+  "description": "Browser running for Vitest using your browser of choice",
+  "license": "MIT",
+  "funding": "https://opencollective.com/vitest",
+  "homepage": "https://vitest.dev/guide/browser",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitest-dev/vitest.git",
+    "directory": "packages/browser-preview"
+  },
+  "bugs": {
+    "url": "https://github.com/vitest-dev/vitest/issues"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./context": {
+      "types": "./context.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "premove dist && pnpm rollup -c",
+    "dev": "rollup -c --watch --watch.include 'src/**'"
+  },
+  "peerDependencies": {
+    "vitest": "workspace:*"
+  },
+  "dependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitest/browser": "workspace:*"
+  },
+  "devDependencies": {
+    "vitest": "workspace:*"
+  }
+}