I am trying to test the ng-show condition inside my angular directive, which is using the controllerAs syntax and loading an external html file for the template.
I can't figure out how to test whether or not things are showing up in the template when a condition is met.
My question is this- How do I test that ng-show is working when conditions are met and the relevant data is being displayed in the DOM via the controller?
Below are the relevant files: Template File:
<!-- display.html -->
<div>
<div ng-show="!ctrl.eventsFound">
<p id="errorMessage" style="color: red;"></p>
</div>
<div id="result" ng-show="ctrl.resultsPresent">
<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></h2>
<span ng-show="" class="date">
</span>
<p></p>
</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>
Directive:
//displayDir.js
angular.module('app', [])
.directive('displayDir', function() {
return {
restrict: 'E',
transclude: true,
controllerAs: 'ctrl',
scope: {},
templateUrl: 'path/dataDisplay.html',
link: function() {
},
controller: 'displayCtrl'
}
})
.controller('displayCtrl', ['$window', function($window) {
let ctrl = this;
ctrl.events =
[
{ 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.events.length) {
ctrl.eventsFound = false;
ctrl.error = "missing data";
} else {
ctrl.eventsFound = true;
ctrl.events.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 Test Spec- Using 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.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)
})
})
});
Aucun commentaire:
Enregistrer un commentaire