Glob Imports Exercise

[00:00:00]
>> So your mission is, we got this folder here with characters. And we got generate-characters, that's fine, that's how I made them. But then we've got this render-character test. And what we'd love to do is, actually, let's see. I would go with the string, if I were you.

[00:00:18]
There is a, yeah, this render character, right, takes a character and just makes it a very pretty string, right? What we wanna do is we wanna get all the JSON files in this directory, right? And honestly, as long as they like, you can even do something that's very simple.

[00:00:35]
Cuz we can literally say for each one, we just really want expect that given one after we glob import, right? Expect that character, To match snapshot, right? That way I have a whole bunch of data. As long as my function doesn't change the way that it's formatted, it should work, right?

[00:00:59]
But what we really want to do is we want to glob import all of the JSON files that we have in there. And basically for each over them or for loop over them, and just have it generate the test based on. So what I'll do a lot of times when I get a issue from support, here's a use case that broke the UI in a new and interesting way.

[00:01:18]
I will almost always grab the JSON of the output of that API response, and just toss it into the folder, and now I have yet another test case to make sure that my unit tests parse a given piece of data the way that they're supposed to. So your mission is to use import.glob.

[00:01:32]
I would use the eager version if I were you. If you hate yourself and wanna resolve some promises, that's cool too. But for the most part, what we wanna do is we want to glob over all the characters in this, all the JSON files in here, and basically iterate over that array.

[00:01:47]
And just make sure all our snapshots match, and then you could delete one, add one, whatever, and you'll see that your test suite will kinda grow and shrink as you want. I use it for fixture data, I use it for logos, anything I'm iterating over that's based on the file system, right?

[00:02:03]
I think the import metaglob is super useful. You might have other use cases. Those are the use cases I need it for. You might even be thinking, I could use this in my app. Or my goal is sometimes, even if right now you're, I don't know, and then two days later from now, you feel like, yeah, I can solve that.

[00:02:16]
Or six months from now, a new problem comes up, I can solve it with this, and you save a bunch of work, then my job is well done in this case. But for now, your job is to match some snapshots on some JSON files. You have to struggle a little bit with this one.

[00:02:29]
Challenge mode went up a little bit. And so, yeah, we'll reconvene, and then we'll talk about it. One thing we realized as a group was that the dynamic input, I couldn't find it fast enough because in a dynamic import, it can't actually tree shake it, which was a decision I made.

[00:02:54]
It was a game time decision, but didn't go well. But If we do the static import on a JSON file and we flip over to the code, you can see that it is literally inlined at this point. So the tree-shaking on JSON imports does work, but not with a dynamic import cuz I've tried to do it on the fly to just make a chunk so I could find it faster.

[00:03:20]
That didn't go well for me. All right, so back to the main event. We wanna get those tests working. Yeah, that was just correcting my own mistake from earlier before we jump back into it. All right, so with the test, relatively straightforward. We can sort of variable, we can say const characters =, meta.glob, and we'll grab this directory.

[00:03:53]
You can do subjects that don't have them. And what we wanna remember to say is that eager, Is true, right? And now what we should be able to do is, and it all depends on, I will get the full path name in this case, but it depends on if you wanna keep it or not.

[00:04:17]
But let's go ahead. Let's get rid of this for a second. And we'll say, again, it's an object where the key is the path and the value is the result. So we'll say path and character in this case, seems good. I'll do Object.entries, that'll give me literally what I'm looking for.

[00:04:41]
Object entry is of those characters. And then what I should be able to do is I could say, I could slice off the.json if I really wanted to, I don't right now. And what we'll say is actually renders, this case will say the path. Cool, and now we'll just say, const result, Render character.

[00:05:19]
Nope, not render from sass. That is not what we want. We want that render character. There we go, with the character. And then we would just want it to, We'll just say to match snapshot, right? Cool, and then we can do it down here. We'll just say NPM test, right?

[00:05:47]
And we've got those snapshots. And now you can see that it's basically iterated all the file, created snapshots for each of those. If they change, we will know. If we add a new file in there, it will add it to the collection as well. So theoretically, a lot of times I will get not all the APIs that I get to work with are nice.

[00:06:06]
So I have a bunch of functions that will take a very deeply nested object and make it something easier to use. And a lot of times I just wanna make sure that if I'm refactoring or changing something, that I'm not actually changing the end result, right? Or in a meaningful way, I wanna see it.

[00:06:20]
So this allows me to go through every single edge case I've collected over years and make sure that the function is still doing the same thing and I can kinda just keep that collection of the fixtures in that case. Or the other example, so I was just showing a bunch of logos, what have you.

[00:06:34]
But if you want to basically not have to keep track of everything in the directory and you just wanna basically react to everything in there as it changes, the import metaglob is super powerful and allows you to do that. And again, you probably have your own use cases.

[00:06:47]
Or if you don't, at one point a use case will emerge and present itself to you, which this becomes a relatively elegant solution.