SharedStylesHost isn't cleaning up styles between Karma test specs

🐞 Bug Report

Affected package

Latest

Is this a regression?

No

Description

Wheen testing components via TestBed.createComponent, Angular appends inline styles associated with the component via the SharedStylesHost service. These inline styles are cleaned up when the service is destroyed.

Unfortunately, these inline styles are never cleaned up in Karma unit tests. This appears to be because each SharedStylesHost service is never destroyed, apparently because each associated NgModule is never destroyed between specs. This isn’t a problem when you have <10 Karma specs, but when you have >100 , and each spec appends 25 <style> tags, by the 100th spec you have 2500 redundant <style> tags in your document head.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-testing-exxbrh (old version of angular, but repros on latest)

🌍 Your Environment

Angular Version:

Floating version of Angular 2 RC branch. Repros on latest.

[cexbrayat]

Until the fix lands, you can add to test.ts:

afterEach(() => {
  getTestBed().inject(ɵDomSharedStylesHost).ngOnDestroy();
});

Unlike the workaround mentioned above https://github.com/angular/angular/issues/31834#issuecomment-591366744, this only cleans the necessary stylesheets and not the global ones.

This speeds up our ng test task by 2-3x (from 120s to 40s on my machine) without breaking anything.

[elesueur]

@AndrewKushnir what’s blocking the MR in 38336 and resolution of this issue?

This issue is pretty significant and for large apps could have a MAJOR impact on unit test execution. An issue like this opened in July 2019 and still not resolved boggles my mind.