disable studio recording when selectorplayground is shown

Author: jennifer-shehane

packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx

@@ -1,5 +1,5 @@
 import SpecRunnerHeaderOpenMode from './SpecRunnerHeaderOpenMode.vue'
-import { useAutStore } from '../store'
+import { useAutStore, useSelectorPlaygroundStore } from '../store'
 import { useStudioStore } from '../store/studio-store'
 import { SpecRunnerHeaderFragment, SpecRunnerHeaderFragmentDoc } from '../generated/graphql-test'
 import { createEventManager, createTestAutIframe } from '../../cypress/component/support/ctSupport'
@@ -411,4 +411,283 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
       cy.findByTestId('studio-button').should('be.visible')
     })
   })
+
+  describe('selector playground and studio recording interaction', () => {
+    it('disables studio recording when selector playground opens', () => {
+      const studioStore = useStudioStore()
+      const selectorPlaygroundStore = useSelectorPlaygroundStore()
+
+      // Start with Studio active and recording enabled
+      studioStore.setActive(true)
+
+      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+        render: (gqlVal) => {
+          return renderWithGql(gqlVal, true)
+        },
+      })
+
+      // Verify recording is enabled initially
+      cy.then(() => {
+        expect(studioStore.canRecord).to.be.true
+      })
+
+      // Open Selector Playground
+      cy.findByTestId('playground-activator').click()
+
+      // Verify recording is disabled
+      cy.then(() => {
+        expect(selectorPlaygroundStore.show).to.be.true
+        expect(studioStore.canRecord).to.be.false
+      })
+    })
+
+    it('re-enables studio recording when selector playground closes', () => {
+      const studioStore = useStudioStore()
+      const selectorPlaygroundStore = useSelectorPlaygroundStore()
+
+      // Start with Studio active
+      studioStore.setActive(true)
+
+      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+        render: (gqlVal) => {
+          return renderWithGql(gqlVal, true)
+        },
+      })
+
+      // Open Selector Playground
+      cy.findByTestId('playground-activator').click()
+
+      cy.then(() => {
+        expect(selectorPlaygroundStore.show).to.be.true
+        expect(studioStore.canRecord).to.be.false
+      })
+
+      // Close Selector Playground
+      cy.findByTestId('playground-activator').click()
+
+      // Verify recording is re-enabled
+      cy.then(() => {
+        expect(selectorPlaygroundStore.show).to.be.false
+        expect(studioStore.canRecord).to.be.true
+      })
+    })
+
+    it('prevents event recording when selector playground is open', () => {
+      const studioStore = useStudioStore()
+
+      studioStore.setActive(true)
+
+      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+        render: (gqlVal) => {
+          return renderWithGql(gqlVal, true)
+        },
+      })
+
+      // Open Selector Playground
+      cy.findByTestId('playground-activator').click()
+
+      // Create a mock event and element
+      cy.then(() => {
+        const mockEvent = { type: 'click', isTrusted: true } as any
+        const mock$el = {
+          prop: (prop: string) => {
+            if (prop === 'tagName') {
+              return 'BUTTON'
+            }
+
+            return undefined
+          },
+        } as any
+
+        // _shouldRecordEvent should return false when SelectorPlayground is open
+        expect(studioStore._shouldRecordEvent(mockEvent, mock$el)).to.be.false
+      })
+
+      // Close Selector Playground
+      cy.findByTestId('playground-activator').click()
+
+      // Now _shouldRecordEvent should return true (assuming other conditions are met)
+      cy.then(() => {
+        const mockEvent = { type: 'click', isTrusted: true } as any
+        const mock$el = {
+          prop: (prop: string) => {
+            if (prop === 'tagName') {
+              return 'BUTTON'
+            }
+
+            return undefined
+          },
+        } as any
+
+        expect(studioStore._shouldRecordEvent(mockEvent, mock$el)).to.be.true
+      })
+    })
+
+    it('disables recording when studio opens while selector playground is already open', () => {
+      const studioStore = useStudioStore()
+      const selectorPlaygroundStore = useSelectorPlaygroundStore()
+
+      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+        render: (gqlVal) => {
+          return renderWithGql(gqlVal, true)
+        },
+      })
+
+      // Open Selector Playground first
+      cy.findByTestId('playground-activator').click()
+
+      cy.then(() => {
+        expect(selectorPlaygroundStore.show).to.be.true
+      })
+
+      // Now activate Studio
+      studioStore.setActive(true)
+
+      // Verify recording is disabled because SelectorPlayground is open
+      cy.then(() => {
+        expect(studioStore.isActive).to.be.true
+        expect(studioStore.canRecord).to.be.false
+      })
+    })
+
+    it('disables recording when tests are running', () => {
+      const studioStore = useStudioStore()
+      const autStore = useAutStore()
+
+      studioStore.setActive(true)
+
+      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+        render: (gqlVal) => {
+          return renderWithGql(gqlVal, true)
+        },
+      })
+
+      // Verify recording is enabled initially
+      cy.then(() => {
+        expect(studioStore.canRecord).to.be.true
+      })
+
+      // Set tests to running
+      cy.then(() => {
+        autStore.setIsRunning(true)
+      })
+
+      // Verify recording is disabled when tests are running
+      cy.then(() => {
+        expect(autStore.isRunning).to.be.true
+        expect(studioStore.canRecord).to.be.false
+        expect(studioStore._isRecordingDisabled).to.be.true
+      })
+
+      // Set tests to not running
+      cy.then(() => {
+        autStore.setIsRunning(false)
+      })
+
+      // Verify recording is re-enabled
+      cy.then(() => {
+        expect(autStore.isRunning).to.be.false
+        expect(studioStore.canRecord).to.be.true
+        expect(studioStore._isRecordingDisabled).to.be.false
+      })
+    })
+
+    it('disables recording when tests are loading', () => {
+      const studioStore = useStudioStore()
+      const autStore = useAutStore()
+
+      studioStore.setActive(true)
+
+      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+        render: (gqlVal) => {
+          return renderWithGql(gqlVal, true)
+        },
+      })
+
+      // Verify recording is enabled initially
+      cy.then(() => {
+        expect(studioStore.canRecord).to.be.true
+      })
+
+      // Set tests to loading
+      cy.then(() => {
+        autStore.setIsLoading(true)
+      })
+
+      // Verify recording is disabled when tests are loading
+      cy.then(() => {
+        expect(autStore.isLoading).to.be.true
+        expect(studioStore.canRecord).to.be.false
+        expect(studioStore._isRecordingDisabled).to.be.true
+      })
+
+      // Set tests to not loading
+      cy.then(() => {
+        autStore.setIsLoading(false)
+      })
+
+      // Verify recording is re-enabled
+      cy.then(() => {
+        expect(autStore.isLoading).to.be.false
+        expect(studioStore.canRecord).to.be.true
+        expect(studioStore._isRecordingDisabled).to.be.false
+      })
+    })
+
+    it('prevents event recording when tests are running', () => {
+      const studioStore = useStudioStore()
+      const autStore = useAutStore()
+
+      studioStore.setActive(true)
+
+      cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+        render: (gqlVal) => {
+          return renderWithGql(gqlVal, true)
+        },
+      })
+
+      // Set tests to running
+      cy.then(() => {
+        autStore.setIsRunning(true)
+      })
+
+      // Create a mock event and element
+      cy.then(() => {
+        const mockEvent = { type: 'click', isTrusted: true } as any
+        const mock$el = {
+          prop: (prop: string) => {
+            if (prop === 'tagName') {
+              return 'BUTTON'
+            }
+
+            return undefined
+          },
+        } as any
+
+        // _shouldRecordEvent should return false when tests are running
+        expect(studioStore._shouldRecordEvent(mockEvent, mock$el)).to.be.false
+      })
+
+      // Set tests to not running
+      cy.then(() => {
+        autStore.setIsRunning(false)
+      })
+
+      // Now _shouldRecordEvent should return true (assuming other conditions are met)
+      cy.then(() => {
+        const mockEvent = { type: 'click', isTrusted: true } as any
+        const mock$el = {
+          prop: (prop: string) => {
+            if (prop === 'tagName') {
+              return 'BUTTON'
+            }
+
+            return undefined
+          },
+        } as any
+
+        expect(studioStore._shouldRecordEvent(mockEvent, mock$el)).to.be.true
+      })
+    })
+  })
 })

packages/app/src/store/studio-store.ts

@@ -5,6 +5,7 @@ import { getEventManager } from '../runner'
 import type { StudioSavePayload } from '../runner/event-manager-types'
 import { closeStudioAssertionsMenu, openStudioAssertionsMenu } from '../runner/studio/mounter'
 import { useAutStore } from './aut-store'
+import { useSelectorPlaygroundStore } from './selector-playground-store'
 import type { PossibleAssertions, AssertionArgs } from '../runner/studio/types'
 
 function getCypress () {
@@ -662,6 +663,10 @@ export const useStudioStore = defineStore('studioRecorder', {
     },
 
     _shouldRecordEvent (event, $el) {
+      if (this._isRecordingDisabled) {
+        return false
+      }
+
       const tagName = $el.prop('tagName')
 
       // only want to record keystrokes within input elements
@@ -957,5 +962,17 @@ export const useStudioStore = defineStore('studioRecorder', {
         state: 'failed',
       }
     },
+
+    _isRecordingDisabled () {
+      const selectorPlaygroundStore = useSelectorPlaygroundStore()
+      const autStore = useAutStore()
+
+      // Recording is disabled when Selector Playground is open or tests are running
+      return selectorPlaygroundStore.show || autStore.isRunning || autStore.isLoading
+    },
+
+    canRecord () {
+      return !this._isRecordingDisabled
+    },
   },
 })