@HostBinding('attr.id') with dynamic attribute during testing conflicting Karma logic

[hodossy]

🐞 bug report

Affected Package

The issue is caused by package @angular/core, @angular/core/testing

Is this a regression?

No

Description

Creating elements that bind to the id attribute of their host from an input causes Karma to display all previously tested elements instead of clearing after each spec.

It seems the issue occurs when the property that is bound is set programmatically during the tests.

🔬 Minimal Reproduction

https://github.com/hodossy/ng-hostbinding-id-test-issue

npm install
ng test

🔥 Exception or Error

As it can be seen, multiple test elements are left behind, probably because Karma clears the elements by ID.

My expactation would be that Karma removes the previous tested element and only the last one is visible after the test suite is run.

🌍 Your Environment

Angular Version:

Angular CLI: 8.3.25
Node: 10.16.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.25
@angular-devkit/build-angular     0.803.25
@angular-devkit/build-optimizer   0.803.25
@angular-devkit/build-webpack     0.803.25
@angular-devkit/core              8.3.25
@angular-devkit/schematics        8.3.25
@angular/cli                      8.3.25
@ngtools/webpack                  8.3.25
@schematics/angular               8.3.25
@schematics/update                0.803.25
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant?
I had no time to test with other browsers than Chrome, but I think it should not be specific to Chrome

[flemgs]

I am facing the same issue here.

[andy-bond]

I ran into this issue as well except I am using Jest & Angular Testing Library.

I worked around it by using a "wrapper" element to be rendered - rather than directly rendering the Component under test.

I believe this issue is occurring because of this line in TestBed that is setting the ID of the component under test to be used in teardown later.

---

For those using Angular Testing Library, the change on my end was pretty simple.

Instead of doing this:

await render(MyComponentUnderTest, { 
  excludeComponentDeclaration: true,
  imports: [MyComponentModule] 
})

I instead do this which automatically creates a "wrapper" around the component under test:

await render('<my-component-under-test></my-component-under-test>', { 
  imports: [MyComponentModule] 
})