Permalink
Browse files

test(lory.test.js): add/refactor tests for .prev()/.next()

Some of the tests regarding returnIndex() are failing because of a bug in lory.js.
  • Loading branch information...
1 parent 0b62466 commit b515e6208220932b7b56068c440c4270ace8ebcb Hendrik Liebau committed Nov 18, 2015
Showing with 212 additions and 93 deletions.
  1. +212 −93 test/lory.test.js
View
@@ -5,6 +5,49 @@
describe('lory()', function () {
var instance;
var element;
+ var slideMargin = 10;
+ var transitionEnd = whichTransitionEndProp();
+
+ function whichTransitionEndProp() {
+ var el = document.createElement('fakeelement');
+ var transitionEndProps = {
+ 'transition': 'transitionend',
+ 'OTransition': 'oTransitionEnd',
+ 'MozTransition': 'transitionend',
+ 'WebkitTransition': 'webkitTransitionEnd'
+ }
+ for (var transition in transitionEndProps) {
+ if (el.style[transition] !== undefined) {
+ return transitionEndProps[transition];
+ }
+ }
+ }
+
+ function waitForTransitionEnd(fn, done) {
+ var slideContainer = getSlideContainer();
+ var listener = function() {
+ fn();
+ slideContainer.removeEventListener(transitionEnd, listener);
+ done && done();
+ };
+ slideContainer.addEventListener(transitionEnd, listener);
+ }
+
+ function getSlideContainer() {
+ return element.querySelector('.js_slides');
+ }
+
+ function getActualOffset() {
+ var slideContainer = getSlideContainer();
+ var parentOffset = slideContainer.offsetParent.getBoundingClientRect().left;
+ var elementOffset = slideContainer.getBoundingClientRect().left;
+ return (parentOffset - elementOffset) * -1;
+ }
+
+ function getExpectedOffset(leftOffsetSlideCount) {
+ var slideWidth = element.querySelector('.js_slide').offsetWidth;
+ return (slideWidth + slideMargin) * -leftOffsetSlideCount;
+ }
before(function () {
fixture.setBase('test');
@@ -66,8 +109,22 @@ describe('lory()', function () {
assert.typeOf(instance.returnIndex(), 'number');
});
- it('has to return 0', function () {
- assert.equal(instance.returnIndex(), 0);
+ describe('without infinite', function () {
+ it('has to return 0', function () {
+ assert.equal(instance.returnIndex(), 0);
+ });
+ });
+
+ describe('with infinite', function () {
+ beforeEach(function () {
+ instance = lory(element, {
+ infinite: 1
+ });
+ });
+
+ it('has to return 0', function () {
+ assert.equal(instance.returnIndex(), 0);
+ });
});
});
@@ -80,51 +137,77 @@ describe('lory()', function () {
assert.typeOf(instance.next, 'function');
});
- it('has to return the maximum count of slides', function () {
- for (var i = 0; i < 8; i += 1) {
+ describe('called 2x', function() {
+ var expectedIndex = 2;
+
+ beforeEach(function () {
instance.next();
- }
+ instance.next();
+ });
+
+ it('translates the slides container 2 slides to the left', function(done) {
+ waitForTransitionEnd(function() {
+ assert.equal(getActualOffset(), getExpectedOffset(2));
+ }, done);
+ });
- assert.equal(instance.returnIndex(), 5);
+ it('index has to be 2, i.e. 3rd slide', function () {
+ assert.equal(instance.returnIndex(), expectedIndex);
+ });
});
- });
- describe('.next() called 2x', function() {
- var expectedOffset;
+ describe('without infinite', function () {
+ var expectedIndex = 5;
- beforeEach(function () {
- expectedOffset = (element.querySelector('.js_slide').offsetWidth * 2 + 20) * -1;
- instance = lory(element);
- });
+ describe('called 6x', function() {
+ beforeEach(function () {
+ for (var i = 0; i < 6; i += 1) {
+ instance.next();
+ }
+ });
- it('offset has to be the expectedOffset', function() {
- for (var i = 0; i < 2; i++) {
- instance.next();
- }
+ it('translates the slides container 5 slides to the left', function(done) {
+ waitForTransitionEnd(function() {
+ assert.equal(getActualOffset(), getExpectedOffset(5));
+ }, done);
+ });
- assert.equal(instance.returnIndex(), 2);
+ it('index has to be 5, i.e. last slide', function () {
+ assert.equal(instance.returnIndex(), expectedIndex);
+ });
+ });
});
- });
- describe('.next() called 4x', function() {
- var expectedOffset;
+ describe('with infinite', function () {
+ beforeEach(function () {
+ instance = lory(element, {
+ infinite: 1
+ });
+ });
- beforeEach(function () {
- expectedOffset = (element.querySelector('.js_slide').offsetWidth + 10) * -4;
- instance = lory(element);
- });
+ describe('called 6x', function() {
+ var expectedIndex = 0;
- it('offset has to be the expectedOffset', function() {
+ beforeEach(function () {
+ for (var i = 0; i < 6; i += 1) {
+ instance.next();
+ }
+ });
- for (var i = 0; i < 4; i++) {
- instance.next();
- }
+ it('translates the slides container 1 slide to the left', function(done) {
+ waitForTransitionEnd(function() {
+ assert.equal(getActualOffset(), getExpectedOffset(1));
+ }, done);
+ });
- assert.equal(instance.returnIndex(), 4);
+ it('index has to be 0, i.e. first slide', function () {
+ assert.equal(instance.returnIndex(), expectedIndex);
+ });
+ });
});
});
- describe('.prev()', function () {
+ describe('.prev()', function() {
beforeEach(function () {
instance = lory(element);
});
@@ -133,88 +216,124 @@ describe('lory()', function () {
assert.typeOf(instance.prev, 'function');
});
- it('has to return the minimum count of slides', function () {
- for (var i = 0; i < 8; i += 1) {
- instance.prev();
- }
+ describe('without infinite', function () {
+ describe('called once', function () {
+ var expectedIndex = 0;
- assert.equal(instance.returnIndex(), 0);
- });
- });
+ beforeEach(function () {
+ instance.prev();
+ });
- describe('.prev() called 2x without infinite', function() {
- var expectedOffset;
+ it('does not translate the slides container', function() {
+ assert.equal(getActualOffset(), getExpectedOffset(0));
+ });
- beforeEach(function () {
- expectedOffset = 0;
- instance = lory(element);
- });
-
- it('offset has to be the expectedOffset', function() {
- for (var i = 0; i < 2; i++) {
- instance.prev();
- }
+ it('index has to be 0 (i.e. 1st slide)', function() {
+ assert.equal(instance.returnIndex(), 0);
+ });
+ });
- assert.equal(instance.returnIndex(), 0);
- });
- });
+ describe('called once after next()', function () {
+ var expectedIndex = 0;
+
+ beforeEach(function (done) {
+ instance.next();
+ // setTimeout is needed to simulate two separate clicks,
+ // otherwise the two transitions cancel each other out
+ window.setTimeout(function() {
+ instance.prev();
+ done();
+ }, 50);
+ });
+
+ it('translates the slides container back to the first slide', function(done) {
+ waitForTransitionEnd(function() {
+ assert.equal(getActualOffset(), getExpectedOffset(0));
+ }, done);
+ });
+
+ it('index has to be 0 (i.e. 1st slide)', function() {
+ assert.equal(instance.returnIndex(), expectedIndex);
+ });
+ });
- describe('.prev() called 4x without infinite', function() {
- var expectedOffset;
+ describe('called once after next() was called 2x', function () {
+ var expectedIndex = 1;
- beforeEach(function () {
- expectedOffset = 0;
- instance = lory(element);
- });
+ beforeEach(function () {
+ instance.next();
+ instance.next();
+ instance.prev();
+ });
- it('offset has to be the expectedOffset', function() {
- for (var i = 0; i < 4; i++) {
- instance.prev();
- }
+ it('translates the slides container 1 slide to the left', function(done) {
+ waitForTransitionEnd(function() {
+ assert.equal(getActualOffset(), getExpectedOffset(1));
+ }, done);
+ });
- assert.equal(instance.returnIndex(), 0);
+ it('index has to be 1 (i.e. 2nd slide)', function() {
+ assert.equal(instance.returnIndex(), expectedIndex);
+ });
+ });
});
- });
- describe('.prev() called 2x with infinite', function() {
- var expectedOffset;
+ describe('with infinite', function () {
+ beforeEach(function () {
+ instance = lory(element, {
+ infinite: 1
+ });
+ });
- beforeEach(function () {
- // has to be at slide 5
- expectedOffset = (element.querySelector('.js_slide').offsetWidth + 10) * -5;
+ describe('called zero times', function() {
+ var expectedIndex = 0;
- instance = lory(element, {
- infinite: true
+ it('translates the slides container 1 slide to the left', function() {
+ assert.equal(getActualOffset(), getExpectedOffset(1));
+ });
+
+ it('index has to be 0 (i.e. 1st slide)', function() {
+ assert.equal(instance.returnIndex(), expectedIndex);
+ });
});
- });
- it('offset has to be the expectedOffset', function() {
- for (var i = 0; i < 2; i++) {
- instance.prev();
- }
+ describe('called once', function() {
+ var expectedIndex = 5;
- assert.equal(instance.returnIndex(), 5);
- });
- });
+ beforeEach(function () {
+ instance.prev();
+ });
- describe('.prev() called 4x with infinite', function() {
- var expectedOffset;
+ it('translates the slides container 6 slides to the left', function(done) {
+ waitForTransitionEnd(function() {
+ assert.equal(getActualOffset(), getExpectedOffset(6));
+ }, done);
+ });
- beforeEach(function () {
- // has to be at slide 3
- expectedOffset = (element.querySelector('.js_slide').offsetWidth + 10) * -3;
-
- instance = lory(element, {
- infinite: true
+ it('index has to be 5 (i.e. 6th slide)', function() {
+ assert.equal(instance.returnIndex(), expectedIndex);
+ });
});
- });
- it('offset has to be the expectedOffset', function() {
- for (var i = 0; i < 4; i++) {
- instance.prev();
- }
+ describe('called 4x', function() {
+ var expectedIndex = 2;
- assert.equal(instance.returnIndex(), 3);
+ beforeEach(function () {
+ for (var i = 0; i < 4; i++) {
+ instance.prev();
+ }
+ });
+
+ it('translates the slides container 3 slides to the left', function(done) {
+ waitForTransitionEnd(function() {
+ assert.equal(getActualOffset(), getExpectedOffset(3));
+ }, done);
+ });
+
+ it('index has to be 2 (i.e. 3rd slide)', function() {
+ assert.equal(instance.returnIndex(), expectedIndex);
+ });
+ });
});
});

0 comments on commit b515e62

Please sign in to comment.