Check out a free preview of the full Enterprise UI Development: Testing & Code Quality course

The "Asymmetric Matching Exercise" Lesson is part of the full, Enterprise UI Development: Testing & Code Quality course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to implement tests to ensure the randomly generated UUIDs exist and are well formed. Default packed status and removal behavior should also be tested.

Preview
Close

Transcript from the "Asymmetric Matching Exercise" Lesson

[00:00:00]
>> We're gonna do an exercise and that one is inside of I believe great expectations. There's some bonuses and some other like fun stuff that you can see if you want to see an example of me using the various. So here I'll create a bunch of people. This has a uniquely generated ID.

[00:00:23]
It's like a bonus in here, but you can see that I can either do it all one by one, or I can be like, listen, I want the string to start with CS dash, and that's what my generator should do. I don't actually care about any of the rest of this, but they should be cool.

[00:00:41]
Or I can say it's just a object containing list. There is a lot of options of what you can do here, this is kind of a fair example, but what I wanna challenge you with is we have got this little Redux reducer, which will show up various other places before as well, and its using a UUID.

[00:01:01]
So, we could just make sure that the name is the right thing. We have another test to make sure that pact is the right thing for my packing list, right? And just kind of uniquely go and grab each one of those properties and make sure it is what I think it is, however, you would have to add an expectation for each one, right?

[00:01:24]
One of the nice things that you could do is you could theoretically have a test. And again, this is walking that fine line of clever, but I think it's clear, where it's like, cool, I have a copy and paste. Some of my best tests are I took a bug report.

[00:01:40]
Took the problematic thing, made a failing test to make it pass, right? I can be like, hey, here are the properties I don't care about and just do a spread operator and replace those with these expect dot, anything's or anything along those lines. What we wanna do is we wanna get these tests marked to do, to pass, right?

[00:02:04]
And the tricky part here is that we wanna make sure that those randomly generated UUIDs are not breaking our test. So we expect that the object to equal that will fail, right? Because one we don't know the ID yet. And two is different every time so we can't even take the results.

[00:02:23]
So we want as long as ID is a string, that's fine. But I do want the rest of the things that I am and I wanted to prefix the right way and stuff along those lines, but the important thing is if I add a new item to my packing list, it says my iPhone charger I'm expecting that the thing that got added to my Redux store is my phone charger.

[00:02:45]
Right? And if the rules of my application are, it's false by default, I'm expecting as false before what the idea is I don't care. Right? And so, I would play with the asymmetric matches in this case, and to see what is one of the more elegant ways that you can get this off.

[00:03:03]
And again, this is a very simple use case, but if I think about I'll show you some light fixtures from the app that I work on I've got some of these giant JSON blobs, right? toMatchObject or saying for the parts that can be variable time or something along those lines to uniquely say, I don't care about these things, but I do care about everything else is really powerful to having a test suite that you can rely on.

[00:03:26]
Mark.
>> Is there any real world example where the set timeout is used and how to identify the anti pattern?
>> We'll do a real world one later, but I'll just say right now toast notifications that are supposed to vanish from the DOM after a certain amount of time.

[00:03:42]
Right, other banners, a completed, anything that's, particularly when we get to the DOM, things that appear for a little bit and then vanish a loading indicator, right? There's lots of stuff like that where loading indicator vanishes when the thing is done, but a toast notification, or a banner, or some other thing like that might appear for specifically five seconds and then should be off the page.

[00:04:10]
That's when we have to manipulate time a little bit to, we don't wanna make our test wait. Right? Because then like one, you got to get adjust right. And then two, that your test is waiting, which makes your test slow. So at which point, we'll be like, okay, that banner is only supposed to be there for five seconds.

[00:04:28]
Cool, move time forward five seconds and verify that's not there. So there are cases particularly when we get to the more from the user perspective unless where we're just putting timeouts in our like functions for funsies. Or, if you had a function that was supposed to call a callback, and you wanted to verify it a unit test, I've done it.

[00:04:54]
Right. I have to look a lot of times where I choose to manipulate time in cases where I have a function that does relative time, right? From some specific rules and so it does like the date, subtracted from Date.now() to get the duration, that means my test would change every single time unless I purposely make that first date exactly, so not in the future.

[00:05:22]
So, what I will use is the fake timers in my case to freeze time or set the system clock to a certain current time and then put in something six months back and say like six months ago, and stuff along those lines. So rarely, but it's one of those things which is do you need it often now?

[00:05:41]
Do you need it when you need it absolutely

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now