unpoly-rails 0.23.0 → 0.24.0

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

@@ -1,4 +1,6 @@
 describe 'up.motion', ->
+
+  u = up.util
   
   describe 'Javascript functions', ->
   
@@ -11,11 +13,11 @@ describe 'up.motion', ->
           opacity = -> Number($element.css('opacity'))
           up.animate($element, 'fade-in', duration: 200, easing: 'linear')
 
-          @setTimer 0, ->
+          u.setTimer 0, ->
             expect(opacity()).toBeAround(0.0, 0.25)
-          @setTimer 100, ->
+          u.setTimer 100, ->
             expect(opacity()).toBeAround(0.5, 0.25)
-          @setTimer 200, ->
+          u.setTimer 200, ->
             expect(opacity()).toBeAround(1.0, 0.25)
             done()
 
@@ -42,6 +44,109 @@ describe 'up.motion', ->
           up.animate($element, { 'font-size': '40px' }, duration: 10000, easing: 'linear')
           expect($element.css('font-size')).toEqual('40px')
 
+    describe 'up.motion.finish', ->
+
+      describe 'when called with an element or selector', ->
+
+        it 'cancels an existing animation on the given element by instantly jumping to the last frame', ->
+          $element = affix('.element').text('content')
+          up.animate($element, { 'font-size': '40px', 'opacity': '0.33' }, duration: 10000)
+          up.motion.finish($element)
+          expect($element.css('font-size')).toEqual('40px')
+          expect($element.css('opacity')).toEqual('0.33')
+
+        it 'cancels animations on children of the given element', ->
+          $parent = affix('.element')
+          $child = $parent.affix('.child')
+          up.animate($child, { 'font-size': '40px' }, duration: 10000)
+          up.motion.finish($parent)
+          expect($child.css('font-size')).toEqual('40px')
+
+        it 'does not cancel animations on other elements', ->
+          $element1 = affix('.element1').text('content1')
+          $element2 = affix('.element2').text('content2')
+          up.animate($element1, 'fade-in', duration: 10000)
+          up.animate($element2, 'fade-in', duration: 10000)
+          up.motion.finish($element1)
+          expect(Number($element1.css('opacity'))).toEqual(1)
+          expect(Number($element2.css('opacity'))).toEqual(0, 0.1)
+
+        it 'restores existing transitions on the element', ->
+          $element = affix('.element').text('content')
+          $element.css('transition': 'font-size 3s ease')
+          oldTransition = $element.css('transition')
+          expect(oldTransition).toContain('font-size') # be paranoid
+          up.animate($element, 'fade-in', duration: 10000)
+          up.motion.finish($element)
+          expect(Number($element.css('opacity'))).toEqual(1)
+          currentTransition = $element.css('transition')
+          expect(currentTransition).toEqual(oldTransition)
+          expect(currentTransition).toContain('font-size')
+          expect(currentTransition).not.toContain('opacity')
+          expect(currentTransition).not.toContain('none')
+          expect(currentTransition).not.toContain('all')
+
+        it 'cancels an existing transition on the element by instantly jumping to the last frame', ->
+          $old = affix('.old').text('old content')
+          $new = affix('.new').text('new content')
+
+          up.morph($old, $new, 'cross-fade', duration: 2000)
+          expect($('.up-ghost').length).toBe(2)
+
+          up.motion.finish($old)
+
+          expect($('.up-ghost').length).toBe(0)
+          expect($old.css('display')).toEqual('none')
+          expect($new.css('display')).toEqual('block')
+
+        it 'can be called on either element involved in a transition', ->
+          $old = affix('.old').text('old content')
+          $new = affix('.new').text('new content')
+
+          up.morph($old, $new, 'cross-fade', duration: 2000)
+          expect($('.up-ghost').length).toBe(2)
+
+          up.motion.finish($new)
+
+          expect($('.up-ghost').length).toBe(0)
+          expect($old.css('display')).toEqual('none')
+          expect($new.css('display')).toEqual('block')
+
+
+        it 'cancels transitions on children of the given element', ->
+          $parent = affix('.parent')
+          $old = $parent.affix('.old').text('old content')
+          $new = $parent.affix('.new').text('new content')
+
+          up.morph($old, $new, 'cross-fade', duration: 2000)
+          expect($('.up-ghost').length).toBe(2)
+
+          up.motion.finish($parent)
+
+          expect($('.up-ghost').length).toBe(0)
+          expect($old.css('display')).toEqual('none')
+          expect($new.css('display')).toEqual('block')
+
+      describe 'when called without arguments', ->
+
+        it 'cancels all animations on the screen', ->
+          $element1 = affix('.element1').text('content1')
+          $element2 = affix('.element2').text('content2')
+
+          up.animate($element1, 'fade-in', duration: 3000)
+          up.animate($element2, 'fade-in', duration: 3000)
+
+          opacity = ($element) -> Number($element.css('opacity'))
+
+          expect(opacity($element1)).toBeAround(0.0, 0.1)
+          expect(opacity($element2)).toBeAround(0.0, 0.1)
+
+          up.motion.finish()
+
+          $element1 = $('.element1')
+          $element2 = $('.element2')
+          expect(opacity($element1)).toBe(1.0)
+          expect(opacity($element2)).toBe(1.0)
 
     describe 'up.morph', ->
 
@@ -119,19 +224,19 @@ describe 'up.motion', ->
 
           opacity = ($element) -> Number($element.css('opacity'))
 
-          @setTimer 0, ->
+          u.setTimer 0, ->
             expect(opacity($newGhost)).toBeAround(0.0, 0.25)
             expect(opacity($oldGhost)).toBeAround(1.0, 0.25)
 
-          @setTimer 80, ->
+          u.setTimer 80, ->
             expect(opacity($newGhost)).toBeAround(0.4, 0.25)
             expect(opacity($oldGhost)).toBeAround(0.6, 0.25)
 
-          @setTimer 140, ->
+          u.setTimer 140, ->
             expect(opacity($newGhost)).toBeAround(0.7, 0.25)
             expect(opacity($oldGhost)).toBeAround(0.3, 0.25)
 
-          @setTimer 250, ->
+          u.setTimer 250, ->
             # Once our two ghosts have rendered their visual effect,
             # we remove them from the DOM.
             expect($newGhost).not.toBeInDOM()

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

@@ -1,132 +1,168 @@
 describe 'up.navigation', ->
-  
+
+  u = up.util
+
+  beforeEach ->
+    up.modal.config.openAnimation = 'none'
+    up.modal.config.closeAnimation = 'none'
+
   describe 'unobtrusive behavior', ->
 
-    it 'marks a link as .up-current if it links to the current URL', ->
-      spyOn(up.browser, 'url').and.returnValue('/foo')
-      $currentLink = up.hello(affix('a[href="/foo"]'))
-      $otherLink = up.hello(affix('a[href="/bar"]'))
-      expect($currentLink).toHaveClass('up-current')
-      expect($otherLink).not.toHaveClass('up-current')
-      
-    it 'marks any link as .up-current if its up-href attribute matches the current URL', ->
-      spyOn(up.browser, 'url').and.returnValue('/foo')
-      $currentLink = up.hello(affix('span[up-href="/foo"]'))
-      $otherLink = up.hello(affix('span[up-href="/bar"]'))
-      expect($currentLink).toHaveClass('up-current')
-      expect($otherLink).not.toHaveClass('up-current')
-
-    it 'marks any link as .up-current if any of its space-separated up-alias values matches the current URL', ->
-      spyOn(up.browser, 'url').and.returnValue('/foo')
-      $currentLink = up.hello(affix('span[up-alias="/aaa /foo /bbb"]'))
-      $otherLink = up.hello(affix('span[up-alias="/bar"]'))
-      expect($currentLink).toHaveClass('up-current')
-      expect($otherLink).not.toHaveClass('up-current')
-
-    it 'does not throw if the current location does not match an up-alias wildcard (bugfix)', ->
-      inserter = -> up.hello(affix('a[up-alias="/qqqq*"]'))
-      expect(inserter).not.toThrow()
-
-    it 'does not highlight a link to "#" (commonly used for JS-only buttons)', ->
-      $link = up.hello(affix('a[href="#"]'))
-      expect($link).not.toHaveClass('up-current')
-
-    it 'marks URL prefixes as .up-current if an up-alias value ends in *', ->
-      spyOn(up.browser, 'url').and.returnValue('/foo/123')
-      $currentLink = up.hello(affix('span[up-alias="/aaa /foo/* /bbb"]'))
-      $otherLink = up.hello(affix('span[up-alias="/bar"]'))
-      expect($currentLink).toHaveClass('up-current')
-      expect($otherLink).not.toHaveClass('up-current')
-
-    it 'allows to configure a custom "current" class, but always also sets .up-current', ->
-      up.navigation.config.currentClasses = ['highlight']
-      spyOn(up.browser, 'url').and.returnValue('/foo')
-      $currentLink = up.hello(affix('a[href="/foo"]'))
-      expect($currentLink).toHaveClass('highlight up-current')
-
-    describeCapability 'canPushState', ->
-      
-      it 'marks a link as .up-current if it links to the current URL, but is missing a trailing slash', ->
-        $link = affix('a[href="/foo"][up-target=".main"]')
-        affix('.main')
-        $link.click()
-        @respondWith
-          responseHeaders: { 'X-Up-Location': '/foo/' }
-          responseText: '<div class="main">new-text</div>'
-        expect($link).toHaveClass('up-current')
-      
-      it 'marks a link as .up-current if it links to the current URL, but has an extra trailing slash', ->
-        $link = affix('a[href="/foo/"][up-target=".main"]')
-        affix('.main')
-        $link.click()
-        @respondWith
-          responseHeaders: { 'X-Up-Location': '/foo' }
-          responseText: '<div class="main">new-text</div>'
-        expect($link).toHaveClass('up-current')
-
-      it 'marks a link as .up-current if it links to an URL currently shown either within or below the modal', (done) ->
-        up.history.replace('/foo')
-        $backgroundLink = affix('a[href="/foo"]')
-        $modalLink = affix('a[href="/bar"][up-modal=".main"]')
-        $unrelatedLink = affix('a[href="/baz]')
-
-        Trigger.click($modalLink)
-        @respondWith('<div class="main">new-text</div>')
-        expect($backgroundLink).toHaveClass('up-current')
-        expect($modalLink).toHaveClass('up-current')
-        expect($unrelatedLink).not.toHaveClass('up-current')
-
-        up.modal.close().then ->
+    describe '.up-current', ->
+
+      it 'marks a link as .up-current if it links to the current URL', ->
+        spyOn(up.browser, 'url').and.returnValue('/foo')
+        $currentLink = up.hello(affix('a[href="/foo"]'))
+        $otherLink = up.hello(affix('a[href="/bar"]'))
+        expect($currentLink).toHaveClass('up-current')
+        expect($otherLink).not.toHaveClass('up-current')
+
+      it 'marks any link as .up-current if its up-href attribute matches the current URL', ->
+        spyOn(up.browser, 'url').and.returnValue('/foo')
+        $currentLink = up.hello(affix('span[up-href="/foo"]'))
+        $otherLink = up.hello(affix('span[up-href="/bar"]'))
+        expect($currentLink).toHaveClass('up-current')
+        expect($otherLink).not.toHaveClass('up-current')
+
+      it 'marks any link as .up-current if any of its space-separated up-alias values matches the current URL', ->
+        spyOn(up.browser, 'url').and.returnValue('/foo')
+        $currentLink = up.hello(affix('a[href="/x"][up-alias="/aaa /foo /bbb"]'))
+        $otherLink = up.hello(affix('a[href="/y"][up-alias="/bar"]'))
+        expect($currentLink).toHaveClass('up-current')
+        expect($otherLink).not.toHaveClass('up-current')
+
+      it 'does not throw if the current location does not match an up-alias wildcard (bugfix)', ->
+        inserter = -> up.hello(affix('a[up-alias="/qqqq*"]'))
+        expect(inserter).not.toThrow()
+
+      it 'does not highlight a link to "#" (commonly used for JS-only buttons)', ->
+        $link = up.hello(affix('a[href="#"]'))
+        expect($link).not.toHaveClass('up-current')
+
+      it 'marks URL prefixes as .up-current if an up-alias value ends in *', ->
+        spyOn(up.browser, 'url').and.returnValue('/foo/123')
+        $currentLink = up.hello(affix('a[href="/x"][up-alias="/aaa /foo/* /bbb"]'))
+        $otherLink = up.hello(affix('a[href="/y"][up-alias="/bar"]'))
+        expect($currentLink).toHaveClass('up-current')
+        expect($otherLink).not.toHaveClass('up-current')
+
+      it 'allows to configure a custom "current" class, but always also sets .up-current', ->
+        up.navigation.config.currentClasses = ['highlight']
+        spyOn(up.browser, 'url').and.returnValue('/foo')
+        $currentLink = up.hello(affix('a[href="/foo"]'))
+        expect($currentLink).toHaveClass('highlight up-current')
+
+      describeCapability 'canPushState', ->
+
+        it 'marks a link as .up-current if it links to the current URL, but is missing a trailing slash', ->
+          $link = affix('a[href="/foo"][up-target=".main"]')
+          affix('.main')
+          $link.click()
+          @respondWith
+            responseHeaders: { 'X-Up-Location': '/foo/' }
+            responseText: '<div class="main">new-text</div>'
+          expect($link).toHaveClass('up-current')
+
+        it 'marks a link as .up-current if it links to the current URL, but has an extra trailing slash', ->
+          $link = affix('a[href="/foo/"][up-target=".main"]')
+          affix('.main')
+          $link.click()
+          @respondWith
+            responseHeaders: { 'X-Up-Location': '/foo' }
+            responseText: '<div class="main">new-text</div>'
+          expect($link).toHaveClass('up-current')
+
+        it 'marks a link as .up-current if it links to an URL currently shown either within or below the modal', (done) ->
+          up.history.replace('/foo')
+          $backgroundLink = affix('a[href="/foo"]')
+          $modalLink = affix('a[href="/bar"][up-modal=".main"]')
+          $unrelatedLink = affix('a[href="/baz]')
+
+          Trigger.click($modalLink)
+          @respondWith('<div class="main">new-text</div>')
           expect($backgroundLink).toHaveClass('up-current')
-          expect($modalLink).not.toHaveClass('up-current')
+          expect($modalLink).toHaveClass('up-current')
           expect($unrelatedLink).not.toHaveClass('up-current')
-          done()
 
-      it 'marks a link as .up-current if it links to the URL currently either within or below the popup', (done) ->
-        up.history.replace('/foo')
-        $backgroundLink = affix('a[href="/foo"]')
-        $popupLink = affix('a[href="/bar"][up-popup=".main"]')
-        $unrelatedLink = affix('a[href="/baz]')
+          up.modal.close().then ->
+            expect($backgroundLink).toHaveClass('up-current')
+            expect($modalLink).not.toHaveClass('up-current')
+            expect($unrelatedLink).not.toHaveClass('up-current')
+            done()
 
-        $popupLink.click()
-        @respondWith('<div class="main">new-text</div>')
-        expect($backgroundLink).toHaveClass('up-current')
-        expect($popupLink).toHaveClass('up-current')
-        expect($unrelatedLink).not.toHaveClass('up-current')
+        it 'marks a link as .up-current if it links to the URL currently either within or below the popup', (done) ->
+          up.history.replace('/foo')
+          $backgroundLink = affix('a[href="/foo"]')
+          $popupLink = affix('a[href="/bar"][up-popup=".main"]')
+          $unrelatedLink = affix('a[href="/baz]')
 
-        up.popup.close().then ->
+          $popupLink.click()
+          @respondWith('<div class="main">new-text</div>')
           expect($backgroundLink).toHaveClass('up-current')
-          expect($popupLink).not.toHaveClass('up-current')
+          expect($popupLink).toHaveClass('up-current')
           expect($unrelatedLink).not.toHaveClass('up-current')
-          done()
-
-      it 'changes .up-current marks as the URL changes'
-        
-      it 'marks clicked links as .up-active until the request finishes', ->
-        $link = affix('a[href="/foo"][up-target=".main"]')
-        affix('.main')
-        $link.click()
-        expect($link).toHaveClass('up-active')
-        @respondWith('<div class="main">new-text</div>')
-        expect($link).not.toHaveClass('up-active')
-        expect($link).toHaveClass('up-current')
-        
-      it 'marks links with [up-instant] on mousedown as .up-active until the request finishes', ->
-        $link = affix('a[href="/foo"][up-instant][up-target=".main"]')
-        affix('.main')
-        Trigger.mousedown($link)
-        expect($link).toHaveClass('up-active')
-        @respondWith('<div class="main">new-text</div>')
-        expect($link).not.toHaveClass('up-active')
-        expect($link).toHaveClass('up-current')
-    
-      it 'prefers to mark an enclosing [up-expand] click area', ->
-        $area = affix('div[up-expand] a[href="/foo"][up-target=".main"]')
-        up.hello($area)
-        $link = $area.find('a')
-        affix('.main')
-        $link.click()
-        expect($area).toHaveClass('up-active')
-        @respondWith('<div class="main">new-text</div>')
-        expect($area).toHaveClass('up-current')
+
+          up.popup.close().then ->
+            expect($backgroundLink).toHaveClass('up-current')
+            expect($popupLink).not.toHaveClass('up-current')
+            expect($unrelatedLink).not.toHaveClass('up-current')
+            done()
+
+        it 'changes .up-current marks as the URL changes'
+
+    describe '.up-active', ->
+
+      describeCapability 'canPushState', ->
+
+        it 'marks clicked links as .up-active until the request finishes', ->
+          $link = affix('a[href="/foo"][up-target=".main"]')
+          affix('.main')
+          $link.click()
+          expect($link).toHaveClass('up-active')
+          @respondWith('<div class="main">new-text</div>')
+          expect($link).not.toHaveClass('up-active')
+
+        it 'marks links with [up-instant] on mousedown as .up-active until the request finishes', ->
+          $link = affix('a[href="/foo"][up-instant][up-target=".main"]')
+          affix('.main')
+          Trigger.mousedown($link)
+          expect($link).toHaveClass('up-active')
+          @respondWith('<div class="main">new-text</div>')
+          expect($link).not.toHaveClass('up-active')
+
+        it 'prefers to mark an enclosing [up-expand] click area', ->
+          $area = affix('div[up-expand] a[href="/foo"][up-target=".main"]')
+          up.hello($area)
+          $link = $area.find('a')
+          affix('.main')
+          $link.click()
+          expect($link).not.toHaveClass('up-active')
+          expect($area).toHaveClass('up-active')
+          @respondWith('<div class="main">new-text</div>')
+          expect($area).not.toHaveClass('up-active')
+
+        it 'marks clicked modal openers as .up-active while the modal is loading', ->
+          $link = affix('a[href="/foo"][up-modal=".main"]')
+          affix('.main')
+          $link.click()
+          expect($link).toHaveClass('up-active')
+          @respondWith('<div class="main">new-text</div>')
+          expect($link).not.toHaveClass('up-active')
+
+        it 'removes .up-active from a clicked modal opener if the target is already preloaded (bugfix)', ->
+          $link = affix('a[href="/foo"][up-modal=".main"]')
+          up.proxy.preload($link)
+          @respondWith('<div class="main">new-text</div>')
+          $link.click()
+          expect('.up-modal .main').toHaveText('new-text')
+          expect($link).not.toHaveClass('up-active')
+
+        it 'removes .up-active from a clicked link if the target is already preloaded (bugfix)', ->
+          $link = affix('a[href="/foo"][up-target=".main"]')
+          affix('.main')
+          up.proxy.preload($link)
+          @respondWith('<div class="main">new-text</div>')
+          $link.click()
+          expect('.main').toHaveText('new-text')
+          expect($link).not.toHaveClass('up-active')
 

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

@@ -73,7 +73,7 @@ describe 'up.popup', ->
 
       beforeEach ->
         @$link = affix('a[href="/path"][up-popup=".target"]')
-        @attachSpy = up.popup.knife.mock('attach')
+        @attachSpy = up.popup.knife.mock('attach').and.returnValue(u.resolvedPromise())
         @defaultSpy = up.link.knife.mock('allowDefault').and.callFake((event) -> event.preventDefault())
 
       it 'opens the clicked link in a popup', ->