mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
7ef9ad74cf
Closes #2336. Closes #2317. Closes #2290. Closes #2228. Closes #2067. Closes #1890. Closes #1865. Closes #1850. Closes #1755. Closes #1688. Closes #1578. Closes #1501. Closes #1353. Closes #1342. Closes #782. Closes #416. Closes #2288. BREAKING CHANGE: The slideBox's API has undergone many changes. - **`<ion-slide-box>`** attributes have changed (see [documentation](http://ionicframework.com/docs/api/directive/ionSlideBox)): * `active-slide` has changed to `selected`. Change your code from this: ```html <ion-slide-box active-slide="activeSlideIndex"></ion-slide-box> ``` To this: ```html <ion-slide-box selected="activeSlideIndex"></ion-slide-box> ``` * `does-continue` has changed to `loop`. Change your code from this: ```html <ion-slide-box does-continue="shouldLoop"></ion-slide-box> ``` To this: ```html <ion-slide-box loop="shouldLoop"></ion-slide-box> ``` * `auto-play` and `slide-interval` have been merged into `auto-play`. Change your code from this: ```html <!-- autoPlay is on --> <ion-slide-box auto-play="true" slide-interval="1000"> </ion-slide-box> <!-- autoPlay is off --> <ion-slide-box auto-play="false" slide-interval="1000"> </ion-slide-box> ``` To this: ```html <!-- autoPlay is on --> <ion-slide-box auto-play="1000"></ion-slide-box> <!-- autoPlay is off --> <ion-slide-box auto-play="false"></ion-slide-box> ``` * `show-pager` and `pager-click` have been removed. Use a child `<ion-slide-pager>` element. See the [`ion-slide-pager` documentation](http://ionicframework.com/docs/api/directive/ionSlidePager). Change your code from this: ```html <!-- pager using default click action --> <ion-slide-box show-pager="true"> </ion-slide-box> <!-- pager with custom click action --> <ion-slide-box show-pager="true" pager-click="doSomething(index)"> </ion-slide-box> ``` To this: ```html <ion-slide-box> <!-- pager using default click action --> <ion-slide-pager></ion-slide-pager> </ion-slide-box> <ion-slide-box> <!-- pager with custom click action --> <ion-slide-pager ng-click="doSomething(index)"></ion-slide-pager> </ion-slide-box> ``` - **`$ionicSlideBoxDelegate`** methods have changed (see [documentation](http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate)): - `update()` has been removed. slideBox updates on its own now. - `stop()` has been removed. See `autoPlay()` below. - `start()` hass been removed. See `autoPlay()` below. - `slide(newIndex[, speed])` has been renamed to `select(newIndex[, speed]); - `currentIndex()` has been renamed to `selected()`. - `slidesCount()` has been renamed to `count()`. - New method `$ionicSlideBoxDelegate.autoPlay()`. Change your code from this: ```js // stop auto sliding $ionicSlideBoxDelegate.stop(); // later... start auto sliding $ionicSlideBoxDelegate.start(); ``` To this: ```js var autoPlaySpeed = 3000; //wait 3000 seconds between changing slide // stop auto sliding $ionicSlideBoxDelegate.autoPlay(false); // later... start auto sliding $ionicSlideBoxDelegate.autoPlay(autoPlaySpeed); ``` - `previous()` now returns the index of the previous slide and does not select. Change your code from this: ```js // select previous slide $ionicSlideBoxDelegate.previous(); ``` To this: ```js // select previous slide $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.previous() ); ``` - `next()` now returns the index of the next slide and does not select. Change your code from this: ```js // select next slide $ionicSlideBoxDelegate.next(); ``` To this: ```js // select next slide $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.next() ); ```
179 lines
4.6 KiB
JavaScript
179 lines
4.6 KiB
JavaScript
describe('$ionSlideBox controller', function() {
|
|
beforeEach(module('ionic'));
|
|
|
|
|
|
function mockSlide() {
|
|
return {
|
|
onAdded: jasmine.createSpy('onAdded'),
|
|
onRemoved: jasmine.createSpy('onRemoved'),
|
|
setState: jasmine.createSpy('setState'),
|
|
transform: jasmine.createSpy('transform')
|
|
};
|
|
}
|
|
function makeCtrl(locals) {
|
|
var ctrl;
|
|
inject(function($controller, $rootScope) {
|
|
ctrl = $controller('$ionSlideBox', extend({
|
|
$scope: $rootScope.$new(),
|
|
$element: angular.element('<div class="slider"><div class="slider-slides"></div></div>')
|
|
}, locals));
|
|
});
|
|
return ctrl;
|
|
}
|
|
|
|
it('#add()', inject(function($rootScope, $timeout) {
|
|
var ctrl = makeCtrl();
|
|
var slide1 = mockSlide();
|
|
var slide2 = mockSlide();
|
|
|
|
expect(ctrl.selected()).toBe(-1);
|
|
ctrl.add(slide1);
|
|
expect(ctrl.selected()).toBe(0);
|
|
expect(ctrl.count()).toBe(1);
|
|
$timeout.flush();
|
|
expect(slide1.setState).toHaveBeenCalledWith('selected');
|
|
|
|
ctrl.add(slide2);
|
|
$rootScope.$apply();
|
|
expect(ctrl.selected()).toBe(0);
|
|
expect(ctrl.count()).toBe(2);
|
|
$timeout.flush();
|
|
expect(slide2.setState).toHaveBeenCalledWith('next');
|
|
}));
|
|
|
|
it('#remove()', function() {
|
|
var ctrl = makeCtrl();
|
|
var slide0, slide1, slide2;
|
|
ctrl.add(slide0 = mockSlide());
|
|
ctrl.add(slide1 = mockSlide());
|
|
ctrl.add(slide2 = mockSlide());
|
|
|
|
ctrl.select(1);
|
|
expect(ctrl.selected()).toBe(1);
|
|
|
|
ctrl.remove(slide1);
|
|
expect(ctrl.selected()).toBe(1);
|
|
expect(ctrl.at(1)).toBe(slide2);
|
|
|
|
ctrl.remove(slide2);
|
|
expect(ctrl.selected()).toBe(0);
|
|
});
|
|
|
|
it('#move()', function() {
|
|
var ctrl = makeCtrl();
|
|
var slide0, slide1;
|
|
ctrl.add(slide0 = mockSlide());
|
|
ctrl.add(slide1 = mockSlide());
|
|
|
|
expect(ctrl.at(1)).toBe(slide1);
|
|
ctrl.move(slide1, 0);
|
|
expect(ctrl.at(0)).toBe(slide1);
|
|
expect(ctrl.at(1)).toBe(slide0);
|
|
});
|
|
|
|
it('#onDrag()', function() {
|
|
var ctrl = makeCtrl();
|
|
var slide0, slide1, slide2;
|
|
ctrl.add(slide0 = mockSlide());
|
|
ctrl.add(slide1 = mockSlide());
|
|
ctrl.add(slide2 = mockSlide());
|
|
|
|
ctrl.select(1);
|
|
// Transforming forward should move current and next
|
|
ctrl.onDrag(0.5);
|
|
expect(slide0.transform).not.toHaveBeenCalled();
|
|
expect(slide1.transform).toHaveBeenCalledWith(0.5);
|
|
expect(slide2.transform).toHaveBeenCalledWith(0.5);
|
|
|
|
slide0.transform.reset();
|
|
slide1.transform.reset();
|
|
slide2.transform.reset();
|
|
|
|
// Transforming backward should move current and prev
|
|
ctrl.onDrag(-0.5);
|
|
expect(slide0.transform).toHaveBeenCalledWith(-0.5);
|
|
expect(slide1.transform).toHaveBeenCalledWith(-0.5);
|
|
expect(slide2.transform).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('#onDragEnd()', function() {
|
|
var ctrl = makeCtrl();
|
|
var slide0, slide1, slide2;
|
|
ctrl.add(slide0 = mockSlide());
|
|
ctrl.add(slide1 = mockSlide());
|
|
ctrl.add(slide2 = mockSlide());
|
|
|
|
ctrl.select(1);
|
|
// Greater than 0.5 should change slide
|
|
ctrl.onDragEnd(-0.75, 0);
|
|
expect(ctrl.selected()).toBe(0);
|
|
ctrl.onDragEnd(0.75, 0);
|
|
expect(ctrl.selected()).toBe(1);
|
|
// Less shouldn't
|
|
ctrl.onDragEnd(0.25, 0);
|
|
expect(ctrl.selected()).toBe(1);
|
|
});
|
|
|
|
it('#isRelevant()', function() {
|
|
var ctrl = makeCtrl();
|
|
ctrl.add(mockSlide());
|
|
ctrl.add(mockSlide());
|
|
ctrl.add(mockSlide());
|
|
ctrl.add(mockSlide());
|
|
ctrl.add(mockSlide());
|
|
|
|
ctrl.loop(false);
|
|
ctrl.select(0);
|
|
expect(ctrl.isRelevant(4)).toBe(false);
|
|
expect(ctrl.isRelevant(0)).toBe(true);
|
|
expect(ctrl.isRelevant(1)).toBe(true);
|
|
expect(ctrl.isRelevant(2)).toBe(false);
|
|
|
|
ctrl.loop(true);
|
|
expect(ctrl.isRelevant(3)).toBe(false);
|
|
expect(ctrl.isRelevant(4)).toBe(true);
|
|
expect(ctrl.isRelevant(0)).toBe(true);
|
|
expect(ctrl.isRelevant(1)).toBe(true);
|
|
expect(ctrl.isRelevant(2)).toBe(false);
|
|
});
|
|
|
|
it('#previous()', function() {
|
|
var ctrl = makeCtrl();
|
|
ctrl.add(mockSlide());
|
|
ctrl.add(mockSlide());
|
|
ctrl.add(mockSlide());
|
|
|
|
ctrl.loop(false);
|
|
ctrl.select(0);
|
|
expect(ctrl.previous()).toBe(-1);
|
|
ctrl.select(1);
|
|
expect(ctrl.previous()).toBe(0);
|
|
|
|
ctrl.loop(true);
|
|
ctrl.select(0);
|
|
expect(ctrl.previous()).toBe(2);
|
|
ctrl.select(1);
|
|
expect(ctrl.previous()).toBe(0);
|
|
});
|
|
|
|
it('#next()', function() {
|
|
var ctrl = makeCtrl();
|
|
ctrl.add(mockSlide());
|
|
ctrl.add(mockSlide());
|
|
ctrl.add(mockSlide());
|
|
|
|
ctrl.loop(false);
|
|
ctrl.select(2);
|
|
expect(ctrl.next()).toBe(-1);
|
|
ctrl.select(1);
|
|
expect(ctrl.next()).toBe(2);
|
|
|
|
ctrl.loop(true);
|
|
ctrl.select(2);
|
|
expect(ctrl.next()).toBe(0);
|
|
ctrl.select(1);
|
|
expect(ctrl.next()).toBe(2);
|
|
});
|
|
|
|
});
|