unpoly-rails 0.57.0 → 0.60.0

data/spec_app/spec/javascripts/up/motion_spec.js.coffee

@@ -1,3 +1,7 @@
+u = up.util
+e = up.element
+$ = jQuery
+
 describe 'up.motion', ->
 
   u = up.util
@@ -7,32 +11,32 @@ describe 'up.motion', ->
     describe 'up.animate', ->
 
       it 'animates the given element', (done) ->
-        $element = affix('.element').text('content')
+        $element = $fixture('.element').text('content')
         up.animate($element, 'fade-in', duration: 200, easing: 'linear')
 
-        u.setTimer 1, ->
+        u.timer 1, ->
           expect($element).toHaveOpacity(0.0, 0.15)
-        u.setTimer 100, ->
+        u.timer 100, ->
           expect($element).toHaveOpacity(0.5, 0.3)
-        u.setTimer 260, ->
+        u.timer 260, ->
           expect($element).toHaveOpacity(1.0, 0.15)
           done()
 
       it 'returns a promise that is fulfilled when the animation has completed', (done) ->
-        $element = affix('.element').text('content')
+        $element = $fixture('.element').text('content')
         resolveSpy = jasmine.createSpy('resolve')
 
         promise = up.animate($element, 'fade-in', duration: 100, easing: 'linear')
         promise.then(resolveSpy)
 
-        u.setTimer 50, ->
+        u.timer 50, ->
           expect(resolveSpy).not.toHaveBeenCalled()
-          u.setTimer 50 + (timingTolerance = 120), ->
+          u.timer 50 + (timingTolerance = 120), ->
             expect(resolveSpy).toHaveBeenCalled()
             done()
 
       it 'cancels an existing animation on the element by instantly jumping to the last frame', asyncSpec (next) ->
-        $element = affix('.element').text('content')
+        $element = $fixture('.element').text('content')
         up.animate($element, { 'font-size': '40px' }, duration: 10000, easing: 'linear')
 
         next =>
@@ -42,7 +46,7 @@ describe 'up.motion', ->
           expect($element.css('font-size')).toEqual('40px')
 
       it 'pauses an existing CSS transitions and restores it once the Unpoly animation is done', asyncSpec (next) ->
-        $element = affix('.element').text('content').css
+        $element = $fixture('.element').text('content').css
           backgroundColor: 'yellow'
           fontSize: '10px'
           height: '20px'
@@ -87,32 +91,32 @@ describe 'up.motion', ->
       describe 'when up.animate() is called from inside an animation function', ->
 
         it 'animates', (done) ->
-          $element = affix('.element').text('content')
+          $element = $fixture('.element').text('content')
 
           animation = ($element, options) ->
-            u.writeInlineStyle($element, opacity: 0)
+            e.setStyle($element, opacity: 0)
             up.animate($element, { opacity: 1 }, options)
 
           up.animate($element, animation, duration: 300, easing: 'linear')
 
-          u.setTimer 5, ->
+          u.timer 5, ->
             expect($element).toHaveOpacity(0.0, 0.25)
-          u.setTimer 150, ->
+          u.timer 150, ->
             expect($element).toHaveOpacity(0.5, 0.25)
-          u.setTimer 300, ->
+          u.timer 300, ->
             expect($element).toHaveOpacity(1.0, 0.25)
             done()
 
         it "finishes animations only once", (done) ->
-          $element = affix('.element').text('content')
+          $element = $fixture('.element').text('content')
 
           animation = ($element, options) ->
-            u.writeInlineStyle($element, opacity: 0)
+            e.setStyle($element, opacity: 0)
             up.animate($element, { opacity: 1 }, options)
 
           up.animate($element, animation, duration: 200, easing: 'linear')
 
-          u.nextFrame =>
+          u.task =>
             expect(up.motion.finishCount()).toEqual(1)
             done()
 
@@ -123,12 +127,12 @@ describe 'up.motion', ->
           up.motion.config.enabled = false
 
         it "doesn't animate and directly sets the last frame instead", (done) ->
-          $element = affix('.element').text('content')
+          $element = $fixture('.element').text('content')
           callback = jasmine.createSpy('animation done callback')
           animateDone = up.animate($element, { 'font-size': '40px' }, duration: 10000, easing: 'linear')
           animateDone.then(callback)
 
-          u.setTimer 5, =>
+          u.timer 5, =>
             expect($element.css('font-size')).toEqual('40px')
             expect(callback).toHaveBeenCalled()
             done()
@@ -138,7 +142,7 @@ describe 'up.motion', ->
         describe "when called with a `#{noneAnimation}` animation", ->
 
           it "doesn't animate and resolves instantly", asyncSpec (next) ->
-            $element = affix('.element').text('content')
+            $element = $fixture('.element').text('content')
             callback = jasmine.createSpy('animation done callback')
             animateDone = up.animate($element, noneAnimation, duration: 10000, easing: 'linear')
             animateDone.then(callback)
@@ -150,7 +154,7 @@ describe 'up.motion', ->
       describe 'when called with an element or selector', ->
 
         it 'cancels an existing animation on the given element by instantly jumping to the last frame', asyncSpec (next) ->
-          $element = affix('.element').text('content')
+          $element = $fixture('.element').text('content')
           up.animate($element, { 'font-size': '40px', 'opacity': '0.5' }, duration: 30000)
 
           next =>
@@ -158,10 +162,10 @@ describe 'up.motion', ->
 
           next =>
             expect($element.css('font-size')).toEqual('40px')
-            expect(u.opacity($element, 'opacity')).toBeAround(0.5, 0.01) # Safari sometimes has rounding errors
+            expect($element).toHaveOpacity(0.5, 0.01) # Safari sometimes has rounding errors
 
         it 'cancels animations on children of the given element', asyncSpec (next) ->
-          $parent = affix('.element')
+          $parent = $fixture('.element')
           $child = $parent.affix('.child')
           up.animate($child, { 'font-size': '40px' }, duration: 10000)
 
@@ -172,8 +176,8 @@ describe 'up.motion', ->
             expect($child.css('font-size')).toEqual('40px')
 
         it 'does not cancel animations on other elements', asyncSpec (next) ->
-          $element1 = affix('.element1').text('content1')
-          $element2 = affix('.element2').text('content2')
+          $element1 = $fixture('.element1').text('content1')
+          $element2 = $fixture('.element2').text('content2')
           up.animate($element1, 'fade-in', duration: 10000)
           up.animate($element2, 'fade-in', duration: 10000)
 
@@ -185,7 +189,7 @@ describe 'up.motion', ->
             expect(Number($element2.css('opacity'))).toBeAround(0, 0.1)
 
         it 'restores CSS transitions from before the Unpoly animation', asyncSpec (next) ->
-          $element = affix('.element').text('content')
+          $element = $fixture('.element').text('content')
           $element.css('transition': 'font-size 3s ease')
           oldTransitionProperty = $element.css('transition-property')
           expect(oldTransitionProperty).toBeDefined()
@@ -196,15 +200,15 @@ describe 'up.motion', ->
             up.motion.finish($element)
 
           next =>
-            expect(u.opacity($element)).toEqual(1)
+            expect($element).toHaveOpacity(1)
             currentTransitionProperty = $element.css('transition-property')
             expect(currentTransitionProperty).toEqual(oldTransitionProperty)
             expect(currentTransitionProperty).toContain('font-size')
             expect(currentTransitionProperty).not.toContain('opacity')
 
         it 'cancels an existing transition on the old element by instantly jumping to the last frame', asyncSpec (next) ->
-          $v1 = affix('.element').text('v1')
-          $v2 = affix('.element').text('v2')
+          $v1 = $fixture('.element').text('v1')
+          $v2 = $fixture('.element').text('v2')
 
           up.morph($v1, $v2, 'cross-fade', duration: 200)
 
@@ -219,8 +223,8 @@ describe 'up.motion', ->
             expect($v2).toHaveOpacity(1.0, 0.2)
 
         it 'cancels an existing transition on the new element by instantly jumping to the last frame', asyncSpec (next) ->
-          $v1 = affix('.element').text('v1')
-          $v2 = affix('.element').text('v2')
+          $v1 = $fixture('.element').text('v1')
+          $v2 = $fixture('.element').text('v2')
 
           up.morph($v1, $v2, 'cross-fade', duration: 200)
 
@@ -236,7 +240,7 @@ describe 'up.motion', ->
 
 
         it 'cancels transitions on children of the given element', asyncSpec (next) ->
-          $parent = affix('.parent')
+          $parent = $fixture('.parent')
           $old = $parent.affix('.old').text('old content')
           $new = $parent.affix('.new').text('new content')
 
@@ -254,8 +258,8 @@ describe 'up.motion', ->
 
 
         it 'does not leave .up-bounds elements in the DOM', asyncSpec (next) ->
-          $old = affix('.old').text('old content')
-          $new = affix('.new').text('new content')
+          $old = $fixture('.old').text('old content')
+          $new = $fixture('.new').text('new content')
 
           up.morph($old, $new, 'cross-fade', duration: 2000)
 
@@ -268,7 +272,7 @@ describe 'up.motion', ->
 
 
         it 'emits an up:motion:finish event on the given animating element, so custom animation functions can react to the finish request', asyncSpec (next) ->
-          $element = affix('.element').text('element text')
+          $element = $fixture('.element').text('element text')
           listener = jasmine.createSpy('finish event listener')
           $element.on('up:motion:finish', listener)
 
@@ -294,69 +298,69 @@ describe 'up.motion', ->
       describe 'when called without arguments', ->
 
         it 'cancels all animations on the screen', asyncSpec (next) ->
-          $element1 = affix('.element1').text('content1')
-          $element2 = affix('.element2').text('content2')
+          $element1 = $fixture('.element1').text('content1')
+          $element2 = $fixture('.element2').text('content2')
 
           up.animate($element1, 'fade-in', duration: 3000)
           up.animate($element2, 'fade-in', duration: 3000)
 
           next =>
-            expect(u.opacity($element1)).toBeAround(0.0, 0.1)
-            expect(u.opacity($element2)).toBeAround(0.0, 0.1)
+            expect($element1).toHaveOpacity(0.0, 0.1)
+            expect($element2).toHaveOpacity(0.0, 0.1)
 
             up.motion.finish()
 
           next =>
             $element1 = $('.element1')
             $element2 = $('.element2')
-            expect(u.opacity($element1)).toBe(1.0)
-            expect(u.opacity($element2)).toBe(1.0)
+            expect($element1).toHaveOpacity(1.0)
+            expect($element2).toHaveOpacity(1.0)
 
     describe 'up.morph', ->
 
       it 'transitions between two element by absolutely positioning one element above the other', asyncSpec (next) ->
-        $old = affix('.old').text('old content').css(width: '200px', width: '200px')
-        $new = affix('.new').text('new content').css(width: '200px', width: '200px').detach()
+        $old = $fixture('.old').text('old content').css(width: '200px', width: '200px')
+        $new = $fixture('.new').text('new content').css(width: '200px', width: '200px').detach()
 
-        oldDims = u.measure($old)
+        oldDims = $old[0].getBoundingClientRect()
 
         up.morph($old, $new, 'cross-fade', duration: 200, easing: 'linear')
 
         next =>
-          expect(u.measure($old)).toEqual(oldDims)
-          expect(u.measure($new)).toEqual(oldDims)
+          expect($old[0].getBoundingClientRect()).toEqual(oldDims)
+          expect($new[0].getBoundingClientRect()).toEqual(oldDims)
 
-          expect(u.opacity($old)).toBeAround(1.0, 0.25)
-          expect(u.opacity($new)).toBeAround(0.0, 0.25)
+          expect($old).toHaveOpacity(1.0, 0.25)
+          expect($new).toHaveOpacity(0.0, 0.25)
 
         next.after 100, =>
-          expect(u.opacity($old)).toBeAround(0.5, 0.25)
-          expect(u.opacity($new)).toBeAround(0.5, 0.25)
+          expect($old).toHaveOpacity(0.5, 0.25)
+          expect($new).toHaveOpacity(0.5, 0.25)
 
         next.after (100 + (tolerance = 110)), =>
-          expect(u.opacity($new)).toBeAround(1.0, 0.25)
+          expect($new).toHaveOpacity(1.0, 0.25)
           expect($old).toBeDetached()
 
       it 'does not change the position of sibling elements (as long as the old and new elements are of equal size)', asyncSpec (next) ->
-        $container = affix('.container')
+        $container = $fixture('.container')
 
         $before = $container.affix('.before').css(margin: '20px')
         $old = $container.affix('.old').text('old content').css(width: '200px', width: '200px', margin: '20px')
         $new = $container.affix('.new').text('new content').css(width: '200px', width: '200px', margin: '20px').detach()
         $after = $container.affix('.before').css(margin: '20px')
 
-        beforeDims = u.measure($before)
-        afterDims = u.measure($after)
+        beforeDims = $before[0].getBoundingClientRect()
+        afterDims = $after[0].getBoundingClientRect()
 
         up.morph($old, $new, 'cross-fade', duration: 30, easing: 'linear')
 
         next =>
-          expect(u.measure($before)).toEqual(beforeDims)
-          expect(u.measure($after)).toEqual(afterDims)
+          expect($before[0].getBoundingClientRect()).toEqual(beforeDims)
+          expect($after[0].getBoundingClientRect()).toEqual(afterDims)
 
         next.after 50, =>
-          expect(u.measure($before)).toEqual(beforeDims)
-          expect(u.measure($after)).toEqual(afterDims)
+          expect($before[0].getBoundingClientRect()).toEqual(beforeDims)
+          expect($after[0].getBoundingClientRect()).toEqual(afterDims)
 
       it 'transitions between two elements that are already positioned absolutely', asyncSpec (next) ->
         elementStyles =
@@ -365,25 +369,25 @@ describe 'up.motion', ->
           top: '30px'
           width: '200px'
           width: '200px'
-        $old = affix('.old').text('old content').css(elementStyles)
-        $new = affix('.new').text('new content').css(elementStyles).detach()
+        $old = $fixture('.old').text('old content').css(elementStyles)
+        $new = $fixture('.new').text('new content').css(elementStyles).detach()
 
-        oldDims = u.measure($old)
+        oldDims = $old[0].getBoundingClientRect()
 
         up.morph($old, $new, 'cross-fade', duration: 100, easing: 'linear')
 
         next =>
-          expect(u.measure($old)).toEqual(oldDims)
-          expect(u.measure($new)).toEqual(oldDims)
+          expect($old[0].getBoundingClientRect()).toEqual(oldDims)
+          expect($new[0].getBoundingClientRect()).toEqual(oldDims)
 
         next.after (100 + (timingTolerance = 120)), =>
           expect($old).toBeDetached()
-          expect(u.measure($new)).toEqual(oldDims)
+          expect($new[0].getBoundingClientRect()).toEqual(oldDims)
 
       it 'cancels an existing transition on the new element by instantly jumping to the last frame', asyncSpec (next) ->
-        $v1 = affix('.element').text('v1')
-        $v2 = affix('.element').text('v2')
-        $v3 = affix('.element').text('v3')
+        $v1 = $fixture('.element').text('v1')
+        $v2 = $fixture('.element').text('v2')
+        $v3 = $fixture('.element').text('v3')
 
         up.morph($v1, $v2, 'cross-fade', duration: 200)
 
@@ -399,8 +403,8 @@ describe 'up.motion', ->
           expect($v3).toHaveOpacity(0.0, 0.2)
 
       it 'detaches the old element in the DOM', (done) ->
-        $v1 = affix('.element').text('v1')
-        $v2 = affix('.element').text('v2')
+        $v1 = $fixture('.element').text('v1')
+        $v2 = $fixture('.element').text('v2')
 
         morphDone = up.morph($v1, $v2, 'cross-fade', duration: 5)
 
@@ -410,53 +414,53 @@ describe 'up.motion', ->
           done()
 
       it 'does not leave .up-bounds elements in the DOM', (done) ->
-        $v1 = affix('.element').text('v1')
-        $v2 = affix('.element').text('v2')
+        $v1 = $fixture('.element').text('v1')
+        $v2 = $fixture('.element').text('v2')
 
         morphDone = up.morph($v1, $v2, 'cross-fade', duration: 5)
 
         morphDone.then ->
-          expect('.up-bounds').not.toExist()
+          expect('.up-bounds').not.toBeAttached()
           done()
 
 
       describe 'when up.animate() is called from inside a transition function', ->
 
         it 'animates', asyncSpec (next) ->
-          $old = affix('.old').text('old content')
-          $new = affix('.new').text('new content').detach()
+          $old = $fixture('.old').text('old content')
+          $new = $fixture('.new').text('new content').detach()
 
-          oldDims = u.measure($old)
+          oldDims = $old[0].getBoundingClientRect()
 
-          transition = ($old, $new, options) ->
-            up.animate($old, 'fade-out', options)
-            up.animate($new, 'fade-in', options)
+          transition = (oldElement, newElement, options) ->
+            up.animate(oldElement, 'fade-out', options)
+            up.animate(newElement, 'fade-in', options)
 
           up.morph($old, $new, transition, duration: 200, easing: 'linear')
 
           next =>
-            expect(u.measure($old)).toEqual(oldDims)
-            expect(u.measure($new)).toEqual(oldDims)
+            expect($old[0].getBoundingClientRect()).toEqual(oldDims)
+            expect($new[0].getBoundingClientRect()).toEqual(oldDims)
 
-            expect(u.opacity($old)).toBeAround(1.0, 0.25)
-            expect(u.opacity($new)).toBeAround(0.0, 0.25)
+            expect($old).toHaveOpacity(1.0, 0.25)
+            expect($new).toHaveOpacity(0.0, 0.25)
 
           next.after 100, =>
-            expect(u.opacity($old)).toBeAround(0.5, 0.25)
-            expect(u.opacity($new)).toBeAround(0.5, 0.25)
+            expect($old).toHaveOpacity(0.5, 0.25)
+            expect($new).toHaveOpacity(0.5, 0.25)
 
           next.after (100 + (tolerance = 110)), =>
-            expect(u.opacity($new)).toBeAround(1.0, 0.1)
+            expect($new).toHaveOpacity(1.0, 0.1)
             expect($old).toBeDetached()
             expect($new).toBeAttached()
 
         it 'finishes animations only once', asyncSpec (next) ->
-          $old = affix('.old').text('old content')
-          $new = affix('.new').text('new content').detach()
+          $old = $fixture('.old').text('old content')
+          $new = $fixture('.new').text('new content').detach()
 
-          transition = ($old, $new, options) ->
-            up.animate($old, 'fade-out', options)
-            up.animate($new, 'fade-in', options)
+          transition = (oldElement, newElement, options) ->
+            up.animate(oldElement, 'fade-out', options)
+            up.animate(newElement, 'fade-in', options)
 
           up.morph($old, $new, transition, duration: 200, easing: 'linear')
 
@@ -466,38 +470,38 @@ describe 'up.motion', ->
       describe 'when up.morph() is called from inside a transition function', ->
 
         it 'morphs', asyncSpec (next) ->
-          $old = affix('.old').text('old content')
-          $new = affix('.new').text('new content').detach()
+          $old = $fixture('.old').text('old content')
+          $new = $fixture('.new').text('new content').detach()
 
-          oldDims = u.measure($old)
+          oldDims = $old[0].getBoundingClientRect()
 
-          transition = ($old, $new, options) ->
-            up.morph($old, $new, 'cross-fade', options)
+          transition = (oldElement, newElement, options) ->
+            up.morph(oldElement, newElement, 'cross-fade', options)
 
           up.morph($old, $new, transition, duration: 400, easing: 'linear')
 
           next =>
-            expect(u.measure($old)).toEqual(oldDims)
-            expect(u.measure($new)).toEqual(oldDims)
+            expect($old[0].getBoundingClientRect()).toEqual(oldDims)
+            expect($new[0].getBoundingClientRect()).toEqual(oldDims)
 
-            expect(u.opacity($old)).toBeAround(1.0, 0.25)
-            expect(u.opacity($new)).toBeAround(0.0, 0.25)
+            expect($old).toHaveOpacity(1.0, 0.25)
+            expect($new).toHaveOpacity(0.0, 0.25)
 
           next.after 200, =>
-            expect(u.opacity($old)).toBeAround(0.5, 0.25)
-            expect(u.opacity($new)).toBeAround(0.5, 0.25)
+            expect($old).toHaveOpacity(0.5, 0.25)
+            expect($new).toHaveOpacity(0.5, 0.25)
 
           next.after (200 + (tolerance = 110)), =>
-            expect(u.opacity($new)).toBeAround(1.0, 0.25)
+            expect($new).toHaveOpacity(1.0, 0.25)
             expect($old).toBeDetached()
             expect($new).toBeAttached()
 
         it "finishes animations only once", asyncSpec (next) ->
-          $old = affix('.old').text('old content')
-          $new = affix('.new').text('new content').detach()
+          $old = $fixture('.old').text('old content')
+          $new = $fixture('.new').text('new content').detach()
 
-          transition = ($old, $new, options) ->
-            up.morph($old, $new, 'cross-fade', options)
+          transition = (oldElement, newElement, options) ->
+            up.morph(oldElement, newElement, 'cross-fade', options)
 
           up.morph($old, $new, transition, duration: 50, easing: 'linear')
 
@@ -508,19 +512,19 @@ describe 'up.motion', ->
       describe 'with { reveal: true } option', ->
 
         it 'reveals the new element while making the old element within the same viewport appear as if it would keep its scroll position', asyncSpec (next) ->
-          $container = affix('.container[up-viewport]').css
+          $container = $fixture('.container[up-viewport]').css
             'width': '200px'
             'height': '200px'
             'overflow-y': 'scroll'
             'position': 'fixed'
             'left': 0,
             'top': 0
-          $old = affix('.old').appendTo($container).css(height: '600px')
+          $old = $fixture('.old').appendTo($container).css(height: '600px')
           $container.scrollTop(300)
 
           expect($container.scrollTop()).toEqual(300)
 
-          $new = affix('.new').css(height: '600px').detach()
+          $new = $fixture('.new').css(height: '600px').detach()
 
           up.morph($old, $new, 'cross-fade', duration: 50, reveal: true)
 
@@ -544,8 +548,8 @@ describe 'up.motion', ->
           up.motion.config.enabled = false
 
         it "doesn't animate and detaches the old element instead", asyncSpec (next) ->
-          $old = affix('.old').text('old content')
-          $new = affix('.new').text('new content')
+          $old = $fixture('.old').text('old content')
+          $new = $fixture('.new').text('new content')
           up.morph($old, $new, 'cross-fade', duration: 1000)
 
           next =>
@@ -559,8 +563,8 @@ describe 'up.motion', ->
         describe "when called with a `#{JSON.stringify(noneTransition)}` transition", ->
 
           it "doesn't animate and detaches the old element instead", asyncSpec (next) ->
-            $old = affix('.old').text('old content')
-            $new = affix('.new').text('new content')
+            $old = $fixture('.old').text('old content')
+            $new = $fixture('.new').text('new content')
             up.morph($old, $new, noneTransition, duration: 1000)
 
             next =>