Merge pull request #46 from santosh1994/navigation

Navigation

Author: rahulcs

README.md

@@ -2,16 +2,16 @@ Unbxd JavaScript Search library
 ===============================
 [![Build Status](https://travis-ci.org/unbxd/js-sdk.svg?branch=master)](https://travis-ci.org/unbxd/js-sdk.svg?branch=master)
 
-unbxdSearch.js library can be used to integrated UNBXD search or browse on client side. It supports History API, so users can share the URI. 
+unbxdSearch.js library can be used to integrated UNBXD search and category page on client side. It supports History API, so users can share the URI.
 
 Note : _*This library makes use of jQuery selectors and Handlebars templates.*_
 
 _*Please find an example of implementation in demo folder.*_
 
-##Usage
+## Usage
 Just include [unbxdSearch.js](//d21gpk1vhmjuf5.cloudfront.net/unbxdSearch.js) in HTML and include the configuration.
 
-##configuration
+## configuration
 Consider a normal search page with basic layout as shown in the figure below and respective configuration below the image.
 
 ![Basic search layout](https://raw.githubusercontent.com/unbxd/js-sdk/master/images/search_layout.png "Basic search layout")
@@ -137,11 +137,11 @@ Consider a normal search page with basic layout as shown in the figure below and
 
 - **siteName** : This value can be found in UNBXD dashboard. It is unique for every search site created in the dashboard.
 - **APIKey** : This is a unique for every user account. It can also be found in dashboard.
-- **type** : It has to be either _*search*_ or _*browse*_.
-- **getCategoryId** : This option has to be a function which return the category_id in case of *browse*. Please ignore incase of *search*.
-- **inputSelector** : The jQuery selector for search input. Please make sure that the form of this input has no action and method is GET. Please ignore incase of *browse*.
-- **searchButtonSelector** : The jQuery selector for search submit button. Please ignore incase of *browse*.
-- **spellCheck** : The jQuery selector for DOM element to display spell suggestion. Please ignore incase of *browse*.
+- **type** : It has to be either _*search*_, _*browse*_ or _*category*_.
+- **getCategoryId** : This option has to be a function which return the category_id in case of *browse* and *category*. Please ignore incase of *search*.
+- **inputSelector** : The jQuery selector for search input. Please make sure that the form of this input has no action and method is GET. Please ignore incase of *browse* and *category*.
+- **searchButtonSelector** : The jQuery selector for search submit button. Please ignore incase of *browse* and *category*.
+- **spellCheck** : The jQuery selector for DOM element to display spell suggestion. Please ignore incase of *browse* and *category*.
 - **spellCheckTemp** : Handlebars template for generating the spell suggestion template.
 	```javascript
 		...
@@ -154,7 +154,7 @@ Consider a normal search page with basic layout as shown in the figure below and
 			suggestion : "something else"
 		}
 	```
-- **searchQueryDisplay** : The jQuery selector of DOM element to display the query (which use has searched for) and total number of results from search. Please ignore incase of *browse*.
+- **searchQueryDisplay** : The jQuery selector of DOM element to display the query (which use has searched for) and total number of results from search. Please ignore incase of *browse* and *category*.
 - **searchQueryDisplayTemp** : Handlebars template for displaying the search query and total number of results. Please ignore incase of *browse*.
 	```javascript
 		...

karma.conf.js

@@ -34,6 +34,7 @@ module.exports = function (config) {
         './unbxdSearch.js',
         './app.js',
         'mock/*.json',
+        'test/navigation/*.spec.js',
         'test/search/*.spec.js',
     ],
 

test/navigation/init.spec.js

@@ -0,0 +1,56 @@
+describe('Navigation - On Init', function () {
+
+  before(function(done){
+    this.searchTest = fixture.load('mock/searchTestResponse.json');
+
+    //setup document to hold search results
+    document.body.innerHTML = __html__['index.html'];
+
+    //initialize search
+    var searchConfig = jQuery.extend({}, window.config);
+    searchConfig.type = 'category';
+    searchConfig.getCategoryId = function(){
+      return '/clothing/women/jewelry-hair/cat/cat1910053';
+    };
+    this.searchobj = new window.Unbxd.setSearch(searchConfig);
+    
+    //stub search ajax call with mock response
+    this.stub = sinon.stub(jQuery, 'ajax').yieldsTo('success',this.searchTest);
+
+    //spy OnIntialResultLoad, OnFacetLoad, OnPageLoad  and OnNoResult
+    this.spyOnIntialResultLoad = sinon.spy(this.searchobj.options,
+     'onIntialResultLoad');
+    this.spyOnFacetLoad = sinon.spy(this.searchobj.options, 'onFacetLoad');
+    this.spyOnPageLoad = sinon.spy(this.searchobj.options, 'onPageLoad');
+    this.spyOnNoResult = sinon.spy(this.searchobj.options, 'onNoResult');
+
+    this.searchobj.callResults(this.searchobj.paintResultSet);
+    done();
+  });
+
+  after(function(){
+    this.stub.restore();
+    fixture.cleanup();
+  });
+  
+  it('should call navigation handler', function(){
+    expect(this.searchobj.getHostNPath().indexOf('/category') > -1)
+      .to.be.true;
+  });
+
+  it('Should call onIntialResultLoad', function(){
+    expect(this.spyOnIntialResultLoad.called).to.equal(true);
+  });
+
+  it('Should call onFacetLoad', function(){
+    expect(this.spyOnFacetLoad.called).to.equal(true);
+  });
+
+  it('Should not call onPageLoad', function(){
+    expect(this.spyOnPageLoad.called).to.equal(false);
+  });
+  
+  it('Should not call onNoResult', function(){
+    expect(this.spyOnNoResult.called).to.equal(false);
+  });
+});

unbxdSearch.js

@@ -1,7 +1,7 @@
 //uglifyjs unbxdSearch.js -o unbxdSearch.min.js && gzip -c unbxdSearch.min.js > unbxdSearch.min.js.gz && aws s3 cp unbxdSearch.min.js.gz s3://unbxd/unbxdSearch.js --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --content-encoding gzip --cache-control max-age=3600
 var unbxdSearchInit = function(jQuery, Handlebars){
   window.Unbxd = window.Unbxd || {};
-  Unbxd.jsSdkVersion = "1.0.10";
+  Unbxd.jsSdkVersion = "2.0.0";
 
   // Production steps of ECMA-262, Edition 5, 15.4.4.14
   // Reference: http://es5.github.io/#x15.4.4.14
@@ -339,6 +339,30 @@ var unbxdSearchInit = function(jQuery, Handlebars){
     this.init();
   }
 
+  var isTypeSearch = function isTypeSearch(type) {
+    return type === "search";
+  };
+
+  var isTypeBrowse = function isTypeBrowse(type) {
+    return type === "browse";
+  };
+
+  var isTypeCategory = function isTypeCategory(type) {
+    return type === "category";
+  };
+
+  var isTypeBrowseOrCategory = function isTypeBrowseOrCategory(type) {
+    return isTypeBrowse(type) || isTypeCategory(type);
+  };
+
+  var isCategoryIdPresent = function isCategoryIdPresent(params) {
+    return ("categoryId" in params && params.categoryId.trim().length > 0);
+  };
+
+  var isQueryPresent = function isQueryPresent(params) {
+    return ("query" in params && params.query.trim().length > 0);
+  };
+
   Handlebars.registerHelper('prepareFacetName', function(txt){
     txt = txt.replace("_fq","");
     return txt.replace("_"," ");
@@ -556,8 +580,10 @@ var unbxdSearchInit = function(jQuery, Handlebars){
 
       this.params = finalParams;
 
-      this.params.categoryId = this.options.type == "browse" && typeof this.options.getCategoryId == "function" ?
-	this.options.getCategoryId() : (this.params.categoryId ? this.params.categoryId : "");
+      this.params.categoryId = isTypeBrowseOrCategory(this.options.type) &&
+        typeof this.options.getCategoryId == 'function'
+        ? this.options.getCategoryId()
+        : this.params.categoryId ? this.params.categoryId : '';
 
       this.setPage("page" in finalParams.extra ? finalParams.extra.page : 1)
 	.setPageSize("rows" in finalParams.extra ? finalParams.extra.rows :  this.options.pageSize);
@@ -580,9 +606,11 @@ var unbxdSearchInit = function(jQuery, Handlebars){
       if(typeof this.options.setDefaultFilters == "function")
 	this.setDefaultParams(this.params);
 
-      if((this.options.type == "search" && "query" in this.params && this.params["query"].trim().length > 0) ||
-	 (this.options.type == "browse" && "categoryId" in this.params && this.params["categoryId"].trim().length > 0))
-	this.callResults(this.paintResultSet);
+      if (
+        (isTypeSearch(this.options.type) && isQueryPresent(this.params)) ||
+        (isTypeBrowseOrCategory(this.options.type) && isCategoryIdPresent(this.params))
+      )
+        this.callResults(this.paintResultSet);
     }
     ,getClass : function(object){
       return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
@@ -1001,7 +1029,11 @@ var unbxdSearchInit = function(jQuery, Handlebars){
       return !this.options.isAutoScroll && this.options.isPagination;
     }
     ,getHostNPath: function(){
-      return "//search.unbxdapi.com/"+ this.options.APIKey + "/" + this.options.siteName + "/"  + (this.options.type == "browse" ? "browse" : "search" )
+      var handler = "search";
+      if(isTypeBrowseOrCategory(this.options.type)) {
+        handler = this.options.type;
+      }
+      return "//search.unbxdapi.com/"+ this.options.APIKey + "/" + this.options.siteName + "/"  + handler;
     }
     ,getUrlSubstring: function(){
       return window.location.search.substring(1) || window.location.hash.substring(1);
@@ -1031,6 +1063,8 @@ var unbxdSearchInit = function(jQuery, Handlebars){
 	url += '&'+ this.options.searchQueryParam +'='+ encodeURIComponent(this.params.query);
       }else if(this.options.type == "browse" && this.params['categoryId'] != undefined){
 	url += '&category-id=' + encodeURIComponent(this.params.categoryId);
+      } else if(isTypeCategory(this.options.type) && this.params.categoryId !== undefined) {
+        url += "&p=" + encodeURIComponent(this.params.categoryId);
       }
 
       for(var x in this.params.filters){
@@ -1310,6 +1344,10 @@ var unbxdSearchInit = function(jQuery, Handlebars){
       if("category-id" in obj)
 	params.categoryId = obj["category-id"];
 
+      //lets get categoryId(navigation)
+      if("p" in obj)
+	params.categoryId = obj["p"];
+
       //lets get boost
       if("boost" in obj)
 	params.extra.boost = obj.boost;
@@ -1418,13 +1456,18 @@ var unbxdSearchInit = function(jQuery, Handlebars){
       this.productEndIdx = (this.getPage() * this.getPageSize() <= obj.response.numberOfProducts) ?
 	this.getPage() * this.getPageSize() : obj.response.numberOfProducts;
       this.totalPages = Math.ceil(obj.response.numberOfProducts/this.getPageSize());
+      var queryParams = {
+        numberOfProducts : obj.response.numberOfProducts
+        ,start: this.productStartIdx
+        ,end: this.productEndIdx
+      }
+      if (isTypeCategory(this.options.type)) {
+        queryParams.categoryId = obj.searchMetaData.queryParams.p
+      } else {
+        queryParams.query = obj.searchMetaData.queryParams.q
+      }
 
-      jQuery(this.options.searchQueryDisplay).html(this.compiledSearchQueryTemp({
-	query : obj.searchMetaData.queryParams.q
-	,numberOfProducts : obj.response.numberOfProducts
-	,start: this.productStartIdx
-	,end: this.productEndIdx
-      })).show();
+      jQuery(this.options.searchQueryDisplay).html(this.compiledSearchQueryTemp(queryParams)).show();
 
       this.paintSort(obj);
       this.paintPageSize(obj);