0
140
ViewsAngular 4 fixture component persists in DOM during Jasmine tests
When running Jasmine in real browser I noticed that TestBed fixture component isn't destroyed in DOM and persists after tests have ended:
Here's a tested component:
@Component({
selector: 'test-app',
template: `<div>Test</div>`,
})
class Test {}
And a test (plunk).
let component;
let fixture;
let element;
beforeAll(() => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
});
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [Test],
})
.compileComponents();
fixture = TestBed.createComponent(Test);
component = fixture.componentInstance;
element = fixture.debugElement.query(By.css('div')).nativeElement;
fixture.detectChanges();
});
afterEach(() => {
fixture.destroy();
});
it('should compile Test', () => {
expect(element).toBeTruthy();
});
Why Test component instance isn't removed from DOM and how this should be fixed?
Why are fixture components added to DOM at all? Can they be detached from DOM like $rootElement in AngularJS?
3 answers
Answer question0
Jasmine nor Angular will ever remove it automatically, maybe to help you to get more details about your test execution.
To remove it you simply use afterEach(...), like:
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
comp = fixture.componentInstance;
debugElement = fixture.debugElement;
element = debugElement.nativeElement;
});
afterEach(() => {
document.body.removeChild(element);
});
For none Angular users:
afterEach(() => {
document.body.innerHTML = '';
});
Above clears all default
<script>tags, but that does not matter (because they did already run, and Karma does never refresh the browser, at least not till all tests finish).
0
A more concise solution:
afterEach(() => {
element.remove()
});
Where element is fixture.debugElement.nativeElement
0
Please take a look at the following issues:
1) first of all you are calling
fixture.destroy();
in afterEach, so it's called after it section. I.e. in it section fixture is still not destroyed
2) by what code do you detect that element is still present in DOM? From another point of view: why that element should be removed by jasmine/browser (what reason should make jasmine/browser)? I could suggest the following usecases:
2.1) one component is used in another one and should be created/destroyed by some change. I.e. ngIf or ngSwitchCase:
<parent-component>
<child-component *ngIf="someChangeInComponent1"></child-component>
</parent-component>
or
<parent-component [ngSwitch]="type">
<child-component *ngSwitchCase="'something'"></child-component>
</parent-component>
2.2) routing is changed (but it's not a subject for unit-tests AFAIK)
3) current code receives the reference to DOM element only once. Should be something like:
beforeEach(() => {
...
element = ...
});
it('...', () => {
...
fixture.detectChanges();
element = ... // try to get element again <--------------------- here
})
4) if you are trying to find errors like ngOnDestroy() is defined but implements OnDestroy is not used then it's more a subject for npm run lint than for unit tests (please take a look at use-life-cycle-interface in tslint.json). After running npm run lint you'll just see:
Implement lifecycle hook interface OnDestroy for method ngOnDestroy in class ...
It's a good practice to have no errors not only for unit test but for tslint too.