依赖于"nativescript-angular/router“中的RouterExtensions进行导航的单元测试组件

Question

我在一个原生脚本-角度组件上编写单元测试，以测试以下几件事情:1)登录表单的提交功能；2)成功登录后的路由器导航/视图。

在组件中，我使用来自nativescript-angular/router的RouterExtensions进行导航

在组件构造函数中，我使用默认用户凭据初始化组件，并将routerextension作为参数传递。

constructor(private page: Page,private routerExtensions: RouterExtensions){
     this.page.actionBarHidden = true;
     this.user = new User();
     this.user.email = "dennis@gmail.com";
     this.user.password = "password";
 }

在成功登录后，我将用户导航到home页面，其逻辑如下所示。

    submit(){
        if (!this.user.email || !this.user.password) {
            this.alert("Please provide both an email address and password.");
            return;
        }
        this.processing = true;
        if(this.isLoggingIn){
            this.login();
        }else{
            this.register();
        }

    }
    login() {
        console.log(this.user)
        if(this.user){
            this.processing = false;
            this.routerExtensions.navigate(["/home"], { clearHistory: true });
        }else{
            this.processing = false;
            this.alert("Unfortunately we could not find your account.");
        }

    }

我正在使用mocha进行测试，我的单元测试现在看起来像这样

var reflect = require("reflect-metadata");
var component = require("../app/login/login.component");

describe("Test for Login component", ()=>{
    var appComponent;
    beforeEach(()=>{
        appComponent = new component.LoginComponent();
    });

    it("Should Login User", ()=> {
        appComponent.submit();

        assert.equal(appComponent.user.email,"dennis@gmail.com")
        assert.equal(appComponent.user.password,"password")
    });

    it("Should navigate user to home page",()=>{
        // Logic for testing that the view is home page.
    })
});

在运行测试时，我得到以下错误

    TypeError: Cannot read property 'navigate' of undefined

我知道这个错误是由于login()方法中的this.routerExtensions.navigate(["/home"], { clearHistory: true });这一行造成的，因为在注释它的时候测试通过了。

我不确定的是，我如何编写单元测试来测试页面路由和查看用户在.How时是否模拟导航issue.Thanks

Answer 1

这就是我在测试文件中解决这个问题的方法

var reflect = require("reflect-metadata");
var component = require("../app/login/login.component");
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Page } from "tns-core-modules/ui/page/page";


describe("Test for Login component", ()=>{
 let appComponent;
 let page = Page;
 let router = jasmine.createSpyObj("Router", ["navigate"]);
}

  beforeEach(()=>{

        appComponent = new component.LoginComponent(page,router);
    });

   it("Should Login User when login button is clicked", ()=> {
        appComponent.submit();
        expect(router.navigate).toHaveBeenCalledWith(["/home"], { clearHistory: true });
    });