I'm having trouble creating a unit test for an Angular Attribute Directive that I've written. The directive is called TrackClickDirective, and I'm trying to test the following.
- When an element which has this directive attached is clicked, it should call a specific method on the directive.
I suspect it's a problem with my unit test configuration.
Please see my implementation on StackBlitz, where you can see the test running:
https://stackblitz.com/edit/angular-pkcme8
Here is my unit test code - track-click.directive.spec.ts:
import { Component, ElementRef, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from "@angular/platform-browser";
import { TrackClickDirective } from './track-click.directive';
import { Analytics} from './analytics.service';
class MockAnalytics {
eventTrack() {}
};
class MockElementRef {
}
@Component({
template: '<button appTrackClick>Test</button>'
})
export class TestButtonWithoutNameComponent { }
describe('TrackClickDirective', () => {
let component: TestButtonWithoutNameComponent;
let fixture: ComponentFixture<TestButtonWithoutNameComponent>;
let directive: TrackClickDirective;
let inputEl: DebugElement;
let spy: any;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
TestButtonWithoutNameComponent
],
providers: [
TrackClickDirective,
{ provide: Analytics, useClass: MockAnalytics },
{ provide: ElementRef, useClass: MockElementRef }
]
});
fixture = TestBed.createComponent(TestButtonWithoutNameComponent);
component = fixture.componentInstance;
directive = TestBed.get(TrackClickDirective);
inputEl = fixture.debugElement.query(By.css('button'));
});
it('should call the trackClick methoe when the button is clicked', () => {
spy = spyOn(directive, 'trackClick');
inputEl.triggerEventHandler('click', null);
fixture.detectChanges();
expect(directive.trackClick).toHaveBeenCalled();
});
});
What am I doing wrong here? When I run the unit test, I get the following:
FAILED TESTS:
TrackClickDirective
✖ should call the trackClick method when the button is clicked
HeadlessChrome 72.0.3626 (Mac OS X 10.14.0)
Expected spy trackClick to have been called.
from Testing a click from an Angular Attribute Directive
No comments:
Post a Comment