upjs-rails 0.17.0 → 0.18.0

data/spec_app/spec/javascripts/helpers/browser_switches.js.coffee

@@ -0,0 +1,9 @@
+window.describeCapability = (capability, examples) ->
+  if up.browser[capability]()
+    examples()
+
+window.describeFallback = (capability, examples) ->
+  describe "in a browser without #{capability}", ->
+    beforeEach ->
+      spyOn(up.browser, capability).and.returnValue(false)
+    examples()

data/spec_app/spec/javascripts/helpers/knife.js.coffee

@@ -51,7 +51,6 @@
     mock: mock
 
   reset = ->
-    console.log("Reset with cleaners %o", Knife.cleaners)
     cleaner() while cleaner = Knife.cleaners.pop()
 
   me = {}

data/spec_app/spec/javascripts/helpers/reset_path.js.coffee

@@ -1,9 +1,8 @@
 beforeEach ->
-  @previousHref = location.href
-  @previousTitle = document.title
+  @hrefBeforeExample = location.href
+  @titleBeforeExample = document.title
   
 afterEach ->
   if up.browser.canPushState()
-    history.replaceState?({}, @previousTitle, @previousHref)
-    document.title = @previousTitle
-
+    history.replaceState?({}, @titleBeforeExample, @hrefBeforeExample)
+    document.title = @titleBeforeExample

data/spec_app/spec/javascripts/helpers/to_be_present.js.coffee

@@ -0,0 +1,5 @@
+beforeEach ->
+  jasmine.addMatchers
+    toBePresent: (util, customEqualityTesters) ->
+      compare: (actual) ->
+        pass: up.util.isPresent(actual)

data/spec_app/spec/javascripts/helpers/to_have_request_method.js.coffee

@@ -0,0 +1,8 @@
+beforeEach ->
+  jasmine.addMatchers
+    toHaveRequestMethod: (util, customEqualityTesters) ->
+      compare: (request, expectedMethod) ->
+        console.log("real is %o, wrapped is %o", request.method, request.data()['_method'])
+        realMethodMatches = (request.method == expectedMethod)
+        wrappedMethodMatches = util.equals(request.data()['_method'], [expectedMethod], customEqualityTesters)
+        pass: realMethodMatches || wrappedMethodMatches

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

@@ -47,6 +47,32 @@ describe 'up.bus', ->
         $('.child').click()
         expect(observeArgs).toHaveBeenCalledWith('child', {})
 
+    describe 'up.off', ->
+
+      it 'unregisters an event listener previously registered through up.on', ->
+        $child = affix('.child')
+        clickSpy = jasmine.createSpy()
+        up.on 'click', '.child', clickSpy
+        $('.child').click()
+        up.off 'click', '.child', clickSpy
+        $('.child').click()
+        expect(clickSpy.calls.count()).toEqual(1)
+
+      it 'throws an error if the given event listener was not registered through up.on', ->
+        someFunction = ->
+        offing = -> up.off 'click', '.child', someFunction
+        expect(offing).toThrowError(/(not|never) registered/i)
+
+      it 'reduces the internally tracked list of event listeners (bugfix for memory leak)', ->
+        getCount = -> up.bus.knife.get('Object.keys(liveUpDescriptions).length')
+        oldCount = getCount()
+        expect(oldCount).toBeGreaterThan(0)
+        clickSpy = jasmine.createSpy()
+        up.on 'click', '.child', clickSpy
+        expect(getCount()).toBe(oldCount + 1)
+        up.off 'click', '.child', clickSpy
+        expect(getCount()).toBe(oldCount)
+
     describe 'up.emit', ->
 
       it 'triggers an event on the document', ->

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

@@ -6,7 +6,7 @@ describe 'up.flow', ->
 
     describe 'up.replace', ->
 
-      if up.browser.canPushState()
+      describeCapability 'canPushState', ->
 
         beforeEach ->
 
@@ -21,7 +21,7 @@ describe 'up.flow', ->
             <div class="after">new-after</div>
             """
 
-          @respond = -> @respondWith(@responseText)
+          @respond = (options = {}) -> @respondWith(@responseText, options)
 
         it 'replaces the given selector with the same selector from a freshly fetched page', (done) ->
           promise = up.replace('.middle', '/path')
@@ -31,20 +31,133 @@ describe 'up.flow', ->
             expect($('.middle')).toHaveText('new-middle')
             expect($('.after')).toHaveText('old-after')
             done()
-          
-        it 'should set the browser location to the given URL', (done) ->
-          promise = up.replace('.middle', '/path')
-          @respond()
-          promise.then ->
-            expect(window.location.pathname).toBe('/path')
-            done()
 
-        it "detects a redirect's new URL when the server sets an X-Up-Location header", (done) ->
-          promise = up.replace('.middle', '/path')
-          @respondWith(@responseText, responseHeaders: { 'X-Up-Location': '/other-path' })
-          promise.then ->
-            expect(window.location.pathname).toBe('/other-path')
-            done()
+        it 'sends an X-Up-Target HTTP headers along with the request', ->
+          up.replace('.middle', '/path')
+          request = @lastRequest()
+          console.log(request.requestHeaders)
+          expect(request.requestHeaders['X-Up-Target']).toEqual('.middle')
+
+        describe 'with { data } option', ->
+
+          it "uses the given params as a non-GET request's payload", ->
+            givenParams = { 'foo-key': 'foo-value', 'bar-key': 'bar-value' }
+            up.replace('.middle', '/path', method: 'put', data: givenParams)
+            expect(@lastRequest().data()['foo-key']).toEqual(['foo-value'])
+            expect(@lastRequest().data()['bar-key']).toEqual(['bar-value'])
+
+          it "encodes the given params into the URL of a GET request", ->
+            givenParams = { 'foo-key': 'foo value', 'bar-key': 'bar value' }
+            up.replace('.middle', '/path', method: 'get', data: givenParams)
+            expect(@lastRequest().url).toEndWith('/path?foo-key=foo+value&bar-key=bar+value')
+
+        it 'uses a HTTP method given as { method } option', ->
+          up.replace('.middle', '/path', method: 'put')
+          expect(@lastRequest()).toHaveRequestMethod('PUT')
+
+        describe 'if the server responds with a non-200 status code', ->
+
+          it 'replaces the <body> instead of the given selector', ->
+            implantSpy = up.flow.knife.mock('implant') # can't have the example replace the Jasmine test runner UI
+            up.replace('.middle', '/path')
+            @respond(status: 500)
+            expect(implantSpy).toHaveBeenCalledWith('body', jasmine.any(String), jasmine.any(Object))
+
+          it 'uses a target selector given as { failTarget } option', ->
+            up.replace('.middle', '/path', failTarget: '.after')
+            @respond(status: 500)
+            expect($('.middle')).toHaveText('old-middle')
+            expect($('.after')).toHaveText('new-after')
+
+        describe 'history', ->
+
+          it 'should set the browser location to the given URL', (done) ->
+            promise = up.replace('.middle', '/path')
+            @respond()
+            promise.then ->
+              expect(location.href).toEndWith('/path')
+              done()
+
+          it 'does not add a history entry after non-GET requests', ->
+            promise = up.replace('.middle', '/path', method: 'post')
+            @respond()
+            expect(location.href).toEndWith(@hrefBeforeExample)
+
+          it 'adds a history entry after non-GET requests if the response includes a { X-Up-Method: "get" } header (will happen after a redirect)', ->
+            promise = up.replace('.middle', '/path', method: 'post')
+            @respond(responseHeaders: { 'X-Up-Method': 'get' })
+            expect(location.href).toEndWith('/path')
+
+          it 'does not a history entry after a failed GET-request', ->
+            promise = up.replace('.middle', '/path', method: 'post', failTarget: '.middle')
+            @respond(status: 500)
+            expect(location.href).toEndWith(@hrefBeforeExample)
+
+          it 'does not add a history entry with { history: false } option', ->
+            promise = up.replace('.middle', '/path', history: false)
+            @respond()
+            expect(location.href).toEndWith(@hrefBeforeExample)
+
+          it "detects a redirect's new URL when the server sets an X-Up-Location header", ->
+            promise = up.replace('.middle', '/path')
+            @respond(responseHeaders: { 'X-Up-Location': '/other-path' })
+            expect(location.href).toEndWith('/other-path')
+
+          it 'adds params from a { data } option to the URL of a GET request', ->
+            promise = up.replace('.middle', '/path', data: { 'foo-key': 'foo value', 'bar-key': 'bar value' })
+            @respond()
+            console.log("EXPECTATION COMING UP AGAINST %o", location.pathname)
+            expect(location.href).toEndWith('/path?foo-key=foo%20value&bar-key=bar%20value')
+
+          describe 'if a URL is given as { history } option', ->
+
+            it 'uses that URL as the new location after a GET request', ->
+              promise = up.replace('.middle', '/path', history: '/given-path')
+              @respond(failTarget: '.middle')
+              expect(location.href).toEndWith('/given-path')
+
+            it 'adds a history entry after a non-GET request', ->
+              promise = up.replace('.middle', '/path', method: 'post', history: '/given-path')
+              @respond(failTarget: '.middle')
+              expect(location.href).toEndWith('/given-path')
+
+            it 'does not add a history entry after a failed non-GET request', ->
+              promise = up.replace('.middle', '/path', method: 'post', history: '/given-path', failTarget: '.middle')
+              @respond(failTarget: '.middle', status: 500)
+              expect(location.href).toEndWith(@hrefBeforeExample)
+
+        describe 'source', ->
+
+          it 'remembers the source the fragment was retrieved from', (done) ->
+            promise = up.replace('.middle', '/path')
+            @respond()
+            promise.then ->
+              expect($('.middle').attr('up-source')).toMatch(/\/path$/)
+              done()
+
+          it 'reuses the previous source for a non-GET request (since that is reloadable)', ->
+            @oldMiddle.attr('up-source', '/previous-source')
+            up.replace('.middle', '/path', method: 'post')
+            @respond()
+            expect($('.middle')).toHaveText('new-middle')
+            expect(up.flow.source('.middle')).toEndWith('/previous-source')
+
+          describe 'if a URL is given as { source } option', ->
+
+            it 'uses that URL as the source for a GET request', ->
+              promise = up.replace('.middle', '/path', source: '/given-path')
+              @respond()
+              expect(up.flow.source('.middle')).toEndWith('/given-path')
+
+            it 'uses that URL as the source after a non-GET request', ->
+              promise = up.replace('.middle', '/path', method: 'post', source: '/given-path')
+              @respond()
+              expect(up.flow.source('.middle')).toEndWith('/given-path')
+
+            it 'still reuses the previous URL after a failed non-GET request', ->
+              promise = up.replace('.middle', '/path', method: 'post', source: '/given-path', failTarget: '.middle')
+              @respond(status: 500)
+              expect(up.flow.source('.middle')).toEndWith(@hrefBeforeExample)
 
         it 'understands non-standard CSS selector extensions such as :has(...)', (done) ->
           $first = affix('.boxx#first')
@@ -64,82 +177,79 @@ describe 'up.flow', ->
             expect($('#second span')).toHaveText('old second')
             done()
 
-        it 'marks the element with the URL from which it was retrieved', (done) ->
-          promise = up.replace('.middle', '/path')
-          @respond()
-          promise.then ->
-            expect($('.middle').attr('up-source')).toMatch(/\/path$/)
-            done()
-            
-        it 'replaces multiple selectors separated with a comma', (done) ->
-          promise = up.replace('.middle, .after', '/path')
-          @respond()
-          promise.then ->
-            expect($('.before')).toHaveText('old-before')
-            expect($('.middle')).toHaveText('new-middle')
-            expect($('.after')).toHaveText('new-after')
-            done()
-
-        it 'replaces the body if asked to replace the "html" selector'
-
-        it "sets the document title to a 'title' tag in the response", ->
-          affix('.container').text('old container text')
-          up.replace('.container', '/path')
-          @respondWith """
-            <html>
-              <head>
-                <title>Title from HTML</title>
-              </head>
-              <body>
+        describe 'document title', ->
+
+          it "sets the document title to a 'title' tag in the response", ->
+            affix('.container').text('old container text')
+            up.replace('.container', '/path')
+            @respondWith """
+              <html>
+                <head>
+                  <title>Title from HTML</title>
+                </head>
+                <body>
+                  <div class='container'>
+                    new container text
+                  </div>
+                </body>
+              </html>
+            """
+            expect($('.container')).toHaveText('new container text')
+            expect(document.title).toBe('Title from HTML')
+
+          it "sets the document title to an 'X-Up-Title' header in the response", ->
+            affix('.container').text('old container text')
+            up.replace('.container', '/path')
+            @respondWith
+              responseHeaders:
+                'X-Up-Title': 'Title from header'
+              responseText: """
                 <div class='container'>
                   new container text
                 </div>
-              </body>
-            </html>
-          """
-          expect($('.container')).toHaveText('new container text')
-          expect(document.title).toBe('Title from HTML')
-
-        it "sets the document title to an 'X-Up-Title' header in the response", ->
-          affix('.container').text('old container text')
-          up.replace('.container', '/path')
-          @respondWith
-            responseHeaders:
-              'X-Up-Title': 'Title from header'
-            responseText: """
-              <div class='container'>
-                new container text
-              </div>
-              """
-          expect($('.container')).toHaveText('new container text')
-          expect(document.title).toBe('Title from header')
-
-        it 'prepends instead of replacing when the target has a :before pseudo-selector', (done) ->
-          promise = up.replace('.middle:before', '/path')
-          @respond()
-          promise.then ->
-            expect($('.before')).toHaveText('old-before')
-            expect($('.middle')).toHaveText('new-middleold-middle')
-            expect($('.after')).toHaveText('old-after')
-            done()
+                """
+            expect($('.container')).toHaveText('new container text')
+            expect(document.title).toBe('Title from header')
 
-        it 'appends instead of replacing when the target has a :after pseudo-selector', (done) ->
-          promise = up.replace('.middle:after', '/path')
-          @respond()
-          promise.then ->
-            expect($('.before')).toHaveText('old-before')
-            expect($('.middle')).toHaveText('old-middlenew-middle')
-            expect($('.after')).toHaveText('old-after')
-            done()
+        describe 'selector processing', ->
 
-        it "lets the developer choose between replacing/prepending/appending for each selector", (done) ->
-          promise = up.replace('.before:before, .middle, .after:after', '/path')
-          @respond()
-          promise.then ->
-            expect($('.before')).toHaveText('new-beforeold-before')
-            expect($('.middle')).toHaveText('new-middle')
-            expect($('.after')).toHaveText('old-afternew-after')
-            done()
+          it 'replaces multiple selectors separated with a comma', (done) ->
+            promise = up.replace('.middle, .after', '/path')
+            @respond()
+            promise.then ->
+              expect($('.before')).toHaveText('old-before')
+              expect($('.middle')).toHaveText('new-middle')
+              expect($('.after')).toHaveText('new-after')
+              done()
+
+          it 'replaces the body if asked to replace the "html" selector'
+
+          it 'prepends instead of replacing when the target has a :before pseudo-selector', (done) ->
+            promise = up.replace('.middle:before', '/path')
+            @respond()
+            promise.then ->
+              expect($('.before')).toHaveText('old-before')
+              expect($('.middle')).toHaveText('new-middleold-middle')
+              expect($('.after')).toHaveText('old-after')
+              done()
+
+          it 'appends instead of replacing when the target has a :after pseudo-selector', (done) ->
+            promise = up.replace('.middle:after', '/path')
+            @respond()
+            promise.then ->
+              expect($('.before')).toHaveText('old-before')
+              expect($('.middle')).toHaveText('old-middlenew-middle')
+              expect($('.after')).toHaveText('old-after')
+              done()
+
+          it "lets the developer choose between replacing/prepending/appending for each selector", (done) ->
+            promise = up.replace('.before:before, .middle, .after:after', '/path')
+            @respond()
+            promise.then ->
+              expect($('.before')).toHaveText('new-beforeold-before')
+              expect($('.middle')).toHaveText('new-middle')
+              expect($('.after')).toHaveText('old-afternew-after')
+              done()
 
         it 'executes only those script-tags in the response that get inserted into the DOM', (done) ->
           window.scriptTagExecuted = jasmine.createSpy('scriptTagExecuted')
@@ -272,7 +382,9 @@ describe 'up.flow', ->
               expect($('.up-insertion')).not.toExist()
               done()
 
-      else
+        it 'uses a { failTransition } option if the request failed'
+
+      describeFallback 'canPushState', ->
         
         it 'makes a full page load', ->
           spyOn(up.browser, 'loadPage')
@@ -360,8 +472,8 @@ describe 'up.flow', ->
         expect(destructor).toHaveBeenCalled()
         
     describe 'up.reload', ->
-      
-      if up.browser.canPushState()
+
+      describeCapability 'canPushState', ->
       
         it 'reloads the given selector from the closest known source URL', (done) ->
           affix('.container[up-source="/source"] .element').find('.element').text('old text')
@@ -377,8 +489,8 @@ describe 'up.flow', ->
               <div class="element">new text</div>
             </div>
             """
-            
-      else
+
+      describeFallback 'canPushState', ->
         
         it 'makes a page load from the closest known source URL', ->
           affix('.container[up-source="/source"] .element').find('.element').text('old text')

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

@@ -7,13 +7,13 @@ describe 'up.form', ->
     describe 'up.observe', ->
 
       changeEvents = if up.browser.canInputEvent()
-# Actually we only need `input`, but we want to notice
-# if another script manually triggers `change` on the element.
+        # Actually we only need `input`, but we want to notice
+        # if another script manually triggers `change` on the element.
         ['input', 'change']
       else
-# Actually we won't ever get `input` from the user in this browser,
-# but we want to notice if another script manually triggers `input`
-# on the element.
+        # Actually we won't ever get `input` from the user in this browser,
+        # but we want to notice if another script manually triggers `input`
+        # on the element.
         ['input', 'change', 'keypress', 'paste', 'cut', 'click', 'propertychange']
 
       u.each changeEvents, (eventName) ->
@@ -83,27 +83,24 @@ describe 'up.form', ->
               done()
 
     describe 'up.submit', ->
-      
-      if up.browser.canPushState()
+
+      describeCapability 'canPushState', ->
       
         beforeEach ->
-          $form = affix('form[action="/path/to"][method="put"][up-target=".response"]')
-          $form.append('<input name="field1" value="value1">')
-          $form.append('<input name="field2" value="value2">')
-    
+          @$form = affix('form[action="/path/to"][method="put"][up-target=".response"]')
+          @$form.append('<input name="field1" value="value1">')
+          @$form.append('<input name="field2" value="value2">')
           affix('.response').text('old-text')
-    
-          @promise = up.submit($form)
-    
+          @promise = up.submit(@$form)
           @request = @lastRequest()
+
+        it 'submits the given form and replaces the target with the response', ->
           expect(@request.url).toMatch /\/path\/to$/
-          expect(@request.method).toBe 'PUT'
-          expect(@request.data()).toEqual
-            field1: ['value1']
-            field2: ['value2']
-        
-        it 'submits the given form and replaces the target with the response', (done) ->
-    
+          expect(@request).toHaveRequestMethod('PUT')
+          expect(@request.data()['field1']).toEqual(['value1'])
+          expect(@request.data()['field2']).toEqual(['value2'])
+          expect(@request.requestHeaders['X-Up-Target']).toEqual('.response')
+
           @respondWith """
             text-before
 
@@ -113,15 +110,10 @@ describe 'up.form', ->
 
             text-after
             """
-    
-          @promise.then ->
-            expect($('.response')).toHaveText('new-text')
-            expect($('body')).not.toHaveText('text-before')
-            expect($('body')).not.toHaveText('text-after')
-            done()
-        
-        it 'places the response into the form if the submission returns a 5xx status code', (done) ->
-          @request.respondWith
+
+        it "places the response into the form and doesn't update the browser URL if the submission returns a 5xx status code", ->
+          up.submit(@$form)
+          @respondWith
             status: 500
             contentType: 'text/html'
             responseText:
@@ -134,32 +126,47 @@ describe 'up.form', ->
     
               text-after
               """
-    
-          @promise.always ->
-            expect($('.response')).toHaveText('old-text')
-            expect($('form')).toHaveText('error-messages')
-            expect($('body')).not.toHaveText('text-before')
-            expect($('body')).not.toHaveText('text-after')
-            done()
-        
-        it 'respects a X-Up-Location header that the server sends in case of a redirect', (done) ->
-    
-          @request.respondWith
+          expect(up.browser.url()).toEqual(@hrefBeforeExample)
+          expect($('.response')).toHaveText('old-text')
+          expect($('form')).toHaveText('error-messages')
+          expect($('body')).not.toHaveText('text-before')
+          expect($('body')).not.toHaveText('text-after')
+
+        it 'respects X-Up-Method and X-Up-Location response headers so the server can show that it redirected to a GET URL', ->
+          up.submit(@$form)
+          @respondWith
             status: 200
             contentType: 'text/html'
-            responseHeaders: { 'X-Up-Location': '/other/path' }
+            responseHeaders:
+              'X-Up-Location': '/other-path'
+              'X-Up-Method': 'GET'
             responseText:
               """
               <div class="response">
                 new-text
               </div>
               """
-    
-          @promise.then ->
-            expect(up.browser.url()).toMatch(/\/other\/path$/)
-            done()
-            
-      else
+
+          expect(up.browser.url()).toEndWith('/other-path')
+
+        describe 'with { history } option', ->
+
+          it 'uses the given URL as the new browser location if the request succeeded', ->
+            up.submit(@$form, history: '/given-path')
+            @respondWith('<div class="response">new-text</div>')
+            expect(up.browser.url()).toEndWith('/given-path')
+
+          it 'keeps the current browser location if the request failed', ->
+            up.submit(@$form, history: '/given-path', failTarget: '.response')
+            @respondWith('<div class="response">new-text</div>', status: 500)
+            expect(up.browser.url()).toEqual(@hrefBeforeExample)
+
+          it 'keeps the current browser location if the option is set to false', ->
+            up.submit(@$form, history: false)
+            @respondWith('<div class="response">new-text</div>')
+            expect(up.browser.url()).toEqual(@hrefBeforeExample)
+
+      describeFallback 'canPushState', ->
         
         it 'submits the given form', ->
           $form = affix('form[action="/path/to"][method="put"][up-target=".response"]')
@@ -221,7 +228,7 @@ describe 'up.form', ->
 
           request = @lastRequest()
           expect(request.requestHeaders['X-Up-Validate']).toEqual('user')
-          expect(request.requestHeaders['X-Up-Selector']).toEqual(".field-group:has([name='user'])")
+          expect(request.requestHeaders['X-Up-Target']).toEqual(".field-group:has([name='user'])")
 
           @respondWith """
             <div class="field-group has-error">
@@ -274,3 +281,191 @@ describe 'up.form', ->
           $labels = $('#registration label')
           expect($labels[0]).not.toHaveText('Validation message')
           expect($labels[1]).toHaveText('Validation message')
+
+    describe '[up-toggle]', ->
+
+      describe 'on a select', ->
+
+        beforeEach ->
+          @$select = affix('select[up-toggle=".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", ->
+          $target = affix('.target[up-show-for="something bar other"]')
+          up.hello(@$select)
+          expect($target).toBeHidden()
+          @$select.val('bar').change()
+          expect($target).toBeVisible()
+
+        it "shows the target element iff its up-hide-for attribute doesn't contain the select value", ->
+          $target = affix('.target[up-hide-for="something bar other"]')
+          up.hello(@$select)
+          expect($target).toBeVisible()
+          @$select.val('bar').change()
+          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", ->
+          $target = affix('.target')
+          up.hello(@$select)
+          expect($target).toBeHidden()
+          @$select.val('bar').change()
+          expect($target).toBeVisible()
+
+        it "shows the target element iff its up-show-for attribute contains a value ':present' and the select value is present", ->
+          $target = affix('.target[up-show-for=":present"]')
+          up.hello(@$select)
+          expect($target).toBeHidden()
+          @$select.val('bar').change()
+          expect($target).toBeVisible()
+
+        it "shows the target element iff its up-show-for attribute contains a value ':blank' and the select value is blank", ->
+          $target = affix('.target[up-show-for=":blank"]')
+          up.hello(@$select)
+          expect($target).toBeVisible()
+          @$select.val('bar').change()
+          expect($target).toBeHidden()
+
+      describe 'on a checkbox', ->
+
+        beforeEach ->
+          @$checkbox = affix('input[type="checkbox"][value="1"][up-toggle=".target"]')
+
+        it "shows the target element iff its up-show-for attribute is :checked and the checkbox is checked", ->
+          $target = affix('.target[up-show-for=":checked"]')
+          up.hello(@$checkbox)
+          expect($target).toBeHidden()
+          @$checkbox.prop('checked', true).change()
+          expect($target).toBeVisible()
+
+        it "shows the target element iff its up-show-for attribute is :unchecked and the checkbox is unchecked", ->
+          $target = affix('.target[up-show-for=":unchecked"]')
+          up.hello(@$checkbox)
+          expect($target).toBeVisible()
+          @$checkbox.prop('checked', true).change()
+          expect($target).toBeHidden()
+
+        it "shows the target element iff its up-hide-for attribute is :checked and the checkbox is unchecked", ->
+          $target = affix('.target[up-hide-for=":checked"]')
+          up.hello(@$checkbox)
+          expect($target).toBeVisible()
+          @$checkbox.prop('checked', true).change()
+          expect($target).toBeHidden()
+
+        it "shows the target element iff its up-hide-for attribute is :unchecked and the checkbox is checked", ->
+          $target = affix('.target[up-hide-for=":unchecked"]')
+          up.hello(@$checkbox)
+          expect($target).toBeHidden()
+          @$checkbox.prop('checked', true).change()
+          expect($target).toBeVisible()
+
+        it "shows the target element iff it has neither up-show-for nor up-hide-for and the checkbox is checked", ->
+          $target = affix('.target')
+          up.hello(@$checkbox)
+          expect($target).toBeHidden()
+          @$checkbox.prop('checked', true).change()
+          expect($target).toBeVisible()
+
+      describe 'on a group of radio buttons', ->
+
+        beforeEach ->
+          @$buttons     = affix('.radio-buttons')
+          @$blankButton = @$buttons.affix('input[type="radio"][name="group"][up-toggle=".target"]').val('')
+          @$fooButton   = @$buttons.affix('input[type="radio"][name="group"][up-toggle=".target"]').val('foo')
+          @$barButton   = @$buttons.affix('input[type="radio"][name="group"][up-toggle=".target"]').val('bar')
+          @$bazkButton  = @$buttons.affix('input[type="radio"][name="group"][up-toggle=".target"]').val('baz')
+
+        it "shows the target element iff its up-show-for attribute contains the selected button value", ->
+          $target = affix('.target[up-show-for="something bar other"]')
+          up.hello(@$buttons)
+          expect($target).toBeHidden()
+          @$barButton.prop('checked', true).change()
+          expect($target).toBeVisible()
+
+        it "shows the target element iff its up-hide-for attribute doesn't contain the selected button value", ->
+          $target = affix('.target[up-hide-for="something bar other"]')
+          up.hello(@$buttons)
+          expect($target).toBeVisible()
+          @$barButton.prop('checked', true).change()
+          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", ->
+          $target = affix('.target')
+          up.hello(@$buttons)
+          expect($target).toBeHidden()
+          @$barButton.prop('checked', true).change()
+          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", ->
+          $target = affix('.target[up-show-for=":present"]')
+          up.hello(@$buttons)
+          expect($target).toBeHidden()
+          @$blankButton.prop('checked', true).change()
+          expect($target).toBeHidden()
+          @$barButton.prop('checked', true).change()
+          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", ->
+          $target = affix('.target[up-show-for=":blank"]')
+          up.hello(@$buttons)
+          expect($target).toBeVisible()
+          @$blankButton.prop('checked', true).change()
+          expect($target).toBeVisible()
+          @$barButton.prop('checked', true).change()
+          expect($target).toBeHidden()
+
+        it "shows the target element iff its up-show-for attribute contains a value ':checked' and any button is checked", ->
+          $target = affix('.target[up-show-for=":checked"]')
+          up.hello(@$buttons)
+          expect($target).toBeHidden()
+          @$blankButton.prop('checked', true).change()
+          expect($target).toBeVisible()
+
+        it "shows the target element iff its up-show-for attribute contains a value ':unchecked' and no button is checked", ->
+          $target = affix('.target[up-show-for=":unchecked"]')
+          up.hello(@$buttons)
+          expect($target).toBeVisible()
+          @$blankButton.prop('checked', true).change()
+          expect($target).toBeHidden()
+
+      describe 'on a text input', ->
+
+        beforeEach ->
+          @$textInput = affix('input[type="text"][up-toggle=".target"]')
+
+        it "shows the target element iff its up-show-for attribute contains the input value", ->
+          $target = affix('.target[up-show-for="something bar other"]')
+          up.hello(@$textInput)
+          expect($target).toBeHidden()
+          @$textInput.val('bar').change()
+          expect($target).toBeVisible()
+
+        it "shows the target element iff its up-hide-for attribute doesn't contain the input value", ->
+          $target = affix('.target[up-hide-for="something bar other"]')
+          up.hello(@$textInput)
+          expect($target).toBeVisible()
+          @$textInput.val('bar').change()
+          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", ->
+          $target = affix('.target')
+          up.hello(@$textInput)
+          expect($target).toBeHidden()
+          @$textInput.val('bar').change()
+          expect($target).toBeVisible()
+
+        it "shows the target element iff its up-show-for attribute contains a value ':present' and the input value is present", ->
+          $target = affix('.target[up-show-for=":present"]')
+          up.hello(@$textInput)
+          expect($target).toBeHidden()
+          @$textInput.val('bar').change()
+          expect($target).toBeVisible()
+
+        it "shows the target element iff its up-show-for attribute contains a value ':blank' and the input value is blank", ->
+          $target = affix('.target[up-show-for=":blank"]')
+          up.hello(@$textInput)
+          expect($target).toBeVisible()
+          @$textInput.val('bar').change()
+          expect($target).toBeHidden()