feat: Debug failed test limit (#25418)

packages/app/src/debug/DebugContainer.cy.tsx

@@ -221,6 +221,24 @@ describe('<DebugContainer />', () => {
       cy.findByTestId('debug-spec-item').should('be.visible')
     })
 
+    it('renders failed test limit when exceeded', () => {
+      cy.mountFragment(DebugSpecsFragmentDoc, {
+        onResult: (result) => {
+          if (result.currentProject?.cloudProject?.__typename === 'CloudProject') {
+            const test = result.currentProject.cloudProject.runByNumber
+
+            result.currentProject.cloudProject.runByNumber = {
+              ...CloudRunStubs.failingWithTests,
+              totalFailed: 120,
+            } as typeof test
+          }
+        },
+        render: (gqlVal) => <DebugContainer gql={gqlVal} />,
+      })
+
+      cy.findByTestId('debug-spec-limit').should('be.visible')
+    })
+
     context('newer relevant run available', () => {
       it('displays newer run with progress when running', () => {
         cy.mountFragment(DebugSpecsFragmentDoc, {

packages/app/src/debug/DebugContainer.vue

@@ -39,6 +39,11 @@
           v-if="run.totalFailed && shouldDisplaySpecsList(run.status)"
           :specs="debugSpecsArray"
         />
+        <DebugSpecLimitBanner
+          v-if="run.totalFailed && run.totalFailed > 100"
+          :failed-test-count="run.totalFailed"
+          :cloud-run-url="run.url"
+        />
       </template>
     </div>
     <div
@@ -65,6 +70,7 @@ import DebugNotLoggedIn from './empty/DebugNotLoggedIn.vue'
 import DebugNoProject from './empty/DebugNoProject.vue'
 import DebugNoRuns from './empty/DebugNoRuns.vue'
 import DebugError from './empty/DebugError.vue'
+import DebugSpecLimitBanner from './DebugSpecLimitBanner.vue'
 import DebugNewRelevantRunBar from './DebugNewRelevantRunBar.vue'
 import { specsList } from './utils/DebugMapping'
 import type { CloudRunHidingReason } from './DebugOverLimit.vue'
@@ -115,7 +121,7 @@ fragment DebugSpecs on Query {
             id
             ...DebugPageDetails_cloudCiBuildInfo
           }
-          testsForReview {
+          testsForReview(limit: 100) {
             id
             ...DebugSpecListTests
           }

packages/app/src/debug/DebugNewRelevantRunBar.vue

@@ -72,7 +72,7 @@ function navigateToNewerRun () {
 </script>
 <style scoped>
 #metadata li:last-child::before {
-  content: '.';
-  @apply -mt-8px text-lg text-gray-400 pr-8px
+  content: '•';
+  @apply text-lg text-gray-400 pr-8px
 }
 </style>

packages/app/src/debug/DebugPageHeader.vue

@@ -151,7 +151,7 @@ const totalDuration = useDurationFormat(debug.value.totalDuration ?? 0)
 </script>
 <style scoped>
 [data-cy=metadata] li:not(:first-child)::before {
-  content: '.';
-  @apply -mt-8px text-lg text-gray-400 pr-8px
+  content: '•';
+  @apply text-lg text-gray-400 pr-8px
 }
 </style>

packages/app/src/debug/DebugSpecLimitBanner.cy.tsx

@@ -0,0 +1,36 @@
+import DebugSpecLimitBanner from './DebugSpecLimitBanner.vue'
+import { defaultMessages } from '@cy/i18n'
+
+describe('<DebugSpecLimitBanner />', () => {
+  it('renders expected copy and link', () => {
+    cy.mount(() => (
+      <DebugSpecLimitBanner
+        failedTestCount={120}
+        cloudRunUrl="#"
+      />
+    ))
+
+    cy.contains(defaultMessages.debugPage.limit.title)
+    cy.contains(defaultMessages.debugPage.limit.message.split('|')[0].trim().replace('{n}', '120'))
+    cy.contains(defaultMessages.debugPage.limit.link)
+
+    cy.viewport(1000, 400)
+    cy.percySnapshot('large viewport')
+
+    cy.viewport(600, 400)
+    cy.percySnapshot('small viewport')
+  })
+
+  it('does not render link if no url provided', () => {
+    cy.mount(() => (
+      <DebugSpecLimitBanner
+        failedTestCount={120}
+        cloudRunUrl={null}
+      />
+    ))
+
+    cy.get('a').should('not.exist')
+
+    cy.percySnapshot()
+  })
+})

packages/app/src/debug/DebugSpecLimitBanner.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    id="limit-row"
+    data-cy="debug-spec-limit"
+    class="w-full py-16px px-24px gap-y-1"
+  >
+    <ul class="rounded flex flex-row flex-wrap bg-indigo-50 border-indigo-100 p-12px p-4 gap-x-2 items-center whitespace-nowrap children:flex children:items-center">
+      <li class="font-medium text-sm text-gray-900">
+        {{ t('debugPage.limit.title') }}
+      </li>
+      <li class="font-normal text-sm text-gray-700">
+        {{ t('debugPage.limit.message', { n: failedTestCount }) }}
+      </li>
+      <li
+        v-if="cloudRunUrl"
+        class="text-sm"
+      >
+        <ExternalLink :href="cloudRunUrl">
+          {{ t('debugPage.limit.link') }}
+        </ExternalLink>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
+
+defineProps<{
+  failedTestCount: number
+  cloudRunUrl: string | null
+}>()
+
+</script>
+
+<style scoped>
+#limit-row li:not(:first-child)::before {
+  content: '•';
+  @apply text-lg text-gray-500 pr-8px
+}
+</style>

packages/app/src/runs/RunCard.vue

@@ -133,7 +133,7 @@ const tags = computed(() => {
 
 <style scoped>
 li:not(:first-child)::before {
-  content: '.';
-  @apply -mt-8px text-lg text-gray-400 pr-8px
+  content: '•';
+  @apply text-lg text-gray-400 pr-8px
 }
 </style>

packages/frontend-shared/src/locales/en-US.json

@@ -644,6 +644,11 @@
     }
   },
   "debugPage": {
+    "limit": {
+      "title": "Cypress renders up to 100 failed test results",
+      "message": "This run has {n} failed tests | This run has {n} failed test | This run has {n} failed tests",
+      "link": "See all test results in Cypress Cloud"
+    },
     "runFailures": {
       "btn": "Run Failures",
       "notFoundLocally": "Spec was not found locally",