mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
Toggle with unit test
This commit is contained in:
Max Lynch
34
js/ext/angular/src/directive/ionicToggle.js
vendored
34
js/ext/angular/src/directive/ionicToggle.js
vendored
@ -1,4 +1,4 @@
|
||||
angular.module('ionic.ui.content', [])
|
||||
angular.module('ionic.ui.toggle', [])
|
||||
|
||||
// The content directive is a core scrollable content area
|
||||
// that is part of many View hierarchies
|
||||
@ -6,30 +6,42 @@ angular.module('ionic.ui.content', [])
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {},
|
||||
require: '?ngModel',
|
||||
template: '<div class="toggle">' +
|
||||
' <input type="checkbox">'+
|
||||
' <div class="track">' +
|
||||
' <div class="handle"></div>' +
|
||||
' <div class="handle"></div>' +
|
||||
' </div>' +
|
||||
'</div>',
|
||||
|
||||
link: function($scope, $element, $attr, ngModel) {
|
||||
var checkbox;
|
||||
|
||||
$scope.toggle = new ionic.views.Toggle({ el: $element[0] });
|
||||
var checkbox, track, handle;
|
||||
|
||||
if(!ngModel) { return; }
|
||||
|
||||
checkbox = $element.children()[0];
|
||||
checkbox = $element.children().eq(0);
|
||||
track = $element.children().eq(1);
|
||||
handle = track.children().eq(0);
|
||||
|
||||
if(!checkbox) { return; }
|
||||
if(!checkbox.length || !track.length || !handle.length) { return; }
|
||||
|
||||
$scope.toggle = new ionic.views.Toggle({
|
||||
el: $element[0],
|
||||
checkbox: checkbox[0],
|
||||
track: track[0],
|
||||
handle: handle[0]
|
||||
});
|
||||
|
||||
$element.bind('click', function(e) {
|
||||
$scope.toggle.tap(e);
|
||||
$scope.$apply(function() {
|
||||
ngModel.$setViewValue(checkbox[0].checked);
|
||||
});
|
||||
});
|
||||
|
||||
ngModel.$render = function() {
|
||||
checkbox.checked = ngModel.$viewValue;
|
||||
$scope.toggle.val(ngModel.$viewValue);
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
4
js/ext/angular/src/ionicAngular.js
vendored
4
js/ext/angular/src/ionicAngular.js
vendored
@ -6,5 +6,7 @@ angular.module('ionic.ui', ['ionic.ui.content',
|
||||
'ionic.ui.tabs',
|
||||
'ionic.ui.nav',
|
||||
'ionic.ui.sideMenu',
|
||||
'ionic.ui.list'
|
||||
'ionic.ui.list',
|
||||
'ionic.ui.toggle'
|
||||
]);
|
||||
|
||||
|
||||
26
js/ext/angular/test/directive/ionicToggle.unit.js
Normal file
26
js/ext/angular/test/directive/ionicToggle.unit.js
Normal file
@ -0,0 +1,26 @@
|
||||
describe('Ionic Toggle', function() {
|
||||
var el;
|
||||
|
||||
beforeEach(module('ionic.ui.toggle'));
|
||||
|
||||
beforeEach(inject(function($compile, $rootScope) {
|
||||
el = $compile('<toggle ng-model="data.name"></toggle>')($rootScope);
|
||||
}));
|
||||
|
||||
iit('Should load', function() {
|
||||
var toggleView = el.scope().toggle;
|
||||
expect(toggleView).not.toEqual(null);
|
||||
expect(toggleView.checkbox).not.toEqual(null);
|
||||
expect(toggleView.track).not.toEqual(null);
|
||||
expect(toggleView.handle).not.toEqual(null);
|
||||
});
|
||||
|
||||
iit('Should toggle', function() {
|
||||
var toggle = el.scope().toggle;
|
||||
expect(toggle.val()).toBe(false);
|
||||
el.click();
|
||||
expect(toggle.val()).toBe(true);
|
||||
el.click();
|
||||
expect(toggle.val()).toBe(false);
|
||||
});
|
||||
});
|
||||
@ -1,94 +0,0 @@
|
||||
describe('Tab Bar Controller', function() {
|
||||
var compile, element, scope, ctrl;
|
||||
|
||||
beforeEach(module('ionic.ui.tabbar'));
|
||||
|
||||
beforeEach(inject(function($compile, $rootScope, $controller) {
|
||||
compile = $compile;
|
||||
scope = $rootScope;
|
||||
ctrl = $controller('TabBarCtrl', { $scope: scope, $element: null });
|
||||
}));
|
||||
|
||||
it('Select item in controller works', function() {
|
||||
ctrl.selectTabAtIndex(1);
|
||||
expect(ctrl.getSelectedTabIndex()).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Tab Bar directive', function() {
|
||||
var compile, element, scope;
|
||||
|
||||
beforeEach(module('ionic.ui.tabbar'));
|
||||
|
||||
beforeEach(inject(function($compile, $rootScope) {
|
||||
compile = $compile;
|
||||
scope = $rootScope;
|
||||
}));
|
||||
|
||||
it('Has section wrapper class', function() {
|
||||
element = compile('<tab-bar></tab-bar>')(scope);
|
||||
expect(element.hasClass('view-wrapper')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Tabs directive', function() {
|
||||
var compile, element, scope;
|
||||
|
||||
beforeEach(module('ionic.ui.tabbar'));
|
||||
|
||||
beforeEach(inject(function($compile, $rootScope) {
|
||||
compile = $compile;
|
||||
scope = $rootScope;
|
||||
}));
|
||||
|
||||
it('Has tab class', function() {
|
||||
element = compile('<tab-bar><tabs></tabs></tab-bar>')(scope);
|
||||
scope.$digest();
|
||||
console.log(element);
|
||||
expect(element.find('.bar').hasClass('bar-tabs')).toBe(true);
|
||||
});
|
||||
|
||||
it('Has tab children', function() {
|
||||
scope.tabs = [
|
||||
{ text: 'Home', icon: 'icon-home' },
|
||||
{ text: 'Fun', icon: 'icon-fun' },
|
||||
{ text: 'Beer', icon: 'icon-beer' },
|
||||
];
|
||||
element = compile('<tab-bar><tabs></tabs></tab-bar>')(scope);
|
||||
scope.$digest();
|
||||
expect(element.find('li').length).toBe(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Tab Item directive', function() {
|
||||
var compile, element, scope, ctrl;
|
||||
|
||||
beforeEach(module('ionic.ui.tabbar'));
|
||||
|
||||
beforeEach(inject(function($compile, $rootScope, $controller) {
|
||||
compile = $compile;
|
||||
scope = $rootScope;
|
||||
//ctrl = $controller('TabBarCtrl', { $scope: scope, $element: null });
|
||||
|
||||
element = compile('<tab-bar><tabs>' +
|
||||
'<tab-item active="true" text="Item" icon="icon-default"></tab-item>' +
|
||||
'</tabs></tab-bar>')(scope);
|
||||
scope.$digest();
|
||||
}));
|
||||
|
||||
it('Default text works', function() {
|
||||
expect(element.find('a').first().text()).toEqual('Item');
|
||||
});
|
||||
|
||||
it('Default icon works', function() {
|
||||
expect(element.find('i').hasClass('icon-default')).toEqual(true);
|
||||
});
|
||||
|
||||
it('Click sets correct tab index', function() {
|
||||
var a = element.find('a:eq(2)');
|
||||
//spyOn(a, 'click');
|
||||
spyOn(scope, 'selectTab');
|
||||
a.click();
|
||||
expect(scope.selectTab).toHaveBeenCalled();
|
||||
});
|
||||
})
|
||||
@ -18,7 +18,7 @@ describe('Ionic Modal', function() {
|
||||
expect(modalInstance.el.classList.contains('active')).toBe(true);
|
||||
});
|
||||
|
||||
iit('Should show for dynamic template', function() {
|
||||
it('Should show for dynamic template', function() {
|
||||
var template = '<div class="modal"></div>';
|
||||
|
||||
var done = false;
|
||||
|
||||
36
js/ext/angular/test/toggle.html
Normal file
36
js/ext/angular/test/toggle.html
Normal file
@ -0,0 +1,36 @@
|
||||
<html ng-app="navTest">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Toggle</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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
|
||||
<form ng-submit="doIt()">
|
||||
<toggle ng-model="data.isLovely"></toggle>
|
||||
<button type="submit" class="button button-danger">Do it</button>
|
||||
</content>
|
||||
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('navTest', ['ionic.ui.toggle', 'ngAnimate', 'ngTouch'])
|
||||
|
||||
.controller('TestCtrl', function($scope) {
|
||||
$scope.data = {};
|
||||
$scope.doIt = function() {
|
||||
console.log('DOIT', $scope.data);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user