Javascript 茉莉花：从角度材质模拟$animate

我试图在Jasmine单元测试中模拟

$animate

服务。我正在测试的指令如下：

angular
    .module('splashDirective', ['ngMaterial'])
    .directive('mAppLoading', ['$animate', function($animate) {

    var link = function(scope, element, attributes) {

        $animate.leave(element.children().eq(1)).then(
            function cleanupAfterAnimation() {
                element.remove();
                scope = element = attributes = null;
            }
        );

   };

   return ({
       link: link,
       restrict: "C"
   });
}]);

这是一个非常简单的方法，只需等待

cleanUpAfterAnimation（）

，就可以将自己从DOM树中移除

我正试图用Jasmine+Karma测试它，代码如下：

describe('Testing Splash directive', function () {

    var $rootScope, $scope, $q,
        $compile,
        $directive,
        $body = $("body"),
        mock__animate = {
            leave: function () {
                return $q.when();
            }
        },
        html =
        "<div class='m-app-loading' ng-animate-children>" +
        "   <div class='animated-container'>" +
        "       <div class='messaging'>" +
        "           <h2>Test</h2>" +
        "       </div>" +
        "   </div>" +
        "</div>";

    beforeEach(function () {

        module('splashDirective', function ($provide) {
            $provide.value('$animate', mock__animate);
        });

        inject(function ($injector) {

            $rootScope = $injector.get('$rootScope');
            $compile = $injector.get('$compile');
            $q = $injector.get('$q');

            $scope = $rootScope.$new();
            $directive = $compile(angular.element(html))($scope);

        });

        $body.append($directive);
        $rootScope.$digest();

    });

    it('should compile the directive', function () {
        var div_directive = $("div.m-app-loading");
        expect(div_directive.length).toBe(1);
    });
});

description（'Testing Splash directive'，function（）{
变量$rootScope，$scope，$q，
$compile，
$指令，
$body=$（“body”），
模拟动画={
左：函数（）{
返回$q.when（）；
}
},
html=
"" +
"   " +
"       " +
“测试”+
"       " +
"   " +
"";
beforeach（函数（）{
模块（'splashDirective'，函数（$provide）{
$provide.value（“$animate”，mock_uanimate）；
});
注入（函数（$injector）{
$rootScope=$injector.get（“$rootScope”）；
$compile=$injector.get（“$compile”）；
$q=$injector.get（“$q”）；
$scope=$rootScope.$new（）；
$directive=$compile（angular.element（html））（$scope）；
});
$body.append（$directive）；
$rootScope.$digest（）；
});
它（'应该编译指令'，函数（）{
var div_指令=$（“div.m-app-loading”）；
expect（div_指令长度）.toBe（1）；
});
});

但是，测试失败了，因为HTML的编译似乎有问题

我运行了以下显示异常的plnkr：

---

我做错了什么？模拟

$animate

的正确方法是什么？

根据您的建议，有几个问题：

您的Plunkr抛出错误b/c您的模块名称不匹配。 在HTML中，您可以执行

ng app=“plunkr”

，但在代码中，您可以定义 模块名称为“splashDirective”。这些名字应该是 相同：

当单元测试向主体添加元素时，您会发现 页面的，它们将在页面上保留一段时间 测试运行的其余部分。这可能会影响其他测试。你应该使用 每次测试运行后要清理的

afterEach（）

：

afterEach(function() {
    // sorry this is just from memory, please verify the syntax
    body.remove($directive);
});

---

以下是您的一个问题。

PS：为了让未来的访问者受益，您可能需要对您的问题进行一些小的编辑。问题不在于模仿

$animate

，而在于设置指令的测试。我认为你模仿

$animate

的方法很好。。。取决于你想做什么，你甚至可以使用真正的

$animate

服务来监视它的一个方法。但我会做任何最简单的事情：）是的，这是一个非常糟糕的标题，它被交叉张贴在一堆论坛上，解决了这个问题！我有两个问题：1）chrome报告了这个异常：“未捕获的TypeError:无法读取未定义的属性'env'，2）在添加“afterEach（function（）{$body.empty（）；}）”时，我得到了一个新的异常：“未捕获的TypeError:无法读取null的属性'appendChild'。。。Jasmine没有透露更多关于这些例外的细节，有什么想法吗？我已经在这个plnkr中包含了修改：这很奇怪，可能与在HTML上执行Jasmine有关。我用你的补丁“修补”了我电脑上的代码，包括带有“$body.empty（）”的“afterEach”语句，Karma Jasmine正确地执行测试。

it('should compile the directive', function () {
    $body = $("body");
    $body.append($directive);
    var div_directive = $("div.m-app-loading");
    expect(div_directive.length).toBe(1);
});

afterEach(function() {
    // sorry this is just from memory, please verify the syntax
    body.remove($directive);
});