Currently, I am in the process of writing a test case for a page within an application that our team is actively developing. However, I have encountered a challenging error within one of the test cases that I am struggling to overcome. Below is my Spec file:
import { UserApiService } from 'src/app/services/api/user-apiservice';
import { MatDialog } from '@angular/material/dialog';
import { AuthenticationService } from '../../services/shared/authentication.service';
import { MainViewComponent } from './mainview.component';
import { of } from 'rxjs';
describe('MainViewComponent', () => {
let component: MainViewComponent;
let fixture: ComponentFixture<MainViewComponent>;
let mockTlsApiService, mockMatDialog, mockAuthenticationService;
beforeEach(async(() => {
mockAuthenticationService = jasmine.createSpyObj(['getUserData','getDateData']);
mockAuthenticationService.getUserRole = jasmine.createSpy().and.returnValue(of(['admin']));
mockAuthenticationService.getUserRole.toLowerCase = jasmine.createSpy().and.returnValue(of(['admin']));
mockAuthenticationService.getUserFullName = jasmine.createSpy().and.returnValue(of([]));
TestBed.configureTestingModule({
declarations: [ MainViewComponent ],
providers: [
{provide: UserApiService, useValue: mockTlsApiService},
{provide: MatDialog, useValue: mockMatDialog},
{provide: AuthenticationService, useValue: mockAuthenticationService},
],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MainViewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
The section of code that triggers the error message during testing is as follows:
constructor(
private repoService: UserApiService,
public dialog: MatDialog,
private authenticationService: AuthenticationService,
) {
}
ngAfterViewInit(): void {
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'origDate': return new Date(item.origDate);
default: return item[property];
}
};
}
ngOnInit(): void {
this.getQueues();
this.getData();
this.toolOrderNoFilterFunc(); this.toolNoFilterFunc(); this.eclFilterFunc(); this.abbrFilterFunc(); this.seriesFilterFunc(); this.nameFilterFunc(); this.toolTypeFilterFunc();
this.toolChangeFilterFunc(); this.ccnDesFilterFunc(); this.ccnFabFilterFunc(); this.revFilterFunc();
}
. . .
getQueues(){
this.role=this.authenticationService.getUserRole();
this.allQueues = ['ME1', 'ME2', 'Est', 'Safe', 'TFab', 'Fin', 'Acct', 'Shop Stat','Rel']
this.userFullName = this.authenticationService.getUserFullName();
//is it Tfab or Tool???
if(this.role.toLowerCase().search("admin") != -1 ){
this.arrayQueues = ['ME1', 'ME2', 'Est', 'Safe', 'TFab', 'Fin', 'Acct', 'Shop Stat','Rel']
//this.arrayQueues = ['TFab', 'Fin', 'ME1']
} else {
if(this.role.toLowerCase().search("me or designer") != -1 ){
this.arrayQueues.push('ME1')
this.arrayQueues.push('ME2')
}
if(this.role.toLowerCase().search("estimating") != -1 ){
this.arrayQueues.push('Est')
}
if(this.role.toLowerCase().search("saftey") != -1 ){
this.arrayQueues.push('Safe') //is it SAF or Safe???
}
if(this.role.toLowerCase().search("tool fab") != -1 ){
//is it Tfab or Tool???
this.arrayQueues.push('TFab')
}
if(this.role.toLowerCase().search("finance") != -1 ){
this.arrayQueues.push('Fin')
}
if(this.role.toLowerCase().search("accountability") != -1 ){
this.arrayQueues.push('Acct')
}
if(this.role.toLowerCase().search("read only") != -1 ){
this.arrayQueues = this.allQueues
}
}
this.isempty = false;
// console.log(this.arrayQueues)
}
When the execution reaches the first instance of this.role.toLowerCase(), an error is triggered which is described in the title of this post.
I have attempted creating mocks for both role and toLowerCase functions, however, these attempts resulted in additional errors. I also experimented with spyOn without success.
Could you suggest a possible solution to resolve this error message?