Javascript 角度转换/jQuery不处理业力+；网页包

我最近将一个正在进行的项目转换为

webpack

，包括

Angular

前端的单元测试。我为一些指令编写了一些单元测试，这些指令在

链接

函数中具有自定义转换功能，在

网页

较少的测试环境中通过，但是当使用

karma网页

进行测试时，它们不会通过。请允许我演示：

标准karma.conf.js 测试包 ES6中的角度指令

import directiveFactory from '../../directivefactory.js';

// ## Directive Definition
class pageHeader {

    constructor() {

        this.template =
        `
            <div class="d5-page-header-wrapper">

                <div class="d5-page-header">

                    <!-- Main page header text -->
                    <!-- component user content insertion point 1 -->
                    <span class="text-main" transclude-id="header"></span>

                    <!-- Small page header text -->
                    <!-- component user content insertion point 2 -->
                    <span class="text-small" transclude-id="small"></span>

                    <hr class="break">

                    <!-- Page header text lead -->
                    <!-- component user content insertion point 3 -->
                    <span class="text-lead" transclude-id="lead"></span>

                    <!-- Custom navigation button -->
                    <button class="btn btn-custom btn-block btn-lg">

                        Jump to Collections <span class="glyphicon
                            glyphicon-arrow-down"></span>

                    </button>

                </div>

            </div>
        `;
        this.restrict = 'E';
        this.scope = {};
        this.bindToController = {

        };
        this.transclude = true;
        this.controller = PageHeaderController;
        this.controllerAs = 'vm';
    }

    // ###Optional Link Function
    link (scope, elem, attrs, ctrl, transclude) {

        transclude ((clone) => {

            angular.forEach(clone, (cloneEl, value) => {

                // If the clone element has attributes...
                if(cloneEl.attributes) {

                    // Get desired target ID...
                    var tId = cloneEl.attributes["transclude-to"].value;

                    // Find target element with that ID...
                    var target = elem.find('[transclude-id="' + tId + '"]');

                    // Append element to target
                    target.append(cloneEl);
                }
            });
        });
    }
}

export default ['pageHeader', directiveFactory(pageHeader)];

从'../../directiveFactory.js'导入directiveFactory；
//##指令定义
类页眉{
构造函数（）{
这是一个.template=
`

跳转到集合
`;
this.restrict='E'；
this.scope={}；
this.bindToController={
};
this.transclude=true；
this.controller=PageHeaderController；
this.controllerAs='vm'；
}
//####可选链接功能
链接（作用域、元素、属性、ctrl、transclude）{
转移（（克隆）=>{
角度.forEach（克隆，（克隆，值）=>{
//如果克隆元素具有属性。。。
if（cloneEl.attributes）{
//获取所需的目标ID。。。
var tId=cloneEl.attributes[“transclude to”].value；
//查找具有该ID的目标元素。。。
var target=elem.find（“[transclude id=“”+tId+“]”）；
//将元素附加到目标
target.append（cloneEl）；
}
});
});
}
}
导出默认值['pageHeader'，directiveFactory（pageHeader）]；

单元测试

descripe（'页眉指令'，（）=>{
让元素，范围；
//模拟我们的页眉指令
beforeach（angular.mock.module（pageHeader））；
beforeach（angular.mock.inject（$rootScope，$compile）=>{
//定义要测试的指令标记
元素=角元素(
`
测试头
测试小割台
测试铅含量
`
);
scope=$rootScope.$new（）；
$compile（elem）（范围）；
范围。$digest（）；
}));
描述（'链路转换功能'，（）=>{
它（“应创建包含组件的主标题元素”+
“用户标记”，（）=>{
让items=elem.find（'.text main'）；
控制台日志（项目）；
//失败
expect（items.eq（0.text（））.toContain（'testheader'）；
});
});
});

我不太确定问题到底出在哪里，但问题似乎在于我的实现或

karma webpack

，因为代码在浏览器中正常工作。无论如何，我会感谢你对这件事的帮助

编辑 jQuery的所有功能似乎都运行良好

检查元素以查看内容是否被转写也会发现内容没有被转写，因为控制台中应该包含转写内容的标记是空的

import 'jquery';

import 'angular';
import 'angular-mocks/angular-mocks';

var testsContext = require.context('.', true, /.+\.spec\.js$/);

testsContext.keys().forEach(testsContext);

import directiveFactory from '../../directivefactory.js';

// ## Directive Definition
class pageHeader {

    constructor() {

        this.template =
        `
            <div class="d5-page-header-wrapper">

                <div class="d5-page-header">

                    <!-- Main page header text -->
                    <!-- component user content insertion point 1 -->
                    <span class="text-main" transclude-id="header"></span>

                    <!-- Small page header text -->
                    <!-- component user content insertion point 2 -->
                    <span class="text-small" transclude-id="small"></span>

                    <hr class="break">

                    <!-- Page header text lead -->
                    <!-- component user content insertion point 3 -->
                    <span class="text-lead" transclude-id="lead"></span>

                    <!-- Custom navigation button -->
                    <button class="btn btn-custom btn-block btn-lg">

                        Jump to Collections <span class="glyphicon
                            glyphicon-arrow-down"></span>

                    </button>

                </div>

            </div>
        `;
        this.restrict = 'E';
        this.scope = {};
        this.bindToController = {

        };
        this.transclude = true;
        this.controller = PageHeaderController;
        this.controllerAs = 'vm';
    }

    // ###Optional Link Function
    link (scope, elem, attrs, ctrl, transclude) {

        transclude ((clone) => {

            angular.forEach(clone, (cloneEl, value) => {

                // If the clone element has attributes...
                if(cloneEl.attributes) {

                    // Get desired target ID...
                    var tId = cloneEl.attributes["transclude-to"].value;

                    // Find target element with that ID...
                    var target = elem.find('[transclude-id="' + tId + '"]');

                    // Append element to target
                    target.append(cloneEl);
                }
            });
        });
    }
}

export default ['pageHeader', directiveFactory(pageHeader)];

describe('page header directive', () => {

    let elem, scope;

    // Mock our page-header directive
    beforeEach(angular.mock.module(pageHeader));

    beforeEach(angular.mock.inject(($rootScope, $compile) => {

        // Define the directive markup to test with
        elem = angular.element(
            `
            <div>

                <page-header>

                    <span transclude-to="header">

                        Test Header

                    </span>

                    <span transclude-to="small">

                        Test Small Header

                    </span>

                    <span transclude-to="lead">

                        Test Lead Content

                    </span>

                </page-header>

            </div>
            `
        );

        scope = $rootScope.$new();

        $compile(elem)(scope);

        scope.$digest();
    }));

    describe('link transclusion function', () => {

        it("should create a main header element containing the component " +
            "user's markup", () => {

            let items = elem.find('.text-main');

            console.log(items);

            // FAIL
            expect(items.eq(0).text()).toContain('Test Header');
        });
    });
});