From af600f0187b2f47568045907a71ae98c294b9c54 Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Thu, 1 Aug 2024 16:33:00 +0200 Subject: [PATCH 01/21] docs: restructure browser documentation --- docs/.vitepress/config.ts | 90 +++++---- docs/.vitepress/theme/index.ts | 2 + docs/guide/browser/context.md | 8 +- docs/guide/browser/examples.md | 158 --------------- docs/guide/browser/index.md | 243 ++++++++++++++++++++---- docs/guide/browser/interactivity-api.md | 26 ++- docs/guide/browser/why.md | 32 ++++ docs/package.json | 1 + packages/vitest/package.json | 1 - pnpm-lock.yaml | 37 +++- 10 files changed, 350 insertions(+), 248 deletions(-) delete mode 100644 docs/guide/browser/examples.md create mode 100644 docs/guide/browser/why.md diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index eadf771bad12..b76cd4584687 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,6 +1,7 @@ import { defineConfig } from 'vitepress' import { withPwa } from '@vite-pwa/vitepress' import { transformerTwoslash } from '@shikijs/vitepress-twoslash' +import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs' import { version } from '../../package.json' import { contributing, @@ -56,20 +57,25 @@ export default ({ mode }: { mode: string }) => { ], lastUpdated: true, markdown: { + config(md) { + md.use(tabsMarkdownPlugin) + }, theme: { light: 'github-light', dark: 'github-dark', }, codeTransformers: mode === 'development' ? [] - : [transformerTwoslash({ - processHoverInfo: (info) => { - if (info.includes(process.cwd())) { - return info.replace(new RegExp(process.cwd(), 'g'), '') - } - return info - }, - })], + : [ + transformerTwoslash({ + processHoverInfo: (info) => { + if (info.includes(process.cwd())) { + return info.replace(new RegExp(process.cwd(), 'g'), '') + } + return info + }, + }), + ], }, themeConfig: { logo: '/logo.svg', @@ -108,10 +114,15 @@ export default ({ mode }: { mode: string }) => { { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' }, { text: 'API', link: '/api/', activeMatch: '^/api/' }, { text: 'Config', link: '/config/', activeMatch: '^/config/' }, - { text: 'Advanced', link: '/advanced/api', activeMatch: '^/advanced/' }, + { text: 'Browser Mode', link: '/guide/browser', activeMatch: '^/guide/browser/' }, { text: 'Resources', items: [ + { + text: 'Advanced', + link: '/advanced/api', + activeMatch: '^/advanced/', + }, { text: 'Team', link: '/team', @@ -174,7 +185,34 @@ export default ({ mode }: { mode: string }) => { ], sidebar: { - // TODO: bring sidebar of apis and config back + '/guide/browser': [ + { + text: 'Why Browser Mode?', + link: '/guide/browser/why', + docFooterText: 'Why Browser Mode? | Browser Mode', + }, + { + text: 'Context API', + link: '/guide/browser/context', + docFooterText: 'Context API | Browser Mode', + }, + { + text: 'Interactivity API', + link: '/guide/browser/interactivity-api', + docFooterText: 'Interactivity API | Browser Mode', + }, + { + text: 'Assertion API', + link: '/guide/browser/assertion-api', + docFooterText: 'Assertion API | Browser Mode', + }, + { + text: 'Commands API', + link: '/guide/browser/commands', + docFooterText: 'Commands | Browser Mode', + }, + ], + // TODO: bring sidebar of apis and config back '/advanced': [ { items: [ @@ -252,38 +290,6 @@ export default ({ mode }: { mode: string }) => { text: 'Vitest UI', link: '/guide/ui', }, - { - text: 'Browser Mode', - link: '/guide/browser/', - collapsed: false, - items: [ - { - text: 'Context', - link: '/guide/browser/context', - docFooterText: 'Context | Browser Mode', - }, - { - text: 'Interactivity API', - link: '/guide/browser/interactivity-api', - docFooterText: 'Interactivity API | Browser Mode', - }, - { - text: 'Assertion API', - link: '/guide/browser/assertion-api', - docFooterText: 'Assertion API | Browser Mode', - }, - { - text: 'Commands', - link: '/guide/browser/commands', - docFooterText: 'Commands | Browser Mode', - }, - { - text: 'Examples', - link: '/guide/browser/examples', - docFooterText: 'Examples | Browser Mode', - }, - ], - }, { text: 'In-Source Testing', link: '/guide/in-source', diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index cbbf93372ef4..db96f5703341 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -6,6 +6,7 @@ import '../style/main.css' import '../style/vars.css' import 'uno.css' import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client' +import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client' import HomePage from '../components/HomePage.vue' import Version from '../components/Version.vue' import '@shikijs/vitepress-twoslash/style.css' @@ -24,5 +25,6 @@ export default { enhanceApp({ app }) { app.component('Version', Version) app.use(TwoslashFloatingVue) + enhanceAppWithTabs(app) }, } satisfies Theme diff --git a/docs/guide/browser/context.md b/docs/guide/browser/context.md index 90a65c65b237..a99d4701e632 100644 --- a/docs/guide/browser/context.md +++ b/docs/guide/browser/context.md @@ -1,8 +1,8 @@ --- -title: Context | Browser Mode +title: Context API | Browser Mode --- -# Context +# Context API Vitest exposes a context module via `@vitest/browser/context` entry point. As of 2.0, it exposes a small set of utilities that might be useful to you in tests. @@ -42,7 +42,7 @@ export const userEvent: { ## `commands` ::: tip -Commands API is explained in detail at [Commands](/guide/browser/commands). +This API is explained in detail at [Commands API](/guide/browser/commands). ::: ```ts @@ -93,7 +93,7 @@ export const cdp: () => CDPSession ## `server` -The `server` export represents the Node.js environment where the Vitest server is running. It is mostly useful for debugging. +The `server` export represents the Node.js environment where the Vitest server is running. It is mostly useful for debugging or limiting your tests based on the environment. ```ts export const server: { diff --git a/docs/guide/browser/examples.md b/docs/guide/browser/examples.md deleted file mode 100644 index 82aa2ea2fa24..000000000000 --- a/docs/guide/browser/examples.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Examples | Browser Mode ---- - -# 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 - -::: 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 Alice')).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() - - await userEvent.click(screen.getByText('Load Greeting')) - // wait before throwing an error if it cannot find an element - const heading = await screen.findByRole('heading') - - // assert that the alert message is correct - expect(heading).toHaveTextContent('hello there') - expect(screen.getByRole('button')).toBeDisabled() -}) -``` -```tsx [preact] -// based on @testing-library/preact example -// https://testing-library.com/docs/preact-testing-library/example - -import { h } from 'preact' -import { userEvent } from '@vitest/browser/context' -import { render } from '@testing-library/preact' - -import HiddenMessage from '../hidden-message' - -test('shows the children when the checkbox is checked', async () => { - const testMessage = 'Test Message' - - const { queryByText, getByLabelText, getByText } = render( - {testMessage}, - ) - - // query* functions will return the element or null if it cannot be found. - // get* functions will return the element or throw an error if it cannot be found. - expect(queryByText(testMessage)).not.toBeInTheDocument() - - // The queries can accept a regex to make your selectors more - // resilient to content tweaks and changes. - await userEvent.click(getByLabelText(/show/i)) - - expect(getByText(testMessage)).toBeInTheDocument() -}) -``` -```tsx [solid] -// baed on @testing-library/solid API -// https://testing-library.com/docs/solid-testing-library/api - -import { render } from '@testing-library/solid' - -it('uses params', async () => { - const App = () => ( - <> - ( -

- Id: - {useParams()?.id} -

- )} - /> -

Start

} /> - - ) - const { findByText } = render(() => , { location: 'ids/1234' }) - expect(await findByText('Id: 1234')).toBeInTheDocument() -}) -``` -```ts [marko] -// baed on @testing-library/marko API -// https://testing-library.com/docs/marko-testing-library/api - -import { render, screen } from '@marko/testing-library' -import Greeting from './greeting.marko' - -test('renders a message', async () => { - const { container } = await render(Greeting, { name: 'Marko' }) - expect(screen.getByText(/Marko/)).toBeInTheDocument() - expect(container.firstChild).toMatchInlineSnapshot(` -

Hello, Marko!

- `) -}) -``` -::: diff --git a/docs/guide/browser/index.md b/docs/guide/browser/index.md index 0449b08efe29..a2a2828aee34 100644 --- a/docs/guide/browser/index.md +++ b/docs/guide/browser/index.md @@ -49,10 +49,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 +67,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. @@ -211,6 +208,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`](/guide/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`](/guide/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,32 +284,6 @@ 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 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. @@ -308,6 +330,163 @@ 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 + +::: 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 Alice')).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() + + await userEvent.click(screen.getByText('Load Greeting')) + // wait before throwing an error if it cannot find an element + const heading = await screen.findByRole('heading') + + // assert that the alert message is correct + expect(heading).toHaveTextContent('hello there') + expect(screen.getByRole('button')).toBeDisabled() +}) +``` +```tsx [preact] +// based on @testing-library/preact example +// https://testing-library.com/docs/preact-testing-library/example + +import { h } from 'preact' +import { userEvent } from '@vitest/browser/context' +import { render } from '@testing-library/preact' + +import HiddenMessage from '../hidden-message' + +test('shows the children when the checkbox is checked', async () => { + const testMessage = 'Test Message' + + const { queryByText, getByLabelText, getByText } = render( + {testMessage}, + ) + + // query* functions will return the element or null if it cannot be found. + // get* functions will return the element or throw an error if it cannot be found. + expect(queryByText(testMessage)).not.toBeInTheDocument() + + // The queries can accept a regex to make your selectors more + // resilient to content tweaks and changes. + await userEvent.click(getByLabelText(/show/i)) + + expect(getByText(testMessage)).toBeInTheDocument() +}) +``` +```tsx [solid] +// baed on @testing-library/solid API +// https://testing-library.com/docs/solid-testing-library/api + +import { render } from '@testing-library/solid' + +it('uses params', async () => { + const App = () => ( + <> + ( +

+ Id: + {useParams()?.id} +

+ )} + /> +

Start

} /> + + ) + const { findByText } = render(() => , { location: 'ids/1234' }) + expect(await findByText('Id: 1234')).toBeInTheDocument() +}) +``` +```ts [marko] +// baed on @testing-library/marko API +// https://testing-library.com/docs/marko-testing-library/api + +import { render, screen } from '@marko/testing-library' +import Greeting from './greeting.marko' + +test('renders a message', async () => { + const { container } = await render(Greeting, { name: 'Marko' }) + expect(screen.getByText(/Marko/)).toBeInTheDocument() + expect(container.firstChild).toMatchInlineSnapshot(` +

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` -Fill an `input/textarea/conteneditable` element with text. This will remove any existing text in the input before typing the new value. +Set a value to the `input/textarea/conteneditable` field. This will remove any existing text in the input before setting the new value. ```ts import { userEvent } from '@vitest/browser/context' @@ -151,10 +161,12 @@ test('update input', async () => { }) ``` +This methods focuses the element, fills it and triggers an `input` event after filling. You can use an empty string to clear the field. + ::: tip This API is faster than using [`userEvent.type`](#userevent-type) or [`userEvent.keyboard`](#userevent-keyboard), but it **doesn't support** [user-event `keyboard` syntax](https://testing-library.com/docs/user-event/keyboard) (e.g., `{Shift}{selectall}`). -We recommend using this API over [`userEvent.type`](#userevent-type) in situations when you don't need to enter special characters. +We recommend using this API over [`userEvent.type`](#userevent-type) in situations when you don't need to enter special characters or have granular control over keypress events. ::: References: @@ -173,7 +185,6 @@ This API supports [user-event `keyboard` syntax](https://testing-library.com/doc ```ts import { userEvent } from '@vitest/browser/context' -import { screen } from '@testing-library/dom' test('trigger keystrokes', async () => { await userEvent.keyboard('foo') // translates to: f, o, o @@ -360,7 +371,7 @@ References: This works the same as [`userEvent.hover`](#userevent-hover), but moves the cursor to the `document.body` element instead. ::: warning -By default, the cursor position is in the center (in `webdriverio` provider) or in "some" visible place (in `playwright` provider) of the body element, so if the currently hovered element is already in the same position, this method will have no effect. +By default, the cursor position is in "some" visible place (in `playwright` provider) or in the center (in `webdriverio` provider) of the body element, so if the currently hovered element is already in the same position, this method will have no effect. ::: ```ts @@ -389,7 +400,6 @@ Drags the source element on top of the target element. Don't forget that the `so ```ts import { userEvent } from '@vitest/browser/context' import { screen } from '@testing-library/dom' -import '@testing-library/jest-dom' // adds support for "toHaveTextContent" test('drag and drop works', async () => { const source = screen.getByRole('img', { name: /logo/ }) @@ -397,7 +407,7 @@ test('drag and drop works', async () => { await userEvent.dragAndDrop(source, target) - expect(target).toHaveTextContent('Logo is processed') + await expect.element(target).toHaveTextContent('Logo is processed') }) ``` diff --git a/docs/guide/browser/why.md b/docs/guide/browser/why.md new file mode 100644 index 000000000000..b7cbc3e95d9d --- /dev/null +++ b/docs/guide/browser/why.md @@ -0,0 +1,32 @@ +--- +title: Why Browser Mode? | Browser Mode +outline: deep +--- + +# Why Browser Mode? + +## 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. 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/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/pnpm-lock.yaml b/pnpm-lock.yaml index 9a05ac222963..a3a980df6210 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -170,7 +170,7 @@ importers: version: 0.20.1(@vite-pwa/assets-generator@0.2.4)(vite@5.3.3(@types/node@20.14.14)(terser@5.22.0))(workbox-build@7.1.0(@types/babel__core@7.20.5))(workbox-window@7.1.0) 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) + version: 1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.13)(@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) workbox-window: specifier: ^7.1.0 version: 7.1.0 @@ -1438,12 +1438,18 @@ packages: peerDependencies: '@algolia/client-search': '>= 4.9.1 < 6' algoliasearch: '>= 4.9.1 < 6' + peerDependenciesMeta: + '@algolia/client-search': + optional: true '@algolia/autocomplete-shared@1.9.3': resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==} peerDependencies: '@algolia/client-search': '>= 4.9.1 < 6' algoliasearch: '>= 4.9.1 < 6' + peerDependenciesMeta: + '@algolia/client-search': + optional: true '@algolia/cache-browser-local-storage@4.20.0': resolution: {integrity: sha512-uujahcBt4DxduBTvYdwO3sBfHuJvJokiC3BP1+O70fglmE1ShkH8lpXqZBac1rrU3FnNYSUs4pL9lBdTKeRPOQ==} @@ -3961,6 +3967,13 @@ packages: vite: ^5.3.3 vue: ^3.2.25 + '@vitejs/plugin-vue@5.1.2': + resolution: {integrity: sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + vite: ^5.3.3 + vue: ^3.2.25 + '@vitest/browser@2.0.5': resolution: {integrity: sha512-VbOYtu/6R3d7ASZREcrJmRY/sQuRFO9wMVsEDqfYbWiJRh2fDNi8CL1Csn7Ux31pOcPmmM5QvzFCMpiojvVh8g==} peerDependencies: @@ -8871,6 +8884,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 @@ -9306,13 +9325,15 @@ snapshots: '@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)': dependencies: '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0) - '@algolia/client-search': 4.20.0 algoliasearch: 4.20.0 + optionalDependencies: + '@algolia/client-search': 4.20.0 '@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)': dependencies: - '@algolia/client-search': 4.20.0 algoliasearch: 4.20.0 + optionalDependencies: + '@algolia/client-search': 4.20.0 '@algolia/cache-browser-local-storage@4.20.0': dependencies: @@ -12366,6 +12387,11 @@ snapshots: vite: 5.3.3(@types/node@20.14.14)(terser@5.22.0) vue: 3.4.35(typescript@5.5.4) + '@vitejs/plugin-vue@5.1.2(vite@5.3.3(@types/node@20.14.13)(terser@5.22.0))(vue@3.4.35(typescript@5.5.4))': + dependencies: + vite: 5.3.3(@types/node@20.14.13)(terser@5.22.0) + vue: 3.4.35(typescript@5.5.4) + '@vitest/browser@2.0.5(playwright@1.45.3)(typescript@5.5.4)(vitest@packages+vitest)(webdriverio@8.32.2(typescript@5.5.4))': dependencies: '@testing-library/dom': 10.4.0 @@ -18060,6 +18086,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.13)(@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.13)(@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 From 2993cfda338fb923a497953ea77ca5cc06e6e48c Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Thu, 1 Aug 2024 16:36:32 +0200 Subject: [PATCH 02/21] chore: cleanup --- docs/guide/browser/context.md | 2 ++ packages/vitest/src/create/browser/examples.ts | 5 ++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/guide/browser/context.md b/docs/guide/browser/context.md index a99d4701e632..eed2828a333d 100644 --- a/docs/guide/browser/context.md +++ b/docs/guide/browser/context.md @@ -59,6 +59,8 @@ The `page` export provides utilities to interact with the current `page`. ::: warning While it exposes some utilities from Playwright's `page`, it is not the same object. Since the browser context is evaluated in the browser, your tests don't have access to Playwright's `page` because it runs on the server. + +Use [Commands API](/guide/browser/commands) if you need to have access to Playwright's `page` object. ::: ```ts 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() From 56d9b57a7f174dd784e716446af76a902678d9c0 Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Thu, 1 Aug 2024 16:50:24 +0200 Subject: [PATCH 03/21] chore: cleanup --- docs/guide/browser/index.md | 6 +++++- packages/vitest/src/node/pool.ts | 2 -- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/guide/browser/index.md b/docs/guide/browser/index.md index a2a2828aee34..ecfc1faf785f 100644 --- a/docs/guide/browser/index.md +++ b/docs/guide/browser/index.md @@ -284,7 +284,7 @@ By default, Vite targets browsers which support the native [ES Modules](https:// - Safari >=15.4 - Edge >=88 -## 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. @@ -300,10 +300,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 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), From 3e6a9d6043084511379ec4766873134484da4639 Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Thu, 1 Aug 2024 16:51:03 +0200 Subject: [PATCH 04/21] chore: fix dead links --- docs/guide/browser/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guide/browser/index.md b/docs/guide/browser/index.md index ecfc1faf785f..0c17f7a6fffd 100644 --- a/docs/guide/browser/index.md +++ b/docs/guide/browser/index.md @@ -212,7 +212,7 @@ export default defineWorkspace([ :::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`](/guide/config/#browser-provideroptions) field: +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({ @@ -237,7 +237,7 @@ export default defineConfig({ 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`](/guide/config/#browser-provideroptions) field: +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({ From e6334e0618b512c9389d65ae0dea8f9f01aca618 Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Fri, 2 Aug 2024 10:57:17 +0200 Subject: [PATCH 05/21] docs: remove social links from resources (they are already present in navbar) --- docs/.vitepress/config.ts | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index b76cd4584687..fe838439fcc4 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -111,7 +111,7 @@ export default ({ mode }: { mode: string }) => { }, nav: [ - { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' }, + { text: 'Guide', link: '/guide/', activeMatch: '^/guide/(?!browser)' }, { text: 'API', link: '/api/', activeMatch: '^/api/' }, { text: 'Config', link: '/config/', activeMatch: '^/config/' }, { text: 'Browser Mode', link: '/guide/browser', activeMatch: '^/guide/browser/' }, @@ -127,22 +127,6 @@ export default ({ mode }: { mode: string }) => { text: 'Team', link: '/team', }, - { - items: [ - { - text: 'Mastodon', - link: mastodon, - }, - { - text: 'X (formerly Twitter)', - link: twitter, - }, - { - text: 'Discord Chat', - link: discord, - }, - ], - }, ], }, { From 956e0954970cafb952c1c1818f2dc1d15e46b680 Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Fri, 2 Aug 2024 10:57:30 +0200 Subject: [PATCH 06/21] docs: add browser mode to features --- README.md | 1 + docs/.vitepress/components/FeaturesList.vue | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index 6e32fb10ebf6..a74ce1151e21 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,7 @@ Next generation testing framework powered by Vite. - [Native code coverage](https://vitest.dev/guide/features.html#coverage) via [`v8`](https://v8.dev/blog/javascript-code-coverage) or [`istanbul`](https://istanbul.js.org/). - [Tinyspy](https://github.com/tinylibs/tinyspy) built-in for mocking, stubbing, and spies. - [JSDOM](https://github.com/jsdom/jsdom) and [happy-dom](https://github.com/capricorn86/happy-dom) for DOM and browser API mocking +- [Browser Mode](https://vitest.dev/guide/browser/) for running component tests in the browser - Components testing ([Vue](./examples/vue), [React](./examples/react), [Svelte](./examples/svelte), [Lit](./examples/lit), [Vitesse](./examples/vitesse), [Marko](https://github.com/marko-js/examples/tree/master/examples/library-ts)) - Workers multi-threading via [Tinypool](https://github.com/tinylibs/tinypool) (a lightweight fork of [Piscina](https://github.com/piscinajs/piscina)) - Benchmarking support with [Tinybench](https://github.com/tinylibs/tinybench) diff --git a/docs/.vitepress/components/FeaturesList.vue b/docs/.vitepress/components/FeaturesList.vue index 9327df9cd91e..30aadf30fd60 100644 --- a/docs/.vitepress/components/FeaturesList.vue +++ b/docs/.vitepress/components/FeaturesList.vue @@ -22,6 +22,7 @@ Chai built-in for assertions + Jest expect compatible APIs Tinyspy built-in for mocking happy-dom or jsdom for DOM mocking + Browser Mode for running component tests in the browser Code coverage via v8 or istanbul Rust-like in-source testing Type Testing via expect-type From 563e75541ee7e318a5d4f9a8d3f94b2d8d44d3e0 Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Fri, 2 Aug 2024 10:57:40 +0200 Subject: [PATCH 07/21] docs: some clarifications --- docs/guide/browser/index.md | 2 ++ docs/guide/environment.md | 6 ++++++ docs/guide/workspace.md | 25 +++++++++++++++++++++++-- 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/docs/guide/browser/index.md b/docs/guide/browser/index.md index 0c17f7a6fffd..cfe4e112e573 100644 --- a/docs/guide/browser/index.md +++ b/docs/guide/browser/index.md @@ -173,6 +173,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' diff --git a/docs/guide/environment.md b/docs/guide/environment.md index 4da5f0ea4884..b681d6b98a81 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/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 From eb5e891af4fb2640239a3aec6f5c65b9d3e8f0ea Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Fri, 2 Aug 2024 11:03:57 +0200 Subject: [PATCH 08/21] chore: fix dead link --- docs/guide/environment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/environment.md b/docs/guide/environment.md index b681d6b98a81..8c0ff5a06246 100644 --- a/docs/guide/environment.md +++ b/docs/guide/environment.md @@ -22,7 +22,7 @@ Since Vitest 2.0.4 the `require` of CSS and assets inside the external dependenc ::: 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). +`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 From c005d659ef6cb65c6e191535c494c2e4077178a8 Mon Sep 17 00:00:00 2001 From: Vladimir Sheremet Date: Fri, 2 Aug 2024 12:01:14 +0200 Subject: [PATCH 09/21] chore(ui): display project name as a pill --- .../components/explorer/ExplorerItem.vue | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) 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' + } +})