While creating my spec file and settings, I encountered an error in the console: 'An error was thrown in afterAll TypeError: Cannot read properties of undefined (reading 'toLowerCase')',
What could be causing this error to appear?
Here is the configuration in my spec file:
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from "@angular/core";
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { FilterComponent } from "./filter.component";
import { RouterTestingModule } from '@angular/router/testing';
import { CookieModule, CookieService } from 'ngx-cookie';
import { Api } from '../../services/api.service';
fdescribe('filter Component', () => {
let component: FilterComponent;
let fixture: ComponentFixture<FilterComponent>;
let service: Api;
let filterService: FilterService;
let cookieService: CookieService;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule,
RouterTestingModule,
CookieModule.forRoot()
],
declarations: [
FilterComponent,
],
providers: [
Api,
CookieService,
FilterService
],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
}).compileComponents();
});
beforeEach(() => {
cookieService = TestBed.inject(CookieService);
cookieService.put('user', JSON.stringify(user));
fixture = TestBed.createComponent(FilterComponent);
component = fixture.componentInstance;
service = TestBed.inject(Api);
filterService = TestBed.inject(FilterService);
component.ngOnInit();
});
afterEach(() => {
component.ngOnDestroy();
component = null;
fixture = null;
service = null;
filterService = null;
cookieService = null;
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('ngOnInit()', () => {
it('Should call clearFilter()', () => {
let spy1 = spyOn(component, 'clearFilter');
component.ngOnInit();
expect(spy1).toHaveBeenCalled();
});
});
});
I have imported all necessary components for this project. Here is my TypeScript file:
import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { Language } from '../../services/language.service';
import { Observable, concat, of, Subject, Subscription } from 'rxjs';
import { distinctUntilChanged, switchMap, filter } from 'rxjs/operators';
import { CookieService } from 'ngx-cookie';
import { Api } from '../../services/api.service';
import { FilterService } from '../../services/filter.service';
import { LocalStorageCache } from '../../services/local-storage-cache.service';
import * as _ from 'lodash';
import { SearchbarService } from '../../services/searchbar.service';
import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'is-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.scss']
})
export class FilterComponent implements OnInit, OnDestroy {
@Input() type: string;
@Input() filterObj: any;
@Output() onFilter: EventEmitter<any> = new EventEmitter<any>();
category: string = '';
search: Subject<string> = new Subject<string>();
selectedElems: MultiSelectItem[] = [];
hoveredDate: NgbDate | null = null;
constructor(
public lang: Language,
private api: Api,
public filterService: FilterService,
public searchbar: SearchbarService,
public localStorageCache: LocalStorageCache,
private cookie: CookieService,
public formatter: NgbDateParserFormatter,
private calendar: NgbCalendar
) {
this.user = JSON.parse(this.cookie.get('user'));
}
updateFilterSubscription: Subscription;
filterSubscription: Subscription;
ngOnDestroy() {
this.updateFilterSubscription.unsubscribe();
this.filterSubscription.unsubscribe();
}
ngOnInit() {
this.clearFilter();
this.filter();
this.updateFilterSubscription = this.filterService.update.subscribe((componentFilter: object) => {
this.clearFilter();
this.filterObj = { ...this.filterObj, ...componentFilter };
if (componentFilter && this.type != 'verdicts') {
this.category = ['date_range', 'affinity', 'affinity_u', 'relevant', 'country'].indexOf(Object.keys(componentFilter)[0]) !== -1 ? 'people' : Object.keys(componentFilter)[0];
}
this.fillMultiSelect()
});
this.filterSubscription = this.filterService.filter.subscribe(() => {
this.filter();
});
this.getPillars();
}
}