Angular 2+ Unitest providing directive with a window injected object

Question

I'm Trying to write a test for a directive which recieves in its constructor a window object in it's constructor

Directive code :

 import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit } from                                             
    '@angular/core';
    import { Inject } from '@angular/core';
    import { Observable, Subscription } from 'rxjs/Rx';


    @Directive({
        selector: '[appFixToViewport]'
    })
    export class FixToViewportDirective implements OnChanges, OnDestroy, OnInit {
    @Input('appFixToViewport') appFixToViewport: boolean;
    @Input('outerMargin') outerMargin: number = 15; // defaults to 15px margin
    private windowResize$: Subscription;

    constructor(private element: ElementRef,
                @Inject('$window') private $window: any) {}

    ngOnInit() {
        this.windowResize$ = Observable.fromEvent(this.$window, 'resize')
            .debounceTime(500)
            .subscribe((event) => {
                this.fixDropdownToViewPort();
            });
    }

    ngOnChanges(changes) {
        if (changes.appFixToViewport.currentValue) {
            this.fixDropdownToViewPort();
        }
    }

    ngOnDestroy() {
        if (this.windowResize$ !== undefined) {
            this.windowResize$.unsubscribe();
        }
    }

    /**
     * Name: fixDropdownToViewPort
     * Purpose: put div element inside the view port
     * Returns: void
     */
    fixDropdownToViewPort() {
        this.$window.requestAnimationFrame(() => {
            this.element.nativeElement.style.transform = ''; // reset transform

            let winWidth = this.$window.innerWidth;
            // Attempt obtaining a more accurate width (excluding scrollbars)
            if (this.$window.document && this.$window.document.body.clientWidth) {
                winWidth = this.$window.document.body.clientWidth;
            }
            let elementWidth = this.element.nativeElement.offsetWidth; // div width

            // div right border absolute position
            let elementRight = this.element.nativeElement.getBoundingClientRect().right;

            // div left border absolute position
            let elementLeft = this.element.nativeElement.getBoundingClientRect().left;

            let delta = 0;

            if (elementRight > winWidth && winWidth > elementWidth) { // calc if the div is overflow right
                delta = elementRight - winWidth + this.outerMargin;
            }
            else if (winWidth < elementWidth) { // calc if the div is bigger then the view port
                delta = elementLeft - this.outerMargin;
            }
            this.element.nativeElement.style.transform = `translateX(${-delta}px)`;
        });
    }
}

When i'm trying to initialize a test component in which the directive is used in the template i'm receiving injection error

Here is the test spec file :

import {Component, ElementRef, DebugElement} from '@angular/core';
import {TestBed, async, ComponentFixture} from '@angular/core/testing';
import {FixToViewportDirective} from './fixToViewport.directive';
import {createInjector} from "@angular/core/src/view/refs";
import {By} from "@angular/platform-browser";


@Component({
    selector: 'app-test-fixtoviewport',
    template:'<div appFixToViewport="isOpenFlag" ></div>'
    })
class TestFixToViewPort {}


describe('Directive: FixToViewportDirective',()=>{
    let component :TestFixToViewPort
    let fixture : ComponentFixture<TestFixToViewPort>;
    let inputEl: DebugElement;
    const $window= Window;

    beforeEach((()=>{

        TestBed.configureTestingModule({
            declarations: [
                TestFixToViewPort,
                FixToViewportDirective
            ]});

             fixture = TestBed.createComponent(TestFixToViewPort);
             component= fixture.componentInstance;
             inputEl= fixture.debugElement.query(By.css('div'));
        }));
    it('should have a defined component', () => {
        expect(component).toBeDefined();
    });
    })

and the Error trace :

Directive: FixToViewportDirective

    × should have a defined component
        Error
            at injectionError (webpack:///~/@angular/core/@angular/core.es5.js:1232:0 <- src/test.ts:1511:86) [angular]
            at noProviderError (webpack:///~/@angular/core/@angular/core.es5.js:1270:0 <- src/test.ts:1549:12) [angular]
            at ReflectiveInjector_._throwOrNull (webpack:///~/@angular/core/@angular/core.es5.js:2771:0 <- src/test.ts:3050:19) [angular]
            at ReflectiveInjector_._getByKeyDefault (webpack:///~/@angular/core/@angular/core.es5.js:2810:0 <- src/test.ts:3089:25) [angular]

        Expected undefined to be defined.
            at Object.<anonymous> (webpack:///src/app/shared/fixViewport/fixToViewportTester.component.spec.ts:42:7 <- src/test.ts:144444:27) [ProxyZone]
            at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:80:0 <- src/test.ts:114788:39) [ProxyZone]
            at Object.<anonymous> (webpack:///~/zone.js/dist/jasmine-patch.js:105:9 <- src/test.ts:114487:34) [<root>]

Chrome 59.0.3071 (Windows 10 0.0.0) Directive: FixToViewportDirective should have a defined component FAILED
        Error
            at injectionError (webpack:///~/@angular/core/@angular/core.es5.js:1232:0 <- src/test.ts:1511:86) [angular]
            at noProviderError (webpack:///~/@angular/core/@angular/core.es5.js:1270:0 <- src/test.ts:1549:12) [angular]
            at ReflectiveInjector_._throwOrNull (webpack:///~/@angular/core/@angular/core.es5.js:2771:0 <- src/test.ts:3050:19) [angular]
            at ReflectiveInjector_._getByKeyDefault (webpack:///~/@angular/core/@angular/core.es5.js:2810:0 <- src/test.ts:3089:25) [angular]
            at ReflectiveInjector_._getByKey (webpack:///~/@angular/core/@angular/core.es5.js:2742:0 <- src/test.ts:3021:25) [angular]
            at ReflectiveInjector_.get (webpack:///~/@angular/core/@angular/core.es5.js:2611:0 <- src/test.ts:2890:21) [angular]
            at DynamicTestModuleInjector.NgModuleInjector.get (webpack:///~/@angular/core/@angular/core.es5.js:3579:0 <- src/test.ts:3858:52) [angular]
            at resolveDep (webpack:///~/@angular/core/@angular/core.es5.js:11040:0 <- src/test.ts:11319:45) [angular]
            at createClass (webpack:///~/@angular/core/@angular/core.es5.js:10896:0 <- src/test.ts:11175:91) [angular]
            at createDirectiveInstance (webpack:///~/@angular/core/@angular/core.es5.js:10724:0 <- src/test.ts:11003:37) [angular]
            at createViewNodes (webpack:///~/@angular/core/@angular/core.es5.js:12087:29 <- src/test.ts:12366:49) [angular]
            at callViewAction (webpack:///~/@angular/core/@angular/core.es5.js:12531:0 <- src/test.ts:12810:13) [angular]
            at execComponentViewsAction (webpack:///~/@angular/core/@angular/core.es5.js:12440:0 <- src/test.ts:12719:13) [angular]
            at createViewNodes (webpack:///~/@angular/core/@angular/core.es5.js:12114:0 <- src/test.ts:12393:5) [angular]
        Expected undefined to be defined.
            at Object.<anonymous> (webpack:///src/app/shared/fixViewport/fixToViewportTester.component.spec.ts:42:7 <- src/test.ts:144444:27) [ProxyZone]
            at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:80:0 <- src/test.ts:114788:39) [ProxyZone]
            at Object.<anonymous> (webpack:///~/zone.js/dist/jasmine-patch.js:105:9 <- src/test.ts:114487:34) [<root>]

Chrome 59.0.3071 (Windows 10 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (1.053 secs / 0.076 secs)

how do i inject to the directive the window object it searches for ?

Have a look at this friend: https://stackoverflow.com/questions/36432407/how-to-unit-test-a-directive-in-angular-2 — SrAxi, Jul 19 '17 at 09:09
I am aware of this explanation and actually followed it and then encountered this injection issue i cannot resolve , this explanation doesn't refer to a situation where the directive has an Injection in it's constructor. — Tom k, Jul 19 '17 at 09:13

score 0 · Answer 1 · answered Jul 19 '17 at 09:17

0

Try adding ElementRef to your test module:

 TestBed.configureTestingModule({
            declarations: [
                TestFixToViewPort,
                FixToViewportDirective
            ],
            imports: [ ElementRef ]
});

answered Jul 19 '17 at 09:17

SrAxi

19,787
11
46
65

I tried importing ElementRef as you suggested and running the test resulted in the following Error : Directive: FixToViewportDirective × should have a defined component Error: Unexpected value 'ElementRef' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation. at syntaxError .... – Tom k Jul 19 '17 at 09:31

Angular 2+ Unitest providing directive with a window injected object

1 Answers1