Unfragile JS specs

Sometimes on re-run, this spec doesn't have vendor/date loaded properly,
and because there are dependencies on the global behavior that
file adds, they fail intermittantly depending on whether
they've been required ahead of time.  Explicitly adding the requirement
seems to stabilize that failure.

Also we depend upon the require run to bind element_toggler to document.
because other places can strip off events, and the require doesn't run
everytime, I'm giving it a hook so you can explicitly bind up again
at any point with the "bind" method.

Also, I18n stubbing was in some way not getting a frame
popped, and that caused translation failures in some
cases.  Adding a "clear" method to clear out
stubbing in teardown to make sure there are no
artifacts.

Change-Id: I715f4f326e6796d583501ec7df24de5fc04b24e8
Reviewed-on: https://gerrit.instructure.com/54830
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
Product-Review: Ethan Vizitei <evizitei@instructure.com>
QA-Review: Ethan Vizitei <evizitei@instructure.com>
Tested-by: Ethan Vizitei <evizitei@instructure.com>

app/coffeescripts/behaviors/elementToggler.coffee

@@ -82,24 +82,32 @@ define [
 
     $allElementsControllingRegion.each updateTextToState( if showRegion then 'Shown' else 'Hidden' )
 
-  $(document).on 'click change keyclick', '.element_toggler[aria-controls]', (event) ->
-    $this = $(this)
 
-    if $this.is('input[type="checkbox"]')
-      return if event.type is 'click'
-      force = $this.prop('checked')
+  elementTogglerBehavior =
+    bind: ->
+      $(document).on 'click change keyclick', '.element_toggler[aria-controls]', (event) ->
+        $this = $(this)
 
-    event.preventDefault() if event.type is 'click'
+        if $this.is('input[type="checkbox"]')
+          return if event.type is 'click'
+          force = $this.prop('checked')
 
-    # allow .links inside .user_content to be elementTogglers, but only for other elements inside of
-    # that .user_content area
-    $parent = $this.closest('.user_content')
-    $parent = $(document.body) unless $parent.length
+        event.preventDefault() if event.type is 'click'
 
-    $region = $parent.find("##{$this.attr('aria-controls').replace(/\s/g, ', #')}")
-    toggleRegion($region, force, $this) if $region.length
+        # allow .links inside .user_content to be elementTogglers, but only for other elements inside of
+        # that .user_content area
+        $parent = $this.closest('.user_content')
+        $parent = $(document.body) unless $parent.length
 
-    $icon = $this.find('i[class*="icon-mini-arrow"].auto_rotate')
-    if $icon.length
-      $icon.toggleClass('icon-mini-arrow-down')
-      $icon.toggleClass('icon-mini-arrow-right')
+        $region = $parent.find("##{$this.attr('aria-controls').replace(/\s/g, ', #')}")
+        toggleRegion($region, force, $this) if $region.length
+
+        $icon = $this.find('i[class*="icon-mini-arrow"].auto_rotate')
+        if $icon.length
+          $icon.toggleClass('icon-mini-arrow-down')
+          $icon.toggleClass('icon-mini-arrow-right')
+
+
+  elementTogglerBehavior.bind()
+
+  return elementTogglerBehavior

app/coffeescripts/react_files/components/FriendlyDatetime.coffee

@@ -1,4 +1,5 @@
 define [
+  'i18nObj'
   'react'
   'timezone'
   'underscore'
@@ -6,7 +7,7 @@ define [
   'compiled/object/assign'
   'jquery'
   'jquery.instructure_date_and_time'
-], (React, tz, _, withReactElement, ObjectAssign, $) ->
+], (I18n, React, tz, _, withReactElement, ObjectAssign, $) ->
 
 
   slowRender = withReactElement ->
@@ -14,6 +15,7 @@ define [
     return time() unless datetime?
     datetime = tz.parse(datetime) unless _.isDate datetime
     fudged = $.fudgeDateForProfileTimezone(datetime)
+    friendly = $.friendlyDatetime(fudged)
 
     time ObjectAssign(@props, {
       title: $.datetimeString(datetime)
@@ -21,7 +23,7 @@ define [
     }),
       span className: 'visible-desktop',
         # something like: Mar 6, 2014
-        $.friendlyDatetime(fudged)
+        friendly
 
 
       span className: 'hidden-desktop',

app/views/jst/assignments/AssignmentGroupListItem.handlebars

@@ -115,7 +115,7 @@
 
   </div>
 
-  <div id="assignment_group_{{id}}_assignments" >
+  <div id="assignment_group_{{id}}_assignments" class="assignment-list" >
     <ul class="collectionViewItems ig-list draggable"></ul>
   </div>
 

spec/coffeescripts/helpers/I18nStubber.coffee

@@ -14,6 +14,11 @@ define ['i18nObj'], (I18n) ->
       I18n.locale = locale
       I18n.translations = translations
 
+    clear: ()->
+      while(frames.length > 0)
+        this.popFrame()
+
+
     stub: (locale, translations) ->
       throw 'I18nStubber: stub without a stored frame' unless frames.length
       scope = I18n.translations

spec/coffeescripts/react_files/components/FilePreviewSpec.coffee

@@ -13,6 +13,7 @@ define [
   '../mockFilesENV'
   '../TestLocation'
   '../../helpers/stubRouterContext'
+  'vendor/date'
 ], ($, React, Router, Modal, RolesBundle, FilesApp, filesEnv, FilePreviewComponent, Folder, File, FilesCollection, mockFilesENV, TestLocation, stubRouterContext) ->
 
   Simulate = React.addons.TestUtils.Simulate

spec/coffeescripts/react_files/components/FriendlyDatetimeSpec.coffee

@@ -1,11 +1,16 @@
 define [
   'react'
   'compiled/react_files/components/FriendlyDatetime'
-], (React, FriendlyDatetime) ->
+  'i18nObj'
+  'helpers/I18nStubber'
+], (React, FriendlyDatetime, I18n, I18nStubber) ->
 
   TestUtils = React.addons.TestUtils
 
   module 'FriendlyDatetime',
+    setup: ->
+      I18nStubber.clear()
+
   test "parses datetime from a string", ->
     fDT = React.createFactory(FriendlyDatetime)
     rendered = TestUtils.renderIntoDocument(fDT(datetime:'1431570574'))

spec/coffeescripts/views/assignments/AssignmentGroupListItemViewSpec.coffee

@@ -10,9 +10,7 @@ define [
   'helpers/fakeENV'
   'helpers/jquery.simulate'
   'compiled/behaviors/elementToggler'
-], (Backbone, AssignmentGroupCollection, AssignmentGroup, Assignment, AssignmentGroupListItemView, AssignmentListItemView, AssignmentGroupListView, $, fakeENV) ->
-  fixtures = $('#fixtures')
-
+], (Backbone, AssignmentGroupCollection, AssignmentGroup, Assignment, AssignmentGroupListItemView, AssignmentListItemView, AssignmentGroupListView, $, fakeENV, simulate, elementToggler) ->
   assignment1 = ->
     date1 =
       "due_at":"2013-08-28T23:59:00-06:00"
@@ -130,6 +128,8 @@ define [
     setup: ->
       fakeENV.setup()
       @model = createAssignmentGroup()
+      $(document).off()
+      elementToggler.bind()
 
     teardown: ->
       fakeENV.teardown()
@@ -144,7 +144,7 @@ define [
     view = createCollectionView()
     assignmentGroups = {
       item: view.$el.find('.search_show'),
-    };
+    }
     view.$el.find('#assignment_1').trigger('sortstart', assignmentGroups)
     dragHandle = view.$("#assignment_1").find("i").attr('class')
     equal dragHandle, "icon-drag-handle"
@@ -223,9 +223,12 @@ define [
 
   test "toggleCollapse toggles expansion", ->
     view = createView(@model)
+    $toggle_el = view.$el.find(".element_toggler")
     #make sure the cache starts at true
     view.toggleCache() unless view.shouldBeExpanded()
 
+    ok(view.currentlyExpanded())
+
     view.toggleCollapse()
     ok !view.currentlyExpanded()
 

spec/coffeescripts/widgets/DatetimeFieldSpec.coffee

@@ -16,6 +16,9 @@ define [
       @$field = $('<input type="text" name="due_at">')
       @field = new DatetimeField(@$field, {})
 
+    teardown: ->
+      I18nStubber.clear()
+
   test 'should include date and time, but not always time, by default', ->
     @field.processTimeOptions({})
     ok @field.showDate, 'showDate is true'