I am using Jquery in one of the component in my Angular project,
When I started testing the component the error started showing. Here is my component.
import { Component, OnInit, Input, Output, AfterViewInit, AfterViewChecked, ChangeDetectorRef } from '@angular/core';
import { FormControl } from '@angular/forms';
import * as $ from 'jquery';
@Component({
selector: 'test-component',
templateUrl: './test-component.component.html',
styleUrls: ['./test-component.component.scss']
})
export class TestComponent implements OnInit, AfterViewInit {
constructor(private chngRef: ChangeDetectorRef) {}
ngOnInit() {
}
ngAfterViewInit(): void {
this.chngRef.detach();
let rows = document.getElementsByClassName("test_class")[0].getElementsByClassName("test_sub_class").length;
// code to access DOM element inside rows.
}
}
I want to test this class and for that the below specs.ts file I am using.
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestComponent } from './test-component.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import * as $ from 'jquery';
describe('TestComponent', () => {
let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TestComponent, EscapeHtmlPipe ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [EscapeHtmlPipe]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
When I run the above test case, I get the following error! What things needed to be added in above specs to import jquery correctly? What is the reason of this error?
TypeError: Cannot read property 'getElementsByClassName' of undefined
....
....
....
....
at <Jasmine>
at TestComponent.ngAfterViewInit (http://localhost:9876/_karma_webpack_/src/app/test-component/test-Component.component.ts:15:20)
at callProviderLifecycles (http://localhost:9876/Users/node_modules/@angular/core/fesm2015/core.js:28206:1)
at callElementProvidersLifecycles (http://localhost:9876/Users/node_modules/@angular/core/fesm2015/core.js:28171:1)
at callLifecycleHooksChildrenFirst (http://localhost:9876/Users/node_modules/@angular/core/fesm2015/core.js:28153:1)
at checkAndUpdateView (http://localhost:9876/Users/node_modules/@angular/core/fesm2015/core.js:38386:1)
at callWithDebugContext (http://localhost:9876/Users/node_modules/@angular/core/fesm2015/core.js:39716:1)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:9876/Users/node_modules/@angular/core/fesm2015/core.js:39299:1)
at ViewRef_.detectChanges (http://localhost:9876/Users/node_modules/@angular/core/fesm2015/core.js:27092:1)
at ComponentFixture._tick (http://localhost:9876/Users/@angular/core/fesm2015/testing.js:317:1)
at http://localhost:9876/Users/components/components/node_modules/@angular/core/fesm2015/testing.js:334:20
Aucun commentaire:
Enregistrer un commentaire