RubyGems - upjs-rails - Versions diffs - 0.12.5 → 0.13.0 - Mend

upjs-rails 0.12.5 → 0.13.0

Files changed (48) hide show

checksums.yaml +4 -4
data/.rdoc_options +23 -0
data/CHANGELOG.md +20 -0
data/design/up-validate.js.coffee +284 -0
data/dist/up-bootstrap.js +4 -0
data/dist/up-bootstrap.min.js +1 -1
data/dist/up.js +547 -102
data/dist/up.min.js +2 -2
data/lib/assets/javascripts/up/browser.js.coffee +3 -2
data/lib/assets/javascripts/up/flow.js.coffee +95 -17
data/lib/assets/javascripts/up/form.js.coffee +327 -34
data/lib/assets/javascripts/up/history.js.coffee +1 -1
data/lib/assets/javascripts/up/layout.js.coffee +4 -4
data/lib/assets/javascripts/up/link.js.coffee +5 -2
data/lib/assets/javascripts/up/modal.js.coffee +1 -0
data/lib/assets/javascripts/up/proxy.js.coffee +27 -12
data/lib/assets/javascripts/up/syntax.js.coffee +39 -20
data/lib/assets/javascripts/up/util.js.coffee +29 -12
data/lib/assets/javascripts/up-bootstrap/form-ext.js.coffee +1 -0
data/lib/upjs/rails/engine.rb +1 -1
data/lib/upjs/rails/inspector.rb +63 -0
data/lib/upjs/rails/inspector_accessor.rb +28 -0
data/lib/upjs/rails/request_echo_headers.rb +7 -0
data/lib/upjs/rails/request_method_cookie.rb +12 -4
data/lib/upjs/rails/version.rb +5 -1
data/lib/upjs-rails.rb +7 -5
data/spec_app/.rspec +2 -0
data/spec_app/Gemfile +0 -3
data/spec_app/Gemfile.lock +43 -44
data/spec_app/app/assets/stylesheets/application.css +1 -1
data/spec_app/app/controllers/test_controller.rb +23 -0
data/spec_app/config/routes.rb +2 -0
data/spec_app/spec/controllers/test_controller_spec.rb +67 -0
data/spec_app/spec/javascripts/helpers/append_fixture.js.coffee +8 -0
data/spec_app/spec/javascripts/helpers/last_request.js.coffee +18 -0
data/spec_app/spec/javascripts/helpers/reset_path.js.coffee +1 -0
data/spec_app/spec/javascripts/up/flow_spec.js.coffee +93 -43
data/spec_app/spec/javascripts/up/form_spec.js.coffee +80 -18
data/spec_app/spec/javascripts/up/history_spec.js.coffee +1 -5
data/spec_app/spec/javascripts/up/link_spec.js.coffee +18 -17
data/spec_app/spec/javascripts/up/modal_spec.js.coffee +32 -37
data/spec_app/spec/javascripts/up/navigation_spec.js.coffee +7 -26
data/spec_app/spec/javascripts/up/popup_spec.js.coffee +1 -7
data/spec_app/spec/javascripts/up/proxy_spec.js.coffee +26 -25
data/spec_app/spec/javascripts/up/util_spec.js.coffee +23 -0
data/spec_app/spec/spec_helper.rb +62 -0
metadata +12 -3
data/lib/upjs/rails/request_ext.rb +0 -13

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

@@ -5,4 +5,5 @@ beforeEach ->
 afterEach ->
   if up.browser.canPushState()
     history.replaceState?({}, @previousTitle, @previousHref)
+    document.title = @previousTitle

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

@@ -21,66 +21,121 @@ describe 'up.flow', ->
             <div class="after">new-after</div>
             """
-          @respond = ->
-            @lastRequest().respondWith
-              status: 200
-              contentType: 'text/html'
-              responseText: @responseText
+          @respond = -> @respondWith(@responseText)
         it 'replaces the given selector with the same selector from a freshly fetched page', (done) ->
-          @request = up.replace('.middle', '/path')
+          promise = up.replace('.middle', '/path')
           @respond()
-          @request.then ->
+          promise.then ->
             expect($('.before')).toHaveText('old-before')
             expect($('.middle')).toHaveText('new-middle')
             expect($('.after')).toHaveText('old-after')
             done()
         it 'should set the browser location to the given URL', (done) ->
-          @request = up.replace('.middle', '/path')
+          promise = up.replace('.middle', '/path')
           @respond()
-          @request.then ->
+          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 'understands non-standard CSS selector extensions such as :has(...)', (done) ->
+          $first = affix('.boxx#first')
+          $firstChild = $('<span class="first-child">old first</span>').appendTo($first)
+          $second = affix('.boxx#second')
+          $secondChild = $('<span class="second-child">old second</span>').appendTo($second)
+          promise = up.replace('.boxx:has(.first-child)', '/path')
+          @respondWith """
+            <div class="boxx" id="first">
+              <span class="first-child">new first</span>
+            </div>
+            """
+          promise.then ->
+            expect($('#first span')).toHaveText('new first')
+            expect($('#second span')).toHaveText('old second')
+            done()
         it 'marks the element with the URL from which it was retrieved', (done) ->
-          @request = up.replace('.middle', '/path')
+          promise = up.replace('.middle', '/path')
           @respond()
-          @request.then ->
+          promise.then ->
             expect($('.middle').attr('up-source')).toMatch(/\/path$/)
             done()
         it 'replaces multiple selectors separated with a comma', (done) ->
-          @request = up.replace('.middle, .after', '/path')
+          promise = up.replace('.middle, .after', '/path')
           @respond()
-          @request.then ->
+          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>
+                <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) ->
-          @request = up.replace('.middle:before', '/path')
+          promise = up.replace('.middle:before', '/path')
           @respond()
-          @request.then ->
+          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) ->
-          @request = up.replace('.middle:after', '/path')
+          promise = up.replace('.middle:after', '/path')
           @respond()
-          @request.then ->
+          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) ->
-          @request = up.replace('.before:before, .middle, .after:after', '/path')
+          promise = up.replace('.before:before, .middle, .after:after', '/path')
           @respond()
-          @request.then ->
+          promise.then ->
             expect($('.before')).toHaveText('new-beforeold-before')
             expect($('.middle')).toHaveText('new-middle')
             expect($('.after')).toHaveText('old-afternew-after')
@@ -105,10 +160,10 @@ describe 'up.flow', ->
             </div>
             """
-          @request = up.replace('.middle', '/path')
+          promise = up.replace('.middle', '/path')
           @respond()
-          @request.then ->
+          promise.then ->
             expect(window.scriptTagExecuted).not.toHaveBeenCalledWith('before')
             expect(window.scriptTagExecuted).toHaveBeenCalledWith('middle')
             done()
@@ -154,9 +209,9 @@ describe 'up.flow', ->
               u.resolvedDeferred()
           it 'reveals a new element before it is being replaced', (done) ->
-            @request = up.replace('.middle', '/path', reveal: true)
+            promise = up.replace('.middle', '/path', reveal: true)
             @respond()
-            @request.then =>
+            promise.then =>
               expect(@revealMock).not.toHaveBeenCalledWith(@oldMiddle)
               expect(@revealedHTML).toContain('new-middle')
               done()
@@ -164,7 +219,7 @@ describe 'up.flow', ->
           describe 'when there is an anchor #hash in the URL', ->
             it 'reveals a child with the ID of that #hash', (done) ->
-              @request = up.replace('.middle', '/path#three', reveal: true)
+              promise = up.replace('.middle', '/path#three', reveal: true)
               @responseText =
                 """
                 <div class="middle">
@@ -174,12 +229,12 @@ describe 'up.flow', ->
                 </div>
                 """
               @respond()
-              @request.then =>
+              promise.then =>
                 expect(@revealedHTML).toEqual('<div id="three">three</div>')
                 done()
             it "reveals the entire element if it has no child with the ID of that #hash", (done) ->
-              @request = up.replace('.middle', '/path#four', reveal: true)
+              promise = up.replace('.middle', '/path#four', reveal: true)
               @responseText =
                 """
                 <div class="middle">
@@ -187,14 +242,14 @@ describe 'up.flow', ->
                 </div>
                 """
               @respond()
-              @request.then =>
+              promise.then =>
                 expect(@revealedHTML).toContain('new-middle')
                 done()
           it 'reveals a new element that is being appended', (done) ->
-            @request = up.replace('.middle:after', '/path', reveal: true)
+            promise = up.replace('.middle:after', '/path', reveal: true)
             @respond()
-            @request.then =>
+            promise.then =>
               expect(@revealMock).not.toHaveBeenCalledWith(@oldMiddle)
               # Text nodes are wrapped in a .up-insertion container so we can
               # animate them and measure their position/size for scrolling.
@@ -205,9 +260,9 @@ describe 'up.flow', ->
               done()
           it 'reveals a new element that is being prepended', (done) ->
-            @request = up.replace('.middle:before', '/path', reveal: true)
+            promise = up.replace('.middle:before', '/path', reveal: true)
             @respond()
-            @request.then =>
+            promise.then =>
               expect(@revealMock).not.toHaveBeenCalledWith(@oldMiddle)
               # Text nodes are wrapped in a .up-insertion container so we can
               # animate them and measure their position/size for scrolling.
@@ -315,18 +370,13 @@ describe 'up.flow', ->
             expect($('.element')).toHaveText('new text')
             done()
-          request = @lastRequest()
-          expect(request.url).toMatch(/\/source$/)
+          expect(@lastRequest().url).toMatch(/\/source$/)
-          request.respondWith
-            status: 200
-            contentType: '/text/html'
-            responseText:
-              """
-              <div class="container">
-                <div class="element">new text</div>
-              </div>
-              """
+          @respondWith """
+            <div class="container">
+              <div class="element">new text</div>
+            </div>
+            """
       else

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

@@ -28,19 +28,15 @@ describe 'up.form', ->
         it 'submits the given form and replaces the target with the response', (done) ->
-          @request.respondWith
-            status: 200
-            contentType: 'text/html'
-            responseText:
-              """
-              text-before
-              <div class="response">
-                new-text
-              </div>
-              text-after
-              """
+          @respondWith """
+            text-before
+            <div class="response">
+              new-text
+            </div>
+            text-after
+            """
           @promise.then ->
             expect($('.response')).toHaveText('new-text')
@@ -96,17 +92,83 @@ describe 'up.form', ->
           up.submit($form)
           expect(form.submit).toHaveBeenCalled()
   describe 'unobtrusive behavior', ->
     describe 'form[up-target]', ->
       it 'rigs the form to use up.submit instead of a standard submit'
     describe 'input[up-observe]', ->
       it 'should have tests'
+    describe 'input[up-validate]', ->
+      describe 'when a selector is given', ->
+        it "submits the input's form with an 'X-Up-Validate' header and replaces the selector with the response", ->
+          $form = affix('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')
+          request = @lastRequest()
+          expect(request.requestHeaders['X-Up-Validate']).toEqual('user')
+          expect(request.requestHeaders['X-Up-Selector']).toEqual(".field-group:has([name='user'])")
+          @respondWith """
+            <div class="field-group has-error">
+              <div class='error'>Username has already been taken</div>
+              <input name="user" value="judy" up-validate=".field-group:has(&)">
+            </div>
+          """
+          $group = $('.field-group')
+          expect($group.length).toBe(1)
+          expect($group).toHaveClass('has-error')
+          expect($group).toHaveText('Username has already been taken')
+      describe 'when no selector is given', ->
+        it 'automatically finds a form group around the input field and only updates that', ->
+          @appendFixture """
+            <form action="/users" id="registration">
+              <label>
+                <input type="text" name="email" up-validate />
+              </label>
+              <label>
+                <input type="password" name="password" up-validate />
+              </label>
+            </form>
+          """
+          $('#registration input[name=password]').trigger('change')
+          @respondWith """
+            <form action="/users" id="registration">
+              <label>
+                Validation message
+                <input type="text" name="email" up-validate />
+              </label>
+              <label>
+                Validation message
+                <input type="password" name="password" up-validate />
+              </label>
+            </form>
+          """
+          $labels = $('#registration label')
+          expect($labels[0]).not.toHaveText('Validation message')
+          expect($labels[1]).toHaveText('Validation message')

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

@@ -44,11 +44,7 @@ describe 'up.history', ->
             </div>
           """
-          respond = (html) =>
-            @lastRequest().respondWith
-              status: 200
-              contentType: 'text/html'
-              responseText: longContentHtml
+          respond = => @respondWith(longContentHtml)
           $viewport = $(longContentHtml).appendTo(document.body)

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

@@ -16,15 +16,11 @@ describe 'up.link', ->
           promise = up.follow($link)
-          @lastRequest().respondWith
-            status: 200
-            contentType: 'text/html'
-            responseText:
-              """
-              <div class="before">new-before</div>
-              <div class="middle">new-middle</div>
-              <div class="after">new-after</div>
-              """
+          @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')
@@ -38,6 +34,14 @@ describe 'up.link', ->
           request = @lastRequest()
           expect(request.method).toBe('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
@@ -108,14 +112,11 @@ describe 'up.link', ->
               up.follow($link, options)
             respond = (linkDestination) =>
-              @lastRequest().respondWith
-                status: 200
-                contentType: 'text/html'
-                responseText: """
-                  <div class="element" style="height: 300px">
-                    <a class="link" href="#{linkDestination}" up-target=".element">Link</a>
-                  </div>
-                  """
+              @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

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

@@ -9,17 +9,12 @@ describe 'up.modal', ->
       it "loads the given link's destination in a dialog window", (done) ->
         $link = affix('a[href="/path/to"][up-modal=".middle"]').text('link')
         promise = up.modal.follow($link)
-        request = @lastRequest()
-        expect(request.url).toMatch /\/path\/to$/
-        request.respondWith
-          status: 200
-          contentType: 'text/html'
-          responseText:
-            """
-            <div class="before">new-before</div>
-            <div class="middle">new-middle</div>
-            <div class="after">new-after</div>
-            """
+        expect(@lastRequest().url).toMatch /\/path\/to$/
+        @respondWith """
+          <div class="before">new-before</div>
+          <div class="middle">new-middle</div>
+          <div class="after">new-after</div>
+          """
         promise.then ->
           expect($('.up-modal')).toExist()
           expect($('.up-modal-dialog')).toExist()
@@ -34,13 +29,7 @@ describe 'up.modal', ->
       it "brings its own scrollbar, padding the body on the right in order to prevent jumping", (done) ->
         promise = up.modal.visit('/foo', target: '.container')
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
-          responseText:
-            """
-            <div class="container">text</div>
-            """
+        @respondWith('<div class="container">text</div>')
         promise.then ->
@@ -66,13 +55,7 @@ describe 'up.modal', ->
         promise = up.modal.visit('/foo', target: '.container')
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
-          responseText:
-            """
-            <div class="container">text</div>
-            """
+        @respondWith('<div class="container">text</div>')
         promise.then ->
           expect(parseInt($anchoredElement.css('right'))).toBeAround(30 + assumedScrollbarWidth, 10)
@@ -88,13 +71,7 @@ describe 'up.modal', ->
         up.history.replace('/foo')
         expect(up.modal.coveredUrl()).toBeUndefined()
         up.modal.visit('/bar', target: '.container')
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
-          responseText:
-            """
-            <div class="container">text</div>
-            """
+        @respondWith('<div class="container">text</div>')
         expect(up.modal.coveredUrl()).toEndWith('/foo')
         up.modal.close().then ->
           expect(up.modal.coveredUrl()).toBeUndefined()
@@ -103,7 +80,9 @@ describe 'up.modal', ->
     describe 'up.modal.close', ->
-      it 'should have tests'
+      it 'closes a currently open modal'
+      it 'does nothing if no modal is open'
     describe 'up.modal.source', ->
@@ -113,15 +92,31 @@ describe 'up.modal', ->
     describe 'a[up-modal]', ->
-      it 'should have tests'
+      it 'opens the clicked link in a modal', ->
+        followSpy = up.modal.knife.mock('follow')
+        $link = affix('a[href="/path"][up-modal=".foo"]')
+        up.hello($link)
+        $link.click()
+        expect(followSpy).toHaveBeenCalledWith($link)
     describe '[up-close]', ->
-      it 'should have tests'
+      it 'closes the modal when clicked', ->
+        closeSpy = up.modal.knife.mock('close')
+        $link = affix('a[up-close]')
+        up.hello($link)
+        $link.click()
+        expect(closeSpy).toHaveBeenCalled()
     describe 'when following links inside a modal', ->
-      it 'prefers to replace a selector within the modal'
+      it 'prefers to replace a selector within the modal', ->
+        $outside = affix('.foo').text('old outside')
+        up.modal.visit('/path', target: '.foo')
+        @respondWith("<div class='foo'>old inside</div>")
+        up.flow.implant('.foo', "<div class='foo'>new text</div>")
+        expect($outside).toHaveText('old outside')
+        expect($('.up-modal-content')).toHaveText('new text')
       it 'auto-closes the modal if a selector behind the modal gets replaced'

data/spec_app/spec/javascripts/up/navigation_spec.js.coffee CHANGED Viewed

@@ -50,9 +50,7 @@ describe 'up.navigation', ->
         $link = affix('a[href="/foo"][up-target=".main"]')
         affix('.main')
         $link.click()
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
+        @respondWith
           responseHeaders: { 'X-Up-Location': '/foo/' }
           responseText: '<div class="main">new-text</div>'
         expect($link).toHaveClass('up-current')
@@ -61,9 +59,7 @@ describe 'up.navigation', ->
         $link = affix('a[href="/foo/"][up-target=".main"]')
         affix('.main')
         $link.click()
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
+        @respondWith
           responseHeaders: { 'X-Up-Location': '/foo' }
           responseText: '<div class="main">new-text</div>'
         expect($link).toHaveClass('up-current')
@@ -75,10 +71,7 @@ describe 'up.navigation', ->
         $unrelatedLink = affix('a[href="/baz]')
         $modalLink.click()
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
-          responseText: '<div class="main">new-text</div>'
+        @respondWith('<div class="main">new-text</div>')
         expect($backgroundLink).toHaveClass('up-current')
         expect($modalLink).toHaveClass('up-current')
         expect($unrelatedLink).not.toHaveClass('up-current')
@@ -96,10 +89,7 @@ describe 'up.navigation', ->
         $unrelatedLink = affix('a[href="/baz]')
         $popupLink.click()
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
-          responseText: '<div class="main">new-text</div>'
+        @respondWith('<div class="main">new-text</div>')
         expect($backgroundLink).toHaveClass('up-current')
         expect($popupLink).toHaveClass('up-current')
         expect($unrelatedLink).not.toHaveClass('up-current')
@@ -117,10 +107,7 @@ describe 'up.navigation', ->
         affix('.main')
         $link.click()
         expect($link).toHaveClass('up-active')
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
-          responseText: '<div class="main">new-text</div>'
+        @respondWith('<div class="main">new-text</div>')
         expect($link).not.toHaveClass('up-active')
         expect($link).toHaveClass('up-current')
@@ -129,10 +116,7 @@ describe 'up.navigation', ->
         affix('.main')
         Trigger.mousedown($link)
         expect($link).toHaveClass('up-active')
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
-          responseText: '<div class="main">new-text</div>'
+        @respondWith('<div class="main">new-text</div>')
         expect($link).not.toHaveClass('up-active')
         expect($link).toHaveClass('up-current')
@@ -143,9 +127,6 @@ describe 'up.navigation', ->
         affix('.main')
         $link.click()
         expect($area).toHaveClass('up-active')
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
-          responseText: '<div class="main">new-text</div>'
+        @respondWith('<div class="main">new-text</div>')
         expect($area).toHaveClass('up-current')

data/spec_app/spec/javascripts/up/popup_spec.js.coffee CHANGED Viewed

@@ -14,13 +14,7 @@ describe 'up.popup', ->
         $popupLink = affix('a[href="/bar"][up-popup=".container"]')
         $popupLink.click()
-        @lastRequest().respondWith
-          status: 200
-          contentType: 'text/html'
-          responseText:
-            """
-            <div class="container">text</div>
-            """
+        @respondWith('<div class="container">text</div>')
         expect(up.popup.coveredUrl()).toEndWith('/foo')
         up.popup.close().then ->
           expect(up.popup.coveredUrl()).toBeUndefined()