Tools for the Course

[00:00:00]
>> Because this is not necessarily a course on any given technology, I tried to, but we have to use some kinda technology, right? Because even, as Mark knows, not using your framework is a choice in and of itself [LAUGH]. So I tried to play to at least some kinda common denominators.

[00:00:16]
The, one hill that I will die on, is I'm just gonna use TypeScript the entire time, right? I'm not going back to writing JavaScript. I'm not doing it, you can't make me. Every time I try to put together a more beginner-friendly course and I have to write JavaScript, it fills me with existential dread.

[00:00:35]
So this is my excuse not to have to do that. So it will be TypeScript, that said. If you're, I've never written TypeScript before, you can get away with that, right? There's, this is not a course on TypeScript, this is there's shockingly little TypeScript ceremony, but for my own sanity.

[00:00:53]
And then, this is actually the next slide, is slightly a lie, but it's mostly true. When it came down to what framework to use, you know it, you might love it. Might not, but you probably know it, which is React. That said, to prove a point, when we get to component testing and end to end testing, and unit testing is really framework agnostic.

[00:01:18]
I did on occasion sample, put in some Svelte applications just to show you, this doesn't really matter, right? And so some of them, I've rebuilt the application in Svelte, the test is two characters different, right? In the way that you mount the component. And when it comes down to just driving a browser, it literally does not matter.

[00:01:36]
And you would have to look at the code to even figure out what framework I'm using, right? So some amount of React but again, and we'll go through some little gotchas with React but, because there's more gotchas with React than other things. And we'll kinda talk about that.

[00:01:51]
But again, you do not need to necessarily be an expert in React to do any of this. There's a lot of times there are examples in other frameworks as well, as long as other frameworks mean Svelte, let's see, one that I use every day. And nobody wants to watch me test the Vue component cuz I've never written Vue in production.

[00:02:11]
And then some other just testing tools and like I said, most of these are somewhat agnostic, testing library. And if you've never used testing library before, there are various flavors of testing library. There's React testing library, you can guess what framework that tests. There is Svelte testing library, but under the hood there is just dom testing library.

[00:02:35]
Which just basically renders an HTML component to either JS dom or happy dom and lets you fire events at it, right? And so completely agnostic other than the act of rendering a component, though that is specific to a given framework. But you could theoretically just like append child to document.body and test as well.

[00:03:01]
Let's go all the way down to the lower right, left depends on which way you're looking at the screen. And play right which is a relatively new-ish tool for spinning up many a browser. Whether that's WebKit or Chromium or Edge, also known as Chromium, or Firefox. And actually just spinning up the application and kicking the tires on it across all of these different browsers.

[00:03:35]
It is made by the team who originally worked on the protocols for Chrome to kinda drive it and control it. And then re-implemented those protocols across WebKit and Firefox so you can drive all of those as well. This is what we are using nowadays, and I say that with a little bit of hesitation.

[00:03:55]
Because right now my code base is half between Cypress and Playwright. But it is incredibly powerful, so we'll take a look at that in the second half of our time together. In the middle, we have Vitest, Vitest? Is it Vite, is it Vite, I don't know, I say Vite.

[00:04:11]
Which works with Vite as opposed to Webpack. That said, it is, mostly, 99% API compliant with Jest, right? Except that it also works with Vue and Svelte and other things as well. Despite the fact that we're using Vitest, when we grab extensions and third party libraries. You'll notice that a lot of times we just grab the Jest ones and drop them in and everything works fine on occasion, right?

[00:04:48]
I'll even have configuration files for Jest, if you wanna run Jest against some of these things as well. The biggest difference is that you will import from Vitest instead of Jest. But generally speaking, they are API compliant except one is nicer to ES modules than the other. And now you've learned what my biases are.

[00:05:07]
Cool, all right, so finally, kinda, as we wrap up our fun intro together. Like I said, we're gonna use TypeScript for everything, and we're gonna use it in strict mode. Again, Github Actions, you might use Travis, you might use circle CI, you might even have the pleasure of using Jenkins.

[00:05:23]
Ideally, some of the stuff, yeah, we're all chuckling. ideally, all this stuff should apply, but by definition, I can remain relatively confident that most everyone has access to GitHub Actions, which is what I use as well. And like I said, in most of our conversations, rather than be, this is the way that you should do it, it's gonna be this is the way you should do it.

[00:05:46]
Versus, this is how it happens in reality, and this is how [LAUGH] you should do it and this is how [LAUGH] you should do it when you have a deadline next week, right? Or there is an outage, right? And, or you've inherited a codebase with no test coverage to speak of.

[00:06:06]
Let's bend the rules a little bit to be productive