Testing Components & @defer Blocks

[00:00:00]
>> Alex Okrushko: Final one is through fixtures or harnesses. Angular provides a CDK testing harness for certain things, and we can create a harnesses ourselves as well. And I'm probably not going to do it. I'm going to leave it for you to try if you want to at home, but the main idea is we can wrap certain things in the harness and this harness knows how to interact with this component through locators for this, for example, we say that this is the host selector, right, so this would be the harness so if we want to get title text, right, it's going to.

[00:00:45]
We're going to use these functions and call it in our test itself. I had to do a few of the patches here because our JSDOM is not very happy that it's missing some of the things like pointer event or mouse event that CDK expects, if you're using Playwright with a real DOM, that shouldn't be an issue. Our main idea, we create the harness for the fixture, we have this fixture, what's our fixture is our component.

[00:01:28]
And then we interact with the harness itself, for example, we say get the like button text, right, and it contains, for example, this empty heart first, and then we through the DOM interact with this, for example, click like. And then it should contain fulfilled heart. So that's harness, test harness is really powerful, really useful, especially if you have more complex components or you have parent components that you unit test, but child components, you really don't care what they're doing, but they're still there, you can create the harness for them and set something for them.

[00:02:13]
At the interactions with them. Last thing now, promise the last thing. Yes, promise the last thing. We can, you know, defer blocks are tricky, right? But Angular also provides utility ways to access those deferred blocks in tests. And the way you can do that is you can only fix yourself on the fixture, so fixture is our component when we create the component.

[00:02:53]
Right, that becomes our fixture. In the fixture itself, we have this access to get deferred blocks. And you might have a few deferred blocks, so you can access a specific one, you can access them only by index. That's the way API works today, so in this case, our like map block was the first one, for example, so defer blocks. And get deferred blocks is how we get them now, how we can mount them.

[00:03:28]
We get that block and we say dot render. And we render its state. So in this case, defer blocks state complete. Where is it, there you go. The deferred blocks state complete. And this will make that block visible. Now we can verify like the final state and our test context will have like this map loaded, for example. So we can interact with deferred blocks, deferred blocks are new and cool, and Angular provides utilities to access those deferred blocks as well.

[00:04:13]
And Vitest, we can use Vitest to test them as well. So that's testing, testing uncovered very briefly, there's again a lot more to cover in details. I'll leave it up to you to dig through some of this. Hopefully this will be enough information to not be afraid to go into the testing, and I encourage having unit tests, you can also use instead of JSDOM Playwright for certain things, which I also encourage to investigate further.