Master testing authenticated requests & connections post-login. Simulate sessions, verify for code reliability.

Master user setup, authenticate, and manage connections, including GitHub and DB users, sessions, and test cleanup. Deep dive into authentication.

Creating and Authenticating Users for Connection Setup

[00:00] All right, so for us to be able to be logged in and create a connection, we're going to be creating users. We need to have a user to be logged in as. And for us to be able to create a connection, we need to create a connection with a GitHub user that does exist and that our mock will respond to. So there are a couple of things we're going to need to do as part of our setup.

[00:19] First of all, let's get a GitHub user with await insert GitHub user from our mock. Now we'll add it to the list of users that our mock can respond with. And then we're going to need a new user with await insert new user. This is going to come from our DBUtils.

[00:38] And the reason we're using the DBUtils instead of calling Prisma directly is because the DBUtils will keep track of all the users that are inserted during the course of forever, the process. And it exports this inserted users set.

[00:55] That's just going to be a set of all of the IDs that are users that are inserted so that we can delete those users when our test is done. So between every test that is run, we can clear out the users from the database

[01:10] so that test users don't get kind of split between all of these different or accessible between all these different tests. So it's all part of the cleanup process. So we also want to do the same for our GitHub users as well. So let's come up here and we'll add an after each from vTest.

[01:28] That's an async function and async arrow function. Here we go. And we'll just await delete GitHub users to get rid of the GitHub users from our mock. And then we'll do a similar thing after each.

[01:46] After each, there we go. And this is also going to be async. And here we're going to await prisma.user. And let's bring in Prisma properly. Here we go, .user delete many.

[02:02] And the many users we want to delete are where their ID is inside one of those inserted users in that set. And then we can say inserted users, your job is done here. Let's clear out that set of inserted users.

[02:21] So that way, we can create users, both GitHub users and our own database users, and then get rid of them between all the tests. So now, no matter what we do, after the tests are over, we delete those users and we don't have to worry about those users leaking out. Okay, great.

[02:39] So that takes care of the setup and cleanup of our users. Now we also need to create a session. Now deleting the user is going to delete session, so we don't have to worry about cleanup for that one. But to be logged in, a user does have to have a session. So we'll say prisma.session.create.

[02:57] And we'll create a session for this user where the data is user ID, new user.ID. And the expiration date is get expiration date from our utils there. Okay, awesome. So now we need to get this request to be authenticated.

[03:16] And so we need to update our setup request to accept some optional parameters. So we'll default this to an empty object. We want a session ID and a code. The code is how our mock identifies different users. So the code is going to be important here.

[03:32] And then the session ID is going to be the ID that we want to commit to our cookie. So the session ID will be a string. It's optional. And the code, also optional, will be a string. And the code is going to default to this faker thing.

[03:47] So if you don't provide one, then we'll just, you know, create a GitHub user on the fly with providing a random code. And then the session ID, if that's provided, then we need to get the cookie session from our session storage and set that session ID.

[04:05] So let's get our cookie session from await session storage dot get session. And then if the session ID is provided, then we'll say cookie session dot set session key.

[04:24] This is all coming from our experience with the auth stuff. And there's our session ID right there. Okay, great. So now we're almost there. We just need to make sure that this cookie session cookie appears in the cookie header for our request. Now we can't just do that because we have another cookie there already.

[04:43] So cookies are actually joined by a semicolon character. So if I say join semicolon, now I can have multiple cookies. And I can say convert set cookie to cookie and await the session storage commit session. And of course, we can make a variable out of that and all that stuff. But that should work.

[05:02] So that gets our request to be authenticated because now we'll have a cookie that should be kind of familiar with what we've done before with our playwright test. It's kind of similar. The whole idea is just to simulate that authenticated request.

[05:16] So with that now, we need to pass the session ID. It's our session dot ID. We're selecting too much here. So let's select ID true. There we go.

[05:30] And then we also want to provide the code, which is going to come from our GitHub user dot code right here. And with that now, we can save this. And we should actually pass. Yeah, we're in a passing state now because our settings profile connections is where

[05:49] we end up going. But we have a very important part of this. And that is that we actually are creating a user. So let's make sure that that or creating a connection to the user. So let's go and say Prisma dot connection dot find first, where the user ID matches

[06:08] the new user ID and the provider ID matches the GitHub user profile ID. And that is going to give us our connection. So then we can console log the connection, save that and boom, we've got our connection.

[06:27] So to assert on this, we don't really know a whole lot about the information in here. So it's pretty much sufficient to say that if the connection exists at all, then that's a passing test. So we can expect the connection to be truthy and that'll be enough. There we go. Cool.

[06:46] Now, I want to show you what happens if this fails for some reason. So what if we say, yay or yahoo, whatever. So this fails. This is not going to be a very helpful error message at all. So instead, we're going to say connection was not created or some helpful error message

[07:05] that will certainly be a lot more helpful than this. Now, of course, we do have the code frame and everything that is quite helpful. But I think having a more useful error message is quite handy. And so the second argument to expect is how you do that. It's nice.

[07:19] So let's restore this to its former passing glory, new user.id, and our test should be passing. Whew. Okay. That's quite a bit there. So let's talk about the different pieces that we did here.

[07:32] So first we needed to have a GitHub user that the user would authenticate to and a new user that would be the authenticated user. And then we need to create this session so that user can be logged in.

[07:46] Then we made sure to take care of some cleanup up here so that we don't have a user in both the GitHub variety and our own that persists beyond the scope of this one test. So then we updated the setup request so that it can authenticate our request using the

[08:06] same mechanisms that our application uses for authentication, which is just a session ID in a cookie. And then we had to set up our cookie header so that it has all of the cookies that we need. So including both the connection as well as the cookie session, our off session.

[08:25] And so with that, we were able to get to the right place where the user's logged in. And so we get sent over to the connections page. And then we're also verifying that the connection was actually created. And that is taking care of doing an authenticated request to our loader.

Testing Authenticated Requests and Connection Creation

[00:00] So far we've tested the situation where things fail to authenticate and we've also tested the situation down here where we send the user to onboarding. But now we're going to test when a user is logged in, it creates a connection. So we need to create an authenticated request.

[00:18] So this request needs to have all of the cookies necessary or the cookie for the session to identify a living and existing session. So you're going to be creating a real session in the actual database and then verifying

[00:34] that that session or that way our source code can verify that that session exists. And if that session does exist, this user ID will exist and we'll end up in this situation right here. So this is the portion of the code that we're going to be testing. We want to verify that when a user is logged in, it creates this connection.

[00:54] So you're going to be making an assertion about that too. So a couple of things we're going to be doing in this one, I think you'll have a fun time with it. Have a good time.

We all know the drill. The code works on your machine but you didn’t realize the impact of the change you made and it breaks in production. This problem grows exponentially as your application’s size and usefulness grows. Unpredictability can be a developer's worst nightmare.

However, many developers find it difficult to effectively test their code. Manual testing gets tedious fast. Complex logic and async code can be tricky to test effectively.

The Full Stack Testing Workshop will equip you with the tools you need to ensure your app works now and in the future. You'll learn how to write modular, maintainable tests that cover all of your code, from the backend to the frontend.

As the author of the de-facto standard testing library for web development (called eh… Testing Library), I have some solid opinions that have led many teams to much more confidence shipping their code. Let’s get you some of that confidence.

## End-to-End Testing with Playwright

With end-to-end (E2E) testing, you can validate a web app from the user's perspective. This is the closest you can get to a real user interacting with your app. In this section, you'll learn the ins and outs of writing a test with Playwright:

- Best practices for setup before running tests
- Simulating user actions like interacting with the UI to perform a search
- Creating a new user in the database
- Cleaning up after tests have run
- Using playwright fixtures for reliable setup/teardown

## Mocking & Authentication for E2E Tests

When your application relies on external services, you need to have a way to test them without actually using them. Similarly, you don't want to fully onboard a new account every time you test an authenticated user flow. In this section, you'll learn how to re-use the same mocks we’ve been using for development to mock third-party services and simulate logging in:

- Use Mock Service Worker to intercept network requests
- Replace email verification with a local file solution
- Attach cookies to Playwright
- Reusing 2FA logic for local testing
- Testing behavior with different HTTP responses

## Unit Testing

Sometimes you’ve got some really complicated business logic in your app. Business logic that is critical to your application. For this stuff, it’s nice to package it up in its own function or module to keep all that logic in one place. This is the perfect situation where lower level unit testing comes in handy. Here, we'll dive into unit testing with the Vitest framework to ensure that each function and module behaves as expected:

- Organizational best practices
- Asserting outcomes with `expect`
- Recording function calls with spies
- Specifying test behavior with Vitest hooks
- Keeping test output clean to avoid cluttering up the terminal

## Component and Hook Testing

When building React components, you should focus on two users: the user who interacts with a component, and the developer who renders it. By using Testing Library, we can avoid mocking React and its hooks and instead test components as they would be used in a real app:

- Render components with Testing Library
- Simulate the DOM environment on a per-test basis
- Querying for missing elements
- Testing hooks in isolation from React
- Stubbing React context
- Cleanup after testing

## Authenticated Integration

Similar to higher-level E2E tests, it is often necessary to simulate an authenticated user. However, we don't want to test the entire user flow every time we make a change. In this section, you'll learn how to test authenticated operations without the overhead of a full E2E test:

- Generating random session IDs
- Associating sessions with users
- Testing authenticated routes
- Asserting user state in responses

## Custom Assertions

Writing tests is good; writing readable and maintainable tests is better. Custom assertions can make your test code easier to understand and modify. Here you'll learn to encapsulate complex checks into simple, understandable assertions:

- Create matchers for specific states
- Share assertions across tests
- Add custom assertions to TypeScript definitions
- Format test output with colors for readability

## Test Database

There are some decisions to make when writing tests that interact with the database. Testing with the development database has benefits, but requires us to remember to delete data after each test. By using a test database, we can avoid accidents while still being able to run our test suites:

- Set up a test-specific database instance
- Seeding a minimal amount of data
- Defining a global setup for Vitest
- Understanding the importance of module import order

Learn how to write tests that cover all of your backend and frontend code. Web Application Testing covers unit testing, E2E, integration testing, and more!

Web Application Testing

Kent C. Dodds

Full Stack Vol 1

Intro to Web Application Testing Workshop

Intro to Web Application Testing 

Intro to End-to-End

Automate tests seamlessly in Playwright UI mode, mirroring manual tester actions. Validate search feature with Playwright's robust tools and intuitive interface

Playwright tests for user interactions, page navigation, search box inputs, and assert URLs, list elements, and items to test web app search functionality.

Writing and Asserting Playwright Tests for Search Functionality

Writing Automated Tests with Playwright UI Mode

Master isolated tests in Playwright and Node for better control, independence, and reliability. Import and run essential APIs for self-sufficient testing.

Create, manipulate URL with search parameters, display user data using encoding. Elevate your app's user data handling skills.

Creating and Interacting with User Data

Isolating Tests for Better Reliability and Flexibility

Clean up test data to maintain test isolation in end-to-end testing. Prevent data buildup in the development database, ensuring smooth, reliable workflows.

Incorporate user deletion in setup and teardown for a pristine testing environment, eliminating unwanted data and ensuring a clean slate for every test.

Proper Setup and Teardown of Testing for Database Cleanup

Test Isolation in End-to-End Testing

Utilize Playwright fixtures to guarantee thorough database cleanup, eradicating test-created user data, bypassing potential pitfalls from alternative methods.

Use Playwright fixtures for custom test objects, properties, behaviors, execute functions strategically, and manage data cleanup efficiently.

Playwright Fixtures for Testing

Implementing Fixtures to Ensure User Deletion in Playwright Tests

Take a break, nourish yourself, hydrate, and jot down your learnings to keep your brain sharp. Let's continue the great work with more testing ahead!

Dad Joke Break E2E

End-to-End

Address HTTP/S validity with a mock server and stub, this makes it easy to ensure that a client's response is consistent

Intro to E2E Mocking

Capture, save verification codes for smooth server-test automation communication.

Master Node.js email read/write with the File System module. Save, retrieve email data for testing efficiently.

Handling Emails in Node.js using File System

Writing Emails to the File System for Test Automation

Quickly grasp requiring and using disk-stored email data in tests for successful content reading. Crucial for test setup and execution.

Enhance process-to-process communication in Node.js using the secure file system method. Elevate data transfer and parsing capabilities.

Communicating Between Processes with File System in Node.js

Reading Email from Disk in Test Environment

Quickthink about the punning methods you will employ to share skeins of mirth with your fellow yo-cards

Dad Joke Break E2E Mocking

End-to-End Mocking

Learn how to simulate an authenticated user in your tests by generating and adding cookies to the browser context, improving test efficiency and isolation.

Intro to Auth E2E

Master end-to-end user flow tests, streamline authentication, and navigate login, profile editing, 2FA, and login verification.

Simulate user login, set cookies in browser tests to mimic web app authentication accurately.

Login and Setting Cookies for Browser Testing

End-to-End User Flow Testing and Authentication Utility

Dad Joke Break Auth E2E

Authenticated End-to-End

Intro to Unit Test

Craft solid unit tests for getErrorMessage, covering various scenarios and input-based error messages. Test pure and impure aspects thoroughly.

Master unit testing for utility functions, cover error handling, and achieve full code coverage with tools like coverage reports.

Writing Unit Tests for Utility Functions

Unit Testing a Function for Error Messages

Minimize test output logs, mock console.error for cleaner testing. Master spies for focused, effective testing without excessive console noise.

Utilize spies to track, assert console.error calls in tests. Ensure correct arguments and preserve valuable error info.

Testing Console Error with Spies

Managing Test Output and Error Logging with Console Mocking

Utilize Playwright testing hooks for error restoration and default mock restoration to enhance test stability.

Learn how to restore mocks by default, capture and handle console errors, and create a shared console error setup for efficient JavaScript testing.

Effective Error Handling and Console Capture Testing

Implementing Test Hooks for Error Restoration in Playwright

Create a setup file for automatic inclusion of essential files in all test files, closely simulating the production environment for effective testing.

Set up a test directory with setup files using VTest to automate configuration and common tasks. Ensure smooth test execution and robust error handling.

Setting Up Test Environment and Utilizing Setup Files with VTest

Creating a Setup File for Test Environment Setup

Dad Joke Break Unit Test

Unit Testing

Intro to Component Testing

Efficiently test Error List component rendering with React Testing Library. Gain hands-on experience across diverse test cases.

Simulate DOM with JSDOM for React component testing, skip the browser. Utilize Testing Library, tackle challenges, and hone your skills.

Testing React Components with JSDOM

Error List Component with React Testing Library

Fix test failures from DOM manipulation with proper cleanup techniques for reliable, efficient testing.

Maintain test isolation, eliminate dependencies on test state, and ensure clean execution in Testing Library with effective test cleanup.

Ensuring Isolation and Proper Test Execution

Proper DOM Cleanup for Reliable Testing

Dad Joke Break Component Test

Component Testing

Intro to Hooks

Create a double confirmation feature in React with a custom hook. Explore implementation,testing with RenderHook and Act. Prevent accidental actions effectively

Master custom React hook testing with RenderHook and Act from Testing Library React. Access hook properties through result.current for precise testing.

Testing Custom React Hooks with RenderHook and Act

Double Confirmation Feature

Test hooks with flexibility. Use custom test components or the render hook utility. Tailor your approach to your testing needs and preferences.

Create test components for thorough React hook testing, ensuring API contracts, and validating state changes accurately with Testing Library React and UserEvent

Testing React Hooks

Custom Test Components vs Render Hook Utility

Dad Joke Break Hooks

Hooks

Ensure test-driven development (TDD) by writing testcases from the get-go and developing integration tests quickly in isolation.

Intro to Testing Remix 

Master Remix stubs for isolated component testing, handle edge cases, simulate user states without full end-to-end testing.

Use CreateRemixStub for Remix components with mock data. Test integration with React Testing Library for proper rendering and DOM element waiting.

Rendering Components with Mock Data

Creating a Stub for Testing Component Logic in Remix

Fix a failing test by adding a parent route granting access to root data. Ensure proper rendering and testing of the username route in authenticated settings.

Create authenticated integration tests in Remix by configuring root routes, loaders, and context for precise testing of user interactions.

Creating Routes and Context in Remix

Creating a Parent Route for Accessing Root Data

We interrupt your couch time for this important reminder. Oh, and to keep you feeling healthy and vibrant.

Dad Joke Break Testing Remix 

Testing Remix

Learn how to mock APIs using MSW to enhance testing reliability, handle different scenarios, avoid dependencies, and ensure test isolation.

Intro to Http Mocking

Manually test and modify GitHub sign-in callback in your app. Adjust user association, validate response cookies, and location headers for robust functionality.

Simulate OAuth2 flow, effectively mock GitHub API requests in tests. Ensure robust verification of authentication and API integration in your app.

Testing OAuth2 Flow and Mocking GitHub API Responses

GitHub Sign-In Callback

Override HTTP interceptors for GitHub API token requests in testing, handle errors efficiently, export and access the server, and implement cleanup.

Master error case testing in a mock API environment. Verify failure handling, page redirection, and console error capture. Maintain test isolation with cleanup.

Testing Error Handling and Assertions with Mock API Calls

Testing Error Handling in GitHub API Interceptor

Learn how to avoid repeating test code by creating reusable functions and avoiding excessive duplication, ensuring efficient and maintainable testing workflows.

Organize code better with bottom setup functions, reduce repetition, and boost readability through parameterization and code sharing.

Efficient Code Organization with Setup Functions

Streamlining Repetitive Test Setup for Optimal Efficiency

Dad Joke Break Http Mocking

HTTP Mocking

Intro to Auth Integration

Verify GitHub login session creation with assertions. Cover scenarios like connecting accounts and non-logged-in users.

Extract, check, parse server response's session cookie for user authentication, ensuring DB session creation.

Verifying Session Creation and User Authentication

Assertions for GitHub Login Session Creation

Swap fake data with real user info in routes, use utilities for seamless database user insertion and deletion.

Real DB interactions for user creation/deletion, image addition, request authentication in integration tests. Full UI coverage, no heavy mocking.

Authentication in Database Integration Tests

Integrating Real Database with User Routes

Dad Joke Break Auth Integration

Authenticated Integration

sanityVideoMuxId: gndUuMl8O02HCDPqYUGRa1o2oUxoiYsRoakUQ802ZtPnc

Intro to Custom Assertions

Enhance test assertion readability and functionality by creating custom matchers like assertRedirect. Elevate code clarity and error messages.

Elevate your testing game with custom assertions in Jest. Create "to have redirect" and more for precision. Organize in a test util directory for collaboration.

Custom Assertions with Jest's Expect Library

Custom Matchers for Assertions

sanityVideoMuxId: pmPD6AekZgJhQP2kES5V2aErPtkkyA00GTSVfLcRp4ys

Dad Joke Break Custom Assertions

Custom Assertions

Extend the Gradle plugin to suit the needs of your projects. Learn about exploring a Cucumber-JVM Gradle boolean condition or approach using

Intro to Test Database

Set a test database with a URL before importing Prisma for seamless client testing. Master import order and setup for success.

Learn how to properly set up an isolated database for testing purposes using Prisma and dynamic imports, ensuring a clean and efficient testing environment.

Setting Up an Isolated Database for Tests

Setting Up a Test Database for Prisma Integration Tests

Learn how to solve conflicts when running tests simultaneously by setting up individual test databases to avoid shared state and data interference.

Learn how to create and manage isolated test databases using unique identifiers, allowing for efficient and independent testing processes.

Isolating Test Databases for Efficient Testing

Managing Test Databases for Parallel Testing

Speed up test execution with a global setup module. Enhance efficiency for faster, full database tests.

Learn how to set up a base database for faster test execution, avoiding repetitive migrations, and utilizing the real database environment efficiently.

Optimizing Test Setup with Global Database Configuration

Optimizing Test Setup

Take a well-deserved break before applying the acquired knowledge to your own projects. Well done!

Dad Joke Break Test Database

Test Database

Discover how to set up and integrate various testing tools, both at the UI and lower levels, to enhance your app's stability and facilitate easier test creation

Web Application Testing

Web Application Testing

Transcript

Testing Authenticated Requests and Connection Creation

Transcript