mercredi 1 janvier 2020

Angular test case Failing using command npm test Angular project

Please help me to resolve my issues with my Angular project. As It is giving me errors in my spec file while run with npm test.

Sharing my whole source code and errors what I am getting.

navbar.component.html

<div class="app-navbar">
  <ul>
    <li class="nav-item" *ngFor="let navItem of subsections" [class.active-subsection]="currentSubSection===navItem">
      <a href="javascript:void(0);" (click)="dispatchAction(navItem)"> </a>
    </li>
  </ul>
</div>

navbar.component.ts

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { News } from '../../model/news';

// ngrx store 
import { AppState } from '../../store/reducers';
import { getNewsSection } from '../../store/selectors/news.selectors';
import * as fromActions from '../../store/actions';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})

export class NavbarComponent implements OnInit {
  sectionNews: News[];
  currentSubSection: string;
  subsections: string[] = [];
  unsubscribe: Subject<void> = new Subject();

  constructor(private store: Store<AppState>) { }

  ngOnInit() {
    this.initSubscriptions();
  }

  /**
   * Holding Subscriptions
   */
  initSubscriptions(): void {

    // subscription to store & selector to pull all section news
    this.store.pipe(select(getNewsSection))
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(
        sectionNews => {
          this.currentSubSection = '';
          this.subsections = [];
          for (const item of sectionNews) {
            //pulling all subsection which is unique and non empty
            if (item.subsection.length && !this.subsections.includes(item.subsection)) {
              this.subsections.push(item.subsection);
            }
          }
        }
      );
}
  /**
   * Filter news by dispatching subsection filter action
   * @param filter - subsection string
   */
  dispatchAction(filter: string): void {
    this.currentSubSection = filter;
    this.store.dispatch(new fromActions.FilterSubSection(filter));
  }

}

navbar.component.spec.ts

it('should display subsection in template', async() => {
    // assign mock values to subsections array
    component.subsections = ['movie', 'tech', 'money'];
    // <a> tag in html will contain one of values of subsections array. select the <a> tag using query(By.css())
    const anchorElement = fixture.debugElement.query(By.css('a')).nativeElement.textContent;


    // after assigning values to subsections, detect changes. this is async call.
    fixture.detectChanges();

    expect(component.subsections).toContain(anchorElement);
  });

Errors while running using npm test

ERROR: 'Unhandled Promise rejection:', 'Cannot read property 'nativeElement' of null', '; Zone:', 'ProxyZone', '; Task:', 'setTimeout', '; Value:', TypeError{__zone_symbol__currentTask: ZoneTask{zone: Zone{_properties: ..., _parent: ..., _name: ..., _zoneDelegate: ...}, runCount: 0, _zoneDelegates: null, _state: 'notScheduled', type: 'macroTask', source: 'setTimeout', data: Object{handleId: ..., isPeriodic: ..., delay: ..., args: ...}, scheduleFn: function scheduleTask(task) { ... }, cancelFn: null, callback: function () { ... }, invoke: function () { ... }}}, 'TypeError: Cannot read property 'nativeElement' of null

ERROR: 'Unhandled Promise rejection:', 'Cannot read property 'triggerEventHandler' of null', '; Zone:', 'ProxyZone', '; Task:', 'setTimeout', '; Value:', TypeError{__zone_symbol__currentTask: ZoneTask{zone: Zone{_properties: ..., _parent: ..., _name: ..., _zoneDelegate: ...}, runCount: 0, _zoneDelegates: null, _state: 'notScheduled', type: 'macroTask', source: 'setTimeout', data: Object{handleId: ..., isPeriodic: ..., delay: ..., args: ...}, scheduleFn: function scheduleTask(task) { ... }, cancelFn: null, callback: function () { ... }, invoke: function () { ... }}}, 'TypeError: Cannot read property 'triggerEventHandler' of null
    at Object.click (http://localhost:9876/_karma_webpack_/webpack:/testing/index.ts:39:8)
    at Object.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/navbar/navbar.component.spec.ts:62:5)
    at step (http://localhost:9876/_karma_webpack_/main.bundle.js:257:23)
    at Object.next (http://localhost:9876/_karma_webpack_/main.bundle.js:238:53)
    at http://localhost:9876/_karma_webpack_/main.bundle.js:232:71
    at new ZoneAwarePromise (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:729:1)
    at webpackJsonp../src/app/components/navbar/navbar.component.spec.ts.__awaiter (http://localhost:9876/_karma_webpack_/main.bundle.js:228:12)
    at Object.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/navbar/navbar.component.spec.ts:57:65)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:334:1)

These error I am getting, please help to resolve and suggest what i can do to resolve this.

I can share my package json file also. please guide me as I am new in this area. I am running all one npm test and the above error are coming. This spec file was there in project.I did not write this. I am only trying to execute test case. For any more information, please reply help and help.

Aucun commentaire:

Enregistrer un commentaire