fix: Fix missing it.skip function in Angular tests (#23829)

* fix: restore mocha methods

* Simplify `it.skip` patch, add tests

* Consolidate test runs for perf

* Add tests to validate `skip` and `only` behaviors

Co-authored-by: Zachary Williams <zachjw34@gmail.com>

npm/angular/src/mount.ts

@@ -94,6 +94,11 @@ export type MountResponse<T> = {
   component: T
 };
 
+// 'zone.js/testing' is not properly aliasing `it.skip` but it does provide `xit`/`xspecify`
+// Written up under https://github.com/angular/angular/issues/46297 but is not seeing movement
+// so we'll patch here pending a fix in that library
+globalThis.it.skip = globalThis.xit
+
 /**
  * Bootstraps the TestModuleMetaData passed to the TestBed
  *

system-tests/project-fixtures/angular/src/app/zonejs-mocha-only.cy.ts

@@ -0,0 +1,96 @@
+import { AppComponent } from './app.component'
+
+const ExcludedTestTitle = 'should not exist'
+
+// Validating Mocha syntax and behavior of *.only is still valid after being patched by `zone.js/testing`
+// Github Issue: https://github.com/cypress-io/cypress/issues/23409
+describe('only', () => {
+  context.only('01 - executions', () => {
+    describe('suite', () => {
+      suite.only('should exist on "suite"', () => {
+        it('succeeds', () => {})
+      })
+
+      it(ExcludedTestTitle, () => {})
+    })
+
+    describe('describe', () => {
+      describe.only('should exist on "describe"', () => {
+        it('succeeds', () => {})
+      })
+
+      it(ExcludedTestTitle, () => {})
+    })
+
+    describe('context', () => {
+      context.only('should exist on "context"', () => {
+        it('succeeds', () => {})
+      })
+
+      it(ExcludedTestTitle, () => {})
+    })
+
+    describe('specify', () => {
+      specify.only('should exist on "specify"', () => {})
+      it(ExcludedTestTitle, () => {})
+    })
+
+    describe('test', () => {
+      test.only('should exist on "test"', () => {})
+      it(ExcludedTestTitle, () => {})
+    })
+
+    describe('it', () => {
+      it.only('should exist on "it"', () => {})
+      it(ExcludedTestTitle, () => {})
+    })
+  })
+
+  context.only('02 - validations', () => {
+    const verifyNotPresent = (title: string) => {
+      cy.wrap(Cypress.$(window.top!.document.body)).within(() =>
+        cy
+          .contains(title)
+          .should('not.exist')
+      )
+    }
+
+    describe('suite', () => {
+      it('should not include other test', () => {
+        verifyNotPresent(ExcludedTestTitle)
+      })
+    })
+
+    describe('describe', () => {
+      it('should not include other test', () => {
+        verifyNotPresent(ExcludedTestTitle)
+      })
+    })
+
+    describe('context', () => {
+      it('should not include other test', () => {
+        verifyNotPresent(ExcludedTestTitle)
+      })
+    })
+
+    describe('specify', () => {
+      it('should not include other test', () => {
+        verifyNotPresent(ExcludedTestTitle)
+      })
+    })
+
+    describe('test', () => {
+      it('should not include other test', () => {
+        verifyNotPresent(ExcludedTestTitle)
+      })
+    })
+
+    describe('it', () => {
+      it('should not include other test', () => {
+        verifyNotPresent(ExcludedTestTitle)
+      })
+    })
+  })
+})
+
+it('empty passing test', () => {})

system-tests/project-fixtures/angular/src/app/zonejs-mocha-skip.cy.ts

@@ -0,0 +1,86 @@
+import { AppComponent } from './app.component'
+
+// Validating Mocha syntax and behavior of *.skip is still valid after being patched by `zone.js/testing`
+// Github Issue: https://github.com/cypress-io/cypress/issues/23409
+describe('skip', () => {
+  context('01 - executions', () => {
+    describe('suite', () => {
+      suite.skip('should exist on "suite"', () => {
+        it('skipped', () => {})
+      })
+    })
+
+    describe('describe', () => {
+      describe.skip('should exist on "describe"', () => {
+        it('skipped', () => {})
+      })
+    })
+
+    describe('context', () => {
+      context.skip('should exist on "context"', () => {
+        it('skipped', () => {})
+      })
+    })
+
+    describe('specify', () => {
+      specify.skip('should exist on "specify"', () => {})
+    })
+
+    describe('test', () => {
+      test.skip('should exist on "test"', () => {})
+    })
+
+    describe('it', () => {
+      it.skip('should exist on "it"', () => {})
+    })
+  })
+
+  context('02 - validations', () => {
+    const verifyWasSkipped = (title: string) => {
+      cy.wrap(Cypress.$(window.top!.document.body)).within(() =>
+        cy
+          .contains(title)
+          .parents('[data-model-state="pending"]')          // Find parent row with class indicating test was skipped
+          .should('be.visible')
+      )
+    }
+
+    describe('suite', () => {
+      it('should have been skipped', () => {
+        verifyWasSkipped('should exist on "suite"')
+      })
+    })
+
+    describe('describe', () => {
+      it('should have been skipped', () => {
+        verifyWasSkipped('should exist on "describe"')
+      })
+    })
+
+    describe('context', () => {
+      it('should have been skipped', () => {
+        verifyWasSkipped('should exist on "context"')
+      })
+    })
+
+    describe('specify', () => {
+      it('should have been skipped', () => {
+        verifyWasSkipped('should exist on "specify"')
+      })
+    })
+
+    describe('test', () => {
+      it('should have been skipped', () => {
+        verifyWasSkipped('should exist on "test"')
+      })
+    })
+
+    describe('it', () => {
+      it('should have been skipped', () => {
+        verifyWasSkipped('should exist on "it"')
+      })
+    })
+  })
+})
+
+it('empty passing test', () => {})

system-tests/test/component_testing_spec.ts

@@ -113,7 +113,11 @@ describe(`Angular CLI major versions`, () => {
   systemTests.setup()
 
   for (const majorVersion of ANGULAR_MAJOR_VERSIONS) {
-    const spec = `${majorVersion === '14' ? 'src/app/components/standalone.component.cy.ts,src/app/mount.cy.ts' : 'src/app/mount.cy.ts'}`
+    let spec = 'src/**/*.cy.ts'
+
+    if (majorVersion === '13') {
+      spec = `${spec},!src/app/components/standalone.component.cy.ts`
+    }
 
     systemTests.it(`v${majorVersion} with mount tests`, {
       project: `angular-${majorVersion}`,