fix: Extend mock logger used in angular bootstrap (#25500)

npm/webpack-dev-server/cypress/e2e/angular.cy.ts

@@ -1,4 +1,4 @@
-// <reference types="cypress" />
+/// <reference types="cypress" />
 /// <reference path="../support/e2e.ts" />
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
@@ -12,83 +12,106 @@ for (const project of WEBPACK_REACT) {
     continue
   }
 
-  describe(`Working with ${project}`, () => {
+  context(project, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
       cy.openProject(project)
-      cy.startAppServer('component')
     })
 
-    it('should mount a passing test', () => {
-      cy.visitApp()
-      cy.contains('app.component.cy.ts').click()
-      cy.waitForSpecToFinish({ passCount: 1 }, 60000)
+    describe('configuration handling', () => {
+      if (!['angular-13', 'angular-14'].includes(project)) {
+        it('should initialize with unsupported browserslist entries', () => {
+          // Create .browerslistrc that requests support for ES5
+          // Support was dropped in Angular CLI v15 so this should generate a warning message in that version and beyond
+          cy.withCtx(async (ctx) => {
+            await ctx.actions.file.writeFileInProject(
+              ctx.path.resolve('.browserslistrc'),
+              'IE 11',
+            )
+          })
+
+          cy.startAppServer('component')
+          cy.visitApp()
+        })
+      }
+    })
 
-      cy.get('li.command').first().within(() => {
-        cy.get('.command-method').should('contain', 'mount')
-        cy.get('.command-message').should('contain', 'AppComponent')
+    describe('test behaviors', () => {
+      beforeEach(() => {
+        cy.startAppServer('component')
       })
-    })
 
-    it('should live-reload on src changes', () => {
-      cy.visitApp()
-      cy.contains('app.component.cy.ts').click()
-      cy.waitForSpecToFinish({ passCount: 1 }, 60000)
+      it('should mount a passing test', () => {
+        cy.visitApp()
+        cy.contains('app.component.cy.ts').click()
+        cy.waitForSpecToFinish({ passCount: 1 }, 60000)
 
-      cy.withCtx(async (ctx) => {
-        await ctx.actions.file.writeFileInProject(
-          ctx.path.join('src', 'app', 'app.component.html'),
-          (await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.html'))).replace('Hello World', 'Hello Cypress'),
-        )
+        cy.get('li.command').first().within(() => {
+          cy.get('.command-method').should('contain', 'mount')
+          cy.get('.command-message').should('contain', 'AppComponent')
+        })
       })
 
-      cy.waitForSpecToFinish({ failCount: 1 }, 60000)
+      it('should live-reload on src changes', () => {
+        cy.visitApp()
+        cy.contains('app.component.cy.ts').click()
+        cy.waitForSpecToFinish({ passCount: 1 }, 60000)
+
+        cy.withCtx(async (ctx) => {
+          await ctx.actions.file.writeFileInProject(
+            ctx.path.join('src', 'app', 'app.component.html'),
+            (await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.html'))).replace('Hello World', 'Hello Cypress'),
+          )
+        })
+
+        cy.waitForSpecToFinish({ failCount: 1 }, 60000)
 
-      cy.withCtx(async (ctx) => {
-        await ctx.actions.file.writeFileInProject(
-          ctx.path.join('src', 'app', 'app.component.html'),
-          (await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.html'))).replace('Hello Cypress', 'Hello World'),
-        )
+        cy.withCtx(async (ctx) => {
+          await ctx.actions.file.writeFileInProject(
+            ctx.path.join('src', 'app', 'app.component.html'),
+            (await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.html'))).replace('Hello Cypress', 'Hello World'),
+          )
+        })
+
+        cy.waitForSpecToFinish({ passCount: 1 }, 60000)
       })
 
-      cy.waitForSpecToFinish({ passCount: 1 }, 60000)
-    })
+      it('should show compilation errors on src changes', () => {
+        cy.visitApp()
 
-    it('should show compilation errors on src changes', () => {
-      cy.visitApp()
+        cy.contains('app.component.cy.ts').click()
+        cy.waitForSpecToFinish({ passCount: 1 }, 60000)
 
-      cy.contains('app.component.cy.ts').click()
-      cy.waitForSpecToFinish({ passCount: 1 }, 60000)
+        // Create compilation error
+        cy.withCtx(async (ctx) => {
+          const componentFilePath = ctx.path.join('src', 'app', 'app.component.ts')
 
-      // Create compilation error
-      cy.withCtx(async (ctx) => {
-        const componentFilePath = ctx.path.join('src', 'app', 'app.component.ts')
+          await ctx.actions.file.writeFileInProject(
+            componentFilePath,
+            (await ctx.file.readFileInProject(componentFilePath)).replace('class', 'classaaaaa'),
+          )
+        })
 
-        await ctx.actions.file.writeFileInProject(
-          componentFilePath,
-          (await ctx.file.readFileInProject(componentFilePath)).replace('class', 'classaaaaa'),
-        )
+        // The test should fail and the stack trace should appear in the command log
+        cy.waitForSpecToFinish({ failCount: 1 }, 60000)
+        cy.contains('The following error originated from your test code, not from Cypress.').should('exist')
+        cy.get('.test-err-code-frame').should('be.visible')
       })
 
-      // The test should fail and the stack trace should appear in the command log
-      cy.waitForSpecToFinish({ failCount: 1 }, 60000)
-      cy.contains('The following error originated from your test code, not from Cypress.').should('exist')
-      cy.get('.test-err-code-frame').should('be.visible')
-    })
+      // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23455
+      it('should detect new spec', { retries: 15 }, () => {
+        cy.visitApp()
 
-    // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23455
-    it('should detect new spec', { retries: 15 }, () => {
-      cy.visitApp()
+        cy.withCtx(async (ctx) => {
+          await ctx.actions.file.writeFileInProject(
+            ctx.path.join('src', 'app', 'new.component.cy.ts'),
+            await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.cy.ts')),
+          )
+        })
 
-      cy.withCtx(async (ctx) => {
-        await ctx.actions.file.writeFileInProject(
-          ctx.path.join('src', 'app', 'new.component.cy.ts'),
-          await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.cy.ts')),
-        )
+        cy.contains('new.component.cy.ts').click()
+        cy.waitForSpecToFinish({ passCount: 1 }, 60000)
       })
-
-      cy.contains('new.component.cy.ts').click()
-      cy.waitForSpecToFinish({ passCount: 1 }, 60000)
     })
   })
 }

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -6,8 +6,10 @@ import type { PresetHandlerResult, WebpackDevServerConfig } from '../devServer'
 import { dynamicAbsoluteImport, dynamicImport } from '../dynamic-import'
 import { sourceDefaultWebpackDependencies } from './sourceRelativeWebpackModules'
 import debugLib from 'debug'
+import type { logging as AngularLogging } from '@angular-devkit/core'
 
-const debug = debugLib('cypress:webpack-dev-server:angularHandler')
+const debugPrefix = 'cypress:webpack-dev-server:angularHandler'
+const debug = debugLib(debugPrefix)
 
 export type BuildOptions = Record<string, any>
 
@@ -166,26 +168,29 @@ export async function getAngularCliModules (projectRoot: string) {
     '@angular-devkit/build-angular/src/utils/webpack-browser-config.js',
     '@angular-devkit/build-angular/src/webpack/configs/common.js',
     '@angular-devkit/build-angular/src/webpack/configs/styles.js',
+    '@angular-devkit/core/src/index.js',
   ] as const
 
   const [
     { generateBrowserWebpackConfigFromContext },
     { getCommonConfig },
     { getStylesConfig },
+    { logging },
   ] = await Promise.all(angularCLiModules.map((dep) => {
     try {
       const depPath = require.resolve(dep, { paths: [projectRoot] })
 
       return dynamicAbsoluteImport(depPath)
     } catch (e) {
-      throw new Error(`Could not resolve "${dep}". Do you have "@angular-devkit/build-angular" installed?`)
+      throw new Error(`Could not resolve "${dep}". Do you have "@angular-devkit/build-angular" and "@angular-devkit/core" installed?`)
     }
   }))
 
   return {
     generateBrowserWebpackConfigFromContext,
     getCommonConfig,
     getStylesConfig,
+    logging,
   }
 }
 
@@ -203,14 +208,13 @@ export async function getAngularJson (projectRoot: string): Promise<AngularJson>
   return JSON.parse(angularJson)
 }
 
-function createFakeContext (projectRoot: string, defaultProjectConfig: Cypress.AngularDevServerProjectConfig) {
-  const logger = {
-    createChild: () => {
-      return {
-        warn: () => {},
-      }
-    },
-  }
+function createFakeContext (projectRoot: string, defaultProjectConfig: Cypress.AngularDevServerProjectConfig, logging: typeof AngularLogging) {
+  const logger = new logging.Logger(debugPrefix)
+
+  // Proxy all logging calls through to the debug logger
+  logger.forEach((value: AngularLogging.LogEntry) => {
+    debug(JSON.stringify(value))
+  })
 
   const context = {
     target: {
@@ -239,6 +243,7 @@ async function getAngularCliWebpackConfig (devServerConfig: AngularWebpackDevSer
     generateBrowserWebpackConfigFromContext,
     getCommonConfig,
     getStylesConfig,
+    logging,
   } = await getAngularCliModules(projectRoot)
 
   // normalize
@@ -248,7 +253,7 @@ async function getAngularCliWebpackConfig (devServerConfig: AngularWebpackDevSer
 
   const buildOptions = getAngularBuildOptions(projectConfig.buildOptions, tsConfig)
 
-  const context = createFakeContext(projectRoot, projectConfig)
+  const context = createFakeContext(projectRoot, projectConfig, logging)
 
   const { config } = await generateBrowserWebpackConfigFromContext(
     buildOptions,

system-tests/project-fixtures/angular/src/app/app.component.cy.ts

@@ -3,5 +3,5 @@ import { AppComponent } from './app.component'
 
 it('should', () => {
   cy.mount(AppComponent)
-  cy.get('h1').contains('Hello World')
+  cy.get('h1').contains('Hello World', { timeout: 250 })
 })