Testing JavaScript Applications

 Cover

Table of Contents

Change History

Beta 9—June 9,....2021

Beta 8—April 27,....2021

Beta 7—March 11,....2021

Beta 6—August 11,....2020

Beta 5—June 5,....2020

Beta 4—March 23,....2020

Beta 3—February 9,....2020

Beta 2—December 4,....2019

Beta 1—October 30,....2019

Acknowledgments

So You Want to Write Some Client-Side Code

Basic Assumptions

The Tools We’ll Use

How This Book Is Organized

Let’s Build an App

The Sample Code

Part I—Getting Started

1. Getting Started with Client-Side Rails

Managing State and Front-End Development

Configuring Webpacker

Using Webpacker

What’s Next

2. Hotwire and Turbo

The Hotwire Way

Installing Turbo

What Is Turbo Drive?

Adding Interactivity with Turbo Frames

Navigating Outside a Turbo Frame

Extending Our Page with Turbo Streams

Turbo Frames vs. Turbo Streams

Lazy Loading a Turbo Frame

What’s Next

3. Stimulus

What Is Stimulus?

Installing Stimulus

Adding Our First Controller

Creating an Action

Adding a Target

Using Values

Automating Value Changes

Stimulus Has Class

Going Generic

Stimulus Quick Reference

What’s Next

4. React

What Is React?

Installing React

Adding Our First Component

Composing Components

Connecting to the Page

Interactivity, State, and Hooks

Sharing State

What’s Next

5. Cascading Style Sheets

Building CSS in webpack

Adding CSS and Assets to webpack

Animating CSS

Adding CSS Transitions

Animating Turbo Streams with Animate.css

Using CSS and React Components

What’s Next

Part II—Going Deeper

6. TypeScript

Using TypeScript

Understanding Basic TypeScript Types

Static vs. Dynamic Typing

Adding Type Annotations to Variables

Adding Type Annotations to Functions

Adding Type Annotations to Classes

Defining Interfaces

Type Checking Classes and Interfaces

Getting Type Knowledge to TypeScript

What’s Next

7. webpack

Understanding Why webpack Exists

Managing Dependencies with Yarn

Understanding webpack Configuration

What’s Next

8. Webpacker

Webpacker Basics

Writing Code Using Webpacker

Integrating Webpacker with Frameworks

Running webpack

Deploying Webpacker in Production

Customizing Webpacker

What’s Next

Part III—Managing Servers and State

9. Talking to the Server

Using Stimulus to Manage Forms

Stimulus and Ajax

Using Data in Stimulus

Acquiring Data in React with useState

What’s Next

10. Immediate Communication with ActionCable

Installing ActionCable

Turbo Streams and ActionCable

Stimulus and ActionCable

React and ActionCable

What’s Next

11. Managing State in Stimulus Code

Using Data Values for Logic

Observing and Responding to DOM Changes

Rendering CSS with Data Attributes

What’s Next

12. Managing State in React

Using Reducers

Using Context to Share State

Adding Asynchronous Events to Contexts

What’s Next

13. Using Redux to Manage State

Installing and Using Redux

Adding Asynchronous Actions to Redux

What’s Next

Part IV—Validating Your Code

14. Validating Code with Advanced TypeScript

Creating Union Types

Specifying Types with Literal Types

Using Enums and Literal Types

Building Mapped Types and Utility Types

TypeScript Configuration Options

Dealing with Strictness

What’s Next

15. Testing with Cypress

Why Cypress?

Installing Cypress

Configuring Cypress and Rails

Writing Our First Test

Understanding How Cypress Works

What’s Next

16. More Testing and Troubleshooting

Writing More Cypress Tests

Testing the Schedule Filter

Cypress and React

Cypress Utilities and API

Troubleshooting

What’s Next

A1. Framework Swap

The All-Hotwire App

The All-React App

Comparison

Index

Automated testing will help you write high-quality software in less time, with more confidence, fewer bugs, and without constant manual oversight. Testing JavaScript Applications is a guide to building a comprehensive and reliable JS application testing suite, covering both how to write tests and how JS testing tools work under the hood. You’ll learn from Lucas de Costa, a core contributor to popular JS testing libraries, as he shares a quality mindset for making testing decisions that deliver a real contribution to your business. You’ll benefit from informative explanations and diagrams, easily-transferable code samples, and useful tips on using the latest and most consolidated libraries and frameworks of the JavaScript ecosystem.

About the Technology

Automated testing is essential to delivering good JavaScript applications every time. A complete testing strategy needs to cover functions in isolation, integration between different parts of your code, and correctness from the end user’s perspective. This book will teach you how to deliver reliable software quickly and confidently.

About the Book

Testing JavaScript Applications teaches you how to implement an automated testing plan for JavaScript-based web applications. It describes practical testing strategies, covers useful tools and libraries, and explains how to foster a culture of quality. In this clearly-written, example-rich book, you’ll explore approaches for both backend and frontend applications and learn how to validate your software much more quickly and reliably.

What's Inside

• Unit, end-to-end, and integration testing
• Managing test cost and complexity
• Practicing test-driven development
• Dealing with external dependencies
• Tools like Jest and Cypress

About the Reader

For junior JavaScript developers.