feat: add angular-ct project setup (#22897)

Author: ZachJW34

packages/config/src/ast-utils/astConfigHelpers.ts

@@ -28,6 +28,7 @@ export interface ASTComponentDefinitionConfig {
   testingType: 'component'
   bundler: 'vite' | 'webpack'
   framework?: string
+  specPattern?: string
 }
 
 /**
@@ -41,15 +42,18 @@ export interface ASTComponentDefinitionConfig {
  * }
  */
 export function addComponentDefinition (config: ASTComponentDefinitionConfig): t.ObjectProperty {
-  return extractProperty(`
-    const toMerge = {
-      component: {
-        devServer: {
-          framework: ${config.framework ? `'${config.framework}'` : 'undefined'},
-          bundler: '${config.bundler}',
-        },
+  const componentConfig = JSON.stringify({
+    component: {
+      devServer: {
+        framework: config.framework,
+        bundler: config.bundler,
       },
-    }
+      specPattern: config.specPattern,
+    },
+  }, null, 2)
+
+  return extractProperty(`
+    const toMerge = ${componentConfig}
   `)
 }
 

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

@@ -1,5 +1,5 @@
 import type { NexusGenObjects } from '@packages/graphql/src/gen/nxs.gen'
-import { detectFramework, WIZARD_FRAMEWORKS, WIZARD_BUNDLERS, commandsFileBody, supportFileComponent, supportFileE2E } from '@packages/scaffold-config'
+import { detectFramework, WIZARD_FRAMEWORKS, commandsFileBody, supportFileComponent, supportFileE2E, WizardBundler, WizardFrontendFramework } from '@packages/scaffold-config'
 import assert from 'assert'
 import path from 'path'
 import Debug from 'debug'
@@ -23,7 +23,7 @@ export class WizardActions {
     return this.ctx.wizardData
   }
 
-  setFramework (framework: typeof WIZARD_FRAMEWORKS[number] | null): void {
+  setFramework (framework: WizardFrontendFramework | null): void {
     const next = WIZARD_FRAMEWORKS.find((x) => x.type === framework?.type)
 
     this.ctx.update((coreData) => {
@@ -51,7 +51,7 @@ export class WizardActions {
     }
   }
 
-  setBundler (bundler: typeof WIZARD_BUNDLERS[number] | null) {
+  setBundler (bundler: WizardBundler | null) {
     this.ctx.update((coreData) => {
       coreData.wizard.chosenBundler = bundler
     })
@@ -227,6 +227,7 @@ export class WizardActions {
       testingType: 'component',
       bundler: this.ctx.coreData.wizard.chosenBundler?.package ?? 'webpack',
       framework: this.ctx.coreData.wizard.chosenFramework?.configFramework,
+      specPattern: this.ctx.coreData.wizard.chosenFramework?.specPattern,
     }
 
     const result = await addTestingTypeToCypressConfig({
@@ -292,7 +293,7 @@ export class WizardActions {
     }
   }
 
-  private async scaffoldComponentIndexHtml (chosenFramework: typeof WIZARD_FRAMEWORKS[number]): Promise<NexusGenObjects['ScaffoldedFile']> {
+  private async scaffoldComponentIndexHtml (chosenFramework: WizardFrontendFramework): Promise<NexusGenObjects['ScaffoldedFile']> {
     const componentIndexHtmlPath = path.join(this.projectRoot, 'cypress', 'support', 'component-index.html')
 
     await this.ensureDir('support')

packages/data-context/src/data/coreDataShape.ts

@@ -1,5 +1,5 @@
 import { FoundBrowser, Editor, AllowedState, AllModeOptions, TestingType, BrowserStatus, PACKAGE_MANAGERS, AuthStateName, MIGRATION_STEPS, MigrationStep } from '@packages/types'
-import type { WIZARD_BUNDLERS, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
+import type { WizardFrontendFramework, WizardBundler } from '@packages/scaffold-config'
 import type { NexusGenObjects } from '@packages/graphql/src/gen/nxs.gen'
 import type { App, BrowserWindow } from 'electron'
 import type { ChildProcess } from 'child_process'
@@ -63,11 +63,11 @@ export interface AppDataShape {
 }
 
 export interface WizardDataShape {
-  chosenBundler: typeof WIZARD_BUNDLERS[number] | null
-  chosenFramework: typeof WIZARD_FRAMEWORKS[number] | null
+  chosenBundler: WizardBundler | null
+  chosenFramework: WizardFrontendFramework | null
   chosenManualInstall: boolean
-  detectedBundler: typeof WIZARD_BUNDLERS[number] | null
-  detectedFramework: typeof WIZARD_FRAMEWORKS[number] | null
+  detectedBundler: WizardBundler | null
+  detectedFramework: WizardFrontendFramework | null
 }
 
 export interface MigrationDataShape {

packages/data-context/test/unit/sources/WizardDataSource.spec.ts

@@ -1,12 +1,12 @@
-import { WIZARD_BUNDLERS, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
+import { WizardBundler, WizardFrontendFramework, WIZARD_BUNDLERS, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
 import { expect } from 'chai'
 import { createTestDataContext, scaffoldMigrationProject, removeCommonNodeModules } from '../helper'
 
-function findFramework (type: typeof WIZARD_FRAMEWORKS[number]['type']) {
+function findFramework (type: WizardFrontendFramework['type']) {
   return WIZARD_FRAMEWORKS.find((x) => x.type === type)!
 }
 
-function findBundler (type: typeof WIZARD_BUNDLERS[number]['type']) {
+function findBundler (type: WizardBundler['type']) {
   return WIZARD_BUNDLERS.find((x) => x.type === type)!
 }
 
@@ -149,8 +149,8 @@ describe('packagesToInstall', () => {
     ctx.update((coreData) => {
     // this should never happen!
       coreData.currentProject = projectPath
-      coreData.wizard.chosenFramework = undefined
-      coreData.wizard.chosenBundler = undefined
+      coreData.wizard.chosenFramework = null
+      coreData.wizard.chosenBundler = null
     })
 
     const actual = ctx.wizard.installDependenciesCommand()

packages/graphql/schemas/schema.graphql

@@ -870,6 +870,7 @@ type FileParts implements Node {
 }
 
 enum FrontendFrameworkEnum {
+  angular
   nextjs
   nuxtjs
   react

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

@@ -107,4 +107,17 @@ describe('scaffolding component testing', {
       verifyConfigFile(`cypress.config.js`)
     })
   })
+
+  context('angular-cli-unconfigured', () => {
+    it('scaffolds component testing for Angular', () => {
+      startSetupFor('angular-cli-unconfigured')
+
+      // should detect correctly
+      // Screen reader text is "Support is in", but don't want to rely on DOM introduced whitespace so using regex
+      cy.contains('button', 'Angular(detected)').should('be.visible')
+      cy.contains('button', 'Next Step').click()
+      cy.findByRole('button', { name: 'Continue' }).click()
+      verifyConfigFile(`cypress.config.ts`)
+    })
+  })
 })

packages/launchpad/cypress/e2e/scaffold-project.cy.ts

@@ -1,4 +1,4 @@
-import type { WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
+import type { WizardFrontendFramework } from '@packages/scaffold-config'
 import type { SnapshotScaffoldTestResult } from '@packages/launchpad/cypress/tasks/snapshotsScaffold'
 
 // The tests in this file take an existing project without Cypress Configured
@@ -55,8 +55,8 @@ function scaffoldAndOpenE2EProject (opts: {
 
 function scaffoldAndOpenCTProject (opts: {
   name: Parameters<typeof cy.scaffoldProject>[0]
-  framework: typeof WIZARD_FRAMEWORKS[number]['name']
-  bundler?: typeof WIZARD_FRAMEWORKS[number]['supportedBundlers'][number]['name']
+  framework: WizardFrontendFramework['name']
+  bundler?: WizardFrontendFramework['supportedBundlers'][number]['name']
   args?: Parameters<typeof cy.openProject>[1]
   removeFixturesFolder?: boolean
 }) {

packages/launchpad/src/images/logos/angular.svg

@@ -4,6 +4,7 @@ import LogoNext from '../images/logos/nextjs.svg'
 import LogoNuxt from '../images/logos/nuxt.svg'
 import LogoVue from '../images/logos/vue.svg'
 import LogoReact from '../images/logos/react.svg'
+import LogoAngular from '../images/logos/angular.svg'
 
 import type { FrontendFrameworkEnum, SupportedBundlers } from '../generated/graphql'
 
@@ -18,4 +19,5 @@ export const FrameworkBundlerLogos: Record<FrontendFrameworkEnum | SupportedBund
   nuxtjs: LogoNuxt,
   react: LogoReact,
   reactscripts: LogoReact,
+  angular: LogoAngular,
 }