Question

我使用Angular 1.5组件创建了导航。但面临测试困难。我是Angular和单元测试的新手。请在此PLUNKER

上找到代码

这是我的组成部分。

    module.component('firstComponent', {
    templateUrl: "1.html",
    bindings: {
      "$router": "<"
    },
    controller: function($rootScope) {

      var $ctrl = this;

      $rootScope.title = "Title from Page 1";

      $ctrl.goToNextPage = function() {
        $ctrl.$router.navigate(["Second"]);
      };

     }
    });

我正在尝试测试当前页面是否具有正确的标题以及是否导航到下一页。

这是我的test-spec.js

      describe("Check if component is defined", function() {

      beforeEach(module("app"));

      var $ctrl;
      var router;
      var $rootscope;

      beforeEach(inject(function($componentController) {
        $ctrl = $componentController("firstComponent", {
          $router: router,
          $rootscope: $rootscope
        });
      }));

      it("are things define properly", function() {
        expect($ctrl).toBeDefined();

        expect($ctrl.goToNextPage).toBeDefined();
      });

      it("should have proper title", function() {

        expect($rootscope.title).toBe("Title from Page 1");

      });

       it("should navigate to next page", function() {

        expect($ctrl.router.navigate).toHaveBeenCalled();

      });

    });

这些是运行测试时遇到的错误：

3个规格，2个失败 1. TypeError：无法读取未定义的属性“title” 2. TypeError：无法读取undefined

的属性'navigate'

Answer 1

您的测试中有一些错误。

首先，您需要注入服务 $ componentController 和 $ rootScope 。

之后，您需要使用 $ componentController 服务实例化您的控制器：

let bindings = {$router: router};
$ctrl = $componentController('firstComponent', null, bindings);

然后你可以测试一些功能：

it("are things define properly", function() {
  expect($ctrl).toBeDefined();
  expect($ctrl.goToNextPage).toBeDefined();
});

要测试导航功能，你必须在路由器上创建一个间谍，执行函数 $ ctrl.goToNextPage（）并在间谍上断言：

let routerSpy = spyOn(router, "navigate");

...//you must instantiate your controller here as shown above

$ctrl.goToNextPage();
expect(routerSpy).toHaveBeenCalled();

我已更新您的Plunker，您可以在其中看到完整的代码：

https://plnkr.co/edit/TiuXM5?p=preview

如何在Angular 1.5组件内单元测试函数

1 个答案: