Merge branch 'rs-more-js-testing' into 'master'

More Javascript testing

Continuation of !715

See merge request !736

Gemfile

@@ -195,20 +195,20 @@ gem "uglifier"
 gem 'turbolinks', '~> 2.5.0'
 gem 'jquery-turbolinks'
 
-gem 'select2-rails'
-gem 'jquery-atwho-rails', '~> 1.0.0'
-gem "jquery-rails"
-gem "jquery-ui-rails"
-gem "jquery-scrollto-rails"
-gem "raphael-rails", "~> 2.1.2"
-gem 'bootstrap-sass', '~> 3.0'
-gem "font-awesome-rails", '~> 4.2'
-gem "gitlab_emoji", "~> 0.1"
-gem "gon", '~> 5.0.0'
-gem 'nprogress-rails'
-gem 'request_store'
-gem "virtus"
 gem 'addressable'
+gem 'bootstrap-sass',     '~> 3.0'
+gem 'font-awesome-rails', '~> 4.2'
+gem 'gitlab_emoji',       '~> 0.1'
+gem 'gon',                '~> 5.0.0'
+gem 'jquery-atwho-rails', '~> 1.0.0'
+gem 'jquery-rails',       '3.1.2'
+gem 'jquery-scrollto-rails'
+gem 'jquery-ui-rails'
+gem 'nprogress-rails'
+gem 'raphael-rails',      '~> 2.1.2'
+gem 'request_store'
+gem 'select2-rails'
+gem 'virtus'
 
 group :development do
   gem 'brakeman', require: false

Gemfile.lock

@@ -301,7 +301,7 @@ GEM
     ice_cube (0.11.1)
     ice_nine (0.10.0)
     jquery-atwho-rails (1.0.1)
-    jquery-rails (3.1.0)
+    jquery-rails (3.1.2)
       railties (>= 3.0, < 5.0)
       thor (>= 0.14, < 2.0)
     jquery-scrollto-rails (1.4.3)
@@ -746,7 +746,7 @@ DEPENDENCIES
   html-pipeline (~> 1.11.0)
   httparty
   jquery-atwho-rails (~> 1.0.0)
-  jquery-rails
+  jquery-rails (= 3.1.2)
   jquery-scrollto-rails
   jquery-turbolinks
   jquery-ui-rails

app/assets/javascripts/application.js.coffee

@@ -49,8 +49,6 @@ window.slugify = (text) ->
 window.ajaxGet = (url) ->
   $.ajax({type: "GET", url: url, dataType: "script"})
 
-window.showAndHide = (selector) ->
-
 window.split = (val) ->
   return val.split( /,\s*/ )
 
@@ -92,15 +90,7 @@ window.disableButtonIfAnyEmptyField = (form, form_selector, button_selector) ->
 window.sanitize = (str) ->
   return str.replace(/<(?:.|\n)*?>/gm, '')
 
-window.linkify = (str) ->
-  exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig
-  return str.replace(exp,"<a href='$1'>$1</a>")
-
-window.simpleFormat = (str) ->
-  linkify(sanitize(str).replace(/\n/g, '<br />'))
-
 window.unbindEvents = ->
-  $(document).unbind('scroll')
   $(document).off('scroll')
 
 window.shiftWindow = ->
@@ -196,14 +186,3 @@ $ ->
     new ConfirmDangerModal(form, text)
 
   new Aside()
-
-(($) ->
-  # Disable an element and add the 'disabled' Bootstrap class
-  $.fn.extend disable: ->
-    $(@).attr('disabled', 'disabled').addClass('disabled')
-
-  # Enable an element and remove the 'disabled' Bootstrap class
-  $.fn.extend enable: ->
-    $(@).removeAttr('disabled').removeClass('disabled')
-
-)(jQuery)

app/assets/javascripts/extensions/jquery.js.coffee

@@ -1,13 +1,11 @@
-$.fn.showAndHide = ->
-  $(@).show().
-    delay(3000).
-    fadeOut()
-
-$.fn.enableButton = ->
-  $(@).removeAttr('disabled').
-    removeClass('disabled')
-
-$.fn.disableButton = ->
-  $(@).attr('disabled', 'disabled').
-    addClass('disabled')
+# Disable an element and add the 'disabled' Bootstrap class
+$.fn.extend disable: ->
+  $(@)
+    .attr('disabled', 'disabled')
+    .addClass('disabled')
 
+# Enable an element and remove the 'disabled' Bootstrap class
+$.fn.extend enable: ->
+  $(@)
+    .removeAttr('disabled')
+    .removeClass('disabled')

app/assets/javascripts/profile.js.coffee

@@ -12,11 +12,11 @@ class @Profile
       $(this).find('.update-failed').hide()
 
     $('.update-username form').on 'ajax:complete', ->
-      $(this).find('.btn-save').enableButton()
+      $(this).find('.btn-save').enable()
       $(this).find('.loading-gif').hide()
 
     $('.update-notifications').on 'ajax:complete', ->
-      $(this).find('.btn-save').enableButton()
+      $(this).find('.btn-save').enable()
 
 
     $('.js-choose-user-avatar-button').bind "click", ->

app/assets/javascripts/zen_mode.js.coffee

@@ -1,3 +1,7 @@
+#= require dropzone
+#= require mousetrap
+#= require mousetrap/pause
+
 class @ZenMode
   constructor: ->
     @active_zen_area = null
@@ -26,7 +30,7 @@ class @ZenMode
         @exitZenMode()
 
     $(document).on 'keydown', (e) =>
-      if e.keyCode is $.ui.keyCode.ESCAPE
+      if e.keyCode is 27 # Esc
         @exitZenMode()
         e.preventDefault()
 
@@ -42,7 +46,9 @@ class @ZenMode
       @active_checkbox.prop('checked', false)
       @active_zen_area = null
       @active_checkbox = null
-      window.location.hash = ''
-      window.scrollTo(window.pageXOffset, @scroll_position)
+      @restoreScroll(@scroll_position)
       # Enable dropzone when leaving ZEN mode
       Dropzone.forElement('.div-dropzone').enable()
+
+  restoreScroll: (y) ->
+    window.scrollTo(window.pageXOffset, y)

app/assets/stylesheets/generic/zen.scss

@@ -1,7 +1,7 @@
 .zennable {
   position: relative;
 
-  input {
+  .zen-toggle-comment {
     display: none;
   }
 
@@ -26,10 +26,12 @@
     }
   }
 
+  // Hide the Enter link when we're in Zen mode
   input:checked ~ .zen-backdrop .zen-enter-link {
     display: none;
   }
 
+  // Show the Leave link when we're in Zen mode
   input:checked ~ .zen-backdrop .zen-leave-link {
     display: block;
     position: absolute;
@@ -62,6 +64,9 @@
     }
   }
 
+  // Make the placeholder text in the standard textarea the same color as the
+  // background, effectively hiding it
+
   .zen-backdrop textarea::-webkit-input-placeholder {
     color: white;
   }
@@ -78,6 +83,9 @@
     color: white;
   }
 
+  // Make the color of the placeholder text in the Zenned-out textarea darker,
+  // so it becomes visible
+
   input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder {
     color: #999;
   }

app/views/projects/update.js.haml

@@ -6,4 +6,4 @@
     $(".project-edit-errors").html("#{escape_javascript(render('errors'))}");
     $('.save-project-loader').hide();
     $('.project-edit-container').show();
-    $('.project-edit-content .btn-save').enableButton();
+    $('.project-edit-content .btn-save').enable();

spec/javascripts/extensions/array_spec.js.coffee

@@ -0,0 +1,12 @@
+#= require extensions/array
+
+describe 'Array extensions', ->
+  describe 'first', ->
+    it 'returns the first item', ->
+      arr = [0, 1, 2, 3, 4, 5]
+      expect(arr.first()).toBe(0)
+
+  describe 'last', ->
+    it 'returns the last item', ->
+      arr = [0, 1, 2, 3, 4, 5]
+      expect(arr.last()).toBe(5)

spec/javascripts/extensions/jquery_spec.js.coffee

@@ -0,0 +1,34 @@
+#= require extensions/jquery
+
+describe 'jQuery extensions', ->
+  describe 'disable', ->
+    beforeEach ->
+      fixture.set '<input type="text" />'
+
+    it 'adds the disabled attribute', ->
+      $input = $('input').first()
+
+      $input.disable()
+      expect($input).toHaveAttr('disabled', 'disabled')
+
+    it 'adds the disabled class', ->
+      $input = $('input').first()
+
+      $input.disable()
+      expect($input).toHaveClass('disabled')
+
+  describe 'enable', ->
+    beforeEach ->
+      fixture.set '<input type="text" disabled="disabled" class="disabled" />'
+
+    it 'removes the disabled attribute', ->
+      $input = $('input').first()
+
+      $input.enable()
+      expect($input).not.toHaveAttr('disabled')
+
+    it 'removes the disabled class', ->
+      $input = $('input').first()
+
+      $input.enable()
+      expect($input).not.toHaveClass('disabled')

spec/javascripts/fixtures/zen_mode.html.haml

@@ -0,0 +1,9 @@
+.zennable
+  %input#zen-toggle-comment.zen-toggle-comment{ tabindex: '-1', type: 'checkbox' }
+  .zen-backdrop
+    %textarea#note_note.js-gfm-input.markdown-area{placeholder: 'Leave a comment'}
+    %a.zen-enter-link{tabindex: '-1'}
+      %i.fa.fa-expand
+        Edit in fullscreen
+    %a.zen-leave-link
+      %i.fa.fa-compress

spec/javascripts/spec_helper.coffee

@@ -1,12 +1,3 @@
-# Teaspoon includes some support files, but you can use anything from your own
-# support path too.
-
-# require support/jasmine-jquery-1.7.0
-# require support/jasmine-jquery-2.0.0
-# require support/jasmine-jquery-2.1.0
-# require support/sinon
-# require support/your-support-file
-
 # PhantomJS (Teaspoons default driver) doesn't have support for
 # Function.prototype.bind, which has caused confusion.  Use this polyfill to
 # avoid the confusion.
@@ -21,6 +12,15 @@
 #= require bootstrap
 #= require underscore
 
+# Teaspoon includes some support files, but you can use anything from your own
+# support path too.
+
+# require support/jasmine-jquery-1.7.0
+# require support/jasmine-jquery-2.0.0
+#= require support/jasmine-jquery-2.1.0
+# require support/sinon
+# require support/your-support-file
+
 # Deferring execution
 
 # If you're using CommonJS, RequireJS or some other asynchronous library you can

spec/javascripts/zen_mode_spec.js.coffee

@@ -0,0 +1,52 @@
+#= require zen_mode
+
+describe 'ZenMode', ->
+  fixture.preload('zen_mode.html')
+
+  beforeEach ->
+    fixture.load('zen_mode.html')
+
+    # Stub Dropzone.forElement(...).enable()
+    spyOn(Dropzone, 'forElement').and.callFake ->
+      enable: -> true
+
+    @zen = new ZenMode()
+
+    # Set this manually because we can't actually scroll the window
+    @zen.scroll_position = 456
+
+  # Ohmmmmmmm
+  enterZen = ->
+    $('.zen-toggle-comment').prop('checked', true).trigger('change')
+
+  # Wh- what was that?!
+  exitZen = ->
+    $('.zen-toggle-comment').prop('checked', false).trigger('change')
+
+  describe 'on enter', ->
+    it 'pauses Mousetrap', ->
+      spyOn(Mousetrap, 'pause')
+      enterZen()
+      expect(Mousetrap.pause).toHaveBeenCalled()
+
+  describe 'in use', ->
+    beforeEach ->
+      enterZen()
+
+    it 'exits on Escape', ->
+      $(document).trigger(jQuery.Event('keydown', {keyCode: 27}))
+      expect($('.zen-toggle-comment').prop('checked')).toBe(false)
+
+  describe 'on exit', ->
+    beforeEach ->
+      enterZen()
+
+    it 'unpauses Mousetrap', ->
+      spyOn(Mousetrap, 'unpause')
+      exitZen()
+      expect(Mousetrap.unpause).toHaveBeenCalled()
+
+    it 'restores the scroll position', ->
+      spyOn(@zen, 'restoreScroll')
+      exitZen()
+      expect(@zen.restoreScroll).toHaveBeenCalledWith(456)