await deferBlockFixture.render hangs when interval is subscribed #55235
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
I wrote a unit test for a component that has deferrable views, but it failed due to an unexpected timeout.
I found that await deferBlockFixture.render hangs the test if the target component subscribes to the interval Observable.
import { Component } from "@angular/core";
import {
DeferBlockBehavior,
DeferBlockState,
TestBed
} from "@angular/core/testing";
import { interval } from "rxjs";
describe('ComponentA', () => {
it('should render a defer block in different states', async () => {
TestBed.configureTestingModule({
deferBlockBehavior: DeferBlockBehavior.Manual
});
@Component({
template: `
@defer {
Loaded
} @placeholder {
Placeholder
} @loading {
Loading...
}
`
})
class ComponentA {
// ⬇️ Comment this out to pass the test.
_subscription = interval(1000).subscribe();
}
const componentFixture = TestBed.createComponent(ComponentA);
const deferBlockFixture = (await componentFixture.getDeferBlocks())[0];
expect(componentFixture.nativeElement.innerHTML).toContain('Placeholder');
await deferBlockFixture.render(DeferBlockState.Loading);
expect(componentFixture.nativeElement.innerHTML).toContain('Loading');
await deferBlockFixture.render(DeferBlockState.Complete);
expect(componentFixture.nativeElement.innerHTML).toContain('Loaded');
});
});Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
npm t
> test-angular@0.0.0 test
> ng test
✔ Browser application bundle generation complete.
06 04 2024 14:42:55.594:WARN [karma]: No captured browser, open http://localhost:9876/
06 04 2024 14:42:55.609:INFO [karma-server]: Karma v6.4.3 server started at http://localhost:9876/
06 04 2024 14:42:55.609:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
06 04 2024 14:42:55.613:INFO [launcher]: Starting browser Chrome
06 04 2024 14:42:56.800:INFO [Chrome 124.0.0.0 (Windows 10)]: Connected on socket -tsxvNPo0hzZF0BJAAAB with id 47395465
Chrome 124.0.0.0 (Windows 10) Defer Block should render a defer block in different states FAILED
Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)
at <Jasmine>
Chrome 124.0.0.0 (Windows 10): Executed 1 of 1 (1 FAILED) (4.391 secs / 5.012 secs)
TOTAL: 1 FAILED, 0 SUCCESS
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 17.3.3
Node: 20.11.1
Package Manager: npm 10.5.0
OS: linux x64
Angular: 17.3.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.3
@angular-devkit/build-angular 17.3.3
@angular-devkit/core 17.3.3
@angular-devkit/schematics 17.3.3
@schematics/angular 17.3.3
rxjs 7.8.1
typescript 5.4.4
zone.js 0.14.4
Anything else?
No response
Metadata
Metadata
Assignees
Labels
Type
Projects
Status