feat: openInIDE for failed debug spec

cli/CHANGELOG.md

@@ -1,4 +1,12 @@
  <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 12.6.0
+
+_Released 02/14/2023 (PENDING)_
+
+**Features:**
+
+ - Added the "Open in IDE" feature for failed tests reported from the Debug page. Addressed in [#25691](https://github.com/cypress-io/cypress/pull/25691).
+
 ## 12.5.1
 
 _Released 02/10/2023_

packages/app/cypress/e2e/debug.cy.ts

@@ -1,3 +1,4 @@
+import type { OpenFileInIdeQuery } from '../../src/generated/graphql-test'
 import RelevantRunsDataSource_RunsByCommitShas from '../fixtures/gql-RelevantRunsDataSource_RunsByCommitShas.json'
 
 Cypress.on('window:before:load', (win) => {
@@ -31,27 +32,27 @@ describe('App - Debug Page', () => {
   it('all tests passed', () => {
     // This mocks all the responses so we can get deterministic
     // results to test the debug page.
-    cy.intercept('POST', '/__cypress/graphql/query-Debug', {
+    cy.intercept('query-Debug', {
       fixture: 'debug-Passing/gql-Debug.json',
     })
 
-    cy.intercept('POST', '/__cypress/graphql/query-CloudViewerAndProject_RequiredData', {
+    cy.intercept('query-CloudViewerAndProject_RequiredData', {
       fixture: 'debug-Passing/gql-CloudViewerAndProject_RequiredData.json',
     })
 
-    cy.intercept('POST', '/__cypress/graphql/query-MainAppQuery', {
+    cy.intercept('query-MainAppQuery', {
       fixture: 'debug-Passing/gql-MainAppQuery.json',
     })
 
-    cy.intercept('POST', '/__cypress/graphql/query-SideBarNavigationContainer', {
+    cy.intercept('query-SideBarNavigationContainer', {
       fixture: 'debug-Passing/gql-SideBarNavigationContainer',
     })
 
-    cy.intercept('POST', '/__cypress/graphql/query-HeaderBar_HeaderBarQuery', {
+    cy.intercept('query-HeaderBar_HeaderBarQuery', {
       fixture: 'debug-Passing/gql-HeaderBar_HeaderBarQuery',
     })
 
-    cy.intercept('POST', '/__cypress/graphql/query-SpecsPageContainer', {
+    cy.intercept('query-SpecsPageContainer', {
       fixture: 'debug-Passing/gql-SpecsPageContainer',
     })
 
@@ -86,30 +87,44 @@ describe('App - Debug Page', () => {
   })
 
   it('shows information about a failed spec', () => {
-    cy.intercept('POST', '/__cypress/graphql/query-Debug', {
+    cy.intercept('query-Debug', {
       fixture: 'debug-Failing/gql-Debug.json',
     })
 
-    cy.intercept('POST', '/__cypress/graphql/query-CloudViewerAndProject_RequiredData', {
+    cy.intercept('query-CloudViewerAndProject_RequiredData', {
       fixture: 'debug-Failing/gql-CloudViewerAndProject_RequiredData.json',
     })
 
-    cy.intercept('POST', '/__cypress/graphql/query-MainAppQuery', {
+    cy.intercept('query-MainAppQuery', {
       fixture: 'debug-Failing/gql-MainAppQuery.json',
     })
 
-    cy.intercept('POST', '/__cypress/graphql/query-SideBarNavigationContainer', {
+    cy.intercept('query-SideBarNavigationContainer', {
       fixture: 'debug-Failing/gql-SideBarNavigationContainer',
     })
 
-    cy.intercept('POST', '/__cypress/graphql/query-HeaderBar_HeaderBarQuery', {
+    cy.intercept('query-HeaderBar_HeaderBarQuery', {
       fixture: 'debug-Failing/gql-HeaderBar_HeaderBarQuery',
     })
 
-    cy.intercept('POST', '/__cypress/graphql/query-SpecsPageContainer', {
+    cy.intercept('query-SpecsPageContainer', {
       fixture: 'debug-Failing/gql-SpecsPageContainer',
     })
 
+    cy.intercept('query-OpenFileInIDE', (req) => {
+      req.on('response', (res) => {
+        const gqlData = res.body.data as OpenFileInIdeQuery
+
+        gqlData.localSettings.preferences.preferredEditorBinary = 'code'
+      })
+    })
+
+    cy.intercept('mutation-OpenFileInIDE_Mutation').as('openFileInIDE')
+
+    cy.withCtx((ctx, { sinon }) => {
+      sinon.stub(ctx.actions.file, 'openFile')
+    })
+
     cy.visitApp()
 
     cy.findByTestId('sidebar-link-debug-page').click()
@@ -147,5 +162,12 @@ describe('App - Debug Page', () => {
     cy.findByTestId('test-row').contains('InfoPanel')
     cy.findByTestId('test-row').contains('renders')
     cy.findByTestId('run-failures').should('exist').should('have.attr', 'href', '#/specs/runner?file=src/components/InfoPanel/InfoPanel.cy.ts&mode=debug')
+
+    cy.findByTestId('open-in-ide').click().then(() => {
+      cy.wait('@openFileInIDE')
+      cy.withCtx((ctx) => {
+        expect(ctx.actions.file.openFile).to.have.been.calledWith('src/components/InfoPanel/InfoPanel.cy.ts', 1, 1)
+      })
+    })
   })
 })

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

@@ -530,3 +530,52 @@ describe('Run Failures button', () => {
     .and('not.have.attr', 'aria-disabled')
   })
 })
+
+describe('Open in IDE', () => {
+  const spec = {
+    id: '8879798756s88d',
+    path: 'cypress/tests/',
+    fileName: 'auth',
+    fileExtension: '.spec.ts',
+    fullPath: 'cypress/tests/auth.spec.ts',
+    testsPassed: resultCounts(22, 22),
+    testsFailed: resultCounts(2, 2),
+    testsPending: resultCounts(1, 1),
+    specDuration: {
+      min: 143000,
+      max: 143000,
+    },
+  }
+
+  const renderDebugSpec = ({ foundLocally } = { foundLocally: true }) => cy.mount(() =>
+    <div class="px-24px">
+      <DebugSpec spec={spec}
+        testResults={testResultSingleGroup}
+        groups={singleGroup}
+        testingType={'e2e'}
+        foundLocally={foundLocally}
+        matchesCurrentTestingType={true}
+      />
+    </div>)
+
+  it('shows openInIDE if file is found locally', () => {
+    renderDebugSpec()
+
+    cy.findByTestId('open-in-ide').as('openInIDE').realHover()
+    cy.findByTestId('open-in-ide-tooltip').should('be.visible').and('contain', defaultMessages.debugPage.openFile.openInIDE)
+    cy.percySnapshot()
+
+    cy.get('@openInIDE').click()
+
+    cy.findByLabelText('External editor preferences').should('be.visible')
+    cy.findByLabelText('Close').click()
+  })
+
+  it('shows disabled openInIDE if file is not found locally', () => {
+    renderDebugSpec({ foundLocally: false })
+
+    cy.findByTestId('open-in-ide-disabled').as('openInIDE').realHover()
+    cy.findByTestId('open-in-ide-disabled-tooltip').should('be.visible').and('contain', defaultMessages.debugPage.openFile.notFoundLocally)
+    cy.percySnapshot()
+  })
+})

packages/app/src/debug/DebugSpec.vue

@@ -16,11 +16,64 @@
           class="flex w-full grid px-18px gap-y-8px items-center"
         >
           <div class="flex-grow flex w-full gap-x-2 truncate items-center">
-            <IconDocumentText
-              stroke-color="gray-500"
-              fill-color="gray-100"
-              size="16"
-            />
+            <Tooltip
+              v-if="foundLocally"
+              placement="bottom"
+              color="dark"
+              data-cy="open-in-ide"
+            >
+              <OpenFileInIDE
+                v-slot="{onClick}"
+                :file-path="specData.fullPath"
+              >
+                <button
+                  class="rounded-md border-1px border-gray-100 p-4px group hocus:border-indigo-200"
+                  @click="onClick"
+                >
+                  <IconDocumentText
+                    stroke-color="gray-500"
+                    fill-color="gray-100"
+                    hocus-stroke-color="indigo-400"
+                    hocus-fill-color="indigo-200"
+                    size="16"
+                    interactive-colors-on-group
+                  />
+                </button>
+              </OpenFileInIDE>
+              <template
+                #popper
+              >
+                <div
+                  class="text-center text-sm max-w-240px"
+                  data-cy="open-in-ide-tooltip"
+                >
+                  {{ t('debugPage.openFile.openInIDE') }}
+                </div>
+              </template>
+            </Tooltip>
+            <Tooltip
+              v-else
+              class="rounded-md border-1px border-gray-100 p-4px"
+              placement="bottom"
+              color="dark"
+              data-cy="open-in-ide-disabled"
+            >
+              <IconDocumentMinus
+                stroke-color="gray-500"
+                fill-color="gray-100"
+                size="16"
+              />
+              <template
+                #popper
+              >
+                <div
+                  class="text-center text-sm max-w-240px"
+                  data-cy="open-in-ide-disabled-tooltip"
+                >
+                  {{ t('debugPage.openFile.notFoundLocally') }}
+                </div>
+              </template>
+            </Tooltip>
             <div
               data-cy="spec-path"
               class="flex-grow text-base non-italic truncate"
@@ -142,7 +195,7 @@
 <script lang="ts" setup>
 
 import { computed, unref } from 'vue'
-import { IconActionRefresh, IconDocumentText } from '@cypress-design/vue-icon'
+import { IconActionRefresh, IconDocumentText, IconDocumentMinus } 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'
@@ -154,6 +207,7 @@ import { useI18n } from '@cy/i18n'
 import { useDurationFormat } from '../composables/useDurationFormat'
 import { posixify } from '../paths'
 import type { StatsMetadata_GroupsFragment, TestingTypeEnum } from '../generated/graphql'
+import OpenFileInIDE from '@cy/gql-components/OpenFileInIDE.vue'
 
 export interface Spec {
   id: string

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

@@ -650,6 +650,10 @@
     }
   },
   "debugPage": {
+    "openFile": {
+      "openInIDE": "Open in IDE",
+      "notFoundLocally": "Opening in IDE is disabled because the spec is not found in this project"
+    },
     "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",