Question

我们正在Ionic2开发一个应用，我们已经有一些测试，但现在我们遇到了 NavController 的推送方法的问题。

我们有一个名为 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 } })

看起来推模拟不起作用，这就是为什么不再调用“TopicsComponent”的原因。知道如何正确模拟推送方法吗？

更新：

推送方法永远不会再次调用该页面，因为它不是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" });
}));

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

1 个答案: