unpoly-rails 0.55.1 → 0.56.0

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

@@ -3,60 +3,118 @@ describe 'up.feedback', ->
   u = up.util
 
   beforeEach ->
+    up.history.config.enabled = true
     up.modal.config.openAnimation = 'none'
     up.modal.config.closeAnimation = 'none'
+    up.popup.config.openAnimation = 'none'
+    up.popup.config.closeAnimation = 'none'
 
   describe 'unobtrusive behavior', ->
 
-    describe '.up-current', ->
+    describe '[up-nav]', ->
 
-      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"]'))
+      it 'marks a child link as .up-current if it links to the current URL', ->
+        up.history.replace('/foo')
+        $nav = affix('div[up-nav]')
+        $currentLink = $nav.affix('a[href="/foo"]')
+        $otherLink = $nav.affix('a[href="/bar"]')
+        up.hello($nav)
         expect($currentLink).toHaveClass('up-current')
         expect($otherLink).not.toHaveClass('up-current')
 
+      it 'marks the element as .up-current if it is also a link to the current URL', ->
+        up.history.replace('/foo')
+        $currentLink = affix('a[href="/foo"][up-nav]')
+        $otherLink = affix('a[href="/bar"][up-nav]')
+        up.hello($currentLink)
+        up.hello($otherLink)
+        expect($currentLink).toHaveClass('up-current')
+        expect($otherLink).not.toHaveClass('up-current')
+
+      it 'does not mark a link as .up-current if the link is outside an [up-nav]', ->
+        up.history.replace('/foo')
+        $nav = affix('div[up-nav]')
+        $currentLinkInNav = $nav.affix('a[href="/foo"]')
+        $currentLinkOutsideNav = affix('a[href="/foo"]')
+        up.hello($nav)
+        expect($currentLinkInNav).toHaveClass('up-current')
+        expect($currentLinkOutsideNav).not.toHaveClass('up-current')
+
+      it 'marks a replaced child link as .up-current if it links to the current URL', asyncSpec (next) ->
+        up.history.replace('/foo')
+        $nav = affix('div[up-nav]')
+        $nav.affix('a.link[href="/bar"]').text('old link')
+        up.hello($nav)
+
+        expect('.link').toHaveText('old link')
+        expect('.link').not.toHaveClass('up-current')
+
+        up.replace('.link', '/src', history: false)
+
+        next =>
+          @respondWith """
+            <a class="link" href="/foo">
+              new link
+            </a>
+          """
+
+        next =>
+          expect('.link').toHaveText('new link')
+          expect('.link').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"]'))
+        up.history.replace('/foo')
+        $nav = affix('div[up-nav]')
+        $currentLink = $nav.affix('span[up-href="/foo"]')
+        $otherLink = $nav.affix('span[up-href="/bar"]')
+        up.hello($nav)
         expect($currentLink).toHaveClass('up-current')
         expect($otherLink).not.toHaveClass('up-current')
 
       it 'matches the current and destination URLs if they only differ by a trailing slash', ->
-        spyOn(up.browser, 'url').and.returnValue('/foo')
-        $currentLink = up.hello(affix('span[up-href="/foo/"]'))
+        up.history.replace('/foo')
+        $nav = affix('div[up-nav]')
+        $currentLink = $nav.affix('span[up-href="/foo/"]')
+        up.hello($nav)
         expect($currentLink).toHaveClass('up-current')
 
       it 'does not match the current and destination URLs if they differ in the search', ->
-        spyOn(up.browser, 'url').and.returnValue('/foo?q=1')
-        $currentLink = up.hello(affix('span[up-href="/foo?q=2"]'))
+        up.history.replace('/foo?q=1')
+        $nav = affix('div[up-nav]')
+        $currentLink = $nav.affix('span[up-href="/foo?q=2"]')
+        up.hello($nav)
         expect($currentLink).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"]'))
+        up.history.replace('/foo')
+        $nav = affix('div[up-nav]')
+        $currentLink = $nav.affix('a[href="/x"][up-alias="/aaa /foo /bbb"]')
+        $otherLink = $nav.affix('a[href="/y"][up-alias="/bar"]')
+        up.hello($nav)
         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*"]'))
+        inserter = -> up.hello(affix('a[up-nav][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="#"]'))
+        $nav = affix('div[up-nav]')
+        $link = $nav.affix('a[href="#"]')
+        up.hello($nav)
         expect($link).not.toHaveClass('up-current')
 
       it 'does not highlight links with unsafe methods', ->
-        spyOn(up.browser, 'url').and.returnValue('/foo')
-        $defaultLink = up.hello(affix('a[href="/foo"]'))
-        $getLink = up.hello(affix('a[href="/foo"][up-method="get"]'))
-        $putLink = up.hello(affix('a[href="/foo"][up-method="put"]'))
-        $patchLink = up.hello(affix('a[href="/foo"][up-method="patch"]'))
-        $postLink = up.hello(affix('a[href="/foo"][up-method="post"]'))
-        $deleteLink = up.hello(affix('a[href="/foo"][up-method="delete"]'))
+        up.history.replace('/foo')
+        $nav = affix('div[up-nav]')
+        $defaultLink = $nav.affix('a[href="/foo"]')
+        $getLink = $nav.affix('a[href="/foo"][up-method="get"]')
+        $putLink = $nav.affix('a[href="/foo"][up-method="put"]')
+        $patchLink = $nav.affix('a[href="/foo"][up-method="patch"]')
+        $postLink = $nav.affix('a[href="/foo"][up-method="post"]')
+        $deleteLink = $nav.affix('a[href="/foo"][up-method="delete"]')
+        up.hello($nav)
+
         expect($defaultLink).toHaveClass('up-current')
         expect($getLink).toHaveClass('up-current')
         expect($putLink).not.toHaveClass('up-current')
@@ -65,27 +123,57 @@ describe 'up.feedback', ->
         expect($deleteLink).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"]'))
+        up.history.replace('/foo/123')
+
+        $nav = affix('div[up-nav]')
+        $currentLink = $nav.affix('a[href="/x"][up-alias="/aaa /foo/* /bbb"]')
+        $otherLink = $nav.affix('a[href="/y"][up-alias="/bar"]')
+        up.hello($nav)
+
         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.feedback.config.currentClasses = ['highlight']
-        spyOn(up.browser, 'url').and.returnValue('/foo')
-        $currentLink = up.hello(affix('a[href="/foo"]'))
-        expect($currentLink).toHaveClass('highlight up-current')
+      it 'allows to configure a custom "current" class in addition to .up-current', ->
+        up.feedback.config.currentClasses.push('highlight')
+        up.history.replace('/foo')
+        $nav = affix('div[up-nav]')
+        $currentLink = $nav.affix('a[href="/foo"]')
+        up.hello($nav)
+
+        expect($currentLink).toHaveClass('highlight')
+        expect($currentLink).toHaveClass('up-current')
+
+      it 'allows to configure multiple additional "current" classes', ->
+        up.feedback.config.currentClasses.push('highlight1')
+        up.feedback.config.currentClasses.push('highlight2')
+        up.history.replace('/foo')
+        $nav = affix('div[up-nav]')
+        $currentLink = $nav.affix('a[href="/foo"]')
+        up.hello($nav)
+
+        expect($currentLink).toHaveClass('highlight1')
+        expect($currentLink).toHaveClass('highlight2')
+        expect($currentLink).toHaveClass('up-current')
+
+      it 'allows to configure additional nav selectors', ->
+        up.history.replace('/foo')
+        up.feedback.config.navs.push('.navi')
+        $nav = affix('div.navi')
+        $currentLink = $nav.affix('a[href="/foo"]')
+        $otherLink = $nav.affix('a[href="/bar"]')
+        up.hello($nav)
+        expect($currentLink).toHaveClass('up-current')
+        expect($otherLink).not.toHaveClass('up-current')
 
       describeCapability 'canPushState', ->
 
         describe 'updating .up-current marks wen the URL changes', ->
 
-          beforeEach ->
-            up.history.config.enabled = true
-
           it 'marks a link as .up-current if it links to the current URL, but is missing a trailing slash', asyncSpec (next) ->
-            $link = affix('a[href="/foo"][up-target=".main"]')
+            $nav = affix('div[up-nav]')
+            $link = $nav.affix('a[href="/foo"][up-target=".main"]')
+            up.hello($nav)
+
             affix('.main')
             Trigger.clickSequence($link)
 
@@ -98,7 +186,10 @@ describe 'up.feedback', ->
               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', asyncSpec (next) ->
-            $link = affix('a[href="/foo/"][up-target=".main"]')
+            $nav = affix('div[up-nav]')
+            $link = $nav.affix('a[href="/foo/"][up-target=".main"]')
+            up.hello($nav)
+
             affix('.main')
             Trigger.clickSequence($link)
 
@@ -113,9 +204,11 @@ describe 'up.feedback', ->
           it 'marks a link as .up-current if it links to an URL currently shown either within or below the modal', asyncSpec (next) ->
             up.history.replace('/foo')
 
-            $backgroundLink = affix('a[href="/foo"]')
-            $modalLink = affix('a[href="/bar"][up-modal=".main"]')
-            $unrelatedLink = affix('a[href="/baz]')
+            $nav = affix('div[up-nav]')
+            $backgroundLink = $nav.affix('a[href="/foo"]')
+            $modalLink = $nav.affix('a[href="/bar"][up-modal=".main"]')
+            $unrelatedLink = $nav.affix('a[href="/baz"]')
+            up.hello($nav)
 
             Trigger.clickSequence($modalLink)
 
@@ -133,12 +226,21 @@ describe 'up.feedback', ->
               expect($modalLink).not.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', asyncSpec (next) ->
+          it "marks a link as .up-current if it links to the URL currently either within or below the popup, even if the popup doesn't change history", asyncSpec (next) ->
             up.history.replace('/foo')
 
-            $backgroundLink = affix('a[href="/foo"]')
-            $popupLink = affix('a[href="/bar"][up-popup=".main"]')
-            $unrelatedLink = affix('a[href="/baz]')
+            # This is actually the default. Popups don't change the address bar by default,
+            # but we still want to cause their URL to mark links as current.
+            up.popup.config.history = false
+
+            $nav = affix('div[up-nav]')
+            $backgroundLink = $nav.affix('a[href="/foo"]')
+            $popupLink = $nav.affix('a[href="/bar"][up-popup=".main"]')
+            $unrelatedLink = $nav.affix('a[href="/baz"]')
+            up.hello($nav)
+
+            expect(up.browser.url()).toMatchUrl('/foo')
+            expect(up.popup.coveredUrl()).toBeMissing()
 
             next =>
               Trigger.clickSequence($popupLink)
@@ -147,6 +249,8 @@ describe 'up.feedback', ->
               @respondWith('<div class="main">new-text</div>')
 
             next =>
+              expect(up.browser.url()).toMatchUrl('/foo') # popup did not change history
+              expect(up.popup.url()).toMatchUrl('/bar') # popup still knows which URL it is displaying
               expect($backgroundLink).toHaveClass('up-current')
               expect($popupLink).toHaveClass('up-current')
               expect($unrelatedLink).not.toHaveClass('up-current')
@@ -158,6 +262,20 @@ describe 'up.feedback', ->
               expect($popupLink).not.toHaveClass('up-current')
               expect($unrelatedLink).not.toHaveClass('up-current')
 
+          it "respects links that are added to an existing [up-nav] by a fragment update", asyncSpec (next) ->
+            $nav = affix('.nav[up-nav]')
+            $link = $nav.affix('a[href="/foo"][up-target=".main"]')
+            $more = $nav.affix('.more')
+            up.hello($nav)
+
+            up.extract '.more', '<div class="more"><a href="/bar"></div>', history: '/bar'
+
+            next =>
+              $moreLink = $('.more').find('a')
+              expect($moreLink).toExist()
+              expect($moreLink).toHaveClass('up-current')
+
+
     describe '.up-active', ->
 
       describeCapability 'canPushState', ->

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

@@ -9,7 +9,6 @@ describe 'up.layout', ->
       beforeEach ->
         up.layout.config.snap = 0
         up.layout.config.substance = 99999
-        up.layout.config.viewports = [document]
 
       describe 'when the viewport is the document', ->
 
@@ -403,7 +402,7 @@ describe 'up.layout', ->
 
       it 'should have tests'
 
-    describe 'up.layout.viewportsOf', ->
+    describe 'up.layout.viewportOf', ->
 
       it 'seeks upwards from the given element', ->
         up.layout.config.viewports = ['.viewport1', '.viewport2']
@@ -417,19 +416,13 @@ describe 'up.layout', ->
         $viewport = affix('.viewport')
         expect(up.layout.viewportOf($viewport)).toEqual($viewport)
 
-      it 'finds the document if the viewport is the document', ->
+      it 'finds the document if no better viewport matches', ->
         # This actually tests that the hierarchy returned by `$.parent`
         # is $element => ... => $('body') => $('html') => $(document)
-        up.layout.config.viewports = [document]
+        up.layout.config.viewports = ['.other-viewport']
         $element = affix('div')
         expect(up.layout.viewportOf($element)).toEqual($(document))
 
-      it 'throws an error if no viewport could be found', ->
-        up.layout.config.viewports = ['.does-not-exist']
-        $element = affix('div')
-        lookup = -> up.layout.viewportOf($element)
-        expect(lookup).toThrowError(/Could not find viewport/i)
-
     describe 'up.layout.restoreScroll', ->
 
       it "restores a viewport's previously saved scroll position", (done) ->
@@ -456,3 +449,97 @@ describe 'up.layout', ->
     describe 'up.scroll', ->
 
       it 'should have tests'
+
+    describe 'up.layout.absolutize', ->
+
+      afterEach ->
+        $('.up-bounds, .fixture').remove()
+
+      it 'absolutely positions the element, preserving visual position and size', ->
+        $element = affix('.element').text('element text').css(paddingTop: '20px', paddingLeft: '20px')
+
+        expect($element.css('position')).toEqual('static')
+        previousDims = u.measure($element)
+
+        up.layout.absolutize($element)
+
+        expect($element.closest('.up-bounds').css('position')).toEqual('absolute')
+
+        newDims = u.measure($element)
+        expect(newDims).toEqual(previousDims)
+
+      it 'accurately positions the ghost over an element with margins', ->
+        $element = affix('.element').css(margin: '40px')
+        previousDims = u.measure($element)
+
+        up.layout.absolutize($element)
+
+        newDims = u.measure($element)
+        expect(newDims).toEqual(previousDims)
+
+      it "doesn't change the position of a child whose margins no longer collapse", ->
+        $element = affix('.element')
+        $child = $('<div class="child">child text</div>').css(margin: '40px').appendTo($element)
+        previousChildDims = u.measure($child)
+
+        up.layout.absolutize($element)
+
+        newChildDims = u.measure($child)
+        expect(newChildDims).toEqual(previousChildDims)
+
+      it 'correctly positions an element within a scrolled body', ->
+        $body = $('body')
+        $element1 = $('<div class="fixture"></div>').css(height: '75px').prependTo($body)
+        $element2 = $('<div class="fixture"></div>').css(height: '100px').insertAfter($element1)
+        $body.scrollTop(33)
+
+        previousDims = u.measure($element2)
+
+        up.layout.absolutize($element2)
+
+        newDims = u.measure($element2)
+        expect(newDims).toEqual(previousDims)
+
+      it 'correctly positions an element within a scrolled parent element (that has overflow-y: scroll)', ->
+        $viewport = affix('div').css
+          overflowY: 'scroll'
+          height: '50px'
+
+        $element1 = $('<div class="fixture"></div>').css(height: '75px').prependTo($viewport)
+        $element2 = $('<div class="fixture"></div>').css(height: '100px').insertAfter($element1)
+        $viewport.scrollTop(33)
+
+        previousDims = u.measure($element2)
+
+        up.layout.absolutize($element2)
+
+        newDims = u.measure($element2)
+        expect(newDims).toEqual(previousDims)
+
+      it 'converts fixed elements within the copies to absolutely positioning (relative to the closest offset parent)', ->
+        $element = affix('.element').css
+          position: 'absolute'
+          top: '50px'
+          left: '50px'
+        $fixedChild = $('<div class="fixed-child" up-fixed></div>').css
+          position: 'fixed'
+          left: '77px'
+          top: '77px'
+        $fixedChild.appendTo($element)
+        up.layout.absolutize($element)
+
+        expect($fixedChild.css(['position', 'left', 'top'])).toEqual
+          position: 'absolute',
+          left: '27px',
+          top: '27px'
+
+      it "does not convert fixed elements outside the element's subtree (bugfix)", ->
+        $element = affix('.element').css(position: 'absolute')
+        $fixedChild = $('<div class="fixed-child" up-fixed></div>').css(position: 'fixed')
+        $fixedChild.appendTo($element)
+        $fixedSibling = affix('[up-fixed]').css(position: 'fixed')
+
+        up.layout.absolutize($element)
+
+        expect($fixedChild.css('position')).toEqual('absolute')
+        expect($fixedSibling.css('position')).toEqual('fixed')

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

@@ -525,7 +525,7 @@ describe 'up.link', ->
       buildEvent = ($element, attrs) ->
         event = Trigger.createMouseEvent('mousedown', attrs)
         event = $.event.fix(event) # convert native event to jQuery event
-        event.target = u.unJQuery($element)
+        event.target = u.element($element)
         event
 
       it "returns true when the given event's target is the given link itself", ->
@@ -822,8 +822,8 @@ describe 'up.link', ->
               @respondWith '<div class="target new">new text</div>'
 
             next =>
-              @$oldGhost = $('.target.old.up-ghost')
-              @$newGhost = $('.target.new.up-ghost')
+              @$oldGhost = $('.target.old')
+              @$newGhost = $('.target.new')
               expect(@$oldGhost).toExist()
               expect(@$newGhost).toExist()
               expect(u.opacity(@$oldGhost)).toBeAround(1, 0.15)

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

@@ -132,23 +132,27 @@ describe 'up.modal', ->
         it "gives the scrollbar to .up-modal instead of .up-modal-viewport while animating, so we don't see scaled scrollbars in a zoom-in animation", (done) ->
           openPromise = up.modal.extract('.container', '<div class="container">text</div>', animation: 'fade-in', duration: 100)
 
-          u.nextFrame =>
+          u.setTimer 50, ->
             $modal = $('.up-modal')
             $viewport = $modal.find('.up-modal-viewport')
+            expect($modal).toHaveClass('up-modal-animating')
             expect($modal.css('overflow-y')).toEqual('scroll')
             expect($viewport.css('overflow-y')).toEqual('hidden')
 
             openPromise.then ->
+              expect($modal).not.toHaveClass('up-modal-animating')
               expect($modal.css('overflow-y')).not.toEqual('scroll')
               expect($viewport.css('overflow-y')).toEqual('scroll')
-              closePromise = up.modal.close(animation: 'fade-out', duration: 200)
-              u.nextFrame ->
+              closePromise = up.modal.close(animation: 'fade-out', duration: 400)
+
+              u.setTimer 50, ->
+                expect($modal).toHaveClass('up-modal-animating')
                 expect($modal.css('overflow-y')).toEqual('scroll')
                 expect($viewport.css('overflow-y')).toEqual('hidden')
                 done()
 
         it 'does not add right padding to the body if the body has overflow-y: hidden', (done) ->
-          restoreBody = u.temporaryCss($('body'), 'overflow-y': 'hidden')
+          restoreBody = u.writeTemporaryStyle($('body'), overflowY: 'hidden')
 
           up.modal.extract('.container', '<div class="container">text</div>').then ->
             $body = $('body')
@@ -161,8 +165,8 @@ describe 'up.modal', ->
               done()
 
         it 'does not add right padding to the body if the body has overflow-y: auto, but does not currently have scrollbars', (done) ->
-          restoreBody = u.temporaryCss($('body'), 'overflow-y': 'auto')
-          restoreReporter = u.temporaryCss($('.jasmine_html-reporter'), 'height': '100px', 'overflow-y': 'hidden')
+          restoreBody = u.writeTemporaryStyle($('body'), overflowY: 'auto')
+          restoreReporter = u.writeTemporaryStyle($('.jasmine_html-reporter'), height: '100px', overflowY: 'hidden')
 
           up.modal.extract('.container', '<div class="container">text</div>').then ->
             $body = $('body')
@@ -243,9 +247,9 @@ describe 'up.modal', ->
 
         it 'closes the current modal and wait for its close animation to finish before starting the open animation of a second modal', asyncSpec (next) ->
           up.modal.config.openAnimation = 'fade-in'
-          up.modal.config.openDuration = 50
+          up.modal.config.openDuration = 100
           up.modal.config.closeAnimation = 'fade-out'
-          up.modal.config.closeDuration = 50
+          up.modal.config.closeDuration = 100
 
           events = []
           u.each ['up:modal:open', 'up:modal:opened', 'up:modal:close', 'up:modal:closed'], (event) ->
@@ -255,40 +259,38 @@ describe 'up.modal', ->
           up.modal.extract('.target', '<div class="target">response1</div>')
 
           next =>
-            # First modal is starting opening animation (will take 50 ms)
+            # First modal is starting opening animation (will take 100 ms)
             expect(events).toEqual ['up:modal:open']
             expect($('.target')).toHaveText('response1')
 
-          next.after (50 + 100), =>
-            # First modal has completed opening animation after 50 ms
+          next.after (100 + (timingTolerance = 100)), =>
+            # First modal has completed opening animation after 100 ms
             expect(events).toEqual ['up:modal:open', 'up:modal:opened']
             expect($('.target')).toHaveText('response1')
 
-            # We open another modal, which will cause the first modal to start closing (will take 50 ms)
+            # We open another modal, which will cause the first modal to start closing (will take 100 ms)
             up.modal.extract('.target', '<div class="target">response2</div>')
 
-          next.after 25, =>
+          next.after 50, =>
             # Second modal is still waiting for first modal's closing animaton to finish.
             expect(events).toEqual ['up:modal:open', 'up:modal:opened', 'up:modal:close']
             expect($('.target')).toHaveText('response1')
 
-          # I don't know why this spec is so off with timing.
-          # We need to add 200ms to make it pass all of the time.
-          next.after (25 + 50 + 200), =>
+          next.after (50 + 100 + (timingTolerance = 200)), =>
             # First modal has finished closing, second modal has finished opening.
             expect(events).toEqual ['up:modal:open', 'up:modal:opened', 'up:modal:close', 'up:modal:closed', 'up:modal:open', 'up:modal:opened']
             expect($('.target')).toHaveText('response2')
 
         it 'closes an opening modal if a second modal starts opening before the first modal has finished its open animation', asyncSpec (next) ->
           up.modal.config.openAnimation = 'fade-in'
-          up.modal.config.openDuration = 50
+          up.modal.config.openDuration = 100
           up.modal.config.closeAnimation = 'fade-out'
-          up.modal.config.closeDuration = 50
+          up.modal.config.closeDuration = 100
 
           # Open the first modal
           up.modal.extract('.target', '<div class="target">response1</div>')
 
-          next.after 10, =>
+          next.after 50, =>
             # First modal is still in its opening animation
             expect($('.target')).toHaveText('response1')
 
@@ -303,7 +305,7 @@ describe 'up.modal', ->
             # Second modal is still waiting for first modal's closing animaton to finish.
             expect($('.target')).toHaveText('response1')
 
-          next.after 150, =>
+          next.after (140 + (timingTolerance = 220)), =>
             # First modal has finished closing, second modal has finished opening.
             expect($('.target')).toHaveText('response2')