业力测试 Angular - this.alertService.danger 不是函数

Posted 2023-03-16

【中文标题】业力测试 Angular - this.alertService.danger 不是函数

【英文标题】：Karma Testing Angular - this.alertService.danger is not a function

【发布时间】：2020-11-16 12:46:54

【问题描述】：

当我尝试使用 karma 进行测试时，显示的问题..

TypeError: this.alertService.danger is not a function

这是我的组件，

import  Component, OnInit, ViewChild, ElementRef, AfterViewChecked  from '@angular/core';
import  Router   from '@angular/router';
import  ApiService  from '../services/api.service';
import  NgxSpinnerService  from "ngx-spinner";
import  AlertService  from 'ngx-alerts';

@Component(
  selector: 'app-review',
  templateUrl: './review.component.html',
  styleUrls: ['./review.component.scss']
)
export class ReviewComponent implements OnInit  
  @ViewChild('scrollMe',  read: ElementRef ) public scroll: ElementRef;
  @ViewChild('scrollMe',  read: ElementRef ) public scrollbottom: ElementRef;

  cartDetails: any;
  cartId:any;
  menuItems:any;
  expectedDeliveryTime:any
  noOfNulls: any;

  constructor(
    public router: Router,
    public apiService: ApiService,
    private alertService: AlertService,
    private spinner: NgxSpinnerService)  
    this.spinner.show();
    this.cartId = localStorage.getItem('cartId');
    
    if(!this.cartId)
      
      this.noOfNulls = localStorage.getItem('noOfNulls');
    
      if(!this.noOfNulls)
        localStorage.setItem('noOfNulls','1')
        this.alertService.danger("Please add at least one product to the cart.");
        this.changeSomething();
       else if(this.noOfNulls==1) 
        localStorage.setItem('noOfNulls','2');
        this.alertService.danger("Please add at least one product to the cart.");
        this.changeSomething();
      
      else
        localStorage.setItem('noOfNulls','')
        this.router.navigate(['home']);
      


     

  

  ngOnInit(): void 
    this.apiService.getCartDetais(this.cartId).subscribe((res)=>
      this.spinner.hide();
      this.cartDetails = res.body.cart;
      this.menuItems = res.body.cart.menuItems;

      this.expectedDeliveryTime = res.body.expectedDeliveryTime;
      localStorage.setItem('expectedDeliveryTime',this.expectedDeliveryTime)

    );
    

  

  confirm() 
    this.router.navigate(['subscription']);
  

  goBack() 
    localStorage.setItem('val','0');
    this.router.navigate(['product']);
  

  cancel() 
    this.router.navigate(['home'])
  
  
  changeSomething()
    localStorage.setItem('val','0');
    this.router.navigate(['product']);
    
  


  

spect.ts，

import  async, ComponentFixture, TestBed  from '@angular/core/testing';

import  ReviewComponent  from './review.component';
import  RouterTestingModule  from '@angular/router/testing';
import  HttpClient, HttpClientModule, HttpHandler  from '@angular/common/http';
import  FormBuilder  from '@angular/forms';
import  AlertService  from 'ngx-alerts';
import  TestAlertService  from '../services/test-alert.service';

describe('ReviewComponent', () => 
  let component: ReviewComponent;
  let fixture: ComponentFixture<ReviewComponent>;

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      declarations: [ ReviewComponent ],
      imports: [RouterTestingModule,HttpClientModule],
      providers: [
        HttpClient,
        FormBuilder,
        HttpHandler,
         
          provide: AlertService, 
          useClass: TestAlertService 
        
      ]
    )
    .compileComponents();
  ));

  beforeEach(() => 
    fixture = TestBed.createComponent(ReviewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  );

  it('should create', () => 
    expect(component).toBeTruthy();
  );
);

谢谢.................................................. ..................................................... ..................................................... ..................................................... ....................................

【问题讨论】：

你的TestAlertService有危险功能吗？如果不创建一个函数。

一个模拟函数，对吧？

【参考方案1】：

它应该在您的 TestAlertService 中存在功能危险。尝试仅在规范中创建模拟类。

import  async, ComponentFixture, TestBed  from '@angular/core/testing';

import  ReviewComponent  from './review.component';
import  RouterTestingModule  from '@angular/router/testing';
import  HttpClient, HttpClientModule, HttpHandler  from '@angular/common/http';
import  FormBuilder  from '@angular/forms';
import  AlertService  from 'ngx-alerts';

export class TestAlertService 
  danger() 
    console.log("Danger Alert")
  


describe('ReviewComponent', () => 
let component: ReviewComponent;
let fixture: ComponentFixture<ReviewComponent>;

beforeEach(async(() => 
    TestBed.configureTestingModule(
    declarations: [ ReviewComponent ],
    imports: [RouterTestingModule,HttpClientModule],
    providers: [
        HttpClient,
        FormBuilder,
        HttpHandler,
         
        provide: AlertService, 
        useClass: TestAlertService 
        
    ]
    )
    .compileComponents();
));

beforeEach(() => 
    fixture = TestBed.createComponent(ReviewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
);

it('should create', () => 
    expect(component).toBeTruthy();
);
);

它应该适合你。