- Id: - {useParams()?.id} -
- )} - /> -Start
} /> - - ) - const { findByText } = render(() =>Hello, Marko!
- `) -}) -``` -::: diff --git a/docs/guide/browser/index.md b/docs/guide/browser/index.md index 0449b08efe29..ff3124abed8b 100644 --- a/docs/guide/browser/index.md +++ b/docs/guide/browser/index.md @@ -7,6 +7,9 @@ outline: deep This page provides information about the experimental browser mode feature in the Vitest API, which allows you to run your tests in the browser natively, providing access to browser globals like window and document. This feature is currently under development, and APIs may change in the future. +
+
+
## Installation
For easier setup, you can use `vitest init browser` command to install required dependencies and create browser configuration.
@@ -49,10 +52,9 @@ bun add -D vitest @vitest/browser
However, to run tests in CI you need to install either [`playwright`](https://npmjs.com/package/playwright) or [`webdriverio`](https://www.npmjs.com/package/webdriverio). We also recommend switching to either one of them for testing locally instead of using the default `preview` provider since it relies on simulating events instead of using Chrome DevTools Protocol.
If you don't already use one of these tools, we recommend starting with Playwright because it supports parallel execution, which makes your tests run faster. Additionally, the Chrome DevTools Protocol that Playwright uses is generally faster than WebDriver.
-:::
-
-### Using Playwright
+::: tabs key:provider
+== Playwright
[Playwright](https://npmjs.com/package/playwright) is a framework for Web Testing and Automation.
::: code-group
@@ -68,9 +70,7 @@ pnpm add -D vitest @vitest/browser playwright
```bash [bun]
bun add -D vitest @vitest/browser playwright
```
-:::
-
-### Using Webdriverio
+== WebdriverIO
[WebdriverIO](https://www.npmjs.com/package/webdriverio) allows you to run tests locally using the WebDriver protocol.
@@ -176,6 +176,8 @@ export default defineConfig({
If you need to run some tests using Node-based runner, you can define a [workspace](/guide/workspace) file with separate configurations for different testing strategies:
+{#workspace-config}
+
```ts
// vitest.workspace.ts
import { defineWorkspace } from 'vitest/config'
@@ -211,6 +213,57 @@ export default defineWorkspace([
])
```
+### Provider Configuration
+
+:::tabs key:provider
+== Playwright
+You can configure how Vitest [launches the browser](https://playwright.dev/docs/api/class-browsertype#browser-type-launch) and creates the [page context](https://playwright.dev/docs/api/class-browsercontext) via [`providerOptions`](/config/#browser-provideroptions) field:
+
+```ts
+export default defineConfig({
+ test: {
+ browser: {
+ providerOptions: {
+ launch: {
+ devtools: true,
+ },
+ context: {
+ geolocation: {
+ latitude: 45,
+ longitude: -30,
+ },
+ reducedMotion: 'reduce',
+ },
+ },
+ },
+ },
+})
+```
+
+To have type hints, add `@vitest/browser/providers/playwright` to `compilerOptions.types` in your `tsconfig.json` file.
+== WebdriverIO
+You can configure what [options](https://webdriver.io/docs/configuration#webdriverio) Vitest should use when starting a browser via [`providerOptions`](/config/#browser-provideroptions) field:
+
+```ts
+export default defineConfig({
+ test: {
+ browser: {
+ browser: 'chrome',
+ providerOptions: {
+ region: 'eu',
+ capabilities: {
+ browserVersion: '27.0',
+ platformName: 'Windows 10',
+ },
+ },
+ },
+ },
+})
+```
+
+To have type hints, add `@vitest/browser/providers/webdriverio` to `compilerOptions.types` in your `tsconfig.json` file.
+:::
+
## Browser Option Types
The browser option in Vitest depends on the provider. Vitest will fail, if you pass `--browser` and don't specify its name in the config file. Available options:
@@ -236,33 +289,7 @@ By default, Vite targets browsers which support the native [ES Modules](https://
- Safari >=15.4
- Edge >=88
-## Motivation
-
-We developed the Vitest browser mode feature to help improve testing workflows and achieve more accurate and reliable test results. This experimental addition to our testing API allows developers to run tests in a native browser environment. In this section, we'll explore the motivations behind this feature and its benefits for testing.
-
-### Different Ways of Testing
-
-There are different ways to test JavaScript code. Some testing frameworks simulate browser environments in Node.js, while others run tests in real browsers. In this context, [jsdom](https://www.npmjs.com/package/jsdom) is an example of a spec implementation that simulates a browser environment by being used with a test runner like Jest or Vitest, while other testing tools such as [WebdriverIO](https://webdriver.io/) or [Cypress](https://www.cypress.io/) allow developers to test their applications in a real browser or in case of [Playwright](https://playwright.dev/) provide you a browser engine.
-
-### The Simulation Caveat
-
-Testing JavaScript programs in simulated environments such as jsdom or happy-dom has simplified the test setup and provided an easy-to-use API, making them suitable for many projects and increasing confidence in test results. However, it is crucial to keep in mind that these tools only simulate a browser environment and not an actual browser, which may result in some discrepancies between the simulated environment and the real environment. Therefore, false positives or negatives in test results may occur.
-
-To achieve the highest level of confidence in our tests, it's crucial to test in a real browser environment. This is why we developed the browser mode feature in Vitest, allowing developers to run tests natively in a browser and gain more accurate and reliable test results. With browser-level testing, developers can be more confident that their application will work as intended in a real-world scenario.
-
-## Drawbacks
-
-When using Vitest browser, it is important to consider the following drawbacks:
-
-### Early Development
-
-The browser mode feature of Vitest is still in its early stages of development. As such, it may not yet be fully optimized, and there may be some bugs or issues that have not yet been ironed out. It is recommended that users augment their Vitest browser experience with a standalone browser-side test runner like WebdriverIO, Cypress or Playwright.
-
-### Longer Initialization
-
-Vitest browser requires spinning up the provider and the browser during the initialization process, which can take some time. This can result in longer initialization times compared to other testing patterns.
-
-## Cross-Browser Testing
+## Running Tests
When you specify a browser name in the browser option, Vitest will try to run the specified browser using `preview` by default, and then run the tests there. If you don't want to use `preview`, you can configure the custom browser provider by using `browser.provider` option.
@@ -278,10 +305,14 @@ Or you can provide browser options to CLI with dot notation:
npx vitest --browser.name=chrome --browser.headless
```
+By default, Vitest will automatically open the browser UI for development. Your tests will run inside an iframe in the center. You can configure the viewport by selecting the preferred dimensions, calling `page.viewport` inside the test, or setting default values in [the config](/config/#browser-viewport).
+
## Headless
Headless mode is another option available in the browser mode. In headless mode, the browser runs in the background without a user interface, which makes it useful for running automated tests. The headless option in Vitest can be set to a boolean value to enable or disable headless mode.
+When using headless mode, Vitest won't open the UI automatically. If you want to continue using the UI but have tests run headlessly, you can install the [`@vitest/ui`](/guide/ui) package and pass the --ui flag when running Vitest.
+
Here's an example configuration enabling headless mode:
```ts
@@ -308,6 +339,176 @@ In this case, Vitest will run in headless mode using the Chrome browser.
Headless mode is not available by default. You need to use either [`playwright`](https://npmjs.com/package/playwright) or [`webdriverio`](https://www.npmjs.com/package/webdriverio) providers to enable this feature.
:::
+## Examples
+
+Browser Mode is framework agnostic so it doesn't provide any method to render your components. However, you should be able to use your framework's test utils packages.
+
+We recommend using `testing-library` packages depending on your framework:
+
+- [`@testing-library/dom`](https://testing-library.com/docs/dom-testing-library/intro) if you don't use a framework
+- [`@testing-library/vue`](https://testing-library.com/docs/vue-testing-library/intro) to render [vue](https://vuejs.org) components
+- [`@testing-library/svelte`](https://testing-library.com/docs/svelte-testing-library/intro) to render [svelte](https://svelte.dev) components
+- [`@testing-library/react`](https://testing-library.com/docs/react-testing-library/intro) to render [react](https://react.dev) components
+- [`@testing-library/preact`](https://testing-library.com/docs/preact-testing-library/intro) to render [preact](https://preactjs.com) components
+- [`solid-testing-library`](https://testing-library.com/docs/solid-testing-library/intro) to render [solid](https://www.solidjs.com) components
+- [`@marko/testing-library`](https://testing-library.com/docs/marko-testing-library/intro) to render [marko](https://markojs.com) components
+
+Besides rendering components and querying elements using `@testing-library/your-framework`, you will also need to make assertions. Vitest bundles the [`@testing-library/jest-dom`](https://github.com/testing-library/jest-dom) library to provide a wide range of DOM assertions out of the box. Read more at the [Assertions API](/guide/browser/assertion-api).
+
+```ts
+import { expect } from 'vitest'
+// element is rendered correctly
+await expect.element(screen.getByText('Hello World')).toBeInTheDocument()
+```
+
+Vitest exposes a [Context API](/guide/browser/context) with a small set of utilities that might be useful to you in tests. For example, if you need to make an interaction, like clicking an element or typing text into an input, you can use `userEvent` from `@vitest/browser/context`. Read more at the [Interactivity API](/guide/browser/interactivity-api).
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+await userEvent.type(screen.getByLabelText(/username/i), 'Alice')
+```
+
+::: warning
+`testing-library` provides a package `@testing-library/user-event`. We do not recommend using it directly because it simulates events instead of actually triggering them - instead, use [`userEvent`](#interactivity-api) imported from `@vitest/browser/context` that uses Chrome DevTools Protocol or Webdriver (depending on the provider) under the hood.
+:::
+
+::: code-group
+```ts [vue]
+// based on @testing-library/vue example
+// https://testing-library.com/docs/vue-testing-library/examples
+
+import { userEvent } from '@vitest/browser/context'
+import { render, screen } from '@testing-library/vue'
+import Component from './Component.vue'
+
+test('properly handles v-model', async () => {
+ render(Component)
+
+ // Asserts initial state.
+ expect(screen.getByText('Hi, my name is Alice')).toBeInTheDocument()
+
+ // Get the input DOM node by querying the associated label.
+ const usernameInput = await screen.findByLabelText(/username/i)
+
+ // Type the name into the input. This already validates that the input
+ // is filled correctly, no need to check the value manually.
+ await userEvent.fill(usernameInput, 'Bob')
+
+ expect(screen.getByText('Hi, my name is Bob')).toBeInTheDocument()
+})
+```
+```ts [svelte]
+// based on @testing-library/svelte
+// https://testing-library.com/docs/svelte-testing-library/example
+
+import { render, screen } from '@testing-library/svelte'
+import { userEvent } from '@vitest/browser/context'
+import { expect, test } from 'vitest'
+
+import Greeter from './greeter.svelte'
+
+test('greeting appears on click', async () => {
+ const user = userEvent.setup()
+ render(Greeter, { name: 'World' })
+
+ const button = screen.getByRole('button')
+ await user.click(button)
+ const greeting = await screen.findByText(/hello world/iu)
+
+ expect(greeting).toBeInTheDocument()
+})
+```
+```tsx [react]
+// based on @testing-library/react example
+// https://testing-library.com/docs/react-testing-library/example-intro
+
+import { userEvent } from '@vitest/browser/context'
+import { render, screen } from '@testing-library/react'
+import Fetch from './fetch'
+
+test('loads and displays greeting', async () => {
+ // Render a React element into the DOM
+ render(+ Id: + {useParams()?.id} +
+ )} + /> +Start
} /> + + ) + const { findByText } = render(() =>Hello, Marko!
+ `) +}) +``` +::: + ## Limitations ### Thread Blocking Dialogs diff --git a/docs/guide/browser/interactivity-api.md b/docs/guide/browser/interactivity-api.md index b10169e3635f..53c06704dbf1 100644 --- a/docs/guide/browser/interactivity-api.md +++ b/docs/guide/browser/interactivity-api.md @@ -4,9 +4,15 @@ title: Interactivity API | Browser Mode # Interactivity API -Vitest implements a subset of [`@testing-library/user-event`](https://testing-library.com/docs/user-event) APIs using [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) or [webdriver](https://www.w3.org/TR/webdriver/) APIs instead of faking events which makes the browser behaviour more reliable and consistent with how users interact with a page. +Vitest implements a subset of [`@testing-library/user-event`](https://testing-library.com/docs/user-event) APIs using [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) or [webdriver](https://www.w3.org/TR/webdriver/) instead of faking events which makes the browser behaviour more reliable and consistent with how users interact with a page. -Almost every `userEvent` method inherits its provider options. To see all available options in your IDE, add `webdriver` or `playwright` types to your `tsconfig.json` file: +```ts +import { userEvent } from '@vitest/browser/context' + +await userEvent.click(document.querySelector('.button')) +``` + +Almost every `userEvent` method inherits its provider options. To see all available options in your IDE, add `webdriver` or `playwright` types (depending on your provider) to your `tsconfig.json` file: ::: code-group ```json [playwright] @@ -29,6 +35,10 @@ Almost every `userEvent` method inherits its provider options. To see all availa ``` ::: +::: warning +This page uses `@testing-library/dom` in examples to query elements. If you are using a framework like Vue, React or any other, use `@testing-library/{framework-name}` instead. Simple examples are available on the [Browser Mode page](/guide/browser/#examples). +::: + ## userEvent.setup - **Type:** `() => UserEvent` @@ -136,7 +146,7 @@ References: - **Type:** `(element: Element, text: string) => Promise
-
-
+
+
diff --git a/docs/guide/environment.md b/docs/guide/environment.md
index 4da5f0ea4884..8c0ff5a06246 100644
--- a/docs/guide/environment.md
+++ b/docs/guide/environment.md
@@ -19,6 +19,12 @@ When using `jsdom` or `happy-dom` environments, Vitest follows the same rules th
Since Vitest 2.0.4 the `require` of CSS and assets inside the external dependencies are resolved automatically.
:::
+::: warning
+"Environments" exist only when running tests in Node.js.
+
+`browser` is not considered an environment in Vitest. If you wish to run part of your tests using [Browser Mode](/guide/browser/), you can create a [workspace project](/guide/browser/#workspace-config).
+:::
+
## Environments for Specific Files
When setting `environment` option in your config, it will apply to all the test files in your project. To have more fine-grained control, you can use control comments to specify environment for specific files. Control comments are comments that start with `@vitest-environment` and are followed by the environment name:
diff --git a/docs/guide/ui.md b/docs/guide/ui.md
index 4209ccbe01d8..d3a1881b2c94 100644
--- a/docs/guide/ui.md
+++ b/docs/guide/ui.md
@@ -18,8 +18,8 @@ vitest --ui
Then you can visit the Vitest UI at `http://localhost:51204/__vitest__/`
-
-
+
+
UI can also be used as a reporter. Use `'html'` reporter in your Vitest configuration to generate HTML output and preview the results of your tests:
diff --git a/docs/guide/workspace.md b/docs/guide/workspace.md
index c52c1fd1cc5f..69e80b79d0fa 100644
--- a/docs/guide/workspace.md
+++ b/docs/guide/workspace.md
@@ -141,16 +141,37 @@ bun test
If you need to run tests only inside a single project, use the `--project` CLI option:
-```bash
+::: code-group
+```bash [npm]
npm run test --project e2e
```
+```bash [yarn]
+yarn test --project e2e
+```
+```bash [pnpm]
+pnpm run test --project e2e
+```
+```bash [bun]
+bun test --project e2e
+```
+:::
::: tip
CLI option `--project` can be used multiple times to filter out several projects:
-```bash
+::: code-group
+```bash [npm]
npm run test --project e2e --project unit
```
+```bash [yarn]
+yarn test --project e2e --project unit
+```
+```bash [pnpm]
+pnpm run test --project e2e --project unit
+```
+```bash [bun]
+bun test --project e2e --project unit
+```
:::
## Configuration
diff --git a/docs/package.json b/docs/package.json
index 395154519dd0..d8b1784bb676 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -32,6 +32,7 @@
"vite": "^5.2.8",
"vite-plugin-pwa": "^0.20.1",
"vitepress": "^1.3.1",
+ "vitepress-plugin-tabs": "^0.5.0",
"workbox-window": "^7.1.0"
}
}
diff --git a/docs/public/ui-1-dark.png b/docs/public/ui-1-dark.png
new file mode 100644
index 000000000000..6626b9b29b7a
Binary files /dev/null and b/docs/public/ui-1-dark.png differ
diff --git a/docs/public/ui-1-light.png b/docs/public/ui-1-light.png
new file mode 100644
index 000000000000..85309b8b7cde
Binary files /dev/null and b/docs/public/ui-1-light.png differ
diff --git a/docs/public/ui-browser-1-dark.png b/docs/public/ui-browser-1-dark.png
new file mode 100644
index 000000000000..5a30a9413bec
Binary files /dev/null and b/docs/public/ui-browser-1-dark.png differ
diff --git a/docs/public/ui-browser-1-light.png b/docs/public/ui-browser-1-light.png
new file mode 100644
index 000000000000..900304ec169e
Binary files /dev/null and b/docs/public/ui-browser-1-light.png differ
diff --git a/docs/public/ui-coverage-1-dark.png b/docs/public/ui-coverage-1-dark.png
new file mode 100644
index 000000000000..1566e1037549
Binary files /dev/null and b/docs/public/ui-coverage-1-dark.png differ
diff --git a/docs/public/ui-coverage-1-light.png b/docs/public/ui-coverage-1-light.png
new file mode 100644
index 000000000000..6ecca0d6fa11
Binary files /dev/null and b/docs/public/ui-coverage-1-light.png differ
diff --git a/docs/public/vitest-ui-coverage-dark.png b/docs/public/vitest-ui-coverage-dark.png
deleted file mode 100644
index bdfd3ac0e51b..000000000000
Binary files a/docs/public/vitest-ui-coverage-dark.png and /dev/null differ
diff --git a/docs/public/vitest-ui-coverage-light.png b/docs/public/vitest-ui-coverage-light.png
deleted file mode 100644
index 2f78be630177..000000000000
Binary files a/docs/public/vitest-ui-coverage-light.png and /dev/null differ
diff --git a/packages/browser/providers/webdriverio.d.ts b/packages/browser/providers/webdriverio.d.ts
index 30694789dfa2..3675cd995b47 100644
--- a/packages/browser/providers/webdriverio.d.ts
+++ b/packages/browser/providers/webdriverio.d.ts
@@ -1,9 +1,18 @@
-import type { RemoteOptions } from 'webdriverio'
+import type { RemoteOptions, ClickOptions, DragAndDropOptions } from 'webdriverio'
import '../matchers.js'
declare module 'vitest/node' {
interface BrowserProviderOptions extends RemoteOptions {}
+ export interface UserEventClickOptions extends ClickOptions {}
+
+ export interface UserEventDragOptions extends DragAndDropOptions {
+ sourceX?: number
+ sourceY?: number
+ targetX?: number
+ targetY?: number
+ }
+
export interface BrowserCommandContext {
browser: WebdriverIO.Browser
}
diff --git a/packages/browser/src/client/orchestrator.ts b/packages/browser/src/client/orchestrator.ts
index 975048373c40..77feea937143 100644
--- a/packages/browser/src/client/orchestrator.ts
+++ b/packages/browser/src/client/orchestrator.ts
@@ -43,7 +43,8 @@ class IframeOrchestrator {
const container = await getContainer(config)
if (config.browser.ui) {
- container.className = 'scrolls'
+ container.className = 'absolute origin-top mt-[8px]'
+ container.parentElement!.setAttribute('data-ready', 'true')
container.textContent = ''
}
const { width, height } = config.browser.viewport
@@ -99,10 +100,9 @@ class IframeOrchestrator {
)
iframe.setAttribute('data-vitest', 'true')
- iframe.style.display = 'block'
iframe.style.border = 'none'
- iframe.style.zIndex = '1'
- iframe.style.position = 'relative'
+ iframe.style.width = '100%'
+ iframe.style.height = '100%'
iframe.setAttribute('allowfullscreen', 'true')
iframe.setAttribute('allow', 'clipboard-write;')
iframe.setAttribute('name', 'vitest-iframe')
diff --git a/packages/browser/src/client/tester/context.ts b/packages/browser/src/client/tester/context.ts
index 76e673edc672..101e4748ab57 100644
--- a/packages/browser/src/client/tester/context.ts
+++ b/packages/browser/src/client/tester/context.ts
@@ -1,6 +1,6 @@
import type { Task, WorkerGlobalState } from 'vitest'
import type { BrowserRPC } from '@vitest/browser/client'
-import type { BrowserPage, UserEvent, UserEventClickOptions, UserEventHoverOptions, UserEventTabOptions, UserEventTypeOptions } from '../../../context'
+import type { BrowserPage, UserEvent, UserEventClickOptions, UserEventDragAndDropOptions, UserEventHoverOptions, UserEventTabOptions, UserEventTypeOptions } from '../../../context'
import type { BrowserRunnerState } from '../utils'
// this file should not import anything directly, only types
@@ -125,15 +125,15 @@ function createUserEvent(): UserEvent {
},
click(element: Element, options: UserEventClickOptions = {}) {
const css = convertElementToCssSelector(element)
- return triggerCommand('__vitest_click', css, options)
+ return triggerCommand('__vitest_click', css, processClickOptions(options))
},
dblClick(element: Element, options: UserEventClickOptions = {}) {
const css = convertElementToCssSelector(element)
- return triggerCommand('__vitest_dblClick', css, options)
+ return triggerCommand('__vitest_dblClick', css, processClickOptions(options))
},
tripleClick(element: Element, options: UserEventClickOptions = {}) {
const css = convertElementToCssSelector(element)
- return triggerCommand('__vitest_tripleClick', css, options)
+ return triggerCommand('__vitest_tripleClick', css, processClickOptions(options))
},
selectOptions(element, value) {
const values = provider === 'webdriverio'
@@ -169,7 +169,7 @@ function createUserEvent(): UserEvent {
},
hover(element: Element, options: UserEventHoverOptions = {}) {
const css = convertElementToCssSelector(element)
- return triggerCommand('__vitest_hover', css, options)
+ return triggerCommand('__vitest_hover', css, processHoverOptions(options))
},
unhover(element: Element, options: UserEventHoverOptions = {}) {
const css = convertElementToCssSelector(element.ownerDocument.body)
@@ -184,7 +184,12 @@ function createUserEvent(): UserEvent {
dragAndDrop(source: Element, target: Element, options = {}) {
const sourceCss = convertElementToCssSelector(source)
const targetCss = convertElementToCssSelector(target)
- return triggerCommand('__vitest_dragAndDrop', sourceCss, targetCss, options)
+ return triggerCommand(
+ '__vitest_dragAndDrop',
+ sourceCss,
+ targetCss,
+ processDragAndDropOptions(options),
+ )
},
}
}
@@ -298,3 +303,130 @@ export const page: BrowserPage = {
function getTaskFullName(task: Task): string {
return task.suite ? `${getTaskFullName(task.suite)} ${task.name}` : task.name
}
+
+function processClickOptions(options_?: UserEventClickOptions) {
+ // only ui scales the iframe, so we need to adjust the position
+ if (!options_ || !state().config.browser.ui) {
+ return options_
+ }
+ if (provider === 'playwright') {
+ const options = options_ as NonNullable<
+ Parameters
+
-
-
+
+
+
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 98e968003155..76dcf2d9a4eb 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -23,6 +23,7 @@ const {
type,
disableTaskLocation,
onItemClick,
+ projectNameColor,
} = defineProps<{
taskId: string
name: string
@@ -135,6 +136,17 @@ function showDetails() {
showSource(t)
}
}
+
+const projectNameTextColor = computed(() => {
+ switch (projectNameColor) {
+ case 'blue':
+ case 'green':
+ case 'magenta':
+ return 'white'
+ default:
+ return 'black'
+ }
+})
@@ -162,12 +174,12 @@ function showDetails() {
Select a test to run
+
-
- [{{ projectName }}]
+
+ {{ projectName }}
-
+
{{ duration > 0 ? duration : '< 1' }}ms
diff --git a/packages/ui/client/composables/api.ts b/packages/ui/client/composables/api.ts
index e0053ba4a119..db1672d4c3d0 100644
--- a/packages/ui/client/composables/api.ts
+++ b/packages/ui/client/composables/api.ts
@@ -1,9 +1,8 @@
import type { BrowserUI } from 'vitest'
import { findById } from './client'
-import { customViewport, viewport } from './browser'
-import { detailSizes } from '~/composables/navigation'
+import { viewport } from './browser'
-const ui: BrowserUI = {
+export const ui: BrowserUI = {
setCurrentFileId(fileId: string) {
activeFileId.value = fileId
currentModule.value = findById(fileId)
@@ -11,41 +10,7 @@ const ui: BrowserUI = {
},
async setIframeViewport(width: number, height: number) {
// reset the button before setting a custom viewport
- viewport.value = 'custom'
- customViewport.value = [width, height]
- await setIframeViewport(width, height)
+ viewport.value = [width, height]
+ await new Promise(r => requestAnimationFrame(r))
},
}
-
-// @ts-expect-error not typed global
-window.__vitest_ui_api__ = ui
-
-function recalculateDetailPanels() {
- const iframe = getCurrentBrowserIframe()
- const panel = document.querySelector('#details-splitpanes')!
- const panelWidth = panel.clientWidth
- const iframeWidth = iframe.clientWidth
- const iframePercent = Math.min((iframeWidth / panelWidth) * 100, 95)
- const detailsPercent = 100 - iframePercent
- detailSizes.value = [iframePercent, detailsPercent]
-}
-
-export function getCurrentBrowserIframe() {
- return document.querySelector(
- '#tester-ui iframe[data-vitest]',
- )!
-}
-
-export async function setIframeViewport(
- width: number | string,
- height: number | string,
-) {
- const iframe = getCurrentBrowserIframe()
- // change the viewport of the iframe
- iframe.style.width = typeof width === 'string' ? width : `${width}px`
- iframe.style.height = typeof height === 'string' ? height : `${height}px`
- // wait until it renders the new size and resize the panel to make the iframe visible
- // this will not make it fully visible if viewport is too wide, but it's better than nothing
- await new Promise(r => requestAnimationFrame(r))
- recalculateDetailPanels()
-}
diff --git a/packages/ui/client/composables/browser.ts b/packages/ui/client/composables/browser.ts
index 8e326de40159..1ee6d527cd59 100644
--- a/packages/ui/client/composables/browser.ts
+++ b/packages/ui/client/composables/browser.ts
@@ -2,16 +2,4 @@ export type ViewportSize =
| 'small-mobile'
| 'large-mobile'
| 'tablet'
- | 'full'
- | 'custom'
-export const viewport = ref('full')
-export const customViewport = ref<[number, number]>()
-
-export function onBrowserPanelResizing(isResizing: boolean) {
- const tester = document.querySelector('#tester-ui')
- if (!tester) {
- return
- }
-
- tester.style.pointerEvents = isResizing ? 'none' : ''
-}
+export const viewport = ref<[number, number]>([414, 896])
diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index f590b38dcf97..cf5a679ecbb2 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -7,6 +7,7 @@ import type { BrowserRunnerState } from '../../../types'
import { ENTRY_URL, isReport } from '../../constants'
import { parseError } from '../error'
import { activeFileId } from '../params'
+import { ui } from '../../composables/api'
import { createStaticClient } from './static'
import { testRunState, unhandledErrors } from './state'
import { explorerTree } from '~/composables/explorer'
@@ -106,11 +107,21 @@ export function runCurrent() {
}
}
+// for testing during dev
+// export const browserState: BrowserRunnerState = {
+// files: [],
+// config: {},
+// type: 'orchestrator',
+// wrapModule: () => {},
+// }
// @ts-expect-error not typed global
export const browserState = window.__vitest_browser_runner__ as
| BrowserRunnerState
| undefined
+// @ts-expect-error not typed global
+window.__vitest_ui_api__ = ui
+
watch(
() => client.ws,
(ws) => {
diff --git a/packages/ui/client/composables/navigation.ts b/packages/ui/client/composables/navigation.ts
index 353f73ef50e0..a613a98fa815 100644
--- a/packages/ui/client/composables/navigation.ts
+++ b/packages/ui/client/composables/navigation.ts
@@ -15,6 +15,13 @@ export const coverageEnabled = computed(() => {
&& !!coverage.value.htmlReporter
)
})
+export const mainSizes = useLocalStorage<[left: number, right: number]>(
+ 'vitest-ui_splitpanes-mainSizes',
+ [33, 67],
+ {
+ initOnMounted: true,
+ },
+)
export const detailSizes = useLocalStorage<[left: number, right: number]>(
'vitest-ui_splitpanes-detailSizes',
[33, 67],
@@ -23,6 +30,17 @@ export const detailSizes = useLocalStorage<[left: number, right: number]>(
},
)
+// live sizes of panels in percentage
+export const panels = reactive({
+ navigation: mainSizes.value[0],
+ details: {
+ size: mainSizes.value[1],
+ // these sizes are relative to the details panel
+ browser: detailSizes.value[0],
+ main: detailSizes.value[1],
+ },
+})
+
// TODO
// For html report preview, "coverage.reportsDirectory" must be explicitly set as a subdirectory of html report.
// Handling other cases seems difficult, so this limitation is mentioned in the documentation for now.
@@ -101,3 +119,21 @@ export function showCoverage() {
currentModule.value = undefined
activeFileId.value = ''
}
+
+export function hideRightPanel() {
+ panels.details.browser = 100
+ panels.details.main = 0
+ detailSizes.value = [100, 0]
+}
+
+export function showRightPanel() {
+ panels.details.browser = 33
+ panels.details.main = 67
+ detailSizes.value = [33, 67]
+}
+
+export function showNavigationPanel() {
+ panels.navigation = 33
+ panels.details.size = 67
+ mainSizes.value = [33, 67]
+}
diff --git a/packages/ui/client/pages/index.vue b/packages/ui/client/pages/index.vue
index f4f8f028c60e..282955249a7d 100644
--- a/packages/ui/client/pages/index.vue
+++ b/packages/ui/client/pages/index.vue
@@ -7,29 +7,36 @@ import {
coverageVisible,
detailSizes,
initializeNavigation,
+ mainSizes,
+ panels,
} from '~/composables/navigation'
-import { onBrowserPanelResizing } from '~/composables/browser'
const dashboardVisible = initializeNavigation()
-const mainSizes = useLocalStorage<[left: number, right: number]>(
- 'vitest-ui_splitpanes-mainSizes',
- [33, 67],
- {
- initOnMounted: true,
- },
-)
+const onBrowserPanelResizing = useDebounceFn((event: { size: number }[]) => {
+ // don't trigger events in the iframe while resizing
+ preventBrowserEvents()
+ recordDetailsResize(event)
+}, 0)
const onMainResized = useDebounceFn((event: { size: number }[]) => {
event.forEach((e, i) => {
mainSizes.value[i] = e.size
})
+ recordMainResize(event)
}, 0)
+
const onModuleResized = useDebounceFn((event: { size: number }[]) => {
event.forEach((e, i) => {
detailSizes.value[i] = e.size
})
- onBrowserPanelResizing(false)
+ recordDetailsResize(event)
+ allowBrowserEvents()
+}, 0)
+
+const resizingMain = useDebounceFn((event: { size: number }[]) => {
+ recordMainResize(event)
+ preventBrowserEvents()
}, 0)
function resizeMain() {
@@ -37,6 +44,34 @@ function resizeMain() {
const panelWidth = Math.min(width / 3, 300)
mainSizes.value[0] = (100 * panelWidth) / width
mainSizes.value[1] = 100 - mainSizes.value[0]
+ recordMainResize([
+ { size: mainSizes.value[0] },
+ { size: mainSizes.value[1] },
+ ])
+}
+
+function recordMainResize(event: { size: number }[]) {
+ panels.navigation = event[0].size
+ panels.details.size = event[1].size
+}
+
+function recordDetailsResize(event: { size: number }[]) {
+ panels.details.browser = event[0].size
+ panels.details.main = event[1].size
+}
+
+function preventBrowserEvents() {
+ const tester = document.querySelector('#tester-ui')
+ if (tester) {
+ tester.style.pointerEvents = 'none'
+ }
+}
+
+function allowBrowserEvents() {
+ const tester = document.querySelector('#tester-ui')
+ if (tester) {
+ tester.style.pointerEvents = ''
+ }
}
@@ -46,7 +81,7 @@ function resizeMain() {
@@ -66,13 +101,13 @@ function resizeMain() {
v-else
id="details-splitpanes"
key="browser-detail"
- @resize="onBrowserPanelResizing(true)"
+ @resize="onBrowserPanelResizing"
@resized="onModuleResized"
>
-
+
-
+
+
Vitest
diff --git a/packages/ui/public/favicon.ico b/packages/ui/public/favicon.ico
new file mode 100644
index 000000000000..c02d0b033f7c
Binary files /dev/null and b/packages/ui/public/favicon.ico differ
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index e0c7b45f1961..dd1a9e5ac260 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -53,6 +53,7 @@ export const config: UserConfig = {
transformers: [
transformerDirectives(),
],
+ safelist: 'absolute origin-top mt-[8px]'.split(' '),
}),
Components({
dirs: ['client/components'],
diff --git a/packages/vitest/package.json b/packages/vitest/package.json
index db94df56ea84..03a53bd055b4 100644
--- a/packages/vitest/package.json
+++ b/packages/vitest/package.json
@@ -17,7 +17,6 @@
},
"keywords": [
"vite",
- "vite-node",
"vitest",
"test",
"jest"
diff --git a/packages/vitest/src/create/browser/examples.ts b/packages/vitest/src/create/browser/examples.ts
index f358372cdb7b..b492b89155c0 100644
--- a/packages/vitest/src/create/browser/examples.ts
+++ b/packages/vitest/src/create/browser/examples.ts
@@ -145,7 +145,6 @@ const vanillaExample = {
js: `
export default function HelloWorld({ name }) {
const parent = document.createElement('div')
- document.body.appendChild(parent)
const h1 = document.createElement('h1')
h1.textContent = 'Hello ' + name + '!'
@@ -157,7 +156,6 @@ export default function HelloWorld({ name }) {
ts: `
export default function HelloWorld({ name }: { name: string }): HTMLDivElement {
const parent = document.createElement('div')
- document.body.appendChild(parent)
const h1 = document.createElement('h1')
h1.textContent = 'Hello ' + name + '!'
@@ -169,10 +167,11 @@ export default function HelloWorld({ name }: { name: string }): HTMLDivElement {
test: `
import { expect, test } from 'vitest'
import { getByText } from '@testing-library/dom'
-import HelloWorld from './HelloWorld'
+import HelloWorld from './HelloWorld.js'
test('renders name', () => {
const parent = HelloWorld({ name: 'Vitest' })
+ document.body.appendChild(parent)
const element = getByText(parent, 'Hello Vitest!')
expect(element).toBeInTheDocument()
diff --git a/packages/vitest/src/node/pool.ts b/packages/vitest/src/node/pool.ts
index a8d7b0b2d0d0..4b891b83812f 100644
--- a/packages/vitest/src/node/pool.ts
+++ b/packages/vitest/src/node/pool.ts
@@ -158,14 +158,12 @@ export function createPool(ctx: Vitest): ProcessPool {
const filesByPool: Record = {
forks: [],
threads: [],
- // browser: [],
vmThreads: [],
vmForks: [],
typescript: [],
}
const factories: Record ProcessPool> = {
- // browser: () => createBrowserPool(ctx),
vmThreads: () => createVmThreadsPool(ctx, options),
threads: () => createThreadsPool(ctx, options),
forks: () => createForksPool(ctx, options),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a05ac222963..2e2453e4e1b6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -171,6 +171,9 @@ importers:
vitepress:
specifier: ^1.3.1
version: 1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4)
+ vitepress-plugin-tabs:
+ specifier: ^0.5.0
+ version: 0.5.0(vitepress@1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4))(vue@3.4.35(typescript@5.5.4))
workbox-window:
specifier: ^7.1.0
version: 7.1.0
@@ -8871,6 +8874,12 @@ packages:
vite:
optional: true
+ vitepress-plugin-tabs@0.5.0:
+ resolution: {integrity: sha512-SIhFWwGsUkTByfc2b279ray/E0Jt8vDTsM1LiHxmCOBAEMmvzIBZSuYYT1DpdDTiS3SuJieBheJkYnwCq/yD9A==}
+ peerDependencies:
+ vitepress: ^1.0.0-rc.27
+ vue: ^3.3.8
+
vitepress@1.3.1:
resolution: {integrity: sha512-soZDpg2rRVJNIM/IYMNDPPr+zTHDA5RbLDHAxacRu+Q9iZ2GwSR0QSUlLs+aEZTkG0SOX1dc8RmUYwyuxK8dfQ==}
hasBin: true
@@ -13758,7 +13767,7 @@ snapshots:
'@one-ini/wasm': 0.1.1
commander: 10.0.1
minimatch: 9.0.1
- semver: 7.6.3
+ semver: 7.6.2
ee-first@1.1.1: {}
@@ -18060,6 +18069,11 @@ snapshots:
optionalDependencies:
vite: 5.3.3(@types/node@20.14.14)(terser@5.22.0)
+ vitepress-plugin-tabs@0.5.0(vitepress@1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4))(vue@3.4.35(typescript@5.5.4)):
+ dependencies:
+ vitepress: 1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4)
+ vue: 3.4.35(typescript@5.5.4)
+
vitepress@1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4):
dependencies:
'@docsearch/css': 3.6.0
diff --git a/test/browser/test/dom.test.ts b/test/browser/test/dom.test.ts
index 6014cef11de9..4722a443e45b 100644
--- a/test/browser/test/dom.test.ts
+++ b/test/browser/test/dom.test.ts
@@ -9,6 +9,12 @@ describe('dom related activity', () => {
document.body.replaceChildren()
})
+ test('viewport works correctly', async () => {
+ await page.viewport(800, 600)
+ expect(window.innerWidth).toBe(800)
+ expect(window.innerHeight).toBe(600)
+ })
+
test('renders div', async () => {
const wrapper = createWrapper()
const div = createNode()
diff --git a/test/browser/test/userEvent.test.ts b/test/browser/test/userEvent.test.ts
index c69c890812e6..aea2fdd956cd 100644
--- a/test/browser/test/userEvent.test.ts
+++ b/test/browser/test/userEvent.test.ts
@@ -91,6 +91,53 @@ describe('userEvent.click', () => {
expect(onClick).toHaveBeenCalled()
expect(dblClick).not.toHaveBeenCalled()
})
+
+ test.runIf(server.provider === 'playwright')('clicks with x/y coords', async () => {
+ const canvas = document.createElement('canvas')
+ canvas.width = 400
+ canvas.height = 300
+ canvas.style.backgroundColor = 'pink'
+
+ const spy = vi.fn()
+
+ // draw a blue square in the middle of the rectangle
+ const ctx: CanvasRenderingContext2D | null = canvas.getContext('2d')
+ // If the user clicks on the blue square, it should turn red, and vice versa
+ const onClick = (event: PointerEvent) => {
+ const x = event.offsetX
+ const y = event.offsetY
+ if (x > 150 && x < 250 && y > 100 && y < 200) {
+ if (!ctx) {
+ throw new Error('Canvas is not defined')
+ }
+ if (ctx.fillStyle === '#ff0000') {
+ ctx.fillStyle = 'blue'
+ }
+ else {
+ ctx.fillStyle = 'red'
+ }
+
+ ctx.fillRect(150, 100, 100, 100)
+ }
+
+ spy({ x, y })
+ }
+
+ canvas.addEventListener('click', onClick)
+ document.body.appendChild(canvas)
+
+ await userEvent.click(document.body, {
+ position: {
+ x: 200,
+ y: 150,
+ },
+ })
+
+ expect(spy).toHaveBeenCalledWith({
+ x: 200,
+ y: 150,
+ })
+ })
})
describe('userEvent.dblClick', () => {
@@ -272,7 +319,6 @@ describe('userEvent.hover, userEvent.unhover', () => {
})
shadowRoot.appendChild(target)
- expect.poll(() => document.body.contains(target)).toBeTruthy()
await userEvent.hover(target)