fix: angular and nuxt ct tests now fail on uncaught exceptions (#24122)

Author: ZachJW34

npm/angular/src/mount.ts

@@ -8,7 +8,7 @@ window.Mocha['__zone_patch__'] = false
 import 'zone.js/testing'
 
 import { CommonModule } from '@angular/common'
-import { Component, EventEmitter, SimpleChange, SimpleChanges, Type } from '@angular/core'
+import { Component, ErrorHandler, EventEmitter, Injectable, SimpleChange, SimpleChanges, Type } from '@angular/core'
 import {
   ComponentFixture,
   getTestBed,
@@ -99,6 +99,13 @@ export type MountResponse<T> = {
 // so we'll patch here pending a fix in that library
 globalThis.it.skip = globalThis.xit
 
+@Injectable()
+class CypressAngularErrorHandler implements ErrorHandler {
+  handleError (error: Error): void {
+    throw error
+  }
+}
+
 /**
  * Bootstraps the TestModuleMetaData passed to the TestBed
  *
@@ -120,6 +127,17 @@ function bootstrapModule<T> (
     testModuleMetaData.imports = []
   }
 
+  if (!testModuleMetaData.providers) {
+    testModuleMetaData.providers = []
+  }
+
+  // Replace default error handler since it will swallow uncaught exceptions.
+  // We want these to be uncaught so Cypress catches it and fails the test
+  testModuleMetaData.providers.push({
+    provide: ErrorHandler,
+    useClass: CypressAngularErrorHandler,
+  })
+
   // check if the component is a standalone component
   if ((component as any).ɵcmp.standalone) {
     testModuleMetaData.imports.push(component)

npm/vue2/src/index.ts

@@ -273,11 +273,11 @@ declare global {
  * @see https://github.com/cypress-io/cypress/issues/7910
  */
 function failTestOnVueError (err, vm, info) {
-  console.error(`Vue error`)
-  console.error(err)
-  console.error('component:', vm)
-  console.error('info:', info)
-  window.top.onerror(err)
+  // Vue 2 try catches the error-handler so push the error to be caught outside
+  // of the handler.
+  setTimeout(() => {
+    throw err
+  })
 }
 
 function registerAutoDestroy ($destroy: () => void) {

packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts

@@ -40,9 +40,11 @@ function loadErrorSpec (options: Options): VerifyFunc {
   cy.get('.runnable-header', { log: false }).should('be.visible')
   // Extended timeout needed due to lengthy Angular bootstrap on Windows
   cy.contains('Your tests are loading...', { timeout: 60000, log: false }).should('not.exist')
+  // Then ensure the tests have finished
+  cy.get('[aria-label="Rerun all tests"]', { timeout: 30000 })
   cy.findByLabelText('Stats').within(() => {
-    cy.get('.passed .num', { timeout: 30000 }).should('have.text', `${passCount}`)
-    cy.get('.failed .num', { timeout: 30000 }).should('have.text', `${failCount}`)
+    cy.get('.passed .num').should('have.text', `${passCount}`)
+    cy.get('.failed .num').should('have.text', `${failCount}`)
   })
 
   // Return scoped verify function with spec options baked in
@@ -285,19 +287,36 @@ describe('Nuxt', {
       projectName: 'nuxtjs-vue2-configured',
       configFile: 'cypress.config.js',
       filePath: 'components/Errors.cy.js',
-      failCount: 3,
+      failCount: 4,
     })
 
     verify('error on mount', {
       fileName: 'Errors.vue',
       line: 19,
+      uncaught: true,
+      uncaughtMessage: 'mount error',
       message: [
         'mount error',
       ],
       stackRegex: /Errors\.vue:19/,
       codeFrameText: 'Errors.vue',
     })
 
+    verify('sync error', {
+      fileName: 'Errors.vue',
+      line: 24,
+      uncaught: true,
+      uncaughtMessage: 'sync error',
+      message: [
+        'The following error originated from your application code',
+        'sync error',
+      ],
+      stackRegex: /Errors\.vue:24/,
+      codeFrameText: 'Errors.vue',
+    }).then(() => {
+      verifyErrorOnlyCapturedOnce('Error: sync error')
+    })
+
     verify('async error', {
       fileName: 'Errors.vue',
       line: 28,
@@ -413,12 +432,37 @@ angularVersions.forEach((angularVersion) => {
         projectName: `angular-${angularVersion}`,
         configFile: 'cypress.config.ts',
         filePath: 'src/app/errors.cy.ts',
-        failCount: 1,
+        failCount: 3,
+        passCount: 1,
+      })
+
+      verify('sync error', {
+        fileName: 'errors.ts',
+        line: 14,
+        column: 11,
+        uncaught: true,
+        uncaughtMessage: 'sync error',
+        message: [
+          'The following error originated from your application code',
+          'sync error',
+        ],
+      }).then(() => {
+        verifyErrorOnlyCapturedOnce('Error: sync error')
       })
 
-      // Angular uses ZoneJS which encapsulates errors thrown by components
-      // Thus, the mount, sync, and async error case errors will not propagate to Cypress
-      // and thus won't fail the tests
+      verify('async error', {
+        fileName: 'errors.ts',
+        line: 19,
+        column: 13,
+        uncaught: true,
+        uncaughtMessage: 'async error',
+        message: [
+          'The following error originated from your application code',
+          'async error',
+        ],
+      }).then(() => {
+        verifyErrorOnlyCapturedOnce('Error: async error')
+      })
 
       verify('command failure', {
         line: 21,

system-tests/project-fixtures/angular/src/app/components/errors.ts

@@ -17,6 +17,6 @@ export class ErrorsComponent {
   asyncError() {
     setTimeout(() => {
       throw new Error('async error')
-    }, 50)
+    })
   }
 }