diff --git a/AGENTS.md b/AGENTS.md index 80429b5f9f54..17de86efe769 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -100,6 +100,7 @@ Vitest is a next-generation testing framework powered by Vite. This is a monorep - Main docs in `docs/` directory - Built with `pnpm docs:build` - Local dev server: `pnpm docs` +- When adding cli options, run `pnpm -C docs run cli-table` to update the cli-generated.md file ## Dependencies and Tools diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1437260b1806..6ade4f061ab0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -25,6 +25,10 @@ To develop and test `vitest` package: > 💡 If you use VS Code, you can hit `⇧ ⌘ B` or `Ctrl + Shift + B` to launch all the necessary dev tasks. +### UI Development + +If you want to improve Vitest Browser Mode, see the [Browser Mode development guide](./packages/ui/README.md) for setup instructions and development workflow. + ## Debugging ### VS Code @@ -74,6 +78,7 @@ VITE_NODE_DEPS_MODULE_DIRECTORIES=/node_modules/,/packages/ - Add accompanying test case. - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it. + - When adding cli options, run `pnpm -C docs run cli-table` to update the cli-generated.md file - If fixing bug: diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 14b779f45fea..29debfb6c316 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -644,6 +644,10 @@ export default ({ mode }: { mode: string }) => { text: 'browser.ui', link: '/config/browser/ui', }, + { + text: 'browser.detailsPanelPosition', + link: '/config/browser/detailspanelposition', + }, { text: 'browser.viewport', link: '/config/browser/viewport', diff --git a/docs/config/browser.md b/docs/config/browser.md index 32f1b765627b..ff977c09ab39 100644 --- a/docs/config/browser.md +++ b/docs/config/browser.md @@ -93,6 +93,7 @@ List of available `browser` options: - [`browser.screenshotDirectory`](#browser-screenshotdirectory) - [`browser.screenshotFailures`](#browser-screenshotfailures) - [`browser.provider`](#browser-provider) +- [`browser.detailsPanelPosition`](#browser-detailspanelposition) Under the hood, Vitest transforms these instances into separate [test projects](/api/advanced/test-project) sharing a single Vite server for better caching performance. @@ -220,6 +221,14 @@ export interface BrowserProvider { Should Vitest UI be injected into the page. By default, injects UI iframe during development. +## browser.detailsPanelPosition + +- **Type:** `'right' | 'bottom'` +- **Default:** `'right'` +- **CLI:** `--browser.detailsPanelPosition=bottom`, `--browser.detailsPanelPosition=right` + +Controls the default position of the details panel in the Vitest UI when running browser tests. See [`browser.detailsPanelPosition`](/config/browser/detailspanelposition) for more details. + ## browser.viewport - **Type:** `{ width, height }` diff --git a/docs/config/browser/detailspanelposition.md b/docs/config/browser/detailspanelposition.md new file mode 100644 index 000000000000..79fb50ee0539 --- /dev/null +++ b/docs/config/browser/detailspanelposition.md @@ -0,0 +1,28 @@ +--- +title: browser.detailsPanelPosition | Config +outline: deep +--- + +# browser.detailsPanelPosition + +- **Type:** `'right' | 'bottom'` +- **Default:** `'right'` +- **CLI:** `--browser.detailsPanelPosition=bottom`, `--browser.detailsPanelPosition=right` + +Controls the default position of the details panel in the Vitest UI when running browser tests. + +- `'right'` - Shows the details panel on the right side with a horizontal split between the browser viewport and the details panel. +- `'bottom'` - Shows the details panel at the bottom with a vertical split between the browser viewport and the details panel. + +```ts [vitest.config.ts] +import { defineConfig } from 'vitest/config' + +export default defineConfig({ + test: { + browser: { + enabled: true, + detailsPanelPosition: 'bottom', // or 'right' + }, + }, +}) +``` diff --git a/docs/guide/cli-generated.md b/docs/guide/cli-generated.md index b1a61ddf1b5d..0b1340c77418 100644 --- a/docs/guide/cli-generated.md +++ b/docs/guide/cli-generated.md @@ -346,6 +346,13 @@ Run every browser test file in isolation. To disable isolation, use `--browser.i Show Vitest UI when running tests (default: `!process.env.CI`) +### browser.detailsPanelPosition + +- **CLI:** `--browser.detailsPanelPosition ` +- **Config:** [browser.detailsPanelPosition](/config/browser/detailspanelposition) + +Default position for the details panel in browser mode. Either `right` (horizontal split) or `bottom` (vertical split) (default: `right`) + ### browser.fileParallelism - **CLI:** `--browser.fileParallelism` diff --git a/packages/ui/README.md b/packages/ui/README.md index 76bb591c8ba9..492d568bd3af 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -26,4 +26,6 @@ nr test --api=3200 Open the browser at the URL printed by the first command. For example, `http://localhost:5173/`. If you see a connection error, it means the port is specified incorrectly. -To preview the browser tab, uncomment the "browser-dev-preview" plugin in `vite.config.ts`. To configure the browser state, update the `__vitest_browser_runner__` object in `browser.dev.js`. +To preview the browser tab, uncomment the "browser-dev-preview" plugin in `vite.config.ts`. + +To configure the browser state, update the `__vitest_browser_runner__` object in `browser.dev.js`. diff --git a/packages/ui/client/components/BrowserIframe.vue b/packages/ui/client/components/BrowserIframe.vue index 00be3df7a415..20823fcbf0b9 100644 --- a/packages/ui/client/components/BrowserIframe.vue +++ b/packages/ui/client/components/BrowserIframe.vue @@ -5,10 +5,10 @@ import { computed } from 'vue' import { viewport } from '~/composables/browser' import { browserState } from '~/composables/client' import { - hideRightPanel, + detailsPanelVisible, + detailsPosition, panels, showNavigationPanel, - showRightPanel, updateBrowserPanel, } from '~/composables/navigation' import IconButton from './IconButton.vue' @@ -86,19 +86,11 @@ const marginLeft = computed(() => {
Browser UI -
diff --git a/packages/ui/client/components/ClosedDetailsHeader.vue b/packages/ui/client/components/ClosedDetailsHeader.vue new file mode 100644 index 000000000000..0d4adc1b2307 --- /dev/null +++ b/packages/ui/client/components/ClosedDetailsHeader.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/ui/client/components/Coverage.vue b/packages/ui/client/components/Coverage.vue index b1abd19e68b1..a26a848443c1 100644 --- a/packages/ui/client/components/Coverage.vue +++ b/packages/ui/client/components/Coverage.vue @@ -1,4 +1,7 @@ @@ -7,6 +9,7 @@ import TestsFilesContainer from './dashboard/TestsFilesContainer.vue'
Dashboard +
diff --git a/packages/ui/client/components/DetailsHeaderButtons.vue b/packages/ui/client/components/DetailsHeaderButtons.vue new file mode 100644 index 000000000000..4446612a3263 --- /dev/null +++ b/packages/ui/client/components/DetailsHeaderButtons.vue @@ -0,0 +1,46 @@ + + + diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue index 13bb1220fac5..0c9e65a06f8e 100644 --- a/packages/ui/client/components/FileDetails.vue +++ b/packages/ui/client/components/FileDetails.vue @@ -5,6 +5,7 @@ import type { Params } from '~/composables/params' import { debouncedWatch } from '@vueuse/core' import { toJSON } from 'flatted' import { computed, nextTick, ref } from 'vue' +import DetailsHeaderButtons from '~/components/DetailsHeaderButtons.vue' import { browserState, client, @@ -241,6 +242,7 @@ const tags = computed(() => { :disabled="!current?.filepath" @click="open" /> +
diff --git a/packages/ui/client/components/DetailsPanel.vue b/packages/ui/client/components/ResultsPanel.vue similarity index 89% rename from packages/ui/client/components/DetailsPanel.vue rename to packages/ui/client/components/ResultsPanel.vue index 785531686c86..04ae02b839b8 100644 --- a/packages/ui/client/components/DetailsPanel.vue +++ b/packages/ui/client/components/ResultsPanel.vue @@ -11,8 +11,8 @@ const open = ref(true)