lundi 18 novembre 2019

How to test Angular Component which use Jquery?

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