Question

我是AngularJS的新手，所以出于学习目的......我已经构建了一个非常简单的应用程序，其中有一个标题为＆＃34; Hello friends！＆＃34;和一个名为＆＃34的按钮;更改标题！＆＃34;，点击它会导致标题中的更改为＆＃34;你好吗？＆＃34; ...

现在进行单元测试，我写了测试用例..但是面临着不寻常的错误，如：

Chrome 35.0.1916（Windows 7）titleCtrl最初标题为FAILED，错误：[$ injector：modulerr] http://errors.angularjs.org/1.2.20/ $ injector
TypeError：无法读取属性＆＃39; title＆＃39; null为null：C：/Myapp1/test/test.js：21
Chrome 35.0.1916（Windows 7）titleCtrl单击按钮会更改标题FAILED，错误：[$ injector：modulerr] http://errors.angularjs.org/1.2.20/ $ injector
TypeError：无法读取属性＆＃39; changeIt＆＃39; of null：C：/Myapp1/test/test.js:26

因此，为了您的参考，我将添加以下文件：scope.html，controller.js和test.js：

scope.html

<!doctype html>
<html ng-app="app">

<head runat="server">
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="C:/Myapp1/bower_components/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs-1.2.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <div ng-controller= "titleCtrl">
    <h1 ng-model = "title">{{title}}</h1>
    <button ng-click="changeIt()">Change the title!</button>
    </div>
</form>
</body>
</html>

controller.js

var myModule = angular.module('app',[]);
var $scope = null;

myModule.controller('titleCtrl', function($scope)
{
    $scope.title="Hello friends!";
    $scope.changeIt = function()
    {
        $scope.title = "How are you?";
    };
});

test.js

describe('titleCtrl', function()
{
    var $controller = null;
    var $scope = null;

    beforeEach(function()
    {
        module('myModule');
    });
    beforeEach(inject(function($controller,$rootScope)
    {
        $scope = $rootScope.$new();
        controller = $controller('titleCtrl',
        {
            $scope: $scope
        });
    }));
    it('Intially has a title', function()
    {
        expect($scope.title).toBe("Hello friends!");

    });
    it('Clicking the button changes the title', function()
    {
        $scope.changeIt();
        expect($scope.title).toBe("How are you?");
    });
});

很遗憾这个错误..任何帮助将不胜感激..

Answer 1

你几乎就在那里，路上有几件奇怪的东西：

在html上，加载所有vendor库后，最好加载自己的代码。另一方面，我不确定这种角度模拟路径是否会以这种方式工作。

它似乎是asp.net mvc，但在angular中不需要那些runat（或者至少它不应该，但我不是asp.net用户）。

在控制器文件上，$scope = null会出错，那里没有$scope。

最后在测试中，你只有1个错误。

module('foo')将您的模块加载到测试中，在您的情况下，您正在加载名为myModule的模块，并且没有名称为app的模块，您的模块名为{{1} }。你需要改变它。

这样做，您的测试将起作用。检查here是否有演示。

AngularJS单元测试 - TypeError：无法读取null的属性'title'

1 个答案: