feat(app): decouple event manager from driver (#18695)

* change event manager to be a class

* update method

* attach event manager to window for cypress-in-cypress

* fix CT tests

* do not use fake event manager anymore

* remove cypress import from event manager

* pass in cypress as arg

* move regenerator runtime

* move async runtime

* include regenerator-runtime in runner unit tests

* fix unit tests

* inject studio

* attach event manager to window for unified app

* move event manager to app

* move event manager entirely to app, delete runner-shared copy

* improve tests

* add missing arg

* types

* remove unused optimization

Author: lmiller1990

packages/app/cypress/e2e/support/ctSupport.ts

@@ -0,0 +1,38 @@
+import { AutIframe } from '../../../src/runner/aut-iframe'
+import { EventManager } from '../../../src/runner/event-manager'
+import { logger } from '@packages/runner-shared/src/logger'
+import { blankContents } from '@packages/runner-shared/src/blank-contents'
+import _ from 'lodash'
+import { visitFailure } from '@packages/runner-shared/src/visit-failure'
+
+class StudioRecorderMock {}
+
+// Event manager with Cypress driver dependencies stubbed out
+// Useful for component testing
+export const createEventManager = () => {
+  return new EventManager(
+    null, // packages/driver, not needed for CT tests
+    // @ts-ignore
+    null, // MobX, also not needed in Vue CT tests,
+    null, // selectorPlaygroundModel,
+    StudioRecorderMock, // needs to be a valid class
+  )
+}
+
+// Stub AutIframe, useful for component testing
+export const createTestAutIframe = (eventManager = createEventManager()) => {
+  return new AutIframe(
+    'Test Project',
+    eventManager,
+    _,
+    null, // CypressJQuery, shouldn't be using driver in component tests anyway
+    logger,
+    null, // dom - imports driver, which we don't want in CT, so just stub it out
+    visitFailure,
+    {
+      recorder: eventManager.studioRecorder,
+      selectorPlaygroundModel: eventManager.selectorPlaygroundModel,
+    },
+    blankContents,
+  )
+}

packages/app/index.d.ts

@@ -80,9 +80,6 @@ declare global {
       _: any // lodash
       CypressJQuery: any
 
-      studioRecorder: any
-      selectorPlaygroundModel: any
-
       MobX: typeof MobX
 
       /**

packages/app/package.json

@@ -44,6 +44,7 @@
     "graphql-tag": "^2.12.5",
     "javascript-time-ago": "2.3.8",
     "just-my-luck": "3.0.0",
+    "lodash": "4.17.21",
     "pinia": "2.0.0-rc.14",
     "rimraf": "3.0.2",
     "rollup-plugin-polyfill-node": "^0.7.0",
@@ -78,8 +79,10 @@
         "@urql/exchange-execute",
         "@urql/vue",
         "@vueuse/core",
+        "bluebird",
         "cypress-file-upload",
         "dedent",
+        "events",
         "fake-uuid",
         "graphql",
         "graphql-relay",

packages/app/src/runner/SnapshotChangeState.vue

@@ -13,15 +13,20 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
+import type { AutIframe } from '../runner/aut-iframe'
 import { useSnapshotStore } from './snapshot-store'
 import SnapshotButtonGroup from './SnapshotButtonGroup.vue'
 
 const snapshotStore = useSnapshotStore()
 
 const changeState = (index: number) => {
-  snapshotStore.changeState(index)
+  snapshotStore.changeState(index, props.getAutIframe())
 }
 
+const props = defineProps<{
+  getAutIframe: () => AutIframe
+}>()
+
 const snapshots = computed(() => {
   return (snapshotStore.snapshotProps?.snapshots || [])
   .map((x, index) => ({ ...x, index }))

packages/app/src/runner/SnapshotControls.spec.tsx

@@ -1,25 +1,36 @@
 import SnapshotControls from './SnapshotControls.vue'
 import { autSnapshot } from '../../cypress/support/fixtures'
 import { useSnapshotStore } from './snapshot-store'
+import { createEventManager, createTestAutIframe } from '../../cypress/e2e/support/ctSupport'
 
-describe('SnapshotControls', () => {
-  const mountSnapshotControls = () => {
-    const eventManager = {} as typeof window.UnifiedRunner.eventManager
+// function createTestAutIframe () {
+//   return new class {
+//     removeHighlights () {}
+//   }
+// }
 
-    return cy.mount(() => <SnapshotControls eventManager={eventManager} />)
+describe('SnapshotControls', () => {
+  const mountSnapshotControls = (
+    eventManager = createEventManager(),
+    autIframe = createTestAutIframe(),
+  ) => {
+    return cy.mount(() => (
+      <SnapshotControls
+        eventManager={eventManager}
+        getAutIframe={() => autIframe}
+      />
+    ))
   }
 
-  beforeEach(() => {
-    return mountSnapshotControls()
-  })
-
   it('renders nothing when messageTitle is undefined', () => {
+    mountSnapshotControls()
     cy.get('[data-cy="snapshot-highlight-controls"]').should('not.exist')
     cy.get('[data-cy="snapshot-message"]').should('not.exist')
     cy.get('[data-cy="snapshot-change-state"]').should('not.exist')
   })
 
   it('renders snapshot title when one is pinned', () => {
+    mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
     snapshotStore.pinSnapshot(autSnapshot)
@@ -28,6 +39,7 @@ describe('SnapshotControls', () => {
   })
 
   it('renders snapshot pinned status', () => {
+    mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
     snapshotStore.pinSnapshot(autSnapshot)
@@ -40,6 +52,7 @@ describe('SnapshotControls', () => {
   })
 
   it('clears snapshot message', () => {
+    mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
     snapshotStore.pinSnapshot(autSnapshot)
@@ -49,6 +62,7 @@ describe('SnapshotControls', () => {
   })
 
   it('shows snapshot with custom message', () => {
+    mountSnapshotControls()
     const message = 'This is a custom message'
     const snapshotStore = useSnapshotStore()
 
@@ -57,6 +71,7 @@ describe('SnapshotControls', () => {
   })
 
   it('does not show highlight controls if no element present on snapshot', () => {
+    mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
     snapshotStore.pinSnapshot(autSnapshot)
@@ -65,19 +80,38 @@ describe('SnapshotControls', () => {
 
   it('toggles highlight controls if snapshot has an element', () => {
     const snapshotStore = useSnapshotStore()
+    const eventManager = createEventManager()
+    const autIframe = createTestAutIframe()
+    const removeHighlights = cy.stub(autIframe, 'removeHighlights')
 
+    // we don't have an iframe-model since this is a CT test, but we can
+    // simulate it by registering the same unpin:snapshot event it does.
+    eventManager.on('unpin:snapshot', () => snapshotStore.unpinSnapshot())
     snapshotStore.pinSnapshot({ ...autSnapshot, $el: 'some element' })
+
+    mountSnapshotControls(eventManager, autIframe)
     cy.get('[data-cy="snapshot-highlight-controls"]').should('exist')
+    cy.get('[data-cy="toggle-snapshot-highlights"]').as('toggle')
+    cy.get('@toggle').should('have.attr', 'title', 'Hide highlights')
+    cy.get('@toggle').click().then(() => {
+      expect(removeHighlights).to.have.been.calledOnce
+    })
+
+    cy.get('@toggle').should('have.attr', 'title', 'Show highlights')
+    cy.get('[data-cy="unpin-snapshot"]').click()
+    cy.get('[data-cy="snapshot-highlight-controls"]').should('not.exist')
   })
 
   it('shows running test error', () => {
+    mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
     snapshotStore.setTestsRunningError()
     cy.get('[data-cy="snapshot-message"]').contains('Cannot show Snapshot while tests are running')
   })
 
   it('shows snapshot missing error', () => {
+    mountSnapshotControls()
     const snapshotStore = useSnapshotStore()
 
     snapshotStore.setMissingSnapshotMessage()

packages/app/src/runner/SnapshotControls.vue

@@ -11,10 +11,12 @@
       <SnapshotHighlightControls
         v-if="snapshotStore.isSnapshotPinned && snapshotStore.snapshotProps?.$el"
         :event-manager="props.eventManager"
+        :get-aut-iframe="props.getAutIframe"
       />
 
       <SnapshotChangeState
         v-if="snapshotStore.isSnapshotPinned && shouldShowStateControls"
+        :get-aut-iframe="props.getAutIframe"
       />
     </div>
   </div>
@@ -26,9 +28,12 @@ import { useSnapshotStore } from './snapshot-store'
 import SnapshotMessage from './SnapshotMessage.vue'
 import SnapshotChangeState from './SnapshotChangeState.vue'
 import SnapshotHighlightControls from './SnapshotHighlightControls.vue'
+import type { EventManager } from '../runner/event-manager'
+import type { AutIframe } from '../runner/aut-iframe'
 
 const props = defineProps<{
-  eventManager: typeof window.UnifiedRunner.eventManager
+  eventManager: EventManager
+  getAutIframe: () => AutIframe
 }>()
 
 const snapshotStore = useSnapshotStore()

packages/app/src/runner/SnapshotHighlightControls.vue

@@ -8,6 +8,7 @@
       <i className="fas fa-times" />
     </button>
     <button
+      data-cy="toggle-snapshot-highlights"
       :title="`${snapshotStore.snapshot?.showingHighlights ? 'Hide' : 'Show'} highlights`"
       @click="toggleHighlights"
     >
@@ -17,11 +18,14 @@
 </template>
 
 <script lang="ts" setup>
+import type { AutIframe } from '../runner/aut-iframe'
+import type { EventManager } from '../runner/event-manager'
 import { useSnapshotStore } from './snapshot-store'
 import SnapshotButtonGroup from './SnapshotButtonGroup.vue'
 
 const props = defineProps<{
-  eventManager: typeof window.UnifiedRunner.eventManager
+  eventManager: EventManager
+  getAutIframe: () => AutIframe
 }>()
 
 const snapshotStore = useSnapshotStore()
@@ -31,7 +35,7 @@ const unpin = () => {
 }
 
 const toggleHighlights = () => {
-  snapshotStore.toggleHighlights()
+  snapshotStore.toggleHighlights(props.getAutIframe())
 }
 </script>
 

packages/app/src/runner/SpecRunner.vue

@@ -32,7 +32,10 @@
           :style="viewportStyle"
         />
       </div>
-      <SnapshotControls :event-manager="eventManager" />
+      <SnapshotControls
+        :event-manager="eventManager"
+        :get-aut-iframe="getAutIframeModel"
+      />
     </div>
   </div>
 </template>
@@ -43,8 +46,8 @@ import { REPORTER_ID, RUNNER_ID, getRunnerElement, getReporterElement, empty } f
 import { gql } from '@urql/core'
 import type { SpecRunnerFragment } from '../generated/graphql'
 import InlineSpecList from '../specs/InlineSpecList.vue'
+import { getAutIframeModel, getEventManager, UnifiedRunnerAPI } from '../runner'
 import { useAutStore } from '../store'
-import { UnifiedRunnerAPI } from '../runner'
 import type { BaseSpec } from '@packages/types'
 import SnapshotControls from './SnapshotControls.vue'
 import SpecRunnerHeader from './SpecRunnerHeader.vue'
@@ -56,7 +59,7 @@ fragment SpecRunner on App {
 }
 `
 
-const eventManager = window.UnifiedRunner.eventManager
+const eventManager = getEventManager()
 
 const autStore = useAutStore()
 
@@ -91,7 +94,7 @@ watch(() => props.activeSpec, (spec) => {
 }, { immediate: true, flush: 'post' })
 
 onMounted(() => {
-  window.UnifiedRunner.eventManager.on('restart', () => {
+  getEventManager().on('restart', () => {
     runSpec()
   })
 })