Writing Jasmine unit test cases for checking whether the Modal popup is displayed in the page or it isn't loaded

5,211 views

Skip to first unread message

Varun Krishna Parthasarathy

unread,

Jan 25, 2014, 11:58:58 PM1/25/14

to jasmi...@googlegroups.com

Hi everyone,

I am trying to learn to write jasmine test cases to check whether the angular's modal popup is displayed when the page is loaded. So here how do I check whether the popup in angular is displayed on the page load or it is not getting displayed on the page? is this possible in unit testing?

Here is my sample code for modal popup, but in the following code modal popup is displayed only when the user clicks the button sample modal popup! and I also want to check whether the modal popup is displayed when the web app is loaded , but unfortunately I don't have the code which shows the popup on the page load.

<!doctype html>
<html ng-app="modal popup">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>

<button class="btn btn-success" ng-click="open()">Sample modal popup !</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>

//Modal controller.js

angular.module('modal popup', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

$scope.items = ['item1', 'item2', 'item3'];

$scope.open = function () {

var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});

modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};

$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};

$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};

Can anyone here please help me in writing jasmine test cases to test whether the modal popup is displayed?

Thanks,

Varun Krishna. P

Davis W. Frank

unread,

Jan 27, 2014, 11:14:43 AM1/27/14

to jasmi...@googlegroups.com

In general, I recommend against DOM tests like this. The DOM varies so widely between browsers (and browser versions) that a project can spend a lot of time chasing and not fixing. Selenium/Webdriver (and now Webdriver.js) provide a much more reliable interface for these integration tests.

You could unit test that your object sends a message, or wrap your modal differently. Jasmine can test that JS-only interaction. Then back up your DOM dependencies with another integration framework.

--dwf

--
You received this message because you are subscribed to the Google Groups "Jasmine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jasmine-js+...@googlegroups.com.
To post to this group, send email to jasmi...@googlegroups.com.
Visit this group at http://groups.google.com/group/jasmine-js.
For more options, visit https://groups.google.com/groups/opt_out.

--
thx,

--dwf

Reply all

Reply to author

Forward

0 new messages