In this article, I'll show how to test Angular directive. To test it I'll create appCloneElement directive. Its purpose is to duplicate HTML elements given n times.
Setup
If unsure how to set up Angular with Jest please refer to the article: https://barcioch.pro/angular-with-jest-setup
Clone element directive
The directive works as follows (everything happens in ngOnChanges method):
- clear the view of created elements
this.viewContainer.clear();
- check if the passed value is a valid number
if (this.appCloneElement == null) {
return;
}
if (!Number.isFinite(this.appCloneElement)) {
return;
}
if (this.appCloneElement < 1) {
return;
}
for (let i = 1; i <= this.appCloneElement; i++) {
this.viewContainer.createEmbeddedView(this.templateRef)
}
Full implementation:
import { Directive, Input, OnChanges, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[appCloneElement]'
})
export class CloneElementDirective implements OnChanges {
@Input() appCloneElement: number | null | undefined;
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) {
}
ngOnChanges(changes: SimpleChanges): void {
this.viewContainer.clear();
if (this.appCloneElement == null) {
return;
}
if (!Number.isFinite(this.appCloneElement)) {
return;
}
if (this.appCloneElement < 1) {
return;
}
for (let i = 1; i <= this.appCloneElement; i++) {
this.viewContainer.createEmbeddedView(this.templateRef)
}
}
}
Testing
To test a directive you need a component that passes properties to the directive. In the following example, it's TestComponent. The directive itself is declared in a separate module CloneElementModule so it has to be imported. The testing scenarios are quite simple:
The first scenario to check is the default view - without passing any values.
describe('when component with directive is initialized', () => {
it('should not render any element', () => {
expect(getClones().length).toBe(0);
});
...
The directive takes the number of elements to clone. If the number is less that 1 it shouldn't render any element. Since you can pass some values that are not valid numbers but the compiler won't complain about them, we're also going to test them. These values are: null, undefined, NaN, Infinity.
describe.each([
{input: -1, inputText: '-1'},
{input: -581, inputText: '-581'},
{input: 0, inputText: '0'},
{input: null, inputText: 'null'},
{input: undefined, inputText: 'undefined'},
{input: Infinity, inputText: 'Infinity'},
{input: NaN, inputText: 'NaN'},
])('and $inputText value is passed', ({input}) => {
beforeEach(() => {
component.cloneNumber = input;
fixture.detectChanges();
});
it('should not render any element', () => {
expect(getClones().length).toBe(0);
});
});
Also, you have to verify that multiple changes to the directive input will produce a valid number of cloned elements. The scenario will look like this:
pass 5 number
detect changes
validate there are 5 elements
pass 9 number
detect changes
validate there are 9 elements
pass undefined value
detect changes
validate there are no elements
describe('and 5 value is passed', () => {
beforeEach(() => {
component.cloneNumber = 5;
fixture.detectChanges();
});
it(`should render 5 elements`, () => {
expect(getClones().length).toBe(5);
});
describe('and 9 value is passed', () => {
beforeEach(() => {
component.cloneNumber = 9;
fixture.detectChanges();
});
it(`should render 9 elements`, () => {
expect(getClones().length).toBe(9);
});
});
describe('and undefined value is passed', () => {
beforeEach(() => {
component.cloneNumber = undefined;
fixture.detectChanges();
});
it(`should not render any element`, () => {
expect(getClones().length).toBe(0);
});
});
});
Full implementation:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, DebugElement } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CloneElementModule } from './clone-element.module';
import { By } from '@angular/platform-browser';
describe('CloneElementDirective', () => {
let fixture: ComponentFixture<TestComponent>;
let component: TestComponent;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
CommonModule,
CloneElementModule
],
declarations: [TestComponent],
});
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
});
describe('when component with directive is initialized', () => {
it('should not render any element', () => {
expect(getClones().length).toBe(0);
});
describe.each([
{input: -1, inputText: '-1'},
{input: -581, inputText: '-581'},
{input: 0, inputText: '0'},
{input: null, inputText: 'null'},
{input: undefined, inputText: 'undefined'},
{input: Infinity, inputText: 'Infinity'},
{input: NaN, inputText: 'NaN'},
])('and $inputText value is passed', ({input}) => {
beforeEach(() => {
component.cloneNumber = input;
fixture.detectChanges();
});
it('should not render any element', () => {
expect(getClones().length).toBe(0);
});
});
describe.each([
{input: 1},
{input: 99},
{input: 19},
])('and $input value is passed', ({input}) => {
beforeEach(() => {
component.cloneNumber = input;
fixture.detectChanges();
});
it(`should render ${ input } element(s)`, () => {
expect(getClones().length).toBe(input);
});
});
describe('and 5 value is passed', () => {
beforeEach(() => {
component.cloneNumber = 5;
fixture.detectChanges();
});
it(`should render 5 elements`, () => {
expect(getClones().length).toBe(5);
});
describe('and 9 value is passed', () => {
beforeEach(() => {
component.cloneNumber = 9;
fixture.detectChanges();
});
it(`should render 9 elements`, () => {
expect(getClones().length).toBe(9);
});
});
describe('and undefined value is passed', () => {
beforeEach(() => {
component.cloneNumber = undefined;
fixture.detectChanges();
});
it(`should not render any element`, () => {
expect(getClones().length).toBe(0);
});
});
});
});
const getClones = (): DebugElement[] => {
return fixture.debugElement.queryAll(By.css('.clone'));
}
});
@Component({
selector: 'app-test',
template: `
<div class="clone" *appCloneElement="cloneNumber">I'm a clone</div>
`,
})
export class TestComponent {
cloneNumber: number | null | undefined;
}
Run the tests and you should see the results:
PASS src/app/directives/clone-element.directive.spec.ts
CloneElementDirective
when component with directive is initialized
✓ should not render any element
and -1 value is passed
✓ should not render any element
and -581 value is passed
✓ should not render any element
and 0 value is passed
✓ should not render any element
and null value is passed
✓ should not render any element
and undefined value is passed
✓ should not render any element
and Infinity value is passed
✓ should not render any element
and NaN value is passed
✓ should not render any element
and 1 value is passed
✓ should render 1 element(s)
and 99 value is passed
✓ should render 99 element(s)
and 19 value is passed
✓ should render 19 element(s)
and 5 value is passed
✓ should render 5 elements
and 9 value is passed
✓ should render 9 elements
and undefined value is passed
✓ should not render any element
Test Suites: 1 passed, 1 total
Tests: 14 passed, 14 total
Source code
https://gitlab.com/barcioch-blog-examples/series-angular-testing-06-angular-directive-testing
