角茉莉花用不同的論點測驗間諜

我正在學習測驗的基礎知識，并且正在使用我使用 Angular 和 Firebase 開發的聊天工具。

我有一種方法可以根據不同的提供者對用戶進行身份驗證。提供者的名稱將作為引數傳遞。它將呼叫服務上的另一個方法來生成邏輯。

當我們按下按鈕時將呼叫 authentication() ，這樣使用 google 登錄的按鈕將呼叫authentication('google')，使用 facebook 登錄的按鈕將被呼叫，authentication ('facebook')依此類推。

login.component.ts

 authenticate(provider:String){

    
      this._chat.login(provider).then(()=>{
      }).catch((error)=>{
        console.log ("something went wrong with the authenticate method", error);
      });
 
    
  }

為了進行測驗，我在該方法上創建了一個間諜，并嘗試重新創建不同的點擊。當我做類似的東西時

spyOn(component, 'authenticate').withArgs('google');
buttonElement.click();
expect(component.authenticate).toHaveBeenCalledWith('google');

但是當我用不同的引數進行另一個測驗時：

spyOn(component, 'authenticate').withArgs('facebook');
buttonElement.click();
expect(component.authenticate).toHaveBeenCalledWith('facebook');

它拋出一個錯誤，因為它似乎呼叫了它第一次呼叫的引數：

我一直在調查并嘗試使用此處提出的解決方案，但它不起作用。

正如您在以下代碼中看到的那樣，我正在重置beforeEach().

每次使用 spy 并使其作業時，如何使用不同的引數？我還能做錯什么？

這是整個規范代碼。

login.component.spec.ts

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

import { LoginComponent } from './login.component';
import { ChatService } from '../../services/chat-service/chat.service';
import { DebugElement } from '@angular/core';
import { AngularFireModule } from '@angular/fire/compat';
import { environment } from 'src/environments/environment';
import { RouterTestingModule } from '@angular/router/testing';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let debugElement: DebugElement;
  let _chat:ChatService;
  let buttonElement:HTMLButtonElement;
  let spy1:any; 
   
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ LoginComponent ],
      imports:[RouterTestingModule,
        AngularFireModule.initializeApp(environment.firebase),
      ],
      providers: [ChatService]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    debugElement = fixture.debugElement;
    _chat=debugElement.injector.get(ChatService);
    component = fixture.componentInstance;
    buttonElement = fixture.debugElement.nativeElement.querySelector('.button-login');
   spy1=spyOn(component, 'authenticate');

   spy1.calls.reset();


    
  });

  it('should click google button and call authenticate method with google', () => {

    spy1.withArgs('google');
    buttonElement.click();
    expect(component.authenticate).toHaveBeenCalledWith('google');
   
  });

  it('should click facebook button and call authenticate method with facebook', () => {

 
    spy1.withArgs("facebook"); 
    buttonElement.click();
    expect(component.authenticate).toHaveBeenCalledWith('facebook');
   
  });


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

uj5u.com熱心網友回復：

我不明白用orauthenticate呼叫的控制是什么，我假設它們是不同的按鈕。googlefacebook

如果是這種情況，您需要對特定按鈕元素的新參考。

it('should click google button and call authenticate method with google', () => {

    spy1.withArgs('google');
    // get the google button element
    const googleButton = fixture.debugElement.query(By.css('button#google')).nativeElement;
    googleButton.click();
    expect(component.authenticate).toHaveBeenCalledWith('google');
   
  });

  it('should click facebook button and call authenticate method with facebook', () => {

 
    spy1.withArgs("facebook"); 
    const facebookButton = fixture.debugElement.query(By.css('button#facebook')).nativeElement;
    facebookButton.click();
    expect(component.authenticate).toHaveBeenCalledWith('facebook');
   
  });

確保每個按鈕都有一個唯一的選擇器（id="facebook", id="google"），否則 By.css('.button-login') 將找到它在 HTML 匹配中找到的第一個元素.button-login。

標籤：有角度的 测试 茉莉花

上一篇：Paratest，可以測驗特定功能嗎？

下一篇：如何回傳網頁上元素的出現次數