fix: only render debug artifacts when info is available (#25362)

Co-authored-by: Stokes Player <stokes@cypress.io>

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

@@ -1,7 +1,8 @@
 import DebugArtifactLink from './DebugArtifactLink.vue'
+import type { ArtifactType } from './utils/debugArtifacts'
 
 describe('<DebugArtifacts />', () => {
-  const artifactMapping: {icon: string, text: string, url: string}[] = [
+  const artifactMapping: {icon: ArtifactType, text: string, url: string}[] = [
     { icon: 'TERMINAL_LOG', text: 'View Log', url: 'www.cypress.io' },
     { icon: 'IMAGE_SCREENSHOT', text: 'View Screenshot', url: 'cloud.cypress.io' },
     { icon: 'PLAY', text: 'View Video', url: 'www.cypress.io' },

packages/app/src/debug/DebugArtifactLink.vue

@@ -32,15 +32,14 @@
 import { IconTechnologyTerminalLog, IconTechnologyImageScreenshot, IconActionPlaySmall } from '@cypress-design/vue-icon'
 import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import type { ArtifactType } from './utils/debugArtifacts'
 
 const props = defineProps<{
-  icon: string
+  icon: ArtifactType
   popperText: string
-  url: string | null | undefined
+  url: string
 }>()
 
-type ArtifactType = 'TERMINAL_LOG' | 'IMAGE_SCREENSHOT' | 'PLAY'
-
 const ICON_MAP: Record<ArtifactType, any> = {
   'TERMINAL_LOG': IconTechnologyTerminalLog,
   'IMAGE_SCREENSHOT': IconTechnologyImageScreenshot,

packages/app/src/debug/DebugContainer.vue

@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { gql } from '@urql/vue'
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import type { CloudRunStatus, DebugSpecsFragment, TestingTypeEnum } from '../generated/graphql'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
 import DebugPageHeader from './DebugPageHeader.vue'

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

@@ -31,8 +31,26 @@ const group2 = {
   id: '456',
 }
 
+const instance1: TestResults['instance'] = {
+  id: '123',
+  groupId: '123',
+  status: 'FAILED',
+  hasScreenshots: true,
+  screenshotsUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/screenshots',
+  hasStdout: true,
+  stdoutUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/stdout',
+  hasVideo: true,
+  videoUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/video',
+}
+
+const instance2: TestResults['instance'] = {
+  ...instance1,
+  id: '456',
+  groupId: '456',
+}
+
 /**
- * This helper testing function mimicks mappedTitleParts in DebugFailedTest.
+ * This helper testing function mimics mappedTitleParts in DebugFailedTest.
  * It creates an ordered array of titleParts and chevron icons and then asserts
  * the order in which they are rendered using the testAttr and text values.
  */
@@ -84,14 +102,7 @@ describe('<DebugFailedTest/>', () => {
     const testResult: TestResults = {
       id: '676df87878',
       titleParts: ['Login', 'Should redirect unauthenticated user to signin page'],
-      instance: {
-        id: '123',
-        groupId: '123',
-        status: 'FAILED',
-        hasScreenshots: false,
-        hasStdout: false,
-        hasVideo: false,
-      },
+      instance: instance1,
     }
 
     cy.mount(() => (
@@ -114,14 +125,7 @@ describe('<DebugFailedTest/>', () => {
     const multipleTitleParts: TestResults = {
       id: '676df87878',
       titleParts: ['Login', 'Describe', 'it', 'context', 'Should redirect unauthenticated user to signin page'],
-      instance: {
-        id: '456',
-        groupId: '456',
-        status: 'FAILED',
-        hasScreenshots: false,
-        hasStdout: false,
-        hasVideo: false,
-      },
+      instance: instance1,
     }
 
     cy.mount(() => (
@@ -138,26 +142,12 @@ describe('<DebugFailedTest/>', () => {
       {
         id: '676df87878',
         titleParts: ['Login', 'Describe', 'it', 'context', 'Should redirect unauthenticated user to signin page'],
-        instance: {
-          id: '456',
-          groupId: '456',
-          status: 'FAILED',
-          hasScreenshots: false,
-          hasStdout: false,
-          hasVideo: false,
-        },
+        instance: instance1,
       },
       {
         id: '676df87878',
         titleParts: ['Login', 'Should redirect unauthenticated user to signin page'],
-        instance: {
-          id: '123',
-          groupId: '123',
-          status: 'FAILED',
-          hasScreenshots: false,
-          hasStdout: false,
-          hasVideo: false,
-        },
+        instance: instance2,
       },
     ]
 
@@ -179,14 +169,7 @@ describe('<DebugFailedTest/>', () => {
     const testResult: TestResults = {
       id: '676df87874',
       titleParts: ['Test content', 'Test content 2', 'Test content 3', 'Test content 4', 'onMount() should be called once', 'hook() should be called twice and then'],
-      instance: {
-        id: '123',
-        groupId: '123',
-        status: 'FAILED',
-        hasScreenshots: false,
-        hasStdout: false,
-        hasVideo: false,
-      },
+      instance: instance1,
     }
 
     cy.mount(() => (
@@ -202,4 +185,39 @@ describe('<DebugFailedTest/>', () => {
 
     cy.percySnapshot()
   })
+
+  it('conditionally renders artifacts', () => {
+    const render = (testResult: TestResults) => cy.mount(() =>
+      (<div data-cy="test-group">
+        <DebugFailedTest failedTestsResult={[testResult]} groups={[group1]} expandable={false}/>
+      </div>))
+
+    const testResult: TestResults = {
+      id: '676df87874',
+      titleParts: ['Test content', 'Test content 2', 'Test content 3', 'Test content 4', 'onMount() should be called once', 'hook() should be called twice and then'],
+      instance: instance1,
+    }
+
+    const artifactFreeInstance: TestResults['instance'] = {
+      ...instance1,
+      hasStdout: false,
+      hasScreenshots: false,
+      hasVideo: false,
+    }
+
+    render({ ...testResult, instance: artifactFreeInstance })
+    cy.findByTestId('debug-artifacts').children().should('have.length', 0)
+
+    render({ ...testResult, instance: { ...artifactFreeInstance, hasStdout: true } })
+    cy.findByTestId('debug-artifacts').children().should('have.length', 1)
+    cy.findByTestId('TERMINAL_LOG-button').should('exist')
+
+    render({ ...testResult, instance: { ...artifactFreeInstance, hasScreenshots: true } })
+    cy.findByTestId('debug-artifacts').children().should('have.length', 1)
+    cy.findByTestId('IMAGE_SCREENSHOT-button').should('exist')
+
+    render({ ...testResult, instance: { ...artifactFreeInstance, hasVideo: true } })
+    cy.findByTestId('debug-artifacts').children().should('have.length', 1)
+    cy.findByTestId('PLAY-button').should('exist')
+  })
 })

packages/app/src/debug/DebugFailedTest.vue

@@ -79,9 +79,13 @@ import { SolidStatusIcon } from '@cypress-design/vue-statusicon'
 import DebugArtifactLink from './DebugArtifactLink.vue'
 import GroupedDebugFailedTestVue from './GroupedDebugFailedTest.vue'
 import { computed } from 'vue'
-import type { TestResults } from './DebugSpec.vue'
 import type { StatsMetadata_GroupsFragment } from '../generated/graphql'
 import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import { getDebugArtifacts } from './utils/debugArtifacts'
+import type { TestResults } from './DebugSpec.vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
 
 const props = defineProps<{
   failedTestsResult: TestResults[]
@@ -163,12 +167,10 @@ const failedTestData = computed(() => {
   })
   .flat() // flatten the array since one of the internal items may itself be an array.
 
+  const debugArtifacts = getDebugArtifacts(runInstance, t)
+
   return {
-    debugArtifacts: [
-      { icon: 'TERMINAL_LOG', text: 'View Log', url: runInstance?.stdoutUrl! },
-      { icon: 'IMAGE_SCREENSHOT', text: 'View Screenshot', url: runInstance?.screenshotsUrl! },
-      { icon: 'PLAY', text: 'View Video', url: runInstance?.videoUrl! },
-    ],
+    debugArtifacts,
     mappedTitleParts,
   }
 })

packages/app/src/debug/DebugOverLimit.vue

@@ -27,7 +27,7 @@ import type { DebugReasonsRunIsHiddenFragment, OverLimitActionTypeEnum } from '.
 import { getUtmSource } from '@packages/frontend-shared/src/utils/getUtmSource'
 import { useI18n } from '@cy/i18n'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 
 export type CloudRunHidingReason = DebugReasonsRunIsHiddenFragment['reasonsRunIsHidden'][number]
 

packages/app/src/debug/DebugPageDetails.vue

@@ -33,7 +33,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import { gql } from '@urql/vue'
 import type { CloudRunStatus, OverLimitActionTypeEnum, DebugSpecListSpecFragment, DebugPageDetails_CloudCiBuildInfoFragment } from '../generated/graphql'
 import DebugCancelledAlert from './DebugCancelledAlert.vue'

packages/app/src/debug/DebugPendingRunCounts.vue

@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { gql } from '@urql/core'
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { CloudSpecStatus } from '../generated/graphql'
 

packages/app/src/debug/DebugRunNumber.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import type { CloudRunStatus } from '../generated/graphql'
 import { SolidStatusIcon, StatusType } from '@cypress-design/vue-statusicon'
 

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

@@ -1,5 +1,4 @@
-import type { TestResults, Spec } from './DebugSpec.vue'
-import DebugSpec from './DebugSpec.vue'
+import DebugSpec, { Spec, TestResults } from './DebugSpec.vue'
 import { defaultMessages } from '@cy/i18n'
 
 const resultCounts = (min: number, max: number) => {

packages/app/src/debug/DebugSpec.vue

@@ -42,7 +42,7 @@
           </div>
           <ul
             data-cy="spec-header-metadata"
-            class="flex flex-wrap items-center gap-x-3 text-gray-700 whitespace-nowrap children:flex children:items-center font-normal text-sm"
+            class="flex flex-wrap font-normal text-sm text-gray-700 gap-x-3 items-center whitespace-nowrap children:flex children:items-center"
           >
             <li
               :data-cy="'debugHeader-results'"
@@ -141,6 +141,20 @@
 </template>
 <script lang="ts" setup>
 
+import { computed, unref } from 'vue'
+import { IconActionRefresh, IconDocumentText } from '@cypress-design/vue-icon'
+import type { SpecDataAggregate, CloudRunInstance } from '@packages/data-context/src/gen/graphcache-config.gen'
+import DebugFailedTest from './DebugFailedTest.vue'
+import StatsMetaData from './StatsMetadata.vue'
+import ResultCounts from '@packages/frontend-shared/src/components/ResultCounts.vue'
+import Button from '@packages/frontend-shared/src/components/Button.vue'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import SpecNameDisplay from '../specs/SpecNameDisplay.vue'
+import { useI18n } from '@cy/i18n'
+import { useDurationFormat } from '../composables/useDurationFormat'
+import { posixify } from '../paths'
+import type { StatsMetadata_GroupsFragment, TestingTypeEnum } from '../generated/graphql'
+
 export interface Spec {
   id: string
   path: string
@@ -159,20 +173,6 @@ export interface TestResults {
   readonly instance: CloudRunInstance | null
 }
 
-import { computed, unref } from 'vue'
-import { IconActionRefresh, IconDocumentText } from '@cypress-design/vue-icon'
-import type { SpecDataAggregate, CloudRunInstance } from '@packages/data-context/src/gen/graphcache-config.gen'
-import DebugFailedTest from './DebugFailedTest.vue'
-import StatsMetaData from './StatsMetadata.vue'
-import ResultCounts from '@packages/frontend-shared/src/components/ResultCounts.vue'
-import Button from '@packages/frontend-shared/src/components/Button.vue'
-import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
-import SpecNameDisplay from '../specs/SpecNameDisplay.vue'
-import { useI18n } from '@cy/i18n'
-import { useDurationFormat } from '../composables/useDurationFormat'
-import { posixify } from '../paths'
-import type { StatsMetadata_GroupsFragment, TestingTypeEnum } from '../generated/graphql'
-
 const { t } = useI18n()
 
 const props = defineProps<{

packages/app/src/debug/DebugSpecList.vue

@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import { gql } from '@urql/core'
 import { useMutation } from '@urql/vue'
-import { computed } from '@vue/reactivity'
+import { computed } from 'vue'
 import { SwitchTestingTypeAndRelaunchDocument, TestingTypeEnum } from '../generated/graphql'
 import DebugSpec from './DebugSpec.vue'
 import type { CloudDebugSpec } from './utils/DebugMapping'

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

@@ -1,5 +1,5 @@
-import GroupedDebugFailedTest from './GroupedDebugFailedTest.vue'
 import type { TestResults } from './DebugSpec.vue'
+import GroupedDebugFailedTest from './GroupedDebugFailedTest.vue'
 
 describe('<GroupedDebugFailedTest/>', () => {
   const testResult: TestResults[] = [
@@ -8,14 +8,14 @@ describe('<GroupedDebugFailedTest/>', () => {
       titleParts: ['Login', 'Should redirect unauthenticated user to signin page'],
       instance: {
         id: '123',
-        status: 'FAILED',
         groupId: '123',
+        status: 'FAILED',
         hasScreenshots: true,
-        screenshotsUrl: 'www.cypress.io',
+        screenshotsUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/screenshots',
         hasStdout: true,
-        stdoutUrl: 'www.cypress.io',
+        stdoutUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/stdout',
         hasVideo: true,
-        videoUrl: 'www.cypress.io',
+        videoUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/video',
       },
     },
     {
@@ -26,11 +26,11 @@ describe('<GroupedDebugFailedTest/>', () => {
         status: 'FAILED',
         groupId: '456',
         hasScreenshots: true,
-        screenshotsUrl: 'cloud.cypress.io',
+        screenshotsUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/screenshots',
         hasStdout: true,
-        stdoutUrl: 'cloud.cypress.io',
+        stdoutUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/stdout',
         hasVideo: true,
-        videoUrl: 'cloud.cypress.io',
+        videoUrl: 'https://cloud.cypress.io/projects/123/runs/456/overview/789/video',
       },
     },
   ]
@@ -73,15 +73,12 @@ describe('<GroupedDebugFailedTest/>', () => {
       </div>
     ))
 
-    cy.findAllByTestId(`grouped-row`).should('have.length', 2)
-    .each((el) => {
-      cy.wrap(el).findByTestId('debug-artifacts').should('not.be.visible')
-      cy.wrap(el).realHover().then(() => {
-        cy.wrap(el).findByTestId('debug-artifacts').should('be.visible').children().should('have.length', 3)
-      })
-
-      cy.wrap(el).findByTestId('stats-metadata').children().should('have.length', 3)
-    })
+    cy.findAllByTestId(`grouped-row`).should('have.length', 2).each((el) => cy.wrap(el).within(() => {
+      cy.findByTestId('debug-artifacts').should('not.be.visible')
+      cy.wrap(el).realHover()
+      cy.findByTestId('debug-artifacts').should('be.visible').children().should('have.length', 3)
+      cy.findByTestId('stats-metadata').children().should('have.length', 3)
+    }))
 
     cy.percySnapshot()
   })