Validating Attributes & Styles

[00:00:00]
>> So yeah, we've got all that in place and we can test all that. We can do other tests while we're in here and just kinda like all sorts of fun stuff. Let's see, that's just like does it have account? Let's make another test because it's like, could you jam a whole bunch of expectations into one test?

[00:00:19]
Great, but then when it fails, now you gotta figure out why. Versus if you had a story called, with text too long and your CICD breaks and it says text area text too long fails, you know what it might've been, versus you have one thing that's got like a thousand things now you gotta figure it all out.

[00:00:40]
So we'll say X were not length too long nope. All right, so we got that in place and we'll say that the args has a max length of, I'll stick with 104. I don't know why I'm committed to something I hate. So now what we'll say is that the console input value is H plus A repeat 140 times plus Y exclamation point a very long you know what even better.

[00:01:27]
Cool so, by definition be 142 as well in there. And yeah, like you could theoretically start on the variable and keep it, but let's not get carried away here. And so now what we can do is, let's keep a version of that initial test right, I don't hate that idea in here.

[00:01:52]
We do need to bring in the the act of typing, because otherwise SAS will fail for a very different reason. And then we'll also say that we expect the text area to have the ARIA invalid. I wrote that code. I know that it will put an ARIA tag on there that should set invalid to true, because I found out the hard way where it's not technically invalid in the DOM and I got angry.

[00:02:21]
[LAUGH] That's how I know there's an ARIA tag in there now. And I can say, I can even do stuff like, remember in light mode that it didn't work. So hopefully my test, I know that it should apply this class of ring danger 500, right? Now, I didn't see it, and so that's a different story to look at in a second, but hopefully a test should fail otherwise, I'm gonna be scratching my head because I didn't see a red ring.

[00:02:52]
And let's start with those. It's in dark mode, so theoretically it will fail this time, or it will pass. All right and so you can see that types of like with a longer string you can definitely see the act of typing so they are real-ish user directions you can see that like it does have the right length in there that the ARIA tag is actually invalid now that it does have that red ring.

[00:03:28]
The class is there, I don't know why it's not red. We can deal with that momentarily. I might just see my class order. We'll talk about in a second. I have I have an idea that is a distraction. I'm not ignoring it, I'm just trying to stay focused for a minute here, cool.

[00:03:46]
So we can like, here's a test where we're gonna hopefully catch it if not. You can even say expect the text area Let's say two, That's the count really so that we can expect the count to turn red, I don't necessarily off the top of my head know the exact syntax for the border color at test, that can't be the right color we'll find out.

[00:04:26]
So yeah, the rail color, this is about this color here. You can actually say like class aside is the color that I expect right? And this is something I would store in a variable somewhere generated from the design system, be like, all my blue buttons the color blue they're supposed to be?

[00:04:44]
You can actually write something here as well. So let's actually grab this color. I was like, yeah, there's no way it's that color. So we're gonna expect the detects area and I don't know I'm like, before it's kinda live coding, I'm truly live coding. Cuz now it's like I'm bothered by this yeah, border color.

[00:05:12]
But that one does fail cuz it's not in fact red. Here is my quick hypothesis that it's not important, but we're gonna talk about it anyway 'cause again, just not dealing with it feels like irresponsible as a professional. The classes can sometimes conflict with each other, CX will just kind of like put them on top of each other and hope for the best, but if you have two classes that are styling the ring, it could be like, the other one could win out.

[00:05:46]
So, there is a useful tool, which I believe I have installed in package JSON. This is Tailwind specific to be clear. No, that's all it's called, Called to win the merge, if not all MPM install it nope which is basically it tries to de doop and actually take the order seriously, and stuff like that.

[00:06:13]
Yeah, well, we'll try this for a second so you can use this tw merge instead and that will try to like de-conflict your tailwind classes. I hate this where it calls it tw merge so a lot of times i'll do it as merge because that's me as a person that you're all learning about simultaneously cool, cool, cool.

[00:06:40]
I will look at that later. It's not super important why the classes are not totally silent but it does validate that the system works right like me going into a weird like styling issue, not the best use of our time, but maybe I did it intentionally to demonstrate what a real life situation might be is totally planned.

[00:06:59]
It's very cool ,and there are other things that we can do in here as well just to kinda show you and again like you could do all they have all the different nuances and like what everything you know from every component testing thing that like either on front of masters you've done applies here but it's nice to see it and get the sense and the step through stuff.

[00:07:19]
It's like, I like writing component tests now there, I said it. Actually why don't you do this one as a challenge because I looked at my notes it says quick exercise you do this one. So I'm gonna listen to past me and what he said, you know it'd be great shouldn't be able to type in a disabled one Georgia, right could we write a play test that says like hey, this thing should literally, if it has the prop disabled, it should be disabled, right?

[00:07:43]
As a bonus, even the act of trying to type in it should not change the content of it, right? Or anything you wanna try with the disabled one, if another one makes you happy, but looking at my notes, it says, quick exercise. Can you write a test to check for the following?

[00:07:57]
Its disabled text area is in fact, disabled. Typing the text area does not change the value of the text area. All right, so some base and yeah are we technically testing built-in DOM functionality? Sure but I think it makes our point so let's go with it. So in this case, we're gonna say play.

[00:08:24]
We'll have an async function here. Don't know what I typed before to well. Fine, whatever, we can expect to be disabled that seems to make sense. If you pass this table that should be beaut. And somebody says they feel stupid, but honestly, we've all been bitten. We've all been bitten.

[00:08:43]
Like we know, sometimes these so many tests are great. And we'll say a wait, we'll say user event to type something in there. But then we should expect it not to have any value because it was disabled and you shouldn't be able to type into it. Right, and even little stuff like that first of all, not that hard to write, but then also we can go in there the test automatically runs even the act of looking at it runs the test, right?

[00:09:05]
And we can see that everything that we tried, like executed like it typed the character found the thing and tried to type into it. Right, nothing changed, right? So we get that initial validation in there as well.