How to write component harnesses in Angular

Step by step guide to implement your first harness object for your Angular components

Recently I wrote a blog post and published a video that describes how to test your Angular Material components with component harnesses.

People liked the approach. Some even wanted to learn more and were curious about providing harness objects for their components. They asked me if I could do a write-up. Hence this blog post.

Harness what? Only because you haven’t heard of harness testing yet, doesn’t mean that this blog post isn’t for you. However, if you are new to the topic I recommend you either check out my blog post or watch my video tutorial about harness testing.

Test your components using Angular Material’s component harnesses!

Okay, so we agree harness testing is pretty cool at this point—time to provide some harnesses objects for our components.

Imagine you are the author of a UI library, and you just implemented a AwesomeSwitchComponent.

AwesomeSwitchComponent in unchecked state and checked state

We successfully shipped this component, and developers are pleased with it. However, there is no harness available yet. So let’s go ahead and implement a harness object for our switch.

Harness Testing — the base

Before we code the harness, we first install Angular’s Component development kit.

npm i @angular/cdk

Let’s start by creating a new file named switch.harness.ts.

This file can be created next to the components implementation or a dedicated testing subentry. I…