unpoly-rails 0.20.0

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

@@ -0,0 +1,96 @@
+describe 'up.history', ->
+  
+  describe 'Javascript functions', ->
+    
+    describe 'up.history.replace', ->
+
+      it 'should have tests'
+      
+    describe 'up.history.push', ->
+
+      it 'should have tests'
+
+  describe 'unobtrusive behavior', ->
+
+    describe '[up-back]', ->
+
+      describeCapability 'canPushState', ->
+
+        it 'sets an [up-href] attribute to the previous URL and sets the up-restore-scroll attribute to "true"', ->
+          up.history.push('/one')
+          up.history.push('/two')
+          $element = up.hello(affix('a[href="/three"][up-back]').text('text'))
+          expect($element.attr('href')).toEndWith('/three')
+          expect($element.attr('up-href')).toEndWith('/one')
+          expect($element.attr('up-restore-scroll')).toBe('')
+          expect($element.attr('up-follow')).toBe('')
+
+      it 'does not overwrite an existing up-href or up-restore-scroll attribute'
+
+      it 'does not set an up-href attribute if there is no previous URL'
+
+    describeFallback 'canPushState', ->
+
+      it 'does not change the element', ->
+        $element = up.hello(affix('a[href="/three"][up-back]').text('text'))
+        expect($element.attr('up-href')).toBeUndefined()
+
+    describe 'scroll restauration', ->
+
+      describeCapability 'canPushState', ->
+
+        afterEach ->
+          $('.viewport').remove()
+
+        it 'restores the scroll position of viewports when the user hits the back button', (done) ->
+
+          longContentHtml = """
+            <div class="viewport" style="width: 100px; height: 100px; overflow-y: scroll">
+              <div class="content" style="height: 1000px"></div>
+            </div>
+          """
+
+          respond = => @respondWith(longContentHtml)
+
+          $viewport = $(longContentHtml).appendTo(document.body)
+
+          up.layout.config.viewports = ['.viewport']
+          up.history.config.popTargets = ['.viewport']
+
+          $viewport.append(longContentHtml)
+
+          up.replace('.content', '/one')
+          respond()
+
+          $viewport.scrollTop(50)
+
+          up.replace('.content', '/two')
+          respond()
+
+          $('.viewport').scrollTop(150)
+
+          up.replace('.content', '/three')
+          respond()
+          $('.viewport').scrollTop(250)
+
+          history.back()
+          @setTimer 50, =>
+            respond() # we need to respond since we've never requested /two with the popTarget
+            expect($('.viewport').scrollTop()).toBe(150)
+
+            history.back()
+            @setTimer 50, =>
+              respond() # we need to respond since we've never requested /one with the popTarget
+              expect($('.viewport').scrollTop()).toBe(50)
+
+              history.forward()
+              @setTimer 50, =>
+                # No need to respond since we requested /two with the popTarget
+                # when we went backwards
+                expect($('.viewport').scrollTop()).toBe(150)
+
+                history.forward()
+                @setTimer 50, =>
+                  respond() # we need to respond since we've never requested /three with the popTarget
+                  expect($('.viewport').scrollTop()).toBe(250)
+                  done()

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

@@ -0,0 +1,318 @@
+describe 'up.layout', ->
+
+  u = up.util
+
+  describe 'Javascript functions', ->
+
+    describe 'up.reveal', ->
+
+      beforeEach ->
+        up.layout.config.snap = 0
+        up.layout.config.substance = 99999
+        up.layout.config.viewports = [document]
+
+      describe 'when the viewport is the document', ->
+
+        beforeEach ->
+          $body = $('body')
+
+          @$elements = []
+          @$container = $('<div class="container">').prependTo($body)
+
+          @clientHeight = u.clientSize().height
+
+          for height in [@clientHeight, '50px', '5000px']
+            $element = $('<div>').css(height: height)
+            $element.appendTo(@$container)
+            @$elements.push($element)
+
+        afterEach ->
+          @$container.remove()
+
+        it 'reveals the given element', ->
+          up.reveal(@$elements[0])
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # ---------------------
+          # [1] ch+0 ...... ch+49
+          # [2] ch+50 ... ch+5049
+          expect($(document).scrollTop()).toBe(0)
+
+          up.reveal(@$elements[1])
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+          expect($(document).scrollTop()).toBe(50)
+
+          up.reveal(@$elements[2])
+          # [0] 0 .......... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+          # ---------------------
+          expect($(document).scrollTop()).toBe(@clientHeight + 50)
+
+        it 'snaps to the top if the space above the future-visible area is smaller than the value of config.snap', ->
+
+          up.layout.config.snap = 30
+
+          @$elements[0].css(height: '20px')
+
+          up.reveal(@$elements[2])
+          # [0] 0 ............ 19
+          # [1] 20 ........... 69
+          # ---------------------
+          # [2] 70 ......... 5069
+          # ---------------------
+          expect($(document).scrollTop()).toBe(70)
+
+          # Even though we're revealing the second element, the viewport
+          # snaps to the top edge.
+          up.reveal(@$elements[1])
+          # ---------------------
+          # [0] 0 ............ 19
+          # [1] 20 ........... 69
+          # ---------------------
+          # [2] 70 ......... 5069
+          expect($(document).scrollTop()).toBe(0)
+
+        it 'scrolls far enough so the element is not obstructed by an element fixed to the top', ->
+          $topNav = affix('[up-fixed=top]').css(
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            right: '0'
+            height: '100px'
+          )
+
+          up.reveal(@$elements[0], viewport: @viewport)
+          # ---------------------
+          # [F] 0 ............ 99
+          # [0] 0 .......... ch-1
+          # ---------------------
+          # [1] ch+0 ...... ch+49
+          # [2] ch+50 ... ch+5049
+          expect($(document).scrollTop()).toBe(0) # would need to be -100
+
+          up.reveal(@$elements[1])
+          # ---------------------
+          # [F] 0 ............ 99
+          # [0] 00000 ...... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+
+          expect($(document).scrollTop()).toBe(50)
+
+          up.reveal(@$elements[2])
+          # [0] 00000 ...... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [F] 0 ............ 99
+          # [2] ch+50 ... ch+5049
+          # ----------------
+          expect($(document).scrollTop()).toBe(@clientHeight + 50 - 100)
+
+          up.reveal(@$elements[1])
+          # [0] 00000 ...... ch-1
+          # ---------------------
+          # [F] 0 ............ 99
+          # [1] ch+0 ...... ch+49
+          # [2] ch+50 ... ch+5049
+          # ----------------
+          expect($(document).scrollTop()).toBe(@clientHeight + 50 - 100 - 50)
+
+
+        it 'scrolls far enough so the element is not obstructed by an element fixed to the bottom', ->
+          $bottomNav = affix('[up-fixed=bottom]').css(
+            position: 'fixed',
+            bottom: '0',
+            left: '0',
+            right: '0'
+            height: '100px'
+          )
+
+          up.reveal(@$elements[0])
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # [F] 0 ............ 99
+          # ---------------------
+          # [1] ch+0 ...... ch+49
+          # [2] ch+50 ... ch+5049
+          expect($(document).scrollTop()).toBe(0)
+
+          up.reveal(@$elements[1])
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # [1] ch+0 ...... ch+49
+          # [F] 0 ............ 99
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+          expect($(document).scrollTop()).toBe(150)
+
+          up.reveal(@$elements[2])
+          # ---------------------
+          # [0] 0 .......... ch-1
+          # [1] ch+0 ...... ch+49
+          # ---------------------
+          # [2] ch+50 ... ch+5049
+          # [F] 0 ............ 99
+          expect($(document).scrollTop()).toBe(@clientHeight + 50)
+
+
+      describe 'when the viewport is a container with overflow-y: scroll', ->
+
+        it 'reveals the given element', ->
+          $viewport = affix('div').css
+            'position': 'absolute'
+            'top': '50px'
+            'left': '50px'
+            'width': '100px'
+            'height': '100px'
+            'overflow-y': 'scroll'
+          $elements = []
+          u.each [0..5], ->
+            $element = $('<div>').css(height: '50px')
+            $element.appendTo($viewport)
+            $elements.push($element)
+
+          # ------------
+          # [0] 000..049
+          # [1] 050..099
+          # ------------
+          # [2] 100..149
+          # [3] 150..199
+          # [4] 200..249
+          # [5] 250..399
+          expect($viewport.scrollTop()).toBe(0)
+
+          # See that the view only scrolls down as little as possible
+          # in order to reveal the element
+          up.reveal($elements[3], viewport: $viewport)
+          # [0] 000..049
+          # [1] 050..099
+          # ------------
+          # [2] 100..149
+          # [3] 150..199
+          # ------------
+          # [4] 200..249
+          # [5] 250..299
+          expect($viewport.scrollTop()).toBe(100)
+
+          # See that the view doesn't move if the element
+          # is already revealed
+          up.reveal($elements[2], viewport: $viewport)
+          expect($viewport.scrollTop()).toBe(100)
+
+          # See that the view scrolls as far down as it cans
+          # to show the bottom element
+          up.reveal($elements[5], viewport: $viewport)
+          # [0] 000..049
+          # [1] 050..099
+          # [2] 100..149
+          # [3] 150..199
+          # ------------
+          # [4] 200..249
+          # [5] 250..299
+          # ------------
+          expect($viewport.scrollTop()).toBe(200)
+
+          # See that the view only scrolls up as little as possible
+          # in order to reveal the element
+          up.reveal($elements[1], viewport: $viewport)
+          # [0] 000..049
+          # ------------
+          # [1] 050..099
+          # [2] 100..149
+          # ------------
+          # [3] 150..199
+          # [4] 200..249
+          # [5] 250..299
+          expect($viewport.scrollTop()).toBe(50)
+
+      it 'only reveals the top number of pixels defined in config.substance', ->
+
+        up.layout.config.substance = 20
+
+        $viewport = affix('div').css
+          'position': 'absolute'
+          'top': '50px'
+          'left': '50px'
+          'width': '100px'
+          'height': '100px'
+          'overflow-y': 'scroll'
+        $elements = []
+        u.each [0..5], ->
+          $element = $('<div>').css(height: '50px')
+          $element.appendTo($viewport)
+          $elements.push($element)
+
+        # [0] 000..049
+        # [1] 050..099
+        # [2] 100..149
+        # [3] 150..199
+        # [4] 200..249
+        # [5] 250..299
+
+        # Viewing 0 .. 99
+        expect($viewport.scrollTop()).toBe(0)
+
+        # See that the view only scrolls down as little as possible
+        # in order to reveal the first 20 rows of the element
+        up.reveal($elements[3], viewport: $viewport)
+        # Viewing 70 to 169
+        expect($viewport.scrollTop()).toBe(50 + 20)
+
+        # See that the view doesn't move if the element
+        # is already revealed
+        up.reveal($elements[2], viewport: $viewport)
+        expect($viewport.scrollTop()).toBe(50 + 20)
+
+        # See that the view scrolls as far down as it cans
+        # to show the first 20 rows of the bottom element
+        up.reveal($elements[5], viewport: $viewport)
+        # Viewing 170 to 269
+        expect($viewport.scrollTop()).toBe(150 + 20)
+
+        # See that the view only scrolls up as little as possible
+        # in order to reveal the first 20 rows element
+        up.reveal($elements[2], viewport: $viewport)
+        # Viewing 100 to 199
+        expect($viewport.scrollTop()).toBe(100)
+
+    describe 'up.layout.viewportsWithin', ->
+
+      it 'should have tests'
+
+    describe 'up.layout.viewportsOf', ->
+
+      it 'seeks upwards from the given element', ->
+        up.layout.config.viewports = ['.viewport1', '.viewport2']
+        $viewport1 = affix('.viewport1')
+        $viewport2 = affix('.viewport2')
+        $element = affix('div').appendTo($viewport2)
+        expect(up.layout.viewportOf($element)).toEqual($viewport2)
+
+      it 'returns the given element if it is a configured viewport itself', ->
+        up.layout.config.viewports = ['.viewport']
+        $viewport = affix('.viewport')
+        expect(up.layout.viewportOf($viewport)).toEqual($viewport)
+
+      it 'finds the document if the viewport is the document', ->
+        # This actually tests that the hierarchy returned by `$.parent`
+        # is $element => ... => $('body') => $('html') => $(document)
+        up.layout.config.viewports = [document]
+        $element = affix('div')
+        expect(up.layout.viewportOf($element)).toEqual($(document))
+
+      it 'throws an error if no viewport could be found', ->
+        up.layout.config.viewports = ['.does-not-exist']
+        $element = affix('div')
+        lookup = -> up.layout.viewportOf($element)
+        expect(lookup).toThrowError(/Could not find viewport/i)
+
+    describe 'up.scroll', ->
+
+      it 'should have tests'

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

@@ -0,0 +1,340 @@
+describe 'up.link', ->
+
+  u = up.util
+
+  describe 'Javascript functions', ->
+  
+    describe 'up.follow', ->
+
+      describeCapability 'canPushState', ->
+
+        it 'loads the given link via AJAX and replaces the response in the given target', (done) ->
+          affix('.before').text('old-before')
+          affix('.middle').text('old-middle')
+          affix('.after').text('old-after')
+          $link = affix('a[href="/path"][up-target=".middle"]')
+    
+          promise = up.follow($link)
+    
+          @respondWith """
+            <div class="before">new-before</div>
+            <div class="middle">new-middle</div>
+            <div class="after">new-after</div>
+            """
+          
+          promise.then ->
+            expect($('.before')).toHaveText('old-before')
+            expect($('.middle')).toHaveText('new-middle')
+            expect($('.after')).toHaveText('old-after')
+            done()
+
+        it 'uses the method from a data-method attribute', ->
+          $link = affix('a[href="/path"][data-method="PUT"]')
+          up.follow($link)
+          request = @lastRequest()
+          expect(request).toHaveRequestMethod('PUT')
+
+        it 'allows to refer to the link itself as "&" in the CSS selector', ->
+          $container = affix('div')
+          $link1 = $('<a id="first" href="/path" up-target="&">first-link</a>').appendTo($container)
+          $link2 = $('<a id="second" href="/path" up-target="&">second-link</a>').appendTo($container)
+          up.follow($link2)
+          @respondWith '<div id="second">second-div</div>'
+          expect($container.text()).toBe('first-linksecond-div')
+
+        it 'adds history entries and allows the user to use the back- and forward-buttons', (done) ->
+
+          # By default, up.history will replace the <body> tag when
+          # the user presses the back-button. We reconfigure this
+          # so we don't lose the Jasmine runner interface.
+          up.history.config.popTargets = ['.container']
+
+          respondWith = (html) =>
+            @lastRequest().respondWith
+              status: 200
+              contentType: 'text/html'
+              responseText: "<div class='container'><div class='target'>#{html}</div></div>"
+
+          followAndRespond = ($link, html) ->
+            promise = up.follow($link)
+            respondWith(html)
+            promise
+
+          $link1 = affix('a[href="/one"][up-target=".target"]')
+          $link2 = affix('a[href="/two"][up-target=".target"]')
+          $link3 = affix('a[href="/three"][up-target=".target"]')
+          $container = affix('.container')
+          $target = affix('.target').appendTo($container).text('original text')
+
+          followAndRespond($link1, 'text from one').then =>
+            expect($('.target')).toHaveText('text from one')
+            expect(location.pathname).toEqual('/one')
+
+            followAndRespond($link2, 'text from two').then =>
+              expect($('.target')).toHaveText('text from two')
+              expect(location.pathname).toEqual('/two')
+
+              followAndRespond($link3, 'text from three').then =>
+                expect($('.target')).toHaveText('text from three')
+                expect(location.pathname).toEqual('/three')
+
+                history.back()
+                @setTimer 50, =>
+                  respondWith('restored text from two')
+                  expect($('.target')).toHaveText('restored text from two')
+                  expect(location.pathname).toEqual('/two')
+
+                  history.back()
+                  @setTimer 50, =>
+                    respondWith('restored text from one')
+                    expect($('.target')).toHaveText('restored text from one')
+                    expect(location.pathname).toEqual('/one')
+
+                    history.forward()
+                    @setTimer 50, =>
+                      # Since the response is cached, we don't have to respond
+                      expect($('.target')).toHaveText('restored text from two')
+                      expect(location.pathname).toEqual('/two')
+
+                      done()
+
+        describe 'with { restoreScroll: true } option', ->
+
+          it 'does not reveal, but instead restores the scroll positions of all viewports around the target', ->
+
+            $viewport = affix('div[up-viewport] .element').css
+              'height': '100px'
+              'width': '100px'
+              'overflow-y': 'scroll'
+
+            followLink = (options = {}) ->
+              $link = $viewport.find('.link')
+              up.follow($link, options)
+
+            respond = (linkDestination) =>
+              @respondWith """
+                <div class="element" style="height: 300px">
+                  <a class="link" href="#{linkDestination}" up-target=".element">Link</a>
+                </div>
+                """
+
+            up.replace('.element', '/foo')
+            # Provide the content at /foo with a link to /bar in the HTML
+            respond('/bar')
+
+            $viewport.scrollTop(65)
+
+            # Follow the link to /bar
+            followLink()
+
+            # Provide the content at /bar with a link back to /foo in the HTML
+            respond('/foo')
+
+            # Follow the link back to /foo, restoring the scroll position of 65px
+            followLink(restoreScroll: true)
+            # No need to respond because /foo has been cached before
+
+            expect($viewport.scrollTop()).toEqual(65)
+
+#        describe "when the browser is already on the link's destination", ->
+#
+#          it "doesn't make a request and reveals the target container"
+#
+#          it "doesn't make a request and reveals the target of a #hash in the URL"
+
+        describe 'with { confirm } option', ->
+
+          it 'follows the link after the user OKs a confirmation dialog', ->
+            deferred = $.Deferred()
+            spyOn(up.browser, 'confirm').and.returnValue(deferred)
+            spyOn(up, 'replace')
+            $link = affix('a[href="/danger"][up-target=".middle"]')
+            up.follow($link, confirm: 'Do you really want to go there?')
+            expect(up.browser.confirm).toHaveBeenCalledWith('Do you really want to go there?')
+            expect(up.replace).not.toHaveBeenCalled()
+            deferred.resolve()
+            expect(up.replace).toHaveBeenCalled()
+
+          it 'does not show a confirmation dialog if the option is not a present string', ->
+            spyOn(up, 'replace')
+            $link = affix('a[href="/danger"][up-target=".middle"]')
+            up.follow($link, confirm: '')
+            expect(up.replace).toHaveBeenCalled()
+
+      describeFallback 'canPushState', ->
+        
+        it 'follows the given link', ->
+          $link = affix('a[href="/path"]')
+          spyOn(up.browser, 'loadPage')
+          up.follow($link)
+          expect(up.browser.loadPage).toHaveBeenCalledWith('/path', jasmine.anything())
+
+        it 'uses the method from a data-method attribute', ->
+          $link = affix('a[href="/path"][data-method="PUT"]')
+          spyOn(up.browser, 'loadPage')
+          up.follow($link)
+          expect(up.browser.loadPage).toHaveBeenCalledWith('/path', { method: 'PUT' })
+
+
+    describe 'up.visit', ->
+      
+      it 'should have tests'
+
+  describe 'unobtrusive behavior', ->
+
+    describe 'a[up-target]', ->
+
+      it 'does not follow a form with up-target attribute (bugfix)', ->
+        $form = affix('form[up-target]')
+        up.hello($form)
+        followSpy = up.link.knife.mock('follow')
+        $form.click()
+        expect(followSpy).not.toHaveBeenCalled()
+
+      describeCapability 'canPushState', ->
+
+        it 'adds a history entry', ->
+          affix('.target')
+          $link = affix('a[href="/path"][up-target=".target"]')
+          $link.click()
+          @respondWith('<div class="target">new text</div>')
+          expect($('.target')).toHaveText('new text')
+          expect(location.pathname).toEqual('/path')
+
+        it 'respects a X-Up-Location header that the server sends in case of a redirect', ->
+          affix('.target')
+          $link = affix('a[href="/path"][up-target=".target"]')
+          $link.click()
+          @respondWith
+            responseText: '<div class="target">new text</div>'
+            responseHeaders: { 'X-Up-Location': '/other/path' }
+          expect($('.target')).toHaveText('new text')
+          expect(location.pathname).toEqual('/other/path')
+
+      it 'does not add a history entry when an up-history attribute is set to "false"', ->
+        oldPathname = location.pathname
+        affix('.target')
+        $link = affix('a[href="/path"][up-target=".target"][up-history="false"]')
+        $link.click()
+        @respondWith
+          responseText: '<div class="target">new text</div>'
+          responseHeaders: { 'X-Up-Location': '/other/path' }
+        expect($('.target')).toHaveText('new text')
+        expect(location.pathname).toEqual(oldPathname)
+
+    describe 'a[up-follow]', ->
+
+      beforeEach ->
+        @$link = affix('a[href="/path"][up-follow]')
+        @followSpy = up.link.knife.mock('follow')
+        @defaultSpy = up.link.knife.mock('allowDefault').and.callFake((event) -> event.preventDefault())
+
+      it "calls up.follow with the clicked link", ->
+        Trigger.click(@$link)
+        expect(@followSpy).toHaveBeenCalledWith(@$link)
+
+      # IE does not call Javascript and always performs the default action on right clicks
+      unless navigator.userAgent.match(/Trident/)
+        it 'does nothing if the right mouse button is used', ->
+          Trigger.click(@$link, button: 2)
+          expect(@followSpy).not.toHaveBeenCalled()
+
+      it 'does nothing if shift is pressed during the click', ->
+        Trigger.click(@$link, shiftKey: true)
+        expect(@followSpy).not.toHaveBeenCalled()
+
+      it 'does nothing if ctrl is pressed during the click', ->
+        Trigger.click(@$link, ctrlKey: true)
+        expect(@followSpy).not.toHaveBeenCalled()
+
+      it 'does nothing if meta is pressed during the click', ->
+        Trigger.click(@$link, metaKey: true)
+        expect(@followSpy).not.toHaveBeenCalled()
+
+      describe 'with [up-instant] modifier', ->
+
+        beforeEach ->
+          @$link.attr('up-instant', '')
+
+        it 'follows a link on mousedown (instead of on click)', ->
+          Trigger.mousedown(@$link)
+          expect(@followSpy.calls.mostRecent().args[0]).toEqual(@$link)
+
+        it 'does nothing on mouseup', ->
+          Trigger.mouseup(@$link)
+          expect(@followSpy).not.toHaveBeenCalled()
+
+        it 'does nothing on click', ->
+          Trigger.click(@$link)
+          expect(@followSpy).not.toHaveBeenCalled()
+
+        # IE does not call Javascript and always performs the default action on right clicks
+        unless navigator.userAgent.match(/Trident/)
+          it 'does nothing if the right mouse button is pressed down', ->
+            Trigger.mousedown(@$link, button: 2)
+            expect(@followSpy).not.toHaveBeenCalled()
+
+        it 'does nothing if shift is pressed during mousedown', ->
+          Trigger.mousedown(@$link, shiftKey: true)
+          expect(@followSpy).not.toHaveBeenCalled()
+
+        it 'does nothing if ctrl is pressed during mousedown', ->
+          Trigger.mousedown(@$link, ctrlKey: true)
+          expect(@followSpy).not.toHaveBeenCalled()
+
+        it 'does nothing if meta is pressed during mousedown', ->
+          Trigger.mousedown(@$link, metaKey: true)
+          expect(@followSpy).not.toHaveBeenCalled()
+
+    describe '[up-expand]', ->
+
+      it 'copies up-related attributes of a contained link', ->
+        $area = affix('div[up-expand] a[href="/path"][up-target="selector"][up-instant][up-preload]')
+        up.hello($area)
+        expect($area.attr('up-target')).toEqual('selector')
+        expect($area.attr('up-instant')).toEqual('')
+        expect($area.attr('up-preload')).toEqual('')
+
+      it "renames a contained link's href attribute to up-href so the container is considered a link", ->
+        $area = affix('div[up-expand] a[up-follow][href="/path"]')
+        up.hello($area)
+        expect($area.attr('up-href')).toEqual('/path')
+
+      it 'copies attributes from the first link if there are multiple links', ->
+        $area = affix('div[up-expand]')
+        $link1 = $area.affix('a[href="/path1"]')
+        $link2 = $area.affix('a[href="/path2"]')
+        up.hello($area)
+        expect($area.attr('up-href')).toEqual('/path1')
+
+      it "copies an contained non-link element with up-href attribute", ->
+        $area = affix('div[up-expand] span[up-follow][up-href="/path"]')
+        up.hello($area)
+        expect($area.attr('up-href')).toEqual('/path')
+
+      it 'adds an up-follow attribute if the contained link has neither up-follow nor up-target attributes', ->
+        $area = affix('div[up-expand] a[href="/path"]')
+        up.hello($area)
+        expect($area.attr('up-follow')).toEqual('')
+
+      describe 'with a CSS selector in the property value', ->
+
+        it "expands the contained link that matches the selector", ->
+          $area = affix('div[up-expand=".second"]')
+          $link1 = $area.affix('a.first[href="/path1"]')
+          $link2 = $area.affix('a.second[href="/path2"]')
+          up.hello($area)
+          expect($area.attr('up-href')).toEqual('/path2')
+
+        it 'does nothing if no contained link matches the selector', ->
+          $area = affix('div[up-expand=".foo"]')
+          $link = $area.affix('a[href="/path1"]')
+          up.hello($area)
+          expect($area.attr('up-href')).toBeUndefined()
+
+        it 'does not match an element that is not a descendant', ->
+          $area = affix('div[up-expand=".second"]')
+          $link1 = $area.affix('a.first[href="/path1"]')
+          $link2 = affix('a.second[href="/path2"]') # not a child of $area
+          up.hello($area)
+          expect($area.attr('up-href')).toBeUndefined()