Learn How to Unit Test Angular's 17 Defer Block

[@CodeShotsWithProfanis]

It's always a challenge to create a video for a feature that is currently under development preview. Having said that, the default `DeferBlockBehavior` changed from Manual to `Playthrough` via this commit github.com/angular/angular/pull/53956. It's a great change since in most cases, as you will see in this video, the Playthrough is the winning option.

[@paulh6933]

Sorry, let me be a little more explicit. I think testing has been in the background, not much attention to it. Now we are seeing Cypress and Playwright making large strides. We also saw standalone. All of these making testing easier and more "enjoyable" (yea that might be a stretch). So I am eager to see more testing enhancements.

[@madpwnz]

Cheers for the video mate.

[@balintcsaszar6831]

Nice, and do you perhaps in idea how we can mock components inside @defer blocks? When I talk about mocking components, I don't want to mock child component deps as well. I hoped ng-mocks helps me but not really

[@CodeShotsWithProfanis]

Can you elaborate a bit more with an example?

[@balintcsaszar6831]

@@CodeShotsWithProfanis @defer { } @placeholder { } where the parent and the child are standalone, child has a service dependency and when I'm testing the parent component I would like to mock the child ofc because it is unit test. Before I used MockComponent() from ng-mocks. Is it understandable now?

[@CodeShotsWithProfanis]

@@balintcsaszar6831 Can you try this? await TestBed.configureTestingModule({ deferBlockBehavior: DeferBlockBehavior.Playthrough, imports: [ParentComponent, MockComponent(ChildComponent)], }).compileComponents(); It seems that ng-mocks works fine

[@paulh6933]

Are you using the new @web/test-runner?

[@CodeShotsWithProfanis]

In that video I am using karma but you can check this short video were I use web-test-runner kzbin.info2lLS6KEd_14

[@paulh6933]

Thanks I heard Karma was being deprecated. It will be interesting to see more on this topic

[@CodeShotsWithProfanis]

​@@paulh6933 There is also the alternative of Jest which is supported by Angular. There is a build for that. I could generate a video explaining this transition