为什么这个 Angular 指令没有在 Jasmine 单元测试中编译

Why is this Angular directive not compiling inside of Jasmine unit test?

本文关键字：Jasmine 单元测试 编译 Angular 指令 为什么      更新时间：2023-09-26

前提条件：我正在使用Karma对我的Angular.js应用程序模块运行Jasmine单元测试。

我的应用使用以下模式公开模块（服务/指令/控制器）：

简单.js 

'use strict';
export default (angular) => {
    angular.module('simple', [])
        .directive('simple', [function() {
            return {
                restrict: 'E',
                replace: true,
                template: '<h1>COMPILED!</h1>'
            };
        }]);
};

上面示例的相应单元测试如下所示：

简单测试.js

import angular from 'angular';
import mocks from 'angular-mocks';
import simpleModule from './simple';
describe('simple', () => {
    var $compile,
        $rootScope;
    // Load the simple module, which contains the directive
    beforeEach(() => {
        let simpleComponent = new simpleModule(angular);
        // module('simple') raises a TypeError here
        // I have also tried angular.module('simple') which
        // I am pretty sure is incorrect.
    });
    // Store references to $rootScope and $compile
    // so they are available to all tests in this describe block
    beforeEach(inject((_$compile_, _$rootScope_) => {
        // The injector unwraps the underscores (_) from around the
        // parameter names when matching
        $compile = _$compile_;
        $rootScope = _$rootScope_;
    }));
    it('Replaces the element with the appropriate content', () => {
        // Compile a piece of HTML containing the directive
        var element = angular.element("<simple>not compiled</simple>");
        var compiledElement = $compile(element)($rootScope);
        // fire all the watches, so the scope expressions evaluate
        $rootScope.$digest();
        // Check that the compiled element contains the templated content
        expect(element.html()).toContain("COMPILED!");
    });
});

问题：在 Web 浏览器中使用 Karma 运行上述测试时，测试失败，并且元素似乎没有被编译。

我错过了什么？

我可以在您的代码中看到您在执行$compile之前缺少创建新$scope.你应该做这样的事情：

it('Replaces the element with the appropriate content', () => {
    // Compile a piece of HTML containing the directive
    var scope = $rootScope.$new(); // create a new scope
    var element = angular.element("<simple>not compiled</simple>");
    var compiledElement = $compile(element)(scope);
    // fire all the watches, so the scope expressions evaluate
    scope.$digest();
    // Check that the compiled element contains the templated content
    expect(element.html()).toContain("COMPILED!");
});

我怀疑您没有正确导入指令。你试过吗： 

beforeEach(module('simple'));

您指示尝试的替代版本不正确或我未见过的模式：

beforeEach(() => {
    let simpleComponent = new simpleModule(angular);
});
module('simple');
angular.module('simple');

显而易见的是，你在测试中使用了Javascript ES6。Jasmine目前只了解ES5。

尝试使用此Jasmine ES6编译器，或在ES5中编写测试。

注意：您的测试未被编译，但它们失败似乎是矛盾的。只有当业力试图运行它们时，它们才会失败。并且它们只有在编译后才能运行。你确定吗？

相关文章：