(function() { describe('WOW', function() { var timeout, winHeight; window.console = { warn: function() {} }; timeout = 100; winHeight = 300; describe('smoke test', function() { it('exists', function() { return expect(WOW).toBeDefined(); }); return it("has an 'init' method", function() { return expect(new WOW().init).toBeDefined(); }); }); describe('simple test environment', function() { beforeEach(function() { return loadFixtures('simple.html'); }); it('emulates window height', function() { return expect(document.documentElement.clientHeight).toBe(winHeight); }); return it('has boxes set up for testing', function() { var boxCount, boxHeight, offset, style; boxHeight = 200; boxCount = $('#simple').children().length; expect($('#simple').height()).toBe(boxHeight * boxCount); expect($('#simple-1').height()).toBe(boxHeight); expect($('#simple-2').height()).toBe(boxHeight); expect($('#simple-3').height()).toBe(boxHeight); expect($('#simple-4').height()).toBe(boxHeight); expect($('#simple-5').height()).toBe(boxHeight); offset = $('#simple').offset().top; expect($('#simple-1').offset().top).toBe(offset + boxHeight * 0); expect($('#simple-2').offset().top).toBe(offset + boxHeight * 1); expect($('#simple-3').offset().top).toBe(offset + boxHeight * 2); expect($('#simple-4').offset().top).toBe(offset + boxHeight * 3); expect($('#simple-5').offset().top).toBe(offset + boxHeight * 4); style = $('#simple-5')[0].style; expect(style.background).toBe('yellow'); return expect(style.color).toBe('red'); }); }); describe('library behaviour', function() { var wow; wow = null; beforeEach(function(done) { loadFixtures('simple.html'); (wow = new WOW).init(); return setTimeout(function() { return done(); }, timeout); }); it('animates elements that are fully visible on the page', function() { expect($('#simple-1')).toHaveClass('animated'); return expect($('#simple-1').css('visibility')).toBe('visible'); }); it("does not touch elements that don't have the marker class", function() { expect($('#simple-2')).not.toHaveClass('animated'); return expect($('#simple-2').css('visibility')).toBe('visible'); }); it('does not animate elements not yet visible on the page', function() { expect($('#simple-3')).not.toHaveClass('animated'); expect($('#simple-3').css('visibility')).not.toBe('visible'); expect($('#simple-4')).not.toHaveClass('animated'); return expect($('#simple-4').css('visibility')).not.toBe('visible'); }); it('animates elements after scrolling down and they become visible', function(done) { window.scrollTo(0, $('#simple-3').offset().top - winHeight + 150); return setTimeout(function() { expect($('#simple-3')).toHaveClass('animated'); expect($('#simple-3').css('visibility')).toBe('visible'); expect($('#simple-4')).not.toHaveClass('animated'); expect($('#simple-4').css('visibility')).not.toBe('visible'); window.scrollTo(0, $('#simple-4').offset().top - winHeight + 150); return setTimeout(function() { expect($('#simple-4')).toHaveClass('animated'); expect($('#simple-4').css('visibility')).toBe('visible'); return done(); }, timeout); }, timeout); }); it('does not tamper with the style attribute', function(done) { window.scrollTo(0, $('#simple-5').offset().top - winHeight + 150); return setTimeout(function() { expect($('#simple-5')).toHaveClass('animated'); expect($('#simple-5').css('visibility')).toBe('visible'); expect($('#simple-5')[0].style.background).toBe('yellow'); expect($('#simple-5')[0].style.color).toBe('red'); return done(); }, timeout); }); it('works with asynchronously loaded content', function(done) { $('#simple').append($('
', { id: 'simple-6', "class": 'wow' })); wow.sync(); window.scrollTo(0, $('#simple-6').offset().top - winHeight + 150); return setTimeout(function() { expect($('#simple-6')).toHaveClass('animated'); expect($('#simple-6').css('visibility')).toBe('visible'); return done(); }, timeout); }); return it('works with asynchronously loaded nested content', function(done) { $('#simple').append($('
')).children().first().append($('
', { id: 'simple-7', "class": 'wow' })); wow.sync(); window.scrollTo(0, $('#simple-7').offset().top - winHeight + 150); return setTimeout(function() { expect($('#simple-7')).toHaveClass('animated'); expect($('#simple-7').css('visibility')).toBe('visible'); return done(); }, timeout); }); }); describe('custom test environment', function() { beforeEach(function() { return loadFixtures('custom.html'); }); it('emulates window height', function() { return expect(document.documentElement.clientHeight).toBe(winHeight); }); return it('has boxes set up for testing', function() { var offset; expect($('#custom').height()).toBe(800); expect($('#custom-1').height()).toBe(200); expect($('#custom-2').height()).toBe(200); expect($('#custom-3').height()).toBe(200); expect($('#custom-4').height()).toBe(200); offset = $('#custom').offset().top; expect($('#custom-1').offset().top).toBe(offset + 200 * 0); expect($('#custom-2').offset().top).toBe(offset + 200 * 1); expect($('#custom-3').offset().top).toBe(offset + 200 * 2); return expect($('#custom-4').offset().top).toBe(offset + 200 * 3); }); }); return describe('library behaviour with custom settings', function() { var called; called = false; beforeEach(function(done) { called = false; loadFixtures('custom.html'); new WOW({ boxClass: 'block', animateClass: 'fancy', offset: 10, callback: function() { return called = true; } }).init(); $('.block').on('block', function() { return $(this).addClass('triggered'); }); return setTimeout(function() { return done(); }, timeout); }); it("creates two instances of the WOW.js with different configs", function() { var wow1, wow2; wow1 = new WOW({ boxClass: 'block1', animateClass: 'fancy1', offset: 10 }); wow2 = new WOW({ boxClass: 'block2', animateClass: 'fancy2', offset: 20 }); expect(wow1.config.boxClass).toBe("block1"); expect(wow1.config.animateClass).toBe("fancy1"); return expect(wow1.config.offset).toBe(10); }); it("does not touch elements that don't have the marker class", function(done) { window.scrollTo(0, $('#custom-1').offset().top - winHeight + 15); return setTimeout(function() { expect($('#custom-1')).not.toHaveClass('fancy'); return done(); }, timeout); }); it("animates elements that are partially visible on the page based on the 'offset' config", function(done) { return setTimeout(function() { window.scrollTo(0, $('#custom-2').offset().top - winHeight + 5); expect($('#custom-2')).not.toHaveClass('fancy'); window.scrollTo(0, $('#custom-2').offset().top - winHeight + 15); return setTimeout(function() { expect($('#custom-2')).toHaveClass('fancy'); expect($('#custom-2').css('visibility')).toBe('visible'); return done(); }, timeout); }, timeout); }); it('does not animate elements not yet visible on the page', function() { expect($('#custom-3')).not.toHaveClass('fancy'); return expect($('#custom-4')).not.toHaveClass('fancy'); }); it('animates elements after scrolling down and they become visible', function(done) { window.scrollTo(0, $('#custom-3').offset().top - winHeight + 150); return setTimeout(function() { expect($('#custom-3')).toHaveClass('fancy'); expect($('#custom-3').css('visibility')).toBe('visible'); expect($('#custom-3')[0].style.webkitAnimationIterationCount).toBe('2'); expect($('#custom-4')).not.toHaveClass('fancy'); window.scrollTo(0, $('#custom-4').offset().top - winHeight + 150); return setTimeout(function() { expect($('#custom-4')).toHaveClass('fancy'); expect($('#custom-4').css('visibility')).toBe('visible'); expect($('#custom-4')[0].style.webkitAnimationIterationCount).toBe('infinite'); expect($('#custom-4')[0].style.webkitAnimationDuration).toBe('2s'); expect($('#custom-4')[0].style.webkitAnimationDelay).toBe('1s'); return done(); }, timeout); }, timeout); }); it("fires the callback", function(done) { called = false; window.scrollTo(0, $('#custom-3').offset().top - winHeight + 150); return setTimeout(function() { expect(called).toBe(true); return done(); }, timeout); }); return it('fires the callback on the visible element', function(done) { window.scrollTo(0, $('#custom-3').offset().top - winHeight + 150); return setTimeout(function() { expect($('#custom-3')).toHaveClass('triggered'); expect($('#custom-4')).not.toHaveClass('triggered'); window.scrollTo(0, $('#custom-4').offset().top - winHeight + 150); return setTimeout(function() { expect($('#custom-3')).toHaveClass('triggered'); expect($('#custom-4')).toHaveClass('triggered'); return done(); }, timeout); }, timeout); }); }); }); }).call(this);