fix: aut centering and height calculation

packages/app/cypress/e2e/cypress-in-cypress.cy.ts

@@ -1,14 +1,26 @@
+import type { DraggablePanel } from '../../src/runner/useRunnerStyle'
+
+const testingTypes = ['component', 'e2e'] as const
+
+const dragHandleToClientX = (panel: DraggablePanel, x: number) => {
+  return cy.get(`[data-cy="${panel}ResizeHandle"]`).trigger('mousedown', { eventConstructor: 'MouseEvent' })
+  .trigger('mousemove', { clientX: x })
+  .trigger('mouseup', { eventConstructor: 'MouseEvent' })
+}
+
+function startAtSpecsPage (testingType: typeof testingTypes[number]) {
+  cy.scaffoldProject('cypress-in-cypress')
+  cy.findBrowsers()
+  cy.openProject('cypress-in-cypress')
+  cy.startAppServer(testingType)
+  cy.visitApp()
+}
+
 // For Cypress-in-Cypress tests that do not vary based on testing type
 describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 10000 }, () => {
-  const testingTypes = ['component', 'e2e'] as const
-
   testingTypes.forEach((testingType) => {
     it(`handles automation disconnects in ${testingType}`, () => {
-      cy.scaffoldProject('cypress-in-cypress')
-      cy.findBrowsers()
-      cy.openProject('cypress-in-cypress')
-      cy.startAppServer(testingType)
-      cy.visitApp()
+      startAtSpecsPage(testingType)
 
       cy.get('[data-cy="spec-item"]').first().click()
       // Let runner stabilize
@@ -36,11 +48,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
     it(`handles automation missing in ${testingType}`, () => {
       let connectedCallback: any
 
-      cy.scaffoldProject('cypress-in-cypress')
-      cy.findBrowsers()
-      cy.openProject('cypress-in-cypress')
-      cy.startAppServer(testingType)
-      cy.visitApp()
+      startAtSpecsPage(testingType)
 
       cy.window().then((win) => {
         if (!win.ws) {
@@ -84,5 +92,78 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
         expect(ctx.actions.project.launchProject).to.have.been.called
       })
     })
+
+    it(`scales the AUT correctly in ${testingType}`, () => {
+      const assertNoScaleShown = () => {
+        // check that no message about scale % is shown,
+        // meaning the AUT is at 100% scale
+        cy.contains('%)').should('not.exist')
+      }
+
+      cy.scaffoldProject('cypress-in-cypress')
+      cy.findBrowsers()
+      cy.openProject('cypress-in-cypress')
+      cy.withCtx((ctx) => {
+        ctx.coreData.localSettings.preferences.reporterWidth = 800
+      })
+
+      cy.startAppServer(testingType)
+      cy.visitApp()
+
+      cy.get('[data-cy="spec-item"]').first().click()
+      // Let runner stabilize
+      cy.get('#unified-reporter').should('be.visible')
+
+      // validate that the width we set in `withCtx` above is the starting point
+      cy.get(`[data-cy="reporter-panel"]`).invoke('outerWidth').should('eq', 800)
+      cy.percySnapshot('initial state')
+
+      // we will move the right-hand handle of the Reporter
+      // to these positions from the left of the screen
+      const dragPositions = [1000, 1090, 900, 600]
+
+      // based on viewport sizes for CT and e2e tests in the `cypress-in-cypress`
+      // projects, we expect certain scale % values to be shown
+      const testingTypeExpectedScales = {
+        component: ['93%', '75%'],
+        e2e: ['46%', '37%', '56%', '85%'],
+        componentShortViewport: '61%',
+        e2eShortViewport: '46%',
+      }
+
+      // resize the reporter using each of the dragPositions and take Percy snapshots
+      dragPositions.forEach((position, index) => {
+        dragHandleToClientX('panel2', position).then(() => {
+          const expectedScale = testingTypeExpectedScales[testingType][index]
+
+          // CT hits 100% scale "earlier" than E2E, so sometimes there is no expected scale
+          if (expectedScale) {
+            cy.contains(expectedScale).should('be.visible')
+          } else {
+            assertNoScaleShown()
+          }
+
+          cy.percySnapshot(`panel 2 at ${ position } px`)
+        })
+      })
+
+      // now check vertical scaling with viewport resize, and take some snapshots too
+
+      // this viewport should be tall enough to not scale even the e2e test
+      cy.viewport(1500, 1300)
+
+      // make sure the reporter is narrow enough (should be, but don't want to depend on leftover state from above)
+      dragHandleToClientX('panel2', 400).then(() => {
+        // but we have to also collapse the Specs List to remove any reason to scale horizontally
+        cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs').click()
+
+        assertNoScaleShown()
+        cy.percySnapshot('tall viewport')
+
+        cy.viewport(1500, 400)
+        cy.contains(testingTypeExpectedScales[`${ testingType }ShortViewport`]).should('exist')
+        cy.percySnapshot('short viewport')
+      })
+    })
   })
 })

packages/app/src/runner/SpecRunnerHeaderOpenMode.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     id="spec-runner-header"
+    ref="autHeaderEl"
     class="min-h-64px text-14px"
     :style="{ width: `${props.width}px` }"
   >
@@ -130,15 +131,15 @@
 <script lang="ts" setup>
 import { computed, ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
-import { useAutStore, useSpecStore } from '../store'
+import { useAutStore, useSpecStore, useSelectorPlaygroundStore } from '../store'
+import { useAutHeader } from './useAutHeader'
 import { gql } from '@urql/vue'
+import { useI18n } from 'vue-i18n'
 import type { SpecRunnerHeaderFragment } from '../generated/graphql'
-import SelectorPlayground from './selector-playground/SelectorPlayground.vue'
-import { useSelectorPlaygroundStore } from '../store/selector-playground-store'
 import type { EventManager } from './event-manager'
 import type { AutIframe } from './aut-iframe'
 import { togglePlayground as _togglePlayground } from './utils'
-import { useI18n } from 'vue-i18n'
+import SelectorPlayground from './selector-playground/SelectorPlayground.vue'
 import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
 import Alert from '@packages/frontend-shared/src/components/Alert.vue'
 import Button from '@packages/frontend-shared/src/components/Button.vue'
@@ -180,6 +181,8 @@ const props = defineProps<{
 
 const showAlert = ref(false)
 
+const { autHeaderEl } = useAutHeader()
+
 watchEffect(() => {
   showAlert.value = route.params.shouldShowTroubleRenderingAlert === 'true'
 })

packages/app/src/runner/SpecRunnerHeaderRunMode.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     id="spec-runner-header"
+    ref="autHeaderEl"
     class="min-h-64px px-16px text-14px"
     :style="{ width: `${props.width}px` }"
   >
@@ -58,6 +59,7 @@ import { useAutStore } from '../store'
 import type { EventManager } from './event-manager'
 import SpecRunnerDropdown from './SpecRunnerDropdown.vue'
 import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
+import { useAutHeader } from './useAutHeader'
 
 const props = defineProps<{
   eventManager: EventManager
@@ -70,6 +72,8 @@ const displayScale = computed(() => {
 
 const autStore = useAutStore()
 
+const { autHeaderEl } = useAutHeader()
+
 const selectedBrowser = window.__CYPRESS_BROWSER__
 const testingType = window.__CYPRESS_TESTING_TYPE__
 

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -1,7 +1,7 @@
 <template>
-  <RemovePositioningDuringScreenshot
+  <AdjustRunnerStyleDuringScreenshot
     id="main-pane"
-    class="flex border-gray-900 border-l-1"
+    class="flex border-gray-900"
   >
     <AutomationElement />
     <AutomationDisconnected
@@ -75,7 +75,7 @@
           <div
             v-show="!autStore.scriptError"
             :id="RUNNER_ID"
-            class="origin-top-left viewport"
+            class="origin-top viewport"
             :style="viewportStyle"
           />
         </RemoveClassesDuringScreenshotting>
@@ -86,7 +86,7 @@
         <ScreenshotHelperPixels />
       </template>
     </ResizablePanels>
-  </RemovePositioningDuringScreenshot>
+  </AdjustRunnerStyleDuringScreenshot>
 </template>
 
 <script lang="ts" setup>
@@ -100,7 +100,7 @@ import SnapshotControls from './SnapshotControls.vue'
 import SpecRunnerHeaderOpenMode from './SpecRunnerHeaderOpenMode.vue'
 import HideDuringScreenshot from './screenshot/HideDuringScreenshot.vue'
 import RemoveClassesDuringScreenshotting from './screenshot/RemoveClassesDuringScreenshotting.vue'
-import RemovePositioningDuringScreenshot from './screenshot/RemovePositioningDuringScreenshot.vue'
+import AdjustRunnerStyleDuringScreenshot from './screenshot/AdjustRunnerStyleDuringScreenshot.vue'
 import ScreenshotHelperPixels from './screenshot/ScreenshotHelperPixels.vue'
 import { useScreenshotStore } from '../store/screenshot-store'
 import ChooseExternalEditorModal from '@packages/frontend-shared/src/gql-components/ChooseExternalEditorModal.vue'
@@ -160,14 +160,6 @@ const autStore = useAutStore()
 const screenshotStore = useScreenshotStore()
 const runnerUiStore = useRunnerUiStore()
 const preferences = usePreferences()
-
-const {
-  viewportStyle,
-  windowWidth,
-  reporterWidth,
-  specListWidth,
-} = useRunnerStyle()
-
 const {
   handlePanelWidthUpdated,
   handleResizeEnd,
@@ -179,21 +171,32 @@ const {
   cleanupRunner,
 } = useEventManager()
 
+const specsListWidthPreferences = computed(() => {
+  return props.gql.localSettings.preferences.specListWidth ?? runnerUiStore.specListWidth
+})
+
+const reporterWidthPreferences = computed(() => {
+  return props.gql.localSettings.preferences.reporterWidth ?? runnerUiStore.reporterWidth
+})
+
+// we must update preferences before calling useRunnerStyle, to make sure that values from GQL
+// will be available during the initial calculation that useRunnerStyle does
+
+preferences.update('reporterWidth', reporterWidthPreferences.value)
+preferences.update('specListWidth', specsListWidthPreferences.value)
+
+const {
+  viewportStyle,
+  windowWidth,
+} = useRunnerStyle()
+
 // watch active spec, and re-run if it changes!
 startSpecWatcher()
 
 onMounted(() => {
   initializeRunnerLifecycleEvents()
 })
 
-const specsListWidthPreferences = computed(() => {
-  return props.gql.localSettings.preferences.specListWidth ?? specListWidth.value
-})
-
-const reporterWidthPreferences = computed(() => {
-  return props.gql.localSettings.preferences.reporterWidth ?? reporterWidth.value
-})
-
 preferences.update('autoScrollingEnabled', props.gql.localSettings.preferences.autoScrollingEnabled ?? true)
 preferences.update('isSpecsListOpen', props.gql.localSettings.preferences.isSpecsListOpen ?? true)
 preferences.update('reporterWidth', reporterWidthPreferences.value)
@@ -219,7 +222,6 @@ function openFile () {
     },
   })
 }
-
 onMounted(() => {
   const eventManager = getEventManager()
 

packages/app/src/runner/SpecRunnerRunMode.vue

@@ -1,7 +1,7 @@
 <template>
-  <RemovePositioningDuringScreenshot
+  <AdjustRunnerStyleDuringScreenshot
     id="main-pane"
-    class="flex border-gray-900 border-l-1"
+    class="flex border-gray-900"
   >
     <AutomationElement />
     <AutomationDisconnected
@@ -14,7 +14,7 @@
       v-else
       :max-total-width="windowWidth"
       :initial-panel1-width="0"
-      :initial-panel2-width="reporterWidth"
+      :initial-panel2-width="runnerUiStore.reporterWidth"
       :show-panel1="false"
       :show-panel2="!screenshotStore.isScreenshotting"
       @resize-end="handleResizeEnd"
@@ -57,7 +57,7 @@
           <div
             v-show="!autStore.scriptError"
             :id="RUNNER_ID"
-            class="origin-top-left viewport"
+            class="origin-top viewport"
             :style="viewportStyle"
           />
         </RemoveClassesDuringScreenshotting>
@@ -68,7 +68,7 @@
         <ScreenshotHelperPixels />
       </template>
     </ResizablePanels>
-  </RemovePositioningDuringScreenshot>
+  </AdjustRunnerStyleDuringScreenshot>
 </template>
 
 <script lang="ts" setup>
@@ -79,7 +79,7 @@ import { useAutStore, useRunnerUiStore } from '../store'
 import SnapshotControls from './SnapshotControls.vue'
 import HideDuringScreenshot from './screenshot/HideDuringScreenshot.vue'
 import RemoveClassesDuringScreenshotting from './screenshot/RemoveClassesDuringScreenshotting.vue'
-import RemovePositioningDuringScreenshot from './screenshot/RemovePositioningDuringScreenshot.vue'
+import AdjustRunnerStyleDuringScreenshot from './screenshot/AdjustRunnerStyleDuringScreenshot.vue'
 import ScreenshotHelperPixels from './screenshot/ScreenshotHelperPixels.vue'
 import { useScreenshotStore } from '../store/screenshot-store'
 import ScriptError from './ScriptError.vue'
@@ -105,7 +105,6 @@ const runnerUiStore = useRunnerUiStore()
 const {
   viewportStyle,
   windowWidth,
-  reporterWidth,
 } = useRunnerStyle()
 
 const {

packages/app/src/runner/screenshot/RemovePositioningDuringScreenshot.vue → packages/app/src/runner/screenshot/AdjustRunnerStyleDuringScreenshot.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :style="style">
+  <div
+    :style="style"
+    :class="screenshotStore.isScreenshotting ? '' : 'border-l-1'"
+  >
     <slot />
   </div>
 </template>

packages/app/src/runner/screenshot/reference-screenshots/README.md

@@ -0,0 +1,5 @@
+These screenshots are checked into git as a good reference for what the output of the tests in screenshot.cy.tsx should be. It is sometimes useful to have easy access to compare known "good" screenshots with the real generated screenshots when developing locally.
+
+That said, since these are manually maintained, they could easily become out of sync with the test over time. So this folder is a convenience, not a absolute source of truth.
+
+TODO: UNIFY-1566 - add these screenshots to Percy for diffing.

packages/app/src/runner/useAutHeader.ts

@@ -0,0 +1,19 @@
+import { useElementSize } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import { useAutStore } from '../store'
+
+export function useAutHeader () {
+  const autStore = useAutStore()
+  const autHeaderEl = ref<HTMLDivElement>()
+  const { height } = useElementSize(autHeaderEl)
+
+  watch(height, () => {
+    autStore.setSpecRunnerHeaderHeight(height.value)
+  }, {
+    immediate: true,
+  })
+
+  return {
+    autHeaderEl,
+  }
+}