internal: Hide studio buttons when running All Specs via experimentalRunAllSpecs mode (#32051)

* internal: hide studio buttons when running all specs

* fix selector in tests

Author: jennifer-shehane

packages/app/cypress/e2e/studio/studio-cloud.cy.ts

@@ -296,6 +296,69 @@ describe('studio functionality', () => {
     cy.findByTestId('studio-toolbar').should('not.exist')
   })
 
+  it('hides studio button when running all specs', () => {
+    // Use the run-all-specs project which already has run-all-specs enabled
+    cy.scaffoldProject('run-all-specs')
+    cy.openProject('run-all-specs')
+
+    // Enable experimental studio by modifying the config
+    cy.withCtx(async (ctx) => {
+      const configPath = 'cypress.config.js'
+      const configContent = await ctx.actions.file.readFileInProject(configPath)
+      const updatedConfig = configContent.replace(
+        'experimentalRunAllSpecs: true,',
+        'experimentalRunAllSpecs: true,\n    experimentalStudio: true,',
+      )
+
+      await ctx.actions.file.writeFileInProject(configPath, updatedConfig)
+    })
+
+    cy.startAppServer('e2e')
+    cy.visitApp()
+    cy.specsPageIsVisible()
+
+    // Spawns new browser so we need to stub this
+    cy.withCtx((ctx, { sinon }) => {
+      sinon.stub(ctx.actions.project, 'launchProject').resolves()
+    })
+
+    // Run all specs
+    cy.findByTestId('run-all-specs-for-all').click()
+
+    // Wait for the runner to load
+    cy.waitForSpecToFinish()
+
+    // Verify that we're running all specs by checking the header
+    cy.get('[data-cy="runnable-header"]').should('contain', 'All Specs')
+
+    // Verify that the studio button is NOT visible when running all specs
+    cy.findByTestId('studio-button').should('not.exist')
+
+    // Verify that the studio panel is NOT visible
+    cy.findByTestId('studio-panel').should('not.exist')
+  })
+
+  it('shows studio button when running a single spec', () => {
+    // Use the existing experimental-studio project
+    cy.scaffoldProject('experimental-studio')
+    cy.openProject('experimental-studio')
+    cy.startAppServer('e2e')
+    cy.visitApp()
+    cy.specsPageIsVisible()
+
+    // Run a single spec instead of all specs
+    cy.get('[data-cy-row="spec.cy.js"]').click()
+
+    cy.waitForSpecToFinish()
+
+    // Verify that we're running a single spec (not all specs)
+    cy.get('[data-cy="runnable-header"]').should('contain', 'spec.cy.js')
+    cy.get('[data-cy="runnable-header"]').should('not.contain', 'All Specs')
+
+    // Verify that the studio button IS visible when running a single spec
+    cy.findByTestId('studio-button').should('be.visible')
+  })
+
   describe('failing to load studio and retrying', () => {
     it('displays error panel when studio bundle fails to load', () => {
       // Intercept the studio bundle request and make it fail

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -117,6 +117,7 @@
 
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import { REPORTER_ID, RUNNER_ID } from './utils'
 import InlineSpecList from '../specs/InlineSpecList.vue'
 import { getAutIframeModel, getEventManager } from '.'
@@ -222,6 +223,7 @@ const props = defineProps<{
   gql: SpecRunnerFragment
 }>()
 
+const route = useRoute()
 const eventManager = getEventManager()
 
 const autStore = useAutStore()
@@ -288,7 +290,10 @@ const shouldShowStudioButton = computed(() => {
   const experimentalStudioConfig = props.gql.currentProject?.config?.find((item) => item.field === 'experimentalStudio')
   const experimentalStudioEnabled = experimentalStudioConfig?.value === true
 
-  return !!cloudStudioRequested.value && !studioStore.isOpen && experimentalStudioEnabled
+  // Check if we're running all specs by looking at the route query
+  const isRunningAllSpecs = route.query.file === '__all'
+
+  return !!cloudStudioRequested.value && !studioStore.isOpen && experimentalStudioEnabled && !isRunningAllSpecs
 })
 
 const shouldShowStudioPanel = computed(() => {

packages/reporter/cypress/e2e/tests.cy.ts

@@ -5,7 +5,7 @@ import { MobxRunnerStore } from '@packages/app/src/store/mobx-runner-store'
 let runner: EventEmitter
 let runnables: RootRunnable
 
-function visitAndRenderReporter (studioEnabled: boolean = false, studioActive: boolean = false) {
+function visitAndRenderReporter (studioEnabled: boolean = false, studioActive: boolean = false, specRelative: string = 'relative/path/to/foo.js') {
   cy.fixture('runnables').then((_runnables) => {
     runnables = _runnables
   })
@@ -16,7 +16,7 @@ function visitAndRenderReporter (studioEnabled: boolean = false, studioActive: b
 
   runnerStore.setSpec({
     name: 'foo.js',
-    relative: 'relative/path/to/foo.js',
+    relative: specRelative,
     absolute: '/absolute/path/to/foo.js',
   })
 
@@ -196,6 +196,36 @@ describe('tests', () => {
       .find('.collapsible-content').should('not.exist')
     })
   })
+
+  describe('studio controls', () => {
+    it('hides launch studio icon when running all specs', () => {
+      visitAndRenderReporter(true, false, '__all')
+
+      cy.contains('test 1').realHover()
+      cy.get('[data-cy="launch-studio"]').should('not.exist')
+    })
+
+    it('shows launch studio icon when running a single spec', () => {
+      visitAndRenderReporter(true, false, 'relative/path/to/foo.js')
+
+      cy.contains('test 1').realHover()
+      cy.get('[data-cy="launch-studio"]').should('exist')
+    })
+
+    it('hides new test button in suites when running all specs', () => {
+      visitAndRenderReporter(true, false, '__all')
+
+      cy.contains('suite 1').realHover()
+      cy.get('[data-cy="create-new-test-button"]').should('not.exist')
+    })
+
+    it('shows new test button in suites when running a single spec', () => {
+      visitAndRenderReporter(true, false, 'relative/path/to/foo.js')
+
+      cy.contains('suite 1').realHover()
+      cy.get('[data-cy="create-new-test-button"]').should('exist')
+    })
+  })
 })
 
 describe('studio controls', () => {

packages/reporter/src/runnables/runnable-and-suite.tsx

@@ -25,6 +25,7 @@ interface SuiteProps {
   model: SuiteModel
   studioEnabled: boolean
   canSaveStudioLogs: boolean
+  spec?: Cypress.Cypress['spec']
 }
 
 const headerIconDefaultProps = {
@@ -33,7 +34,7 @@ const headerIconDefaultProps = {
   className: 'header-icon',
 }
 
-const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, studioEnabled, canSaveStudioLogs }: SuiteProps) => {
+const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, studioEnabled, canSaveStudioLogs, spec }: SuiteProps) => {
   const _launchStudio = useCallback((e: MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
@@ -82,7 +83,7 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
           {getHeaderIcon(isOpen)}
         </div>
         <span className='runnable-title'>{model.title}</span>
-        {(studioEnabled && !appState.studioActive) && (
+        {(studioEnabled && !appState.studioActive && spec?.relative !== '__all') && (
           <>
             <Button data-cy='create-new-test-button' size='20' onClick={_launchStudio} variant='outline-dark' className={cs('launch-studio-button')} >
               <IconActionAddMedium strokeColor='gray-500' />
@@ -104,6 +105,7 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
           studioEnabled={studioEnabled}
           canSaveStudioLogs={canSaveStudioLogs}
           shouldShowConnectingDots={shouldShowConnectionDots(model.children, runnable, index)}
+          spec={spec}
         />)
       })}
     </ul>
@@ -134,13 +136,14 @@ export interface RunnableProps {
   studioEnabled: boolean
   canSaveStudioLogs: boolean
   shouldShowConnectingDots: boolean
+  spec?: Cypress.Cypress['spec']
 }
 
 // NOTE: some of the driver tests dig into the React instance for this component
 // in order to mess with its internal state. converting it to a functional
 // component breaks that, so it needs to stay a Class-based component or
 // else the driver tests need to be refactored to support it being functional
-const Runnable: React.FC<RunnableProps> = observer(({ appState: appStateProps = appState, model, studioEnabled, canSaveStudioLogs, shouldShowConnectingDots }) => {
+const Runnable: React.FC<RunnableProps> = observer(({ appState: appStateProps = appState, model, studioEnabled, canSaveStudioLogs, shouldShowConnectingDots, spec }) => {
   return (<>
     <li
       className={cs(`${model.type} runnable runnable-${model.state}`, {
@@ -151,10 +154,11 @@ const Runnable: React.FC<RunnableProps> = observer(({ appState: appStateProps =
       data-model-state={model.state}
     >
       {model.type === 'test'
-        ? <Test model={model as TestModel} studioEnabled={studioEnabled} canSaveStudioLogs={canSaveStudioLogs} />
+        ? <Test model={model as TestModel} studioEnabled={studioEnabled} canSaveStudioLogs={canSaveStudioLogs} spec={spec} />
         : <Suite model={model as SuiteModel}
           studioEnabled={studioEnabled}
           canSaveStudioLogs={canSaveStudioLogs}
+          spec={spec}
         />}
     </li>
     {shouldShowConnectingDots && <div className='runnable-dotted-line' />}

packages/reporter/src/runnables/runnables.tsx

@@ -88,9 +88,10 @@ interface RunnablesListProps {
   runnables: RunnableArray
   studioEnabled: boolean
   canSaveStudioLogs: boolean
+  spec: Cypress.Cypress['spec']
 }
 
-const RunnablesList: React.FC<RunnablesListProps> = observer(({ runnables, studioEnabled, canSaveStudioLogs }: RunnablesListProps) => {
+const RunnablesList: React.FC<RunnablesListProps> = observer(({ runnables, studioEnabled, canSaveStudioLogs, spec }: RunnablesListProps) => {
   return (
     <div className='wrap'>
       <ul className='runnables'>
@@ -101,6 +102,7 @@ const RunnablesList: React.FC<RunnablesListProps> = observer(({ runnables, studi
             canSaveStudioLogs={canSaveStudioLogs}
             studioEnabled={studioEnabled}
             shouldShowConnectingDots={shouldShowConnectionDots(runnables, runnable, index)}
+            spec={spec}
           />))}
       </ul>
     </div>
@@ -143,6 +145,7 @@ const RunnablesContent: React.FC<RunnablesContentProps> = observer(({ runnablesS
       runnables={isRunning ? runnables : runnablesHistory[specPath]}
       studioEnabled={studioEnabled}
       canSaveStudioLogs={canSaveStudioLogs}
+      spec={spec}
     />
   )
 })

packages/reporter/src/test/test.tsx

@@ -88,9 +88,10 @@ interface TestProps {
   model: TestModel
   studioEnabled: boolean
   canSaveStudioLogs: boolean
+  spec?: Cypress.Cypress['spec']
 }
 
-const Test: React.FC<TestProps> = observer(({ model, events: eventsProps = events, appState: appStateProps = appState, scroller: scrollerProps = scroller, studioEnabled, canSaveStudioLogs }) => {
+const Test: React.FC<TestProps> = observer(({ model, events: eventsProps = events, appState: appStateProps = appState, scroller: scrollerProps = scroller, studioEnabled, canSaveStudioLogs, spec }) => {
   const containerRef = useRef(null)
   const [isMounted, setIsMounted] = useState(false)
 
@@ -135,7 +136,10 @@ const Test: React.FC<TestProps> = observer(({ model, events: eventsProps = event
   const _controls = () => {
     let controls: Array<JSX.Element> = []
 
-    if (studioEnabled && !appStateProps.studioActive && model.state !== 'pending') {
+    // Check if we're running all specs by looking at the spec relative path
+    const isRunningAllSpecs = spec?.relative === '__all'
+
+    if (studioEnabled && !appStateProps.studioActive && model.state !== 'pending' && !isRunningAllSpecs) {
       controls.push(
         <LaunchStudioIcon
           key={`studio-command-${model}`}