Question

我正在为Angular应用编写单元测试，该应用将从数据库中删除帐户。为此，我单击“删除”按钮。然后在.ts文件上调用该函数。这将通过调用API删除帐户。

我想编写单元测试，以查看是否使用HttpTestingModule调用了此API，但在删除帐户后的代码中，我使用router.navigate导航到其他页面。当代码命中时，它会发出警告：“导航在Angular区域之外触发，您是否忘记了调用“ ngZone.run（）”？”

ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'accountsList'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'accountsList'
Error: Cannot match any routes. URL Segment: 'accountsList'
    at ApplyRedirects.noMatchError (./node_modules/@angular/router/fesm5/router.js?:1455:16)
    at CatchSubscriber.eval [as selector] (./node_modules/@angular/router/fesm5/router.js?:1436:29)
    at CatchSubscriber.error (./node_modules/rxjs/_esm5/internal/operators/catchError.js?:40:31)
    at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at ThrowIfEmptySubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26), 'Error: Cannot match any routes. URL Segment: 'accountsList'
    at ApplyRedirects.noMatchError (./node_modules/@angular/router/fesm5/router.js?:1455:16)
    at CatchSubscriber.eval [as selector] (./node_modules/@angular/router/fesm5/router.js?:1436:29)
    at CatchSubscriber.error (./node_modules/rxjs/_esm5/internal/operators/catchError.js?:40:31)
    at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at ThrowIfEmptySubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)'

这是我尝试过的

test.spec.ts

 it ('should delete account, if account exist', ()=> {
    let spyOnDelete = spyOn (component,'deleteRecord').and.callThrough();
    fixture.detectChanges();
    component.record.accountid = "Account1";
    fixture.detectChanges();
    let deleteButtonDOM = fixture.debugElement.query(By.css('#deletebtn'));
    console.log(deleteButtonDOM.nativeElement);
    deleteButtonDOM.triggerEventHandler('click',null);
    fixture.detectChanges();
    expect(spyOnDelete).toHaveBeenCalled();  //test passes 

    const req = _HttpTestingController.expectOne('/api/accounts/'+component.record.accountid);//test fails
    expect(req.request.method).toBe("DELETE");
    req.flush({status:"SUCCESS"});
    expect(component.consoleMessages.includes("POST: SUCCESS in /api/accounts")).toBe(true);


..what must be written to 
  })

test.component.ts

  deleteRecord(id) {
    this.spinner.show();
    this.http.delete('/api/accounts/' + id)
    .subscribe(res => {
        this.spinner.hide();
        if (res['status'] == "FAILURE") {
          this.consoleMessages += "\nPOST: ERROR in /api/accounts\n" + JSON.stringify(res);  
        } else {
          this.consoleMessages += "\nPOST: SUCCESS in /api/accounts\n" + JSON.stringify(res);
          this.router.navigate(['/accountsList']);//this is creating the problem xxxxxxxxxxxxxxxx
        }
      }, (err) => {
        this.consoleMessages += "\nPOST: ERROR in /api/accounts\n" + JSON.stringify(err); 
        this.spinner.hide();
        console.log(err);
      }
    );
  }

Answer 1

您应该嘲笑路由器。

我使用RouterTestingModule的方式。设置如下：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      RouterTestingModule.withRoutes([
        { path: "", component: AccountComponent },
        { path: "**", redirectTo: "" }
      ])
    ],
    declarations: [AccountComponent],
    providers: []
  }).compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(AccountComponent);
  component = fixture.componentInstance;
  router = TestBed.inject(Router);
  fixture.detectChanges();
});

然后在您的测试中：

it('THEN: should navigate to /accounts', () => {
      const ID_TO_DELETE = 1;
      const routerNavigateSpy = jest
        .spyOn(router, 'navigate')
        .mockImplementation(() => of(true).toPromise());
      component.deleteRecord(ID_TO_DELETE);
      expect(routerNavigateSpy).toHaveBeenCalledWith(['/accounts']);
});

奖金

这篇文章解释了Angular区域如何工作：ngZone

Answer 2

最小的间谍和警告router.navigate的解决方案

describe('Component', () => {
  ... other variables
  let router: jasmine.SpyObj<Router>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes([yourPaths])
      ],
      ...other declarations
    })
      .compileComponents();
  }));

  beforeEach(() => {
    ...other initializing stuffs
    router = TestBed.get(Router);
  });

  it('should navigate', () => {
     spyOn(router, 'navigate');
     component.navigateToRoute();
     expect(router.navigate).toHaveBeenCalledWith(['/expected-path']);
  });
});

Angular单元测试：WARN：“导航在Angular区域之外触发，您是否忘记了调用“ ngZone.run（）”？”

2 个答案: