Skip to content

Commit

Permalink
feat(browser): make iframe scalable, improve documentation (#6257)
Browse files Browse the repository at this point in the history
  • Loading branch information
sheremet-va authored Aug 5, 2024
1 parent b77e14f commit 74ca11a
Show file tree
Hide file tree
Showing 45 changed files with 831 additions and 407 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
1 change: 1 addition & 0 deletions docs/.vitepress/components/FeaturesList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
108 changes: 49 additions & 59 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
},
],
},
Expand Down Expand Up @@ -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: [
Expand Down Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions docs/.vitepress/theme/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -24,5 +25,6 @@ export default {
enhanceApp({ app }) {
app.component('Version', Version)
app.use(TwoslashFloatingVue)
enhanceAppWithTabs(app)
},
} satisfies Theme
2 changes: 1 addition & 1 deletion docs/guide/browser/assertion-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
10 changes: 6 additions & 4 deletions docs/guide/browser/context.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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: {
Expand Down
158 changes: 0 additions & 158 deletions docs/guide/browser/examples.md

This file was deleted.

Loading

0 comments on commit 74ca11a

Please sign in to comment.