feat: scan for 3rd party ct plugins

cli/types/cypress.d.ts

@@ -3398,6 +3398,12 @@ declare namespace Cypress {
      * @internal
      */
     specPattern?: '**/*.cy.ts'
+
+    /**
+     * Raw SVG icon that will be displayed in the Project Setup Wizard. Used for third parties that
+     * want to render a custom icon.
+     */
+    icon?: string
   }
 
   type ComponentFrameworkDefinition = Omit<ResolvedComponentFrameworkDefinition, 'dependencies'> & {

packages/data-context/src/actions/WizardActions.ts

@@ -1,5 +1,5 @@
 import type { NexusGenObjects } from '@packages/graphql/src/gen/nxs.gen'
-import { detectFramework, commandsFileBody, supportFileComponent, supportFileE2E, getBundler } from '@packages/scaffold-config'
+import { detectFramework, commandsFileBody, supportFileComponent, supportFileE2E, getBundler, CT_FRAMEWORKS, resolveComponentFrameworkDefinition, detectThirdPartyCTFrameworks } from '@packages/scaffold-config'
 import assert from 'assert'
 import path from 'path'
 import Debug from 'debug'
@@ -161,6 +161,20 @@ export class WizardActions {
     }
   }
 
+  async detectFrameworks () {
+    if (!this.ctx.currentProject) {
+      return
+    }
+
+    const officialFrameworks = CT_FRAMEWORKS.map((framework) => resolveComponentFrameworkDefinition(framework))
+    const thirdParty = await detectThirdPartyCTFrameworks(this.ctx.currentProject)
+    const resolvedThirdPartyFrameworks = thirdParty.map(resolveComponentFrameworkDefinition)
+
+    this.ctx.update((d) => {
+      d.wizard.frameworks = officialFrameworks.concat(resolvedThirdPartyFrameworks)
+    })
+  }
+
   private async scaffoldE2E () {
     // Order of the scaffoldedFiles is intentional, confirm before changing
     const scaffoldedFiles = await Promise.all([

packages/graphql/schemas/schema.graphql

@@ -2384,6 +2384,9 @@ type WizardFrontendFramework implements Node {
   """The category (framework, like react-scripts, or library, like react"""
   category: String!
 
+  """Raw SVG icon of framework"""
+  icon: String
+
   """Relay style Node ID field for the WizardFrontendFramework field"""
   id: ID!
 

packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts

@@ -182,6 +182,7 @@ export const mutation = mutationType({
         if (ctx.coreData.currentTestingType && !ctx.lifecycleManager.isTestingTypeConfigured(ctx.coreData.currentTestingType)) {
           // Component Testing has a wizard to help users configure their project
           if (ctx.coreData.currentTestingType === 'component') {
+            await ctx.actions.wizard.detectFrameworks()
             await ctx.actions.wizard.initialize()
           } else {
             // E2E doesn't have such a wizard, we just create/update their cypress.config.js.

packages/graphql/src/schemaTypes/objectTypes/gql-WizardFrontendFramework.ts

@@ -52,5 +52,9 @@ export const WizardFrontendFramework = objectType({
         return ctx.wizardData.chosenFramework?.supportedBundlers.map(findBundler) ?? []
       },
     })
+
+    t.string('icon', {
+      description: 'Raw SVG icon of framework',
+    })
   },
 })

packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts

@@ -149,4 +149,34 @@ describe('scaffolding component testing', {
       verifyConfigFile(`cypress.config.js`)
     })
   })
+
+  context('3rd party ct plugin', () => {
+    it('Scaffolds component testing for Qwik using Vite', () => {
+      cy.scaffoldProject('qwik-app')
+      cy.openProject('qwik-app')
+      cy.visitLaunchpad()
+      cy.skipWelcome()
+
+      cy.withCtx(async (ctx) => {
+        await ctx.actions.file.removeFileInProject('./node_modules/cypress-ct-qwik')
+        await ctx.actions.file.moveFileInProject('./cypress-ct-qwik', './node_modules/cypress-ct-qwik')
+      })
+
+      cy.contains('Component Testing').click()
+      cy.contains('button', /Qwik\s+Support is in\s+Community\(detected\)/)
+      cy.contains('button', 'Next step').click()
+
+      cy.contains('li', '@builder.io/qwik').within(() => {
+        cy.findByLabelText('installed')
+      })
+
+      cy.contains('li', 'vite').within(() => {
+        cy.findByLabelText('installed')
+      })
+
+      cy.contains('button', 'Continue').click()
+
+      verifyConfigFile('cypress.config.js')
+    })
+  })
 })

packages/launchpad/src/setup/EnvironmentSetup.vue

@@ -65,6 +65,7 @@ fragment EnvironmentSetup on Wizard {
       isDetected
     }
     category
+    icon
   }
   frameworks {
     id
@@ -73,6 +74,7 @@ fragment EnvironmentSetup on Wizard {
     isDetected
     type
     category
+    icon
   }
   allBundlers {
     id
@@ -104,6 +106,7 @@ const frameworks = computed(() => {
       name: x.name,
       id: x.id,
       isDetected: x.isDetected,
+      icon: x.icon || undefined,
     }
   })
 

packages/launchpad/src/setup/SelectFwOrBundler.vue

@@ -25,8 +25,14 @@
     >
       <component
         :is="FrameworkBundlerLogos[itemValue?.type]"
+        v-if="!itemValue?.icon"
         class="h-16px w-16px"
       />
+      <div
+        v-else
+        class="h-16px w-16px"
+        v-html="itemValue.icon"
+      />
     </template>
 
     <template #selected>
@@ -59,7 +65,13 @@
     <template #item-prefix="{ value: itemValue }">
       <component
         :is="FrameworkBundlerLogos[itemValue?.type]"
+        v-if="!itemValue?.icon"
+        class="h-16px w-16px"
+      />
+      <div
+        v-else
         class="h-16px w-16px"
+        v-html="itemValue.icon"
       />
     </template>
   </Select>

packages/launchpad/src/setup/types.ts

@@ -11,6 +11,7 @@ interface RootOption {
 export interface FrameworkOption extends RootOption {
   type: string
   supportStatus: Cypress.ResolvedComponentFrameworkDefinition['supportStatus']
+  icon?: string
 }
 
 interface BundlerOption extends RootOption {

packages/scaffold-config/package.json

@@ -17,7 +17,8 @@
     "compare-versions": "4.1.3",
     "debug": "^4.3.4",
     "fs-extra": "^9.1.0",
-    "globby": "^11.0.1"
+    "globby": "^11.0.1",
+    "zod": "^3.20.3"
   },
   "devDependencies": {
     "@packages/ts": "0.0.0-development",

packages/scaffold-config/src/ct-detect-third-party.ts

@@ -0,0 +1,117 @@
+import path from 'path'
+import { pathToFileURL } from 'url'
+import globby from 'globby'
+import { z } from 'zod'
+import Debug from 'debug'
+
+const debug = Debug('cypress:scaffold-config:ct-detect-third-party')
+
+const DependencySchema = z.object({
+  type: z.string(),
+  name: z.string(),
+  package: z.string(),
+  installer: z.string(),
+  description: z.string(),
+  minVersion: z.string(),
+})
+
+const DependencyArraySchema = z.array(DependencySchema)
+
+const BundlerSchema = z.enum(['webpack', 'vite'])
+
+const ThirdPartyComponentFrameworkSchema = z.object({
+  type: z.string().startsWith('cypress-ct-'),
+  name: z.string(),
+  supportedBundlers: z.array(BundlerSchema),
+  detectors: DependencyArraySchema,
+  dependencies: z.function(),
+  componentIndexHtml: z.optional(z.function()),
+})
+
+const CT_FRAMEWORK_GLOB = path.join('node_modules', 'cypress-ct-*', 'package.json')
+
+// tsc will compile `import(...)` calls to require unless a different tsconfig.module value
+// is used (e.g. module=node16). To change this, we would also have to change the ts-node behavior when requiring the
+// Cypress config file. This hack for keeping dynamic imports from being converted works across all
+// of our supported node versions
+const _dynamicImport = new Function('specifier', 'return import(specifier)')
+
+const dynamicImport = <T>(module: string) => {
+  return _dynamicImport(module) as Promise<T>
+}
+
+const dynamicAbsoluteImport = (filePath: string) => {
+  return dynamicImport(pathToFileURL(filePath).href) as Promise<any>
+}
+
+export async function detectThirdPartyCTFrameworks (
+  projectRoot: string,
+): Promise<Cypress.ThirdPartyComponentFrameworkDefinition[]> {
+  try {
+    const fullPathGlob = path.join(projectRoot, CT_FRAMEWORK_GLOB).replaceAll('\\', '/')
+
+    const packageJsonPaths = await globby(fullPathGlob)
+
+    debug('Found packages matching %s glob: %o', fullPathGlob, packageJsonPaths)
+
+    const modules = await Promise.all(
+      packageJsonPaths.map(async (packageJsonPath) => {
+        try {
+          /**
+           * Node.js require.resolve resolves differently when given an absolute path vs package name e.g.
+           * - require.resolve('/<project-root>/node_modules/cypress-ct-solidjs') => packageJson.main
+           * - require.resolve('cypress-ct-solidjs', { paths: [projectRoot] }) => packageJson.exports
+           * We need to respect packageJson.exports so as to resolve the node specifier so we find package.json,
+           * get the packageRoot and then get the baseName giving us the module name
+           *
+           * Example package.json:
+           * {
+           *    "main": "index.mjs",
+           *    "exports": {
+           *      "node": "definition.mjs",
+           *      "default": "index.mjs"
+           *    }
+           * }
+          */
+          const packageName = path.basename(path.dirname(packageJsonPath))
+
+          debug('Attempting to resolve third party module with require.resolve: %s', packageName)
+
+          const modulePath = require.resolve(packageName, { paths: [projectRoot] })
+
+          debug('Resolve successful: %s', modulePath)
+
+          const m = await dynamicAbsoluteImport(modulePath).then((m) => m.default || m)
+
+          debug('Import successful: %o', m)
+
+          return m
+        } catch (e) {
+          debug('Ignoring %s due to error resolving: %o', e)
+        }
+      }),
+    ).then((modules) => {
+      return modules.filter((m) => {
+        if (!m) return false
+
+        try {
+          return !!validateThirdPartyModule(m)
+        } catch (e) {
+          debug('Failed to parse third party module with validation error: %o', e)
+
+          return false
+        }
+      })
+    })
+
+    return modules
+  } catch (e) {
+    debug('Error occurred while looking for 3rd party CT plugins: %o', e)
+
+    return []
+  }
+}
+
+export function validateThirdPartyModule (m: Cypress.ThirdPartyComponentFrameworkDefinition) {
+  return ThirdPartyComponentFrameworkSchema.parse(m)
+}

packages/scaffold-config/src/index.ts

@@ -3,6 +3,7 @@
 
 export * from './commandFile'
 export * from './component-index-template'
+export * from './ct-detect-third-party'
 export * from './dependencies'
 export * from './detect'
 export * from './frameworks'

packages/scaffold-config/test/unit/ct-detect-third-party.spec.ts

@@ -0,0 +1,52 @@
+import { scaffoldMigrationProject, fakeDepsInNodeModules } from './detect.spec'
+import fs from 'fs-extra'
+import path from 'path'
+import { detectThirdPartyCTFrameworks, validateThirdPartyModule } from '../../src'
+import { expect } from 'chai'
+import solidJs from './fixtures'
+
+async function scaffoldQwikApp (thirdPartyModuleNames: Array<'cypress-ct-qwik' | 'misconfigured-cypress-ct-qwik'>) {
+  const projectRoot = await scaffoldMigrationProject('qwik-app')
+
+  await fakeDepsInNodeModules(projectRoot, [{ dependency: '@builder.io/qwik', version: '0.17.5' }])
+  for (const thirdPartyModuleName of thirdPartyModuleNames) {
+    const nodeModulePath = path.join(projectRoot, 'node_modules', thirdPartyModuleName)
+
+    await fs.remove(nodeModulePath)
+    await fs.copy(path.join(projectRoot, thirdPartyModuleName), nodeModulePath)
+  }
+
+  return projectRoot
+}
+
+describe('detectThirdPartyCTFrameworks', () => {
+  it('detects third party frameworks', async () => {
+    const projectRoot = await scaffoldQwikApp(['cypress-ct-qwik'])
+
+    const thirdPartyFrameworks = await detectThirdPartyCTFrameworks(projectRoot)
+
+    expect(thirdPartyFrameworks[0].type).eq('cypress-ct-qwik')
+  })
+
+  it('ignores misconfigured third party frameworks', async () => {
+    const projectRoot = await scaffoldQwikApp(['cypress-ct-qwik', 'misconfigured-cypress-ct-qwik'])
+
+    const thirdPartyFrameworks = await detectThirdPartyCTFrameworks(projectRoot)
+
+    expect(thirdPartyFrameworks.length).eq(1)
+    expect(thirdPartyFrameworks[0].type).eq('cypress-ct-qwik')
+  })
+
+  it('validates third party module', () => {
+    expect(() => validateThirdPartyModule(solidJs)).to.not.throw()
+
+    const gen = (m: any) => m
+
+    expect(() => validateThirdPartyModule(gen({ ...solidJs, type: 'misconfigured' }))).to.throw()
+    expect(() => validateThirdPartyModule(gen({ ...solidJs, name: 5 }))).to.throw()
+    expect(() => validateThirdPartyModule(gen({ ...solidJs, supportedBundlers: ['random'] }))).to.throw()
+    expect(() => validateThirdPartyModule(gen({ ...solidJs, detectors: {} }))).to.throw()
+    expect(() => validateThirdPartyModule(gen({ ...solidJs, dependencies: {} }))).to.throw()
+    expect(() => validateThirdPartyModule(gen({ ...solidJs, componentIndexHtml: {} }))).to.throw()
+  })
+})

packages/scaffold-config/test/unit/detect.spec.ts

@@ -53,7 +53,7 @@ interface DevDepToFake {
  * We have some real e2e tests that actually run `npm install`.
  * Those are in launchpad/cypress/e2e/scaffold-component-testing.cy.ts.
  */
-function fakeDepsInNodeModules (cwd: string, deps: Array<DepToFake | DevDepToFake>) {
+export function fakeDepsInNodeModules (cwd: string, deps: Array<DepToFake | DevDepToFake>) {
   fs.mkdirSync(path.join(cwd, 'node_modules'))
   for (const dep of deps) {
     const depName = 'dependency' in dep ? dep.dependency : dep.devDependency

system-tests/projects/qwik-app/cypress-ct-qwik/definition.cjs

@@ -0,0 +1,28 @@
+const qwikDep = {
+  type: 'qwik',
+  name: 'Qwik',
+  package: '@builder.io/qwik',
+  installer: '@builder.io/qwik',
+  description:
+    'An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.',
+  minVersion: '^0.17.5',
+}
+
+module.exports = {
+  type: 'cypress-ct-qwik',
+
+  category: 'library',
+
+  name: 'Qwik',
+
+  supportedBundlers: ['vite'],
+
+  detectors: [qwikDep],
+
+  // Cypress will include the bundler dependency here, if they selected one.
+  dependencies: () => {
+    return [qwikDep]
+  },
+
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 274"><defs><linearGradient id="logosQwik0" x1="22.347%" x2="77.517%" y1="49.545%" y2="50.388%"><stop offset="0%" stop-color="#4340C4"/><stop offset="12%" stop-color="#4642C8"/><stop offset="100%" stop-color="#594EE4"/></linearGradient><linearGradient id="logosQwik1" x1="38.874%" x2="60.879%" y1="49.845%" y2="50.385%"><stop offset="0%" stop-color="#4340C4"/><stop offset="74%" stop-color="#534ADB"/><stop offset="100%" stop-color="#594EE4"/></linearGradient><linearGradient id="logosQwik2" x1="-.004%" x2="100.123%" y1="49.529%" y2="50.223%"><stop offset="0%" stop-color="#4340C4"/><stop offset="23%" stop-color="#4340C4"/><stop offset="60%" stop-color="#4F48D5"/><stop offset="100%" stop-color="#594EE4"/></linearGradient><linearGradient id="logosQwik3" x1="35.4%" x2="64.895%" y1="49.459%" y2="50.085%"><stop offset="0%" stop-color="#0080FF"/><stop offset="100%" stop-color="#00B9FF"/></linearGradient><linearGradient id="logosQwik4" x1="-.243%" x2="100.411%" y1="49.366%" y2="50.467%"><stop offset="0%" stop-color="#0080FF"/><stop offset="17%" stop-color="#008BFF"/><stop offset="47%" stop-color="#00A7FF"/><stop offset="63%" stop-color="#00B9FF"/><stop offset="100%" stop-color="#00B9FF"/></linearGradient><linearGradient id="logosQwik5" x1="-.125%" x2="100.225%" y1="49.627%" y2="50.101%"><stop offset="0%" stop-color="#00B9FF"/><stop offset="30%" stop-color="#0080FF"/><stop offset="60%" stop-color="#2D67F1"/><stop offset="86%" stop-color="#4D55E8"/><stop offset="100%" stop-color="#594EE4"/></linearGradient><linearGradient id="logosQwik6" x1="4.557%" x2="99.354%" y1="50.184%" y2="51.298%"><stop offset="0%" stop-color="#4340C4"/><stop offset="12%" stop-color="#4642C8"/><stop offset="100%" stop-color="#594EE4"/></linearGradient></defs><path fill="url(#logosQwik0)" d="m175.051 236.859l25.162-15.071l49.298-86.929l-76.287 89.097z"/><path fill="url(#logosQwik1)" d="m242.337 80.408l-4.926-9.4l-1.932-3.663l-.2.196l-25.818-47.015C202.984 8.65 190.631 1.231 177.01 1.074l-25.074.206L188.15 114.8l-23.958 23.331l8.924 86.245l73.769-84.021c10.005-11.587 11.97-28.09 4.92-41.646l-9.466-18.302h-.002Z"/><path fill="url(#logosQwik2)" d="m201.113 72.256l-43.18-70.907L83.41.003C70.165-.15 57.83 6.573 50.88 17.87L7.01 101.747l34.443-33.334L84.701 8.356l97.894 112.153l18.3-18.626c8.397-8.142 5.54-19.558.22-29.625l-.002-.002Z"/><path fill="url(#logosQwik3)" d="M97.784 95.26L84.522 8.796l-73.148 88.03c-12.328 11.935-14.897 30.662-6.419 45.49l42.98 74.727c6.553 11.464 18.755 18.577 32.024 18.729l42.945.49L71.46 119.607L97.784 95.26Z"/><path fill="url(#logosQwik4)" d="M173.227 223.9L71.38 119.022l-13.196 12.59c-10.812 10.248-11.106 27.332-.728 37.921l43.99 66.384l70.65.907l1.127-12.926h.003Z"/><path fill="url(#logosQwik5)" d="m101.584 235.903l72.292-11.599l47.704 49.464z"/><path fill="url(#logosQwik6)" d="m173.111 224.483l27.168-3.457l24.096 49.915c1.06 2.06-1.719 3.977-3.373 2.302l-47.89-48.76Z"/><path fill="#FFF" d="M182.708 120.058L84.681 8.601l12.502 85.958L71.16 118.78l101.772 105.372l-7.595-85.905l17.371-18.192z"/></svg>',
+}

system-tests/projects/qwik-app/cypress-ct-qwik/index.mjs

@@ -0,0 +1,3 @@
+export default function mount () {
+  return 'Legit mount function'
+}