时间戳

首页 > 解决方案 > 无法监视 window.confirm()

angular - 无法监视 window.confirm()

问题描述

在我的 Angular 8 项目中，单击注销时，会出现一个确认窗口并询问是/否以注销。我想测试确认窗口是否出现。在我的spec.ts，我写spyOn(window, 'confirm').and.returnValue(false);的。我不知道这是否正确。我需要两件事。首先，确认窗口是否出现；其次，如何使用茉莉花点击“是”选项。请帮忙。下面是我的代码：

header.component.ts

...
import { AuthenticationService } from '../../core/authentication.service';
...
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
legalName: any;
constructor(public authService: AuthenticationService, public accountService: AccountService, public router: Router) {}

ngOnInit() {
    this.accountService.getTransactionHistory().subscribe((res) => {
      res = JSON.parse(res);
      this.legalName = res['Result'].array.RevTrxn[0].trxn.legalName;
    })
  }

signout() {
    this.authService.signout();
  }

身份验证.service.ts

signout(){
    var res = window.confirm("Are you Sure!")
    if(res){
      window.localStorage.removeItem('token');
      this.router.navigate(['/login'])
    } 
  }

header.component.spec.ts

import { HeaderComponent } from './header.component';
import { AuthenticationService } from 'src/app/core/authentication.service';
import { AccountService } from 'src/app/core/account.service';
import transactions from 'src/app/core/model/mock-transaction-history.json';

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;
  let debugElement: DebugElement;
  let mockAuthService;
  let mockAccountService;
  let trans;
  beforeEach(async(() => {
    trans = transactions;
    mockAccountService = jasmine.createSpyObj(['getTransactionHistory']);
    mockAuthService = jasmine.createSpyObj(['signout']);
    TestBed.configureTestingModule({
      declarations: [HeaderComponent],
      imports: [RouterTestingModule, HttpClientTestingModule],
      providers: [
        { provide: AccountService, useValue: mockAccountService },
        { provide: AuthenticationService, useValue: mockAuthService },
      ],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    debugElement = fixture.debugElement;
  });

  it('clicking on "Sign Out" should ask user to confirm', () => {
    mockAccountService.getTransactionHistory.and.returnValue(of(JSON.stringify(trans)));
    const callSignOut = mockAuthService.signout.and.returnValue([]);
    spyOn(window, 'confirm').and.returnValue(false);
    const signOut = debugElement.query(By.css('.sign-out'));
    signOut.triggerEventHandler('click', {});
    fixture.detectChanges();
    expect(window.confirm).toHaveBeenCalled();
  });

});

在运行此程序时，我进入Expected spy confirm to have been called.了业力控制​​台。我不知道为什么它没有被调用。我已经测试了signout()函数是否AuthenticationService被调用。无论如何它都会被调用。如您所见，该window.confirm()方法位于函数内部。signout()

标签： angularunit-testingkarma-jasmine

解决方案

我会将我的反馈作为答案而不是评论，原因是，您进行单元测试的方式有点误导。

单元测试的想法是隔离每个文件（服务、组件、管道等），然后测试其功能。为了隔离，我们使用了模拟。我可以看到你做得很完美。

现在，作为单元测试的一部分，您应该测试是否this.authService.signout();调用了signout(). authService.signout()调用是否windows.confirm应该是AuthenticationService.

谈到您的测试window对象问题（对于您service应该做的），您需要创建对象serviceWindowObj并将其分配window给它。我已经涵盖了我替换 window对象的类似问题。看看它。我想你可以从中得到一个想法。

干杯！

由于您是 Angular 单元测试的新手，请尝试这篇文章，该文章底部包含更多链接，以帮助您了解最佳实践

推荐阅读