Add ZenMode javascript specs

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;
   }

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/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)