Currently, I am faced with the challenge of creating a test for a directive that requires a window object to be passed into its constructor.
This is the code snippet for the directive:
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;
// other necessary input initialization
private windowResize$: Subscription;
constructor(private element: ElementRef,
@Inject('$window') private $window: any) {}
// various lifecycle hooks and methods implementation
Whenever I attempt to set up a test component in which this directive is used within the template, I encounter an error related to injections. Here is the test specification file:
import {Component, ElementRef, DebugElement} from '@angular/core';
// additional imports
// Component setup
@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();
});
})
Additionally, here is the error trace encountered:
Error Trace:
× should have a defined component
Error at injectionError
Expected undefined to be defined.
- Additional details of the error stack -
Chrome 59.0.3071 (Windows 10 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (1.053 secs / 0.076 secs)
Can anyone provide guidance on how to correctly inject the required window object into the directive during testing?