Is it possible to test a grandchild component in angular tests?

Question

Right now we are using karma testing to check for existing buttons in a component, the thing is the component displays the buttons as the child of a child.

what we are testing is:

ProductNavComponent
\ NavComponent
\ ButtonComponent

we want to test the button component inside the test component, I've tried using await component.findByTestId('import-nav-btn') and await component.queryByTestId('import-nav-btn') but it throws this error in which shows the component html error image and does show the button I'm trying to test error image shown so why is unable to find the button?

Answer 1

You're probably using a library to be able to use component.findByTestId('import-nav-btn') or component.queryByTestId('import-nav-btn');. I am thinking it is the Testing-Library.

Try changing:

<button
 data-test-selector="import-nav-btn"
 ...
>

To:

<button
  data-testid="import-nav-btn"
  ...
>

Because I see them using data-testid instead of data-test-selector here: https://testing-library.com/docs/queries/bytestid/.

That being said, I think you can use Angular's native fixture to get a handle on the elements as well.

const button: HTMLButtonElement = fixture.debugElement.query(By.css("[data-test-selector='import-nav-btn']")).nativeElement;