Merge lp:~rharding/juju-gui/search-widget into lp:juju-gui/experimental

[Richard Harding]

Implement the browser search control widget.

- Add a new widget containing the search input
- Provide events to the outside world to update/watch for search phrase
changes
- Add tests
- Hook widget into the render of the fullscreen and sidebar views.

https://codereview.appspot.com/7519044/

[Richard Harding (rharding)]

Reviewers: mp+152737_code.launchpad.net,

Message:
Please take a look.

Description:
Implement the browser search control widget.

- Add a new widget containing the search input
- Provide events to the outside world to update/watch for search phrase
changes
- Add tests
- Hook widget into the render of the fullscreen and sidebar views.
- NOTES:
   - There is discussion under way of design changes to the search area
so it's
   not completely tied into the views. The sidebar view has some event
binding
   to demonstrate use, but it's not complete and doesn't exist in the
   fullscreen view at the moment.
   - Currently the design would have this widget exist twice, once in
each
   sidebar/fullscreen view. If we do keep the views around (persist them)
for
   performance we'll need to add a sync mechanism so they both represent
the
   same search. Not implemented at this time.
   - The search widget will support autocomplete. It's added to the board
as a
   second card.

https://code.launchpad.net/~rharding/juju-gui/search-widget/+merge/152737

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/7519044/

Affected files:
   A [revision details]
   M app/modules-debug.js
   M app/subapps/browser/templates/fullscreen.handlebars
   M app/subapps/browser/templates/sidebar.handlebars
   M app/subapps/browser/views/fullscreen.js
   M app/subapps/browser/views/sidebar.js
   A app/templates/browser-search.handlebars
   A app/widgets/charm-search.js
   M lib/views/stylesheet.less
   M test/index.html
   M test/test_browser_app.js
   A test/test_browser_search_widget.js

[Jeff Pihach (hatch)]

Looks good! Just a few small comments/changes below

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/fullscreen.js
File app/subapps/browser/views/fullscreen.js (right):

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/fullscreen.js#newcode45
app/subapps/browser/views/fullscreen.js:45:
search.render(tpl_node.one('.bws-search'));
At this point you are rendering a widget into an element which isn't yet
rendered onto the page. What you might notice is that you will end up
with odd bugs when doing this because of dom calculations (scrollview
has this issue).

A workaround is to put these in an 'afterRender' method and then call
that method in the showView() callback.

You don't need to change this - I was just pointing that out in the
event you run into that issue :-)

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/sidebar.js
File app/subapps/browser/views/sidebar.js (right):

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/sidebar.js#newcode42
app/subapps/browser/views/sidebar.js:42: _bindEvents: function() {
Where is this method called from?

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/sidebar.js#newcode44
app/subapps/browser/views/sidebar.js:44:
this.search.on(this.search.EVT_UPDATE_SEARCH, this._searchChanged,
this);
These events aren't being detached on destroy

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/sidebar.js#newcode103
app/subapps/browser/views/sidebar.js:103:
this.search.render(tpl_node.one('.bws-search'));
See the rendering outside of the DOM issue comment from the previous
file.

https://codereview.appspot.com/7519044/diff/1/app/widgets/charm-search.js
File app/widgets/charm-search.js (right):

https://codereview.appspot.com/7519044/diff/1/app/widgets/charm-search.js#newcode110
app/widgets/charm-search.js:110:
this.get('contentBox').one('input').set('value', '');
If the input is in focus then this will trigger valueChange, I
recommend:

input.blur();
input.set('value', '');

https://codereview.appspot.com/7519044/diff/1/app/widgets/charm-search.js#newcode175
app/widgets/charm-search.js:175:
this.get('boundingBox').one('input').set('value', newval);
If this input is in focus then it will trigger valueChange. See above.

https://codereview.appspot.com/7519044/diff/1/test/test_browser_search_widget.js
File test/test_browser_search_widget.js (right):

https://codereview.appspot.com/7519044/diff/1/test/test_browser_search_widget.js#newcode33
test/test_browser_search_widget.js:33: it('should supports search
changed events', function(done) {
s/supports/support
s/changed/change
;-)

https://codereview.appspot.com/7519044/diff/1/test/test_browser_search_widget.js#newcode55
test/test_browser_search_widget.js:55: it('should supports setting
search string', function() {
%s/supports/support
:-D

https://codereview.appspot.com/7519044/

[lp:~rharding/juju-gui/search-widget]

430. By Richard Harding on 2013-03-12

Code review updates

[Richard Harding (rharding)]

Comments submitted and code updated.

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/fullscreen.js
File app/subapps/browser/views/fullscreen.js (right):

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/fullscreen.js#newcode45
app/subapps/browser/views/fullscreen.js:45:
search.render(tpl_node.one('.bws-search'));
On 2013/03/12 16:25:35, jeff.pihach wrote:
> At this point you are rendering a widget into an element which isn't
yet
> rendered onto the page. What you might notice is that you will end up
with odd
> bugs when doing this because of dom calculations (scrollview has this
issue).

> A workaround is to put these in an 'afterRender' method and then call
that
> method in the showView() callback.

> You don't need to change this - I was just pointing that out in the
event you
> run into that issue :-)

Thanks for the heads up. In this case I don't think I'll hit any issues
with that. I'd rather make sure that the UI rendered in one swoop vs a
follow up.

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/sidebar.js
File app/subapps/browser/views/sidebar.js (right):

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/sidebar.js#newcode42
app/subapps/browser/views/sidebar.js:42: _bindEvents: function() {
On 2013/03/12 16:25:35, jeff.pihach wrote:
> Where is this method called from?

Ummm...well not i's called from the end of render() :)

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/sidebar.js#newcode44
app/subapps/browser/views/sidebar.js:44:
this.search.on(this.search.EVT_UPDATE_SEARCH, this._searchChanged,
this);
On 2013/03/12 16:25:35, jeff.pihach wrote:
> These events aren't being detached on destroy

Updated

https://codereview.appspot.com/7519044/diff/1/app/subapps/browser/views/sidebar.js#newcode103
app/subapps/browser/views/sidebar.js:103:
this.search.render(tpl_node.one('.bws-search'));
On 2013/03/12 16:25:35, jeff.pihach wrote:
> See the rendering outside of the DOM issue comment from the previous
file.

rgr, thanks for the heads up.

https://codereview.appspot.com/7519044/diff/1/app/widgets/charm-search.js
File app/widgets/charm-search.js (right):

https://codereview.appspot.com/7519044/diff/1/app/widgets/charm-search.js#newcode110
app/widgets/charm-search.js:110:
this.get('contentBox').one('input').set('value', '');
On 2013/03/12 16:25:35, jeff.pihach wrote:
> If the input is in focus then this will trigger valueChange, I
recommend:

> input.blur();
> input.set('value', '');

Thanks for bringing this up. I think the goal is to fire the event so
I've added focus() to the input. The use case for this is something
where something in the UI forces a search/filter update to be performed.
If another view/widget wants to update the search string, it should be
allowed, updated, and then this widget fires a change event so that the
view can reload new data.

https://codereview.appspot.com/7519044/diff/1/app/widgets/charm-search.js#newcode175
app/widgets/charm-search.js:175:
this.get('boundingBox').one('input').set('value', newval);
On 2013/03/12 16:25:35, jeff.pihach wrote:
> If this input is in focus then it will trigger ...

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/7519044/

[lp:~rharding/juju-gui/search-widget]

431. By Richard Harding on 2013-03-12

Add the focus to the input to make sure change event is fired on update

[Richard Harding (rharding)]

Please take a look.

https://codereview.appspot.com/7519044/

[Jeff Pihach (hatch)]

LGTM Thanks!

https://codereview.appspot.com/7519044/

[j.c.sackett (jcsackett)]

LGTM, just one question below.

https://codereview.appspot.com/7519044/diff/13001/app/widgets/charm-search.js
File app/widgets/charm-search.js (right):

https://codereview.appspot.com/7519044/diff/13001/app/widgets/charm-search.js#newcode165
app/widgets/charm-search.js:165: syncUI: function() {},
Do you even need it, then?

https://codereview.appspot.com/7519044/

[lp:~rharding/juju-gui/search-widget]

432. By Richard Harding on 2013-03-13

Garden

[Richard Harding (rharding)]

*** Submitted:

Implement the browser search control widget.

- Add a new widget containing the search input
- Provide events to the outside world to update/watch for search phrase
changes
- Add tests
- Hook widget into the render of the fullscreen and sidebar views.

R=jeff.pihach, j.c.sackett
CC=
https://codereview.appspot.com/7519044

https://codereview.appspot.com/7519044/

=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-03-11 20:46:31 +0000
+++ app/modules-debug.js	2013-03-13 15:32:23 +0000
@@ -68,6 +68,10 @@
           fullpath: '/juju-ui/widgets/charm-slider.js'
         },
 
+        'browser-search-widget': {
+          fullpath: '/juju-ui/widgets/charm-search.js'
+        },
+
         'reconnecting-websocket': {
           fullpath: '/juju-ui/assets/javascripts/reconnecting-websocket.js'
         },

=== modified file 'app/subapps/browser/templates/fullscreen.handlebars'
--- app/subapps/browser/templates/fullscreen.handlebars	2013-03-07 22:25:58 +0000
+++ app/subapps/browser/templates/fullscreen.handlebars	2013-03-13 15:32:23 +0000
@@ -1,3 +1,4 @@
 <div id="bws-fullscreen">
-    <a href="#" class="hide">Hide</a>
+    <div class="bws-search">
+    </div>
 </div>

=== modified file 'app/subapps/browser/templates/sidebar.handlebars'
--- app/subapps/browser/templates/sidebar.handlebars	2013-03-07 22:25:58 +0000
+++ app/subapps/browser/templates/sidebar.handlebars	2013-03-13 15:32:23 +0000
@@ -2,13 +2,6 @@
 <div id="bws-sidebar">
 
     <div class="bws-search">
-        <h5 class="reset">
-          <img height="16px" width="16px"/>&nbsp;Charm Browser
-        </h5>
-        <form>
-          <input type="search" name="search_term"
-            placeholder="Search for a charm..." />
-        </form>
     </div>
 
     <div class="bws-left">Main View</div>

=== modified file 'app/subapps/browser/views/fullscreen.js'
--- app/subapps/browser/views/fullscreen.js	2013-03-06 18:24:05 +0000
+++ app/subapps/browser/views/fullscreen.js	2013-03-13 15:32:23 +0000
@@ -3,7 +3,8 @@
 
 YUI.add('subapp-browser-fullscreen', function(Y) {
   var ns = Y.namespace('juju.browser.views'),
-      views = Y.namespace('juju.views');
+      views = Y.namespace('juju.views'),
+      widgets = Y.namespace('juju.widgets');
 
   /**
    * Browser Sub App for the Juju Gui.
@@ -37,10 +38,16 @@
      *
      */
     render: function(container) {
+      var search = new widgets.browser.Search(),
+          tpl = this.template(),
+          tpl_node = Y.Node.create(tpl);
+
+      search.render(tpl_node.one('.bws-search'));
+
       if (!Y.Lang.isValue(container)) {
         container = this.get('container');
       }
-      container.setHTML(this.template({}));
+      container.setHTML(tpl_node);
     },
 
     /**
@@ -56,5 +63,8 @@
   });
 
 }, '0.1.0', {
-  requires: ['view']
+  requires: [
+    'browser-search-widget',
+    'view'
+  ]
 });

=== modified file 'app/subapps/browser/views/sidebar.js'
--- app/subapps/browser/views/sidebar.js	2013-03-08 19:52:02 +0000
+++ app/subapps/browser/views/sidebar.js	2013-03-13 15:32:23 +0000
@@ -10,7 +10,8 @@
  */
 YUI.add('subapp-browser-sidebar', function(Y) {
   var ns = Y.namespace('juju.browser.views'),
-      views = Y.namespace('juju.views');
+      views = Y.namespace('juju.views'),
+      widgets = Y.namespace('juju.widgets');
 
   /**
    * Sidebar master view for the gui browser.
@@ -20,6 +21,7 @@
    *
    */
   ns.Sidebar = Y.Base.create('browser-view-sidebar', Y.View, [], {
+    _events: [],
     template: views.Templates.sidebar,
     visible: true,
 
@@ -28,9 +30,39 @@
      *
      */
     events: {
-      '.sidebar-toggle': {
-        click: '_toggleSidebar'
-      }
+    },
+
+    /**
+     * Bind the non native DOM events from within the View. This includes
+     * watching widgets used for their exposed events.
+     *
+     * @method _bindEvents
+     * @private
+     *
+     */
+    _bindEvents: function() {
+      // Watch the Search widget for changes to the search params.
+      this._events.push(
+          this.search.on(
+              this.search.EVT_UPDATE_SEARCH, this._searchChanged, this)
+      );
+
+      this._events.push(
+          this.search.on(
+              this.search.EVT_TOGGLE_VIEWABLE, this._toggleSidebar, this)
+      );
+    },
+
+    /**
+     * When the search term or filter is changed, fetch new data and redraw.
+     *
+     * @method _searchChanged
+     * @param {Event} ev event object from catching changes.
+     * @private
+     *
+     */
+    _searchChanged: function(ev) {
+      console.log('Sidebar search changed.');
     },
 
     /**
@@ -55,6 +87,18 @@
     },
 
     /**
+     * Destroy this view and clear from the dom world.
+     *
+     * @method destructor
+     *
+     */
+    destructor: function() {
+      Y.Array.each(this._events, function(ev) {
+        ev.detach();
+      });
+    },
+
+    /**
      * General YUI initializer.
      *
      * @method initializer
@@ -70,19 +114,21 @@
      *
      */
     render: function(container) {
+      var tpl = this.template(),
+          tpl_node = Y.Node.create(tpl);
+
+      // build widgets used in the template.
+      this.search = new widgets.browser.Search(),
+      this.search.render(tpl_node.one('.bws-search'));
+
       if (typeof container !== 'object') {
         container = this.get('container');
       }
-      container.setHTML(this.template({}));
-    },
+      container.setHTML(tpl_node);
 
-    /**
-     * Destroy this view and clear from the dom world.
-     *
-     * @method destructor
-     *
-     */
-    destructor: function() {}
+      // Bind extra events that aren't covered by the Y.View events object.
+      this._bindEvents();
+    }
 
   }, {
     ATTRS: {}
@@ -90,6 +136,7 @@
 
 }, '0.1.0', {
   requires: [
+    'browser-search-widget',
     'view'
   ]
 });

=== added file 'app/templates/browser-search.handlebars'
--- app/templates/browser-search.handlebars	1970-01-01 00:00:00 +0000
+++ app/templates/browser-search.handlebars	2013-03-13 15:32:23 +0000
@@ -0,0 +1,12 @@
+<div class="search-container">
+    <div class="bws-icon">Icon</div>
+    <div class=""><a href="">Charm Browser</a></div>
+    <div class="align-right">
+        <form>
+            <input type="search" name="bws_search"
+                value="{{ term }}"
+                placeholder="Search for a charm..."/>
+        </form>
+    </div>
+    <div class="toggle-fullscreen align-right"> X </div>
+</div>

=== added file 'app/widgets/charm-search.js'
--- app/widgets/charm-search.js	1970-01-01 00:00:00 +0000
+++ app/widgets/charm-search.js	2013-03-13 15:32:23 +0000
@@ -0,0 +1,195 @@
+'use strict';
+
+
+/**
+ * The widget used across Browser view to manage the search box and the
+ * controls for selecting which view you're in.
+ *
+ * @module widgets
+ * @submodule browser
+ *
+ */
+YUI.add('browser-search-widget', function(Y) {
+  var ns = Y.namespace('juju.widgets.browser'),
+      templates = Y.namespace('juju.views').Templates;
+
+  /**
+   * Search widget present in the Charm browser across both fullscreen and
+   * sidebar views.
+   *
+   * @class Search
+   * @extends {Y.Widget}
+   *
+   */
+  ns.Search = Y.Base.create('search-widget', Y.Widget, [], {
+    _events: [],
+
+    EVT_CLEAR_SEARCH: 'clear_search',
+    EVT_TOGGLE_VIEWABLE: 'toggle_viewable',
+    EVT_TOGGLE_FULLSCREEN: 'toggle_fullscreen',
+    EVT_UPDATE_SEARCH: 'update_search',
+    EVT_SEARCH_CHANGED: 'search_changed',
+
+    TEMPLATE: templates['browser-search'],
+
+    /**
+     * Expose to the outside world that we've got a request to go fullscreen.
+     *
+     * @method _toggleFullScreen
+     * @param {Event} ev the click event from the control.
+     * @private
+     *
+     */
+    _toggleFullScreen: function(ev) {
+      this.fire(this.EVT_TOGGLE_FULLSCREEN);
+    },
+
+    /**
+     * Expose to the outside world that we've got a request to hide from
+     * sight.
+     *
+     * @method _toggleViewable
+     * @param {Event} ev the click event from the control.
+     * @private
+     *
+     */
+    _toggleViewable: function(ev) {
+      this.fire(this.EVT_TOGGLE_VIEWABLE);
+    },
+
+    /**
+     * detach listeners for dom events.
+     *
+     * @method _unbind_events
+     * @private
+     * @return {undefined} mutates only.
+     */
+    _unbindUI: function() {
+      Y.array.each(this._events, function(item) {
+        item.detach();
+      });
+    },
+
+    /**
+     * bind the UI events to the DOM making up the widget control.
+     *
+     * @method bindUI
+     *
+     */
+    bindUI: function() {
+      var container = this.get('boundingBox');
+
+      this._events.push(
+          container.one('.bws-icon').on(
+              'click', this._toggleViewable, this)
+      );
+      this._events.push(
+          container.one('.toggle-fullscreen').on(
+              'click', this._toggleFullScreen, this)
+      );
+
+      // Note that the search could be updated either from our internal input
+      // control, or it could come from someone outside of the widget asking
+      // it to update to a specific value. This is how things like clicking
+      // categories can work.
+      var input = container.one('input');
+      this._events.push(
+          input.on('valueChange', function(ev) {
+            this.fire(this.EVT_SEARCH_CHANGED);
+          }, this)
+      );
+    },
+
+    /**
+     * Clear the search input control in order to reset it.
+     *
+     * @method clearSearch
+     *
+     */
+    clearSearch: function() {
+      var input = this.get('contentBox').one('input');
+      input.focus();
+      input.set('value', '');
+    },
+
+
+    /**
+     * destory the widget and unbind all DOM events.
+     *
+     * @method destructor
+     *
+     */
+    destructor: function() {
+      this._unbindUI();
+    },
+
+    /**
+     * Generic initializer for the widget. Publish events we expose for
+     * outside use.
+     *
+     * @method initializer
+     * @param {Object} cfg configuration override object.
+     *
+     */
+    initializer: function(cfg) {
+      /**
+       * Fires when the "Charm Browser" link is checked. Needs to communicate
+       * with the parent view so that it can handle filters and the like. This
+       * widget only needs to clear the search input box.
+       *
+       */
+      this.publish(this.EVT_TOGGLE_VIEWABLE);
+      this.publish(this.EVT_TOGGLE_FULLSCREEN);
+      this.publish(this.EVT_SEARCH_CHANGED);
+    },
+
+    /**
+     * Render all the things!
+     *
+     * @method renderUI
+     *
+     */
+    renderUI: function() {
+      this.get('contentBox').setHTML(
+          this.TEMPLATE(this.getAttrs())
+      );
+    },
+
+    /**
+     * Update the search input to contain the string passed. This is meant to
+     * be used by outside links that want to perform a pre-canned search and
+     * display results.
+     *
+     * @method update_search
+     * @param {String} newval the sting to update the input to.
+     *
+     */
+    updateSearch: function(newval) {
+      var input = this.get('contentBox').one('input');
+      input.focus();
+      input.set('value', newval);
+    }
+
+  }, {
+    ATTRS: {
+
+      /**
+       * @attribute term
+       * @default undefined
+       * @type {String}
+       *
+       */
+      term: {}
+
+    }
+  });
+
+}, '0.1.0', {
+  requires: [
+    'base',
+    'event',
+    'event-valuechange',
+    'juju-templates',
+    'widget'
+  ]
+});

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2013-03-12 17:16:39 +0000
+++ lib/views/stylesheet.less	2013-03-13 15:32:23 +0000
@@ -23,6 +23,7 @@
 @charm-panel-width: 292px;
 @navbar-color: #2D2D2D!important;
 
+
 body {
     margin-top: 87px;
     background-color: #302b28;
@@ -64,6 +65,10 @@
     border: none;
 }
 
+.align-right {
+    text-align: right;
+}
+
 i.sprite {
     display: inline-block;
     vertical-align: middle;

=== modified file 'test/index.html'
--- test/index.html	2013-03-12 17:16:39 +0000
+++ test/index.html	2013-03-13 15:32:23 +0000
@@ -40,6 +40,7 @@
   <script src="test_charm_panel.js"></script>
   <script src="test_charm_small_widget.js"></script>
   <script src="test_charm_slider.js"></script>
+  <script src="test_browser_search_widget.js"></script>
   <script src="test_charm_store.js"></script>
   <script src="test_charm_view.js"></script>
   <script src="test_console.js"></script>

=== modified file 'test/test_browser_app.js'
--- test/test_browser_app.js	2013-03-08 19:52:02 +0000
+++ test/test_browser_app.js	2013-03-13 15:32:23 +0000
@@ -39,6 +39,8 @@
 
       // And the hide button is rendered to the container node.
       assert.isTrue(Y.Lang.isObject(container.one('#bws-fullscreen')));
+      // Also verify that the search widget has rendered into the view code.
+      assert.isTrue(Y.Lang.isObject(container.one('input')));
     });
 
   });
@@ -75,6 +77,8 @@
 
       // And the hide button is rendered to the container node.
       assert.isTrue(Y.Lang.isObject(container.one('#bws-sidebar')));
+      // Also verify that the search widget has rendered into the view code.
+      assert.isTrue(Y.Lang.isObject(container.one('input')));
     });
 
   });

=== added file 'test/test_browser_search_widget.js'
--- test/test_browser_search_widget.js	1970-01-01 00:00:00 +0000
+++ test/test_browser_search_widget.js	2013-03-13 15:32:23 +0000
@@ -0,0 +1,113 @@
+'use strict';
+
+
+describe('browser search widget', function() {
+  var Y, container, Search;
+
+  before(function(done) {
+    Y = YUI(GlobalConfig).use(['browser-search-widget',
+                               'event-simulate',
+                               'node-event-simulate',
+                               'node'], function(Y) {
+      Search = Y.juju.widgets.browser.Search;
+      done();
+    });
+  });
+
+  beforeEach(function() {
+    container = Y.Node.create('<div id="container"></div>');
+    Y.one('body').prepend(container);
+  });
+
+  afterEach(function() {
+    container.remove(true);
+  });
+
+  it('needs to render from the template', function() {
+    var search = new Search();
+    search.render(container);
+    assert.isObject(container.one('.search-container'));
+    assert.isObject(container.one('.bws-icon'));
+  });
+
+  it('should support search chang events', function(done) {
+    // Need a small timeout for the valueChange to pick up the change in the
+    // search input.
+    this.timeout(200);
+    var search = new Search();
+    search.render(container);
+
+    var triggered = false;
+
+    search.on(search.EVT_SEARCH_CHANGED, function(ev) {
+      triggered = true;
+      // now trigger the event and make sure that it fired to our custom
+      // watcher outside the widget.
+      triggered.should.eql(true);
+      done();
+    });
+
+    var input = container.one('input');
+    input.focus();
+    input.set('value', 'test');
+  });
+
+  it('should support setting search string', function() {
+    var search = new Search();
+    search.render(container);
+
+    search.updateSearch('test');
+    container.one('input').get('value').should.eql('test');
+  });
+
+  it('should supports clearing search string', function() {
+    var search = new Search({
+      term: 'test'
+    });
+    search.render(container);
+    container.one('input').get('value').should.eql('test');
+
+    search.clearSearch();
+    container.one('input').get('value').should.eql('');
+  });
+
+  it('should supports clearing search string', function() {
+    var search = new Search({
+      term: 'test'
+    });
+    search.render(container);
+    container.one('input').get('value').should.eql('test');
+
+    search.clearSearch();
+    container.one('input').get('value').should.eql('');
+  });
+
+  it('should fire a toggle fullscreen event when expand clicked', function() {
+    var search = new Search(),
+        triggered = false;
+    search.render(container);
+
+    search.on(search.EVT_TOGGLE_FULLSCREEN, function(ev) {
+      triggered = true;
+    });
+
+    var toggle = container.one('.toggle-fullscreen');
+    toggle.simulate('click');
+    triggered.should.eql(true);
+  });
+
+  it('should fire a toggle viewable event when icon clicked', function() {
+    var search = new Search(),
+        triggered = false;
+    search.render(container);
+
+    search.on(search.EVT_TOGGLE_VIEWABLE, function(ev) {
+      triggered = true;
+    });
+
+    var toggle = container.one('.bws-icon');
+    toggle.simulate('click');
+    triggered.should.eql(true);
+  });
+
+});