table[mat-table] doesn't allow debugElement.query to find directives inside it

[Goodwine]

Bug, feature request, or proposal:

Bug: table[mat-table] makes testing hard because it doesn't have a way for getting debugElements to be queried.

What is the expected behavior?

fixture.debugElement.query(By.css('*')) should find directives inside a mat-table

What is the current behavior?

fixture.debugElement.query(By.css('*')) only finds table[mat-table] as a DebugElement but it can't find any other debug element that's a child of the table

What are the steps to reproduce?

https://stackblitz.com/edit/angular-testing-template-4n6yno
This has 2 describes: 1 with table[mat-table] (normal table) and another with mat-table (flex tables)

What is the use-case or motivation for changing an existing behavior?

Testing is hard otherwise, my work around has been overriding the module, remove the directive, make a fake directive that has @HostBinding('click') click() { capturedInstance = this; } and test with that.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

6.0.0

Is there anything else we should know?

As implicitly mentioned above, <mat-table> works OK, the problem seems to be on how <table mat-table> renders the rows which seems to be with createEmbeddedView

[RomanDeNu]

I too am having this issue. Got this working by putting the id on the mat-cell

[danielmoncada]

Having the issue here as well. Any plan on fixing this in upcoming releases?

[jtxyz]

It seems likely that this is due to _applyNativeTableSections() using the document API directly to create the sections: https://github.com/angular/material2/blob/0db904418d070809a04cf54e57ad2a3a12b6ef98/src/cdk/table/table.ts#L992-L1011

[zoltanzseli]

Having the issue here as well. Any plan on fixing this in upcoming releases?

+1

[andrewseguin]

I spent some time looking into this and I've come out a bit puzzled on why this is happening. There are very few differences between <table mat-table> and <mat-table>, so I suspect it may be related to _applyNativeTableSections as mentioend by @jtxyz. I wish I could spend more time on it to find the root cause, but we're a tight on resources and have a few higher priority things we need to focus on. It would be extremely helpful in someone in the community could spend some time looking into it.

[Phylu]

As a workaround, I am currently using the following: fixture.debugElement.nativeElement.querySelectorAll('*');

[marekwalach]

Still not fixed (8.0.0). It blocks any real tests. I have other components inside cell's and I need test if there are where they should and if they have input values as expected. Can not do it without debugElement.

Any hopes for fixing it? It is 6 months old bug.

[JohnYoungers]

Revisiting just a short 10 months later: is there any decent way to get at the directives in the table?

I need to validate a matToolTip is being set correctly, but since it doesn't render anything I'm having a hard time determining how to test it

[thesayyn]

Revisiting just a short 10 months later: is there any decent way to get at the directives in the table?

I need to validate a matToolTip is being set correctly, but since it doesn't render anything I'm having a hard time determining how to test it

You just have to query it in the global context. eg by using document.querySelector

[JoepKockelkorn]

I'm still having this problem in version 11.0.3. Got around some of it by using TestHarnesses, but now I want to test routerLinks on a row or an anchor element in a cell. Created a stub for the routerLink following the guide and then query for it in the test using By.directive, but no results. So I'm unable to test code inside the table body properly.

[TroyLDay]

Ran into this today. Phylu's suggestion is an easy workaround.

[adamicov2]

Angular 11
I am getting into the same problem. Any updates on this?