Testing directives
Directives are usually quite straightforward in their overall shape, being components with no view attached. The fact that directives usually work with components gives us a very good idea of how to proceed when testing them.
Consider the copyright.directive.ts file that we created in Chapter 5, Enrich Applications using Pipes and Directives:
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appCopyright]'
})
export class CopyrightDirective {
constructor(el: ElementRef) {
const currentYear = new Date().getFullYear();
const targetEl: HTMLElement = el.nativeElement;
targetEl.classList.add('copyright');
targetEl.textContent = 'Copyright ©${currentYear} All Rights Reserved.';
}
}
A directive is usually used in conjunction with a component, so it makes sense to unit test it while using it on a component. Let’s create a test host component...