Codebase list libjs-magic-search / HEAD
HEAD

Tree @HEAD (Download .tar.gz)

===================
Magic Search Widget
===================

This is an AngularJS widget that provides a UI for faceted and text search.


Sass/Compass Setup
------------------
The CSS files are pre-processed using Sass, so you'll need to set up a Sass-to-CSS watcher to output CSS.

To set up Compass as the file watcher...

::

    sudo gem install compass
    cd eucaconsole/static
    compass watch .


Grunt - JavaScript Task Manager
===============================

Grunt Setup
-----------
* At home directory `./magic-search`
* Install npm if missing: 
::

    yum install -y npm

* Run 
::

    npm install

to install npm packages listed in the file `package.json`

Grunt Commands
--------------
* dist: runs compass and copy commands to populate dist directory
::

    grunt dist

* release: runs dist and tags a release
::

    grunt release

* jshint: runs javscript checker
::

    grunt jshint

* watch: runs compass in watch mode so that updates to scss files are processed
::

    grunt watch


To Release
==========

pull latest master
edit package.json to increment version
::

    git add package.json
    git commit -m "set version for release"
    grunt release
    git submodule foreach git push origin $branch
    git push origin $branch
    
Then, push tag
::

    git submodule foreach git push origin <version#>
    git push origin <version#>
    

Testing
=======

There is not automated testing in place, but here are some functional tests that can be performed manually (in Eucalyptus, for example):
 * verify that clicking anywhere on the searchbar will bring up the facet menu and set focus to the text field
 * press <esc> to dismiss the menu and test that clicking outside the searchbar also dismisses the menu
 * type into the field. Verify that if you type text that is part of a facet name, that text is bolded in the menu and that selections are reduced based on what matches
 * select a facet and verify that it now appears in plain text followed by a colon (:). Also see that a new menu appears with facet options and that the text field has focus.
 * select an option and see that the complete facet now appears enclosed in a grey box with an X to the right. Also notice the X to the far right on the search box. Try both of these to remove the facet.
 * verify as you add a facet that the table is refreshed (not the entire page).
 * start typing and enter something that isn't in a facet. See that the table filters live. Press enter and notice a new "text" facet appears
 * type again so that there are no facet matches and backspace. verify that the facet menu appears again once there are matches.
 * type to narrow menu to a single facet and press <tab>. Verify that the facet was selected.
 * type to narrow the options and press <tab>. Verify that the facet is now completed and the table refreshes.
 * verify that at any time, if you've selected a partial facet or option that pressing <esc> will clear that selection.
 * verify that if focus is on the input field without a facet menu that pressing <space> will show the facet menu.
 * select multiple search facets and save the URL. Verify that pasting that URL into a new tab will restore the same view (except for text facets).