fix(angular): mount cy-root in original location (#25965)

* fix(angular): mount cy-root in original location * correctly fix insertRootElement to preserves html hierarchy, trim system-tests --------- Co-authored-by: Zachary Williams <[email protected]>
cypress-io · Mar 1, 2023 · e674f43 · e674f43
1 parent 79d0a16
commit e674f43
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/npm/angular/src/mount.ts b/npm/angular/src/mount.ts
@@ -179,7 +179,6 @@ export class CypressTestComponentRenderer extends TestComponentRenderer {
     const rootElement = getContainerEl()
 
     rootElement.setAttribute('id', rootElId)
-    document.body.appendChild(rootElement)
   }
 
   override removeAllRootElements () {

diff --git a/system-tests/project-fixtures/angular/src/app/mount.cy.ts b/system-tests/project-fixtures/angular/src/app/mount.cy.ts
@@ -475,3 +475,32 @@ describe('angular mount', () => {
     cy.mount(MyClass)
   })
 })
+
+context('component-index.html', () => {
+  before(() => {
+    const cyRootSelector = '[data-cy-root]'
+    const cyRoot = document.querySelector(cyRootSelector)!
+
+    expect(cyRoot.parentElement === document.body)
+    document.body.innerHTML = `
+      <div id="container">
+        <div data-cy-root></div>
+      </div>
+    `
+  })
+
+  it('preserves html hierarchy', () => {
+    const cyRootSelector = '[data-cy-root]'
+
+    cy.mount(ChildComponent, { componentProperties: { msg: 'Render 1' } })
+    cy.contains('Render 1')
+    cy.get(cyRootSelector).should('exist').parent().should('have.id', 'container')
+    cy.get('#container').should('exist').parent().should('have.prop', 'tagName').should('eq', 'BODY')
+
+    // structure persists after teardown
+    cy.mount(ChildComponent, { componentProperties: { msg: 'Render 2' } })
+    cy.contains('Render 2')
+    cy.get(cyRootSelector).should('exist').parent().should('have.id', 'container')
+    cy.get('#container').should('exist').parent().should('have.prop', 'tagName').should('eq', 'BODY')
+  })
+})