unpoly-rails 0.57.0 → 0.60.0

data/spec_app/spec/javascripts/up/{dom_spec.js.coffee → fragment_spec.js.coffee}

@@ -1,18 +1,61 @@
-describe 'up.dom', ->
+u = up.util
+e = up.element
+$ = jQuery
+
+describe 'up.fragment', ->
 
-  u = up.util
-  
   describe 'JavaScript functions', ->
 
+    describe 'up.fragment.first', ->
+
+      it 'returns the first element with the given selector', ->
+        match = fixture('.match')
+        noMatch = fixture('.no-match')
+        result = up.fragment.first('.match')
+        expect(result).toBe(match)
+
+      it 'returns undefined if there are no matches', ->
+        result = up.fragment.first('.match')
+        expect(result).toBeUndefined()
+
+      it 'does not return an element that is currently destroying', ->
+        match = fixture('.match.up-destroying')
+        result = up.fragment.first('.match')
+        expect(result).toBeUndefined()
+
+      describe 'when given a root element for the search', ->
+
+        it 'only matches descendants of that root', ->
+          parent1 = fixture('.parent1')
+          parent1Match = e.affix(parent1, '.match')
+
+          parent2 = fixture('.parent1')
+          parent2Match = e.affix(parent2, '.match')
+
+          expect(up.fragment.first(parent1, '.match')).toBe(parent1Match)
+          expect(up.fragment.first(parent2, '.match')).toBe(parent2Match)
+
+      describe 'with { origin } option', ->
+
+        it 'resolves an & in the selector string with an selector for the origin'
+
+        it 'prefers to find an element in the same layer as the origin'
+
+        it "returns the element in the top-most layer if there are no matches in the origin's layer"
+
+      describe 'with { layer } option', ->
+
+        it 'only matches elements in that layer'
+
     describe 'up.replace', ->
 
       describeCapability 'canPushState', ->
 
         beforeEach ->
 
-          @oldBefore = affix('.before').text('old-before')
-          @oldMiddle = affix('.middle').text('old-middle')
-          @oldAfter = affix('.after').text('old-after')
+          @$oldBefore = $fixture('.before').text('old-before')
+          @$oldMiddle = $fixture('.middle').text('old-middle')
+          @$oldAfter = $fixture('.after').text('old-after')
 
           @responseText =
             """
@@ -48,6 +91,17 @@ describe 'up.dom', ->
             expect(resolution).toHaveBeenCalled()
             expect($('.middle')).toHaveText('new-middle')
 
+        it 'allows to pass an element instead of a selector', asyncSpec (next) ->
+          up.replace(@$oldMiddle, '/path')
+
+          next =>
+            @respond()
+
+          next =>
+            expect($('.before')).toHaveText('old-before')
+            expect($('.middle')).toHaveText('new-middle')
+            expect($('.after')).toHaveText('old-after')
+
         describe 'with { transition } option', ->
 
           it 'returns a promise that will be fulfilled once the server response was received and the swap transition has completed', asyncSpec (next) ->
@@ -89,11 +143,11 @@ describe 'up.dom', ->
         describe 'when the server responds with an error', ->
 
           it 'replaces the first fallback instead of the given selector', asyncSpec (next) ->
-            up.dom.config.fallbacks = ['.fallback']
-            affix('.fallback')
+            up.fragment.config.fallbacks = ['.fallback']
+            $fixture('.fallback')
 
             # can't have the example replace the Jasmine test runner UI
-            extractSpy = up.dom.knife.mock('extract').and.returnValue(Promise.resolve())
+            extractSpy = up.fragment.knife.mock('extract').and.returnValue(Promise.resolve())
 
             next => up.replace('.middle', '/path')
             next => @respond(status: 500)
@@ -111,16 +165,16 @@ describe 'up.dom', ->
               expect($('.after')).toHaveText('new-after')
 
           it 'rejects the returned promise', (done) ->
-            affix('.after')
+            $fixture('.after')
             promise = up.replace('.middle', '/path', failTarget: '.after')
 
-            u.nextFrame =>
+            u.task =>
               promiseState(promise).then (result) =>
                 expect(result.state).toEqual('pending')
 
                 @respond(status: 500)
 
-                u.nextFrame =>
+                u.task =>
                   promiseState(promise).then (result) =>
                     expect(result.state).toEqual('rejected')
                     done()
@@ -129,7 +183,7 @@ describe 'up.dom', ->
 
           it "doesn't crash and rejects the returned promise", asyncSpec (next) ->
             jasmine.clock().install() # required by responseTimeout()
-            affix('.target')
+            $fixture('.target')
             promise = up.replace('.middle', '/path', timeout: 50)
 
             next =>
@@ -149,14 +203,14 @@ describe 'up.dom', ->
         describe 'when there is a network issue', ->
 
           it "doesn't crash and rejects the returned promise", (done) ->
-            affix('.target')
+            $fixture('.target')
             promise = up.replace('.middle', '/path')
 
-            u.nextFrame =>
+            u.task =>
               promiseState(promise).then (result) =>
                 expect(result.state).toEqual('pending')
                 @lastRequest().responseError()
-                u.nextFrame =>
+                u.task =>
                   promiseState(promise).then (result) =>
                     expect(result.state).toEqual('rejected')
                     done()
@@ -233,31 +287,31 @@ describe 'up.dom', ->
               done()
 
           it 'reuses the previous source for a non-GET request (since that is reloadable)', asyncSpec (next) ->
-            @oldMiddle.attr('up-source', '/previous-source')
+            @$oldMiddle.attr('up-source', '/previous-source')
             up.replace('.middle', '/path', method: 'post')
             next =>
               @respond()
             next =>
               expect($('.middle')).toHaveText('new-middle')
-              expect(up.dom.source('.middle')).toMatchUrl('/previous-source')
+              expect(up.fragment.source('.middle')).toMatchUrl('/previous-source')
 
           describe 'if a URL is given as { source } option', ->
 
             it 'uses that URL as the source for a GET request', asyncSpec (next) ->
               up.replace('.middle', '/path', source: '/given-path')
               next => @respond()
-              next => expect(up.dom.source('.middle')).toMatchUrl('/given-path')
+              next => expect(up.fragment.source('.middle')).toMatchUrl('/given-path')
 
             it 'uses that URL as the source after a non-GET request', asyncSpec (next) ->
               up.replace('.middle', '/path', method: 'post', source: '/given-path')
               next => @respond()
-              next => expect(up.dom.source('.middle')).toMatchUrl('/given-path')
+              next => expect(up.fragment.source('.middle')).toMatchUrl('/given-path')
 
             it 'ignores the option and reuses the previous source after a failed non-GET request', asyncSpec (next) ->
-              @oldMiddle.attr('up-source', '/previous-source')
+              @$oldMiddle.attr('up-source', '/previous-source')
               up.replace('.middle', '/path', method: 'post', source: '/given-path', failTarget: '.middle')
               next => @respond(status: 500)
-              next => expect(up.dom.source('.middle')).toMatchUrl('/previous-source')
+              next => expect(up.fragment.source('.middle')).toMatchUrl('/previous-source')
 
         describe 'document title', ->
 
@@ -265,7 +319,7 @@ describe 'up.dom', ->
             up.history.config.enabled = true
 
           it "sets the document title to the response <title>", asyncSpec (next) ->
-            affix('.container').text('old container text')
+            $fixture('.container').text('old container text')
             up.replace('.container', '/path')
 
             next =>
@@ -287,7 +341,7 @@ describe 'up.dom', ->
               expect(document.title).toBe('Title from HTML')
 
           it "sets the document title to an 'X-Up-Title' header in the response", asyncSpec (next) ->
-            affix('.container').text('old container text')
+            $fixture('.container').text('old container text')
             up.replace('.container', '/path')
 
             next =>
@@ -305,7 +359,7 @@ describe 'up.dom', ->
               expect(document.title).toBe('Title from header')
 
           it "prefers the X-Up-Title header to the response <title>", asyncSpec (next) ->
-            affix('.container').text('old container text')
+            $fixture('.container').text('old container text')
             up.replace('.container', '/path')
 
             next =>
@@ -330,7 +384,7 @@ describe 'up.dom', ->
               expect(document.title).toBe('Title from header')
 
           it "sets the document title to the response <title> with { history: false, title: true } options (bugfix)", asyncSpec (next) ->
-            affix('.container').text('old container text')
+            $fixture('.container').text('old container text')
             up.replace('.container', '/path', history: false, title: true)
 
             next =>
@@ -352,7 +406,7 @@ describe 'up.dom', ->
               expect(document.title).toBe('Title from HTML')
 
           it 'does not update the document title if the response has a <title> tag inside an inline SVG image (bugfix)', asyncSpec (next) ->
-            affix('.container').text('old container text')
+            $fixture('.container').text('old container text')
             document.title = 'old document title'
             up.replace('.container', '/path', history: false, title: true)
 
@@ -375,7 +429,7 @@ describe 'up.dom', ->
               expect(document.title).toBe('old document title')
 
           it "does not extract the title from the response or HTTP header if history isn't updated", asyncSpec (next) ->
-            affix('.container').text('old container text')
+            $fixture('.container').text('old container text')
             document.title = 'old document title'
             up.replace('.container', '/path', history: false)
 
@@ -400,7 +454,7 @@ describe 'up.dom', ->
               expect(document.title).toBe('old document title')
 
           it 'allows to pass an explicit title as { title } option', asyncSpec (next) ->
-            affix('.container').text('old container text')
+            $fixture('.container').text('old container text')
             up.replace('.container', '/path', title: 'Title from options')
 
             next =>
@@ -435,7 +489,7 @@ describe 'up.dom', ->
           describe 'nested selector merging', ->
 
             it 'replaces a single fragment if a selector contains a subsequent selector in the current page', asyncSpec (next) ->
-              $outer = affix('.outer').text('old outer text')
+              $outer = $fixture('.outer').text('old outer text')
               $inner = $outer.affix('.inner').text('old inner text')
 
               replacePromise = up.replace('.outer, .inner', '/path')
@@ -453,9 +507,9 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.outer')).toExist()
+                expect($('.outer')).toBeAttached()
                 expect($('.outer').text()).toContain('new outer text')
-                expect($('.inner')).toExist()
+                expect($('.inner')).toBeAttached()
                 expect($('.inner').text()).toContain('new inner text')
 
               next.await =>
@@ -463,7 +517,7 @@ describe 'up.dom', ->
                 promise.then (result) => expect(result.state).toEqual('fulfilled')
 
             it 'does not merge selectors if a selector contains a subsequent selector, but prepends instead of replacing', asyncSpec (next) ->
-              $outer = affix('.outer').text('old outer text')
+              $outer = $fixture('.outer').text('old outer text')
               $inner = $outer.affix('.inner').text('old inner text')
 
               replacePromise = up.replace('.outer:before, .inner', '/path')
@@ -481,10 +535,10 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.outer')).toExist()
+                expect($('.outer')).toBeAttached()
                 expect($('.outer').text()).toContain('new outer text')
                 expect($('.outer').text()).toContain('old outer text')
-                expect($('.inner')).toExist()
+                expect($('.inner')).toBeAttached()
                 expect($('.inner').text()).toContain('new inner text')
 
               next.await =>
@@ -492,7 +546,7 @@ describe 'up.dom', ->
                 promise.then (result) => expect(result.state).toEqual('fulfilled')
 
             it 'does not merge selectors if a selector contains a subsequent selector, but appends instead of replacing', asyncSpec (next) ->
-              $outer = affix('.outer').text('old outer text')
+              $outer = $fixture('.outer').text('old outer text')
               $inner = $outer.affix('.inner').text('old inner text')
 
               replacePromise = up.replace('.outer:after, .inner', '/path')
@@ -510,10 +564,10 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.outer')).toExist()
+                expect($('.outer')).toBeAttached()
                 expect($('.outer').text()).toContain('old outer text')
                 expect($('.outer').text()).toContain('new outer text')
-                expect($('.inner')).toExist()
+                expect($('.inner')).toBeAttached()
                 expect($('.inner').text()).toContain('new inner text')
 
               next.await =>
@@ -521,7 +575,7 @@ describe 'up.dom', ->
                 promise.then (result) => expect(result.state).toEqual('fulfilled')
 
             it 'does not lose selector pseudo-classes when merging selectors (bugfix)', asyncSpec (next) ->
-              $outer = affix('.outer').text('old outer text')
+              $outer = $fixture('.outer').text('old outer text')
               $inner = $outer.affix('.inner').text('old inner text')
 
               replacePromise = up.replace('.outer:after, .inner', '/path')
@@ -530,7 +584,7 @@ describe 'up.dom', ->
                 expect(@lastRequest().requestHeaders['X-Up-Target']).toEqual('.outer:after, .inner')
 
             it 'replaces a single fragment if a selector contains a previous selector in the current page', asyncSpec (next) ->
-              $outer = affix('.outer').text('old outer text')
+              $outer = $fixture('.outer').text('old outer text')
               $inner = $outer.affix('.inner').text('old inner text')
 
               replacePromise = up.replace('.outer, .inner', '/path')
@@ -548,9 +602,9 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.outer')).toExist()
+                expect($('.outer')).toBeAttached()
                 expect($('.outer').text()).toContain('new outer text')
-                expect($('.inner')).toExist()
+                expect($('.inner')).toBeAttached()
                 expect($('.inner').text()).toContain('new inner text')
 
               next.await =>
@@ -558,9 +612,9 @@ describe 'up.dom', ->
                 promise.then (result) => expect(result.state).toEqual('fulfilled')
 
             it 'does not lose a { reveal: true } option if the first selector was merged into a subsequent selector', asyncSpec (next) ->
-              revealStub = up.layout.knife.mock('reveal')
+              revealStub = up.viewport.knife.mock('reveal')
 
-              $outer = affix('.outer').text('old outer text')
+              $outer = $fixture('.outer').text('old outer text')
               $inner = $outer.affix('.inner').text('old inner text')
 
               up.replace('.inner, .outer', '/path', reveal: true)
@@ -578,18 +632,18 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.outer')).toExist()
+                expect($('.outer')).toBeAttached()
                 expect($('.outer').text()).toContain('new outer text')
-                expect($('.inner')).toExist()
+                expect($('.inner')).toBeAttached()
                 expect($('.inner').text()).toContain('new inner text')
 
                 expect(revealStub).toHaveBeenCalled()
 
 
             it 'does not lose a { reveal: string } option if the first selector was merged into a subsequent selector', asyncSpec (next) ->
-              revealStub = up.layout.knife.mock('reveal')
+              revealStub = up.viewport.knife.mock('reveal')
 
-              $outer = affix('.outer').text('old outer text')
+              $outer = $fixture('.outer').text('old outer text')
               $inner = $outer.affix('.inner').text('old inner text')
 
               up.replace('.inner, .outer', '/path', reveal: '.revealee')
@@ -610,18 +664,18 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.outer')).toExist()
+                expect($('.outer')).toBeAttached()
                 expect($('.outer').text()).toContain('new outer text')
-                expect($('.inner')).toExist()
+                expect($('.inner')).toBeAttached()
                 expect($('.inner').text()).toContain('new inner text')
 
                 expect(revealStub).toHaveBeenCalled()
                 revealArg = revealStub.calls.mostRecent().args[0]
-                expect(revealArg).toBeMatchedBy('.revealee')
+                expect(revealArg).toMatchSelector('.revealee')
 
 
             it 'replaces a single fragment if the nesting differs in current page and response', asyncSpec (next) ->
-              $outer = affix('.outer').text('old outer text')
+              $outer = $fixture('.outer').text('old outer text')
               $inner = $outer.affix('.inner').text('old inner text')
 
               replacePromise = up.replace('.outer, .inner', '/path')
@@ -637,17 +691,17 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.outer')).toExist()
+                expect($('.outer')).toBeAttached()
                 expect($('.outer').text()).toContain('new outer text')
-                expect($('.inner')).not.toExist()
+                expect($('.inner')).not.toBeAttached()
 
               next.await =>
                 promise = promiseState(replacePromise)
                 promise.then (result) => expect(result.state).toEqual('fulfilled')
 
             it 'does not crash if two selectors that are siblings in the current page are nested in the response', asyncSpec (next) ->
-              $outer = affix('.one').text('old one text')
-              $inner = affix('.two').text('old two text')
+              $outer = $fixture('.one').text('old one text')
+              $inner = $fixture('.two').text('old two text')
 
               replacePromise = up.replace('.one, .two', '/path')
 
@@ -662,9 +716,9 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.one')).toExist()
+                expect($('.one')).toBeAttached()
                 expect($('.one').text()).toContain('new one text')
-                expect($('.two')).toExist()
+                expect($('.two')).toBeAttached()
                 expect($('.two').text()).toContain('new two text')
 
               next.await =>
@@ -672,8 +726,8 @@ describe 'up.dom', ->
                 promise.then (result) => expect(result.state).toEqual('fulfilled')
 
             it 'does not crash if selectors that siblings in the current page are inversely nested in the response', asyncSpec (next) ->
-              $outer = affix('.one').text('old one text')
-              $inner = affix('.two').text('old two text')
+              $outer = $fixture('.one').text('old one text')
+              $inner = $fixture('.two').text('old two text')
 
               replacePromise = up.replace('.one, .two', '/path')
 
@@ -688,9 +742,9 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.one')).toExist()
+                expect($('.one')).toBeAttached()
                 expect($('.one').text()).toContain('new one text')
-                expect($('.two')).toExist()
+                expect($('.two')).toBeAttached()
                 expect($('.two').text()).toContain('new two text')
 
               next.await =>
@@ -698,7 +752,7 @@ describe 'up.dom', ->
                 promise.then (result) => expect(result.state).toEqual('fulfilled')
 
             it 'updates the first selector if the same element is targeted twice in a single replacement', asyncSpec (next) ->
-              $one = affix('.one.alias').text('old one text')
+              $one = $fixture('.one.alias').text('old one text')
 
               replacePromise = up.replace('.one, .alias', '/path')
 
@@ -712,7 +766,7 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.one')).toExist()
+                expect($('.one')).toBeAttached()
                 expect($('.one').text()).toContain('new one text')
 
               next.await =>
@@ -720,7 +774,7 @@ describe 'up.dom', ->
                 promise.then (result) => expect(result.state).toEqual('fulfilled')
 
             it 'updates the first selector if the same element is prepended or appended twice in a single replacement', asyncSpec (next) ->
-              $one = affix('.one').text('old one text')
+              $one = $fixture('.one').text('old one text')
 
               replacePromise = up.replace('.one:before, .one:after', '/path')
 
@@ -734,7 +788,7 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect($('.one')).toExist()
+                expect($('.one')).toBeAttached()
                 expect($('.one').text()).toMatchText('new one text old one text')
 
               next.await =>
@@ -742,7 +796,7 @@ describe 'up.dom', ->
                 promise.then (result) => expect(result.state).toEqual('fulfilled')
 
             it "updates the first selector if the same element is prepended, replaced and appended in a single replacement", asyncSpec (next) ->
-              $elem = affix('.elem.alias1.alias2').text("old text")
+              $elem = $fixture('.elem.alias1.alias2').text("old text")
 
               replacePromise = up.replace('.elem:before, .alias1, .alias2:after', '/path')
 
@@ -756,7 +810,7 @@ describe 'up.dom', ->
                   """
 
               next =>
-                expect('.elem').toExist()
+                expect('.elem').toBeAttached()
                 expect($('.elem').text()).toMatchText('new text old text')
 
               next.await =>
@@ -793,9 +847,9 @@ describe 'up.dom', ->
               done()
 
           it 'understands non-standard CSS selector extensions such as :has(...)', (done) ->
-            $first = affix('.boxx#first')
+            $first = $fixture('.boxx#first')
             $firstChild = $('<span class="first-child">old first</span>').appendTo($first)
-            $second = affix('.boxx#second')
+            $second = $fixture('.boxx#second')
             $secondChild = $('<span class="second-child">old second</span>').appendTo($second)
 
             promise = up.replace('.boxx:has(.first-child)', '/path')
@@ -813,10 +867,10 @@ describe 'up.dom', ->
           describe 'when selectors are missing on the page before the request was made', ->
 
             beforeEach ->
-              up.dom.config.fallbacks = []
+              up.fragment.config.fallbacks = []
 
             it 'tries selectors from options.fallback before making a request', asyncSpec (next) ->
-              affix('.box').text('old box')
+              $fixture('.box').text('old box')
               up.replace('.unknown', '/path', fallback: '.box')
 
               next => @respondWith '<div class="box">new box</div>'
@@ -829,8 +883,8 @@ describe 'up.dom', ->
                 done()
 
             it 'considers a union selector to be missing if one of its selector-atoms are missing', asyncSpec (next) ->
-              affix('.target').text('old target')
-              affix('.fallback').text('old fallback')
+              $fixture('.target').text('old target')
+              $fixture('.fallback').text('old fallback')
               up.replace('.target, .unknown', '/path', fallback: '.fallback')
 
               next =>
@@ -843,16 +897,16 @@ describe 'up.dom', ->
                 expect('.target').toHaveText('old target')
                 expect('.fallback').toHaveText('new fallback')
 
-            it 'tries a selector from up.dom.config.fallbacks if options.fallback is missing', asyncSpec (next) ->
-              up.dom.config.fallbacks = ['.existing']
-              affix('.existing').text('old existing')
+            it 'tries a selector from up.fragment.config.fallbacks if options.fallback is missing', asyncSpec (next) ->
+              up.fragment.config.fallbacks = ['.existing']
+              $fixture('.existing').text('old existing')
               up.replace('.unknown', '/path')
               next => @respondWith '<div class="existing">new existing</div>'
               next => expect('.existing').toHaveText('new existing')
 
-            it 'does not try a selector from up.dom.config.fallbacks and rejects the promise if options.fallback is false', (done) ->
-              up.dom.config.fallbacks = ['.existing']
-              affix('.existing').text('old existing')
+            it 'does not try a selector from up.fragment.config.fallbacks and rejects the promise if options.fallback is false', (done) ->
+              up.fragment.config.fallbacks = ['.existing']
+              $fixture('.existing').text('old existing')
               up.replace('.unknown', '/path', fallback: false).catch (e) ->
                 expect(e).toBeError(/Could not find target in current page/i)
                 done()
@@ -860,11 +914,11 @@ describe 'up.dom', ->
           describe 'when selectors are missing on the page after the request was made', ->
 
             beforeEach ->
-              up.dom.config.fallbacks = []
+              up.fragment.config.fallbacks = []
 
             it 'tries selectors from options.fallback before swapping elements', asyncSpec (next) ->
-              $target = affix('.target').text('old target')
-              $fallback = affix('.fallback').text('old fallback')
+              $target = $fixture('.target').text('old target')
+              $fallback = $fixture('.fallback').text('old fallback')
               up.replace('.target', '/path', fallback: '.fallback')
               $target.remove()
 
@@ -878,28 +932,28 @@ describe 'up.dom', ->
                 expect('.fallback').toHaveText('new fallback')
 
             it 'rejects the promise if all alternatives are exhausted', (done) ->
-              $target = affix('.target').text('old target')
-              $fallback = affix('.fallback').text('old fallback')
+              $target = $fixture('.target').text('old target')
+              $fallback = $fixture('.fallback').text('old fallback')
               promise = up.replace('.target', '/path', fallback: '.fallback')
               $target.remove()
               $fallback.remove()
 
-              u.nextFrame =>
+              u.task =>
                 @respondWith """
                   <div class="target">new target</div>
                   <div class="fallback">new fallback</div>
                 """
 
-                u.nextFrame =>
+                u.task =>
                   promiseState(promise).then (result) ->
                     expect(result.state).toEqual('rejected')
                     expect(result.value).toBeError(/Could not find target in current page/i)
                     done()
 
             it 'considers a union selector to be missing if one of its selector-atoms are missing', asyncSpec (next) ->
-              $target = affix('.target').text('old target')
-              $target2 = affix('.target2').text('old target2')
-              $fallback = affix('.fallback').text('old fallback')
+              $target = $fixture('.target').text('old target')
+              $target2 = $fixture('.target2').text('old target2')
+              $fallback = $fixture('.fallback').text('old fallback')
               up.replace('.target, .target2', '/path', fallback: '.fallback')
               $target2.remove()
 
@@ -913,10 +967,10 @@ describe 'up.dom', ->
                 expect('.target').toHaveText('old target')
                 expect('.fallback').toHaveText('new fallback')
 
-            it 'tries a selector from up.dom.config.fallbacks if options.fallback is missing', asyncSpec (next) ->
-              up.dom.config.fallbacks = ['.fallback']
-              $target = affix('.target').text('old target')
-              $fallback = affix('.fallback').text('old fallback')
+            it 'tries a selector from up.fragment.config.fallbacks if options.fallback is missing', asyncSpec (next) ->
+              up.fragment.config.fallbacks = ['.fallback']
+              $target = $fixture('.target').text('old target')
+              $fallback = $fixture('.fallback').text('old fallback')
               up.replace('.target', '/path')
               $target.remove()
 
@@ -929,14 +983,14 @@ describe 'up.dom', ->
               next =>
                 expect('.fallback').toHaveText('new fallback')
 
-            it 'does not try a selector from up.dom.config.fallbacks and rejects the promise if options.fallback is false', (done) ->
-              up.dom.config.fallbacks = ['.fallback']
-              $target = affix('.target').text('old target')
-              $fallback = affix('.fallback').text('old fallback')
+            it 'does not try a selector from up.fragment.config.fallbacks and rejects the promise if options.fallback is false', (done) ->
+              up.fragment.config.fallbacks = ['.fallback']
+              $target = $fixture('.target').text('old target')
+              $fallback = $fixture('.fallback').text('old fallback')
               promise = up.replace('.target', '/path', fallback: false)
               $target.remove()
 
-              u.nextFrame =>
+              u.task =>
                 @respondWith """
                   <div class="target">new target</div>
                   <div class="fallback">new fallback</div>
@@ -949,11 +1003,11 @@ describe 'up.dom', ->
           describe 'when selectors are missing in the response', ->
 
             beforeEach ->
-              up.dom.config.fallbacks = []
+              up.fragment.config.fallbacks = []
 
             it 'tries selectors from options.fallback before swapping elements', asyncSpec (next) ->
-              $target = affix('.target').text('old target')
-              $fallback = affix('.fallback').text('old fallback')
+              $target = $fixture('.target').text('old target')
+              $fallback = $fixture('.fallback').text('old fallback')
               up.replace('.target', '/path', fallback: '.fallback')
 
               next =>
@@ -968,11 +1022,11 @@ describe 'up.dom', ->
             describe 'if all alternatives are exhausted', ->
 
               it 'rejects the promise', (done) ->
-                $target = affix('.target').text('old target')
-                $fallback = affix('.fallback').text('old fallback')
+                $target = $fixture('.target').text('old target')
+                $fallback = $fixture('.fallback').text('old fallback')
                 promise = up.replace('.target', '/path', fallback: '.fallback')
 
-                u.nextFrame =>
+                u.task =>
                   @respondWith '<div class="unexpected">new unexpected</div>'
 
                 promise.catch (e) ->
@@ -980,31 +1034,31 @@ describe 'up.dom', ->
                   done()
 
               it 'shows a link to open the unexpected response', (done) ->
-                $target = affix('.target').text('old target')
-                $fallback = affix('.fallback').text('old fallback')
+                $target = $fixture('.target').text('old target')
+                $fallback = $fixture('.fallback').text('old fallback')
                 promise = up.replace('.target', '/path', fallback: '.fallback')
                 navigate = spyOn(up.browser, 'navigate')
 
-                u.nextFrame =>
+                u.task =>
                   @respondWith '<div class="unexpected">new unexpected</div>'
 
                 promise.catch (e) ->
                   $toast = $('.up-toast')
-                  expect($toast).toExist()
+                  expect($toast).toBeAttached()
                   $inspectLink = $toast.find(".up-toast-action:contains('Open response')")
-                  expect($inspectLink).toExist()
+                  expect($inspectLink).toBeAttached()
                   expect(navigate).not.toHaveBeenCalled()
 
                   Trigger.clickSequence($inspectLink)
 
-                  u.nextFrame =>
+                  u.task =>
                     expect(navigate).toHaveBeenCalledWith('/path', {})
                     done()
 
             it 'considers a union selector to be missing if one of its selector-atoms are missing', asyncSpec (next) ->
-              $target = affix('.target').text('old target')
-              $target2 = affix('.target2').text('old target2')
-              $fallback = affix('.fallback').text('old fallback')
+              $target = $fixture('.target').text('old target')
+              $target2 = $fixture('.target2').text('old target2')
+              $fallback = $fixture('.fallback').text('old fallback')
               up.replace('.target, .target2', '/path', fallback: '.fallback')
 
               next =>
@@ -1018,10 +1072,10 @@ describe 'up.dom', ->
                 expect('.target2').toHaveText('old target2')
                 expect('.fallback').toHaveText('new fallback')
 
-            it 'tries a selector from up.dom.config.fallbacks if options.fallback is missing', asyncSpec (next) ->
-              up.dom.config.fallbacks = ['.fallback']
-              $target = affix('.target').text('old target')
-              $fallback = affix('.fallback').text('old fallback')
+            it 'tries a selector from up.fragment.config.fallbacks if options.fallback is missing', asyncSpec (next) ->
+              up.fragment.config.fallbacks = ['.fallback']
+              $target = $fixture('.target').text('old target')
+              $fallback = $fixture('.fallback').text('old fallback')
               up.replace('.target', '/path')
 
               next =>
@@ -1031,13 +1085,13 @@ describe 'up.dom', ->
                 expect('.target').toHaveText('old target')
                 expect('.fallback').toHaveText('new fallback')
 
-            it 'does not try a selector from up.dom.config.fallbacks and rejects the promise if options.fallback is false', (done) ->
-              up.dom.config.fallbacks = ['.fallback']
-              $target = affix('.target').text('old target')
-              $fallback = affix('.fallback').text('old fallback')
+            it 'does not try a selector from up.fragment.config.fallbacks and rejects the promise if options.fallback is false', (done) ->
+              up.fragment.config.fallbacks = ['.fallback']
+              $target = $fixture('.target').text('old target')
+              $fallback = $fixture('.fallback').text('old fallback')
               promise = up.replace('.target', '/path', fallback: false)
 
-              u.nextFrame =>
+              u.task =>
                 @respondWith '<div class="fallback">new fallback</div>'
 
               promise.catch (e) ->
@@ -1082,7 +1136,7 @@ describe 'up.dom', ->
               promise = up.replace('.middle', '/path')
               @respond()
 
-              u.nextFrame ->
+              u.task ->
                 promiseState(promise).then (result) ->
                   expect(result.state).toEqual('fulfilled')
                   expect(window.scriptTagExecuted).not.toHaveBeenCalled()
@@ -1115,7 +1169,7 @@ describe 'up.dom', ->
 
                 # Now wait for jQuery to parse out <script> tags and fetch the linked scripts.
                 # This actually happens with jasmine_ajax's fake XHR object.
-                u.nextFrame =>
+                u.task =>
                   expect(jasmine.Ajax.requests.count()).toEqual(1)
                   expect(@lastRequest().url).not.toContain('linked_script')
                   expect(window.scriptTagExecuted).not.toHaveBeenCalled()
@@ -1137,7 +1191,7 @@ describe 'up.dom', ->
 
               promise.then ->
                 $noscript = $('.middle noscript')
-                text = u.trim($noscript.text())
+                text = $noscript.text().trim()
                 expect(text).toEqual('<img src="foo.png">')
                 done()
 
@@ -1156,7 +1210,7 @@ describe 'up.dom', ->
 
               promise.then ->
                 $noscript = $('.middle noscript')
-                text = u.trim($noscript.text())
+                text = $noscript.text().trim()
                 expect(text).toMatch(/<img src="foo\.png">\s+<img src="bar\.png">/)
                 done()
 
@@ -1178,8 +1232,8 @@ describe 'up.dom', ->
               promise.then ->
                 $noscripts = $('.middle noscript')
                 expect($noscripts.length).toBe(2)
-                text0 = u.trim($noscripts[0].textContent)
-                text1 = u.trim($noscripts[1].textContent)
+                text0 = $noscripts[0].textContent.trim()
+                text1 = $noscripts[1].textContent.trim()
                 expect(text0).toEqual('<img src="foo.png">')
                 expect(text1).toEqual('<img src="bar.png">')
                 done()
@@ -1244,7 +1298,7 @@ describe 'up.dom', ->
 
           it 'restores the scroll positions of all viewports around the target', asyncSpec (next) ->
 
-            $viewport = affix('div[up-viewport] .element').css
+            $viewport = $fixture('div[up-viewport] .element').css
               'height': '100px'
               'width': '100px'
               'overflow-y': 'scroll'
@@ -1275,9 +1329,9 @@ describe 'up.dom', ->
             @revealedText = []
             @revealOptions = {}
 
-            @revealMock = up.layout.knife.mock('reveal').and.callFake ($element, options) =>
-              @revealedHTML.push $element.get(0).outerHTML
-              @revealedText.push $element.text().trim()
+            @revealMock = up.viewport.knife.mock('reveal').and.callFake (element, options) =>
+              @revealedHTML.push element.outerHTML
+              @revealedText.push element.textContent.trim()
               @revealOptions = options
               Promise.resolve()
 
@@ -1288,11 +1342,11 @@ describe 'up.dom', ->
               @respond()
 
             next =>
-              expect(@revealMock).not.toHaveBeenCalledWith(@oldMiddle)
+              expect(@revealMock).not.toHaveBeenCalledWith(@$oldMiddle[0])
               expect(@revealedText).toEqual ['new-middle']
 
           it 'allows to pass another selector to reveal', asyncSpec (next)->
-            $other = affix('.other').text('other text')
+            $other = $fixture('.other').text('other text')
 
             up.replace('.middle', '/path', reveal: '.other')
 
@@ -1303,7 +1357,7 @@ describe 'up.dom', ->
               expect(@revealedText).toEqual ['other text']
 
           it 'allows to refer to the replacement { origin } as "&" in the { reveal } selector', asyncSpec (next) ->
-            $origin = affix('.origin').text('origin text')
+            $origin = $fixture('.origin').text('origin text')
 
             up.replace('.middle', '/path', reveal: '&', origin: '.origin')
 
@@ -1316,7 +1370,7 @@ describe 'up.dom', ->
           describe 'when the server responds with an error code', ->
 
             it 'ignores the { reveal } option', asyncSpec (next) ->
-              $failTarget = affix('.fail-target')
+              $failTarget = $fixture('.fail-target')
               up.replace('.middle', '/path', failTarget: '.fail-target', reveal: true)
 
               next =>
@@ -1326,7 +1380,7 @@ describe 'up.dom', ->
                 expect(@revealMock).not.toHaveBeenCalled()
 
             it 'accepts a { failReveal } option for error responses', asyncSpec (next) ->
-              $failTarget = affix('.fail-target').text('old fail target text')
+              $failTarget = $fixture('.fail-target').text('old fail target text')
               up.replace('.middle', '/path', failTarget: '.fail-target', reveal: false, failReveal: true)
 
               next =>
@@ -1342,8 +1396,8 @@ describe 'up.dom', ->
                 expect(@revealedText).toEqual ['new fail target text']
 
             it 'allows to refer to the replacement { origin } as "&" in the { failTarget } selector', asyncSpec (next) ->
-              $origin = affix('.origin').text('origin text')
-              $failTarget = affix('.fail-target').text('old fail target text')
+              $origin = $fixture('.origin').text('origin text')
+              $failTarget = $fixture('.fail-target').text('old fail target text')
               up.replace('.middle', '/path', failTarget: '.fail-target', reveal: false, failReveal: '&', origin: $origin)
 
               next =>
@@ -1367,7 +1421,7 @@ describe 'up.dom', ->
                 @respond()
 
               next =>
-                expect(@revealMock).not.toHaveBeenCalledWith(@oldMiddle)
+                expect(@revealMock).not.toHaveBeenCalledWith(@$oldMiddle[0])
                 expect(@revealedText).toEqual ['new-middle']
 
           describe 'when there is an anchor #hash in the URL', ->
@@ -1473,26 +1527,26 @@ describe 'up.dom', ->
             promise = up.replace('.middle:after', '/path', reveal: true)
             @respond()
             promise.then =>
-              expect(@revealMock).not.toHaveBeenCalledWith(@oldMiddle)
+              expect(@revealMock).not.toHaveBeenCalledWith(@$oldMiddle[0])
               # Text nodes are wrapped in a .up-insertion container so we can
               # animate them and measure their position/size for scrolling.
               # This is not possible for container-less text nodes.
               expect(@revealedHTML).toEqual ['<div class="up-insertion">new-middle</div>']
               # Show that the wrapper is done after the insertion.
-              expect($('.up-insertion')).not.toExist()
+              expect($('.up-insertion')).not.toBeAttached()
               done()
 
           it 'reveals a new element that is being prepended', (done) ->
             promise = up.replace('.middle:before', '/path', reveal: true)
             @respond()
             promise.then =>
-              expect(@revealMock).not.toHaveBeenCalledWith(@oldMiddle)
+              expect(@revealMock).not.toHaveBeenCalledWith(@$oldMiddle[0])
               # Text nodes are wrapped in a .up-insertion container so we can
               # animate them and measure their position/size for scrolling.
               # This is not possible for container-less text nodes.
               expect(@revealedHTML).toEqual ['<div class="up-insertion">new-middle</div>']
               # Show that the wrapper is done after the insertion.
-              expect($('.up-insertion')).not.toExist()
+              expect($('.up-insertion')).not.toBeAttached()
               done()
 
         it 'uses a { failTransition } option if the request failed'
@@ -1510,9 +1564,9 @@ describe 'up.dom', ->
 
       it 'Updates a selector on the current page with the same selector from the given HTML string', asyncSpec (next) ->
 
-        affix('.before').text('old-before')
-        affix('.middle').text('old-middle')
-        affix('.after').text('old-after')
+        $fixture('.before').text('old-before')
+        $fixture('.middle').text('old-middle')
+        $fixture('.after').text('old-after')
 
         html =
           """
@@ -1537,7 +1591,7 @@ describe 'up.dom', ->
           done()
 
       it "throws an error if the selector can't be found in the given HTML string", (done) ->
-        affix('.foo-bar')
+        $fixture('.foo-bar')
         promise = up.extract('.foo-bar', '')
         promiseState(promise).then (result) =>
           expect(result.state).toEqual('rejected')
@@ -1546,7 +1600,7 @@ describe 'up.dom', ->
 
       it "ignores an element that matches the selector but also matches .up-destroying", (done) ->
         html = '<div class="foo-bar">text</div>'
-        affix('.foo-bar.up-destroying')
+        $fixture('.foo-bar.up-destroying')
         promise = up.extract('.foo-bar', html)
         promiseState(promise).then (result) =>
           expect(result.state).toEqual('rejected')
@@ -1555,8 +1609,8 @@ describe 'up.dom', ->
 
       it "ignores an element that matches the selector but also has a parent matching .up-destroying", (done) ->
         html = '<div class="foo-bar">text</div>'
-        $parent = affix('.up-destroying')
-        $child = affix('.foo-bar').appendTo($parent)
+        $parent = $fixture('.up-destroying')
+        $child = $fixture('.foo-bar').appendTo($parent)
         promise = up.extract('.foo-bar', html)
         promiseState(promise).then (result) =>
           expect(result.state).toEqual('rejected')
@@ -1565,8 +1619,8 @@ describe 'up.dom', ->
 
       it 'only replaces the first element matching the selector', asyncSpec (next) ->
         html = '<div class="foo-bar">text</div>'
-        affix('.foo-bar')
-        affix('.foo-bar')
+        $fixture('.foo-bar')
+        $fixture('.foo-bar')
         up.extract('.foo-bar', html)
 
         next =>
@@ -1575,7 +1629,7 @@ describe 'up.dom', ->
           expect($($elements.get(1)).text()).toEqual('')
 
       it 'focuses an [autofocus] element in the new fragment', asyncSpec (next) ->
-        affix('.foo-bar')
+        $fixture('.foo-bar')
         up.extract '.foo-bar', """
           <form class='foo-bar'>
             <input class="autofocused-input" autofocus>
@@ -1588,79 +1642,29 @@ describe 'up.dom', ->
           expect(document.activeElement).toBe(input)
 
 
-      it 'emits an up:fragment:destroy event while the element is still in the DOM', asyncSpec (next) ->
-        $element = affix('.element')
-        expect($element).toBeAttached()
-
-        listener = jasmine.createSpy('event listener')
-        $element.on('up:fragment:destroy', listener)
-
-        destroyDone = up.destroy($element, animation: 'fade-out', duration: 30)
-
-        next ->
-          expect(listener).toHaveBeenCalledWith(jasmine.objectContaining($element: $element))
-          expect($element).toBeAttached()
-
-          next.await(destroyDone)
-
-        next ->
-          expect($element).toBeDetached()
-
-      it 'emits an up:fragment:destroyed event on the former parent element after the element has been removed from the DOM', asyncSpec (next) ->
-        $parent = affix('.parent')
-        $element = $parent.affix('.element')
-        expect($element).toBeAttached()
-
-        listener = jasmine.createSpy('event listener')
-
-        $parent.on('up:fragment:destroyed', listener)
-
-        destroyDone = up.destroy($element, animation: 'fade-out', duration: 30)
-
-        next ->
-          expect(listener).not.toHaveBeenCalled()
-          expect($element).toBeAttached()
-
-          next.await(destroyDone)
-
-        next ->
-          expect(listener).toHaveBeenCalledWith(jasmine.objectContaining($element: $element, $parent: $parent))
-          expect($element).toBeDetached()
-
-      it 'emits an up:fragment:destroy event while the element is still in the DOM', (done) ->
-        $element = affix('.element.v1').text('v1')
-        expect($element).toBeAttached()
-
-        listener = jasmine.createSpy('event listener')
-        $element.on 'up:fragment:destroy', -> listener(u.isDetached($element))
-
-        extractDone = up.extract('.element', '<div class="element v2">v2</div>')
-
-        extractDone.then ->
-          expect(listener).toHaveBeenCalledWith(false)
-          done()
-
+      # up.extract
       it 'emits an up:fragment:destroyed event on the former parent element after the element has been removed from the DOM', (done) ->
-        $parent = affix('.parent')
+        $parent = $fixture('.parent')
         $element = $parent.affix('.element.v1').text('v1')
         expect($element).toBeAttached()
 
-        listener = jasmine.createSpy('event listener')
-        $parent.on 'up:fragment:destroyed', -> listener(u.isDetached($element))
+        spy = jasmine.createSpy('event listener')
+        $parent[0].addEventListener 'up:fragment:destroyed', (event) ->
+          spy(event.target, event.fragment, up.specUtil.isDetached($element))
 
         extractDone = up.extract('.element', '<div class="element v2">v2</div>')
 
         extractDone.then ->
-          expect(listener).toHaveBeenCalledWith(true)
+          expect(spy).toHaveBeenCalledWith($parent[0], $element[0], true)
           done()
 
       describe 'cleaning up', ->
 
         it 'calls destructors on the old element', asyncSpec (next) ->
           destructor = jasmine.createSpy('destructor')
-          up.compiler '.container', ($element) ->
+          up.$compiler '.container', ($element) ->
             -> destructor($element.text())
-          $container = affix('.container').text('old text')
+          $container = $fixture('.container').text('old text')
           up.hello($container)
           up.extract('.container', '<div class="container">new text</div>')
 
@@ -1670,27 +1674,27 @@ describe 'up.dom', ->
 
         it 'calls destructors on the old element after a { transition }', (done) ->
           destructor = jasmine.createSpy('destructor')
-          up.compiler '.container', ($element) ->
+          up.$compiler '.container', ($element) ->
             -> destructor($element.text())
-          $container = affix('.container').text('old text')
+          $container = $fixture('.container').text('old text')
           up.hello($container)
 
           up.extract('.container', '<div class="container">new text</div>', transition: 'cross-fade', duration: 100)
 
-          u.setTimer 50, =>
+          u.timer 50, =>
             expect(destructor).not.toHaveBeenCalled()
 
-          u.setTimer 220, =>
+          u.timer 220, =>
             expect('.container').toHaveText('new text')
             expect(destructor).toHaveBeenCalledWith('old text')
             done()
 
         it 'calls destructors when the replaced element is a singleton element like <body> (bugfix)', asyncSpec (next) ->
           # shouldSwapElementsDirectly() is true for body, but can't have the example replace the Jasmine test runner UI
-          up.util.knife.mock('isSingletonElement').and.callFake ($element) -> $element.is('.container')
+          up.element.knife.mock('isSingleton').and.callFake (element) -> e.matches(element, '.container')
           destructor = jasmine.createSpy('destructor')
-          up.compiler '.container', -> destructor
-          $container = affix('.container')
+          up.$compiler '.container', -> destructor
+          $container = $fixture('.container')
           up.hello($container)
           up.extract('.container', '<div class="container">new text</div>')
 
@@ -1700,9 +1704,9 @@ describe 'up.dom', ->
 
         it 'marks the old element as .up-destroying before destructors', (done) ->
           destructor = jasmine.createSpy('destructor')
-          up.compiler '.container', ($element) ->
+          up.$compiler '.container', ($element) ->
             -> destructor($element.text(), $element.is('.up-destroying'))
-          $container = affix('.container').text('old text')
+          $container = $fixture('.container').text('old text')
           up.hello($container)
 
           extractDone = up.extract('.container', '<div class="container">new text</div>')
@@ -1714,9 +1718,9 @@ describe 'up.dom', ->
 
         it 'marks the old element as .up-destroying before destructors after a { transition }', (done) ->
           destructor = jasmine.createSpy('destructor')
-          up.compiler '.container', ($element) ->
+          up.$compiler '.container', ($element) ->
             -> destructor($element.text(), $element.is('.up-destroying'))
-          $container = affix('.container').text('old text')
+          $container = $fixture('.container').text('old text')
           up.hello($container)
 
           extractDone = up.extract('.container', '<div class="container">new text</div>', transition: 'cross-fade', duration: 100)
@@ -1728,10 +1732,10 @@ describe 'up.dom', ->
 
         it 'calls destructors while the element is still attached to the DOM, so destructors see ancestry and events bubble up', asyncSpec (next) ->
           spy = jasmine.createSpy('parent spy')
-          up.compiler '.element', ($element) ->
+          up.$compiler '.element', ($element) ->
             return -> spy($element.text(), $element.parent())
 
-          $parent = affix('.parent')
+          $parent = $fixture('.parent')
           $element = $parent.affix('.element').text('old text')
           up.hello($element)
 
@@ -1742,12 +1746,12 @@ describe 'up.dom', ->
 
         it 'calls destructors while the element is still attached to the DOM when also using a { transition }', (done) ->
           spy = jasmine.createSpy('parent spy')
-          up.compiler '.element', ($element) ->
+          up.$compiler '.element', ($element) ->
             return ->
               # We must seek .parent in our ancestry, because our direct parent() is an .up-bounds container
               spy($element.text(), $element.closest('.parent'))
 
-          $parent = affix('.parent')
+          $parent = $fixture('.parent')
           $element = $parent.affix('.element').text('old text')
           up.hello($element)
 
@@ -1761,7 +1765,7 @@ describe 'up.dom', ->
       describe 'with { transition } option', ->
 
         it 'morphs between the old and new element', asyncSpec (next) ->
-          affix('.element.v1').text('version 1')
+          $fixture('.element.v1').text('version 1')
           up.extract('.element', '<div class="element v2">version 2</div>', transition: 'cross-fade', duration: 200, easing: 'linear')
 
           $old = undefined
@@ -1772,38 +1776,38 @@ describe 'up.dom', ->
             $new = $('.element.v2')
 
             expect($old).toHaveLength(1)
-            expect(u.opacity($old)).toBeAround(1.0, 0.15)
+            expect($old).toHaveOpacity(1.0, 0.15)
 
             expect($new).toHaveLength(1)
-            expect(u.opacity($new)).toBeAround(0.0, 0.15)
+            expect($new).toHaveOpacity(0.0, 0.15)
 
           next.after 100, =>
-            expect(u.opacity($old)).toBeAround(0.5, 0.3)
-            expect(u.opacity($new)).toBeAround(0.5, 0.3)
+            expect($old).toHaveOpacity(0.5, 0.3)
+            expect($new).toHaveOpacity(0.5, 0.3)
 
           next.after (100 + 70), =>
-            expect(u.opacity($new)).toBeAround(1.0, 0.1)
+            expect($new).toHaveOpacity(1.0, 0.1)
             expect($old).toBeDetached()
 
 
-          it 'ignores a { transition } option when replacing a singleton element like <body>', asyncSpec (next) ->
-            # shouldSwapElementsDirectly() is true for body, but can't have the example replace the Jasmine test runner UI
-            up.util.knife.mock('isSingletonElement').and.callFake ($element) -> $element.is('.container')
+        it 'ignores a { transition } option when replacing a singleton element like <body>', asyncSpec (next) ->
+          # shouldSwapElementsDirectly() is true for body, but can't have the example replace the Jasmine test runner UI
+          spyOn(up.element, 'isSingleton').and.callFake (element) -> e.matches(element, '.container')
 
-            affix('.container').text('old text')
+          $fixture('.container').text('old text')
 
-            extractDone = jasmine.createSpy()
-            promise = up.extract('.container', '<div class="container">new text</div>', transition: 'cross-fade', duration: 200)
-            promise.then(extractDone)
+          extractDone = jasmine.createSpy()
+          promise = up.extract('.container', '<div class="container">new text</div>', transition: 'cross-fade', duration: 200)
+          promise.then(extractDone)
 
-            next =>
-              # See that we've already immediately swapped the element and ignored the duration of 200ms
-              expect(extractDone).toHaveBeenCalled()
-              expect($('.container').length).toEqual(1)
-              expect(u.opacity($('.container'))).toEqual(1.0)
+          next =>
+            # See that we've already immediately swapped the element and ignored the duration of 200ms
+            expect(extractDone).toHaveBeenCalled()
+            expect($('.container').length).toEqual(1)
+            expect($('.container')).toHaveOpacity(1.0)
 
         it 'marks the old fragment as .up-destroying during the transition', asyncSpec (next) ->
-          affix('.element').text('version 1')
+          $fixture('.element').text('version 1')
           up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 200)
 
           next =>
@@ -1815,36 +1819,25 @@ describe 'up.dom', ->
             expect($version2).toHaveLength(1)
             expect($version2).not.toHaveClass('up-destroying')
 
-        it 'emits an up:fragment:destroy event while the old element is still in the DOM', (done) ->
-          $element = affix('.element.v1').text('v1')
-          expect($element).toBeAttached()
-
-          listener = jasmine.createSpy('event listener')
-          $element.on 'up:fragment:destroy', -> listener(u.isDetached($element))
-
-          extractDone = up.extract('.element', '<div class="element v2">v2</div>', transition: 'cross-fade', duration: 50)
-
-          extractDone.then ->
-            expect(listener).toHaveBeenCalledWith(false)
-            done()
-
+        # extract with { transition } option
         it 'emits an up:fragment:destroyed event on the former parent element after the element has been removed from the DOM', (done) ->
-          $parent = affix('.parent')
+          $parent = $fixture('.parent')
           $element = $parent.affix('.element.v1').text('v1')
           expect($element).toBeAttached()
 
-          listener = jasmine.createSpy('event listener')
-          $parent.on 'up:fragment:destroyed', -> listener(u.isDetached($element))
+          spy = jasmine.createSpy('event listener')
+          $parent[0].addEventListener 'up:fragment:destroyed', (event) ->
+            spy(event.target, event.fragment, up.specUtil.isDetached($element))
 
           extractDone = up.extract('.element', '<div class="element v2">v2</div>', transition: 'cross-fade', duration: 50)
 
           extractDone.then ->
-            expect(listener).toHaveBeenCalledWith(true)
+            expect(spy).toHaveBeenCalledWith($parent[0], $element[0], true)
             done()
 
 
         it 'cancels an existing transition by instantly jumping to the last frame', asyncSpec (next) ->
-          affix('.element.v1').text('version 1')
+          $fixture('.element.v1').text('version 1')
 
           up.extract('.element', '<div class="element v2">version 2</div>', transition: 'cross-fade', duration: 200)
 
@@ -1874,24 +1867,24 @@ describe 'up.dom', ->
 
 
         it 'delays the resolution of the returned promise until the transition is over', (done) ->
-          affix('.element').text('version 1')
+          $fixture('.element').text('version 1')
           resolution = jasmine.createSpy()
           promise = up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 60)
           promise.then(resolution)
           expect(resolution).not.toHaveBeenCalled()
 
-          u.setTimer 20, ->
+          u.timer 20, ->
             expect(resolution).not.toHaveBeenCalled()
 
-          u.setTimer 200, ->
+          u.timer 200, ->
             expect(resolution).toHaveBeenCalled()
             done()
 
         it 'attaches the new element to the DOM before compilers are called, so they can see their parents and trigger bubbling events', asyncSpec (next)->
-          $parent = affix('.parent')
+          $parent = $fixture('.parent')
           $element = $parent.affix('.element').text('old text')
           spy = jasmine.createSpy('parent spy')
-          up.compiler '.element', ($element) -> spy($element.text(), $element.parent())
+          up.$compiler '.element', ($element) -> spy($element.text(), $element.parent())
           up.extract '.element', '<div class="element">new text</div>', transition: 'cross-fade', duration: 50
 
           next =>
@@ -1901,13 +1894,11 @@ describe 'up.dom', ->
         describe 'when up.morph() is called from a transition function', ->
 
           it "does not emit multiple replacement events (bugfix)", (done) ->
-            $element = affix('.element').text('old content')
+            $element = $fixture('.element').text('old content')
 
-            transition = ($old, $new, options) ->
-              up.morph($old, $new, 'cross-fade', options)
+            transition = (oldElement, newElement, options) ->
+              up.morph(oldElement, newElement, 'cross-fade', options)
 
-            destroyListener = jasmine.createSpy('listener to up:fragment:destroy')
-            up.on 'up:fragment:destroy', destroyListener
             destroyedListener = jasmine.createSpy('listener to up:fragment:destroyed')
             up.on 'up:fragment:destroyed', destroyedListener
             insertedListener = jasmine.createSpy('listener to up:fragment:inserted')
@@ -1916,19 +1907,18 @@ describe 'up.dom', ->
             extractDone = up.extract('.element', '<div class="element">new content</div>', transition: transition, duration: 50, easing: 'linear')
 
             extractDone.then ->
-              expect(destroyListener.calls.count()).toBe(1)
               expect(destroyedListener.calls.count()).toBe(1)
               expect(insertedListener.calls.count()).toBe(1)
               done()
 
           it "does not compile the element multiple times (bugfix)", (done) ->
-            $element = affix('.element').text('old content')
+            $element = $fixture('.element').text('old content')
 
-            transition = ($old, $new, options) ->
-              up.morph($old, $new, 'cross-fade', options)
+            transition = (oldElement, newElement, options) ->
+              up.morph(oldElement, newElement, 'cross-fade', options)
 
             compiler = jasmine.createSpy('compiler')
-            up.compiler '.element', compiler
+            up.$compiler '.element', compiler
 
             extractDone = up.extract('.element', '<div class="element">new content</div>', transition: transition, duration: 50, easing: 'linear')
 
@@ -1937,13 +1927,13 @@ describe 'up.dom', ->
               done()
 
           it "does not call destructors multiple times (bugfix)", (done) ->
-            $element = affix('.element').text('old content')
+            $element = $fixture('.element').text('old content')
 
-            transition = ($old, $new, options) ->
-              up.morph($old, $new, 'cross-fade', options)
+            transition = (oldElement, newElement, options) ->
+              up.morph(oldElement, newElement, 'cross-fade', options)
 
             destructor = jasmine.createSpy('destructor')
-            up.compiler '.element', (element) ->
+            up.$compiler '.element', (element) ->
               return destructor
 
             up.hello($element)
@@ -1961,7 +1951,7 @@ describe 'up.dom', ->
             up.motion.config.enabled = false
 
           it 'immediately swaps the old and new elements without creating unnecessary ghosts', asyncSpec (next) ->
-            affix('.element').text('version 1')
+            $fixture('.element').text('version 1')
             up.extract('.element', '<div class="element">version 2</div>', transition: 'cross-fade', duration: 200)
             next =>
               expect($('.element')).toHaveText('version 2')
@@ -1969,7 +1959,7 @@ describe 'up.dom', ->
 
           it "replaces the elements directly, since first inserting and then removing would shift scroll positions", asyncSpec (next) ->
             swapDirectlySpy = up.motion.knife.mock('swapElementsDirectly')
-            affix('.element').text('version 1')
+            $fixture('.element').text('version 1')
             up.extract('.element', '<div class="element">version 2</div>', transition: false)
 
             next =>
@@ -1989,7 +1979,7 @@ describe 'up.dom', ->
           $('.before, .middle, .after').remove()
 
         it 'keeps an [up-keep] element, but does replace other elements around it', asyncSpec (next) ->
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.affix('.before').text('old-before')
           $container.affix('.middle[up-keep]').text('old-middle')
           $container.affix('.after').text('old-after')
@@ -2008,7 +1998,7 @@ describe 'up.dom', ->
             expect($('.after')).toHaveText('new-after')
 
         it 'keeps an [up-keep] element, but does replace text nodes around it', asyncSpec (next) ->
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             old-before
             <div class='element' up-keep>old-inside</div>
@@ -2027,7 +2017,7 @@ describe 'up.dom', ->
             expect(squish($('.container').text())).toEqual('new-before old-inside new-after')
 
         it 'updates an [up-keep] element with { keep: false } option', asyncSpec (next) ->
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             old-before
             <div class='element' up-keep>old-inside</div>
@@ -2049,7 +2039,7 @@ describe 'up.dom', ->
         describe 'if an [up-keep] element is itself a direct replacement target', ->
 
           it "keeps that element", asyncSpec (next) ->
-            affix('.keeper[up-keep]').text('old-inside')
+            $fixture('.keeper[up-keep]').text('old-inside')
             up.extract '.keeper', "<div class='keeper' up-keep>new-inside</div>"
 
             next =>
@@ -2059,23 +2049,27 @@ describe 'up.dom', ->
             insertedListener = jasmine.createSpy('subscriber to up:fragment:inserted')
             keptListener = jasmine.createSpy('subscriber to up:fragment:kept')
             up.on('up:fragment:kept', keptListener)
-            up.on 'up:fragment:inserted', insertedListener
-            $keeper = affix('.keeper[up-keep]').text('old-inside')
-            up.extract '.keeper', "<div class='keeper' up-keep>new-inside</div>"
+            up.on('up:fragment:inserted', insertedListener)
+            $keeper = $fixture('.keeper[up-keep]').text('old-inside')
+            up.extract '.keeper', "<div class='keeper new' up-keep>new-inside</div>"
 
             next =>
               expect(insertedListener).not.toHaveBeenCalled()
-              expect(keptListener).toHaveBeenCalledWith(jasmine.anything(), $('.keeper'), jasmine.anything())
+              expect(keptListener).toHaveBeenCalledWith(
+                jasmine.objectContaining(newFragment: jasmine.objectContaining(className: 'keeper new')),
+                $keeper[0],
+                jasmine.anything()
+              )
 
         it "removes an [up-keep] element if no matching element is found in the response", asyncSpec (next) ->
           barCompiler = jasmine.createSpy()
           barDestructor = jasmine.createSpy()
-          up.compiler '.bar', ($bar) ->
+          up.$compiler '.bar', ($bar) ->
             text = $bar.text()
             barCompiler(text)
             return -> barDestructor(text)
 
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             <div class='foo'>old-foo</div>
             <div class='bar' up-keep>old-bar</div>
@@ -2092,8 +2086,8 @@ describe 'up.dom', ->
             """
 
           next =>
-            expect($('.container .foo')).toExist()
-            expect($('.container .bar')).not.toExist()
+            expect($('.container .foo')).toBeAttached()
+            expect($('.container .bar')).not.toBeAttached()
 
             expect(barCompiler.calls.allArgs()).toEqual [['old-bar']]
             expect(barDestructor.calls.allArgs()).toEqual [['old-bar']]
@@ -2101,12 +2095,12 @@ describe 'up.dom', ->
         it "updates an element if a matching element is found in the response, but that other element is no longer [up-keep]", asyncSpec (next) ->
           barCompiler = jasmine.createSpy()
           barDestructor = jasmine.createSpy()
-          up.compiler '.bar', ($bar) ->
+          up.$compiler '.bar', ($bar) ->
             text = $bar.text()
             barCompiler(text)
             return -> barDestructor(text)
 
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             <div class='foo'>old-foo</div>
             <div class='bar' up-keep>old-bar</div>
@@ -2131,7 +2125,7 @@ describe 'up.dom', ->
             expect(barDestructor.calls.allArgs()).toEqual [['old-bar']]
 
         it 'moves a kept element to the ancestry position of the matching element in the response', asyncSpec (next) ->
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             <div class="parent1">
               <div class="keeper" up-keep>old-inside</div>
@@ -2154,7 +2148,7 @@ describe 'up.dom', ->
             expect($('.keeper').parent()).toEqual($('.parent2'))
 
         it 'lets developers choose a selector to match against as the value of the up-keep attribute', asyncSpec (next) ->
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             <div class="keeper" up-keep=".stayer"></div>
             """
@@ -2165,12 +2159,12 @@ describe 'up.dom', ->
             """
 
           next =>
-            expect('.keeper').toExist()
+            expect('.keeper').toBeAttached()
 
         it 'does not compile a kept element a second time', asyncSpec (next) ->
           compiler = jasmine.createSpy('compiler')
-          up.compiler('.keeper', compiler)
-          $container = affix('.container')
+          up.$compiler('.keeper', compiler)
+          $container = $fixture('.container')
           $container.html """
             <div class="keeper" up-keep>old-text</div>
             """
@@ -2186,14 +2180,14 @@ describe 'up.dom', ->
 
           next =>
             expect(compiler.calls.count()).toEqual(1)
-            expect('.keeper').toExist()
+            expect('.keeper').toBeAttached()
 
         it 'does not lose jQuery event handlers on a kept element (bugfix)', asyncSpec (next) ->
           handler = jasmine.createSpy('event handler')
-          up.compiler '.keeper', ($keeper) ->
+          up.$compiler '.keeper', ($keeper) ->
             $keeper.on 'click', handler
 
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             <div class="keeper" up-keep>old-text</div>
             """
@@ -2216,10 +2210,10 @@ describe 'up.dom', ->
 
         it 'does not call destructors on a kept alement', asyncSpec (next) ->
           destructor = jasmine.createSpy('destructor')
-          up.compiler '.keeper', ($keeper) ->
+          up.$compiler '.keeper', ($keeper) ->
             return destructor
 
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             <div class="keeper" up-keep>old-text</div>
             """
@@ -2239,10 +2233,10 @@ describe 'up.dom', ->
         it 'calls destructors when a kept element is eventually removed from the DOM', asyncSpec (next) ->
           handler = jasmine.createSpy('event handler')
           destructor = jasmine.createSpy('destructor')
-          up.compiler '.keeper', ($keeper) ->
+          up.$compiler '.keeper', ($keeper) ->
             return destructor
 
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             <div class="keeper" up-keep>old-text</div>
             """
@@ -2259,29 +2253,43 @@ describe 'up.dom', ->
             expect($keeper).toHaveText('new-text')
             expect(destructor).toHaveBeenCalled()
 
+        it 'lets listeners inspect a new element before discarding through properties on an up:fragment:keep event', asyncSpec (next) ->
+          $keeper = $fixture('.keeper[up-keep]').text('old-inside')
+          listener = jasmine.createSpy('event listener')
+          $keeper[0].addEventListener('up:fragment:keep', listener)
+          up.extract '.keeper', "<div class='keeper new' up-keep up-data='{ \"key\": \"new-value\" }'>new-inside</div>"
+          next =>
+            expect(listener).toHaveBeenCalledWith(
+              jasmine.objectContaining(
+                newFragment: jasmine.objectContaining(className: 'keeper new')
+                newData: { key: 'new-value' },
+                target: $keeper[0]
+              )
+            )
+
         it 'lets listeners cancel the keeping by preventing default on an up:fragment:keep event', asyncSpec (next) ->
-          $keeper = affix('.keeper[up-keep]').text('old-inside')
+          $keeper = $fixture('.keeper[up-keep]').text('old-inside')
           $keeper.on 'up:fragment:keep', (event) -> event.preventDefault()
           up.extract '.keeper', "<div class='keeper' up-keep>new-inside</div>"
           next => expect($('.keeper')).toHaveText('new-inside')
 
         it 'lets listeners prevent up:fragment:keep event if the element was kept before (bugfix)', asyncSpec (next) ->
-          $keeper = affix('.keeper[up-keep]').text('version 1')
-          $keeper.on 'up:fragment:keep', (event) ->
-            event.preventDefault() if event.$newElement.text() == 'version 3'
+          $keeper = $fixture('.keeper[up-keep]').text('version 1')
+          $keeper[0].addEventListener 'up:fragment:keep', (event) ->
+            event.preventDefault() if event.newFragment.textContent.trim() == 'version 3'
 
           next => up.extract '.keeper', "<div class='keeper' up-keep>version 2</div>"
           next => expect($('.keeper')).toHaveText('version 1')
           next => up.extract '.keeper', "<div class='keeper' up-keep>version 3</div>"
           next => expect($('.keeper')).toHaveText('version 3')
 
-        it 'emits an up:fragment:kept event on a kept element and up:fragment:inserted on an updated parent', asyncSpec (next) ->
+        it 'emits an up:fragment:kept event on a kept element and up:fragment:inserted on the targeted parent parent', asyncSpec (next) ->
           insertedListener = jasmine.createSpy()
           up.on('up:fragment:inserted', insertedListener)
           keptListener = jasmine.createSpy()
           up.on('up:fragment:kept', keptListener)
 
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             <div class="keeper" up-keep></div>
             """
@@ -2293,13 +2301,13 @@ describe 'up.dom', ->
             """
 
           next =>
-            expect(insertedListener).toHaveBeenCalledWith(jasmine.anything(), $('.container'), jasmine.anything())
-            expect(keptListener).toHaveBeenCalledWith(jasmine.anything(), $('.container .keeper'), jasmine.anything())
+            expect(insertedListener).toHaveBeenCalledWith(jasmine.anything(), $('.container')[0], jasmine.anything())
+            expect(keptListener).toHaveBeenCalledWith(jasmine.anything(), $('.container .keeper')[0], jasmine.anything())
 
         it 'emits an up:fragment:kept event on a kept element with a newData property corresponding to the up-data attribute value of the discarded element', asyncSpec (next) ->
           keptListener = jasmine.createSpy()
-          up.on 'up:fragment:kept', (event) -> keptListener(event.$element, event.newData)
-          $container = affix('.container')
+          up.on 'up:fragment:kept', (event) -> keptListener(event.target, event.newData)
+          $container = $fixture('.container')
           $keeper = $container.affix('.keeper[up-keep]').text('old-inside')
 
           up.extract '.container', """
@@ -2310,12 +2318,12 @@ describe 'up.dom', ->
 
           next =>
             expect($('.keeper')).toHaveText('old-inside')
-            expect(keptListener).toHaveBeenCalledWith($keeper, { 'foo': 'bar' })
+            expect(keptListener).toHaveBeenCalledWith($keeper[0], { 'foo': 'bar' })
 
         it 'emits an up:fragment:kept with { newData: {} } if the discarded element had no up-data value', asyncSpec (next) ->
           keptListener = jasmine.createSpy()
           up.on('up:fragment:kept', keptListener)
-          $container = affix('.container')
+          $container = $fixture('.container')
           $keeper = $container.affix('.keeper[up-keep]').text('old-inside')
           up.extract '.keeper', """
             <div class='container'>
@@ -2329,8 +2337,8 @@ describe 'up.dom', ->
 
         it 'reuses the same element and emits up:fragment:kept during multiple extractions', asyncSpec (next) ->
           keptListener = jasmine.createSpy()
-          up.on 'up:fragment:kept', (event) -> keptListener(event.$element, event.newData)
-          $container = affix('.container')
+          up.on 'up:fragment:kept', (event) -> keptListener(event.target, event.newData)
+          $container = $fixture('.container')
           $keeper = $container.affix('.keeper[up-keep]').text('old-inside')
 
           next =>
@@ -2349,17 +2357,17 @@ describe 'up.dom', ->
           next =>
             $keeper = $('.keeper')
             expect($keeper).toHaveText('old-inside')
-            expect(keptListener).toHaveBeenCalledWith($keeper, { key: 'value1' })
-            expect(keptListener).toHaveBeenCalledWith($keeper, { key: 'value2' })
+            expect(keptListener).toHaveBeenCalledWith($keeper[0], { key: 'value1' })
+            expect(keptListener).toHaveBeenCalledWith($keeper[0], { key: 'value2' })
 
         it "doesn't let the discarded element appear in a transition", (done) ->
           oldTextDuringTransition = undefined
           newTextDuringTransition = undefined
-          transition = ($old, $new) ->
-            oldTextDuringTransition = squish($old.text())
-            newTextDuringTransition = squish($new.text())
+          transition = (oldElement, newElement) ->
+            oldTextDuringTransition = squish(oldElement.innerText)
+            newTextDuringTransition = squish(newElement.innerText)
             Promise.resolve()
-          $container = affix('.container')
+          $container = $fixture('.container')
           $container.html """
             <div class='foo'>old-foo</div>
             <div class='bar' up-keep>old-bar</div>
@@ -2381,13 +2389,13 @@ describe 'up.dom', ->
     describe 'up.destroy', ->
 
       it 'removes the element with the given selector', (done) ->
-        affix('.element')
+        $fixture('.element')
         up.destroy('.element').then ->
-          expect($('.element')).not.toExist()
+          expect($('.element')).not.toBeAttached()
           done()
 
       it 'runs an animation before removal with { animate } option', asyncSpec (next) ->
-        $element = affix('.element')
+        $element = $fixture('.element')
         up.destroy($element, animation: 'fade-out', duration: 200, easing: 'linear')
 
         next ->
@@ -2400,18 +2408,18 @@ describe 'up.dom', ->
           expect($element).toBeDetached()
 
       it 'calls destructors for custom elements', (done) ->
-        up.compiler('.element', ($element) -> destructor)
+        up.$compiler('.element', ($element) -> destructor)
         destructor = jasmine.createSpy('destructor')
-        up.hello(affix('.element'))
+        up.hello(fixture('.element'))
         up.destroy('.element').then ->
           expect(destructor).toHaveBeenCalled()
           done()
 
       it 'marks the old element as .up-destroying before destructors', (done) ->
         destructor = jasmine.createSpy('destructor')
-        up.compiler '.container', ($element) ->
+        up.$compiler '.container', ($element) ->
           -> destructor($element.text(), $element.is('.up-destroying'))
-        $container = affix('.container').text('old text')
+        $container = $fixture('.container').text('old text')
         up.hello($container)
 
         destroyDone = up.destroy('.container')
@@ -2422,9 +2430,9 @@ describe 'up.dom', ->
 
       it 'marks the old element as .up-destroying before destructors after an { animation }', (done) ->
         destructor = jasmine.createSpy('destructor')
-        up.compiler '.container', ($element) ->
+        up.$compiler '.container', ($element) ->
           -> destructor($element.text(), $element.is('.up-destroying'))
-        $container = affix('.container').text('old text')
+        $container = $fixture('.container').text('old text')
         up.hello($container)
 
         destroyDone = up.destroy('.container', animation: 'fade-out', duration: 100)
@@ -2435,68 +2443,53 @@ describe 'up.dom', ->
 
       it 'waits until an { animation } is done before calling destructors', asyncSpec (next) ->
         destructor = jasmine.createSpy('destructor')
-        up.compiler '.container', ($element) ->
+        up.$compiler '.container', ($element) ->
           -> destructor($element.text())
-        $container = affix('.container').text('old text')
+        $container = $fixture('.container').text('old text')
         up.hello($container)
 
-        destroyDone = up.destroy('.container', animation: 'fade-out', duration: 100)
+        destroyDone = up.destroy('.container', animation: 'fade-out', duration: 200)
 
-        next.after 50, ->
+        next.after 100, ->
           expect(destructor).not.toHaveBeenCalled()
 
-        next.after (50 + (tolerance = 70)), ->
+          next.await(destroyDone)
+
+        next ->
           expect(destructor).toHaveBeenCalledWith('old text',)
 
 
       it 'allows to pass a new history entry as { history } option', (done) ->
         up.history.config.enabled = true
-        affix('.element')
+        $fixture('.element')
         up.destroy('.element', history: '/new-path').then ->
-          u.setTimer 100, ->
+          u.timer 100, ->
             expect(location.href).toMatchUrl('/new-path')
             done()
 
       it 'allows to pass a new document title as { title } option', (done) ->
         up.history.config.enabled = true
-        affix('.element')
+        $fixture('.element')
         up.destroy('.element', history: '/new-path', title: 'Title from options').then ->
           expect(document.title).toEqual('Title from options')
           done()
 
       it 'marks the element as .up-destroying while it is animating', asyncSpec (next) ->
-        $element = affix('.element')
+        $element = $fixture('.element')
         up.destroy($element, animation: 'fade-out', duration: 80, easing: 'linear')
 
         next ->
           expect($element).toHaveClass('up-destroying')
 
-      it 'emits an up:fragment:destroy event while the element is still in the DOM', asyncSpec (next) ->
-        $element = affix('.element')
-        expect($element).toBeAttached()
-
-        listener = jasmine.createSpy('event listener')
-        $element.on('up:fragment:destroy', listener)
-
-        destroyDone = up.destroy($element, animation: 'fade-out', duration: 30)
-
-        next ->
-          expect(listener).toHaveBeenCalledWith(jasmine.objectContaining($element: $element))
-          expect($element).toBeAttached()
-
-          next.await(destroyDone)
-
-        next ->
-          expect($element).toBeDetached()
-
+      # up.destroy
       it 'emits an up:fragment:destroyed event on the former parent element after the element has been removed from the DOM', asyncSpec (next) ->
-        $parent = affix('.parent')
+        $parent = $fixture('.parent')
         $element = $parent.affix('.element')
         expect($element).toBeAttached()
 
         listener = jasmine.createSpy('event listener')
 
-        $parent.on('up:fragment:destroyed', listener)
+        $parent[0].addEventListener('up:fragment:destroyed', listener)
 
         destroyDone = up.destroy($element, animation: 'fade-out', duration: 30)
 
@@ -2507,7 +2500,13 @@ describe 'up.dom', ->
           next.await(destroyDone)
 
         next ->
-          expect(listener).toHaveBeenCalledWith(jasmine.objectContaining($element: $element, $parent: $parent))
+          expect(listener).toHaveBeenCalledWith(
+            jasmine.objectContaining(
+              target: $parent[0],
+              parent: $parent[0]
+              fragment: $element[0]
+            )
+          )
           expect($element).toBeDetached()
 
     describe 'up.reload', ->
@@ -2515,7 +2514,7 @@ describe 'up.dom', ->
       describeCapability 'canPushState', ->
 
         it 'reloads the given selector from the closest known source URL', asyncSpec (next) ->
-          affix('.container[up-source="/source"] .element').find('.element').text('old text')
+          $fixture('.container[up-source="/source"] .element').find('.element').text('old text')
 
           next =>
             up.reload('.element')
@@ -2535,38 +2534,32 @@ describe 'up.dom', ->
       describeFallback 'canPushState', ->
 
         it 'makes a page load from the closest known source URL', asyncSpec (next) ->
-          affix('.container[up-source="/source"] .element').find('.element').text('old text')
+          $fixture('.container[up-source="/source"] .element').find('.element').text('old text')
           spyOn(up.browser, 'navigate')
           up.reload('.element')
 
           next =>
             expect(up.browser.navigate).toHaveBeenCalledWith('/source', jasmine.anything())
 
-    describe 'up.dom.layerOf', ->
+    describe 'up.fragment.layerOf', ->
 
       it 'returns "popup" for an element in a popup over the page', ->
-        $popup = affix('.up-popup')
+        $popup = $fixture('.up-popup')
         $element = $popup.affix('.element')
-        expect(up.dom.layerOf($element)).toEqual('popup')
+        expect(up.fragment.layerOf($element[0])).toEqual('popup')
 
       it 'returns "popup" for an element in a popup over a modal', ->
-        $modal = affix('.up-modal')
+        $modal = $fixture('.up-modal')
         $popupInModal = $modal.affix('.up-popup')
         $element = $popupInModal.affix('.element')
-        expect(up.dom.layerOf($element)).toEqual('popup')
+        expect(up.fragment.layerOf($element[0])).toEqual('popup')
 
       it 'returns "modal" for an element in a modal', ->
-        $modal = affix('.up-modal')
+        $modal = $fixture('.up-modal')
         $element = $modal.affix('.element')
-        expect(up.dom.layerOf($element)).toEqual('modal')
+        expect(up.fragment.layerOf($element[0])).toEqual('modal')
 
       it 'returns "page" for an element below a modal or popup', ->
-        $element = affix('.element')
-        expect(up.dom.layerOf($element)).toEqual('page')
-
-      it 'returns undefined for an empty jQuery collection', ->
-        expect(up.dom.layerOf($())).toBeUndefined()
-
-      it 'returns undefined for undefined', ->
-        expect(up.dom.layerOf(undefined)).toBeUndefined()
+        $element = $fixture('.element')
+        expect(up.fragment.layerOf($element[0])).toEqual('page')