RubyGems - unpoly-rails - Versions diffs - 0.27.3 → 0.28.0 - Mend

unpoly-rails 0.27.3 → 0.28.0

Potentially problematic release.

This version of unpoly-rails might be problematic. Click here for more details.

Files changed (42) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +22 -1
data/dist/unpoly.css +29 -21
data/dist/unpoly.js +291 -134
data/dist/unpoly.min.css +1 -1
data/dist/unpoly.min.js +3 -3
data/lib/assets/javascripts/unpoly.js.coffee +1 -0
data/lib/assets/javascripts/unpoly/browser.js.coffee +22 -5
data/lib/assets/javascripts/unpoly/bus.js.coffee +1 -1
data/lib/assets/javascripts/unpoly/flow.js.coffee +9 -6
data/lib/assets/javascripts/unpoly/form.js.coffee +46 -49
data/lib/assets/javascripts/unpoly/history.js.coffee +2 -2
data/lib/assets/javascripts/unpoly/layout.js.coffee +3 -3
data/lib/assets/javascripts/unpoly/modal.js.coffee +30 -2
data/lib/assets/javascripts/unpoly/motion.js.coffee +6 -6
data/lib/assets/javascripts/unpoly/navigation.js.coffee +1 -1
data/lib/assets/javascripts/unpoly/popup.js.coffee +2 -2
data/lib/assets/javascripts/unpoly/proxy.js.coffee +5 -9
data/lib/assets/javascripts/unpoly/syntax.js.coffee +10 -6
data/lib/assets/javascripts/unpoly/toast.js.coffee +66 -0
data/lib/assets/javascripts/unpoly/tooltip.js.coffee +1 -1
data/lib/assets/javascripts/unpoly/util.js.coffee +47 -21
data/lib/assets/stylesheets/unpoly/toast.css.sass +33 -0
data/lib/unpoly/rails/version.rb +1 -1
data/spec_app/Gemfile.lock +1 -1
data/spec_app/app/assets/javascripts/integration_test.coffee +1 -0
data/spec_app/app/assets/stylesheets/integration_test.sass +14 -0
data/spec_app/app/controllers/application_controller.rb +8 -0
data/spec_app/app/controllers/error_test_controller.rb +5 -0
data/spec_app/app/views/error_test/trigger.erb +72 -0
data/spec_app/app/views/error_test/unexpected_response.erb +3 -0
data/spec_app/app/views/pages/start.erb +4 -0
data/spec_app/config/routes.rb +2 -0
data/spec_app/spec/javascripts/helpers/last_request.js.coffee +1 -1
data/spec_app/spec/javascripts/up/browser_spec.js.coffee +62 -0
data/spec_app/spec/javascripts/up/form_spec.js.coffee +116 -3
data/spec_app/spec/javascripts/up/link_spec.js.coffee +2 -2
data/spec_app/spec/javascripts/up/modal_spec.js.coffee +88 -4
data/spec_app/spec/javascripts/up/syntax_spec.js.coffee +27 -1
data/spec_app/spec/javascripts/up/util_spec.js.coffee +12 -0
metadata +8 -3
data/lib/assets/stylesheets/unpoly/error.css.sass +0 -21

data/spec_app/app/controllers/error_test_controller.rb ADDED Viewed

@@ -0,0 +1,5 @@
+class ErrorTestController < ApplicationController
+  layout 'integration_test'
+end

data/spec_app/app/views/error_test/trigger.erb ADDED Viewed

@@ -0,0 +1,72 @@
+<div class="example">
+  <h2>Link to unexpected response</h2>
+  <p>
+    <a href="/error_test/unexpected_response" up-target=".link-target">Link</a>
+  </p>
+  <div class="area link-target">
+    .link-target
+  </div>
+</div>
+<div class="example">
+  <h2>Form to unexpected response</h2>
+  <%= form_tag "/error_test/unexpected_response", 'up-target' => '.form-target' do %>
+      <p>
+        <input type="text" name="param" value="param-value">
+      </p>
+      <p>
+        <button type="submit">Submit</button>
+      </p>
+  <% end %>
+  <div class="area form-target">
+    .form-target
+  </div>
+</div>
+<script>
+  if (false) {
+    var html = '<!DOCTYPE html>\
+    <html>\
+    <head>\
+    <title>Integration test - Unpoly</title>\
+    <link rel="stylesheet" media="all" href="/assets/integration_test-6697c9a85c007956bf460adc74ba46bc.css" />\
+  <meta name="csrf-param" content="authenticity_token" />\
+  <meta name="csrf-token" content="CYCqVYIr0wbjErWnupydWZiO8WMqRn+z4BlHN4g4o3T3UN4hW2sDfQXFT3/ygZt41m0jo/YEl6syohm8b8DsYw==" />\
+  </head>\
+  <body>\
+  <div class="page">\
+    <div class="unexpected-response">\
+      unexpected response\
+    </div>\
+  \
+  </div>\
+  </body>\
+  </html>';
+    var selector = '.linx-target';
+    up.fail(['Could not find selector %s in response %s', selector, html], {
+      inspect: {
+        label: 'Open response',
+        callback: function () {
+          alert("callback")
+        }
+      }
+    });
+  }
+</script>

data/spec_app/app/views/error_test/unexpected_response.erb ADDED Viewed

@@ -0,0 +1,3 @@
+<div class="unexpected-response">
+  unexpected response
+</div>

data/spec_app/app/views/pages/start.erb CHANGED Viewed

@@ -30,4 +30,8 @@
     <li><%= link_to 'Form (upload)', '/form_test/upload/new' %></li>
   </ul>
+  <ul>
+    <li><%= link_to 'Error', '/error_test/trigger' %></li>
+  </ul>
 </div>

data/spec_app/config/routes.rb CHANGED Viewed

@@ -5,6 +5,8 @@ Rails.application.routes.draw do
   get 'binding_test/:action', controller: 'binding_test'
   get 'css_test/:action', controller: 'css_test'
+  get 'error_test/:action', controller: 'error_test'
+  post 'error_test/:action', controller: 'error_test'
   namespace :form_test do
     resource :basic, only: [:new, :create]

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

@@ -2,7 +2,7 @@ u = up.util
 beforeEach ->
   @lastRequest = ->
-    jasmine.Ajax.requests.mostRecent() or up.util.error('There is no last request')
+    jasmine.Ajax.requests.mostRecent() or u.fail('There is no last request')
   @respondWith = (args...) ->
     firstArg = args.shift()

data/spec_app/spec/javascripts/up/browser_spec.js.coffee ADDED Viewed

@@ -0,0 +1,62 @@
+describe 'up.browser', ->
+  u = up.util
+  describe 'Javascript functions', ->
+    describe 'up.browser.loadPage', ->
+      afterEach ->
+        # We're preventing the form to be submitted during tests,
+        # so we need to remove it manually after each example.
+        $('form.up-page-loader').remove()
+      describe 'for GET requests', ->
+        it 'sets location.href to the given URL', ->
+          hrefSetter = up.browser.knife.mock('setLocationHref')
+          up.browser.loadPage('/foo')
+          expect(hrefSetter).toHaveBeenCalledWith('/foo')
+        it 'encodes { data } params into the URL', ->
+          hrefSetter = up.browser.knife.mock('setLocationHref')
+          up.browser.loadPage('/foo', data: { param1: 'param1 value', param2: 'param2 value' })
+          expect(hrefSetter).toHaveBeenCalledWith('/foo?param1=param1%20value&param2=param2%20value')
+      describe 'for POST requests', ->
+        it 'creates a form, adds all { data } params a hidden fields and submits the form', ->
+          submitForm = up.browser.knife.mock('submitForm')
+          up.browser.loadPage('/foo', method: 'post', data: { param1: 'param1 value', param2: 'param2 value' })
+          expect(submitForm).toHaveBeenCalled()
+          $form = $('form.up-page-loader')
+          expect($form).toExist()
+          expect($form.attr('action')).toEqual('/foo')
+          expect($form.attr('method')).toEqual('post')
+          expect($form.find('input[name="param1"][value="param1 value"]')).toExist()
+          expect($form.find('input[name="param2"][value="param2 value"]')).toExist()
+        it 'submits the Rails CSRF token as another hidden field', ->
+          submitForm = up.browser.knife.mock('submitForm')
+          spyOn(up.rails, 'csrfField').and.returnValue
+            name: 'authenticity-param-name',
+            value: 'authenticity-token'
+          up.browser.loadPage('/foo', method: 'post')
+          expect(submitForm).toHaveBeenCalled()
+          $form = $('form.up-page-loader')
+          $tokenInput = $form.find('input[name="authenticity-param-name"]')
+          expect($tokenInput).toExist()
+          expect($tokenInput.val()).toEqual('authenticity-token')
+      u.each ['PUT', 'PATCH', 'DELETE'], (method) ->
+        describe "for #{method} requests", ->
+          it "uses a POST form and sends the actual method as a { _method } param", ->
+            submitForm = up.browser.knife.mock('submitForm')
+            up.browser.loadPage('/foo', method: method)
+            expect(submitForm).toHaveBeenCalled()
+            $form = $('form.up-page-loader')
+            expect($form).toExist()
+            expect($form.attr('method')).toEqual('post')
+            expect($form.find('input[name="_method"]').val()).toEqual(method.toLowerCase())

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

@@ -6,6 +6,9 @@ describe 'up.form', ->
     describe 'up.observe', ->
+      beforeEach ->
+        up.form.config.observeDelay = 0
       changeEvents = if up.browser.canInputEvent()
         # Actually we only need `input`, but we want to notice
         # if another script manually triggers `change` on the element.
@@ -16,9 +19,9 @@ describe 'up.form', ->
         # on the element.
         ['input', 'change', 'keypress', 'paste', 'cut', 'click', 'propertychange']
-      u.each changeEvents, (eventName) ->
+      describe 'when the first argument is a form field', ->
-        describe 'when the first argument is a form field', ->
+        u.each changeEvents, (eventName) ->
           it "runs the callback when the input receives a '#{eventName}' event and the value changed", (done) ->
             $input = affix('input[value="old-value"]')
@@ -58,7 +61,107 @@ describe 'up.form', ->
             $input.trigger(eventName)
             expect(callback.calls.count()).toEqual(2)
-        describe 'when the first argument is a form', ->
+        describe 'when the first argument is a checkbox', ->
+          it 'runs the callback when the checkbox changes its checked state', (done) ->
+            $form = affix('form')
+            $checkbox = $form.affix('input[type="checkbox"]')
+            callback = jasmine.createSpy('change callback')
+            up.observe($checkbox, callback)
+            expect($checkbox.is(':checked')).toBe(false)
+            $checkbox.get(0).click()
+            u.nextFrame ->
+              expect($checkbox.is(':checked')).toBe(true)
+              expect(callback.calls.count()).toEqual(1)
+              $checkbox.get(0).click()
+              u.nextFrame ->
+                expect($checkbox.is(':checked')).toBe(false)
+                expect(callback.calls.count()).toEqual(2)
+                done()
+          it 'runs the callback when the checkbox is toggled by clicking its label', (done) ->
+            $form = affix('form')
+            $checkbox = $form.affix('input#tick[type="checkbox"]')
+            $label = $form.affix('label[for="tick"]').text('tick label')
+            callback = jasmine.createSpy('change callback')
+            up.observe($checkbox, callback)
+            expect($checkbox.is(':checked')).toBe(false)
+            $label.get(0).click()
+            u.nextFrame ->
+              expect($checkbox.is(':checked')).toBe(true)
+              expect(callback.calls.count()).toEqual(1)
+              $label.get(0).click()
+              u.nextFrame ->
+                expect($checkbox.is(':checked')).toBe(false)
+                expect(callback.calls.count()).toEqual(2)
+                done()
+        describe 'when the first argument is a radio button group', ->
+          it 'runs the callback when the group changes its selection', (done) ->
+            $form = affix('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)
+            $radio1.get(0).click()
+            u.nextFrame ->
+              expect($radio1.is(':checked')).toBe(true)
+              expect(callback.calls.count()).toEqual(1)
+              $radio2.get(0).click()
+              u.nextFrame ->
+                expect($radio1.is(':checked')).toBe(false)
+                expect(callback.calls.count()).toEqual(2)
+                done()
+          it "runs the callbacks when a radio button is selected or deselected by clicking a label in the group", (done) ->
+            $form = affix('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"]')
+            $radio2Label = $form.affix('label[for="radio2"]').text('label 2')
+            $group = $radio1.add($radio2)
+            callback = jasmine.createSpy('change callback')
+            up.observe($group, callback)
+            expect($radio1.is(':checked')).toBe(false)
+            $radio1Label.get(0).click()
+            u.nextFrame ->
+              expect($radio1.is(':checked')).toBe(true)
+              expect(callback.calls.count()).toEqual(1)
+              $radio2Label.get(0).click()
+              u.nextFrame ->
+                expect($radio1.is(':checked')).toBe(false)
+                expect(callback.calls.count()).toEqual(2)
+                done()
+          it "takes the group's initial selected value into account", (done) ->
+            $form = affix('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)
+            callback = jasmine.createSpy('change callback')
+            up.observe($group, callback)
+            expect($radio1.is(':checked')).toBe(true)
+            expect($radio2.is(':checked')).toBe(false)
+            $radio1.get(0).click()
+            u.nextFrame ->
+              # Since the radio button was already checked, the click doesn't do anything
+              expect($radio1.is(':checked')).toBe(true)
+              expect($radio2.is(':checked')).toBe(false)
+              # Since the radio button was already checked, clicking it again won't trigger the callback
+              expect(callback.calls.count()).toEqual(0)
+              $radio2.get(0).click()
+              u.nextFrame ->
+                expect($radio1.is(':checked')).toBe(false)
+                expect($radio2.is(':checked')).toBe(true)
+                expect(callback.calls.count()).toEqual(1)
+                done()
+      describe 'when the first argument is a form', ->
+        u.each changeEvents, (eventName) ->
           it "runs the callback when any of the form's inputs receives a '#{eventName}' event and the value changed", (done) ->
             $form = affix('form')
@@ -82,6 +185,16 @@ describe 'up.form', ->
               expect(callback).not.toHaveBeenCalled()
               done()
+#        it 'runs the callback only once when a radio button group changes its selection', ->
+#          $form = affix('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 ->
+#            expect(callback.calls.count()).toEqual(1)
     describe 'up.submit', ->
       describeCapability 'canPushState', ->

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

@@ -395,7 +395,7 @@ describe 'up.link', ->
             it 'morphs between the old and new target element', (done) ->
               affix('.target.old')
-              $link = affix('a[href="/path"][up-target=".target"][up-transition="cross-fade"][up-duration="300"][up-easing="linear"]')
+              $link = affix('a[href="/path"][up-target=".target"][up-transition="cross-fade"][up-duration="500"][up-easing="linear"]')
               $link.click()
               @respondWith '<div class="target new">new text</div>'
@@ -405,7 +405,7 @@ describe 'up.link', ->
               expect($newGhost).toExist()
               expect(u.opacity($oldGhost)).toBeAround(1, 0.15)
               expect(u.opacity($newGhost)).toBeAround(0, 0.15)
-              u.setTimer 150, ->
+              u.setTimer 250, ->
                 expect(u.opacity($oldGhost)).toBeAround(0.5, 0.15)
                 expect(u.opacity($newGhost)).toBeAround(0.5, 0.15)
                 done()

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

@@ -318,13 +318,24 @@ describe 'up.modal', ->
     describe 'up.modal.close', ->
-      it 'closes a currently open modal'
+      it 'closes a currently open modal', (done) ->
+        up.modal.extract('.modal', '<div class="modal">Modal content</div>')
-      it 'does nothing if no modal is open'
+        modalContent = $('.modal')
+        expect(modalContent).toBeInDOM()
-    describe 'up.modal.source', ->
+        up.modal.close().then ->
+          expect(modalContent).not.toBeInDOM()
+          done()
-      it 'should have tests'
+      it 'does nothing if no modal is open', (done) ->
+        wasClosed = false
+        up.on 'up:modal:close', ->
+          wasClosed = true
+        up.modal.close().then ->
+          expect(wasClosed).toBe(false)
+          done()
   describe 'unobtrusive behavior', ->
@@ -443,6 +454,79 @@ describe 'up.modal', ->
           expect(wasClosed).toBe(false)
           expect(wasDefaultPrevented).toBe(false)
+    describe 'template behavior', ->
+      it 'closes the modal on close icon click', (done) ->
+        wasClosed = false
+        up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false)
+        closeIcon = $('.up-modal-close')
+        up.on 'up:modal:close', ->
+          wasClosed = true
+        closeIcon.click()
+        u.nextFrame ->
+          expect(wasClosed).toBe(true)
+          done()
+      it 'closes the modal on backdrop click', (done) ->
+        wasClosed = false
+        up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false)
+        backdrop = $('.up-modal-backdrop')
+        up.on 'up:modal:close', ->
+          wasClosed = true
+        backdrop.click()
+        u.nextFrame ->
+          expect(wasClosed).toBe(true)
+          done()
+      it 'closes the modal when the user presses the escape key', (done) ->
+        wasClosed = false
+        up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false)
+        up.on 'up:modal:close', ->
+          wasClosed = true
+        escapeEvent = $.Event('keydown', keyCode: 27)
+        $('body').trigger(escapeEvent)
+        u.nextFrame ->
+          expect(wasClosed).toBe(true)
+          done()
+      describe 'when opened with { closable: false }', ->
+        it 'does not render a close icon', ->
+          up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false, closable: false)
+          modal = $('.up-modal')
+          expect(modal).not.toContainElement('.up-modal-close')
+        it 'does not close the modal on backdrop click', (done) ->
+          wasClosed = false
+          up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false, closable: false)
+          backdrop = $('.up-modal-backdrop')
+          up.on 'up:modal:close', ->
+            wasClosed = true
+          backdrop.click()
+          u.nextFrame ->
+            expect(wasClosed).toBe(false)
+            done()
+        it 'does not close the modal when the user presses the escape key', (done) ->
+          wasClosed = false
+          up.modal.extract('.modal', '<div class="modal">Modal content</div>', animation: false, closable: false)
+          up.on 'up:modal:close', ->
+            wasClosed = true
+          escapeEvent = $.Event('keydown', keyCode: 27)
+          $('body').trigger(escapeEvent)
+          u.nextFrame ->
+            expect(wasClosed).toBe(false)
+            done()
     describe 'when replacing content', ->
       beforeEach ->