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