Jasmine/Karma：TypeError：this.role.toLowerCase 不是函数答案

【问题标题】：Jasmine/Karma: TypeError: this.role.toLowerCase is not a functionJasmine/Karma：TypeError：this.role.toLowerCase 不是函数
【发布时间】：2020-10-13 20:14:01
【问题描述】：

我正在为我们团队正在开发的应用程序中的一个页面编写测试用例。但是我在一个测试用例中遇到了错误，我没有找到解决办法。我的规格文件是

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();
  });
});

当我得到错误时它正在测试的代码是这样的

  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)
  }

当测试到达第一个 this.role.toLowerCase() 时，我得到了这个帖子标题的错误。

我尝试为角色创建一个模拟，为 toLowerCase 创建一个模拟，但最终会出现更多错误。我也尝试过使用 spyOn。

如何修复此错误消息？

【问题讨论】：

this.authenticationService.getUserRole() 是否总是 100% 的时间返回 string？还是偶尔会返回null 或undefined 之类的东西？如果是这样，那么您必须采取一些措施来处理这些情况，因为如果调用null.toLowerCase()，您将收到此错误
wind up with more errors ???这些错误是什么。您应该始终将服务模拟为单元测试的一部分。如果您可以分享这些错误，我们可以帮助您解决问题
目前，我正在研究应用程序中的其他组件。我可能会在今天晚些时候回到这个话题。对于 Shashank 的评论，我相信也许我错了，我创建 mockAuthenticationService 的部分是对服务的模拟。对于这个组件，我可能必须以不同的方式模拟它，但对于这个应用程序中的所有其他组件，这种模拟方式都有效。

标签： javascript angular typescript jasmine karma-jasmine

【解决方案1】：

所以我改变了我模拟身份验证服务的方式

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([]));

到这里

export class mockAuthentication{
  getUserRole(){
    return "admin";
  };
  getUserFullName(){
    return "Test User";
  }
};

并从

更新提供声明

{provide: AuthenticationService, useValue: mockAuthenticationService},

到这里

{provide: AuthenticationService, useClass: mockAuthentication},

我的测试现在通过了。在我看来，第一种模拟服务的方法已经在同一个应用程序的多个其他组件中工作了。

【讨论】：