feat: Display Cypress Dashboard metrics in the Specs Explorer

.vscode/cspell.json

@@ -6,32 +6,46 @@
     "words": [
         "Chainable",
         "composables",
+        "dedup",
         "ERRORED",
         "execa",
+        "Fetchable",
+        "Fetchables",
         "forcedefault",
+        "getenv",
+        "graphcache",
+        "headlessui",
         "Iconify",
+        "intlify",
         "Lachlan",
+        "loggedin",
         "msapplication",
         "NOTESTS",
         "OVERLIMIT",
+        "overscan",
         "Pinia",
         "pnpm",
         "pseudoclass",
         "revparse",
         "Screenshotting",
+        "semibold",
         "shiki",
+        "speclist",
         "testid",
         "TIMEDOUT",
+        "titleize",
+        "topnav",
         "unconfigured",
         "unplugin",
         "unrunnable",
         "unstaged",
         "urql",
+        "viewports",
         "vite",
         "vitejs",
         "vueuse",
         "Windi"
     ],
     "ignoreWords": [],
     "import": []
-}
+}

.vscode/extensions.json

@@ -28,7 +28,7 @@
 
     // Name: Volar
     // Description: Language server for Vue. Required for any syntax highlighting in Vue files.
-    "vue.volar",
+    "Vue.volar",
 
     // Name: Code Spell Checker
     // Description: Add spell-checking help to your code.

graphql-codegen.yml

@@ -67,11 +67,14 @@ generates:
       - 'packages/frontend-shared/script/codegen-type-map.js'
 
   './packages/graphql/src/gen/cloud-source-types.gen.ts':
+    config:
+      useTypeImports: true
     schema: 'packages/graphql/schemas/cloud.graphql'
     plugins:
       - add:
           content: '/* eslint-disable */'
       - 'typescript'
+      - 'typescript-resolvers'
 
   ###
   # Generates types for us to infer the correct keys for graphcache

package.json

@@ -83,6 +83,7 @@
     "@graphql-codegen/typed-document-node": "2.2.8",
     "@graphql-codegen/typescript": "2.4.2",
     "@graphql-codegen/typescript-operations": "2.2.3",
+    "@graphql-codegen/typescript-resolvers": "^2.6.4",
     "@graphql-codegen/typescript-urql-graphcache": "2.2.3",
     "@graphql-tools/delegate": "8.2.1",
     "@graphql-tools/utils": "8.2.3",
@@ -276,4 +277,4 @@
     "sharp": "0.29.3",
     "vue-template-compiler": "2.6.12"
   }
-}
+}

packages/app/cypress.config.ts

@@ -3,9 +3,10 @@ import getenv from 'getenv'
 import { initGitRepoForTestProject, resetGitRepoForTestProject } from './cypress/tasks/git'
 
 const CYPRESS_INTERNAL_CLOUD_ENV = getenv('CYPRESS_INTERNAL_CLOUD_ENV', process.env.CYPRESS_INTERNAL_ENV || 'development')
+const CYPRESS_INTERNAL_DEV_PROJECT_ID = getenv('CYPRESS_INTERNAL_DEV_PROJECT_ID', process.env.CYPRESS_INTERNAL_DEV_PROJECT_ID || 'sehy69')
 
 export default defineConfig({
-  projectId: CYPRESS_INTERNAL_CLOUD_ENV === 'staging' ? 'ypt4pf' : 'sehy69',
+  projectId: CYPRESS_INTERNAL_CLOUD_ENV === 'staging' ? 'ypt4pf' : CYPRESS_INTERNAL_DEV_PROJECT_ID,
   retries: {
     runMode: 2,
     openMode: 0,

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

@@ -80,25 +80,25 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
 
     it('redirects to the specs list with error if a spec is not found', () => {
       cy.visitApp()
-      const { noSpecErrorTitle, noSpecErrorIntro, noSpecErrorExplainer } = defaultMessages.specPage
+      const { title, intro, explainer } = defaultMessages.specPage.noSpecError
       const badFilePath = 'src/DoesNotExist.spec.js'
 
       cy.visitApp(`/specs/runner?file=${badFilePath}`)
-      cy.contains(noSpecErrorTitle).should('be.visible')
-      cy.contains(noSpecErrorIntro).should('be.visible')
-      cy.contains(noSpecErrorExplainer).should('be.visible')
+      cy.contains(title).should('be.visible')
+      cy.contains(intro).should('be.visible')
+      cy.contains(explainer).should('be.visible')
       cy.contains(getPathForPlatform(badFilePath)).should('be.visible')
       cy.location()
       .its('href')
       .should('eq', 'http://localhost:4455/__/#/specs')
 
       // should clear after reload
       cy.reload()
-      cy.contains(noSpecErrorTitle).should('not.exist')
+      cy.contains(title).should('not.exist')
     })
 
     it('redirects to the specs list with error if an open spec is not found when specs list updates', () => {
-      const { noSpecErrorTitle, noSpecErrorIntro, noSpecErrorExplainer } = defaultMessages.specPage
+      const { title, intro, explainer } = defaultMessages.specPage.noSpecError
 
       const goodFilePath = 'src/TestComponent.spec.jsx'
 
@@ -109,9 +109,9 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       cy.withCtx((ctx, o) => {
         ctx.actions.project.setSpecs(ctx.project.specs.filter((spec) => !spec.absolute.includes(o.path)))
       }, { path: goodFilePath }).then(() => {
-        cy.contains(noSpecErrorTitle).should('be.visible')
-        cy.contains(noSpecErrorIntro).should('be.visible')
-        cy.contains(noSpecErrorExplainer).should('be.visible')
+        cy.contains(title).should('be.visible')
+        cy.contains(intro).should('be.visible')
+        cy.contains(explainer).should('be.visible')
         cy.contains(getPathForPlatform(goodFilePath)).should('be.visible')
         cy.location()
         .its('href')

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

@@ -98,13 +98,13 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
   })
 
   it('redirects to the specs list with error if a spec is not found when navigating', () => {
-    const { noSpecErrorTitle, noSpecErrorIntro, noSpecErrorExplainer } = defaultMessages.specPage
+    const { title, intro, explainer } = defaultMessages.specPage.noSpecError
     const badFilePath = 'cypress/e2e/does-not-exist.spec.js'
 
     cy.visitApp(`/specs/runner?file=${badFilePath}`)
-    cy.contains(noSpecErrorTitle).should('be.visible')
-    cy.contains(noSpecErrorIntro).should('be.visible')
-    cy.contains(noSpecErrorExplainer).should('be.visible')
+    cy.contains(title).should('be.visible')
+    cy.contains(intro).should('be.visible')
+    cy.contains(explainer).should('be.visible')
     cy.contains(getPathForPlatform(badFilePath)).should('be.visible')
     cy.location()
     .its('href')
@@ -114,11 +114,11 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
 
     // should clear after reload
     cy.reload()
-    cy.contains(noSpecErrorTitle).should('not.exist')
+    cy.contains(title).should('not.exist')
   })
 
   it('redirects to the specs list with error if an open spec is not found when specs list updates', () => {
-    const { noSpecErrorTitle, noSpecErrorIntro, noSpecErrorExplainer } = defaultMessages.specPage
+    const { title, intro, explainer } = defaultMessages.specPage.noSpecError
 
     const goodFilePath = 'cypress/e2e/dom-content.spec.js'
 
@@ -129,9 +129,9 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.withCtx((ctx, o) => {
       ctx.actions.project.setSpecs(ctx.project.specs.filter((spec) => !spec.absolute.includes(o.path)))
     }, { path: goodFilePath }).then(() => {
-      cy.contains(noSpecErrorTitle).should('be.visible')
-      cy.contains(noSpecErrorIntro).should('be.visible')
-      cy.contains(noSpecErrorExplainer).should('be.visible')
+      cy.contains(title).should('be.visible')
+      cy.contains(intro).should('be.visible')
+      cy.contains(explainer).should('be.visible')
       cy.contains(getPathForPlatform(goodFilePath)).should('be.visible')
       cy.location()
       .its('href')

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

@@ -13,7 +13,7 @@ describe('Reporter Header', () => {
       cy.get('body').type('f')
 
       cy.get('[data-selected-spec="true"]').should('contain', 'dom-content').should('have.length', '1')
-      cy.get('[data-selected-spec="false"]').should('have.length', '18')
+      cy.get('[data-selected-spec="false"]').should('have.length', '27')
     })
 
     it('filters the list of specs when searching for specs', () => {
@@ -26,7 +26,7 @@ describe('Reporter Header', () => {
 
       cy.get('input').clear()
 
-      cy.get('[data-cy="spec-file-item"]').should('have.length', '3')
+      cy.get('[data-cy="spec-file-item"]').should('have.length', 3)
 
       cy.get('input').type('asdf', { force: true })
 

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

@@ -10,7 +10,7 @@ function scaffoldTestingTypeAndVisitRunsPage (testingType: 'e2e' | 'component')
 
   // make sure there are no runs found for the project ID
   cy.remoteGraphQLIntercept(async (obj) => {
-    if (obj.result.data?.cloudProjectBySlug) {
+    if (obj.result.data?.cloudProjectBySlug?.runs?.nodes) {
       obj.result.data.cloudProjectBySlug.runs.nodes = []
     }
 
@@ -136,7 +136,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.visitApp()
 
       cy.remoteGraphQLIntercept(async (obj) => {
-        if ((obj.operationName === 'CheckCloudOrganizations_cloudViewerChange_cloudViewer' || obj.operationName === 'Runs_cloudViewer')) {
+        if ((obj.operationName === 'CheckCloudOrganizations_cloudViewerChange_cloudViewer' || obj.operationName === 'Runs_cloudViewer' || obj.operationName === 'SpecsPageContainer_cloudViewer')) {
           if (obj.result.data?.cloudViewer?.organizations?.nodes) {
             obj.result.data.cloudViewer.organizations.nodes = []
           }
@@ -597,8 +597,6 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       let cloudData: any
 
       cy.loginUser()
-      cy.visitApp()
-
       cy.remoteGraphQLIntercept((obj) => {
         if (obj.operationName === 'Runs_currentProject_cloudProject_cloudProjectBySlug') {
           cloudData = obj.result
@@ -610,7 +608,10 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         return obj.result
       })
 
+      cy.visitApp()
+
       cy.findByTestId('sidebar-link-runs-page').click()
+
       cy.contains('h2', 'Cannot connect to the Cypress Dashboard')
       cy.percySnapshot()
 

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

@@ -221,7 +221,8 @@ describe('Sidebar Navigation', () => {
 
     it('has a menu item labeled "Runs" which takes you to the Runs page', () => {
       cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('not.exist')
-      cy.findByText('Runs').should('be.visible').click()
+
+      cy.findByTestId('sidebar-link-runs-page').should('have.text', 'Runs').should('be.visible').click()
       cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('be.visible')
       cy.get('.router-link-active').findByText('Runs').should('be.visible')
     })

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

@@ -112,19 +112,19 @@ describe('App: Spec List (E2E)', () => {
 
   describe('typing the filter', function () {
     it('displays only matching spec', function () {
-      cy.get('button').contains('14 Matches')
+      cy.get('button').contains('23 Matches')
       cy.findByLabelText('Search Specs').type('content')
       cy.get('[data-cy="spec-item"]')
       .should('have.length', 2)
       .and('contain', 'dom-content.spec.js')
 
-      cy.get('button').contains('2 of 14 Matches')
+      cy.get('button').contains('2 of 23 Matches')
 
       cy.findByLabelText('Search Specs').clear().type('asdf')
       cy.get('[data-cy="spec-item"]')
       .should('have.length', 0)
 
-      cy.get('button').contains('0 of 14 Matches')
+      cy.get('button').contains('0 of 23 Matches')
     })
 
     it('only shows matching folders', () => {
@@ -176,7 +176,7 @@ describe('App: Spec List (E2E)', () => {
       .should('have.value', '')
 
       cy.get('[data-cy="spec-item"]')
-      .should('have.length', 14)
+      .should('have.length', 23)
     })
 
     it('clears the filter if the user presses ESC key', function () {
@@ -187,8 +187,7 @@ describe('App: Spec List (E2E)', () => {
       cy.findByLabelText('Search Specs')
       .should('have.value', '')
 
-      cy.get('[data-cy="spec-item"]')
-      .should('have.length', 14)
+      cy.get('button').contains('23 Matches')
     })
 
     it('shows empty message if no results', function () {
@@ -203,8 +202,7 @@ describe('App: Spec List (E2E)', () => {
       cy.findByText('Clear Search').click()
       cy.focused().should('have.id', 'spec-filter')
 
-      cy.get('[data-cy="spec-item"]')
-      .should('have.length', 14)
+      cy.get('button').contains('23 Matches')
     })
 
     //TODO: https://cypress-io.atlassian.net/browse/UNIFY-1588