fix: add top-level run-all button to allow all specs to be run at once (

#24846)

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
Co-authored-by: Mark Noonan <mark@cypress.io>

packages/app/cypress/e2e/run-all-specs.cy.ts

@@ -6,9 +6,15 @@ describe('run-all-specs', () => {
     spec2: { relative: 'cypress/e2e/folder-a/spec-b.cy.js', name: 'runs folder-a/spec-b' },
     spec3: { relative: 'cypress/e2e/folder-b/spec-a.cy.js', name: 'runs folder-b/spec-a' },
     spec4: { relative: 'cypress/e2e/folder-b/spec-b.cy.js', name: 'runs folder-b/spec-b' },
+    spec5: { relative: 'folder-c/spec-a.cy.js', name: 'runs folder-c/spec-a' },
+    spec6: { relative: 'folder-c/spec-b.cy.js', name: 'runs folder-c/spec-b' },
   }
 
   const clickRunAllSpecs = (directory: string) => {
+    if (directory === 'all') {
+      return cy.findByTestId('run-all-specs-for-all').click()
+    }
+
     const command = cy.get('[data-cy=spec-item-directory]').contains(directory)
 
     return command.realHover().then(() => {
@@ -30,7 +36,7 @@ describe('run-all-specs', () => {
     // Verify "Run All Specs" with sub-directory
     const subDirectorySpecs = [ALL_SPECS.spec1, ALL_SPECS.spec2]
 
-    cy.get('[data-cy=sidebar-link-specs-page]').click()
+    cy.findByTestId('sidebar-link-specs-page').click()
 
     clickRunAllSpecs('folder-a')
 
@@ -87,16 +93,16 @@ describe('run-all-specs', () => {
     // Verify "Run All Specs" live-reload
     cy.get('[data-cy=sidebar-link-specs-page]').click()
     cy.findByLabelText('Search specs').clear()
-    cy.get('[data-cy=spec-list-file]').should('have.length', 4)
+    cy.get('[data-cy=spec-list-file]').should('have.length', 6)
 
-    clickRunAllSpecs('cypress/e2e')
+    clickRunAllSpecs('all')
 
     cy.withCtx((ctx, { specs, runAllSpecsKey }) => {
       expect(ctx.actions.project.launchProject).to.have.been.calledWith('e2e', undefined, runAllSpecsKey)
       expect(ctx.project.runAllSpecs).to.include.members(specs.map((spec) => spec.relative))
     }, { specs: Object.values(ALL_SPECS), runAllSpecsKey: RUN_ALL_SPECS_KEY })
 
-    cy.waitForSpecToFinish({ passCount: 4 })
+    cy.waitForSpecToFinish({ passCount: 6 })
 
     for (const spec of Object.values(ALL_SPECS)) {
       cy.get('.runnable-title').contains(spec.name)
@@ -111,6 +117,6 @@ describe('run-all-specs', () => {
       await ctx.actions.file.writeFileInProject(spec.relative, newContent)
     }, { spec: ALL_SPECS.spec1 })
 
-    cy.waitForSpecToFinish({ passCount: 3, failCount: 1 })
+    cy.waitForSpecToFinish({ passCount: 5, failCount: 1 })
   })
 })

packages/app/src/pages/Specs/Runner.vue

@@ -31,6 +31,7 @@ import SpecRunnerContainerOpenMode from '../../runner/SpecRunnerContainerOpenMod
 import SpecRunnerContainerRunMode from '../../runner/SpecRunnerContainerRunMode.vue'
 import { useEventManager } from '../../runner/useEventManager'
 import { useSpecStore } from '../../store'
+import { isRunMode } from '@packages/frontend-shared/src/utils/isRunMode'
 
 gql`
 query SpecPageContainer {
@@ -59,18 +60,14 @@ subscription Runner_ConfigChange {
 }
 `
 
-const isRunMode = window.__CYPRESS_MODE__ === 'run'
-
 // subscriptions are used to trigger live updates without
 // reloading the page.
 // this is only useful in open mode - in run mode, we don't
 // use GraphQL, so we pause the
 // subscriptions so they never execute.
-const shouldPauseSubscriptions = isRunMode && window.top === window
-
 useSubscription({
   query: SpecPageContainer_SpecsChangeDocument,
-  pause: shouldPauseSubscriptions,
+  pause: isRunMode,
 })
 
 // in run mode, we are not using GraphQL or urql
@@ -80,7 +77,7 @@ useSubscription({
 // requests, which is what we want.
 const query = useQuery({
   query: SpecPageContainerDocument,
-  pause: shouldPauseSubscriptions,
+  pause: isRunMode,
 })
 
 let initialLoad = true

packages/app/src/runner/screenshot/AdjustRunnerStyleDuringScreenshot.vue

@@ -8,12 +8,12 @@
 </template>
 
 <script lang="ts" setup>
+import { isRunMode } from '@packages/frontend-shared/src/utils/isRunMode'
 import { computed } from 'vue'
 import { useScreenshotStore } from '../../store'
 import { runnerConstants } from '../runner-constants'
 
 const screenshotStore = useScreenshotStore()
-const isRunMode = window.__CYPRESS_MODE__ === 'run'
 
 const style = computed(() => {
   if (screenshotStore.isScreenshotting) {

packages/app/src/runner/useRunnerStyle.ts

@@ -1,3 +1,4 @@
+import { isRunMode } from '@packages/frontend-shared/src/utils/isRunMode'
 import { useWindowSize } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { usePreferences } from '../composables/usePreferences'
@@ -97,7 +98,7 @@ export const useRunnerStyle = () => {
   return {
     viewportStyle,
     windowWidth: computed(() => {
-      if (window.__CYPRESS_MODE__ === 'run') {
+      if (isRunMode) {
         return windowWidth.value
       }
 

packages/app/src/specs/InlineRunAllSpecs.cy.tsx

@@ -13,15 +13,27 @@ describe('<InlineRunAllSpecs/>', () => {
     })
 
     it('renders component correctly', () => {
-      cy.findByTestId('tooltip').children().should('have.length', 1)
+      cy.findByTestId('run-all-specs-for-cypress/e2e').children().should('have.length', 1)
       cy.findByTestId('play-button').should('be.visible')
     })
 
     it('provides expected tooltip content', () => {
       cy.findByTestId('tooltip-content').should('not.exist')
-      cy.findByTestId('tooltip').realHover().then(() => {
+      cy.findByTestId('run-all-specs-for-cypress/e2e').realHover().then(() => {
         cy.findByTestId('tooltip-content').should('contain.text', 'Run 40 specs')
       })
     })
   })
+
+  it('disables button when no specs are available', () => {
+    cy.mount(() => {
+      return (
+        <div class="flex justify-center">
+          <InlineRunAllSpecs specNumber={0} directory='cypress/e2e' />
+        </div>
+      )
+    })
+
+    cy.findByTestId('run-all-specs-button').should('be.disabled')
+  })
 })

packages/app/src/specs/InlineRunAllSpecs.vue

@@ -1,16 +1,20 @@
 <template>
   <Tooltip
     placement="right"
-    class="h-full truncate"
-    data-cy="tooltip"
+    :data-cy="`run-all-specs-for-${directory}`"
   >
-    <button @click.stop="emits('runAllSpecs')">
+    <button
+      class="flex h-full w-full items-center justify-center"
+      data-cy="run-all-specs-button"
+      :disabled="specNumber === 0"
+      @click.stop="emits('runAllSpecs')"
+    >
       <IconActionPlaySmall
         size="16"
-        stroke-color="gray-700"
+        :stroke-color="grayscale ? 'gray-200' : 'gray-700'"
         fill-color="transparent"
-        hocus-stroke-color="indigo-500"
-        hocus-fill-color="indigo-100"
+        :hocus-stroke-color="grayscale ? undefined : 'indigo-500'"
+        :hocus-fill-color="grayscale ? undefined : 'indigo-100'"
         class="inline-flex align-text-bottom"
         data-cy="play-button"
       />
@@ -22,7 +26,7 @@
         class="font-normal text-sm inline-flex"
         data-cy="tooltip-content"
       >
-        {{ t('specPage.runAllSpecs', specNumber) }}
+        {{ t('specPage.runSelectedSpecs', specNumber) }}
       </span>
     </template>
   </Tooltip>
@@ -38,6 +42,7 @@ const { t } = useI18n()
 defineProps<{
   specNumber: number
   directory: string
+  grayscale?: boolean
 }>()
 
 const emits = defineEmits<{

packages/app/src/specs/InlineSpecList.cy.tsx

@@ -4,23 +4,6 @@ import { defaultMessages } from '@cy/i18n'
 
 let specs: Array<any> = []
 
-const hoverRunAllSpecs = (directory?: string, specNumber?: number) => {
-  let command
-
-  if (directory) {
-    command = cy.contains('[data-cy=directory-item]', directory)
-  } else {
-    command = cy.get('[data-cy=directory-item]').first()
-  }
-
-  return command.realHover().then(() => {
-    cy.get('[data-cy=play-button]').should('exist')
-    cy.get('[data-cy=run-all-specs]').realHover().then(() => {
-      cy.get('[data-cy=tooltip-content]').should('contain.text', `Run ${specNumber} spec`)
-    })
-  })
-}
-
 describe('InlineSpecList', () => {
   const mountInlineSpecList = ({ specFilter, experimentalRunAllSpecs }: {specFilter?: string, experimentalRunAllSpecs?: boolean} = {}) => cy.mountFragment(Specs_InlineSpecListFragmentDoc, {
     onResult: (ctx) => {
@@ -207,18 +190,37 @@ describe('InlineSpecList', () => {
   })
 
   describe('Run all Specs', () => {
+    const hoverRunAllSpecs = (directory: string, specNumber: number) => {
+      let command = cy.contains('[data-cy=directory-item]', directory)
+
+      return command.realHover().then(() => {
+        cy.get('[data-cy=play-button]').should('exist')
+        cy.get(`[data-cy="run-all-specs-for-${directory}"]`).realHover().then(() => {
+          cy.get('[data-cy=tooltip-content]').should('contain.text', `Run ${specNumber} spec`)
+        })
+      })
+    }
+
     beforeEach(() => {
       cy.fixture('found-specs').then((foundSpecs) => specs = foundSpecs)
     })
 
+    it('does not show feature unless experimentalRunAllSpecs is enabled', () => {
+      mountInlineSpecList({ experimentalRunAllSpecs: false })
+
+      cy.findByTestId('run-all-specs-for-all').should('not.exist')
+      cy.contains('[data-cy=directory-item]', 'src').realHover()
+      cy.findByTestId('run-all-specs-for-src').should('not.exist')
+    })
+
     it('displays runAllSpecs when hovering over a spec-list directory row', () => {
       mountInlineSpecList({ experimentalRunAllSpecs: true })
       hoverRunAllSpecs('src', 4)
     })
 
     it('checks if functionality works after a search', () => {
       mountInlineSpecList({ experimentalRunAllSpecs: true, specFilter: 'B' })
-      hoverRunAllSpecs('src', 1)
+      hoverRunAllSpecs('src/components', 1)
     })
   })
 })

packages/app/src/specs/InlineSpecList.vue

@@ -9,7 +9,9 @@
     <InlineSpecListHeader
       v-model:specFilterModel="specFilterModel"
       :result-count="specs.length"
+      :is-run-all-specs-allowed="runAllSpecsStore.isRunAllSpecsAllowed"
       @newSpec="showModal = true"
+      @run-all-specs="runAllSpecsStore.runAllSpecs"
     />
     <InlineSpecListTree
       :specs="specs"
@@ -31,6 +33,7 @@ import CreateSpecModal from './CreateSpecModal.vue'
 import { fuzzySortSpecs, makeFuzzyFoundSpec, useCachedSpecs } from './spec-utils'
 import type { FuzzyFoundSpec } from './tree/useCollapsibleTree'
 import { useSpecFilter } from '../composables/useSpecFilter'
+import { useRunAllSpecsStore } from '../store/run-all-specs-store'
 
 gql`
 fragment SpecNode_InlineSpecList on Spec {
@@ -80,4 +83,6 @@ const specs = computed<FuzzyFoundSpec[]>(() => {
   return fuzzySortSpecs(specs, debouncedSpecFilterModel.value)
 })
 
+const runAllSpecsStore = useRunAllSpecsStore()
+
 </script>