Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Angular CT does not mount component within div[data-cy-root]'s original html element hierarchy #25956

Closed
mv740 opened this issue Feb 26, 2023 · 2 comments · Fixed by #25965
Closed

Angular CT does not mount component within div[data-cy-root]'s original html element hierarchy #25956

mv740 opened this issue Feb 26, 2023 · 2 comments · Fixed by #25965
Labels
CT Issue related to component testing npm: @cypress/angular @cypress/angular package issues

Comments

@mv740
Copy link
Contributor

mv740 commented Feb 26, 2023

Current behavior

Angular components are correctly mounted into the div[data-cy-root] root element but they aren't respecting the div's original position.

component-index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Components App</title>
  </head>
  <body>
    <div id="outside">
      <div id="inside">
        <div data-cy-root></div>
      </div>
    </div>
  </body>
</html>

image

the issue is caused by the following line of code 

       document.body.appendChild(rootElement)

Desired behavior

The components should be mounted inside of div data-cy-root></div> and still keep it's original position.

<div class="outside">
      <div id="inside">
          <div data-cy-root="" id="root0" _nghost-a-c12="" ng-version="14.2.12"><div _ngcontent-a-c12="">yep, it works</div><button _ngcontent-a-c12="" data-cy="get-comp-name">Get component name</button></div>
      </div>
</div>

possible solution

update the following method

override insertRootElement (rootElId: string) {
    this.removeAllRootElements()

    const rootElement = getContainerEl()
    const parentElement = rootElement.parentElement

    rootElement.setAttribute('id', rootElId)

    if(parentElement && parentElement?.tagName !== 'HTML') {
        parentElement.appendChild(rootElement)
    } else {
        document.body.appendChild(rootElement) 
   }
    
  }

Test code to reproduce

Any angular app with CT setup. You just need to edit the component-index.html file.

<div data-cy-root></div> add the root div inside another div.

...
  <body>
      <div id="container">
        <div data-cy-root></div>
      </div>
  </body>

Cypress Version

12.7.0

Node version

v18.12.1

Operating System

ubuntu 22.04

Debug Logs

No response

Other

No response
@mv740
Copy link
Contributor Author

mv740 commented Feb 26, 2023

is there a specific command to scaffold the angular ct Project (13|14|15)? I think there is supposed to be a way to automatically copy the fixtures folder into the projects.

if someone could point me in the right direction, I will create the MR for my issue.

@lmiller1990
Copy link
Contributor

Saw #25807 was in 12.7. It touches some of the same code. Was this a regression introduced in 12.7 or a pre-existing bug?

To scaffold Cypress CT, you just run npx cypress open in your Angular project and hit Component Testing - it should do the rest for you. There's no CLI scaffolding at this point.

If you'd like to make a PR fixing the bug you've found, that'd be great! Something like:

  1. clone this monorepo
  2. yarn (takes a while...)
  3. You could use this test and do systemTests.it.only to run just that one. cd system-tests && yarn test component_testing to run it.
  4. It points to this project. You could change that to match your reproduction.
  5. Update npm/angular to fix it. I think you can do yarn tsc -w in there to auto recompile the Angular mount function.

Let me know if you need any more pointers.

@lmiller1990 lmiller1990 added npm: @cypress/angular @cypress/angular package issues CT Issue related to component testing routed-to-ct labels Feb 27, 2023
@mv740 mv740 mentioned this issue Feb 27, 2023
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CT Issue related to component testing npm: @cypress/angular @cypress/angular package issues
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(angular): mount cy-root in original location mv740/cypress
2 participants
@mv740 @lmiller1990