单元测试ionic2-推送未加载页面

Question

我们正在Ionic2中开发一个应用程序，我们已经进行了一些测试，但现在我们面临NavController的push方法的问题。

我们有一个名为TopicsComponent的组件。该组件有一个名为selectTopic的方法。此方法获取选定的主题并将另一个页面推送到堆栈上。这是代码：

public selectTopic(topic: TopicModel) {
    if (topic.hasTopics) {
        this.nav.push(TopicsComponent, { target: topic.target });
    } else {
        this.nav.push(ModulesComponent, { target: topic.target });
    }
}

这是一个非常简单的逻辑：

如果它有主题，则"重定向"到它自己（TopicsComponent），否则，"重定向"至ModulesComponent

现在我需要测试，一旦调用了"selectTopic"方法，就应该再次调用"TopicsComponent"，但这并没有发生。

这就是测试：

it("should get subtopics", inject([NavController, NavParams, XHRBackend, BackendService], (navController, navParams, mockBackend, backendService) => {
    // Arrange
    mockBackend.connections.subscribe((connection: MockConnection) => {
        connection.mockRespond(new Response(new ResponseOptions({
            body: {
                "id": "e0000001",
                "subject": "english",
                "type": "topics",
                "title": "Language Practice",
                "breadcrumb": "ENGLISH | TOPICS",
                "transitions": [
                    {
                        "transitionType": "next",
                        "conditions": [
                            {
                                "target": "e0000002",
                                "title": "Grammar",
                                "subject": "english",
                                "type": "modules"
                            },
                            {
                                "target": "e0000057",
                                "title": "Vocabulary",
                                "subject": "english",
                                "type": "modules"
                            },
                            {
                                "target": "e0000088",
                                "title": "Style",
                                "subject": "english",
                                "type": "modules"
                            }
                        ]
                    }
                ]
            }
        })));
    });
    var model = new TopicModel();
    model.hasTopics = true;
    model.target = "any";
    // Act
    let component = new TopicsComponent(navController, navParams, backendService);
    spyOn(component["nav"], "push").and.stub();
    component.selectTopic(model);
    // Assert
    expect(component["subject"]).toBe("english");
    expect(component["type"]).toBe("topics");
    expect(component["breadcrumb"]).toBe("ENGLISH | TOPICS");
    expect(component["title"]).toBe("Language Practice");
    expect(component["models"].length).toBe(3);
}));

以下是我如何模拟NavController的push方法：

provide(NavController, { useValue: { push: NavController.prototype.push } })

push-mock似乎不起作用，这就是为什么没有再次调用"TopicsComponent"的原因。知道如何正确地模拟push方法吗？

更新：

push方法将不再调用页面，因为它不是e2e测试。我应该简化我的考试。我想我错过了一些测试概念。

Answer 1

我使用的测试概念没有多大意义，我想重定向，然后在另一个页面中检查结果，但这不是e2e测试。

因此，在这种情况下，我写了两个测试，涵盖了我所期望的内容：

it("should call TopicsComponent when topic has subtopics", inject([NavController, NavParams, XHRBackend, BackendService], (navController, navParams, mockBackend, backendService) => {
    // Arrange
    let model = new TopicModel();
    model.hasTopics = true;
    model.target = "any";
    spyOn(navController, "push");
    let component = new TopicsComponent(navController, navParams, backendService);
    // Act
    component.selectTopic(model);
    // Assert
    expect(navController.push).toHaveBeenCalledWith(TopicsComponent, { target: "any" });
}));
it("should call ModulesComponent when topic has no subtopics", inject([NavController, NavParams, XHRBackend, BackendService], (navController, navParams, mockBackend, backendService) => {
    // Arrange
    let model = new TopicModel();
    model.hasTopics = false;
    model.target = "any";
    spyOn(navController, "push");
    let component = new TopicsComponent(navController, navParams, backendService);
    // Act
    component.selectTopic(model);
    // Assert
    expect(navController.push).toHaveBeenCalledWith(ModulesComponent, { target: "any" });
}));