feat(browser): make iframe scalable, improve documentation (#6257)

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)

docs/.vitepress/components/FeaturesList.vue

@@ -22,6 +22,7 @@
     <ListItem><a target="_blank" href="https://www.chaijs.com/" rel="noopener noreferrer">Chai</a> built-in for assertions + <a target="_blank" href="https://jestjs.io/docs/expect" rel="noopener noreferrer">Jest expect</a> compatible APIs</ListItem>
     <ListItem><a target="_blank" href="https://github.com/tinylibs/tinyspy" rel="noopener noreferrer">Tinyspy</a> built-in for mocking</ListItem>
     <ListItem><a target="_blank" href="https://github.com/capricorn86/happy-dom" rel="noopener noreferrer">happy-dom</a> or <a target="_blank" href="https://github.com/jsdom/jsdom" rel="noopener noreferrer">jsdom</a> for DOM mocking</ListItem>
+    <ListItem><a href="https://vitest.dev/guide/browser/" rel="noopener noreferrer">Browser Mode</a> for running component tests in the browser</ListItem>
     <ListItem>Code coverage via <a target="_blank" href="https://v8.dev/blog/javascript-code-coverage" rel="noopener noreferrer">v8</a> or <a target="_blank" href="https://istanbul.js.org/" rel="noopener noreferrer">istanbul</a></ListItem>
     <ListItem>Rust-like <a href="/guide/in-source">in-source testing</a></ListItem>
     <ListItem>Type Testing via <a target="_blank" href="https://github.com/mmkal/expect-type" rel="noopener noreferrer">expect-type</a></ListItem>

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',
@@ -105,32 +111,21 @@ 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: 'Advanced', link: '/advanced/api', activeMatch: '^/advanced/' },
+        { text: 'Browser Mode', link: '/guide/browser', activeMatch: '^/guide/browser/' },
         {
           text: 'Resources',
           items: [
             {
-              text: 'Team',
-              link: '/team',
+              text: 'Advanced',
+              link: '/advanced/api',
+              activeMatch: '^/advanced/',
             },
             {
-              items: [
-                {
-                  text: 'Mastodon',
-                  link: mastodon,
-                },
-                {
-                  text: 'X (formerly Twitter)',
-                  link: twitter,
-                },
-                {
-                  text: 'Discord Chat',
-                  link: discord,
-                },
-              ],
+              text: 'Team',
+              link: '/team',
             },
           ],
         },
@@ -174,7 +169,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 +274,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',

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

docs/guide/browser/assertion-api.md

@@ -4,7 +4,7 @@ title: Assertion API | Browser Mode
 
 # Assertion API
 
-Vitest bundles [`@testing-library/jest-dom`](https://github.com/testing-library/jest-dom) library to provide a wide range of DOM assertions out of the box. For detailed documentation, you can read the `jest-dom` readme:
+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. For detailed documentation, you can read the `jest-dom` readme:
 
 - [`toBeDisabled`](https://github.com/testing-library/jest-dom#toBeDisabled)
 - [`toBeEnabled`](https://github.com/testing-library/jest-dom#toBeEnabled)

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
@@ -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
@@ -93,7 +95,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: {