Testing Computed Signals

[00:00:00]
>> Alex Okrushko: Let's quickly add this one too. So event card here, we're going to add a test for the event card features, events, event cards here, so we're going to next to this. We'll do event card spec.ts. All right. So let's see how we can do this thing. And there's multiple ways to do it. I'm going to show you probably one of the simplest ways.

[00:00:51]
The simplest way to do it is when we create, we create component manually, so we can compile components and we'll just create component manually. In this case, my event card requires a few things. It needs my title and my image, right? And event card does need ID probably. My event card, does my event card need that event card?

[00:01:28]
No, title image are the only ones. Oh, there is, does it, is ID required? Let's see if that was going to work because we are not providing that. So this is the, but this is we're manually setting the inputs on the component ref. I'll show you this. This is the simplest way to do it. I would probably create a wrapper component and call that component from within because I think right now it's actually missing that ID that's required is not there.

[00:02:06]
I'm going to check it in a second, but anyhow, we provide this inputs. We have this fixture, right, which is our event card itself. We set the inputs to this, and then we expect, for example, this is going to be toggles the favorite state on click, right? So we need to click it and then it's going to like, this is a new API within Angular called fixture when stable.

[00:02:38]
So this fixture when stable allows to Angular to run its own change detection and kind of make sure that all the things been done with this. They recommend to use this. There's a few caveats. Sometimes we'd still need to call things like fixture detect changes manually. So there's certain conditions where we do need to still force the change detection, but in this case, you can handle it just by awaiting to be stable.

[00:03:23]
All the signals are set, all the other things are also handled. Now we find all the buttons here and I'm looking for the button that has a like in it. If it's not there, I'm going to throw the error, of course. Then I'm going to click that button. And then this is again, this is manually clicking. We're basically clicking, forcing clicking event, not through the DOM.

[00:03:49]
We'll make sure that it gets stable again right when we click, and then we'll make sure that it has the like one, for example. And here also like calculate days until correctly. It's a lot of c's. All right. We'll set some future dates. Future date will be plus five days, and we make sure that days until it's five.

[00:04:24]
Let's see if this works. Once again, can run the test. One failed, good. Yeah, there you go. That's what I was expecting. I'm happy it caught that, so input ID is required, but no values available yet. That's why we also need to set the ID here. I'm happy that this is actually happening. So there's two options to fix this, I think.

[00:04:56]
I think the reason why it was working when I created the instructions is because this was not required. Then it will work, but it should be required. So now we can set the spec and let's see. And looks like event card spec, event card spec is passing. There you go. Event card spec. All right. So it's passing.

[00:05:32]
So we can see, right, we can set the inputs. This is the dates and things like that and test it, you know, test it.