Javascript 单元测试包含未编译的$watch（）的AngularJS指令

我目前正在研究我的问题，但我认为在这里添加一个问题可能会有所帮助，因为我是AngularJS新手，甚至是单元测试新手

我有一个有效的当前指令，它使用

$watch（）

函数跟踪变量，如果变量不存在，则会提供默认消息，例如“已删除的用户值”

我有以下单元测试（请注意，我根据Maurice的建议对其进行了修改）：

在每个（模块（'myModule'）之前；
beforeach（注入函数（$compile，$rootScope）{
$scope=$rootScope；
元素=角度。元素（“”）；
$compile（元素）（$scope）；
}));
它（'应该显示已删除的用户名'，inject（function（））{
$scope.displayName=null；
element.scope（）.$apply（）；
控制台日志（元素）；
expect（element.html（））.toBe（'Deleted User Value'）；
}));

---

但是，我遇到了以下问题：

TypeError:试图分配给只读属性

。而且

console.log

没有被输出，有人能告诉我哪里出错了吗？很抱歉我的愚蠢，但我正在尝试“在职”学习单元测试，而且我对AngularJS还是很陌生，代码似乎有一些地方出了问题

该指令依赖于

$translate

，该指令未被使用，而

$transform

被使用但未被注入

第二，在第二个测试中，您正在调用

元素。$scope（）。$apply（）。应该是
element.scope（）.$apply（）取而代之

最后，您要在作用域上设置
displayName
属性，但要使用
绑定到测试代码中的
name
属性

我会这样写测试：

describe("The displayName directive", function () {
    var $scope, element;

    beforeEach(module('myModule'));

    beforeEach(inject(function ($compile, $rootScope) {
        $scope = $rootScope;
        element = angular.element('<div class="name" display-name="name"></div>');
        $compile(element)($scope);
    }));

    it('should display the deleted user name', function () {
        element.scope().$apply();
        expect(element.text()).toBe('users.profile.deletedUser');

    });

    it('should display the actual user name', function () {
        $scope.name = "Maurice";
        element.scope().$apply();
        expect(element.text()).toBe('Maurice');
    });
});

description（“displayName指令”，函数（）{
var$范围，元素；
在每个（模块（“myModule”）之前；
beforeach（注入函数（$compile，$rootScope）{
$scope=$rootScope；
元素=角度。元素（“”）；
$compile（元素）（$scope）；
}));
它（'应显示已删除的用户名'，函数（）{
element.scope（）.$apply（）；
expect（element.text（））.toBe（'users.profile.deletedUser'）；
});
它（'应显示实际用户名'，函数（）{
$scope.name=“莫里斯”；
element.scope（）.$apply（）；
expect（element.text（））.toBe（'Maurice'）；
});
});
谢谢你的建议，我已经修改了转换/翻译问题，我已经修改了代码但仍然没有乐趣，我将再次修改上面的代码，谢谢你的建议：我已经修改了代码但仍然没有乐趣，我仍然得到TypeError：在第一次测试中尝试分配到只读属性（我还没有尝试第二次）我建议仔细查看堆栈跟踪，或使用Chrome调试工具逐步检查代码，以查看错误发生的位置。这似乎是可行的，当我在测试中引入第三方转换/翻译模块时，我会发现错误。感谢您的建议，现在我必须继续使用transform/translate（pascalprecht.translate）调整测试。谢谢你所做的一切顶部有错别字吗
$tranform
应该是
$transform
？
beforeEach(module('myModule'));

beforeEach(inject(function($compile, $rootScope) {
    $scope = $rootScope;
    element = angular.element('<div class="name" display-name="name"></div>');
    $compile(element)($scope);
}));


it('should display the deleted user name', inject(function() {
    $scope.displayName = null;
    element.scope().$apply();
    console.log(element);
    expect(element.html()).toBe('Deleted User Value');

}));

describe("The displayName directive", function () {
    var $scope, element;

    beforeEach(module('myModule'));

    beforeEach(inject(function ($compile, $rootScope) {
        $scope = $rootScope;
        element = angular.element('<div class="name" display-name="name"></div>');
        $compile(element)($scope);
    }));

    it('should display the deleted user name', function () {
        element.scope().$apply();
        expect(element.text()).toBe('users.profile.deletedUser');

    });

    it('should display the actual user name', function () {
        $scope.name = "Maurice";
        element.scope().$apply();
        expect(element.text()).toBe('Maurice');
    });
});