unpoly-rails 0.57.0 → 0.60.0

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

@@ -1,6 +1,7 @@
-describe 'up.feedback', ->
+u = up.util
+$ = jQuery
 
-  u = up.util
+describe 'up.feedback', ->
 
   beforeEach ->
     up.history.config.enabled = true
@@ -15,7 +16,7 @@ describe 'up.feedback', ->
 
       it 'marks a child link as .up-current if it links to the current URL', ->
         up.history.replace('/foo')
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $currentLink = $nav.affix('a[href="/foo"]')
         $otherLink = $nav.affix('a[href="/bar"]')
         up.hello($nav)
@@ -24,8 +25,8 @@ describe 'up.feedback', ->
 
       it 'marks the element as .up-current if it is also a link to the current URL', ->
         up.history.replace('/foo')
-        $currentLink = affix('a[href="/foo"][up-nav]')
-        $otherLink = affix('a[href="/bar"][up-nav]')
+        $currentLink = $fixture('a[href="/foo"][up-nav]')
+        $otherLink = $fixture('a[href="/bar"][up-nav]')
         up.hello($currentLink)
         up.hello($otherLink)
         expect($currentLink).toHaveClass('up-current')
@@ -33,16 +34,16 @@ describe 'up.feedback', ->
 
       it 'does not mark a link as .up-current if the link is outside an [up-nav]', ->
         up.history.replace('/foo')
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $currentLinkInNav = $nav.affix('a[href="/foo"]')
-        $currentLinkOutsideNav = affix('a[href="/foo"]')
+        $currentLinkOutsideNav = $fixture('a[href="/foo"]')
         up.hello($nav)
         expect($currentLinkInNav).toHaveClass('up-current')
         expect($currentLinkOutsideNav).not.toHaveClass('up-current')
 
       it 'marks a replaced child link as .up-current if it links to the current URL', asyncSpec (next) ->
         up.history.replace('/foo')
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $nav.affix('a.link[href="/bar"]').text('old link')
         up.hello($nav)
 
@@ -64,7 +65,7 @@ describe 'up.feedback', ->
 
       it 'marks any link as .up-current if its up-href attribute matches the current URL', ->
         up.history.replace('/foo')
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $currentLink = $nav.affix('span[up-href="/foo"]')
         $otherLink = $nav.affix('span[up-href="/bar"]')
         up.hello($nav)
@@ -73,21 +74,21 @@ describe 'up.feedback', ->
 
       it 'matches the current and destination URLs if they only differ by a trailing slash', ->
         up.history.replace('/foo')
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $currentLink = $nav.affix('span[up-href="/foo/"]')
         up.hello($nav)
         expect($currentLink).toHaveClass('up-current')
 
       it 'does not match the current and destination URLs if they differ in the search', ->
         up.history.replace('/foo?q=1')
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $currentLink = $nav.affix('span[up-href="/foo?q=2"]')
         up.hello($nav)
         expect($currentLink).not.toHaveClass('up-current')
 
       it 'marks any link as .up-current if any of its space-separated up-alias values matches the current URL', ->
         up.history.replace('/foo')
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $currentLink = $nav.affix('a[href="/x"][up-alias="/aaa /foo /bbb"]')
         $otherLink = $nav.affix('a[href="/y"][up-alias="/bar"]')
         up.hello($nav)
@@ -95,18 +96,18 @@ describe 'up.feedback', ->
         expect($otherLink).not.toHaveClass('up-current')
 
       it 'does not throw if the current location does not match an up-alias wildcard (bugfix)', ->
-        inserter = -> up.hello(affix('a[up-nav][up-alias="/qqqq*"]'))
+        inserter = -> up.hello(fixture('a[up-nav][up-alias="/qqqq*"]'))
         expect(inserter).not.toThrow()
 
       it 'does not highlight a link to "#" (commonly used for JS-only buttons)', ->
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $link = $nav.affix('a[href="#"]')
         up.hello($nav)
         expect($link).not.toHaveClass('up-current')
 
       it 'does not highlight links with unsafe methods', ->
         up.history.replace('/foo')
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $defaultLink = $nav.affix('a[href="/foo"]')
         $getLink = $nav.affix('a[href="/foo"][up-method="get"]')
         $putLink = $nav.affix('a[href="/foo"][up-method="put"]')
@@ -125,7 +126,7 @@ describe 'up.feedback', ->
       it 'marks URL prefixes as .up-current if an up-alias value ends in *', ->
         up.history.replace('/foo/123')
 
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $currentLink = $nav.affix('a[href="/x"][up-alias="/aaa /foo/* /bbb"]')
         $otherLink = $nav.affix('a[href="/y"][up-alias="/bar"]')
         up.hello($nav)
@@ -133,10 +134,30 @@ describe 'up.feedback', ->
         expect($currentLink).toHaveClass('up-current')
         expect($otherLink).not.toHaveClass('up-current')
 
+      it 'marks URL prefixes as .up-current if an up-alias has multiple * placeholders', ->
+        up.history.replace('/a-foo-b-bar-c')
+
+        $nav = $fixture('div[up-nav]')
+        $currentLink = $nav.affix('a[href="/x"][up-alias="*-foo-*-bar-*"]')
+        $otherLink1 = $nav.affix('a[href="/y"][up-alias="/foo-bar"]')
+        $otherLink2 = $nav.affix('a[href="/y"][up-alias="/foo-b-bar"]')
+        $otherLink3 = $nav.affix('a[href="/y"][up-alias="/a-foo-b-bar"]')
+        $otherLink4 = $nav.affix('a[href="/y"][up-alias="/foo-b-bar-c"]')
+        $otherLink5 = $nav.affix('a[href="/y"][up-alias="/a-foo-b-bar-c-d"]')
+        up.hello($nav)
+
+        expect($currentLink).toHaveClass('up-current')
+        expect($otherLink1).not.toHaveClass('up-current')
+        expect($otherLink2).not.toHaveClass('up-current')
+        expect($otherLink3).not.toHaveClass('up-current')
+        expect($otherLink4).not.toHaveClass('up-current')
+        expect($otherLink5).not.toHaveClass('up-current')
+
+
       it 'allows to configure a custom "current" class in addition to .up-current', ->
         up.feedback.config.currentClasses.push('highlight')
         up.history.replace('/foo')
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $currentLink = $nav.affix('a[href="/foo"]')
         up.hello($nav)
 
@@ -147,7 +168,7 @@ describe 'up.feedback', ->
         up.feedback.config.currentClasses.push('highlight1')
         up.feedback.config.currentClasses.push('highlight2')
         up.history.replace('/foo')
-        $nav = affix('div[up-nav]')
+        $nav = $fixture('div[up-nav]')
         $currentLink = $nav.affix('a[href="/foo"]')
         up.hello($nav)
 
@@ -158,7 +179,7 @@ describe 'up.feedback', ->
       it 'allows to configure additional nav selectors', ->
         up.history.replace('/foo')
         up.feedback.config.navs.push('.navi')
-        $nav = affix('div.navi')
+        $nav = $fixture('div.navi')
         $currentLink = $nav.affix('a[href="/foo"]')
         $otherLink = $nav.affix('a[href="/bar"]')
         up.hello($nav)
@@ -170,11 +191,11 @@ describe 'up.feedback', ->
         describe 'updating .up-current marks wen the URL changes', ->
 
           it 'marks a link as .up-current if it links to the current URL, but is missing a trailing slash', asyncSpec (next) ->
-            $nav = affix('div[up-nav]')
+            $nav = $fixture('div[up-nav]')
             $link = $nav.affix('a[href="/foo"][up-target=".main"]')
             up.hello($nav)
 
-            affix('.main')
+            fixture('.main')
             Trigger.clickSequence($link)
 
             next =>
@@ -186,11 +207,11 @@ describe 'up.feedback', ->
               expect($link).toHaveClass('up-current')
 
           it 'marks a link as .up-current if it links to the current URL, but has an extra trailing slash', asyncSpec (next) ->
-            $nav = affix('div[up-nav]')
+            $nav = $fixture('div[up-nav]')
             $link = $nav.affix('a[href="/foo/"][up-target=".main"]')
             up.hello($nav)
 
-            affix('.main')
+            fixture('.main')
             Trigger.clickSequence($link)
 
             next =>
@@ -204,7 +225,7 @@ describe 'up.feedback', ->
           it 'marks a link as .up-current if it links to an URL currently shown either within or below the modal', asyncSpec (next) ->
             up.history.replace('/foo')
 
-            $nav = affix('div[up-nav]')
+            $nav = $fixture('div[up-nav]')
             $backgroundLink = $nav.affix('a[href="/foo"]')
             $modalLink = $nav.affix('a[href="/bar"][up-modal=".main"]')
             $unrelatedLink = $nav.affix('a[href="/baz"]')
@@ -233,7 +254,7 @@ describe 'up.feedback', ->
             # but we still want to cause their URL to mark links as current.
             up.popup.config.history = false
 
-            $nav = affix('div[up-nav]')
+            $nav = $fixture('div[up-nav]')
             $backgroundLink = $nav.affix('a[href="/foo"]')
             $popupLink = $nav.affix('a[href="/bar"][up-popup=".main"]')
             $unrelatedLink = $nav.affix('a[href="/baz"]')
@@ -263,7 +284,7 @@ describe 'up.feedback', ->
               expect($unrelatedLink).not.toHaveClass('up-current')
 
           it "respects links that are added to an existing [up-nav] by a fragment update", asyncSpec (next) ->
-            $nav = affix('.nav[up-nav]')
+            $nav = $fixture('.nav[up-nav]')
             $link = $nav.affix('a[href="/foo"][up-target=".main"]')
             $more = $nav.affix('.more')
             up.hello($nav)
@@ -272,7 +293,7 @@ describe 'up.feedback', ->
 
             next =>
               $moreLink = $('.more').find('a')
-              expect($moreLink).toExist()
+              expect($moreLink).toBeAttached()
               expect($moreLink).toHaveClass('up-current')
 
 
@@ -281,8 +302,8 @@ describe 'up.feedback', ->
       describeCapability 'canPushState', ->
 
         it 'marks clicked links as .up-active until the request finishes', asyncSpec (next) ->
-          $link = affix('a[href="/foo"][up-target=".main"]')
-          affix('.main')
+          $link = $fixture('a[href="/foo"][up-target=".main"]')
+          fixture('.main')
           Trigger.clickSequence($link)
 
           next =>
@@ -293,8 +314,8 @@ describe 'up.feedback', ->
             expect($link).not.toHaveClass('up-active')
 
         it 'does not mark a link as .up-active while it is preloading', asyncSpec (next) ->
-          $link = affix('a[href="/foo"][up-target=".main"]')
-          affix('.main')
+          $link = $fixture('a[href="/foo"][up-target=".main"]')
+          fixture('.main')
 
           up.proxy.preload($link)
 
@@ -303,8 +324,8 @@ describe 'up.feedback', ->
             expect($link).not.toHaveClass('up-active')
 
         it 'marks links with [up-instant] on mousedown as .up-active until the request finishes', asyncSpec (next) ->
-          $link = affix('a[href="/foo"][up-instant][up-target=".main"]')
-          affix('.main')
+          $link = $fixture('a[href="/foo"][up-instant][up-target=".main"]')
+          fixture('.main')
           Trigger.mousedown($link)
 
           next => expect($link).toHaveClass('up-active')
@@ -312,10 +333,10 @@ describe 'up.feedback', ->
           next => expect($link).not.toHaveClass('up-active')
 
         it 'prefers to mark an enclosing [up-expand] click area', asyncSpec (next) ->
-          $area = affix('div[up-expand] a[href="/foo"][up-target=".main"]')
+          $area = $fixture('div[up-expand] a[href="/foo"][up-target=".main"]')
           up.hello($area)
           $link = $area.find('a')
-          affix('.main')
+          fixture('.main')
           Trigger.clickSequence($link)
 
           next =>
@@ -327,8 +348,8 @@ describe 'up.feedback', ->
             expect($area).not.toHaveClass('up-active')
 
         it 'marks clicked modal openers as .up-active while the modal is loading', asyncSpec (next) ->
-          $link = affix('a[href="/foo"][up-modal=".main"]')
-          affix('.main')
+          $link = $fixture('a[href="/foo"][up-modal=".main"]')
+          fixture('.main')
           Trigger.clickSequence($link)
 
           next => expect($link).toHaveClass('up-active')
@@ -336,7 +357,7 @@ describe 'up.feedback', ->
           next => expect($link).not.toHaveClass('up-active')
 
         it 'removes .up-active from a clicked modal opener if the target is already preloaded (bugfix)', asyncSpec (next) ->
-          $link = affix('a[href="/foo"][up-modal=".main"]')
+          $link = $fixture('a[href="/foo"][up-modal=".main"]')
           up.proxy.preload($link)
 
           next => @respondWith('<div class="main">new-text</div>')
@@ -346,8 +367,8 @@ describe 'up.feedback', ->
             expect($link).not.toHaveClass('up-active')
 
         it 'removes .up-active from a clicked link if the target is already preloaded (bugfix)', asyncSpec (next) ->
-          $link = affix('a[href="/foo"][up-target=".main"]')
-          affix('.main')
+          $link = $fixture('a[href="/foo"][up-target=".main"]')
+          fixture('.main')
           up.proxy.preload($link)
 
           next => @respondWith('<div class="main">new-text</div>')
@@ -357,15 +378,15 @@ describe 'up.feedback', ->
             expect($link).not.toHaveClass('up-active')
 
         it 'removes .up-active from a clicked link if the request fails (bugfix)', asyncSpec (next) ->
-          $link = affix('a[href="/foo"][up-target=".main"]')
-          affix('.main')
+          $link = $fixture('a[href="/foo"][up-target=".main"]')
+          fixture('.main')
           Trigger.clickSequence($link)
 
           next =>
             expect($link).toHaveClass('up-active')
-            @respondWith
-              responseText: '<div class="main">failed</div>'
-              status: 400
-
-          next =>
-            expect($link).not.toHaveClass('up-active')
+#            @respondWith
+#              responseText: '<div class="main">failed</div>'
+#              status: 400
+#
+#          next =>
+#            expect($link).not.toHaveClass('up-active')

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

@@ -1,6 +1,8 @@
-describe 'up.form', ->
+u = up.util
+e = up.element
+$ = jQuery
 
-  u = up.util
+describe 'up.form', ->
 
   describe 'JavaScript functions', ->
 
@@ -20,29 +22,29 @@ describe 'up.form', ->
           describe "when the input receives a #{eventName} event", ->
 
             it "runs the callback if the value changed", asyncSpec (next) ->
-              $input = affix('input[value="old-value"]')
+              $input = $fixture('input[name="input-name"][value="old-value"]')
               callback = jasmine.createSpy('change callback')
               up.observe($input, callback)
               $input.val('new-value')
-              u.times 2, -> $input.trigger(eventName)
+              u.times 2, -> Trigger[eventName]($input)
               next =>
-                expect(callback).toHaveBeenCalledWith('new-value', $input)
+                expect(callback).toHaveBeenCalledWith('new-value', 'input-name')
                 expect(callback.calls.count()).toEqual(1)
 
             it "does not run the callback if the value didn't change", asyncSpec (next) ->
-              $input = affix('input[value="old-value"]')
+              $input = $fixture('input[name="input-name"][value="old-value"]')
               callback = jasmine.createSpy('change callback')
               up.observe($input, callback)
-              $input.trigger(eventName)
+              Trigger[eventName]($input)
               next =>
                 expect(callback).not.toHaveBeenCalled()
 
             it 'debounces the callback when the { delay } option is given', asyncSpec (next) ->
-              $input = affix('input[value="old-value"]')
+              $input = $fixture('input[name="input-name"][value="old-value"]')
               callback = jasmine.createSpy('change callback')
               up.observe($input, { delay: 200 }, callback)
               $input.val('new-value-1')
-              $input.trigger(eventName)
+              Trigger[eventName]($input)
 
               next.after 100, ->
                 # 100 ms after change 1: We're still waiting for the 200ms delay to expire
@@ -53,13 +55,13 @@ describe 'up.form', ->
                 expect(callback.calls.count()).toEqual(1)
                 expect(callback.calls.mostRecent().args[0]).toEqual('new-value-1')
                 $input.val('new-value-2')
-                $input.trigger(eventName)
+                Trigger[eventName]($input)
 
               next.after 80, ->
                 # 80 ms after change 2: We change again, resetting the delay
                 expect(callback.calls.count()).toEqual(1)
                 $input.val('new-value-3')
-                $input.trigger(eventName)
+                Trigger[eventName]($input)
 
               next.after 170, ->
                 # 250 ms after change 2, which was superseded by change 3
@@ -73,20 +75,20 @@ describe 'up.form', ->
                 expect(callback.calls.mostRecent().args[0]).toEqual('new-value-3')
 
             it 'delays a callback if a previous async callback is taking long to execute', asyncSpec (next) ->
-              $input = affix('input[value="old-value"]')
+              $input = $fixture('input[name="input-name"][value="old-value"]')
               callbackCount = 0
               callback = ->
                 callbackCount += 1
-                return u.promiseTimer(100)
+                return up.specUtil.promiseTimer(100)
               up.observe($input, { delay: 1 }, callback)
               $input.val('new-value-1')
-              $input.trigger(eventName)
+              Trigger[eventName]($input)
 
               next.after 30, ->
                 # Callback has been called and takes 100 ms to complete
                 expect(callbackCount).toEqual(1)
                 $input.val('new-value-2')
-                $input.trigger(eventName)
+                Trigger[eventName]($input)
 
               next.after 30, ->
                 # Second callback is triggerd, but waits for first callback to complete
@@ -97,27 +99,27 @@ describe 'up.form', ->
                 expect(callbackCount).toEqual(2)
 
             it 'only runs the last callback when a previous long-running callback has been delaying multiple callbacks', asyncSpec (next) ->
-              $input = affix('input[value="old-value"]')
+              $input = $fixture('input[name="input-name"][value="old-value"]')
 
               callbackArgs = []
               callback = (value, field) ->
                 callbackArgs.push(value)
-                return u.promiseTimer(100)
+                return up.specUtil.promiseTimer(100)
 
               up.observe($input, { delay: 1 }, callback)
               $input.val('new-value-1')
-              $input.trigger(eventName)
+              Trigger[eventName]($input)
 
               next.after 10, ->
                 # Callback has been called and takes 100 ms to complete
                 expect(callbackArgs).toEqual ['new-value-1']
                 $input.val('new-value-2')
-                $input.trigger(eventName)
+                Trigger[eventName]($input)
 
               next.after 10, ->
                 expect(callbackArgs).toEqual ['new-value-1']
                 $input.val('new-value-3')
-                $input.trigger(eventName)
+                Trigger[eventName]($input)
 
               next.after 100, ->
                 expect(callbackArgs).toEqual ['new-value-1', 'new-value-3']
@@ -125,8 +127,8 @@ describe 'up.form', ->
         describe 'when the first argument is a checkbox', ->
 
           it 'runs the callback when the checkbox changes its checked state', asyncSpec (next) ->
-            $form = affix('form')
-            $checkbox = $form.affix('input[type="checkbox"][value="checkbox-value"]')
+            $form = $fixture('form')
+            $checkbox = $form.affix('input[name="input-name"][type="checkbox"][value="checkbox-value"]')
             callback = jasmine.createSpy('change callback')
             up.observe($checkbox, callback)
             expect($checkbox.is(':checked')).toBe(false)
@@ -142,8 +144,8 @@ describe 'up.form', ->
               expect(callback.calls.count()).toEqual(2)
 
           it 'runs the callback when the checkbox is toggled by clicking its label', asyncSpec (next) ->
-            $form = affix('form')
-            $checkbox = $form.affix('input#tick[type="checkbox"][value="checkbox-value"]')
+            $form = $fixture('form')
+            $checkbox = $form.affix('input#tick[name="input-name"][type="checkbox"][value="checkbox-value"]')
             $label = $form.affix('label[for="tick"]').text('tick label')
             callback = jasmine.createSpy('change callback')
             up.observe($checkbox, callback)
@@ -162,26 +164,30 @@ describe 'up.form', ->
         describe 'when the first argument is a radio button group', ->
 
           it 'runs the callback when the group changes its selection', asyncSpec (next) ->
-            $form = affix('form')
+            $form = $fixture('form')
             $radio1 = $form.affix('input[type="radio"][name="group"][value="1"]')
             $radio2 = $form.affix('input[type="radio"][name="group"][value="2"]')
             $group = $radio1.add($radio2)
             callback = jasmine.createSpy('change callback')
             up.observe($group, callback)
             expect($radio1.is(':checked')).toBe(false)
+
             Trigger.clickSequence($radio1)
 
             next =>
               expect($radio1.is(':checked')).toBe(true)
               expect(callback.calls.count()).toEqual(1)
-              Trigger.clickSequence($radio2)
+              # Trigger.clickSequence($radio2)
+              $radio1[0].checked = false
+              $radio2[0].checked = true
+              Trigger.change($radio2)
 
             next =>
               expect($radio1.is(':checked')).toBe(false)
               expect(callback.calls.count()).toEqual(2)
 
           it "runs the callbacks when a radio button is selected or deselected by clicking a label in the group", asyncSpec (next) ->
-            $form = affix('form')
+            $form = $fixture('form')
             $radio1 = $form.affix('input#radio1[type="radio"][name="group"][value="1"]')
             $radio1Label = $form.affix('label[for="radio1"]').text('label 1')
             $radio2 = $form.affix('input#radio2[type="radio"][name="group"][value="2"]')
@@ -202,7 +208,7 @@ describe 'up.form', ->
               expect(callback.calls.count()).toEqual(2)
 
           it "takes the group's initial selected value into account", asyncSpec (next) ->
-            $form = affix('form')
+            $form = $fixture('form')
             $radio1 = $form.affix('input[type="radio"][name="group"][value="1"][checked="checked"]')
             $radio2 = $form.affix('input[type="radio"][name="group"][value="2"]')
             $group = $radio1.add($radio2)
@@ -232,39 +238,74 @@ describe 'up.form', ->
           describe "when any of the form's inputs receives a #{eventName} event", ->
 
             it "runs the callback if the value changed", asyncSpec (next) ->
-              $form = affix('form')
-              $input = $form.affix('input[value="old-value"]')
+              $form = $fixture('form')
+              $input = $form.affix('input[name="input-name"][value="old-value"]')
               callback = jasmine.createSpy('change callback')
               up.observe($form, callback)
               $input.val('new-value')
-              u.times 2, -> $input.trigger(eventName)
+              u.times 2, -> Trigger[eventName]($input)
               next =>
-                expect(callback).toHaveBeenCalledWith('new-value', $input)
+                expect(callback).toHaveBeenCalledWith('new-value', 'input-name')
                 expect(callback.calls.count()).toEqual(1)
 
             it "does not run the callback if the value didn't change", asyncSpec (next) ->
-              $form = affix('form')
-              $input = $form.affix('input[value="old-value"]')
+              $form = $fixture('form')
+              $input = $form.affix('input[name="input-name"][value="old-value"]')
               callback = jasmine.createSpy('change callback')
               up.observe($form, callback)
-              $input.trigger(eventName)
+              Trigger[eventName]($input)
               next =>
                 expect(callback).not.toHaveBeenCalled()
 
   #        it 'runs the callback only once when a radio button group changes its selection', ->
-  #          $form = affix('form')
+  #          $form = $fixture('form')
   #          $radio1 = $form.affix('input[type="radio"][name="group"][value="1"][checked="checked"]')
   #          $radio2 = $form.affix('input[type="radio"][name="group"][value="2"]')
   #          callback = jasmine.createSpy('change callback')
   #          up.observe($form, callback)
   #          $radio2.get(0).click()
-  #          u.nextFrame ->
+  #          u.task ->
   #            expect(callback.calls.count()).toEqual(1)
 
+
+      describe 'with { batch: true } options', ->
+
+        it 'calls the callback once with all collected changes in a diff object', asyncSpec (next) ->
+          $form = $fixture('form')
+          $input1 = $form.affix('input[name="input1"][value="input1-a"]')
+          $input2 = $form.affix('input[name="input2"][value="input2-a"]')
+          callback = jasmine.createSpy('change callback')
+          up.observe($form, { batch: true }, callback)
+
+          next ->
+            expect(callback.calls.count()).toEqual(0)
+
+            $input1.val('input1-b')
+            Trigger.change($input1)
+            $input2.val('input2-b')
+            Trigger.change($input2)
+
+          next ->
+            expect(callback.calls.count()).toEqual(1)
+            expect(callback.calls.mostRecent().args[0]).toEqual {
+              'input1': 'input1-b'
+              'input2': 'input2-b'
+            }
+
+            $input2.val('input2-c')
+            Trigger.change($input2)
+
+          next ->
+            expect(callback.calls.count()).toEqual(2)
+            expect(callback.calls.mostRecent().args[0]).toEqual {
+              'input2': 'input2-c'
+            }
+
+
     describe 'up.submit', ->
 
       it 'emits a preventable up:form:submit event', asyncSpec (next) ->
-        $form = affix('form[action="/form-target"][up-target=".response"]')
+        $form = $fixture('form[action="/form-target"][up-target=".response"]')
 
         listener = jasmine.createSpy('submit listener').and.callFake (event) ->
           event.preventDefault()
@@ -275,8 +316,8 @@ describe 'up.form', ->
 
         next =>
           expect(listener).toHaveBeenCalled()
-          event = listener.calls.mostRecent().args[0]
-          expect(event.$element).toEqual($form)
+          element = listener.calls.mostRecent().args[1]
+          expect(element).toEqual(element)
 
           # No request should be made because we prevented the event
           expect(jasmine.Ajax.requests.count()).toEqual(0)
@@ -285,10 +326,10 @@ describe 'up.form', ->
 
         beforeEach ->
           up.history.config.enabled = true
-          @$form = affix('form[action="/form-target"][method="put"][up-target=".response"]')
+          @$form = $fixture('form[action="/form-target"][method="put"][up-target=".response"]')
           @$form.append('<input name="field1" value="value1">')
           @$form.append('<input name="field2" value="value2">')
-          affix('.response').text('old-text')
+          $fixture('.response').text('old-text')
 
         it 'submits the given form and replaces the target with the response', asyncSpec (next) ->
           up.submit(@$form)
@@ -398,10 +439,10 @@ describe 'up.form', ->
         describe 'revealing', ->
 
           it 'reaveals the target fragment if the submission succeeds', asyncSpec (next) ->
-            $form = affix('form[action="/action"][up-target=".target"]')
-            $target = affix('.target')
+            $form = $fixture('form[action="/action"][up-target=".target"]')
+            $target = $fixture('.target')
 
-            revealStub = up.layout.knife.mock('reveal')
+            revealStub = up.viewport.knife.mock('reveal')
 
             up.submit($form)
 
@@ -410,13 +451,13 @@ describe 'up.form', ->
 
             next =>
               expect(revealStub).toHaveBeenCalled()
-              expect(revealStub.calls.mostRecent().args[0]).toBeMatchedBy('.target')
+              expect(revealStub.calls.mostRecent().args[0]).toMatchSelector('.target')
 
           it 'reveals the form if the submission fails', asyncSpec (next) ->
-            $form = affix('form#foo-form[action="/action"][up-target=".target"]')
-            $target = affix('.target')
+            $form = $fixture('form#foo-form[action="/action"][up-target=".target"]')
+            $target = $fixture('.target')
 
-            revealStub = up.layout.knife.mock('reveal')
+            revealStub = up.viewport.knife.mock('reveal')
 
             up.submit($form)
 
@@ -431,17 +472,17 @@ describe 'up.form', ->
 
             next =>
               expect(revealStub).toHaveBeenCalled()
-              expect(revealStub.calls.mostRecent().args[0]).toBeMatchedBy('#foo-form')
+              expect(revealStub.calls.mostRecent().args[0]).toMatchSelector('#foo-form')
 
 
           describe 'with { reveal } option', ->
 
             it 'allows to reveal a different selector', asyncSpec (next) ->
-              $form = affix('form[action="/action"][up-target=".target"]')
-              $target = affix('.target')
-              $other = affix('.other')
+              $form = $fixture('form[action="/action"][up-target=".target"]')
+              $target = $fixture('.target')
+              $other = $fixture('.other')
 
-              revealStub = up.layout.knife.mock('reveal')
+              revealStub = up.viewport.knife.mock('reveal')
 
               up.submit($form, reveal: '.other')
 
@@ -457,14 +498,14 @@ describe 'up.form', ->
 
               next =>
                 expect(revealStub).toHaveBeenCalled()
-                expect(revealStub.calls.mostRecent().args[0]).toBeMatchedBy('.other')
+                expect(revealStub.calls.mostRecent().args[0]).toMatchSelector('.other')
 
             it 'still reveals the form for a failed submission', asyncSpec (next) ->
-              $form = affix('form#foo-form[action="/action"][up-target=".target"]')
-              $target = affix('.target')
-              $other = affix('.other')
+              $form = $fixture('form#foo-form[action="/action"][up-target=".target"]')
+              $target = $fixture('.target')
+              $other = $fixture('.other')
 
-              revealStub = up.layout.knife.mock('reveal')
+              revealStub = up.viewport.knife.mock('reveal')
 
               up.submit($form, reveal: '.other')
 
@@ -479,12 +520,12 @@ describe 'up.form', ->
 
               next =>
                 expect(revealStub).toHaveBeenCalled()
-                expect(revealStub.calls.mostRecent().args[0]).toBeMatchedBy('#foo-form')
+                expect(revealStub.calls.mostRecent().args[0]).toMatchSelector('#foo-form')
 
             it 'allows to refer to this form as "&" in the selector', asyncSpec (next) ->
-              $form = affix('form#foo-form[action="/action"][up-target="#foo-form"]')
+              $form = $fixture('form#foo-form[action="/action"][up-target="#foo-form"]')
 
-              revealStub = up.layout.knife.mock('reveal')
+              revealStub = up.viewport.knife.mock('reveal')
 
               up.submit($form, reveal: '& .form-child')
 
@@ -501,16 +542,16 @@ describe 'up.form', ->
 
               next =>
                 expect(revealStub).toHaveBeenCalled()
-                expect(revealStub.calls.mostRecent().args[0]).toEqual($('#foo-form .form-child'))
+                expect(revealStub.calls.mostRecent().args[0]).toEqual(e.first('#foo-form .form-child'))
 
           describe 'with { failReveal } option', ->
 
             it 'reveals the given selector for a failed submission', asyncSpec (next) ->
-              $form = affix('form#foo-form[action="/action"][up-target=".target"]')
-              $target = affix('.target')
-              $other = affix('.other')
+              $form = $fixture('form#foo-form[action="/action"][up-target=".target"]')
+              $target = $fixture('.target')
+              $other = $fixture('.other')
 
-              revealStub = up.layout.knife.mock('reveal')
+              revealStub = up.viewport.knife.mock('reveal')
 
               up.submit($form, reveal: '.other', failReveal: '.error')
 
@@ -525,13 +566,13 @@ describe 'up.form', ->
 
               next =>
                 expect(revealStub).toHaveBeenCalled()
-                expect(revealStub.calls.mostRecent().args[0]).toBeMatchedBy('.error')
+                expect(revealStub.calls.mostRecent().args[0]).toMatchSelector('.error')
 
             it 'allows to refer to this form as "&" in the selector', asyncSpec (next) ->
-              $form = affix('form#foo-form[action="/action"][up-target=".target"][up-fail-reveal="#foo-form .form-child"]')
-              $target = affix('.target')
+              $form = $fixture('form#foo-form[action="/action"][up-target=".target"][up-fail-reveal="#foo-form .form-child"]')
+              $target = $fixture('.target')
 
-              revealStub = up.layout.knife.mock('reveal')
+              revealStub = up.viewport.knife.mock('reveal')
 
               up.submit($form, reveal: '& .form-child')
 
@@ -550,7 +591,7 @@ describe 'up.form', ->
 
               next =>
                 expect(revealStub).toHaveBeenCalled()
-                expect(revealStub.calls.mostRecent().args[0]).toEqual($('#foo-form .form-child'))
+                expect(revealStub.calls.mostRecent().args[0]).toEqual(e.first('#foo-form .form-child'))
 
         describe 'in a form with file inputs', ->
 
@@ -567,7 +608,7 @@ describe 'up.form', ->
       describeFallback 'canPushState', ->
 
         it 'falls back to a vanilla form submission', asyncSpec (next) ->
-          $form = affix('form[action="/path/to"][method="put"][up-target=".response"]')
+          $form = $fixture('form[action="/path/to"][method="put"][up-target=".response"]')
           form = $form.get(0)
           spyOn(form, 'submit')
 
@@ -582,9 +623,9 @@ describe 'up.form', ->
       it 'submits the form with AJAX and replaces the [up-target] selector', asyncSpec (next) ->
         up.history.config.enabled = true
 
-        affix('.response').text('old text')
+        $fixture('.response').text('old text')
 
-        $form = affix('form[action="/form-target"][method="put"][up-target=".response"]')
+        $form = $fixture('form[action="/form-target"][method="put"][up-target=".response"]')
         $form.append('<input name="field1" value="value1">')
         $form.append('<input name="field2" value="value2">')
         $submitButton = $form.affix('input[type="submit"][name="submit-button"][value="submit-button-value"]')
@@ -608,7 +649,7 @@ describe 'up.form', ->
           expect('.response').toHaveText('new text')
 
       it 'allows to refer to this form as "&" in the target selector', asyncSpec (next) ->
-        $form = affix('form.my-form[action="/form-target"][up-target="&"]').text('old form text')
+        $form = $fixture('form.my-form[action="/form-target"][up-target="&"]').text('old form text')
         $submitButton = $form.affix('input[type="submit"]')
         up.hello($form)
 
@@ -629,9 +670,9 @@ describe 'up.form', ->
         it 'replaces the form instead of the [up-target] selector', asyncSpec (next) ->
           up.history.config.enabled = true
 
-          affix('.response').text('old text')
+          $fixture('.response').text('old text')
 
-          $form = affix('form.test-form[action="/form-target"][method="put"][up-target=".response"]')
+          $form = $fixture('form.test-form[action="/form-target"][method="put"][up-target=".response"]')
           $form.append('<input name="field1" value="value1">')
           $form.append('<input name="field2" value="value2">')
           $submitButton = $form.affix('input[type="submit"][name="submit-button"][value="submit-button-value"]')
@@ -662,9 +703,9 @@ describe 'up.form', ->
             expect(window).not.toHaveUnhandledRejections() if REJECTION_EVENTS_SUPPORTED
 
         it 'updates a given selector when an [up-fail-target] is given', asyncSpec (next) ->
-          $form = affix('form.my-form[action="/path"][up-target=".target"][up-fail-target=".errors"]').text('old form text')
-          $errors = affix('.target').text('old target text')
-          $errors = affix('.errors').text('old errors text')
+          $form = $fixture('form.my-form[action="/path"][up-target=".target"][up-fail-target=".errors"]').text('old form text')
+          $errors = $fixture('.target').text('old target text')
+          $errors = $fixture('.errors').text('old errors text')
 
           $submitButton = $form.affix('input[type="submit"]')
           up.hello($form)
@@ -690,8 +731,8 @@ describe 'up.form', ->
             expect('.errors').toHaveText('new errors text')
 
         it 'allows to refer to this form as "&" in the [up-fail-target] selector', asyncSpec (next) ->
-          $form = affix('form.my-form[action="/form-target"][up-target=".target"][up-fail-target="&"]').text('old form text')
-          $target = affix('.target').text('old target text')
+          $form = $fixture('form.my-form[action="/form-target"][up-target=".target"][up-fail-target="&"]').text('old form text')
+          $target = $fixture('.target').text('old target text')
 
           $submitButton = $form.affix('input[type="submit"]')
           up.hello($form)
@@ -714,7 +755,7 @@ describe 'up.form', ->
       describe 'submit buttons', ->
 
         it 'includes the clicked submit button in the params', asyncSpec (next) ->
-          $form = affix('form[action="/action"][up-target=".target"]')
+          $form = $fixture('form[action="/action"][up-target=".target"]')
           $textField = $form.affix('input[type="text"][name="text-field"][value="text-field-value"]')
           $submitButton = $form.affix('input[type="submit"][name="submit-button"][value="submit-button-value"]')
           up.hello($form)
@@ -726,7 +767,7 @@ describe 'up.form', ->
             expect(params['submit-button']).toEqual(['submit-button-value'])
 
         it 'excludes an unused submit button in the params', asyncSpec (next) ->
-          $form = affix('form[action="/action"][up-target=".target"]')
+          $form = $fixture('form[action="/action"][up-target=".target"]')
           $textField = $form.affix('input[type="text"][name="text-field"][value="text-field-value"]')
           $submitButton1 = $form.affix('input[type="submit"][name="submit-button-1"][value="submit-button-1-value"]')
           $submitButton2 = $form.affix('input[type="submit"][name="submit-button-2"][value="submit-button-2-value"]')
@@ -740,12 +781,13 @@ describe 'up.form', ->
             expect(params['submit-button-2']).toEqual(['submit-button-2-value'])
 
         it 'includes the first submit button if the form was submitted with enter', asyncSpec (next) ->
-          $form = affix('form[action="/action"][up-target=".target"]')
+          $form = $fixture('form[action="/action"][up-target=".target"]')
           $textField = $form.affix('input[type="text"][name="text-field"][value="text-field-value"]')
           $submitButton1 = $form.affix('input[type="submit"][name="submit-button-1"][value="submit-button-1-value"]')
           $submitButton2 = $form.affix('input[type="submit"][name="submit-button-2"][value="submit-button-2-value"]')
           up.hello($form)
-          $form.submit() # sorry
+
+          Trigger.submit($form) # sorry
 
           next =>
             params = @lastRequest().data()
@@ -754,10 +796,11 @@ describe 'up.form', ->
             expect(params['submit-button-2']).toBeUndefined()
 
         it 'does not explode if the form has no submit buttons', asyncSpec (next) ->
-          $form = affix('form[action="/action"][up-target=".target"]')
+          $form = $fixture('form[action="/action"][up-target=".target"]')
           $textField = $form.affix('input[type="text"][name="text-field"][value="text-field-value"]')
           up.hello($form)
-          $form.submit() # sorry
+
+          Trigger.submit($form) # sorry
 
           next =>
             params = @lastRequest().data()
@@ -767,52 +810,36 @@ describe 'up.form', ->
     describe 'input[up-autosubmit]', ->
 
       it 'submits the form when a change is observed in the given form field', asyncSpec (next) ->
-        $form = affix('form')
-        $field = $form.affix('input[up-autosubmit][val="old-value"]')
+        $form = $fixture('form')
+        $field = $form.affix('input[up-autosubmit][name="input-name"][value="old-value"]')
         up.hello($field)
         submitSpy = up.form.knife.mock('submit').and.returnValue(u.unresolvablePromise())
         $field.val('new-value')
-        $field.trigger('change')
+        Trigger.change($field)
         next => expect(submitSpy).toHaveBeenCalled()
 
-      it 'marks the field with an .up-active class while the form is submitting', asyncSpec (next) ->
-        $form = affix('form')
-        $field = $form.affix('input[up-autosubmit][val="old-value"]')
-        up.hello($field)
-        submission = u.newDeferred()
-        submitSpy = up.form.knife.mock('submit').and.returnValue(submission)
-        $field.val('new-value')
-        $field.trigger('change')
-        next =>
-          expect(submitSpy).toHaveBeenCalled()
-          expect($field).toHaveClass('up-active')
-          submission.resolve()
-
-        next =>
-          expect($field).not.toHaveClass('up-active')
-
     describe 'form[up-autosubmit]', ->
 
       it 'submits the form when a change is observed in any of its fields', asyncSpec (next) ->
-        $form = affix('form[up-autosubmit]')
-        $field = $form.affix('input[val="old-value"]')
+        $form = $fixture('form[up-autosubmit]')
+        $field = $form.affix('input[name="input-name"][value="old-value"]')
         up.hello($form)
         submitSpy = up.form.knife.mock('submit').and.returnValue(u.unresolvablePromise())
         $field.val('new-value')
-        $field.trigger('change')
+        Trigger.change($field)
         next => expect(submitSpy).toHaveBeenCalled()
 
       describe 'with [up-delay] modifier', ->
 
         it 'debounces the form submission', asyncSpec (next) ->
-          $form = affix('form[up-autosubmit][up-delay="50"]')
-          $field = $form.affix('input[val="old-value"]')
+          $form = $fixture('form[up-autosubmit][up-delay="50"]')
+          $field = $form.affix('input[name="input-name"][value="old-value"]')
           up.hello($form)
           submitSpy = up.form.knife.mock('submit').and.returnValue(u.unresolvablePromise())
           $field.val('new-value-1')
-          $field.trigger('change')
+          Trigger.change($field)
           $field.val('new-value-2')
-          $field.trigger('change')
+          Trigger.change($field)
 
           next =>
             expect(submitSpy.calls.count()).toBe(0)
@@ -826,25 +853,25 @@ describe 'up.form', ->
         window.observeCallbackSpy = undefined
 
       it 'runs the JavaScript code in the attribute value when a change is observed in the field', asyncSpec (next) ->
-        $form = affix('form')
+        $form = $fixture('form')
         window.observeCallbackSpy = jasmine.createSpy('observe callback')
-        $field = $form.affix('input[val="old-value"][up-observe="window.observeCallbackSpy(value, $field.get(0))"]')
+        $field = $form.affix('input[name="input-name"][value="old-value"][up-observe="window.observeCallbackSpy(value, name)"]')
         up.hello($form)
         $field.val('new-value')
-        $field.trigger('change')
+        Trigger.change($field)
 
         next =>
-          expect(window.observeCallbackSpy).toHaveBeenCalledWith('new-value', $field.get(0))
+          expect(window.observeCallbackSpy).toHaveBeenCalledWith('new-value', 'input-name')
 
       describe 'with [up-delay] modifier', ->
 
         it 'debounces the callback', asyncSpec (next) ->
-          $form = affix('form')
+          $form = $fixture('form')
           window.observeCallbackSpy = jasmine.createSpy('observe callback')
-          $field = $form.affix('input[val="old-value"][up-observe="window.observeCallbackSpy()"][up-delay="50"]')
+          $field = $form.affix('input[name="input-name"][value="old-value"][up-observe="window.observeCallbackSpy()"][up-delay="50"]')
           up.hello($form)
           $field.val('new-value')
-          $field.trigger('change')
+          Trigger.change($field)
 
           next => expect(window.observeCallbackSpy).not.toHaveBeenCalled()
           next.after 80, => expect(window.observeCallbackSpy).toHaveBeenCalled()
@@ -856,21 +883,26 @@ describe 'up.form', ->
 
       it 'runs the JavaScript code in the attribute value when a change is observed in any contained field', asyncSpec (next) ->
         window.observeCallbackSpy = jasmine.createSpy('observe callback')
-        $form = affix('form[up-observe="window.observeCallbackSpy(value, $field.get(0))"]')
-        $field1 = $form.affix('input[val="field1-old-value"]')
-        $field2 = $form.affix('input[val="field2-old-value"]')
+        $form = $fixture('form[up-observe="window.observeCallbackSpy(value, name)"]')
+        $field1 = $form.affix('input[name="field1"][value="field1-old-value"]')
+        $field2 = $form.affix('input[name="field2"][value="field2-old-value"]')
         up.hello($form)
         $field1.val('field1-new-value')
-        $field1.trigger('change')
+        Trigger.change($field1)
 
         next =>
-          expect(window.observeCallbackSpy.calls.allArgs()).toEqual [['field1-new-value', $field1.get(0)]]
+          expect(window.observeCallbackSpy.calls.allArgs()).toEqual [
+            ['field1-new-value', 'field1']
+          ]
 
           $field2.val('field2-new-value')
-          $field2.trigger('change')
+          Trigger.change($field2)
 
         next =>
-          expect(window.observeCallbackSpy.calls.allArgs()).toEqual [['field1-new-value', $field1.get(0)], ['field2-new-value', $field2.get(0)]]
+          expect(window.observeCallbackSpy.calls.allArgs()).toEqual [
+            ['field1-new-value', 'field1'],
+            ['field2-new-value', 'field2']
+          ]
 
     describe 'input[up-validate]', ->
 
@@ -878,13 +910,14 @@ describe 'up.form', ->
 
         it "submits the input's form with an 'X-Up-Validate' header and replaces the selector with the response", asyncSpec (next) ->
 
-          $form = affix('form[action="/path/to"]')
+          $form = $fixture('form[action="/path/to"]')
           $group = $("""
             <div class="field-group">
               <input name="user" value="judy" up-validate=".field-group:has(&)">
             </div>
           """).appendTo($form)
-          $group.find('input').trigger('change')
+
+          Trigger.change($group.find('input'))
 
           next =>
             request = @lastRequest()
@@ -911,15 +944,15 @@ describe 'up.form', ->
             expect(window).not.toHaveUnhandledRejections() if REJECTION_EVENTS_SUPPORTED
 
         it 'does not reveal the updated fragment (bugfix)', asyncSpec (next) ->
-          revealSpy = up.layout.knife.mock('reveal').and.returnValue(Promise.resolve())
+          revealSpy = up.viewport.knife.mock('reveal').and.returnValue(Promise.resolve())
 
-          $form = affix('form[action="/path/to"]')
+          $form = $fixture('form[action="/path/to"]')
           $group = $("""
             <div class="field-group">
               <input name="user" value="judy" up-validate=".field-group:has(&)">
             </div>
           """).appendTo($form)
-          $group.find('input').trigger('change')
+          Trigger.change($group.find('input'))
 
           next =>
             @respondWith """
@@ -936,8 +969,8 @@ describe 'up.form', ->
       describe 'when no selector is given', ->
 
         it 'automatically finds a form group around the input field and only updates that', asyncSpec (next) ->
-
-          @appendFixture """
+          container = fixture('.container')
+          container.innerHTML = """
             <form action="/users" id="registration">
 
               <label>
@@ -951,7 +984,7 @@ describe 'up.form', ->
             </form>
           """
 
-          $('#registration input[name=password]').trigger('change')
+          Trigger.change $('#registration input[name=password]')
 
           next =>
             @respondWith """
@@ -980,63 +1013,68 @@ describe 'up.form', ->
       describe 'on a select', ->
 
         beforeEach ->
-          @$select = affix('select[up-switch=".target"]')
+          @$select = $fixture('select[name="select-name"][up-switch=".target"]')
           @$blankOption = @$select.affix('option').text('<Please select something>').val('')
           @$fooOption = @$select.affix('option[value="foo"]').text('Foo')
           @$barOption = @$select.affix('option[value="bar"]').text('Bar')
           @$bazOption = @$select.affix('option[value="baz"]').text('Baz')
 
         it "shows the target element iff its up-show-for attribute contains the select value", asyncSpec (next) ->
-          $target = affix('.target[up-show-for="something bar other"]')
+          $target = $fixture('.target[up-show-for="something bar other"]')
           up.hello(@$select)
 
           next =>
             expect($target).toBeHidden()
-            @$select.val('bar').change()
+            @$select.val('bar')
+            Trigger.change(@$select)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-hide-for attribute doesn't contain the select value", asyncSpec (next) ->
-          $target = affix('.target[up-hide-for="something bar other"]')
+          $target = $fixture('.target[up-hide-for="something bar other"]')
           up.hello(@$select)
 
           next =>
             expect($target).toBeVisible()
-            @$select.val('bar').change()
+            @$select.val('bar')
+            Trigger.change(@$select)
 
           next =>
             expect($target).toBeHidden()
 
         it "shows the target element iff it has neither up-show-for nor up-hide-for and the select value is present", asyncSpec (next) ->
-          $target = affix('.target')
+          $target = $fixture('.target')
           up.hello(@$select)
 
           next =>
             expect($target).toBeHidden()
-            @$select.val('bar').change()
+            @$select.val('bar')
+            Trigger.change(@$select)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-show-for attribute contains a value ':present' and the select value is present", asyncSpec (next) ->
-          $target = affix('.target[up-show-for=":present"]')
+          $target = $fixture('.target[up-show-for=":present"]')
           up.hello(@$select)
 
           next =>
             expect($target).toBeHidden()
-            @$select.val('bar').change()
+            @$select.val('bar')
+            Trigger.change(@$select)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-show-for attribute contains a value ':blank' and the select value is blank", asyncSpec (next) ->
-          $target = affix('.target[up-show-for=":blank"]')
+          $target = $fixture('.target[up-show-for=":blank"]')
           up.hello(@$select)
 
           next =>
             expect($target).toBeVisible()
-            @$select.val('bar').change()
+            @$select.val('bar')
+            Trigger.change(@$select)
 
           next =>
             expect($target).toBeHidden()
@@ -1044,59 +1082,64 @@ describe 'up.form', ->
       describe 'on a checkbox', ->
 
         beforeEach ->
-          @$checkbox = affix('input[type="checkbox"][value="1"][up-switch=".target"]')
+          @$checkbox = $fixture('input[name="input-name"][type="checkbox"][value="1"][up-switch=".target"]')
 
         it "shows the target element iff its up-show-for attribute is :checked and the checkbox is checked", asyncSpec (next) ->
-          $target = affix('.target[up-show-for=":checked"]')
+          $target = $fixture('.target[up-show-for=":checked"]')
           up.hello(@$checkbox)
 
           next =>
             expect($target).toBeHidden()
-            @$checkbox.prop('checked', true).change()
+            @$checkbox.prop('checked', true)
+            Trigger.change(@$checkbox)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-show-for attribute is :unchecked and the checkbox is unchecked", asyncSpec (next) ->
-          $target = affix('.target[up-show-for=":unchecked"]')
+          $target = $fixture('.target[up-show-for=":unchecked"]')
           up.hello(@$checkbox)
 
           next =>
             expect($target).toBeVisible()
-            @$checkbox.prop('checked', true).change()
+            @$checkbox.prop('checked', true)
+            Trigger.change(@$checkbox)
 
           next =>
             expect($target).toBeHidden()
 
         it "shows the target element iff its up-hide-for attribute is :checked and the checkbox is unchecked", asyncSpec (next) ->
-          $target = affix('.target[up-hide-for=":checked"]')
+          $target = $fixture('.target[up-hide-for=":checked"]')
           up.hello(@$checkbox)
 
           next =>
             expect($target).toBeVisible()
-            @$checkbox.prop('checked', true).change()
+            @$checkbox.prop('checked', true)
+            Trigger.change(@$checkbox)
 
           next =>
             expect($target).toBeHidden()
 
         it "shows the target element iff its up-hide-for attribute is :unchecked and the checkbox is checked", asyncSpec (next) ->
-          $target = affix('.target[up-hide-for=":unchecked"]')
+          $target = $fixture('.target[up-hide-for=":unchecked"]')
           up.hello(@$checkbox)
 
           next =>
             expect($target).toBeHidden()
-            @$checkbox.prop('checked', true).change()
+            @$checkbox.prop('checked', true)
+            Trigger.change(@$checkbox)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff it has neither up-show-for nor up-hide-for and the checkbox is checked", asyncSpec (next) ->
-          $target = affix('.target')
+          $target = $fixture('.target')
           up.hello(@$checkbox)
 
           next =>
             expect($target).toBeHidden()
-            @$checkbox.prop('checked', true).change()
+            @$checkbox.prop('checked', true)
+            Trigger.change(@$checkbox)
 
           next =>
             expect($target).toBeVisible()
@@ -1104,93 +1147,102 @@ describe 'up.form', ->
       describe 'on a group of radio buttons', ->
 
         beforeEach ->
-          @$buttons     = affix('.radio-buttons')
+          @$buttons     = $fixture('.radio-buttons')
           @$blankButton = @$buttons.affix('input[type="radio"][name="group"][up-switch=".target"]').val('')
           @$fooButton   = @$buttons.affix('input[type="radio"][name="group"][up-switch=".target"]').val('foo')
           @$barButton   = @$buttons.affix('input[type="radio"][name="group"][up-switch=".target"]').val('bar')
           @$bazkButton  = @$buttons.affix('input[type="radio"][name="group"][up-switch=".target"]').val('baz')
 
         it "shows the target element iff its up-show-for attribute contains the selected button value", asyncSpec (next) ->
-          $target = affix('.target[up-show-for="something bar other"]')
+          $target = $fixture('.target[up-show-for="something bar other"]')
           up.hello(@$buttons)
 
           next =>
             expect($target).toBeHidden()
-            @$barButton.prop('checked', true).change()
+            @$barButton.prop('checked', true)
+            Trigger.change(@$barButton)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-hide-for attribute doesn't contain the selected button value", asyncSpec (next) ->
-          $target = affix('.target[up-hide-for="something bar other"]')
+          $target = $fixture('.target[up-hide-for="something bar other"]')
           up.hello(@$buttons)
 
           next =>
             expect($target).toBeVisible()
-            @$barButton.prop('checked', true).change()
+            @$barButton.prop('checked', true)
+            Trigger.change(@$barButton)
 
           next =>
             expect($target).toBeHidden()
 
         it "shows the target element iff it has neither up-show-for nor up-hide-for and the selected button value is present", asyncSpec (next) ->
-          $target = affix('.target')
+          $target = $fixture('.target')
           up.hello(@$buttons)
 
           next =>
             expect($target).toBeHidden()
-            @$barButton.prop('checked', true).change()
+            @$barButton.prop('checked', true)
+            Trigger.change(@$barButton)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-show-for attribute contains a value ':present' and the selected button value is present", asyncSpec (next) ->
-          $target = affix('.target[up-show-for=":present"]')
+          $target = $fixture('.target[up-show-for=":present"]')
           up.hello(@$buttons)
 
           next =>
             expect($target).toBeHidden()
-            @$blankButton.prop('checked', true).change()
+            @$blankButton.prop('checked', true)
+            Trigger.change(@$blankButton)
 
           next =>
             expect($target).toBeHidden()
-            @$barButton.prop('checked', true).change()
+            @$barButton.prop('checked', true)
+            Trigger.change(@$barButton)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-show-for attribute contains a value ':blank' and the selected button value is blank", asyncSpec (next) ->
-          $target = affix('.target[up-show-for=":blank"]')
+          $target = $fixture('.target[up-show-for=":blank"]')
           up.hello(@$buttons)
 
           next =>
             expect($target).toBeVisible()
-            @$blankButton.prop('checked', true).change()
+            @$blankButton.prop('checked', true)
+            Trigger.change(@$blankButton)
 
           next =>
             expect($target).toBeVisible()
-            @$barButton.prop('checked', true).change()
+            @$barButton.prop('checked', true)
+            Trigger.change(@$barButton)
 
           next =>
             expect($target).toBeHidden()
 
         it "shows the target element iff its up-show-for attribute contains a value ':checked' and any button is checked", asyncSpec (next) ->
-          $target = affix('.target[up-show-for=":checked"]')
+          $target = $fixture('.target[up-show-for=":checked"]')
           up.hello(@$buttons)
 
           next =>
             expect($target).toBeHidden()
-            @$blankButton.prop('checked', true).change()
+            @$blankButton.prop('checked', true)
+            Trigger.change(@$blankButton)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-show-for attribute contains a value ':unchecked' and no button is checked", asyncSpec (next) ->
-          $target = affix('.target[up-show-for=":unchecked"]')
+          $target = $fixture('.target[up-show-for=":unchecked"]')
           up.hello(@$buttons)
 
           next =>
             expect($target).toBeVisible()
-            @$blankButton.prop('checked', true).change()
+            @$blankButton.prop('checked', true)
+            Trigger.change(@$blankButton)
 
           next =>
             expect($target).toBeHidden()
@@ -1198,59 +1250,64 @@ describe 'up.form', ->
       describe 'on a text input', ->
 
         beforeEach ->
-          @$textInput = affix('input[type="text"][up-switch=".target"]')
+          @$textInput = $fixture('input[name="input-name"][type="text"][up-switch=".target"]')
 
         it "shows the target element iff its up-show-for attribute contains the input value", asyncSpec (next) ->
-          $target = affix('.target[up-show-for="something bar other"]')
+          $target = $fixture('.target[up-show-for="something bar other"]')
           up.hello(@$textInput)
 
           next =>
             expect($target).toBeHidden()
-            @$textInput.val('bar').change()
+            @$textInput.val('bar')
+            Trigger.change(@$textInput)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-hide-for attribute doesn't contain the input value", asyncSpec (next) ->
-          $target = affix('.target[up-hide-for="something bar other"]')
+          $target = $fixture('.target[up-hide-for="something bar other"]')
           up.hello(@$textInput)
 
           next =>
             expect($target).toBeVisible()
-            @$textInput.val('bar').change()
+            @$textInput.val('bar')
+            Trigger.change(@$textInput)
 
           next =>
             expect($target).toBeHidden()
 
         it "shows the target element iff it has neither up-show-for nor up-hide-for and the input value is present", asyncSpec (next) ->
-          $target = affix('.target')
+          $target = $fixture('.target')
           up.hello(@$textInput)
 
           next =>
             expect($target).toBeHidden()
-            @$textInput.val('bar').change()
+            @$textInput.val('bar')
+            Trigger.change(@$textInput)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-show-for attribute contains a value ':present' and the input value is present", asyncSpec (next) ->
-          $target = affix('.target[up-show-for=":present"]')
+          $target = $fixture('.target[up-show-for=":present"]')
           up.hello(@$textInput)
 
           next =>
             expect($target).toBeHidden()
-            @$textInput.val('bar').change()
+            @$textInput.val('bar')
+            Trigger.change(@$textInput)
 
           next =>
             expect($target).toBeVisible()
 
         it "shows the target element iff its up-show-for attribute contains a value ':blank' and the input value is blank", asyncSpec (next) ->
-          $target = affix('.target[up-show-for=":blank"]')
+          $target = $fixture('.target[up-show-for=":blank"]')
           up.hello(@$textInput)
 
           next =>
             expect($target).toBeVisible()
-            @$textInput.val('bar').change()
+            @$textInput.val('bar')
+            Trigger.change(@$textInput)
 
           next =>
             expect($target).toBeHidden()
@@ -1258,7 +1315,7 @@ describe 'up.form', ->
       describe 'when an [up-show-for] element is dynamically inserted later', ->
 
         it "shows the element iff it matches the [up-switch] control's value", asyncSpec (next) ->
-          $select = affix('select[up-switch=".target"]')
+          $select = $fixture('select[name="select-name"][up-switch=".target"]')
           $select.affix('option[value="foo"]').text('Foo')
           $select.affix('option[value="bar"]').text('Bar')
           $select.val('foo')
@@ -1266,7 +1323,7 @@ describe 'up.form', ->
 
           next =>
             # New target enters the DOM after [up-switch] has been compiled
-            @$target = affix('.target[up-show-for="bar"]')
+            @$target = $fixture('.target[up-show-for="bar"]')
             up.hello(@$target)
 
           next =>
@@ -1274,13 +1331,14 @@ describe 'up.form', ->
 
           next =>
             # Check that the new element will notify subsequent changes
-            $select.val('bar').change()
+            $select.val('bar')
+            Trigger.change($select)
             expect(@$target).toBeVisible()
 
         it "doesn't re-switch targets that were part of the original compile run", asyncSpec (next) ->
-          $container = affix('.container')
+          $container = $fixture('.container')
 
-          $select = $container.affix('select[up-switch=".target"]')
+          $select = $container.affix('select[name="select-name"][up-switch=".target"]')
           $select.affix('option[value="foo"]').text('Foo')
           $select.affix('option[value="bar"]').text('Bar')
           $select.val('foo')
@@ -1297,5 +1355,5 @@ describe 'up.form', ->
 
           next =>
             expect(switchTargetSpy.calls.count()).toBe(2)
-            expect(switchTargetSpy.calls.argsFor(0)[0]).toEqual($existingTarget)
-            expect(switchTargetSpy.calls.argsFor(1)[0]).toEqual(@$lateTarget)
+            expect(switchTargetSpy.calls.argsFor(0)[0]).toEqual($existingTarget[0])
+            expect(switchTargetSpy.calls.argsFor(1)[0]).toEqual(@$lateTarget[0])