unpoly-rails 0.57.0 → 0.60.0

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

@@ -1,3 +1,6 @@
+u = up.util
+$ = jQuery
+
 describe 'up.log', ->
 
   describe 'JavaScript functions', ->
@@ -5,42 +8,112 @@ describe 'up.log', ->
     describe 'up.log.puts', ->
 
       it 'sends a log message to the developer console iff the log is enabled', ->
-        spyOn(up.browser, 'puts')
+        spyOn(console, 'log')
 
         up.log.disable()
         up.log.puts('message')
-        expect(up.browser.puts).not.toHaveBeenCalled()
+        expect(console.log).not.toHaveBeenCalled()
 
         up.log.enable()
         up.log.puts('message')
-        expect(up.browser.puts).toHaveBeenCalledWith('log', '[UP] message')
+        expect(console.log).toHaveBeenCalledWith('[UP] message')
 
     describe 'up.log.debug', ->
 
       it 'sends a debug message to the developer console iff the log is enabled', ->
-        spyOn(up.browser, 'puts')
+        spyOn(console, 'debug')
 
         up.log.disable()
         up.log.debug('message')
-        expect(up.browser.puts).not.toHaveBeenCalled()
+        expect(console.debug).not.toHaveBeenCalled()
 
         up.log.enable()
         up.log.debug('message')
-        expect(up.browser.puts).toHaveBeenCalledWith('debug', '[UP] message')
+        expect(console.debug).toHaveBeenCalledWith('[UP] message')
 
     describe 'up.log.error', ->
 
       it 'sends an error message to the developer console regardless whether the log is enabled or not', ->
-        spyOn(up.browser, 'puts')
+        spyOn(console, 'error')
 
         up.log.disable()
         up.log.error('message1')
-        expect(up.browser.puts).toHaveBeenCalledWith('error', '[UP] message1')
+        expect(console.error).toHaveBeenCalledWith('[UP] message1')
 
         up.log.enable()
         up.log.error('message2')
-        expect(up.browser.puts.calls.allArgs()).toEqual [
-          ['error', '[UP] message1'],
-          ['error', '[UP] message2']
+        expect(console.error.calls.allArgs()).toEqual [
+          ['[UP] message1'],
+          ['[UP] message2']
         ]
-        
+
+    describe 'up.log.sprintf', ->
+
+      describe 'with string argument', ->
+
+        it 'serializes with surrounding quotes', ->
+          formatted = up.log.sprintf('before %o after', 'argument')
+          expect(formatted).toEqual('before "argument" after')
+
+      describe 'with undefined argument', ->
+
+        it 'serializes to the word "undefined"', ->
+          formatted = up.log.sprintf('before %o after', undefined)
+          expect(formatted).toEqual('before undefined after')
+
+      describe 'with null argument', ->
+
+        it 'serializes to the word "null"', ->
+          formatted = up.log.sprintf('before %o after', null)
+          expect(formatted).toEqual('before null after')
+
+      describe 'with number argument', ->
+
+        it 'serializes the number as string', ->
+          formatted = up.log.sprintf('before %o after', 5)
+          expect(formatted).toEqual('before 5 after')
+
+      describe 'with function argument', ->
+
+        it 'serializes the function code', ->
+          formatted = up.log.sprintf('before %o after', `function foo() {}`)
+          expect(formatted).toEqual('before function foo() {} after')
+
+      describe 'with array argument', ->
+
+        it 'recursively serializes the elements', ->
+          formatted = up.log.sprintf('before %o after', [1, "foo"])
+          expect(formatted).toEqual('before [1, "foo"] after')
+
+      describe 'with element argument', ->
+
+        it 'serializes the tag name with id, name and class attributes, but ignores other attributes', ->
+          $element = $('<table id="id-value" name="name-value" class="class-value" title="title-value">')
+          element = $element.get(0)
+          formatted = up.log.sprintf('before %o after', element)
+          expect(formatted).toEqual('before <table id="id-value" name="name-value" class="class-value"> after')
+
+      describe 'with jQuery argument', ->
+
+        it 'serializes the tag name with id, name and class attributes, but ignores other attributes', ->
+          $element1 = $('<table id="table-id">')
+          $element2 = $('<ul id="ul-id">')
+          formatted = up.log.sprintf('before %o after', $element1.add($element2))
+          expect(formatted).toEqual('before $(<table id="table-id">, <ul id="ul-id">) after')
+
+      describe 'with object argument', ->
+
+        it 'serializes to JSON', ->
+          object = { foo: 'foo-value', bar: 'bar-value' }
+          formatted = up.log.sprintf('before %o after', object)
+          expect(formatted).toEqual('before {"foo":"foo-value","bar":"bar-value"} after')
+
+        it "skips a key if a getter crashes", ->
+          object = {}
+          Object.defineProperty(object, 'foo', get: (-> throw "error"))
+          formatted = up.log.sprintf('before %o after', object)
+          expect(formatted).toEqual('before {} after')
+
+          object.bar = 'bar'
+          formatted = up.log.sprintf('before %o after', object)
+          expect(formatted).toEqual('before {"bar":"bar"} after')

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

@@ -1,23 +1,22 @@
-describe 'up.modal', ->
+u = up.util
+e = up.element
+$ = jQuery
 
-  u = up.util
+describe 'up.modal', ->
 
   beforeEach ->
     up.modal.config.openDuration = 5
     up.modal.config.closeDuration = 5
 
   describe 'JavaScript functions', ->
-    # Safari overlays the scrollbar tracker over the picture.
-    # The scrollbar does not take space.
-    assumedScrollbarWidth = if AgentDetector.isSafari() then 0 else 15
 
     describe 'up.modal.follow', ->
 
       it "loads the given link's destination in a dialog window", (done) ->
-        $link = affix('a[href="/path/to"][up-modal=".middle"]').text('link')
+        $link = $fixture('a[href="/path/to"][up-modal=".middle"]').text('link')
         promise = up.modal.follow($link)
 
-        u.nextFrame =>
+        u.task =>
           expect(@lastRequest().url).toMatch /\/path\/to$/
           @respondWith """
             <div class="before">new-before</div>
@@ -26,12 +25,12 @@ describe 'up.modal', ->
             """
 
           promise.then =>
-            expect($('.up-modal')).toExist()
-            expect($('.up-modal-dialog')).toExist()
-            expect($('.up-modal-dialog .middle')).toExist()
+            expect($('.up-modal')).toBeAttached()
+            expect($('.up-modal-dialog')).toBeAttached()
+            expect($('.up-modal-dialog .middle')).toBeAttached()
             expect($('.up-modal-dialog .middle')).toHaveText('new-middle')
-            expect($('.up-modal-dialog .before')).not.toExist()
-            expect($('.up-modal-dialog .after')).not.toExist()
+            expect($('.up-modal-dialog .before')).not.toBeAttached()
+            expect($('.up-modal-dialog .after')).not.toBeAttached()
             done()
 
     describe 'up.modal.extract', ->
@@ -47,12 +46,12 @@ describe 'up.modal', ->
           """
 
         promise.then =>
-          expect($('.up-modal')).toExist()
-          expect($('.up-modal-dialog')).toExist()
-          expect($('.up-modal-dialog .middle')).toExist()
+          expect($('.up-modal')).toBeAttached()
+          expect($('.up-modal-dialog')).toBeAttached()
+          expect($('.up-modal-dialog .middle')).toBeAttached()
           expect($('.up-modal-dialog .middle')).toHaveText('new-middle')
-          expect($('.up-modal-dialog .before')).not.toExist()
-          expect($('.up-modal-dialog .after')).not.toExist()
+          expect($('.up-modal-dialog .before')).not.toBeAttached()
+          expect($('.up-modal-dialog .after')).not.toBeAttached()
 
           # Can't change URLs
           expect(location.href).toEqual(oldHref)
@@ -65,7 +64,7 @@ describe 'up.modal', ->
 
         promise = up.modal.visit('/foo', target: '.middle')
 
-        u.nextFrame =>
+        u.task =>
           @respondWith """
             <div class="before">new-before</div>
             <div class="middle">new-middle</div>
@@ -73,21 +72,21 @@ describe 'up.modal', ->
           """
 
         promise.then =>
-          expect('.up-modal').toExist()
-          expect('.up-modal-dialog').toExist()
-          expect('.up-modal-dialog .middle').toExist()
+          expect('.up-modal').toBeAttached()
+          expect('.up-modal-dialog').toBeAttached()
+          expect('.up-modal-dialog .middle').toBeAttached()
           expect('.up-modal-dialog .middle').toHaveText('new-middle')
-          expect('.up-modal-dialog .before').not.toExist()
-          expect('.up-modal-dialog .after').not.toExist()
+          expect('.up-modal-dialog .before').not.toBeAttached()
+          expect('.up-modal-dialog .after').not.toBeAttached()
           expect(location.pathname).toMatchUrl('/foo')
           done()
 
       it "doesn't create an .up-modal frame and replaces { failTarget } if the server returns a non-200 response", (done) ->
-        affix('.error').text('old error')
+        $fixture('.error').text('old error')
 
         promise = up.modal.visit('/foo', target: '.target', failTarget: '.error')
 
-        u.nextFrame =>
+        u.task =>
           @respondWith
             status: 500
             responseText: """
@@ -96,7 +95,7 @@ describe 'up.modal', ->
               """
 
         promise.catch =>
-          expect('.up-modal').not.toExist()
+          expect('.up-modal').not.toBeAttached()
           expect('.error').toHaveText('new error')
           done()
 
@@ -110,29 +109,42 @@ describe 'up.modal', ->
       describe 'preventing elements from jumping as scrollbars change', ->
 
         it "brings its own scrollbar, padding the body on the right", (done) ->
-          promise = up.modal.visit('/foo', target: '.container')
+          $body = $(document.body)
 
-          u.nextFrame =>
-            @respondWith('<div class="container">text</div>')
+          $fixture('.spacer').css(height: '9000px')
+          # Safari 11 has no vertical scrollbar that takes away space from the document,
+          # so the entire shifting logic is skipped.
+          if up.viewport.rootHasVerticalScrollbar()
 
-          promise.then ->
-            $modal = $('.up-modal')
-            $viewport = $modal.find('.up-modal-viewport')
-            $body = $('body')
-            expect($modal).toExist()
-            expect($viewport.css('overflow-y')).toEqual('scroll')
-            expect($body.css('overflow-y')).toEqual('hidden')
-            expect(parseInt($body.css('padding-right'))).toBeAround(assumedScrollbarWidth, 5)
+            $rootOverflowElement = $(up.viewport.rootOverflowElement())
 
-            up.modal.close().then ->
-              expect($body.css('overflow-y')).toEqual('scroll')
-              expect(parseInt($body.css('padding-right'))).toBe(0)
-              done()
+            promise = up.modal.visit('/foo', target: '.container')
+
+            u.task =>
+              @respondWith('<div class="container">text</div>')
+
+            promise.then ->
+              $modal = $('.up-modal')
+              $viewport = $modal.find('.up-modal-viewport')
+              scrollbarWidth = up.viewport.scrollbarWidth()
+
+              expect($modal).toBeAttached()
+              expect($viewport.css('overflow-y')).toEqual('scroll')
+              expect($rootOverflowElement.css('overflow-y')).toEqual('hidden')
+              expect(parseInt($body.css('padding-right'))).toBeAround(scrollbarWidth, 5)
+
+              up.modal.close().then ->
+                expect($rootOverflowElement.css('overflow-y')).toEqual('scroll')
+                expect(parseInt($body.css('padding-right'))).toBe(0)
+                done()
+          else
+            expect(true).toBe(true)
+            done()
 
         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.setTimer 50, ->
+          u.timer 50, ->
             $modal = $('.up-modal')
             $viewport = $modal.find('.up-modal-viewport')
             expect($modal).toHaveClass('up-modal-animating')
@@ -145,18 +157,19 @@ describe 'up.modal', ->
               expect($viewport.css('overflow-y')).toEqual('scroll')
               closePromise = up.modal.close(animation: 'fade-out', duration: 400)
 
-              u.setTimer 50, ->
+              u.timer 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.writeTemporaryStyle($('body'), overflowY: 'hidden')
+        it "does not add right padding to the body if the document's overflow element has overflow-y: hidden", (done) ->
+          restoreBody = e.setTemporaryStyle(up.viewport.rootOverflowElement(), overflowY: 'hidden')
+          $fixture('.spacer').css(height: '9000px')
 
           up.modal.extract('.container', '<div class="container">text</div>').then ->
             $body = $('body')
-            expect($('.up-modal')).toExist()
+            expect($('.up-modal')).toBeAttached()
             expect(parseInt($body.css('padding-right'))).toBe(0)
 
             up.modal.close().then ->
@@ -164,13 +177,13 @@ describe 'up.modal', ->
               restoreBody()
               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.writeTemporaryStyle($('body'), overflowY: 'auto')
-          restoreReporter = u.writeTemporaryStyle($('.jasmine_html-reporter'), height: '100px', overflowY: 'hidden')
+        it "does not add right padding to the body if the document's overflow element has overflow-y: auto, but does not currently have scrollbars", (done) ->
+          restoreBody = e.setTemporaryStyle(up.viewport.rootOverflowElement(), overflowY: 'auto')
+          restoreReporter = e.setTemporaryStyle($('.jasmine_html-reporter')[0], height: '100px', overflowY: 'hidden')
 
           up.modal.extract('.container', '<div class="container">text</div>').then ->
             $body = $('body')
-            expect($('.up-modal')).toExist()
+            expect($('.up-modal')).toBeAttached()
             expect(parseInt($body.css('padding-right'))).toBe(0)
 
             up.modal.close().then ->
@@ -180,29 +193,37 @@ describe 'up.modal', ->
               done()
 
         it 'pushes right-anchored elements away from the edge of the screen', (done) ->
+          $fixture('.spacer').css(height: '9000px')
+          # Safari 11 has no vertical scrollbar that takes away space from the document,
+          # so the entire shifting logic is skipped.
+          if up.viewport.rootHasVerticalScrollbar()
+            scrollbarWidth = up.viewport.scrollbarWidth()
+            $anchoredElement = $fixture('div[up-anchored=right]').css
+              position: 'absolute'
+              top: '0'
+              right: '30px'
 
-          $anchoredElement = affix('div[up-anchored=right]').css
-            position: 'absolute'
-            top: '0'
-            right: '30px'
-
-          promise = up.modal.visit('/foo', target: '.container')
+            promise = up.modal.visit('/foo', target: '.container')
 
-          u.nextFrame =>
-            @respondWith('<div class="container">text</div>')
+            u.task =>
+              @respondWith('<div class="container">text</div>')
 
-          promise.then ->
-            expect(parseInt($anchoredElement.css('right'))).toBeAround(30 + assumedScrollbarWidth, 10)
+            promise.then ->
+              expect(parseInt($anchoredElement.css('right'))).toBeAround(30 + scrollbarWidth, 10)
 
-            up.modal.close().then ->
-              expect(parseInt($anchoredElement.css('right'))).toBeAround(30 , 10)
-              done()
+              up.modal.close().then ->
+                expect(parseInt($anchoredElement.css('right'))).toBeAround(30 , 10)
+                done()
+          else
+            expect(true).toBe(true)
+            done()
 
       describe 'opening a modal while another modal is open', ->
 
         it 'does not open multiple modals or pad the body twice if the user starts loading a second modal before the first was done loading', (done) ->
           up.modal.config.closeDuration = 10
-
+          scrollbarWidth = up.viewport.scrollbarWidth()
+          
           # Load a first modal
           up.modal.visit('/path1', target: '.container', animation: 'fade-in', duration: 50)
 
@@ -210,7 +231,7 @@ describe 'up.modal', ->
           # This will discard the first request immediately.
           up.modal.visit('/path2', target: '.container', animation: 'fade-in', duration: 50)
 
-          u.nextFrame =>
+          u.task =>
             # The second modal has survived
             expect(jasmine.Ajax.requests.count()).toEqual(1)
             expect(@lastRequest().url).toMatchUrl('/path2')
@@ -218,31 +239,31 @@ describe 'up.modal', ->
             # We send the response for 2
             @respondWith('<div class="container">response2</div>')
 
-            u.setTimer 10, =>
+            u.timer 10, =>
               # The second modal is now opening
               up.modal.visit('/path3', target: '.container', animation: 'fade-in', duration: 50)
 
               # Load a third modal before the second was done opening
-              u.nextFrame =>
+              u.task =>
                 # Since we're still opening the second modal, no request has been made.
                 expect(jasmine.Ajax.requests.count()).toEqual(1)
 
-                u.setTimer 180, =>
+                u.timer 180, =>
                   # Now that the second modal has opened, we make the request to /path3
                   expect(jasmine.Ajax.requests.count()).toEqual(2)
                   expect(@lastRequest().url).toMatchUrl('/path3')
 
                   @respondWith('<div class="container">response3</div>')
 
-                  u.setTimer 180, =>
+                  u.timer 180, =>
                     expect(jasmine.Ajax.requests.count()).toEqual(2)
                     expect($('.up-modal').length).toBe(1)
                     expect($('.up-modal-dialog').length).toBe(1)
                     expect($('.container')).toHaveText('response3')
                     bodyPadding = parseInt($('body').css('padding-right'))
-                    expect(bodyPadding).toBeAround(assumedScrollbarWidth, 10)
-                    if assumedScrollbarWidth > 0 # this test does not make sense on Safari
-                      expect(bodyPadding).not.toBeAround(2 * assumedScrollbarWidth, 2 * 5)
+                    expect(bodyPadding).toBeAround(scrollbarWidth, 10)
+                    if scrollbarWidth > 0 # this test does not make sense on old Safaris
+                      expect(bodyPadding).not.toBeAround(2 * scrollbarWidth, 2 * 5)
                     done()
 
         it 'closes the current modal and wait for its close animation to finish before starting the open animation of a second modal', asyncSpec (next) ->
@@ -319,13 +340,13 @@ describe 'up.modal', ->
             closeAnimation: 'move-to-right'
 
           animations = []
-          spyOn(up, 'animate').and.callFake ($element, animation, options) ->
-            if $element.is('.up-modal-viewport')
+          spyOn(up, 'animate').and.callFake (element, animation, options) ->
+            if e.matches(element, '.up-modal-viewport')
               animations.push
-                text: u.trim($element.find('.target').text())
+                text: element.querySelector('.target').innerText.trim()
                 animation: animation
             deferred = u.newDeferred()
-            u.setTimer options.duration, -> deferred.resolve()
+            u.timer options.duration, -> deferred.resolve()
             deferred.promise()
 
           up.modal.extract('.target', '<div class="target">response1</div>')
@@ -370,7 +391,7 @@ describe 'up.modal', ->
             expect(respond).not.toThrowError()
 
           next.await =>
-            expect($('.up-toast')).not.toExist()
+            expect($('.up-toast')).not.toBeAttached()
             promise = promiseState(openPromise)
             promise.then (result) => expect(result.state).toEqual('pending')
 
@@ -384,7 +405,7 @@ describe 'up.modal', ->
 
           expect(up.modal.coveredUrl()).toBeMissing()
           visitPromise = up.modal.visit('/bar', target: '.container')
-          u.nextFrame =>
+          u.task =>
             @respondWith('<div class="container">text</div>')
             visitPromise.then ->
               expect(up.modal.coveredUrl()).toMatchUrl('/foo')
@@ -396,7 +417,7 @@ describe 'up.modal', ->
 
       it 'allows to register new modal variants with its own default configuration', asyncSpec (next) ->
         up.modal.flavors.variant = { maxWidth: 200 }
-        $link = affix('a[href="/path"][up-modal=".target"][up-flavor="variant"]')
+        $link = $fixture('a[href="/path"][up-modal=".target"][up-flavor="variant"]')
         Trigger.click($link)
 
         next =>
@@ -405,13 +426,13 @@ describe 'up.modal', ->
         next =>
           $modal = $('.up-modal')
           $dialog = $modal.find('.up-modal-dialog')
-          expect($modal).toBeInDOM()
+          expect($modal).toBeAttached()
           expect($modal.attr('up-flavor')).toEqual('variant')
           expect($dialog.attr('style')).toContain('max-width: 200px')
 
       it 'does not change the configuration of non-flavored modals', asyncSpec (next) ->
         up.modal.flavors.variant = { maxWidth: 200 }
-        $link = affix('a[href="/path"][up-modal=".target"]')
+        $link = $fixture('a[href="/path"][up-modal=".target"]')
         Trigger.click($link)
 
         next =>
@@ -420,7 +441,7 @@ describe 'up.modal', ->
         next =>
           $modal = $('.up-modal')
           $dialog = $modal.find('.up-modal-dialog')
-          expect($modal).toBeInDOM()
+          expect($modal).toBeAttached()
           expect($dialog.attr('style')).toBeBlank()
 
     describe 'up.modal.close', ->
@@ -428,11 +449,11 @@ describe 'up.modal', ->
       it 'closes a currently open modal', (done) ->
         up.modal.extract('.content', '<div class="content">Modal content</div>')
 
-        u.nextFrame =>
-          expect('.up-modal .content').toBeInDOM()
+        u.task =>
+          expect('.up-modal .content').toBeAttached()
 
           up.modal.close().then ->
-            expect('.up-modal .content').not.toBeInDOM()
+            expect('.up-modal .content').not.toBeAttached()
             done()
 
       it 'does nothing if no modal is open', (done) ->
@@ -454,12 +475,12 @@ describe 'up.modal', ->
         # Some examples only want to check if follow() has been called, without
         # actually making a request.
         @stubFollow = =>
-          @$link = affix('a[href="/path"][up-modal=".target"]')
+          @$link = $fixture('a[href="/path"][up-modal=".target"]')
           @followSpy = up.modal.knife.mock('followAsap').and.returnValue(Promise.resolve())
           @defaultSpy = spyOn(up.link, 'allowDefault').and.callFake((event) -> event.preventDefault())
 
       it 'opens the clicked link in a modal', asyncSpec (next) ->
-        @$link = affix('a[href="/path"][up-modal=".target"]')
+        @$link = $fixture('a[href="/path"][up-modal=".target"]')
         Trigger.click(@$link)
 
         next =>
@@ -468,7 +489,7 @@ describe 'up.modal', ->
           @respondWith '<div class="target">new content</div>'
 
         next =>
-          expect('.up-modal').toExist()
+          expect('.up-modal').toBeAttached()
           expect('.up-modal-content').toHaveText('new content')
 
       describe 'when modifier keys are held', ->
@@ -504,7 +525,7 @@ describe 'up.modal', ->
         it 'opens the modal on mousedown (instead of on click)', asyncSpec (next) ->
           Trigger.mousedown(@$link)
           next =>
-            expect(@followSpy).toHaveBeenCalledWith(@$link, {})
+            expect(@followSpy).toHaveBeenCalledWith(@$link[0], {})
 
         it 'does nothing on mouseup', asyncSpec (next) ->
           Trigger.mouseup(@$link)
@@ -535,7 +556,7 @@ describe 'up.modal', ->
       describe 'with [up-method] modifier', ->
 
         it 'honours the given method', asyncSpec (next) ->
-          $link = affix('a[href="/path"][up-modal=".target"][up-method="post"]')
+          $link = $fixture('a[href="/path"][up-modal=".target"][up-method="post"]')
           Trigger.click($link)
 
           next =>
@@ -548,7 +569,7 @@ describe 'up.modal', ->
 
         up.history.push('/original-path')
 
-        $container = affix('.container').text('old container content')
+        $container = $fixture('.container').text('old container content')
         $link = $container.affix('a[href="/new-path"][up-modal=".target"]')
 
         expect(location.pathname).toEqual('/original-path')
@@ -570,13 +591,13 @@ describe 'up.modal', ->
         next =>
           expect(location.pathname).toEqual('/original-path')
           expect('.container').toHaveText('restored container content')
-          expect('.up-modal').not.toExist()
+          expect('.up-modal').not.toBeAttached()
 
       it 'allows to open a modal after closing a previous modal with the escape key (bugfix)', asyncSpec (next) ->
         up.motion.config.enabled = false
 
-        $link1 = affix('a[href="/path1"][up-modal=".target"]')
-        $link2 = affix('a[href="/path2"][up-modal=".target"]')
+        $link1 = $fixture('a[href="/path1"][up-modal=".target"]')
+        $link2 = $fixture('a[href="/path2"][up-modal=".target"]')
         Trigger.clickSequence($link1)
 
         next =>
@@ -585,8 +606,7 @@ describe 'up.modal', ->
         next =>
           expect(up.modal.isOpen()).toBe(true)
 
-          escapeEvent = $.Event('keydown', keyCode: 27)
-          $('body').trigger(escapeEvent)
+          Trigger.escapeSequence(document.body)
 
         next =>
           expect(up.modal.isOpen()).toBe(false)
@@ -606,7 +626,7 @@ describe 'up.modal', ->
         up.motion.config.enabled = false
 
       it 'slides in a drawer that covers the full height of the screen', asyncSpec (next) ->
-        $link = affix('a[href="/foo"][up-drawer=".target"]').text('label')
+        $link = $fixture('a[href="/qux"][up-drawer=".target"]').text('label')
         up.hello($link)
         Trigger.clickSequence($link)
 
@@ -616,13 +636,13 @@ describe 'up.modal', ->
         next =>
           expect(up.modal.isOpen()).toBe(true)
           expect($('.up-modal').attr('up-flavor')).toEqual('drawer')
-          windowHeight = u.clientSize().height
+          windowHeight = up.viewport.rootHeight()
           modalHeight = $('.up-modal-content').outerHeight()
           expect(modalHeight).toEqual(windowHeight)
           expect($('.up-modal-content').offset()).toEqual(top: 0, left: 0)
 
       it 'puts the drawer on the right if the opening link sits in the right 50% of the screen', asyncSpec (next) ->
-        $link = affix('a[href="/foo"][up-drawer=".target"]').text('label')
+        $link = $fixture('a[href="/foo"][up-drawer=".target"]').text('label')
         $link.css
           position: 'absolute'
           right: '0'
@@ -634,9 +654,9 @@ describe 'up.modal', ->
 
         next =>
           expect(up.modal.isOpen()).toBe(true)
-          windowWidth = u.clientSize().width
+          windowWidth = up.viewport.rootWidth()
           modalWidth = $('.up-modal-content').outerWidth()
-          scrollbarWidth = u.scrollbarWidth()
+          scrollbarWidth = up.viewport.scrollbarWidth()
           expect($('.up-modal-content').offset().left).toBeAround(windowWidth - modalWidth - scrollbarWidth, 1.0)
 
     describe '[up-close]', ->
@@ -665,7 +685,7 @@ describe 'up.modal', ->
       describe 'when no modal is open', ->
 
         it 'does nothing and allows the event chain to continue', asyncSpec (next) ->
-          $link = affix('a[up-close]') # link is outside the modal
+          $link = $fixture('a[up-close]') # link is outside the modal
           up.hello($link)
           Trigger.clickSequence($link)
 
@@ -695,7 +715,7 @@ describe 'up.modal', ->
           expect(up.modal.isOpen()).toBe(false)
 
       it "does not close the modal when clicking on an element outside the modal's DOM hierarchy", asyncSpec (next) ->
-        $container = affix('.container')
+        $container = $fixture('.container')
         up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false)
 
         next =>
@@ -712,8 +732,7 @@ describe 'up.modal', ->
         up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false)
 
         next =>
-          escapeEvent = $.Event('keydown', keyCode: 27)
-          $('body').trigger(escapeEvent)
+          Trigger.escapeSequence(document.body)
 
         next =>
           expect(wasClosed).toBe(true)
@@ -739,7 +758,7 @@ describe 'up.modal', ->
           up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false, closable: false)
 
           next =>
-            expect('.up-modal').not.toContainElement('.up-modal-close')
+            expect('.up-modal').not.toHaveDescendant('.up-modal-close')
 
         it 'does not close the modal on backdrop click', asyncSpec (next) ->
           up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false, closable: false)
@@ -755,8 +774,7 @@ describe 'up.modal', ->
           up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false, closable: false)
 
           next =>
-            escapeEvent = $.Event('keydown', keyCode: 27)
-            $('body').trigger(escapeEvent)
+            Trigger.escapeSequence(document.body)
 
           next =>
             expect(up.modal.isOpen()).toBe(true)
@@ -767,7 +785,7 @@ describe 'up.modal', ->
         up.motion.config.enabled = false
 
       it 'prefers to replace a selector within the modal', asyncSpec (next) ->
-        $outside = affix('.foo').text('old outside')
+        $outside = $fixture('.foo').text('old outside')
         up.modal.visit('/path', target: '.foo')
 
         next =>
@@ -777,12 +795,12 @@ describe 'up.modal', ->
           up.extract('.foo', "<div class='foo'>new text</div>")
 
         next =>
-          expect($outside).toBeInDOM()
+          expect($outside).toBeAttached()
           expect($outside).toHaveText('old outside')
           expect($('.up-modal-content')).toHaveText('new text')
 
       it 'auto-closes the modal when a replacement from inside the modal affects a selector behind the modal', asyncSpec (next) ->
-        affix('.outside').text('old outside')
+        $fixture('.outside').text('old outside')
         up.modal.visit('/path', target: '.inside')
 
         next =>
@@ -793,7 +811,7 @@ describe 'up.modal', ->
 
         next =>
           expect($('.outside')).toHaveText('new outside')
-          expect($('.up-modal')).not.toExist()
+          expect($('.up-modal')).not.toBeAttached()
 
       it 'does not restore the covered URL when auto-closing (since it would override the URL from the triggering update)', asyncSpec (next) ->
         up.history.config.enabled = true
@@ -801,7 +819,7 @@ describe 'up.modal', ->
         up.modal.config.openDuration = 0
         up.modal.config.closeDuration = 20
 
-        affix('.outside').text('old outside')
+        $fixture('.outside').text('old outside')
         up.modal.visit('/path', target: '.inside')
 
         next =>
@@ -815,7 +833,7 @@ describe 'up.modal', ->
           expect(location.href).toMatchUrl '/new-location'
 
       it 'does not auto-close the modal when a replacement from inside the modal affects a selector inside the modal', asyncSpec (next) ->
-        affix('.outside').text('old outside')
+        $fixture('.outside').text('old outside')
         up.modal.visit('/path', target: '.inside')
 
         next =>
@@ -826,10 +844,10 @@ describe 'up.modal', ->
 
         next =>
           expect($('.inside')).toHaveText('new inside')
-          expect($('.up-modal')).toExist()
+          expect($('.up-modal')).toBeAttached()
 
       it 'does not auto-close the modal when a replacement from outside the modal affects a selector outside the modal', asyncSpec (next) ->
-        affix('.outside').text('old outside')
+        $fixture('.outside').text('old outside')
         up.modal.visit('/path', target: '.inside')
 
         next =>
@@ -840,10 +858,10 @@ describe 'up.modal', ->
 
         next =>
           expect($('.outside')).toHaveText('new outside')
-          expect($('.up-modal')).toExist()
+          expect($('.up-modal')).toBeAttached()
 
       it 'does not auto-close the modal when a replacement from outside the modal affects a selector inside the modal', asyncSpec (next) ->
-        affix('.outside').text('old outside')
+        $fixture('.outside').text('old outside')
         up.modal.visit('/path', target: '.inside')
 
         next =>
@@ -854,7 +872,7 @@ describe 'up.modal', ->
 
         next =>
           expect($('.inside')).toHaveText('new inside')
-          expect($('.up-modal')).toExist()
+          expect($('.up-modal')).toBeAttached()
 
       it 'does not auto-close the modal when the new fragment is within a popup', asyncSpec (next) ->
         up.modal.visit('/modal', target: '.modal-content')
@@ -869,8 +887,8 @@ describe 'up.modal', ->
           @respondWith("<div class='popup-content'></div>")
 
         next =>
-          expect($('.up-modal')).toExist()
-          expect($('.up-popup')).toExist()
+          expect($('.up-modal')).toBeAttached()
+          expect($('.up-popup')).toBeAttached()
 
       it 'does not close the modal when a clicked [up-target] link within the modal links to cached content (bugfix)', asyncSpec (next) ->
         up.modal.extract '.content', """
@@ -881,7 +899,7 @@ describe 'up.modal', ->
 
         next =>
           $link = $('.up-modal .content a')
-          expect($link).toExist()
+          expect($link).toBeAttached()
           up.proxy.preload($link)
 
         next =>
@@ -895,5 +913,5 @@ describe 'up.modal', ->
           Trigger.clickSequence('.up-modal .content a')
 
         next =>
-          expect($('.up-modal')).toExist()
+          expect($('.up-modal')).toBeAttached()
           expect($('.up-modal .content')).toHaveText('new text')