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.

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

Component tests fail when angular-query is used in the component #8115

Open
ekrapfl opened this issue Oct 1, 2024 · 1 comment
Open

Component tests fail when angular-query is used in the component #8115

ekrapfl opened this issue Oct 1, 2024 · 1 comment

Comments

@ekrapfl
Copy link

ekrapfl commented Oct 1, 2024

Describe the bug

We are using Angular Query in our project, and we have noticed that it can interfere with our Cypress component tests in some cases. To illustrate this, we have made a simple modification to the Cypress component testing sample app for standalone Angular. If you pull it down and run the test-component spec, you will see that none of the tests pass. It appears as though change detection is not running properly once the TanStack Query is injected in the component file. To see the tests work again, comment out the query property in test-component.component.ts.

Reproduction fork

Notes:

  • There does not appear to be any issue when running the app, only when running through Cypress component tests.
  • I have tested this in an ultra-simple repo with nothing but a simple component and a Cypress component test as well (if you would prefer this format): simple repro
  • This bug has been cross-posted to Cypress as well.

Cypress Version

13.15

Node version

20.11.0

Your minimal, reproducible example

https://github.com/ekrapfl/angular-plus-tsq-cypress-fail

Steps to reproduce

cypress-component-testing-apps Reproduction fork

  • cd angular-standalone
  • npm ci
  • npx cypress open
  • Run Component tests in the browser of your choice
  • Run the tests for test-component

Simple Angular Repro

  • npm ci
  • npx cypress open
  • Run Component tests in the browser of your choice
  • Run the tests for fail.component

In either repro, notice that change detection is not properly fired, and the UI does not update appropriately. In either repro, comment out the TanStack Query in order to get the tests passing again.

Expected behavior

I would expect that injecting a simple TSQ would not affect change detection in Cypress component tests.

How often does this bug happen?

Every time

Screenshots or Videos

image

Platform

  • OS: MacOS
  • Browser: Chrome, Edge, and Electron
  • Version: 129, 129, and 118

Tanstack Query adapter

angular-query

TanStack Query version

v5.56.2

TypeScript version

v5.5.2

Additional context

No response

@ekrapfl
Copy link
Author

ekrapfl commented Nov 12, 2024

Is this on anyone's radar at all? Just curious.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants