Merge pull request #21653 from cypress-io/marktnoonan/script-error-he…

…ight

fix: make ScriptError display at full height in Runner

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

@@ -147,6 +147,34 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.get('[data-model-state="passed"]').should('contain', 'renders the blank page')
   })
 
+  it('shows a compilation error with a malformed spec', { viewportHeight: 596, viewportWidth: 1000 }, () => {
+    const expectedAutHeight = 500 // based on explicitly setting viewport in this test to 596
+
+    cy.visitApp()
+
+    cy.withCtx(async (ctx, o) => {
+      await ctx.actions.file.writeFileInProject(o.path, `describe('Bad spec', () => { it('has a syntax error', () => { expect(true).to.be.true }) }`)
+    }, { path: getPathForPlatform('cypress/e2e/bad-spec.spec.js') })
+
+    cy.contains('bad-spec.spec')
+    .click()
+
+    cy.contains('No tests found').should('be.visible')
+
+    cy.contains('SyntaxError')
+    .should('be.visible')
+    .invoke('outerHeight')
+    .should('eq', expectedAutHeight)
+
+    // Checking the height here might seem excessive
+    // but we really want some warning if this changes
+    // and should understand the reasons if it does.
+    // We could consider removing this after percy is
+    // up and running for e2e tests.
+
+    cy.percySnapshot()
+  })
+
   it('should show visit failure blank page', () => {
     cy.visitApp()
     cy.contains('blank-contents.spec')

packages/app/src/runner/ScriptError.vue

@@ -1,14 +1,17 @@
 <template>
   <pre
-    class="text-red-500 bg-white p-24px overflow-auto h-[calc(100%-70px)] whitespace-pre-wrap break-all text-sm"
+    class="bg-white text-sm p-24px text-red-500 overflow-auto whitespace-pre-wrap break-all"
+    :style="style"
     v-html="scriptError"
   />
 </template>
 
 <script setup lang="ts">
 import ansiToHtml from 'ansi-to-html'
 import { computed } from 'vue'
+import { useAutStore } from '../store'
 
+const autStore = useAutStore()
 const convert = new ansiToHtml({
   fg: '#000',
   bg: '#fff',
@@ -20,5 +23,6 @@ const convert = new ansiToHtml({
 const props = defineProps<{ error: string }>()
 
 const scriptError = computed(() => convert.toHtml(props.error))
+const style = computed(() => `height: calc(100vh - ${autStore.specRunnerHeaderHeight + 32}px)`)
 
 </script>