Testing Buttons

[00:00:00]
>> Speaker 1: So we have a collection of little examples in this directory called element factory, which originally was all going to be buttons, so it was called button factory, if you see a reference to that, but then I made other stuff too. So we'll open that up in the terminal, and we're gonna start just by looking at the button example.

[00:00:20]
And this one is just raw JavaScript, vanilla JavaScript, DOM manipulation, where we will go ahead and we will create a button, and we will give it the text, then click me, we'll add an event listener. If someone clicks it, we will change the text content to clicked, and we'll hand that DOM node off to our tests, right?

[00:00:50]
Not the most sophisticated component in the world, but we'll demonstrate our point. So here we've got some work for me to do here, which is it should create a button element, right? So real quick in this vitest.config, you can see I've got happy-dom set up. Great, we will play around with some Svelte and React components later, so those are set up in there.

[00:01:15]
But this is the only thing, this is the only prerequisite for anything we're about to do here. Cool, so now I'm gonna do, let's try something very, very simple for starters.
>> Speaker 1: Create button. I don't actually know if this one's gonna work, to be,
>> Speaker 1: Let's go ahead and run this.

[00:01:58]
Fun fact, if you run npm-test, It will run all the ones, right? If you run npm test button, it only ran two of them, which is alert button and button, right? So you can scope it down a little bit. Let's get rid of that to do here, right?

[00:02:18]
And so right now let's to do these just real quick. We are creating a button as an instance of HTML element, everything is great. If, for example, I get rid of this line, I think I might have to turn this off and turn it back on. It fails because it doesn't know what document is, right?

[00:02:44]
That is all that that line is doing. It's just simulating all the DOM APIs, document, window, navigator, local storage, session storage, stuff with, cookies, stuff along those lines. It's basically giving you a spec compliant version of the DOM. If your tests are failing for weird reasons like this, that's the one liner you need.

[00:03:06]
It's gonna be different for other frameworks, but that's your issue. And then you probably have to quit and restart the, all right, so it passes, yeah.
>> Speaker 2: Does happy-dom or jsdom have to be NPM installed separately, or does the test take care of it?
>> Speaker 1: That's a great question.

[00:03:24]
Yes-ish, so the question was, does jsdom have to be installed as a dependency? Yes-ish, which is yes. If you don't, and you have it in there, vitest will go like, hey, you don't have happy-dom installed. Do you want to install it now and you hit the Y key or the enter key and it installs it for you, but the end result is yes.

[00:03:49]
That way you don't have both of them in there too if you don't need them.
>> Speaker 2: And one other setup question, if we were using Vue in vitest, would we need an alternate to jsdom in setup files?
>> Speaker 1: No.
>> Speaker 1: That's easy. That setup files, we're not actually even getting to yet.

[00:04:11]
In fact, for our purposes right now, I could theoretically take that line out. We'll talk about that one later. But in terms of right now this will basically work with anything that works in the DOM. So even this line is framework agnostic, but we're just not using it yet.

[00:04:36]
So at this point, I could grab a React component. I could grab a Svelte component. I could grab a Vue component. The only reason we don't have a Vue component in here is cuz I've never used Vue in my life. I work with Svelte every day. I have done React forever.

[00:04:51]
There's no Vue in here because I don't know how to do Vue. But everything we're doing will, the fact that we touch stuff with different frameworks, all of this will apply to Vue in Angular as much as it applies to React and Svelte. In this case, on the super simple example, we create a button, as you can see in my first test, it is an element.

[00:05:15]
>> Speaker 1: In fact, it's a button element, right?
>> Speaker 1: I think, if I'm not mistaken, that's all caps. In fact, the tag name on it is button. Do we need to be convinced any further this is a button? Have I convinced you that this is a button? Great, okay, all right, so now we want to see, it should have the text click me, okay.

[00:05:58]
>> Speaker 1: That's interesting so we can say expect,
>> Speaker 1: To be, click me. All right, we're killing it.
>> Speaker 1: All right, now we're up to the bonus round here. Should change the text to clicked exclamation point when clicked. We are gonna do this the stupidest, dumbest way you shouldn't do it, and we will build up from there.

[00:06:33]
So if you tune out now everyone will ridicule you when you do what I'm doing now. So we can say button = createButton, and then we can go ahead and say button.click. So we got the arrange, we got the act, and we expect button.,
>> Speaker 1: Exclamation point. Cool, so there's a lot that we can do better here.

[00:07:15]
But I wanna take a moment to celebrate the small wins that we have. We rendered a DOM element, we verified some stuff about it, we quote unquote interacted with it, and then we verified that it changed as appropriate, right? Are we convinced we could retest a view application just yet?

[00:07:37]
We're probably not convinced, right? But do we feel like we're making baby steps towards it? I think we do.