feat(app): run e2e tests (#18448)

* update server

* add launchMode param

* update logic

* update types

* update gql

* basic WIP for e2e

* hot reload

* dead code

* try to conditionally launch existing runner

* types

* update server

* params

* append gql port

* override to default ot e2e runner on launchpad and app e2e tests

* do not set launchpad variable for e2e runs

* use window to get graphql port and correctly run e2e conditionally using CIRCLECI env. var

Author: lmiller1990

packages/app/cypress/integration/visit-google.spec.ts

@@ -0,0 +1,5 @@
+describe('visit google', () => {
+  it('goes to google.com', () => {
+    cy.visit('https://google.com')
+  })
+})

packages/app/index.d.ts

@@ -48,8 +48,18 @@ declare global {
         teardown: (state: Store) => Promise<void>
         teardownReporter: () => Promise<void>
         [key: string]: any
+
+        on (event: 'restart', ...args: unknown[]): void
       }
 
+      /**
+       * This is the config served from the back-end.
+       * We will manage config using GraphQL going forward,
+       * but for now we are also caching it on `window`
+       * to be able to move fast and iterate
+       */
+      config: Record<string, any>
+
       /**
        * To ensure we are only a single copy of React
        * We get a reference to the copy of React (and React DOM)

packages/app/src/pages/Specs.vue

@@ -32,9 +32,3 @@ const props = defineProps<{
   name: "Specs Page"
 }
 </route>
-
-<style>
-iframe {
-  width: 100%;
-}
-</style>

packages/app/src/runner/index.ts

@@ -63,9 +63,9 @@ function teardownSpec (store: Store) {
  * Cypress on it.
  *
  */
-function setupSpec (spec: BaseSpec) {
-  // @ts-ignore - TODO: figure out how to manage window.config.
-  const config = window.config
+function setupSpecCT (spec: BaseSpec) {
+  // TODO: figure out how to manage window.config.
+  const config = window.UnifiedRunner.config
 
   // this is how the Cypress driver knows which spec to run.
   config.spec = spec
@@ -98,6 +98,64 @@ function setupSpec (spec: BaseSpec) {
   window.UnifiedRunner.eventManager.initialize($autIframe, config)
 }
 
+/**
+ * Create a Spec IFrame. Used for loading the spec to execute in E2E
+ */
+function createSpecIFrame (specSrc: string) {
+  const el = document.createElement('iframe')
+
+  el.id = `Your Spec: '${specSrc}'`,
+  el.className = 'spec-iframe'
+
+  return el
+}
+
+/**
+ * Set up an E2E spec by creating a fresh AUT for the spec to evaluate under,
+ * a Spec IFrame to load the spec's source code, and
+ * initialize Cypress on the AUT.
+ */
+function setupSpecE2E (spec: BaseSpec) {
+  // TODO: manage config with GraphQL, don't put it on window.
+  const config = window.UnifiedRunner.config
+
+  // this is how the Cypress driver knows which spec to run.
+  config.spec = spec
+
+  // creates a new instance of the Cypress driver for this spec,
+  // initializes a bunch of listeners
+  // watches spec file for changes.
+  window.UnifiedRunner.eventManager.setup(config)
+
+  const $runnerRoot = getRunnerElement()
+
+  // clear AUT, if there is one.
+  empty($runnerRoot)
+
+  // create root for new AUT
+  const $container = document.createElement('div')
+
+  $runnerRoot.append($container)
+
+  // create new AUT
+  const autIframe = new window.UnifiedRunner.AutIframe('Test Project')
+
+  autIframe.showInitialBlankContents()
+  const $autIframe: JQuery<HTMLIFrameElement> = autIframe.create().appendTo($container)
+
+  // create Spec IFrame
+  const specSrc = getSpecUrl(config.namespace, spec)
+  const $specIframe = createSpecIFrame(specSrc)
+
+  // append to document, so the iframe will execute the spec
+  $container.appendChild($specIframe)
+
+  $specIframe.src = specSrc
+
+  // initialize Cypress (driver) with the AUT!
+  window.UnifiedRunner.eventManager.initialize($autIframe, config)
+}
+
 /**
  * Inject the global `UnifiedRunner` via a <script src="..."> tag.
  * which includes the event manager and AutIframe constructor.
@@ -125,7 +183,7 @@ function initialize (ready: () => void) {
  *
  * 4. Force the Reporter to re-render with the new spec we are executed.
  *
- * 5. Setup the spec. This involves a few things, see the `setupSpec` function's
+ * 5. Setup the spec. This involves a few things, see the `setupSpecCT` function's
  *    description for more information.
  */
 async function executeSpec (spec: BaseSpec) {
@@ -137,7 +195,15 @@ async function executeSpec (spec: BaseSpec) {
 
   UnifiedReporterAPI.setupReporter()
 
-  return setupSpec(spec)
+  if (window.UnifiedRunner.config.testingType === 'e2e') {
+    return setupSpecE2E(spec)
+  }
+
+  if (window.UnifiedRunner.config.testingType === 'component') {
+    return setupSpecCT(spec)
+  }
+
+  throw Error('Unknown or undefined testingType on window.UnifiedRunner.config.testingType')
 }
 
 export const UnifiedRunnerAPI = {

packages/app/src/runner/injectBundle.ts

@@ -42,9 +42,9 @@ export async function injectBundle (ready: () => void) {
   // injectReporterStyle()
 
   script.onload = () => {
-    // @ts-ignore - just stick config on window until we figure out how we are
+    // just stick config on window until we figure out how we are
     // going to manage it
-    window.config = window.UnifiedRunner.decodeBase64(data.base64Config)
+    window.UnifiedRunner.config = window.UnifiedRunner.decodeBase64(data.base64Config)
     ready()
   }
 }

packages/app/src/runs/Runner.vue

@@ -30,7 +30,13 @@ const props = defineProps<{
 }>()
 
 onMounted(() => {
-  UnifiedRunnerAPI.initialize(execute)
+  UnifiedRunnerAPI.initialize(() => {
+    window.UnifiedRunner.eventManager.on('restart', () => {
+      execute()
+    })
+
+    execute()
+  })
 })
 
 onBeforeUnmount(() => {
@@ -72,3 +78,14 @@ const execute = () => {
   name: "Runner"
 }
 </route>
+
+<style>
+#unified-runner > div {
+  height: 100%;
+}
+
+iframe {
+  width: 100%;
+  height: 100%;
+}
+</style>

packages/app/src/specs/SpecsList.vue

@@ -62,7 +62,7 @@ fragment Specs_SpecsList on App {
   activeProject {
     id
     projectRoot
-    specs(first: 25) {
+    specs: specs(first: 25) {
       edges {
         ...SpecNode_SpecsList
       }

packages/driver/src/cypress.ts

@@ -100,7 +100,7 @@ class $Cypress {
 
     // set domainName but allow us to turn
     // off this feature in testing
-    if (d) {
+    if (d && config.testingType === 'e2e') {
       document.domain = d
     }
 

packages/launchpad/cypress/integration/visit-google.spec.ts

@@ -0,0 +1,5 @@
+describe('visit google', () => {
+  it('goes to google.com', () => {
+    cy.visit('https://google.com')
+  })
+})

packages/server/lib/controllers/runner.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import type { Response } from 'express'
+import type { Request, Response } from 'express'
 import send from 'send'
 import os from 'os'
 import { fs } from '../util/fs'
@@ -82,8 +82,8 @@ export const runner = {
     return serveRunner(runnerPkg, config, res)
   },
 
-  handle (testingType, req, res) {
-    const pathToFile = getPathToDist(testingType === 'e2e' ? 'runner' : 'runner-ct', req.params[0])
+  handle (testingType: Cypress.TestingType, req: Request, res: Response) {
+    const pathToFile = getPathToDist(process.env.LAUNCHPAD || testingType === 'component' ? 'runner-ct' : 'runner', req.params[0])
 
     return send(req, pathToFile)
     .pipe(res)

packages/server/lib/gui/makeGraphQLServer.ts

@@ -41,6 +41,7 @@ export async function makeGraphQLServer (ctx: DataContext) {
 
   const srv = graphqlServer = app.listen(() => {
     const port = (srv.address() as AddressInfo).port
+
     const endpoint = `http://localhost:${port}/graphql`
 
     if (process.env.NODE_ENV === 'development') {

packages/server/lib/open_project.ts

@@ -124,7 +124,7 @@ export class OpenProject {
     // of potential domain changes, request buffers, etc
     this.openProject!.reset()
 
-    const url = getSpecUrl({
+    let url = getSpecUrl({
       absoluteSpecPath: spec.absolute,
       specType: spec.specType,
       browserUrl: this.openProject.cfg.browserUrl,

packages/server/lib/routes-ct.ts

@@ -1,12 +1,8 @@
 import Debug from 'debug'
-import httpProxy from 'http-proxy'
-import { makeServeConfig } from './runner-ct'
 import { Request, Response, Router } from 'express'
+import type { InitializeRoutes } from './routes'
 import send from 'send'
 import { getPathToDist } from '@packages/resolve-dist'
-import type { InitializeRoutes } from './routes'
-import { fs } from './util/fs'
-import type { DataContextShell } from '@packages/data-context/src/DataContextShell'
 
 const debug = Debug('cypress:server:routes-ct')
 
@@ -17,114 +13,18 @@ const serveChunk = (req: Request, res: Response, clientRoute: string) => {
 }
 
 export const createRoutesCT = ({
-  ctx,
   config,
   nodeProxy,
-  getCurrentBrowser,
-  specsStore,
 }: InitializeRoutes) => {
   const routesCt = Router()
 
-  if (process.env.CYPRESS_INTERNAL_VITE_APP_PORT) {
-    const proxy = httpProxy.createProxyServer({
-      target: `http://localhost:${process.env.CYPRESS_INTERNAL_VITE_APP_PORT}/`,
-    })
-    const proxyIndex = httpProxy.createProxyServer({
-      target: `http://localhost:${process.env.CYPRESS_INTERNAL_VITE_APP_PORT}/`,
-      selfHandleResponse: true,
-    })
-
-    proxyIndex.on('proxyRes', function (proxyRes, _req, _res) {
-      const body: any[] = []
-
-      proxyRes.on('data', function (chunk) {
-        let chunkData = String(chunk)
-
-        if (chunkData.includes('<head>')) {
-          chunkData = chunkData.replace('<body>', replaceBody(ctx))
-        }
-
-        body.push(chunkData)
-      })
-
-      proxyRes.on('end', function () {
-        (_res as Response).send(body.join(''))
-      })
-    })
-
-    // TODO: can namespace this onto a "unified" route like __app-unified__
-    // make sure to update the generated routes inside of vite.config.ts
-    routesCt.get('/__vite__/*', (req, res) => {
-      if (req.params[0] === '') {
-        proxyIndex.web(req, res, {}, (e) => {})
-      } else {
-        proxy.web(req, res, {}, (e) => {})
-      }
-    })
-  } else {
-    routesCt.get('/__vite__/*', (req, res) => {
-      const pathToFile = getPathToDist('app', req.params[0])
-
-      if (req.params[0] === '') {
-        return fs.readFile(pathToFile, 'utf8')
-        .then((file) => {
-          res.send(file.replace('<body>', replaceBody(ctx)))
-        })
-      }
-
-      return send(req, pathToFile).pipe(res)
-    })
-  }
-
-  // TODO If prod, serve the build app files from app/dist
-
-  routesCt.get('/api', (req, res) => {
-    const options = makeServeConfig({
-      config,
-      getCurrentBrowser,
-      specsStore,
-    })
-
-    res.json(options)
-  })
-
-  routesCt.get('/__/api', (req, res) => {
-    const options = makeServeConfig({
-      config,
-      getCurrentBrowser,
-      specsStore,
-    })
-
-    res.json(options)
-  })
-
   routesCt.get('/__cypress/static/*', (req, res) => {
     const pathToFile = getPathToDist('static', req.params[0])
 
     return send(req, pathToFile)
     .pipe(res)
   })
 
-  routesCt.get('/__cypress/iframes/*', (req, res) => {
-    // always proxy to the index.html file
-    // attach header data for webservers
-    // to properly intercept and serve assets from the correct src root
-    // TODO: define a contract for dev-server plugins to configure this behavior
-    req.headers.__cypress_spec_path = req.params[0]
-    req.url = `${config.devServerPublicPathRoute}/index.html`
-
-    // user the node proxy here instead of the network proxy
-    // to avoid the user accidentally intercepting and modifying
-    // our internal index.html handler
-
-    nodeProxy.web(req, res, {}, (e) => {
-      if (e) {
-        // eslint-disable-next-line
-        debug('Proxy request error. This is likely the socket hangup issue, we can basically ignore this because the stream will automatically continue once the asset will be available', e)
-      }
-    })
-  })
-
   // user app code + spec code
   // default mounted to /__cypress/src/*
   routesCt.get(`${config.devServerPublicPathRoute}*`, (req, res) => {
@@ -157,7 +57,3 @@ export const createRoutesCT = ({
 
   return routesCt
 }
-
-function replaceBody (ctx: DataContextShell) {
-  return `<body><script>window.__CYPRESS_GRAPHQL_PORT__ = ${JSON.stringify(ctx.gqlServerPort)};</script>\n`
-}