This repository is a companion website to the Frontend Masters course Enterprise UI Development.
What is this course all about? What do you need? What technologies are we going to be using? What do I need to have installed?
When it comes to testing, a lot of the terminology is murky and things don't always mean what they originally mean. Let's settle on a common vocabulary. We'll also talk about some of the trade-offs between different kinds of tests.
Okay, we're not going to dwell too much on the basics of unit testing, but let's at least do a quick review of the basics to get ourselves warmed up and make sure we're on the same page. If you're a little rusty, then this section will get you up to speed. That said, I suspect that even the seasoned unit testing wunderkind, I suspect you'll still pick up a trick or two.
- Running Your Tests with Vitest
- Why Tests Pass and Fail
- Filtering Tests
- Test Suites and Annotations
- Testing Asynchronous Code
This course doesn't seek to be the canonical curriculum on testing. Instead, all of our discussions on testing are going to be from the perspective that your primary job is to write software and if your tests are brittle or hard to maintain, you're going to stop testing.
If the section that follows was a Buzzfeed blog post, it's title would be "Top Ten Tricks to Stop Hating Your Unit Tests."
- Beyond Strict Equality
- Asymmetric Matchers and a Real World Use Case for Asymmetric Matching
- Exercise: Testing a Reducer Exercise and a Solution
We know that if a test doesn't fail then it technically passes. What about if you never run your tests? Join me for this and other deep philosophical questions. In this section, we'll begin building out some of our automated testing pipeline (a.k.a. continuous integration) using Github Actions.
- Getting Started with Github Actions
- Adding a Step to Your Github Action
- Caching Assets Between Jobs
- Caching Dependencies
- Setting Up Branch Protections
- Exercise: Setting Up Prettier with Github Actions and a Solution
- Bonus: Running Github Actions Locally
Testing functions is all well and good, but what about mounting entire components? This can be a great way to get some confidence in your UI implementation without needing to figure out how to get a full browser-driven integration suite up and running. In this section, we'll get starting with Testing Library, which is a mostly framework-agnostic tool for rendering UI to a fake DOM and giving you the ability to interact with it just like a real user would.
- Testing the Accident Counter
- Extending Matchers for Testing Library
- Globally Extending Matchers in the Test Setup for Component Testing
- Setting the Environment in Vitest
- Interacting with the DOM Using Testing Library
- Basic Component Testing Exercise and Solution
- Creating a Helper for Rendering Components and User Events
- Exercise: Packing List Component Testing and Solution
- Bonus Exercise: Obstacle Course
- Working with Contexts and Redux and Exercise
- Generating Artifacts Using Github Actions
- Exercise: Generating an Artifact for Your Code Coverage Report and a Solution
- Mocks
- Spies
- Faking Time
- Clearing, Restoring, and Reseting Mocks and Spies
- Mocking Imports and Modules
- A Word on Dependency Injection
- Mocking Globals
- Mocking Environment Variables
- Mocking APIs
- Getting Set Up with Playwright
- Writing Some Simple Playwright Tests
- Exercise: Input Obstacles
- Configuring Playwright
- Recording with Playwright
- Exercise: Store an Artifact for Your Playwright Tests
- Experiment: Get computed style for a DOM node
- Mocking Routes in Playwright
- Recording Network Requests with Playwright
- Configuring Prettier
- Configuring and Running ESLint
- Custom Rules for ESLint
- Exercise: Set Up a Job for Checking Lint and Prettier Rules
- Husky, Lint-Staged, and Git Hooks
- Creating a Reusable Github Action