feat(browser): support changing the viewport (#5811)

Author: sheremet-va

docs/config/index.md

@@ -1609,6 +1609,13 @@ To have a better type safety when using built-in providers, you can add one of t
 
 Should Vitest UI be injected into the page. By default, injects UI iframe during development.
 
+#### browser.viewport {#browser-viewport}
+
+- **Type:** `{ width, height }`
+- **Default:** `414x896`
+
+Default iframe's viewport.
+
 #### browser.indexScripts {#browser-indexscripts}
 
 - **Type:** `BrowserScript[]`

docs/guide/browser.md

@@ -135,17 +135,23 @@ export const server: {
    * The same as calling `process.version` on the server.
    */
   version: string
+  /**
+   * Name of the browser provider.
+   */
+  provider: string
+  /**
+   * Name of the current browser.
+   */
+  browser: string
   /**
    * Available commands for the browser.
-   * @see {@link https://vitest.dev/guide/browser#commands}
    */
   commands: BrowserCommands
 }
 
 /**
  * Available commands for the browser.
  * A shortcut to `server.commands`.
- * @see {@link https://vitest.dev/guide/browser#commands}
  */
 export const commands: BrowserCommands
 
@@ -154,6 +160,10 @@ export const page: {
    * Serialized test config.
    */
   config: ResolvedConfig
+  /**
+   * Change the size of iframe's viewport.
+   */
+  viewport: (width: number | string, height: number | string) => Promise<void>
 }
 ```
 

packages/browser/context.d.ts

@@ -84,4 +84,8 @@ export const page: {
    * Serialized test config.
    */
   config: ResolvedConfig
+  /**
+   * Change the size of iframe's viewport.
+   */
+  viewport: (width: number | string, height: number | string) => Promise<void>
 }

packages/browser/src/client/orchestrator.ts

@@ -38,6 +38,10 @@ function createIframe(container: HTMLDivElement, file: string) {
   iframe.setAttribute('src', `${url.pathname}__vitest_test__/__test__/${encodeURIComponent(file)}`)
   iframe.setAttribute('data-vitest', 'true')
 
+  const config = getConfig().browser
+  iframe.style.width = `${config.viewport.width}px`
+  iframe.style.height = `${config.viewport.height}px`
+
   iframe.style.display = 'block'
   iframe.style.border = 'none'
   iframe.style.pointerEvents = 'none'
@@ -66,7 +70,14 @@ interface IframeErrorEvent {
   files: string[]
 }
 
-type IframeChannelEvent = IframeDoneEvent | IframeErrorEvent
+interface IframeViewportEvent {
+  type: 'viewport'
+  width: number | string
+  height: number | string
+  id: string
+}
+
+type IframeChannelEvent = IframeDoneEvent | IframeErrorEvent | IframeViewportEvent
 
 async function getContainer(config: ResolvedConfig): Promise<HTMLDivElement> {
   if (config.browser.ui) {
@@ -99,6 +110,30 @@ client.ws.addEventListener('open', async () => {
   channel.addEventListener('message', async (e: MessageEvent<IframeChannelEvent>): Promise<void> => {
     debug('channel event', JSON.stringify(e.data))
     switch (e.data.type) {
+      case 'viewport': {
+        const { width, height, id } = e.data
+        const widthStr = typeof width === 'number' ? `${width}px` : width
+        const heightStr = typeof height === 'number' ? `${height}px` : height
+        const iframe = iframes.get(id)
+        if (!iframe) {
+          const error = new Error(`Cannot find iframe with id ${id}`)
+          channel.postMessage({ type: 'viewport:fail', id, error: error.message })
+          await client.rpc.onUnhandledError({
+            name: 'Teardown Error',
+            message: error.message,
+          }, 'Teardown Error')
+          return
+        }
+        iframe.style.width = widthStr
+        iframe.style.height = heightStr
+        const ui = getUiAPI()
+        if (ui) {
+          await new Promise(r => requestAnimationFrame(r))
+          ui.recalculateDetailPanels()
+        }
+        channel.postMessage({ type: 'viewport:done', id })
+        break
+      }
       case 'done': {
         const filenames = e.data.filenames
         filenames.forEach(filename => runningFiles.delete(filename))
@@ -161,22 +196,32 @@ async function createTesters(testFiles: string[]) {
       container,
       ID_ALL,
     )
+
+    const ui = getUiAPI()
+
+    if (ui) {
+      await new Promise(r => requestAnimationFrame(r))
+      ui.recalculateDetailPanels()
+    }
   }
   else {
     // otherwise, we need to wait for each iframe to finish before creating the next one
     // this is the most stable way to run tests in the browser
     for (const file of testFiles) {
       const ui = getUiAPI()
 
+      createIframe(
+        container,
+        file,
+      )
+
       if (ui) {
         const id = generateFileId(file)
         ui.setCurrentById(id)
+        await new Promise(r => requestAnimationFrame(r))
+        ui.recalculateDetailPanels()
       }
 
-      createIframe(
-        container,
-        file,
-      )
       await new Promise<void>((resolve) => {
         channel.addEventListener('message', function handler(e: MessageEvent<IframeChannelEvent>) {
           // done and error can only be triggered by the previous iframe

packages/browser/src/client/ui.ts

@@ -3,6 +3,8 @@ import type { File } from '@vitest/runner'
 interface UiAPI {
   currentModule: File
   setCurrentById: (fileId: string) => void
+  resetDetailSizes: () => void
+  recalculateDetailPanels: () => void
 }
 
 export function getUiAPI(): UiAPI | undefined {

packages/browser/src/client/utils.ts

@@ -16,6 +16,7 @@ interface BrowserRunnerState {
   config: ResolvedConfig
   type: 'tester' | 'orchestrator'
   wrapModule: <T>(module: () => T) => T
+  iframeId?: string
   runTests?: (tests: string[]) => Promise<void>
   createTesters?: (files: string[]) => Promise<void>
 }

packages/browser/src/node/index.ts

@@ -106,6 +106,7 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
           const decodedTestFile = decodeURIComponent(url.pathname.slice(testerPrefix.length))
           // if decoded test file is "__vitest_all__" or not in the list of known files, run all tests
           const tests = decodedTestFile === '__vitest_all__' || !files.includes(decodedTestFile) ? '__vitest_browser_runner__.files' : JSON.stringify([decodedTestFile])
+          const iframeId = decodedTestFile === '__vitest_all__' ? '"__vitest_all__"' : JSON.stringify(decodedTestFile)
 
           if (!testerScripts)
             testerScripts = await formatScripts(project.config.browser.testerScripts, server)
@@ -119,6 +120,7 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
             // TODO: have only a single global variable to not pollute the global scope
 `<script type="module">
   __vitest_browser_runner__.runningFiles = ${tests}
+  __vitest_browser_runner__.iframeId = ${iframeId}
   __vitest_browser_runner__.runTests(__vitest_browser_runner__.runningFiles)
 </script>`,
           })

packages/browser/src/node/plugins/pluginContext.ts

@@ -40,6 +40,7 @@ function generateContextFile(project: WorkspaceProject) {
 
   return `
 const rpc = () => __vitest_worker__.rpc
+const channel = new BroadcastChannel('vitest')
 
 export const server = {
   platform: ${JSON.stringify(process.platform)},
@@ -54,6 +55,22 @@ export const commands = server.commands
 export const page = {
   get config() {
     return __vitest_browser_runner__.config
+  },
+  viewport(width, height) {
+    const id = __vitest_browser_runner__.iframeId
+    channel.postMessage({ type: 'viewport', width, height, id })
+    return new Promise((resolve) => {
+      channel.addEventListener('message', function handler(e) {
+        if (e.data.type === 'viewport:done' && e.data.id === id) {
+          channel.removeEventListener('message', handler)
+          resolve()
+        }
+        if (e.data.type === 'viewport:fail' && e.data.id === id) {
+          channel.removeEventListener('message', handler)
+          reject(new Error(e.data.error))
+        }
+      })
+    })
   }
 }
 `

packages/ui/client/auto-imports.d.ts

@@ -40,6 +40,7 @@ declare global {
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
+  const detailSizes: typeof import('./composables/navigation')['detailSizes']
   const disableCoverage: typeof import('./composables/navigation')['disableCoverage']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
@@ -102,6 +103,7 @@ declare global {
   const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
   const reactivePick: typeof import('@vueuse/core')['reactivePick']
   const readonly: typeof import('vue')['readonly']
+  const recalculateDetailPanels: typeof import('./composables/navigation')['recalculateDetailPanels']
   const ref: typeof import('vue')['ref']
   const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
   const refDebounced: typeof import('@vueuse/core')['refDebounced']

packages/ui/client/components/BrowserIframe.vue

@@ -1,12 +1,35 @@
 <script setup lang="ts">
 const viewport = ref('custom')
+import { recalculateDetailPanels } from '~/composables/navigation'
 
-function changeViewport(name: string) {
+const sizes = {
+  'small-mobile': ['320px', '568px'],
+  'large-mobile': ['414px', '896px'],
+  tablet: ['834px', '1112px'],
+  custom: ['100%', '100%'],
+}
+
+async function changeViewport(name: string) {
   if (viewport.value === name) {
     viewport.value = 'custom'
   } else {
     viewport.value = name
   }
+
+  const iframe = document.querySelector('#tester-ui iframe[data-vitest]')
+  if (!iframe) {
+    console.warn('Iframe not found')
+    return
+  }
+
+  const [width, height] = sizes[viewport.value]
+
+  iframe.style.width = width
+  iframe.style.height = height
+
+  await new Promise(r => requestAnimationFrame(r))
+
+  recalculateDetailPanels()
 }
 </script>
 
@@ -62,31 +85,9 @@ function changeViewport(name: string) {
       />
     </div>
     <div flex-auto overflow-auto>
-      <div id="tester-ui" class="flex h-full justify-center items-center font-light op70" style="overflow: auto; width: 100%; height: 100%" :data-viewport="viewport">
+      <div id="tester-ui" class="flex h-full justify-center items-center font-light op70" style="overflow: auto; width: 100%; height: 100%">
         Select a test to run
       </div>
     </div>
   </div>
 </template>
-
-<style>
-[data-viewport="custom"] iframe {
-  width: 100%;
-  height: 100%;
-}
-
-[data-viewport="small-mobile"] iframe {
-  width: 320px;
-  height: 568px;
-}
-
-[data-viewport="large-mobile"] iframe {
-  width: 414px;
-  height: 896px;
-}
-
-[data-viewport="tablet"] iframe {
-  width: 834px;
-  height: 1112px;
-}
-</style>

packages/ui/client/composables/navigation.ts

@@ -12,6 +12,19 @@ export const coverageEnabled = computed(() => {
   return coverageConfigured.value
     && coverage.value.reporter.map(([reporterName]) => reporterName).includes('html')
 })
+export const detailSizes = useLocalStorage<[left: number, right: number]>('vitest-ui_splitpanes-detailSizes', [33, 67], {
+  initOnMounted: true,
+})
+
+export function recalculateDetailPanels() {
+  const iframe = document.querySelector('#tester-ui iframe[data-vitest]')!
+  const panel = document.querySelector('#details-splitpanes')!
+  const panelWidth = panel.clientWidth
+  const iframeWidth = iframe.clientWidth
+  const iframePercent = Math.min((iframeWidth / panelWidth) * 100, 95)
+  const detailsPercent = 100 - iframePercent
+  detailSizes.value = [iframePercent, detailsPercent]
+}
 
 // @ts-expect-error not typed global
 window.__vitest_ui_api__ = {
@@ -23,6 +36,10 @@ window.__vitest_ui_api__ = {
     currentModule.value = findById(fileId)
     showDashboard(false)
   },
+  resetDetailSizes() {
+    detailSizes.value = [33, 67]
+  },
+  recalculateDetailPanels,
 }
 export const openedTreeItems = useLocalStorage<string[]>('vitest-ui_task-tree-opened', [])
 // TODO

packages/ui/client/pages/index.vue

@@ -2,15 +2,12 @@
 // @ts-expect-error missing types
 import { Pane, Splitpanes } from 'splitpanes'
 import { browserState } from '~/composables/client';
-import { coverageUrl, coverageVisible, initializeNavigation } from '../composables/navigation'
+import { coverageUrl, coverageVisible, initializeNavigation, detailSizes } from '../composables/navigation'
 
 const dashboardVisible = initializeNavigation()
 const mainSizes = useLocalStorage<[left: number, right: number]>('vitest-ui_splitpanes-mainSizes', [33, 67], {
   initOnMounted: true,
 })
-const detailSizes = useLocalStorage<[left: number, right: number]>('vitest-ui_splitpanes-detailSizes', [33, 67], {
-  initOnMounted: true,
-})
 
 const onMainResized = useDebounceFn((event: { size: number }[]) => {
   event.forEach((e, i) => {
@@ -28,9 +25,6 @@ function resizeMain() {
   const panelWidth = Math.min(width / 3, 300)
   mainSizes.value[0] = (100 * panelWidth) / width
   mainSizes.value[1] = 100 - mainSizes.value[0]
-  // initialize suite width with the same navigation panel width in pixels (adjust its % inside detail's split pane)
-  detailSizes.value[0] = (100 * panelWidth) / (width - panelWidth)
-  detailSizes.value[1] = 100 - detailSizes.value[0]
 }
 </script>
 
@@ -47,18 +41,16 @@ function resizeMain() {
           <Coverage v-else-if="coverageVisible" key="coverage" :src="coverageUrl" />
           <FileDetails v-else />
         </transition>
-        <transition v-else>
-          <Splitpanes key="detail" @resized="onModuleResized">
-            <Pane :size="detailSizes[0]">
-              <BrowserIframe v-once />
-            </Pane>
-            <Pane :size="detailSizes[1]">
-              <Dashboard v-if="dashboardVisible" key="summary" />
-              <Coverage v-else-if="coverageVisible" key="coverage" :src="coverageUrl" />
-              <FileDetails v-else />
-            </Pane>
-          </Splitpanes>
-        </transition>
+        <Splitpanes v-else key="detail" id="details-splitpanes" @resized="onModuleResized">
+          <Pane :size="detailSizes[0]">
+            <BrowserIframe v-once />
+          </Pane>
+          <Pane :size="detailSizes[1]" min-size="5">
+            <Dashboard v-if="dashboardVisible" key="summary" />
+            <Coverage v-else-if="coverageVisible" key="coverage" :src="coverageUrl" />
+            <FileDetails v-else />
+          </Pane>
+        </Splitpanes>
       </Pane>
     </Splitpanes>
   </div>

packages/vitest/src/node/cli/cli-config.ts

@@ -350,6 +350,7 @@ export const cliOptionsConfig: VitestCLIOptions = {
       indexScripts: null,
       testerScripts: null,
       commands: null,
+      viewport: null,
     },
   },
   pool: {