Merge lp:~jcsackett/juju-gui/search-view into lp:juju-gui/experimental

[j.c.sackett]

Add search view.

SearchView is pretty basic; it knows its search text, and can query for it via
the Charmworld0 api.
It renders results out to a container, passed in at render.
It requeries and renders when the text changes.

https://codereview.appspot.com/8835044/

[j.c.sackett (jcsackett)]

Reviewers: mp+159493_code.launchpad.net,

Message:
Please take a look.

Description:
Add search view.

SearchView is pretty basic; it knows its search text, and can query for
it via
the Charmworld0 api.
It renders results out to a container, passed in at render.
It requeries and renders when the text changes.

https://code.launchpad.net/~jcsackett/juju-gui/search-view/+merge/159493

(do not edit description out of merge proposal)

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

Affected files:
   A [revision details]
   M app/modules-debug.js
   A app/subapps/browser/views/search.js
   M test/index.html
   M test/test_browser_charm_details.js
   A test/test_browser_search_view.js

[Richard Harding (rharding)]

This branch seems to be missing the tie in for the text input. The
re-search is driven by the ATTR on the view, but getting that text into
there is missing. I'd like to chat and see what the plan is.

Comments below, but take those with a grain of salt as I'm not sure I
follow.

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

https://codereview.appspot.com/8835044/diff/1/app/subapps/browser/views/search.js#newcode29
app/subapps/browser/views/search.js:29: if (!this.get('rendered')) {
this can go away if you move the ajax call per the later comment.

https://codereview.appspot.com/8835044/diff/1/app/subapps/browser/views/search.js#newcode32
app/subapps/browser/views/search.js:32: if (!container) {
move this logic into the render and just assume you're always given a
container here. That way the logic isn't split in two places.

https://codereview.appspot.com/8835044/diff/1/app/subapps/browser/views/search.js#newcode36
app/subapps/browser/views/search.js:36: this.get('store').search(text, {
Can we move this back up to render as is done in the CharmView here:
http://bazaar.launchpad.net/~juju-gui/juju-gui/trunk/view/head:/app/subapps/browser/views/charm.js#L415

This way the _renderSearchResults is only rendering and known to have
results handed to it.

https://codereview.appspot.com/8835044/diff/1/app/subapps/browser/views/search.js#newcode83
app/subapps/browser/views/search.js:83: }));
you can pass the scope as the final parameter to after so that you don't
need to deal with the currentTarget business. Just
this.get('container').

https://codereview.appspot.com/8835044/diff/1/test/test_browser_search_view.js
File test/test_browser_search_view.js (right):

https://codereview.appspot.com/8835044/diff/1/test/test_browser_search_view.js#newcode24
test/test_browser_search_view.js:24: container = Y.Node.create('<div
id="container"></div>');
so the container should come from the View and then get appended to
something. I was trying to clean this up in
https://code.launchpad.net/~rharding/juju-gui/browser_links/+merge/159215

The way Y.View is meant to work (and I've been doing this wrong) is that
it defaults to an empty <div> as a container and then your render call
is responsible for putting it somewhere on the DOM.

https://codereview.appspot.com/8835044/

[lp:~jcsackett/juju-gui/search-view]

559. By j.c.sackett on 2013-04-18

Merged search-routing into search-view.

560. By j.c.sackett on 2013-04-19

Merged search-routing into search-view.

561. By j.c.sackett on 2013-04-20

Merged search-routing into search-view.

562. By j.c.sackett on 2013-04-21

Merged api-faiure-util into search-view.

563. By j.c.sackett on 2013-04-22

apiFailure driveby

564. By j.c.sackett on 2013-04-22

Search results rendering.

565. By j.c.sackett on 2013-04-22

Test fix.

566. By j.c.sackett on 2013-04-22

Test fixes.

567. By j.c.sackett on 2013-04-22

Resolved conflicts.

568. By j.c.sackett on 2013-04-22

Add apiFailure utils req.

569. By j.c.sackett on 2013-04-22

Merged api-faiure-util into search-view.

570. By j.c.sackett on 2013-04-22

Revert utils req; uneeded, breaks devel.

571. By j.c.sackett on 2013-04-22

Shut up, lint.

572. By j.c.sackett on 2013-04-22

No really, shut up, lint.

573. By j.c.sackett on 2013-04-22

Documentation.

574. By j.c.sackett on 2013-04-22

More lint.

=== modified file 'app/modules-debug.js'
--- app/modules-debug.js	2013-04-13 00:18:21 +0000
+++ app/modules-debug.js	2013-04-22 13:35:38 +0000
@@ -288,6 +288,10 @@
           fullpath: '/juju-ui/subapps/browser/views/fullscreen.js'
         },
 
+        'subapp-browser-searchview': {
+          fullpath: '/juju-ui/subapps/browser/views/search.js'
+        },
+
         'subapp-browser-sidebar': {
           fullpath: '/juju-ui/subapps/browser/views/sidebar.js',
           requires: [
@@ -298,8 +302,12 @@
         },
 
         'subapp-browser-editorial': {
-          fullpath: '/juju-ui/subapps/browser/views/editorial.js',
-          requires: ['subapp-browser-sidebar']
+          fullpath: '/juju-ui/subapps/browser/views/editorial.js'
+        },
+
+        //Browser view utils
+        'subapp-browser-view-utils': {
+          fullpath: '/juju-ui/subapps/browser/views/utils.js'
         },
 
         //Browser Models

=== modified file 'app/subapps/browser/browser.js'
--- app/subapps/browser/browser.js	2013-04-19 17:58:14 +0000
+++ app/subapps/browser/browser.js	2013-04-22 13:35:38 +0000
@@ -63,9 +63,14 @@
       if (this._viewState.charmID) {
         urlParts.push(this._viewState.charmID);
       }
-
-      // Always end on a /
-      return urlParts.join('/');
+      var url = urlParts.join('/');
+      if (this._viewState.querystring) {
+        url = Y.Lang.sub('{ url }?{ qs }', {
+          url: url,
+          qs: this._viewState.querystring
+        });
+      }
+      return url;
     },
 
     /**
@@ -201,7 +206,7 @@
       this._viewState.viewmode = params.viewmode;
 
       // Check for a charm id in the request.
-      if (params.id) {
+      if (params.id && params.id !== 'search') {
         this._viewState.charmID = params.id;
       } else {
         this._viewState.charmID = null;
@@ -268,9 +273,9 @@
     },
 
     /**
-     * Render the sidebar view of a specific charm to the client.
+     * Render the charm details view
      *
-     * @method sidebarCharm
+     * @method renderCharmDetails
      * @param {Request} req current request object.
      * @param {Response} res current response object.
      * @param {function} next callable for the next route in the chain.
@@ -317,7 +322,6 @@
     renderEditorial: function(req, res, next) {
       // If loading the interesting content then it's not a search going on.
       var container = this.get('container'),
-          editorialContainer,
           extraCfg = {};
 
       if (this._viewState.viewmode === 'fullscreen') {
@@ -346,11 +350,35 @@
     },
 
     /**
-      Place holder for a method to render out search so we can test url parsing
+     * Render search results
+     *
+     * @method renderSearch
+     * @param {Request} req current request object.
+     * @param {Response} res current response object.
+     * @param {function} next callable for the next route in the chain.
+     */
+    renderSearch: function(req, res, next) {
+      var container = this.get('container'),
+          extraCfg = {},
+          query;
+      if (this._viewState.querystring) {
+        query = Y.QueryString.parse();
+      } else {
+        // If there's no querystring, we need a default "empty" search.
+        query = {text: ''};
+      }
 
-    */
-    renderSearchResults: function(req, res, next) {
-      console.log('rendered search results.');
+      if (this._viewState.viewmode === 'fullscreen') {
+        extraCfg.renderTo = container.one('.bws-view-data');
+        extraCfg.isFullscreen = true;
+      } else {
+        extraCfg.renderTo = container.one('.bws-content');
+      }
+      extraCfg.text = query.text;
+      this._search = new Y.juju.browser.views.BrowserSearchView(
+          this._getViewCfg(extraCfg));
+      this._search.render();
+      this._search.addTarget(this);
     },
 
     /**
@@ -379,7 +407,7 @@
       } else if (this._shouldShowSearch()) {
         // Render search results if search is in the url and the viewmode or
         // the search has been changed in the state.
-        this.renderSearchResults(req, res, next);
+        this.renderSearch(req, res, next);
       } else if (!this._viewState.charmID) {
         // Render the editorial in fullscreen only if we don't have a charmid
         this.renderEditorial(req, res, next);
@@ -409,7 +437,7 @@
       // Render search results if search is in the url and the viewmode or the
       // search has been changed in the state.
       if (this._shouldShowSearch()) {
-        this.renderSearchResults(req, res, next);
+        this.renderSearch(req, res, next);
       }
 
       if (this._shouldShowEditorial()) {
@@ -531,10 +559,12 @@
   requires: [
     'juju-charm-store',
     'juju-models',
+    'querystring-parse',
     'sub-app',
     'subapp-browser-charmview',
     'subapp-browser-editorial',
     'subapp-browser-fullscreen',
+    'subapp-browser-searchview',
     'subapp-browser-sidebar'
   ]
 });

=== added file 'app/subapps/browser/templates/search.handlebars'
--- app/subapps/browser/templates/search.handlebars	1970-01-01 00:00:00 +0000
+++ app/subapps/browser/templates/search.handlebars	2013-04-22 13:35:38 +0000
@@ -0,0 +1,4 @@
+<div id="bws-search">
+  <h3>{{ count }} results found</h3>
+    <div class="search-results"></div>
+</div>

=== modified file 'app/subapps/browser/views/charm.js'
--- app/subapps/browser/views/charm.js	2013-04-19 15:51:06 +0000
+++ app/subapps/browser/views/charm.js	2013-04-22 13:35:38 +0000
@@ -68,19 +68,7 @@
      *
      */
     apiFailure: function(data, request) {
-      var message;
-      if (data && data.type) {
-        message = 'Charm API error of type: ' + data.type;
-      } else {
-        message = 'Charm API server did not respond';
-      }
-      this.get('db').notifications.add(
-          new models.Notification({
-            title: 'Failed to load sidebar content.',
-            message: message,
-            level: 'error'
-          })
-      );
+      Y.juju.browser.views.utils.apiFailure(data, request, this);
     },
 
     /**
@@ -561,6 +549,7 @@
     'juju-view-utils',
     'node',
     'prettify',
+    'subapp-browser-view-utils',
     'view'
   ]
 });

=== modified file 'app/subapps/browser/views/editorial.js'
--- app/subapps/browser/views/editorial.js	2013-04-19 17:09:07 +0000
+++ app/subapps/browser/views/editorial.js	2013-04-22 13:35:38 +0000
@@ -51,6 +51,17 @@
     },
 
     /**
+     * Generates a message to the user based on a bad api call.
+     *
+     * @method apiFailure
+     * @param {Object} data the json decoded response text.
+     * @param {Object} request the original io_request object for debugging.
+     *
+     */
+    apiFailure: function(data, request) {
+      Y.juju.browser.views.utils.apiFailure(data, request, this);
+    },
+    /**
      * General YUI initializer.
      *
      * @method initializer
@@ -131,24 +142,11 @@
           ];
         },
 
-        'failure': function(data, request) {
-          var message;
-          if (data && data.type) {
-            message = 'Charm API error of type: ' + data.type;
-          } else {
-            message = 'Charm API server did not respond';
-          }
-          this.get('db').notifications.add(
-              new models.Notification({
-                title: 'Failed to load landing page content.',
-                message: message,
-                level: 'error'
-              })
-          );
-        }
+        'failure': this.apiFailure
       }, this);
     },
 
+    /*
     /**
      * Destroy this view and clear from the dom world.
      *
@@ -210,6 +208,7 @@
     'juju-charm-store',
     'juju-models',
     'juju-templates',
+    'subapp-browser-view-utils',
     'view'
   ]
 });

=== added file 'app/subapps/browser/views/search.js'
--- app/subapps/browser/views/search.js	1970-01-01 00:00:00 +0000
+++ app/subapps/browser/views/search.js	2013-04-22 13:35:38 +0000
@@ -0,0 +1,110 @@
+'use strict';
+
+
+/**
+ * Provides searching functionality for the charm browser.
+ *
+ * @namespace juju
+ * @module browser
+ * @submodule views
+ */
+YUI.add('subapp-browser-searchview', function(Y) {
+  var ns = Y.namespace('juju.browser.views'),
+      views = Y.namespace('juju.views'),
+      widgets = Y.namespace('juju.widgets'),
+      models = Y.namespace('juju.models');
+
+  ns.BrowserSearchView = Y.Base.create('browser-view-searchview', Y.View, [
+    Y.Event.EventTracker
+  ], {
+    template: views.Templates.search,
+    /**
+     * Renders the search results from the the store query.
+     *
+     * @method _renderSearchResults
+     * @param {Y.Node} container Optional container to render results to.
+     */
+    _renderSearchResults: function(results) {
+      var target = this.get('renderTo'),
+          tpl = this.template({count: results.size()}),
+          tplNode = Y.Node.create(tpl),
+          container = tplNode.one('.search-results');
+
+      results.map(function(charm) {
+        var ct = new widgets.browser.CharmToken(charm.getAttrs());
+        ct.render(container);
+      });
+      target.setHTML(tplNode);
+    },
+
+    /**
+     * Generates a message to the user based on a bad api call.
+     *
+     * @method apiFailure
+     * @param {Object} data the json decoded response text.
+     * @param {Object} request the original io_request object for debugging.
+     *
+     */
+    apiFailure: function(data, request) {
+      Y.juju.browser.views.utils.apiFailure(data, request, this);
+    },
+
+    /**
+     * Renders the searchview, rendering search results for the view's search
+     * text.
+     *
+     * @method render
+     */
+    render: function() {
+      var text = this.get('text');
+      this.get('store').search(text, {
+        'success': function(data) {
+          var results = this.get('store').resultsToCharmlist(data.result);
+          this._renderSearchResults(results);
+        },
+        'failure': this.apiFailure
+      }, this);
+    }
+  }, {
+    ATTRS: {
+      /**
+       * The container node the view is rendering to.
+       *
+       * @attribute renderTo
+       * @default undefined
+       * @type {Y.Node}
+       */
+      renderTo: {},
+
+      /**
+       * An instance of the Charmworld API object to hit for any data that
+       * needs fetching.
+       *
+       * @attribute store
+       * @default undefined
+       * @type {Charmworld0}
+       *
+       */
+      store: {},
+
+      /**
+       * The text being searched on
+       *
+       * @attribute text
+       * @default ''
+       * @type {String}
+       */
+      text: {}
+    }
+  });
+
+}, '0.1.0', {
+  requires: [
+    'event-tracker',
+    'browser-overlay-indicator',
+    'base-build',
+    'browser-charm-token',
+    'subapp-browser-view-utils',
+    'view'
+  ]
+});

=== added file 'app/subapps/browser/views/utils.js'
--- app/subapps/browser/views/utils.js	1970-01-01 00:00:00 +0000
+++ app/subapps/browser/views/utils.js	2013-04-22 13:35:38 +0000
@@ -0,0 +1,43 @@
+'use strict';
+
+
+/**
+ * The view utils.
+ *
+ * @namespace juju
+ * @module juju.browser.views
+ * @submodule juju.browser.views.utils
+ */
+YUI.add('subapp-browser-view-utils', function(Y) {
+
+  var ns = Y.namespace('juju.browser.views.utils'),
+      models = Y.namespace('juju.models');
+
+  /**
+   * Shared method to generate a message to the user based on a bad api
+   * call from a view.
+   *
+   * @method apiFailure
+   * @param {Object} data the json decoded response text.
+   * @param {Object} request the original io_request object for debugging.
+   *
+   */
+  ns.apiFailure = function(data, request, view) {
+    var message;
+    if (data && data.type) {
+      message = 'Charm API error of type: ' + data.type;
+    } else {
+      message = 'Charm API server did not respond';
+    }
+    view.get('db').notifications.add(
+        new models.Notification({
+          title: 'Failed to load sidebar content.',
+          message: message,
+          level: 'error'
+        })
+    );
+  };
+
+}, '0.1.0', {
+  requires: []
+});

=== modified file 'app/subapps/browser/views/view.js'
--- app/subapps/browser/views/view.js	2013-04-16 23:39:54 +0000
+++ app/subapps/browser/views/view.js	2013-04-22 13:35:38 +0000
@@ -107,7 +107,17 @@
      *
      */
     _searchChanged: function(ev) {
-      console.log('search changed.');
+      // NB: This is temporary; eventually filtering will include categories,
+      // and the Filter object will handle qs generation. But it's an unwieldy
+      // url to parse while we only support text search.
+      var qs = Y.QueryString.stringify({text: ev.details[0]});
+      var change = {
+        search: true,
+        querystring: qs
+      };
+      this.fire('viewNavigate', {
+        change: change
+      });
     },
 
     /**
@@ -160,19 +170,7 @@
      *
      */
     apiFailure: function(data, request) {
-      var message;
-      if (data && data.type) {
-        message = 'Charm API error of type: ' + data.type;
-      } else {
-        message = 'Charm API server did not respond';
-      }
-      this.get('db').notifications.add(
-          new models.Notification({
-            title: 'Failed to load sidebar content.',
-            message: message,
-            level: 'error'
-          })
-      );
+      Y.juju.browser.views.utils.apiFaiure(data, request, this);
     },
 
     /**
@@ -269,6 +267,8 @@
     'event-tracker',
     'juju-charm-store',
     'juju-models',
+    'querystring-stringify',
+    'subapp-browser-view-utils',
     'view'
   ]
 });

=== modified file 'app/templates/browser-search.handlebars'
--- app/templates/browser-search.handlebars	2013-04-16 21:58:19 +0000
+++ app/templates/browser-search.handlebars	2013-04-22 13:35:38 +0000
@@ -6,7 +6,7 @@
     <div class="bws-searchbox">
         <form>
             <input type="search" name="bws-search"
-                value="{{ term }}"
+                value="{{ text }}"
                 placeholder="Search&hellip;"/>
         </form>
     </div>

=== modified file 'app/widgets/charm-search.js'
--- app/widgets/charm-search.js	2013-04-09 17:00:45 +0000
+++ app/widgets/charm-search.js	2013-04-22 13:35:38 +0000
@@ -1,8 +1,7 @@
 'use strict';
 
 
-/**
- * The widget used across Browser view to manage the search box and the
+/** * The widget used across Browser view to manage the search box and the
  * controls for selecting which view you're in.
  *
  * @module widgets
@@ -34,6 +33,17 @@
     TEMPLATE: templates['browser-search'],
 
     /**
+     * Halt page reload from form submit and let the app know we have a new
+     * search.
+     *
+     * @method _handleSubmit
+     * @param {Event} ev the submit event.
+     */
+    _handleSubmit: function(ev) {
+      ev.halt();
+      this.fire(this.EVT_UPDATE_SEARCH, this.get('text'));
+    },
+    /**
      * Expose to the outside world that we've got a request to go fullscreen.
      *
      * @method _toggleFullScreen
@@ -76,6 +86,10 @@
           container.one('.toggle-fullscreen').on(
               'click', this._toggleFullScreen, this)
       );
+      this.addEvent(
+          container.one('form').on(
+              'submit', this._handleSubmit, 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
@@ -84,6 +98,8 @@
       var input = container.one('input');
       this.addEvent(
           input.on('valueChange', function(ev) {
+            var val = ev.currentTarget.get('value');
+            this.set('text', val);
             this.fire(this.EVT_SEARCH_CHANGED);
           }, this)
       );
@@ -155,13 +171,13 @@
       },
 
       /**
-       * @attribute term
-       * @default undefined
+       * The search text.
+       *
+       * @attribute text
+       * @default ''
        * @type {String}
-       *
        */
-      term: {}
-
+      text: {}
     }
   });
 

=== modified file 'test/index.html'
--- test/index.html	2013-04-10 11:57:11 +0000
+++ test/index.html	2013-04-22 13:35:38 +0000
@@ -30,36 +30,38 @@
 
   <!-- Tests (Alphabetical)-->
 
+  <script src="test_app_hotkeys.js"></script>
   <script src="test_app.js"></script>
-  <script src="test_app_hotkeys.js"></script>
   <script src="test_application_notifications.js"></script>
   <script src="test_browser_app.js"></script>
   <script src="test_browser_charm_details.js"></script>
   <script src="test_browser_models.js"></script>
+  <script src="test_browser_search_view.js"></script>
+  <script src="test_browser_search_widget.js"></script>
+  <script src="test_browser_view_utils.js"></script>
   <script src="test_charm_collection_view.js"></script>
   <script src="test_charm_configuration.js"></script>
   <script src="test_charm_container.js"></script>
   <script src="test_charm_panel.js"></script>
+  <script src="test_charm_store.js"></script>
   <script src="test_charm_token.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>
   <script src="test_d3_components.js"></script>
   <script src="test_endpoints.js"></script>
+  <script src="test_env_go.js"></script>
+  <script src="test_environment_view.js"></script>
   <script src="test_env.js"></script>
+  <script src="test_env_python.js"></script>
   <script src="test_event_tracker.js"></script>
-  <script src="test_env_go.js"></script>
-  <script src="test_env_python.js"></script>
-  <script src="test_environment_view.js"></script>
   <script src="test_fakebackend.js"></script>
-  <script src="test_overlay_indicator.js"></script>
   <script src="test_landscape.js"></script>
   <script src="test_login.js"></script>
+  <script src="test_model_handlers.js"></script>
   <script src="test_model.js"></script>
-  <script src="test_model_handlers.js"></script>
   <script src="test_notifications.js"></script>
   <script src="test_notifier_widget.js"></script>
+  <script src="test_overlay_indicator.js"></script>
   <script src="test_panzoom.js"></script>
   <script src="test_prettify.js"></script>
   <script src="test_routing.js"></script>

=== modified file 'test/test_browser_app.js'
--- test/test_browser_app.js	2013-04-19 17:59:38 +0000
+++ test/test_browser_app.js	2013-04-22 13:35:38 +0000
@@ -175,7 +175,7 @@
                 sidebar: false,
                 renderCharmDetails: false,
                 renderEditorial: false,
-                renderSearchResults: false
+                renderSearch: false
               };
             };
             done();
@@ -213,8 +213,8 @@
       browser.renderEditorial = function() {
         hits.renderEditorial = true;
       };
-      browser.renderSearchResults = function() {
-        hits.renderSearchResults = true;
+      browser.renderSearch = function() {
+        hits.renderSearch = true;
       };
       // showView needs to be hacked because it does the rendering of
       // fullscreen/sidebar.
@@ -272,7 +272,7 @@
       };
       var expected = Y.merge(hits, {
         sidebar: true,
-        renderSearchResults: true,
+        renderSearch: true,
         renderCharmDetails: true
       });
 

=== modified file 'test/test_browser_charm_details.js'
--- test/test_browser_charm_details.js	2013-04-18 05:01:43 +0000
+++ test/test_browser_charm_details.js	2013-04-22 13:35:38 +0000
@@ -46,7 +46,6 @@
       delete window.juju_config;
     });
 
-    // Ensure the search results are rendered inside the container.
     it('should be able to locate a readme file', function() {
       view = new CharmView({
         charm: new models.BrowserCharm({

=== added file 'test/test_browser_search_view.js'
--- test/test_browser_search_view.js	1970-01-01 00:00:00 +0000
+++ test/test_browser_search_view.js	2013-04-22 13:35:38 +0000
@@ -0,0 +1,72 @@
+'use strict';
+
+
+describe('search view', function() {
+  var apiURL,
+      container,
+      view,
+      Y;
+
+  before(function(done) {
+    Y = YUI(GlobalConfig).use(
+        'json',
+        'juju-charm-store',
+        'node',
+        'subapp-browser-searchview',
+        function(Y) {
+          done();
+        });
+  });
+
+  beforeEach(function() {
+    // Mock out a dummy location for the Store used in view instances.
+    window.juju_config = {charmworldURL: 'http://localhost'};
+    container = Y.Node.create('<div id="container"></div>');
+    Y.one('body').append(container);
+    view = new Y.juju.browser.views.BrowserSearchView({text: 'foo'});
+    //
+    // Create monkeypatched store to verify right method is called.
+    apiURL = '';
+    var fakeStore = new Y.juju.Charmworld0({});
+    var sampleData = {
+      result: [{
+        id: 'foo/bar-2',
+        name: 'bar',
+        description: 'some charm named bar'
+      }]
+    };
+    fakeStore.set('datasource', {
+      sendRequest: function(params) {
+        // Stubbing the server callback value
+        apiURL = params.request;
+        params.callback.success({
+          response: {
+            results: [{
+              responseText: Y.JSON.stringify(sampleData)
+            }]
+          }
+        });
+      }
+    });
+    view.set('store', fakeStore);
+    view.set('renderTo', container);
+  });
+
+  afterEach(function() {
+    delete window.juju_config;
+    view.destroy();
+    container.remove(true);
+  });
+
+  it('exists', function() {
+    assert.isObject(view);
+  });
+
+  it('renders correctly', function() {
+    view.render();
+    assert.equal('charms?text=foo', apiURL);
+    assert.equal(1, Y.all('.yui3-charmtoken').size());
+    var charmText = Y.one('.yui3-charmtoken').one('.title').get('text');
+    assert.equal(charmText.replace(/\s+/g, ''), 'bar');
+  });
+});

=== modified file 'test/test_browser_search_widget.js'
--- test/test_browser_search_widget.js	2013-03-25 19:12:45 +0000
+++ test/test_browser_search_widget.js	2013-04-22 13:35:38 +0000
@@ -44,6 +44,7 @@
       // now trigger the event and make sure that it fired to our custom
       // watcher outside the widget.
       triggered.should.eql(true);
+      assert.equal('test', this.get('text'));
       done();
     });
 
@@ -62,18 +63,7 @@
 
   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'
+      text: 'test'
     });
     search.render(container);
     container.one('input').get('value').should.eql('test');
@@ -109,5 +99,4 @@
     toggle.simulate('click');
     triggered.should.eql(true);
   });
-
 });

=== added file 'test/test_browser_view_utils.js'
--- test/test_browser_view_utils.js	1970-01-01 00:00:00 +0000
+++ test/test_browser_view_utils.js	2013-04-22 13:35:38 +0000
@@ -0,0 +1,19 @@
+'use strict';
+
+describe('api failure utility', function() {
+  var Y;
+
+  before(function(done) {
+    Y = YUI(GlobalConfig).use('subapp-browser-view-utils', function(Y) {
+          done();
+        });
+  });
+
+  beforeEach(function() {});
+
+  afterEach(function() {});
+
+  it('exists', function() {
+    assert.isFunction(Y.juju.browser.views.utils.apiFailure);
+  });
+});