From 83400033a3b7a91ad072a5d306355c9cd5a80d82 Mon Sep 17 00:00:00 2001
From: PliablePixels <pliablepixels@gmail.com>
Date: Fri, 24 Jul 2015 15:48:01 -0400
Subject: integrated event scrubbing with direct image access - need to clean
 up code

---
 www/lib/angular-carousel/test/karma.conf.js        |  71 +++
 .../angular-carousel/test/unit/angular-carousel.js | 624 +++++++++++++++++++++
 .../test/unit/angular-carousel.shifty.js           |  20 +
 3 files changed, 715 insertions(+)
 create mode 100644 www/lib/angular-carousel/test/karma.conf.js
 create mode 100755 www/lib/angular-carousel/test/unit/angular-carousel.js
 create mode 100644 www/lib/angular-carousel/test/unit/angular-carousel.shifty.js

(limited to 'www/lib/angular-carousel/test')

diff --git a/www/lib/angular-carousel/test/karma.conf.js b/www/lib/angular-carousel/test/karma.conf.js
new file mode 100644
index 00000000..00f32b69
--- /dev/null
+++ b/www/lib/angular-carousel/test/karma.conf.js
@@ -0,0 +1,71 @@
+var grunt = require('grunt');
+module.exports = function ( karma ) {
+  karma.set({
+    /**
+     * From where to look for files, starting with the location of this file.
+     */
+    basePath: './..',
+
+    /**
+     * This is the list of file patterns to load into the browser during testing.
+     */
+    files: [
+        'bower_components/angular/angular.js',
+        'bower_components/angular-touch/angular-touch.js',
+        'bower_components/angular-mocks/angular-mocks.js',
+        'bower_components/requirejs/require.js',
+        'dist/angular-carousel.js',
+        'test/unit/*.js'
+    ],
+
+    frameworks: [ 'jasmine' ],
+    plugins: [ 'karma-jasmine', 'karma-firefox-launcher', 'karma-chrome-launcher', 'karma-coverage'],
+
+    logLevel:  'DEBUG',
+    /**
+     * How to report, by default.
+     */
+    reporters: ['dots', 'coverage'],
+
+    preprocessors: {
+      // source files, that you wanna generate coverage for
+      // do not include tests or libraries
+      // (these files will be instrumented by Istanbul)
+      '../dist/*.js': ['coverage']
+    },
+
+    coverageReporter: {
+      type : 'html',
+      dir : 'coverage/'
+    },
+
+    /**
+     * On which port should the browser connect, on which port is the test runner
+     * operating, and what is the URL path for the browser to use.
+     */
+    port: 7018,
+    runnerPort: 7100,
+    urlRoot: '/',
+
+    /**
+     * Disable file watching by default.
+     */
+    autoWatch: false,
+
+    /**
+     * The list of browsers to launch to test ondest     * default, but other browser names include:
+     * Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS
+     *
+     * Note that you can also use the executable name of the browser, like "chromium"
+     * or "firefox", but that these vary based on your operating system.
+     *
+     * You may also leave this blank and manually navigate your browser to
+     * http://localhost:9018/ when you're running tests. The window/tab can be left
+     * open and the tests will automatically occur there during the build. This has
+     * the aesthetic advantage of not launching a browser every time you save.
+     */
+    browsers: [
+      'Chrome'
+    ]
+  });
+};
diff --git a/www/lib/angular-carousel/test/unit/angular-carousel.js b/www/lib/angular-carousel/test/unit/angular-carousel.js
new file mode 100755
index 00000000..5b2031da
--- /dev/null
+++ b/www/lib/angular-carousel/test/unit/angular-carousel.js
@@ -0,0 +1,624 @@
+/*global waits, runs, iit, browserTrigger, beforeEach, afterEach, describe, it, inject, expect, module, angular, $*/
+
+describe('carousel', function () {
+  'use strict';
+
+  var scope, $compile, $sandbox;
+
+
+  //$('body').append("<link href='/base/dist/angular-carousel.min.css' rel='stylesheet' type='text/css'>");
+  /*$('body').append("<style>ul,li {padding:0;margin:0;width:200px !important} " +
+      ".rn-carousel-animate { -webkit-transition: -webkit-transform 0.001s ease-out; " +
+      "-moz-transition: -moz-transform 0.001s ease-out; transition: transform 0.001s ease-out;} "+
+      ".rn-carousel-noanimate {-webkit-transition: none;-moz-transition: none;-ms-transition: none;" +
+      "-o-transition: none;transition: none;}</style>");*/
+
+  //console.log(document.location);
+  beforeEach(
+    module('angular-carousel')
+  );
+
+  beforeEach(inject(function ($rootScope, _$compile_) {
+      scope = $rootScope;
+      $compile = _$compile_;
+      // $('body').css({
+      //   padding: 0,
+      //   margin:0
+      // });
+     // $sandbox = $('<div id="sandbox"></div>').appendTo($('body'));
+  }));
+
+  afterEach(function() {
+    //$sandbox.remove();
+    scope.$destroy();
+  });
+
+ function compileTpl(overrideOptions) {
+    var options = {
+      useIndex: false,
+      useIndicator: false,
+      useControl: false,
+      useBuffer: false,
+      nbItems: 25,
+      useWatch: false
+    };
+    if (overrideOptions) angular.extend(options, overrideOptions);
+    var sampleData = {
+      scope: {
+        items: [],
+        localIndex: 5
+      }
+    };
+    for (var i=0; i<options.nbItems; i++) {
+      sampleData.scope.items.push({
+        text: 'slide #' + i,
+        id: i
+      });
+    }
+    var tpl = '<ul rn-carousel ';
+    if (options.useIndicator) tpl += ' rn-carousel-indicator ';
+    if (options.useControl) tpl += ' rn-carousel-control ';
+    if (options.useBuffer) tpl += ' rn-carousel-buffered ';
+    if (options.useWatch) tpl += ' rn-carousel-watch ';
+    if (options.useIndex) tpl += ' rn-carousel-index="' + options.useIndex + '" ';
+    tpl += '><li class="test" style="width:200px" ng-repeat="item in items" id="slide-{{ item.id }}">{{ item.text }}</li></ul>';
+    angular.extend(scope, sampleData.scope);
+ //   var $element = $(tpl).appendTo($sandbox);
+    var $element = $compile(tpl)(scope);
+    scope.$digest();
+    return $element;
+  }
+
+  function getElmTransform(elm) {
+    var curMatrix = elm.css('-webkit-transform');
+    if (!curMatrix) curMatrix = elm.css('transform');
+    return curMatrix;
+  }
+  function validCSStransform(elm) {
+    var expectedPosition = (elm.offsetWidth * elm.scope().carouselCollection.index * -1),
+        expectedMatrix = 'matrix(1, 0, 0, 1, ' + expectedPosition + ', 0)',
+        curMatrix = getElmTransform(elm);
+    expect(curMatrix).toBe(expectedMatrix);
+  }
+/*
+  it('should load test', function() {
+    expect(1).toBe(1);
+  });
+
+  describe('directive', function () {
+    it('should add a wrapper div around the ul/li', function () {
+        var elm = compileTpl();
+        expect(elm.parent().hasClass('rn-carousel-container')).toBe(true);
+    });
+    it('should add a class to the ul', function () {
+        var elm = compileTpl();
+        expect(elm.hasClass('rn-carousel-slides')).toBe(true);
+    });
+    it('should have enough slides', function () {
+        var elm = compileTpl();
+        expect(elm.find('li').length).toBe(scope.items.length);
+    });
+    it('generated container outerWidth should match the ul outerWidth', function () {
+        var elm = compileTpl();
+        expect(elm.parent()[0].offsetWidth).toBe(elm[0].offsetWidth);
+    });
+  });
+
+  describe('directive with a data-bound index defined', function () {
+    it('the index attribute should be used to position the first visible slide', function () {
+        var elm = compileTpl({useIndex: 'localIndex'});
+        waitAndCheck(function() {
+          validCSStransform(elm);
+        }, 200);
+    });
+    it('index change should update the carousel position', function () {
+        var elm = compileTpl({useIndex: 'localIndex'});
+        scope.localIndex = 5;
+        scope.$digest();
+        waitAndCheck(function() {
+          validCSStransform(elm);
+        }, 200);
+    });
+    it('carousel index should be bound to local index', function () {
+        var elm = compileTpl({useIndex: 'localIndex'});
+        scope.localIndex = 5;
+        scope.$digest();
+        expect(elm.scope().carouselCollection.index).toBe(scope.localIndex);
+    });
+  });
+
+  describe('directive with a numeric index defined', function () {
+    it('the index attribute should be used to position the first visible slide', function () {
+        var elm = compileTpl({useIndex: 5});
+        waitAndCheck(function() {
+          validCSStransform(elm);
+        }, 200);
+    });
+    it('index change should update the carousel position', function () {
+        // check watcher present even if index is not a bindable attribute
+        var elm = compileTpl({useIndex: 5});
+        elm.scope().carouselCollection.goToIndex(9);
+        scope.$digest();
+        waitAndCheck(function() {
+          validCSStransform(elm);
+        }, 200);
+    });
+    it('index out of range should set the carousel to last slide', function () {
+        var elm = compileTpl({useIndex: 100});
+        expect(elm.scope().carouselCollection.index).toBe(scope.items.length - 1);
+        expect(elm.find('li').length).toBe(scope.items.length);
+        expect(elm.find('li:last')[0].id).toBe('slide-' + (scope.items.length - 1));
+    });
+    it('negative index should set the carousel to first slide', function () {
+        var elm = compileTpl({useIndex: -100});
+        expect(elm.scope().carouselCollection.index).toBe(0);
+        expect(elm.find('li').length).toBe(scope.items.length);
+        expect(elm.find('li')[0].id).toBe('slide-0');
+    });
+  });
+
+  describe('directive with no index defined', function () {
+    it('should add a wrapper div around the ul/li', function () {
+        var elm = compileTpl({useIndex:false});
+        expect(elm.parent().hasClass('rn-carousel-container')).toBe(true);
+    });
+    it('should add a class to the ul', function () {
+        var elm = compileTpl({useIndex:false});
+        expect(elm.hasClass('rn-carousel-slides')).toBe(true);
+    });
+    it('should have enough slides', function () {
+        var elm = compileTpl({useIndex:false});
+        expect(elm.find('li').length).toBe(scope.items.length);
+    });
+    it('generated container outerWidth should match the ul outerWidth', function () {
+        var elm = compileTpl({useIndex:false});
+        expect(elm.parent().outerWidth()).toBe(elm.outerWidth());
+    });
+    it('the index attribute should be used to position the first visible slide', function () {
+        var elm = compileTpl({useIndex:false});
+        validCSStransform(elm);
+    });
+  });
+
+  describe('indicator directive', function () {
+    it('should add an indicator div', function () {
+        var elm = compileTpl({useIndicator: true});
+        expect(elm.parent().find('.rn-carousel-indicator').length).toBe(1);
+    });
+    it('should add enough indicators', function () {
+        var elm = compileTpl({useIndicator: true});
+        expect(elm.parent().find('.rn-carousel-indicator span').length).toBe(scope.items.length);
+    });
+    it('should have an active indicator based on the carousel index', function () {
+        var elm = compileTpl({useIndicator: true});
+        expect(elm.parent().find('.rn-carousel-indicator span:nth-of-type(' + (elm.scope().carouselCollection.index + 1) + ')').hasClass('active')).toBe(true);
+    });
+    it('should update the active indicator when local index changes', function () {
+        var elm = compileTpl({useIndicator: true, useIndex: 'localIndex'});
+        scope.localIndex = 2;
+        scope.$digest();
+        expect(elm.parent().find('.rn-carousel-indicator span:nth-of-type(' + (scope.localIndex + 1) + ')').hasClass('active')).toBe(true);
+    });
+  });
+
+  describe('controls directive', function () {
+    it('should add an controls div', function () {
+        var elm = compileTpl({useControl: true});
+        expect(elm.parent().find('.rn-carousel-controls').length).toBe(1);
+    });
+    it('should have next control but not back', function () {
+        var elm = compileTpl({useControl: true});
+        expect(elm.parent().find('.rn-carousel-control-next').length).toBe(1);
+        expect(elm.parent().find('.rn-carousel-control-back').length).toBe(0);
+    });
+    it('should have next and back controls when local index changes', function () {
+        var elm = compileTpl({useControl: true, useIndex: 'localIndex'});
+        scope.localIndex = 1;
+        scope.$digest();
+        expect(elm.parent().find('.rn-carousel-control').length).toBe(2);
+    });
+    it('should have only back controls when local index is at the end', function () {
+        var elm = compileTpl({useControl: true, useIndex: 'localIndex'});
+        scope.localIndex = scope.items.length - 1;
+        scope.$digest();
+        expect(elm.parent().find('.rn-carousel-control-next').length).toBe(0);
+        expect(elm.parent().find('.rn-carousel-control-back').length).toBe(1);
+    });
+  });
+
+  describe('directive with no index defined', function () {
+    it('should add a wrapper div around the ul/li', function () {
+        var elm = compileTpl({useIndex:false});
+        expect(elm.parent().hasClass('rn-carousel-container')).toBe(true);
+    });
+    it('should add a class to the ul', function () {
+        var elm = compileTpl({useIndex:false});
+        expect(elm.hasClass('rn-carousel-slides')).toBe(true);
+    });
+    it('should have enough slides', function () {
+        var elm = compileTpl({useIndex:false});
+        expect(elm.find('li').length).toBe(scope.items.length);
+    });
+    it('generated container outerWidth should match the ul outerWidth', function () {
+        var elm = compileTpl({useIndex:false});
+        expect(elm.parent().outerWidth()).toBe(elm.outerWidth());
+    });
+    it('the index attribute should be used to position the first visible slide', function () {
+        var elm = compileTpl({useIndex:false});
+        validCSStransform(elm);
+    });
+  });
+
+  describe('buffered carousel', function () {
+    it('should minimize the DOM', function () {
+        var elm = compileTpl({useBuffer: true});
+        expect(elm.find('li').length).toBe(3);
+    });
+    // TODO
+    it('should position the buffered slides correctly', function () {
+        var elm = compileTpl({useBuffer: true, useIndex: 'localIndex'});
+        scope.localIndex = 5;
+        scope.$digest();
+        expect(elm.find('li')[0].id).toBe('slide-' + (scope.localIndex - 1));
+    });
+    it('should position the buffered slides correctly even if index is zero', function () {
+        var elm = compileTpl({useBuffer: true, useIndex: '0'});
+        expect(elm.find('li').length).toBe(3);
+        expect(elm.find('li')[0].id).toBe('slide-0');
+    });
+    it('should position the buffered slides correctly with a out of range index', function () {
+        var elm = compileTpl({useBuffer: true, useIndex: '100'});
+        expect(elm.scope().carouselCollection.index).toBe(scope.items.length - 1);
+        var firstId = scope.items.length - 3;
+        expect(elm.find('li').length).toBe(3);
+        expect(elm.find('li')[0].id).toBe('slide-' + firstId);
+        expect(elm.find('li:last')[0].id).toBe('slide-' + (firstId + 3 - 1));
+    });
+    it('should position the buffered slides correctly with a negative index', function () {
+        var elm = compileTpl({useBuffer: true, useIndex: '-100'});
+        expect(elm.scope().carouselCollection.index).toBe(0);
+        expect(elm.find('li').length).toBe(3);
+        expect(elm.find('li')[0].id).toBe('slide-0');
+        expect(elm.find('li:last')[0].id).toBe('slide-' + (3 - 1));
+    });
+  });
+
+  describe('index property on standard carousel', function () {
+    it('should be at 0 on start', function () {
+        var elm = compileTpl();
+        expect(elm.scope().carouselCollection.index).toBe(0);
+    });
+    it('should be set at initial position', function () {
+        var elm = compileTpl({useIndex: 'localIndex'});
+        expect(elm.scope().carouselCollection.index).toBe(scope.localIndex);
+    });
+    it('should follow carousel position', function () {
+        var elm = compileTpl({useIndex: 'localIndex'});
+        scope.localIndex = scope.items.length - 1;
+        scope.$digest();
+        expect(elm.scope().carouselCollection.index).toBe(scope.items.length - 1);
+    });
+  });
+
+  describe('index property on buffered carousel', function () {
+    it('should be at 0 on start', function () {
+        var elm = compileTpl({useBuffer: true});
+        expect(elm.find('li')[0].id).toBe('slide-0');
+        expect(elm.scope().carouselCollection.index).toBe(0);
+    });
+    it('should be set correctly at initial position', function () {
+        var elm = compileTpl({useBuffer: true, useIndex: 'localIndex'});
+        expect(elm.scope().carouselCollection.index).toBe(scope.localIndex);
+        expect(elm.find('li')[0].id).toBe('slide-' + (scope.localIndex - 1));
+    });
+    it('should be last item of buffer if carousel last slide', function () {
+        var elm = compileTpl({useBuffer: true, useIndex: 'localIndex'});
+        scope.localIndex = scope.items.length - 1;
+        scope.$digest();
+        waitAndCheck(function() {
+          expect(elm.scope().carouselCollection.index).toBe(scope.localIndex);
+          expect(elm.find('li')[0].id).toBe('slide-' + (scope.localIndex - 2));
+        });
+    });
+    it('should be last item of buffer if carousel last slide', function () {
+        var elm = compileTpl({useBuffer: true, useIndex: 'localIndex'});
+        scope.localIndex = 100;
+        scope.$digest();
+        waitAndCheck(function() {
+          expect(elm.scope().carouselCollection.index).toBe(scope.items.length - 1);
+          expect(elm.find('li')[0].id).toBe('slide-' + (scope.localIndex-2));
+        });
+    });
+    it('should display first slide when reset local index to 0', function () {
+        var elm = compileTpl({useBuffer: true, useIndex: 'localIndex'});
+        scope.localIndex = 5;
+        scope.$digest();
+        scope.localIndex = 0;
+        scope.$digest();
+        expect(elm.position().left).toBe(0);
+        expect(elm.css('left')).toBe('auto');
+    });
+  });
+
+  // TODO
+  // describe('collection update', function () {
+  //    it('standard carousel should display first slide when we reset the collection', function () {
+  //       var elm = compileTpl({useIndex: 'localIndex'});
+  //       scope.localIndex = 5;
+  //       scope.$digest();
+  //       scope.items = [{id:1}, {id:2}];
+  //       scope.$digest();
+  //       expect(elm.position().left).toBe(0);
+  //       expect(elm.css('left')).toBe('auto');
+  //       expect(elm.scope().activeIndex).toBe(0);
+  //   });
+  //   it('buffered carousel should display first slide when we reset the collection', function () {
+  //       var elm = compileTpl({useBuffer: true, useIndex: 'localIndex'});
+  //       scope.localIndex = 5;
+  //       scope.$digest();
+  //       scope.items = [{id:1}, {id:2}];
+  //       scope.$digest();
+  //       expect(elm.position().left).toBe(0);
+  //       expect(elm.css('left')).toBe('auto');
+  //       expect(elm.scope().activeIndex).toBe(0);
+  //   });
+  // });
+
+  function fakeMove(elm, distance) {
+    // trigger a carousel swipe movement
+    var startX = 100,
+        startY = 10,
+        endX = distance + startX;
+
+    browserTrigger(elm, 'touchstart', [], startX, startY);
+    browserTrigger(elm, 'touchmove', [], endX, startY);
+    browserTrigger(elm, 'touchmove', [], endX, startY);
+    browserTrigger(elm, 'touchend', [], endX, startY);
+  }
+  function waitAndCheck(cb, delay) {
+    waits(delay || 100);
+    runs(cb);
+  }
+  describe('swipe behaviour', function () {
+    var minMove;
+    beforeEach(function() {
+        minMove = 31;
+    });
+    it('should not show prev slide if swipe backwards at index 0', function() {
+        // yes, backwards swipe means positive pixels count :)
+        var elm = compileTpl();
+        fakeMove(elm, minMove);
+        expect(elm.scope().carouselCollection.index).toBe(0);
+    });
+    it('should not show next slide if swipe forward at last slide', function() {
+        var elm = compileTpl();
+        elm.scope().carouselCollection.goToIndex(scope.items.length - 1);
+        fakeMove(elm, -minMove);
+        expect(elm.scope().carouselCollection.index).toBe(scope.items.length - 1);
+    });
+    it('should move slide backward if backwards swipe at index > 0', function() {
+        var elm = compileTpl({useIndex: 1});
+        fakeMove(elm, minMove);
+        expect(elm.scope().carouselCollection.index).toBe(0);
+    });
+    it('should move to next slide on swipe forward', function() {
+        var elm = compileTpl();
+        fakeMove(elm, -minMove);
+        expect(elm.scope().carouselCollection.index).toBe(1);
+    });
+    it('should not move to next slide on too little swipe forward', function() {
+        var elm = compileTpl();
+        fakeMove(elm, -12);
+        expect(elm.scope().carouselCollection.index).toBe(0);
+    });
+    it('should not move to prev slide on too little swipe backward', function() {
+        var elm = compileTpl({useIndex: 1});
+        fakeMove(elm, 12);
+        expect(elm.scope().carouselCollection.index).toBe(1);
+    });
+    it('should follow multiple moves', function() {
+        var elm = compileTpl();
+       // var minMove = -(elm.outerWidth() * 0.1 + 1);
+        fakeMove(elm, -minMove);
+        //console.log(minMove, elm.scope().carouselCollection.index);
+        fakeMove(elm,-minMove);
+        fakeMove(elm, -minMove);
+        expect(elm.scope().carouselCollection.index).toBe(3);
+        fakeMove(elm, minMove);
+        fakeMove(elm, minMove);
+        expect(elm.scope().carouselCollection.index).toBe(1);
+        fakeMove(elm, minMove);
+        fakeMove(elm, minMove);
+        fakeMove(elm, minMove);
+        expect(elm.scope().carouselCollection.index).toBe(0);
+    });
+  });
+
+  describe('swipe buffered behaviour', function () {
+    it('should follow multiple moves and buffer accordingly', function() {
+        var elm = compileTpl({useBuffer: true});
+        var minMove = -(elm.outerWidth() * 0.1 + 1);
+        fakeMove(elm, minMove);
+
+        waitAndCheck(function() {
+          expect(elm.scope().carouselCollection.index).toBe(1);
+          expect(elm.find('li')[0].id).toBe('slide-0');
+          fakeMove(elm, minMove);
+          waitAndCheck(function() {
+            expect(elm.scope().carouselCollection.index).toBe(2);
+            expect(elm.find('li')[0].id).toBe('slide-1');
+            fakeMove(elm, -minMove);
+            waitAndCheck(function() {
+              expect(elm.scope().carouselCollection.index).toBe(1);
+              expect(elm.find('li')[0].id).toBe('slide-0');
+              fakeMove(elm, -minMove);
+              waitAndCheck(function() {
+                expect(elm.scope().carouselCollection.index).toBe(0);
+                expect(elm.find('li')[0].id).toBe('slide-0');
+              });
+            });
+          });
+        });
+    });
+  });
+
+  describe('collection watch', function () {
+    describe('standard watch (no deep)', function () {
+      it('it should display first slide when we reset the collection', function () {
+        var elm = compileTpl({useIndex: 'localIndex'});
+        scope.localIndex = 5;
+        scope.$digest();
+        expect(elm.scope().carouselCollection.index).toBe(5);
+        scope.items = [{id:1}, {id:2}];
+        scope.$digest();
+        expect(elm.position().left).toBe(0);
+        expect(elm.css('left')).toBe('auto');
+        expect(elm.scope().carouselCollection.index).toBe(0);
+      });
+      it('should NOT update slides when collection changes partially', function() {
+        var elm = compileTpl();
+        var originalLength = scope.items.length;
+        expect(elm.find('li').length).toBe(originalLength);
+        scope.items.push({'text': 'new item', 'id': 999});
+        scope.$digest();
+        expect(elm.find('li').length).toBe(originalLength);
+        expect(elm.find('li').last()[0].id).toBe('slide-' + (originalLength - 1));
+        scope.items.pop();
+        scope.items.pop();
+        scope.items.pop();
+        scope.$digest();
+        expect(elm.find('li').length).toBe(originalLength);
+        expect(elm.find('li').last()[0].id).toBe('slide-' + (originalLength - 1));
+      });
+    });
+    describe('standard watch (no deep) + buffer', function () {
+      it('it should display first slide when we reset the collection', function () {
+        var elm = compileTpl({useBuffer: true, useIndex: 'localIndex'});
+        scope.localIndex = 5;
+        scope.$digest();
+        expect(elm.scope().carouselCollection.index).toBe(5);
+        scope.items = [{id:1}, {id:2}];
+        scope.$digest();
+        expect(elm.position().left).toBe(0);
+        expect(elm.css('left')).toBe('auto');
+        expect(elm.scope().carouselCollection.index).toBe(0);
+      });
+      it('should NOT update slides when collection changes partially', function() {
+        var elm = compileTpl({useBuffer: true});
+        var originalLength = elm.scope().carouselCollection.bufferSize;
+        expect(elm.find('li').length).toBe(originalLength);
+        scope.items.push({'text': 'new item', 'id': 999});
+        scope.$digest();
+        expect(elm.find('li').length).toBe(originalLength);
+        expect(elm.find('li').last()[0].id).toBe('slide-' + (originalLength - 1));
+        scope.items.pop();
+        scope.items.pop();
+        scope.items.pop();
+        scope.$digest();
+        expect(elm.find('li').length).toBe(originalLength);
+        expect(elm.find('li').last()[0].id).toBe('slide-' + (originalLength - 1));
+      });
+    });
+    describe('deep watch', function () {
+      it('should display first slide when we reset the collection', function () {
+          var elm = compileTpl({useIndex: 'localIndex', useWatch: true});
+          scope.localIndex = 5;
+          scope.$digest();
+          expect(elm.scope().carouselCollection.index).toBe(5);
+          scope.items = [{id:1}, {id:2}];
+          scope.$digest();
+          expect(elm.position().left).toBe(0);
+          expect(elm.css('left')).toBe('auto');
+          expect(elm.scope().carouselCollection.index).toBe(0);
+      });
+      it('should update slides when collection changes partially', function() {
+        var elm = compileTpl({useWatch: true});
+        expect(elm.find('li').length).toBe(scope.items.length);
+        scope.items.push({'text': 'new item', 'id': 999});
+        scope.$digest();
+        expect(elm.find('li').length).toBe(scope.items.length);
+        expect(elm.find('li').last()[0].id).toBe('slide-999');
+        scope.items.pop();
+        scope.items.pop();
+        scope.items.pop();
+        scope.$digest();
+        expect(elm.find('li').length).toBe(scope.items.length);
+        expect(elm.find('li').last()[0].id).toBe('slide-' + scope.items[scope.items.length - 1].id);
+      });
+    });
+    describe('deep watch + buffer', function () {
+      it('should display first slide when we reset the collection', function () {
+          var elm = compileTpl({userBuffer:true, useIndex: 'localIndex', useWatch: true});
+          scope.localIndex = 5;
+          scope.$digest();
+          expect(elm.scope().carouselCollection.index).toBe(5);
+          scope.items = [{id:1}, {id:2}];
+          scope.$digest();
+          expect(elm.position().left).toBe(0);
+          expect(elm.css('left')).toBe('auto');
+          expect(elm.scope().carouselCollection.index).toBe(0);
+      });
+      it('should update slides when collection changes partially', function() {
+        var elm = compileTpl({userBuffer:true, useWatch: true});
+        expect(elm.find('li').length).toBe(scope.items.length);
+        scope.items.push({'text': 'new item', 'id': 999});
+        scope.$digest();
+        expect(elm.find('li').length).toBe(scope.items.length);
+        expect(elm.find('li').last()[0].id).toBe('slide-999');
+        scope.items.pop();
+        scope.items.pop();
+        scope.items.pop();
+        scope.$digest();
+        expect(elm.find('li').length).toBe(scope.items.length);
+        expect(elm.find('li').last()[0].id).toBe('slide-' + scope.items[scope.items.length - 1].id);
+      });
+    });
+
+  });
+  // describe('delayed collection and index', function () {
+  //   it('should follow multiple moves and buffer accordingly', function() {
+
+  // describe('swipe buffered + index behaviour', function () {
+  //   it('should initialise buffer start correctly when index is set', function() {
+  //       var elm = compileTpl({useBuffer: true, useIndex: "localIndex", nbItems: 5});
+  //       scope.localIndex = 2;
+  //       scope.$digest();
+  //       expect(elm.scope().carouselBufferStart).toBe(1);
+  //   });
+  //   it('should initialise buffer start correctly when index is set at 0', function() {
+  //       var elm = compileTpl({useBuffer: true, useIndex: "localIndex", nbItems: 5});
+  //       scope.localIndex = 0;
+  //       scope.$digest();
+  //       expect(elm.scope().carouselBufferStart).toBe(0);
+  //   });
+    // it('should initialise buffer start correctly when index is set at last item', function() {
+    //     var nbItems = 5;
+    //     var elm = compileTpl({useBuffer: true, useIndex: "localIndex", nbItems: 5});
+    //     scope.localIndex = nbItems-1;
+    //     scope.$digest();
+    //     console.log(elm.scope().activeIndex);
+    //     waits(10);
+    //     runs(function() {
+    //         expect(elm.scope().carouselBufferStart).toBe(nbItems - elm.scope().carouselBufferSize);
+    //     });
+    // });
+    // it('buffer position should update when local index changes', function() {
+    //     var elm = compileTpl({useBuffer: true, useIndex: "localIndex", nbItems: 5});
+    //     scope.localIndex = 2;
+    //     scope.$digest();
+    //     expect(elm.scope().carouselBufferStart).toBe(1);
+    //     scope.localIndex = 3;
+    //     scope.$digest();
+    //     waits(100);
+    //     runs(function() {
+    //         expect(elm.scope().carouselBufferStart).toBe(1);
+    //         scope.localIndex = 0;
+    //         scope.$digest();
+    //         expect(elm.scope().carouselBufferStart).toBe(0);
+    //     });
+    // });
+  //});
+*/
+
+});
+
diff --git a/www/lib/angular-carousel/test/unit/angular-carousel.shifty.js b/www/lib/angular-carousel/test/unit/angular-carousel.shifty.js
new file mode 100644
index 00000000..994169ce
--- /dev/null
+++ b/www/lib/angular-carousel/test/unit/angular-carousel.shifty.js
@@ -0,0 +1,20 @@
+/*global waits, runs, iit, browserTrigger, beforeEach, afterEach, describe, it, inject, expect, module, angular, $*/
+
+describe('angular-carousel.shifty', function () {
+  'use strict';
+
+  describe("compatibility with requirejs", function(){
+    var loadShifty = function() {
+      module('angular-carousel.shifty');
+    };
+    it("should not throw an exception when load the shifty within requirejs environment", function(){
+      expect(loadShifty).not.toThrow();
+    });
+
+    it("should not throw an exception when inject `Tweenable` within requirejs environment", function(){
+      loadShifty();
+      expect(function() {inject(function(Tweenable){});}).not.toThrow();
+    });
+  });
+
+});
-- 
cgit v1.2.3