如何使用 jasmine 在 AngularJS 中测试 Bootstrap Modal？

Question

我正在使用引导模式在 Angular 应用程序中显示弹出窗口。它从前端完美运行，但弹出窗口内的 DOM 元素没有附加到正文中

在输出中，当我显示文档内容时，我的 html 模板的内容没有附加到正文标记。所以我无法找到/测试任何 DOM 元素。它也没有在控制台中显示任何错误。

请任何人通过指定如何使用 karma/jasmine 在角度应用程序中测试引导模式来帮助我解决此问题。

angular.module("myApp").directive('popUp', ['$http', '$compile', function($http, $compile) {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            course: '=',
    },
    compile: function(element, cAtts){
        var template,
            $element,
            loader;

        var windowOpen = false;

        loader = $http.get('components/popUp.view.html').success(function(data) {
            template = data;
        });

        //return the Link function
        return function(scope, element, lAtts) {

            element.on('click', function(e) {
                e.preventDefault();
                $element = $( $compile(template)(scope) ); 
                $element.modal({backdrop: 'static'});
                windowOpen = true;
            });

            // if the template changes, we need to compile the current
            // template again.  just in case there are funky sticky things
            scope.$watch('template', function(newValue, oldValue) {
                if(newValue == undefined && oldValue == undefined) return;
                if(windowOpen) return;

                if(newValue == undefined){
                    //$(".modal").remove();
                    $element.remove();
                    $element = undefined;
                    return;
                }

                $element = $( $compile(template)(scope) );
            }); 
        };
    }
  }    

}]);

我的 HTML 模板：

    <div id="{{handler}}" class="modal fade">
      <div style="margin:-1px auto; width:90%;float:right;" class="modal-dialog">
        <div style="padding-left: 25px; height:100vh;" class="modal-content">
          <div class="modal-header navbar-static-top"><img src="content/assets/img/close.png" data-dismiss="modal" aria-hidden="true" ng-click="close()" title="Close" alt="Close" class="popUpClose close pull-left"/>
            <div class="popUpTitle">
              <div style="font-size:22px;">{{course.CourseName}}</div>
              <div style="font-size:15px; margin-top:-5px;">{{course.CourseId}}</div><br/>
            </div>
          </div>
          <div style="display:inline" class="modal-body">
            <p>This is test Modal</p>
          </div>
          <div style="border:none;" class="modal-footer"> </div>
        </div>
      </div>
    </div>

我的测试文件：

(function(){
    "use strict";
    describe("Testing Pop Up Directive Functionality", function(){
        var $httpBackend, $scope, fakeData, $compile, $document;
        var compileDirective, course, element, template;

        beforeEach(module('myApp.testing'));
        beforeEach(module('myApp'));

        beforeEach(inject(function ($injector, _$templateCache_, _$httpBackend_, _fakeData_, _$document_) {
            $httpBackend = _$httpBackend_;
            fakeData = _fakeData_;
            $document = _$document_;

            angular.module('components/popUp.view.html')._runBlocks[0](_$templateCache_);
            template = _$templateCache_.get('components/courses/course.attendance.popUp.view.html');

            course = fakeData.fakeCourses.Courses[0];

            compileDirective = function() {
                inject(function(_$compile_, _$rootScope_) {                 
                    $compile = _$compile_;
                    $scope = _$rootScope_.$new();
                    $scope.course=course;
                    element = angular.element('<div manageattendance="" course="course"></div>');
                    element = $compile(element)($scope);
                });

                //$scope.$digest();
            };
        }));

        it("Should display attendance of course if user is authorized", function(){
            $httpBackend.expectGET('components/courses/course.attendance.popUp.view.html').respond(template);
            compileDirective();         
            $httpBackend.flush();
            element.trigger('click');
            console.log($document.find('html').html());
        });
    });
})();

AngularJS：1.3.11 引导程序：3.3.2 业力：0.12.31 茉莉花核：2.3.4 业力茉莉花：0.3.5

Answer 1

我不确定是什么原因，但是通过从模态 div 中删除 css 类“淡入淡出”，模态中的 html 内容被附加到 body 标记中。