Extract simpleSearch into a separate file

h/static/scripts/directives.coffee

@@ -400,39 +400,6 @@ fuzzytime = ['$filter', '$window', ($filter, $window) ->
   template: '<a target="_blank" href="{{shared_link}}" title="{{hint}}">{{ftime | date:mediumDate}}</a>'
 ]
 
-
-simpleSearch = ['$parse', ($parse) ->
-  uuid = 0
-  link: (scope, elem, attr, ctrl) ->
-    _search = $parse(attr.onsearch)
-    _clear = $parse(attr.onclear)
-
-    scope.viewId = uuid++
-    scope.dosearch = ->
-      _search(scope, {"this": scope.searchtext})
-
-    scope.reset = (event) ->
-      event.preventDefault()
-      scope.searchtext = ''
-      _clear(scope) if attr.onclear
-
-    scope.$watch attr.query, (query) ->
-      if query?
-        scope.searchtext = query
-        _search(scope, {"this": scope.searchtext})
-
-  restrict: 'C'
-  template: '''
-            <form class="simple-search-form" ng-class="!searchtext && 'simple-search-inactive'" name="searchBox" ng-submit="dosearch()">
-              <input id="simple-search-{{viewId}}" class="simple-search-input" type="text" ng-model="searchtext" name="searchText" placeholder="Search…" />
-              <label for="simple-search-{{viewId}}" class="simple-search-icon icon-search"></label>
-              <button class="simple-search-clear" type="reset" ng-hide="!searchtext" ng-click="reset($event)">
-                <i class="icon-x"></i>
-              </button>
-            </form>
-            '''
-]
-
 whenscrolled = ->
   link: (scope, elem, attr) ->
     elem.bind 'scroll', ->
@@ -452,5 +419,4 @@ angular.module('h.directives', ['ngSanitize'])
 .directive('thread', thread)
 .directive('username', username)
 .directive('repeatAnim', repeatAnim)
-.directive('simpleSearch', simpleSearch)
 .directive('whenscrolled', whenscrolled)

h/static/scripts/directives/simple-search.coffee

+simpleSearch = ['$parse', ($parse) ->
+  uuid = 0
+  link: (scope, elem, attr, ctrl) ->
+    _search = $parse(attr.onsearch)
+    _clear = $parse(attr.onclear)
+
+    scope.viewId = uuid++
+    scope.dosearch = ->
+      _search(scope, {"this": scope.searchtext})
+
+    scope.reset = (event) ->
+      event.preventDefault()
+      scope.searchtext = ''
+      _clear(scope) if attr.onclear
+
+    scope.$watch attr.query, (query) ->
+      if query?
+        scope.searchtext = query
+        _search(scope, {"this": scope.searchtext})
+
+  restrict: 'C'
+  template: '''
+            <form class="simple-search-form" ng-class="!searchtext && 'simple-search-inactive'" name="searchBox" ng-submit="dosearch()">
+              <input id="simple-search-{{viewId}}" class="simple-search-input" type="text" ng-model="searchtext" name="searchText" placeholder="Search…" />
+              <label for="simple-search-{{viewId}}" class="simple-search-icon icon-search"></label>
+              <button class="simple-search-clear" type="reset" ng-hide="!searchtext" ng-click="reset($event)">
+                <i class="icon-x"></i>
+              </button>
+            </form>
+            '''
+]
+
+
+angular.module('h.directives').directive('simpleSearch', simpleSearch)

tests/js/directives-test.coffee

@@ -153,52 +153,3 @@ describe 'h.directives', ->
       it 'opens with only the username', ->
         $element.find('.user').click()
         sinon.assert.calledWith(fakeWindow.open, '/u/jim')
-
-  describe '.simpleSearch', ->
-    $element = null
-    beforeEach ->
-      $scope.update = sinon.spy()
-      $scope.clear = sinon.spy()
-
-      template= '''
-      <div class="simpleSearch"
-            query="query"
-            onsearch="update(this)"
-            onclear="clear()">
-      </div>
-      '''
-
-      $element = $compile(angular.element(template))($scope)
-      $scope.$digest()
-
-    it 'updates the search-bar', ->
-      $scope.query = "Test query"
-      $scope.$digest()
-      assert.equal($scope.searchtext, $scope.query)
-
-    it 'calls the given search function', ->
-      $scope.query = "Test query"
-      $scope.$digest()
-      $element.triggerHandler('submit')
-      sinon.assert.calledWith($scope.update, "Test query")
-
-    it 'calls the given clear function', ->
-      $element.find('.simple-search-clear').click()
-      assert($scope.clear.called)
-
-    it 'clears the search-bar', ->
-      $scope.query = "Test query"
-      $scope.$digest()
-      $element.find('.simple-search-clear').click()
-      assert.equal($scope.searchtext, '')
-
-    it 'adds a class to the form when there is no input value', ->
-      $form = $element.find('.simple-search-form')
-      assert.include($form.prop('className'), 'simple-search-inactive')
-
-    it 'removes the class from the form when there is an input value', ->
-      $scope.query = "Test query"
-      $scope.$digest()
-
-      $form = $element.find('.simple-search-form')
-      assert.notInclude($form.prop('className'), 'simple-search-inactive')

tests/js/directives/simple-search-test.coffee

+assert = chai.assert
+
+describe 'h.directives', ->
+  $scope = null
+  $compile = null
+  fakeWindow = null
+
+  beforeEach module('h.directives')
+
+  beforeEach inject (_$compile_, _$rootScope_) ->
+    $compile = _$compile_
+    $scope = _$rootScope_.$new()
+
+  describe '.simpleSearch', ->
+    $element = null
+    beforeEach ->
+      $scope.update = sinon.spy()
+      $scope.clear = sinon.spy()
+
+      template= '''
+      <div class="simpleSearch"
+            query="query"
+            onsearch="update(this)"
+            onclear="clear()">
+      </div>
+      '''
+
+      $element = $compile(angular.element(template))($scope)
+      $scope.$digest()
+
+    it 'updates the search-bar', ->
+      $scope.query = "Test query"
+      $scope.$digest()
+      assert.equal($scope.searchtext, $scope.query)
+
+    it 'calls the given search function', ->
+      $scope.query = "Test query"
+      $scope.$digest()
+      $element.triggerHandler('submit')
+      sinon.assert.calledWith($scope.update, "Test query")
+
+    it 'calls the given clear function', ->
+      $element.find('.simple-search-clear').click()
+      assert($scope.clear.called)
+
+    it 'clears the search-bar', ->
+      $scope.query = "Test query"
+      $scope.$digest()
+      $element.find('.simple-search-clear').click()
+      assert.equal($scope.searchtext, '')
+
+    it 'adds a class to the form when there is no input value', ->
+      $form = $element.find('.simple-search-form')
+      assert.include($form.prop('className'), 'simple-search-inactive')
+
+    it 'removes the class from the form when there is an input value', ->
+      $scope.query = "Test query"
+      $scope.$digest()
+
+      $form = $element.find('.simple-search-form')
+      assert.notInclude($form.prop('className'), 'simple-search-inactive')