How To Write Unit Tests For Angular Attribute Directives

Angular Testing: Unit Tests For Attribute Directives - A Step-By-Step Guide

Angular attribute directive are used to modifies the behavior of an element, component or another directive. In this post, I'll show you how to write unit tests for Angular attribute directives.

Attribute directives are one of the most difficult things to unit test in Angular. There are a few different ways to go about it, but there is no one "right" way. In this blog post, we will explore some of the different options for unit testing attribute directives in Angular.

How to Create Unit Tests For Angular Attribute Directives

There are many ways to create unit tests for Angular attribute directives. One way is to use the Angular testing utilities. These utilities provide a way to create and run unit tests for Angular components, directives, and services.

Another way to create unit tests for Angular attribute directives is to use a third-party testing library such as Jasmine or Mocha. These libraries provide a way to create and run unit tests for JavaScript code in general, not just Angular code.

In either case, the goal is to write test cases that exercise the behavior of the directive under various conditions. For example, if the directive adds a class to an element when certain criteria are met, the test cases should include conditions where the class is added and where it is not added.

The following example describe how to set up and write unit tests for Angular attribute directives using Jasmine and Karma.

highlight.directive.ts

@Directive({ selector: '[highlight]' })
export class HighlightDirective implements OnChanges {
 
  defaultColor =  'rgb(211, 211, 211)';
 
  @Input('highlight') bgColor = '';
 
  constructor(private el: ElementRef) {
    el.nativeElement.style.customProperty = true;
  }
 
  ngOnChanges() {
    this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;
  }
}

highlight.directive.spec.ts

 
 
@Component({
  template: `
  <h2 highlight="yellow">Something Yellow</h2>
  <h2 highlight>The Default (Gray)</h2>
  <h2>No Highlight</h2>
  <input #box [highlight]="box.value" value="cyan"/>`
})
class TestComponent { }
 
describe('HighlightDirective', () => {
 
  let fixture: ComponentFixture<TestComponent>;
  let des: DebugElement[];  // the three elements w/ the directive
  let bareH2: DebugElement; // the <h2> w/o the directive
 
  beforeEach(() => {
    fixture = TestBed.configureTestingModule({
      declarations: [ HighlightDirective, TestComponent ]
    })
    .createComponent(TestComponent);
 
    fixture.detectChanges(); // initial binding
 
    // all elements with an attached HighlightDirective
    des = fixture.debugElement.queryAll(By.directive(HighlightDirective));
 
    // the h2 without the HighlightDirective
    bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])'));
  });
 
  // color tests
  it('should have three highlighted elements', () => {
    expect(des.length).toBe(3);
  });
 
  it('should color 1st <h2> background "yellow"', () => {
    const bgColor = des[0].nativeElement.style.backgroundColor;
    expect(bgColor).toBe('yellow');
  });
 
  it('should color 2nd <h2> background w/ default color', () => {
    const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
    const bgColor = des[1].nativeElement.style.backgroundColor;
    expect(bgColor).toBe(dir.defaultColor);
  });
 
});
 
 

Attribute directives are a powerful tool in Angular, and unit testing them can help ensure that they work as intended. In this article, we went over how to write unit tests for Angular attribute directives. We covered how to set up the TestBed, inject the directive into our test component, and assert that the directive is working as expected. With these tips in mind, you should be able to confidently unit test your own attribute directives.