Skip to content

Commit 74ca11a

Browse files
sheremet-vasheremet-va
authored
feat(browser): make iframe scalable, improve documentation (#6257)
1 parent b77e14f commit 74ca11a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+831
-407
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ Next generation testing framework powered by Vite.
3737
- [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/).
3838
- [Tinyspy](https://github.com/tinylibs/tinyspy) built-in for mocking, stubbing, and spies.
3939
- [JSDOM](https://github.com/jsdom/jsdom) and [happy-dom](https://github.com/capricorn86/happy-dom) for DOM and browser API mocking
40+
- [Browser Mode](https://vitest.dev/guide/browser/) for running component tests in the browser
4041
- 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))
4142
- Workers multi-threading via [Tinypool](https://github.com/tinylibs/tinypool) (a lightweight fork of [Piscina](https://github.com/piscinajs/piscina))
4243
- Benchmarking support with [Tinybench](https://github.com/tinylibs/tinybench)

‎docs/.vitepress/components/FeaturesList.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<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>
2323
<ListItem><a target="_blank" href="https://github.com/tinylibs/tinyspy" rel="noopener noreferrer">Tinyspy</a> built-in for mocking</ListItem>
2424
<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>
25+
<ListItem><a href="https://vitest.dev/guide/browser/" rel="noopener noreferrer">Browser Mode</a> for running component tests in the browser</ListItem>
2526
<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>
2627
<ListItem>Rust-like <a href="/guide/in-source">in-source testing</a></ListItem>
2728
<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

Lines changed: 49 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineConfig } from 'vitepress'
22
import { withPwa } from '@vite-pwa/vitepress'
33
import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
4+
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
45
import { version } from '../../package.json'
56
import {
67
contributing,
@@ -56,20 +57,25 @@ export default ({ mode }: { mode: string }) => {
5657
],
5758
lastUpdated: true,
5859
markdown: {
60+
config(md) {
61+
md.use(tabsMarkdownPlugin)
62+
},
5963
theme: {
6064
light: 'github-light',
6165
dark: 'github-dark',
6266
},
6367
codeTransformers: mode === 'development'
6468
? []
65-
: [transformerTwoslash({
66-
processHoverInfo: (info) => {
67-
if (info.includes(process.cwd())) {
68-
return info.replace(new RegExp(process.cwd(), 'g'), '')
69-
}
70-
return info
71-
},
72-
})],
69+
: [
70+
transformerTwoslash({
71+
processHoverInfo: (info) => {
72+
if (info.includes(process.cwd())) {
73+
return info.replace(new RegExp(process.cwd(), 'g'), '')
74+
}
75+
return info
76+
},
77+
}),
78+
],
7379
},
7480
themeConfig: {
7581
logo: '/logo.svg',
@@ -105,32 +111,21 @@ export default ({ mode }: { mode: string }) => {
105111
},
106112

107113
nav: [
108-
{ text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
114+
{ text: 'Guide', link: '/guide/', activeMatch: '^/guide/(?!browser)' },
109115
{ text: 'API', link: '/api/', activeMatch: '^/api/' },
110116
{ text: 'Config', link: '/config/', activeMatch: '^/config/' },
111-
{ text: 'Advanced', link: '/advanced/api', activeMatch: '^/advanced/' },
117+
{ text: 'Browser Mode', link: '/guide/browser', activeMatch: '^/guide/browser/' },
112118
{
113119
text: 'Resources',
114120
items: [
115121
{
116-
text: 'Team',
117-
link: '/team',
122+
text: 'Advanced',
123+
link: '/advanced/api',
124+
activeMatch: '^/advanced/',
118125
},
119126
{
120-
items: [
121-
{
122-
text: 'Mastodon',
123-
link: mastodon,
124-
},
125-
{
126-
text: 'X (formerly Twitter)',
127-
link: twitter,
128-
},
129-
{
130-
text: 'Discord Chat',
131-
link: discord,
132-
},
133-
],
127+
text: 'Team',
128+
link: '/team',
134129
},
135130
],
136131
},
@@ -174,7 +169,34 @@ export default ({ mode }: { mode: string }) => {
174169
],
175170

176171
sidebar: {
177-
// TODO: bring sidebar of apis and config back
172+
'/guide/browser': [
173+
{
174+
text: 'Why Browser Mode?',
175+
link: '/guide/browser/why',
176+
docFooterText: 'Why Browser Mode? | Browser Mode',
177+
},
178+
{
179+
text: 'Context API',
180+
link: '/guide/browser/context',
181+
docFooterText: 'Context API | Browser Mode',
182+
},
183+
{
184+
text: 'Interactivity API',
185+
link: '/guide/browser/interactivity-api',
186+
docFooterText: 'Interactivity API | Browser Mode',
187+
},
188+
{
189+
text: 'Assertion API',
190+
link: '/guide/browser/assertion-api',
191+
docFooterText: 'Assertion API | Browser Mode',
192+
},
193+
{
194+
text: 'Commands API',
195+
link: '/guide/browser/commands',
196+
docFooterText: 'Commands | Browser Mode',
197+
},
198+
],
199+
// TODO: bring sidebar of apis and config back
178200
'/advanced': [
179201
{
180202
items: [
@@ -252,38 +274,6 @@ export default ({ mode }: { mode: string }) => {
252274
text: 'Vitest UI',
253275
link: '/guide/ui',
254276
},
255-
{
256-
text: 'Browser Mode',
257-
link: '/guide/browser/',
258-
collapsed: false,
259-
items: [
260-
{
261-
text: 'Context',
262-
link: '/guide/browser/context',
263-
docFooterText: 'Context | Browser Mode',
264-
},
265-
{
266-
text: 'Interactivity API',
267-
link: '/guide/browser/interactivity-api',
268-
docFooterText: 'Interactivity API | Browser Mode',
269-
},
270-
{
271-
text: 'Assertion API',
272-
link: '/guide/browser/assertion-api',
273-
docFooterText: 'Assertion API | Browser Mode',
274-
},
275-
{
276-
text: 'Commands',
277-
link: '/guide/browser/commands',
278-
docFooterText: 'Commands | Browser Mode',
279-
},
280-
{
281-
text: 'Examples',
282-
link: '/guide/browser/examples',
283-
docFooterText: 'Examples | Browser Mode',
284-
},
285-
],
286-
},
287277
{
288278
text: 'In-Source Testing',
289279
link: '/guide/in-source',

‎docs/.vitepress/theme/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import '../style/main.css'
66
import '../style/vars.css'
77
import 'uno.css'
88
import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
9+
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
910
import HomePage from '../components/HomePage.vue'
1011
import Version from '../components/Version.vue'
1112
import '@shikijs/vitepress-twoslash/style.css'
@@ -24,5 +25,6 @@ export default {
2425
enhanceApp({ app }) {
2526
app.component('Version', Version)
2627
app.use(TwoslashFloatingVue)
28+
enhanceAppWithTabs(app)
2729
},
2830
} satisfies Theme

‎docs/guide/browser/assertion-api.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Assertion API | Browser Mode
44

55
# Assertion API
66

7-
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:
7+
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:
88

99
- [`toBeDisabled`](https://github.com/testing-library/jest-dom#toBeDisabled)
1010
- [`toBeEnabled`](https://github.com/testing-library/jest-dom#toBeEnabled)

‎docs/guide/browser/context.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Context | Browser Mode
2+
title: Context API | Browser Mode
33
---
44

5-
# Context
5+
# Context API
66

77
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.
88

@@ -42,7 +42,7 @@ export const userEvent: {
4242
## `commands`
4343
4444
::: tip
45-
Commands API is explained in detail at [Commands](/guide/browser/commands).
45+
This API is explained in detail at [Commands API](/guide/browser/commands).
4646
:::
4747
4848
```ts
@@ -59,6 +59,8 @@ The `page` export provides utilities to interact with the current `page`.
5959
6060
::: warning
6161
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.
62+
63+
Use [Commands API](/guide/browser/commands) if you need to have access to Playwright's `page` object.
6264
:::
6365
6466
```ts
@@ -93,7 +95,7 @@ export const cdp: () => CDPSession
9395
9496
## `server`
9597
96-
The `server` export represents the Node.js environment where the Vitest server is running. It is mostly useful for debugging.
98+
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.
9799
98100
```ts
99101
export const server: {

‎docs/guide/browser/examples.md

Lines changed: 0 additions & 158 deletions
This file was deleted.

0 commit comments

Comments
 (0)