mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(popup): Added popup support
This commit is contained in:
Max Lynch
97
js/ext/angular/test/directive/ionicPopup.unit.js
Normal file
97
js/ext/angular/test/directive/ionicPopup.unit.js
Normal file
@@ -0,0 +1,97 @@
|
||||
'use strict';
|
||||
|
||||
describe('Ionic Popup Directive', function() {
|
||||
var compile, scope, popupEl;
|
||||
|
||||
beforeEach(module('ionic'));
|
||||
|
||||
beforeEach(inject(function($compile, $rootScope, $controller) {
|
||||
compile = $compile;
|
||||
scope = $rootScope;
|
||||
|
||||
}));
|
||||
|
||||
it('Should build', function() {
|
||||
popupEl = angular.element('<ion-popup></ion-popup>');
|
||||
popupEl = compile(popupEl)(scope);
|
||||
|
||||
expect(popupEl[0].classList.contains('popup')).toBe(true);
|
||||
});
|
||||
|
||||
it('Set scope', function() {
|
||||
popupEl = angular.element('<ion-popup title="Cats"></ion-popup>');
|
||||
|
||||
var buttons = [
|
||||
{
|
||||
type: 'button-whack',
|
||||
text: 'Whacky'
|
||||
}
|
||||
];
|
||||
|
||||
scope.buttons = buttons;
|
||||
|
||||
popupEl = compile(popupEl)(scope);
|
||||
|
||||
scope.$apply();
|
||||
|
||||
scope = popupEl.scope();
|
||||
|
||||
expect(scope.title).toEqual('Cats');
|
||||
|
||||
expect(scope.buttons).toBe(buttons);
|
||||
expect(scope.buttons[0].text).toEqual('Whacky');
|
||||
expect(scope.buttons[0].type).toEqual('button-whack');
|
||||
|
||||
expect(popupEl[0].querySelector('button').classList.contains('button-whack')).toBe(true);
|
||||
|
||||
expect(popupEl[0].classList.contains('popup')).toBe(true);
|
||||
});
|
||||
|
||||
it('Does call callbacks', function() {
|
||||
popupEl = angular.element('<ion-popup title="Cats" on-button-tap="onTap(button, $event)" on-close="onClose(button, $event)"></ion-popup>');
|
||||
|
||||
// For spy
|
||||
/* Not sure how to trigger these
|
||||
var cb = {
|
||||
onTap: function(e) {},
|
||||
onClose: function(e) {}
|
||||
};
|
||||
*/
|
||||
|
||||
var buttons = [
|
||||
{
|
||||
type: 'button-whack',
|
||||
text: 'Whacky',
|
||||
onTap: function(e) {}
|
||||
}
|
||||
];
|
||||
|
||||
scope.buttons = buttons;
|
||||
|
||||
/*
|
||||
scope.onTap = cb.onTap;
|
||||
scope.onClose = cb.onClose;
|
||||
*/
|
||||
|
||||
popupEl = compile(popupEl)(scope);
|
||||
|
||||
scope.$apply();
|
||||
|
||||
spyOn(buttons[0], 'onTap');
|
||||
/*
|
||||
spyOn(cb, 'onTap');
|
||||
spyOn(cb, 'onClose');
|
||||
*/
|
||||
|
||||
var button = popupEl[0].querySelector('button');
|
||||
ionic.trigger('click', {
|
||||
target: button
|
||||
});
|
||||
|
||||
/*
|
||||
expect(cb.onTap).toHaveBeenCalled();
|
||||
expect(cb.onClose).toHaveBeenCalled();
|
||||
*/
|
||||
expect(buttons[0].onTap).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
107
js/ext/angular/test/popup.html
Normal file
107
js/ext/angular/test/popup.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<html ng-app="ionic.example">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Popups</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
|
||||
<script src="../../../../dist/js/ionic.bundle.js"></script>
|
||||
|
||||
</head>
|
||||
<body ng-controller="PopupCtrl">
|
||||
<button class="button button-dark" ng-click="showPopup()">Generic</button>
|
||||
<button class="button button-primary" ng-click="showConfirm()">Confirm</button>
|
||||
<button class="button button-balanced" ng-click="showPrompt()">Prompt</button>
|
||||
<button class="button button-balanced" ng-click="showPasswordPrompt()">Password Prompt</button>
|
||||
<button class="button button-positive" ng-click="showAlert()">Alert</button>
|
||||
|
||||
<script id="popup-template.html" type="text/ng-template">
|
||||
<input ng-model="data.wifi" type="text" placeholder="Password">
|
||||
</script>
|
||||
|
||||
<script>
|
||||
angular.module('ionic.example', ['ionic'])
|
||||
|
||||
.controller('PopupCtrl', function($scope, $timeout, $q, $ionicPopup) {
|
||||
$scope.showPopup = function() {
|
||||
$scope.data = {}
|
||||
|
||||
$ionicPopup.show({
|
||||
templateUrl: 'popup-template.html',
|
||||
title: 'Enter Wi-Fi Password',
|
||||
subTitle: 'Please use normal things',
|
||||
scope: $scope,
|
||||
buttons: [
|
||||
{ text: 'Cancel', onTap: function(e) { return true; } },
|
||||
{
|
||||
text: '<b>Save</b>',
|
||||
type: 'button-positive',
|
||||
onTap: function(e) {
|
||||
return $scope.data.wifi;
|
||||
}
|
||||
},
|
||||
]
|
||||
}).then(function(res) {
|
||||
console.log('Tapped!', res);
|
||||
}, function(err) {
|
||||
console.log('Err:', err);
|
||||
}, function(msg) {
|
||||
console.log('message:', msg);
|
||||
});
|
||||
|
||||
$timeout(function() {
|
||||
$ionicPopup.confirm({
|
||||
title: 'Do you like ice cream?',
|
||||
cancelText: 'No',
|
||||
okText: 'Yes, of course'
|
||||
}).then(function(res) {
|
||||
console.log('Your love for ice cream:', res);
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
$scope.showConfirm = function() {
|
||||
$ionicPopup.confirm({
|
||||
title: 'Consume Ice Cream',
|
||||
content: 'Are you sure you want to eat this ice cream?'
|
||||
}).then(function(res) {
|
||||
if(res) {
|
||||
console.log('You are sure');
|
||||
} else {
|
||||
console.log('You are not sure');
|
||||
}
|
||||
});
|
||||
};
|
||||
$scope.showPrompt = function() {
|
||||
$ionicPopup.prompt({
|
||||
title: 'ID Check',
|
||||
subTitle: 'What is your name?'
|
||||
}).then(function(res) {
|
||||
console.log('Your name is', res);
|
||||
});
|
||||
};
|
||||
$scope.showPasswordPrompt = function() {
|
||||
$ionicPopup.prompt({
|
||||
title: 'Password Check',
|
||||
subTitle: 'Enter your secret password',
|
||||
inputType: 'password',
|
||||
inputPlaceholder: 'Your password'
|
||||
}).then(function(res) {
|
||||
console.log('Your name is', res);
|
||||
});
|
||||
};
|
||||
$scope.showAlert = function() {
|
||||
$ionicPopup.alert({
|
||||
title: 'Don\'t eat that!',
|
||||
content: 'It might taste good'
|
||||
}).then(function(res) {
|
||||
console.log('Thank you for not eating my delicious ice cream cone');
|
||||
});
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
70
js/ext/angular/test/service/ionicPopup.unit.js
Normal file
70
js/ext/angular/test/service/ionicPopup.unit.js
Normal file
@@ -0,0 +1,70 @@
|
||||
describe('Ionic Popup', function() {
|
||||
var popup, timeout, scope;
|
||||
|
||||
beforeEach(module('ionic'));
|
||||
|
||||
beforeEach(inject(function($ionicPopup, $rootScope, $timeout) {
|
||||
ionic.requestAnimationFrame = function(cb) { cb(); }
|
||||
scope = $rootScope;
|
||||
popup = $ionicPopup;
|
||||
timeout = $timeout;
|
||||
}));
|
||||
|
||||
it('Should show popup', function() {
|
||||
popup.show({
|
||||
title: 'Cats',
|
||||
content: 'Dogs',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Okay',
|
||||
type: 'button-balanced',
|
||||
onTap: function(e) {}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
timeout.flush();
|
||||
|
||||
var popupBackdropEl = document.body.querySelector('.popup-backdrop');
|
||||
expect(popupBackdropEl).not.toEqual(null);
|
||||
|
||||
var popupEl = document.body.querySelector('.popup');
|
||||
expect(popupEl.classList.contains('active')).toBe(true);
|
||||
expect(popupEl.classList.contains('popup-showing')).toBe(true);
|
||||
|
||||
popup.show({
|
||||
title: 'Cats',
|
||||
content: 'Dogs',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Okay',
|
||||
type: 'button-balanced',
|
||||
onTap: function(e) {}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
timeout.flush();
|
||||
|
||||
// Make sure there are two popups
|
||||
expect(document.body.querySelectorAll('.popup').length).toEqual(2);
|
||||
});
|
||||
|
||||
it('Should set correct element data', function() {
|
||||
popup.show({
|
||||
title: 'Cats',
|
||||
content: 'Dogs',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Okay',
|
||||
type: 'button-balanced',
|
||||
onTap: function(e) {}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
var popupEl = document.body.querySelector('.popup');
|
||||
expect(popupEl.querySelector('.popup-title').innerText).toEqual('Cats');
|
||||
expect(popupEl.querySelector('.popup-body').innerText).toEqual('Dogs');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user