个人中心
gpt4 book ai didi

javascript - 使用 ControllerAs 和 Ng-Show 测试数据指令

转载 作者：行者123 更新时间：2023-11-28 20:51:12 27 4
gpt4 key购买 nike

我正在尝试在我的 Angular Directive(指令)中测试 ng-show 条件，它使用 controllerAs 语法并为模板加载外部 html 文件。

我不知道如何测试满足条件时模板中是否显示了内容。

我的问题是——当条件满足并且相关数据显示在ctrl.error中时，我如何测试ng-show是否正常工作？通过 <p>标签？

相关文件如下:模板文件:

<!-- dataDisplay.html -->
<div>
    <div ng-show="!ctrl.eventsFound">
        <p id="errorMessage" style="color: red;">{{ctrl.error}}</p>
    </div>

    <div id="result" ng-show="ctrl.eventsFound">
        <section id="item-block" class="item-container">
            <div class="item-timeline-block" ng-repeat="item in ctrl.items track by item.index">
                <div ng-class="item.iconBackground">
                    <span style="color:white" ng-class="item.iconImg"></span>
                </div>
                <div class="item-timeline-content">
                    <h2>{{::item.title}}</h2>
                    <span ng-show="{{::item.datetime}}" class="date">
                </span>
                    <p>{{::item.content}}</p>
                    <a ng-hide="{{!item.link}}" href="{{::item.link}}" target="_blank">Read more</a>
                    <small ng-hide="{{!item.link}}">{{::item.linkWarning}}</small>
                </div>
            </div>
        </section>
    </div>
</div>

index.html:

<!doctype html>
<html ng-app="app" ng-cloak>
<head>
    <title> Test </title>
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script>
</head>
<body>
<div>
    <display-dir></display-dir>
</div>
</body>
<script src="node_modules/moment/min/moment.min.js"></script>
<script src="./path/displayDir.js"></script>
</html>

指令:

//displayDir.js

angular.module('app', [])

    .directive('displayDir', function() {
        return {
            restrict: 'E',
            transclude: true,
            controllerAs: 'ctrl',
            scope: {},
            templateUrl: 'dataDisplay.html',
            link: function() {

            },

            controller: 'displayCtrl'
        }

    })

    .controller('displayCtrl', ['$window', function($window) {

        let ctrl = this;

        ctrl.items =
            [
                { event: "a", title: "title a", index: 0, datetime: "01/02/2016", content: "content 1" },
                { event: "b", title: "title b", index: 2,   datetime: "01/01/2016", content: "content 2", link: 'http://www.google.com'},
            ];

        try {

            if (!ctrl.items.length) {
                ctrl.eventsFound = false;
                ctrl.error = "there is no data present for the control";
            } else {

                ctrl.eventsFound = true;
                ctrl.items.map(function(item) {
                    if (item.title == "title b") {
                        item.link = item.content;
                        item.linkWarning = `Warning - This link will bring you to external content!`
                        item.content = ""
                    }

                    if (item.datetime == "") {
                        item.lastUpdated = ""
                    } else {
                        item.lastUpdated = $window.moment(item.datetime).fromNow()
                    }
                    return item;
                });
            }

        } catch (error) {
            ctrl.eventsFound = false;
            ctrl.error = error.message
        }

    }])

Karma 测试规范 - 使用 ngHtml2JsPreprocessor 

describe('the displayDir directive', function() {

    let element, scope, ctrl;

    beforeEach(angular.mock.module('app'));
    beforeEach(module('htmlTemplate'));

    beforeEach(inject(function($rootScope, $controller) {
        //define the controller
        scope = $rootScope;
        ctrl = $controller('displayCtrl', {
            $scope: scope
        })
    }));

    describe('after loading template url', function() {

        beforeEach(inject(function($compile) {
            // bring in the templateUrl file
            element = angular.element('<display-dir></display-dir>');
            $compile(element)(scope);
            scope.$digest();
        }));

        it('should show the errorMessage div', function() {
            let messageDiv = element[0].querySelector("#errorMessage");
            expect(messageDiv).toBeDefined();
        });

        it('should show the errorMessage div with the text', function(){
            ctrl.events =[]
            ctrl.eventsFound = false;
            ctrl.errorMessage = 'There is no data present for the control'
            let messageDiv = element[0].querySelector("#errorMessage");
            //This does not show the text error message text inside the 'p' tag
            console.log("element",messageDiv)

          /* something like 
          expect(messageDiv.innerHTML()).toEqual('There is no data 
          present for the control');

          or 

          expect(ctrl.errorMessage).toEqual('There is no data present 
          for the control') 
          */
        })

    })

});

编辑

与 Nikolaj 合作后，我进行了以下测试:

// FAILS ON the second expect - messageDiv.text should equal...
it('should show the errorMessage div', function() {
    ctrl.events =[];
    ctrl.eventsFound= false;
    ctrl.errorMessage = 'There is no data'
    let messageDiv = angular.element(element[0].querySelector("#errorMessage"));
    expect(messageDiv.hasClass('ng-hide')).toBeFalsy();
    expect(messageDiv.text()).toEqual("There is no data")
});

// FAILS ON the first expect - messageDiv should be truthy
it('should not show the errorMessage div', function() {
    ctrl.events = [{event: "test"}]
    ctrl.eventsFound= true;
    ctrl.errorMessage = ''
    let messageDiv = angular.element(element[0].querySelector("#errorMessage"));
    expect(messageDiv.hasClass('ng-hide')).toBeTruthy();
    expect(messageDiv.text()).toEqual('')
});

enter image description here编辑

这是一个plunker我看到的行为。 scope.$digest()似乎没有帮助，除非我做错了什么。

最佳答案

所有 ng-show 基本上做的，是将类 ng-hide 添加到元素，如果传递给指令的表达式解析为 false。如果我们忽略动画，这个 css 类几乎等同于:

.ng-hide {
    display: none !important;
}

因此，要测试 ng-show/ng-hide 指令是否有效，您可以测试元素是否包含 ng-hide 类。像这样:

it('should show the errorMessage div', function() {
    const messageDiv = angular.element(element[0].querySelector("#errorMessage"));
    expect(messageDiv.hasClass('ng-hide')).toBeFalse();
});

或者测试错误信息是否被隐藏:

it('should not show the errorMessage div', function() {
    const messageDiv = angular.element(element[0].querySelector("#errorMessage"));
    expect(messageDiv.hasClass('ng-hide')).toBeTrue();
});

关于javascript - 使用 ControllerAs 和 Ng-Show 测试数据指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45820128/

27 4 0
文章推荐： ios - 修改 endcap .round 样式，使其看起来更圆，与此处显示的示例图像不同
文章推荐： php - 为我使用 Laravel 5.4 测试的 phpunit 播种一次几个表
文章推荐： javascript - 如何对 rxjs5 进行单元测试？
文章推荐： javascript - 在 Nightwatch 中选择并单击随机元素的自定义函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com