question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:29
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

15reactions
marekwalachcommented, Jun 26, 2019

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.

2reactions
andrewseguincommented, May 20, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

DebugElement.query does not work with elements added ...
I have an app that is using ngx-bootstrap to show a tooltip on mouseover. I want to test that the content, which is...
Read more >
Getting to know fixture.debugElement : Angular Unit Testing
We can use below ways to get it in unit testing: fixture.debugElement.query(By.css('#shan')); fixture.debugElement.nativeElement.querySelector('#shan') ...
Read more >
DebugElement - Angular
This map is derived from the className property of the DOM element. Note: The values of this object will always be true ....
Read more >
How To Get Started with Unit Tests for Angular - DigitalOcean
Angular also provides utilities like TestBed and async to make testing asynchronous code, components, directives, or services easier. In ...
Read more >
Testing Change Detection • Angular - codecraft.tv
We can get references to other child nodes by querying this debugElement with a By class. The By class lets us query using...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found