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>