fix: mount component in [data-cy-root] (#25807)

* fix(angular): mount component in [data-cy-root]

* fix e2e test

* add changelog entry

* changelog [skip ci]

* changelog

---------

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>

Author: ZachJW34

cli/CHANGELOG.md

@@ -1,5 +1,4 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-
 ## 12.6.1
 
 _Released 03/1/2023 (PENDING)_
@@ -8,6 +7,7 @@ _Released 03/1/2023 (PENDING)_
 
 - Fixed an issue where cookies were being duplicated with the same hostname, but a prepended dot. Fixed an issue where cookies may not be expiring correctly. Fixes [#25174](https://github.com/cypress-io/cypress/issues/25174), [#25205](https://github.com/cypress-io/cypress/issues/25205) and [#25495](https://github.com/cypress-io/cypress/issues/25495).
 - Added missing TypeScript type definitions for the [`cy.reload()`](https://docs.cypress.io/api/commands/reload) command. Addressed in [#25779](https://github.com/cypress-io/cypress/pull/25779).
+- Ensure Angular components are mounted inside the correct element. Fixes [#24385](https://github.com/cypress-io/cypress/issues/24385)
 - Fix a bug where files outside the project root in a monorepo are not correctly served when using Vite. Addressed in [#25801](https://github.com/cypress-io/cypress/pull/25801)
 
 **Misc:**

npm/angular/src/mount.ts

@@ -14,13 +14,15 @@ import {
   getTestBed,
   TestModuleMetadata,
   TestBed,
+  TestComponentRenderer,
 } from '@angular/core/testing'
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing'
 import {
   setupHooks,
+  getContainerEl,
 } from '@cypress/mount-utils'
 
 /**
@@ -169,6 +171,22 @@ function bootstrapModule<T> (
   return testModuleMetaData
 }
 
+@Injectable()
+export class CypressTestComponentRenderer extends TestComponentRenderer {
+  override insertRootElement (rootElId: string) {
+    this.removeAllRootElements()
+
+    const rootElement = getContainerEl()
+
+    rootElement.setAttribute('id', rootElId)
+    document.body.appendChild(rootElement)
+  }
+
+  override removeAllRootElements () {
+    getContainerEl().innerHTML = ''
+  }
+}
+
 /**
  * Initializes the TestBed
  *
@@ -186,6 +204,8 @@ function initTestBed<T> (
     ...bootstrapModule(componentFixture, config),
   })
 
+  getTestBed().overrideProvider(TestComponentRenderer, { useValue: new CypressTestComponentRenderer() })
+
   return componentFixture
 }
 

packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts

@@ -42,13 +42,9 @@ for (const { projectName, test } of PROJECTS) {
         cy.contains(`${test}`).click()
         cy.waitForSpecToFinish(undefined)
         cy.get('.command.command-name-mount > .command-wrapper').click().then(() => {
-          if (`${projectName}` === 'angular-14') {
-            cy.get('iframe.aut-iframe').its('0.contentDocument.body').children().should('have.length.at.least', 2)
-          } else {
-            cy.get('iframe.aut-iframe').its('0.contentDocument.body').then(cy.wrap).within(() => {
-              cy.get('[data-cy-root]').children().should('have.length.at.least', 1)
-            })
-          }
+          cy.get('iframe.aut-iframe').its('0.contentDocument.body').then(cy.wrap).within(() => {
+            cy.get('[data-cy-root]').children().should('have.length.at.least', 1)
+          })
         })
       }
     })

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

@@ -441,12 +441,15 @@ describe('angular mount', () => {
   })
 
   describe('teardown', () => {
+    const cyRootSelector = '[data-cy-root]'
+
     beforeEach(() => {
-      cy.get('[id^=root]').should('not.exist')
+      cy.get(cyRootSelector).should('be.empty')
     })
 
     it('should mount', () => {
       cy.mount(ButtonOutputComponent)
+      cy.get(cyRootSelector).should('not.be.empty')
     })
 
     it('should remove previous mounted component', () => {
@@ -456,7 +459,7 @@ describe('angular mount', () => {
       cy.contains('Render 2')
 
       cy.contains('Render 1').should('not.exist')
-      cy.get('[id^=root]').children().should('have.length', 1)
+      cy.get(cyRootSelector).children().should('have.length', 1)
     })
   })