WIP on getting open mode e2e testing

Author: tgriesser

packages/app/cypress.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "../../cli/schema/cypress.schema.json",
   "projectId": "sehy69",
   "viewportWidth": 800,
   "viewportHeight": 850,

packages/frontend-shared/cypress/e2e/support/e2eProjectRegistry.ts

@@ -7,6 +7,7 @@ export type ProjectFixture = keyof typeof e2eProjectPaths
 
 export interface WithCtxOptions extends Cypress.Loggable, Cypress.Timeoutable {
   projectName?: string
+  [key: string]: any
 }
 
 declare global {
@@ -18,12 +19,20 @@ declare global {
       initializeApp: typeof initializeApp
       visitApp(href?: string): Chainable<string>
       visitLaunchpad(href?: string): Chainable<string>
+      /**
+       * Get the project path for testing opening a new project
+       */
+      e2eProjectPath(project: ProjectFixture): string
       // graphqlRequest(): Chainable<string>
     }
   }
 }
 
 beforeEach(() => {
+  cy.e2eProjectPath = (project: ProjectFixture) => {
+    return e2eProjectPaths[project]
+  }
+
   // Reset the ports so we know we need to call "setupE2E" before each test
   Cypress.env('e2e_serverPort', undefined)
   Cypress.env('e2e_gqlPort', undefined)

packages/frontend-shared/cypress/e2e/support/e2eSupport.ts

@@ -1,4 +1,5 @@
 {
+  "$schema": "../../cli/schema/cypress.schema.json",
   "projectId": "sehy69",
   "viewportWidth": 800,
   "viewportHeight": 850,
@@ -19,6 +20,8 @@
     "pluginsFile": "cypress/component/plugins/index.js"
   },
   "e2e": {
-    "supportFile": false
+    "supportFile": "cypress/e2e/support/e2eSupport.ts",
+    "integrationFolder": "cypress/e2e/integration",
+    "pluginsFile": "cypress/e2e/plugins/index.ts"
   }
 }

packages/launchpad/cypress.json

@@ -0,0 +1,20 @@
+describe('Launchpad: Open Mode', () => {
+  beforeEach(() => {
+    cy.setupE2E()
+    cy.visitLaunchpad()
+  })
+
+  it('Shows the open page, with a search bar', () => {
+    cy.get('h1').should('contain', 'Cypress')
+    cy.get('[type=search]')
+  })
+
+  it('allows adding a project', () => {
+    cy.withCtx((ctx, o) => {
+      ctx.actions.project.setActiveProject(o.projectPath)
+      ctx.emitter.toLaunchpad()
+    }, { projectPath: cy.e2eProjectPath('todos') })
+
+    cy.get('h1').should('contain', 'Welcome')
+  })
+})

packages/launchpad/cypress/e2e/integration/open-mode.spec.ts

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-const { monorepoPaths } = require('../../../../scripts/gulp/monorepoPaths')
+const { monorepoPaths } = require('../../../../../scripts/gulp/monorepoPaths')
 import { e2ePluginSetup } from '@packages/frontend-shared/cypress/e2e/e2ePluginSetup'
 
 // ***********************************************************

packages/launchpad/cypress/plugins/index.ts packages/launchpad/cypress/e2e/plugins/index.ts

@@ -0,0 +1,2 @@
+/// <reference path="../../../../frontend-shared/cypress/e2e/support/e2eSupport.ts" />
+require('../../../../frontend-shared/cypress/e2e/support/e2eSupport')

packages/launchpad/cypress/e2e/support/e2eSupport.ts

@@ -10,9 +10,9 @@
     "test": "yarn cypress:run:ct && yarn types",
     "windi": "yarn windicss-analysis",
     "cypress:launch": "cross-env TZ=America/New_York node ../../scripts/cypress open --project ${PWD}",
-    "cypress:open": "yarn gulp cyOpenLaunchpadE2E",
+    "cypress:open": "cross-env TZ=America/New_York node ../../scripts/cypress open --project ${PWD}",
     "cypress:run:ct": "cross-env TZ=America/New_York node ../../scripts/cypress run-ct --project ${PWD}",
-    "cypress:run:e2e": "yarn gulp cyRunLaunchpadE2E",
+    "cypress:run:e2e": "cross-env TZ=America/New_York node ../../scripts/cypress run --project ${PWD}",
     "dev": "yarn gulp dev --project ${PWD}",
     "start": "echo 'run yarn dev from the root' && exit 1",
     "watch": "echo 'run yarn dev from the root' && exit 1"

packages/launchpad/cypress/integration/add-project-from-global-mode.ts

@@ -3,6 +3,7 @@
     <TestingTypeCard
       v-if="ct"
       :id="ct.type"
+      :data-e2e="ct.type"
       :title="ct.title"
       :description="firstTimeCT ? ct.description : 'LAUNCH'"
       role="button"
@@ -14,6 +15,7 @@
     <TestingTypeCard
       v-if="e2e"
       :id="e2e.type"
+      :data-e2e="e2e.type"
       :title="e2e.title"
       :description="firstTimeE2E ? e2e.description : 'LAUNCH'"
       role="button"

packages/launchpad/cypress/integration/basic.spec.ts

@@ -11,7 +11,7 @@ import gulp from 'gulp'
 import { autobarrelWatcher } from './tasks/gulpAutobarrel'
 import { startCypressWatch, openCypressLaunchpad, openCypressApp, runCypressLaunchpad, wrapRunWithExit, runCypressApp, killExistingCypress } from './tasks/gulpCypress'
 import { graphqlCodegen, graphqlCodegenWatch, nexusCodegen, nexusCodegenWatch, generateFrontendSchema, syncRemoteGraphQL } from './tasks/gulpGraphql'
-import { viteApp, viteCleanApp, viteCleanLaunchpad, viteLaunchpad, viteBuildApp, viteBuildAndWatchApp, viteBuildLaunchpad, viteBuildAndWatchLaunchpad } from './tasks/gulpVite'
+import { viteApp, viteCleanApp, viteCleanLaunchpad, viteLaunchpad, viteBuildApp, viteBuildAndWatchApp, viteBuildLaunchpad, viteBuildAndWatchLaunchpad, symlinkViteProjects } from './tasks/gulpVite'
 import { checkTs } from './tasks/gulpTsc'
 import { makePathMap } from './utils/makePathMap'
 import { makePackage } from './tasks/gulpMakePackage'
@@ -135,6 +135,18 @@ gulp.task(
   ),
 )
 
+gulp.task('watchForE2E', gulp.series(
+  'codegen',
+  gulp.parallel(
+    gulp.series(
+      viteBuildAndWatchLaunchpad,
+      viteBuildAndWatchApp,
+    ),
+    webpackRunner,
+  ),
+  symlinkViteProjects,
+))
+
 /**------------------------------------------------------------------------
  *                         Launchpad Testing
  * This task builds and hosts the launchpad as if it was a static website.
@@ -182,6 +194,8 @@ const cyOpenLaunchpad = gulp.series(
     viteBuildApp,
   ),
 
+  symlinkViteProjects,
+
   // 2. Start the REAL (dev) Cypress App, which will launch in open mode.
   openCypressLaunchpad,
 )
@@ -198,6 +212,8 @@ const cyOpenApp = gulp.series(
     webpackRunner,
   ),
 
+  symlinkViteProjects,
+
   // 2. Start the REAL (dev) Cypress App, which will launch in open mode.
   openCypressApp,
 )
@@ -244,6 +260,7 @@ gulp.task(makePackage)
  * here for debugging, e.g. `yarn gulp syncRemoteGraphQL`
  *------------------------------------------------------------------------**/
 
+gulp.task(symlinkViteProjects)
 gulp.task(syncRemoteGraphQL)
 gulp.task(generateFrontendSchema)
 gulp.task(makePathMap)

packages/launchpad/cypress/integration/global-mode-navigation.ts

@@ -30,7 +30,7 @@ import path from 'path'
 export const e2eProjectPaths = {
 ${allDirs
 .map((dir) => {
-  return `  '${path.basename(dir)}': path.join(__dirname, '${path.relative(OUTPUT_PATH, dir)}')`
+  return `  '${path.basename(dir)}': path.join(__dirname, '${path.relative(path.dirname(OUTPUT_PATH), dir)}')`
 }).join(',\n')}
 } as const
 `,

packages/launchpad/cypress/integration/navigating-back-to-global-mode.ts

@@ -72,6 +72,23 @@ function spawnViteDevServer (
  *  * viteBuildLaunchpad
  *------------------------------------------------------------------------**/
 
+export async function symlinkViteProjects () {
+  await Promise.all([
+    spawned('cmd-symlink', 'yarn rimraf dist-launchpad && ln -s dist dist-launchpad', {
+      cwd: monorepoPaths.pkgLaunchpad,
+    }),
+    spawned('cmd-symlink', 'yarn rimraf dist-app && ln -s ../app/dist dist-app', {
+      cwd: monorepoPaths.pkgLaunchpad,
+    }),
+    spawned('cmd-symlink', 'yarn rimraf dist-app && ln -s dist dist-app', {
+      cwd: monorepoPaths.pkgApp,
+    }),
+    spawned('cmd-symlink', 'yarn rimraf dist-launchpad && ln -s ../launchpad/dist dist-launchpad', {
+      cwd: monorepoPaths.pkgApp,
+    }),
+  ])
+}
+
 export function viteBuildApp () {
   return spawned('vite:build-app', `yarn vite build`, {
     cwd: monorepoPaths.pkgApp,

packages/launchpad/package.json

@@ -7,6 +7,7 @@ import { prefixLog, prefixStream } from './prefixStream'
 import { addChildProcess } from '../tasks/gulpRegistry'
 
 export type AllSpawnableApps =
+  | `cmd-${string}`
   | `vite-${string}`
   | `vite:build-${string}`
   | `serve:${string}`