TST: Add tests for searchbar functionality

Fixes biocore#710
ElDeveloper · Sep 13, 2019 · 9a966af · 9a966af
1 parent b773d6e
commit 9a966af
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 59 deletions.
diff --git a/emperor/support_files/js/color-view-controller.js b/emperor/support_files/js/color-view-controller.js
@@ -148,7 +148,7 @@ define([
             // for rest if there are non numeric categories
             if (plottables.length > 0) {
               scope.setSlickGridDataset(
-                [{category: 'Non-numeric values', value: '#64655d',
+                [{id: 0, category: 'Non-numeric values', value: '#64655d',
                   plottables: plottables}]);
             }
             else {
@@ -270,7 +270,8 @@ define([
    */
   ColorViewController.prototype.isColoringContinuous = function() {
     // the bodygrid can have at most one element (NA values)
-    return this.$scaled.is(':checked') && this.bodyGrid.getData().length <= 1;
+    return (this.$scaled.is(':checked') &&
+            this.getSlickGridDataset().length <= 1);
   };
 
   /**
@@ -513,7 +514,7 @@ define([
     var decompViewDict = this.getView();
     if (this.$scaled.is(':checked')) {
       // Get the current SlickGrid data and update with the saved color
-      data = this.bodyGrid.getData();
+      data = this.getSlickGridDataset();
       data[0].value = json.data['Non-numeric values'];
       this.setPlottableAttributes(
         decompViewDict, json.data['Non-numeric values'], data[0].plottables);

diff --git a/emperor/support_files/js/controller.js b/emperor/support_files/js/controller.js
@@ -680,11 +680,11 @@ define([
               name: 'Open in Vega Editor',
               callback: function(key, opts) {
                 scope.exportToVega();
-              },
+              }
             }
           }
-        },
-      },
+        }
+      }
     });
 
     // The context menu is only shown if there's a single right click. We
@@ -998,7 +998,7 @@ define([
     var payload = {
       mode: 'vega',
       renderer: 'canvas',
-      spec: JSON.stringify(spec),
+      spec: JSON.stringify(spec)
     };
     _postMessage(url, payload);
   };

diff --git a/emperor/support_files/js/view-controller.js b/emperor/support_files/js/view-controller.js
@@ -186,9 +186,9 @@ define([
       scope.$searchBar.tooltip({
         disabled: true,
         // place the element with a slight offset at the bottom of the input
-        position: { my: "center top+15", at: "center bottom" },
+        position: {my: 'center top+15', at: 'center bottom'},
         // prevent the tooltip from disappearing when there's no matches
-        close: function(){
+        close: function() {
           if (scope.bodyGrid.getDataLength() === 0 &&
               scope.$searchBar.val() !== '') {
             $(this).tooltip('open');
@@ -383,7 +383,7 @@ define([
     this.bodyGrid = new Slick.Grid(this.$gridDiv, dataView, columns,
                                    gridOptions);
 
-    this.$searchBar.on("input", function (e) {
+    this.$searchBar.on('input', function(e) {
       dataView.refresh();
 
       // show a message when no results are found
@@ -393,27 +393,28 @@ define([
         scope.$searchBar.tooltip('option', 'disabled', false);
         scope.$searchBar.tooltip('open');
       }
-      else{
+      else {
         scope.$searchBar.attr('title', '');
         scope.$searchBar.tooltip('option', 'disabled', true);
         scope.$searchBar.tooltip('close');
       }
 
     });
     function substringFilter(item, args) {
-      if(!searchString &&
-         item.category.toLowerCase().indexOf(scope.$searchBar.val().toLowerCase()) === -1){
+      var val = scope.$searchBar.val();
+      if (!searchString && val &&
+         item.category.toLowerCase().indexOf(val.toLowerCase()) === -1) {
         return false;
       }
       return true;
     }
 
-    dataView.onRowCountChanged.subscribe(function (e, args) {
+    dataView.onRowCountChanged.subscribe(function(e, args) {
       scope.bodyGrid.updateRowCount();
       scope.bodyGrid.render();
     });
 
-    dataView.onRowsChanged.subscribe(function (e, args) {
+    dataView.onRowsChanged.subscribe(function(e, args) {
       scope.bodyGrid.invalidateRows(args.rows);
       scope.bodyGrid.render();
     });
@@ -462,7 +463,7 @@ define([
     json.category = this.getMetadataField();
 
     // Convert SlickGrid list of objects to single object
-    var gridData = this.bodyGrid.getData();
+    var gridData = this.getSlickGridDataset();
     var jsonData = {};
     for (var i = 0; i < gridData.length; i++) {
       jsonData[gridData[i].category] = gridData[i].value;

diff --git a/emperor/support_files/js/view.js b/emperor/support_files/js/view.js
@@ -855,7 +855,7 @@ DecompositionView.prototype._buildVegaSpec = function() {
     Ring: 'circle',
     Square: 'square',
     Icosahedron: 'cross',
-    Star: 'cross',
+    Star: 'cross'
   };
 
   function viewMarkersAsVegaDataset(markers) {
@@ -870,8 +870,8 @@ DecompositionView.prototype._buildVegaSpec = function() {
           color: rgbColor(marker.material.color),
           originalShape: marker.userData.shape,
           shape: getShape[marker.userData.shape],
-          scale: { x: marker.scale.x, y: marker.scale.y, },
-          opacity: marker.material.opacity,
+          scale: { x: marker.scale.x, y: marker.scale.y },
+          opacity: marker.material.opacity
         });
       }
     }
@@ -910,14 +910,14 @@ DecompositionView.prototype._buildVegaSpec = function() {
     padding: 5,
     background: scope.backgroundColor,
     config: {
-      axis: { labelColor: scope.axesColor, titleColor: scope.axesColor, },
-      title: { color: scope.axesColor, },
+      axis: { labelColor: scope.axesColor, titleColor: scope.axesColor },
+      title: { color: scope.axesColor }
     },
     title: 'Emperor PCoA',
     data: [
       {
         name: 'metadata',
-        values: plottablesAsMetadata(model.plottable, model.md_headers),
+        values: plottablesAsMetadata(model.plottable, model.md_headers)
       },
       {
         name: 'points', values: viewMarkersAsVegaDataset(scope.markers),
@@ -927,48 +927,48 @@ DecompositionView.prototype._buildVegaSpec = function() {
             from: 'metadata',
             key: model.md_headers[0],
             fields: ['id'],
-            as: ['metadata'],
+            as: ['metadata']
           }
-        ],
-      },
+        ]
+      }
     ],
     signals: [
       {
         name: 'width',
-        update: baseWidth + ' * ((' + rangeX[1] + ') - (' + rangeX[0] + '))',
+        update: baseWidth + ' * ((' + rangeX[1] + ') - (' + rangeX[0] + '))'
       },
       {
         name: 'height',
-        update: baseWidth + ' * ((' + rangeY[1] + ') - (' + rangeY[0] + '))',
-      },
+        update: baseWidth + ' * ((' + rangeY[1] + ') - (' + rangeY[0] + '))'
+      }
     ],
     scales: [
       { name: 'xScale', range: 'width', domain: [rangeX[0], rangeX[1]] },
       { name: 'yScale', range: 'height', domain: [rangeY[0], rangeY[1]] }
     ],
     axes: [
-      { orient: 'bottom', scale: 'xScale', title: model.axesLabels[axisX], },
-      { orient: 'left', scale: 'yScale', title: model.axesLabels[axisY], }
+      { orient: 'bottom', scale: 'xScale', title: model.axesLabels[axisX] },
+      { orient: 'left', scale: 'yScale', title: model.axesLabels[axisY] }
     ],
     marks: [
       {
         type: 'symbol',
         from: {data: 'points'},
         encode: {
           enter: {
-            fill: { field: 'color', },
-            x: { scale: 'xScale', field: 'x', },
-            y: { scale: 'yScale', field: 'y', },
-            shape: { field: 'shape', },
-            size: { signal: 'datum.scale.x * datum.scale.y * 100', },
-            opacity: { field: 'opacity', },
+            fill: { field: 'color' },
+            x: { scale: 'xScale', field: 'x' },
+            y: { scale: 'yScale', field: 'y' },
+            shape: { field: 'shape' },
+            size: { signal: 'datum.scale.x * datum.scale.y * 100' },
+            opacity: { field: 'opacity' }
           },
           update: {
-            tooltip: { signal: 'datum.metadata' },
-          },
-        },
-      },
-    ],
+            tooltip: { signal: 'datum.metadata' }
+          }
+        }
+      }
+    ]
   };
 };
 

diff --git a/tests/javascript_tests/index.html b/tests/javascript_tests/index.html
@@ -80,6 +80,7 @@
           'slickgrid': './vendor/js/slick.grid.min',
           'slickformatters': './vendor/js/slick.editors.min',
           'slickeditors': './vendor/js/slick.formatters.min',
+          'slickdataview': './vendor/js/slick.dataview.min',
 
           /* Emperor's objects */
           'animationdirector': './js/animate',
@@ -147,7 +148,7 @@
           },
           'slickcore': ['jqueryui'],
           'slickgrid': ['slickcore', 'jquery_drag', 'slickformatters',
-                        'slickeditors']
+                        'slickeditors', 'slickdataview']
           }
       });
 

diff --git a/tests/javascript_tests/test_color_view_controller.js b/tests/javascript_tests/test_color_view_controller.js
@@ -103,6 +103,8 @@ requirejs([
       // verify the color value is set properly
       equal(controller.$colormapSelect.val(), 'discrete-coloring-qiime');
       equal(controller.$select.val(), null);
+      equal(controller.$searchBar.val(), '');
+      equal(controller.$searchBar.is(':hidden'), true);
 
       equal(controller.$colormapSelect.is(':disabled'), true);
       equal(controller.$scaled.is(':disabled'), true);
@@ -114,21 +116,24 @@ requirejs([
 
       var controller = new ColorViewController(
         container, this.sharedDecompositionViewDict);
+
       equal(controller.title, 'Color');
 
       equal(controller.isColoringContinuous(), false);
 
       controller.setMetadataField('Mixed');
       controller.$colormapSelect.val('Viridis').trigger('chosen:updated');
       controller.$scaled.prop('checked', true).trigger('change');
+      equal(controller.$searchBar.is(':hidden'), true);
 
       equal(controller.isColoringContinuous(), true);
 
       controller.setMetadataField('DOB');
-      controller.$colormapSelect.val('Viridis').trigger('chosen:updated');
-      controller.$scaled.prop('checked', true).trigger('change');
+      controller.$colormapSelect.val('Dark2').trigger('chosen:updated');
+      controller.$scaled.prop('checked', false).trigger('change');
+      equal(controller.$searchBar.is(':hidden'), true);
 
-      equal(controller.isColoringContinuous(), true);
+      equal(controller.isColoringContinuous(), false);
     });
 
     test('Test _nonNumericPlottables', function() {
@@ -576,7 +581,7 @@ requirejs([
 
       var container = $('<div style="height:11px; width:12px"></div>');
       var controller = new ColorViewController(
-        container, this.sharedDecompositionViewDict);
+      container, this.sharedDecompositionViewDict);
 
       controller.fromJSON(json);
       var idx = 0;
@@ -587,6 +592,8 @@ requirejs([
       equal(controller.$select.val(), 'DOB');
       equal(controller.$colormapSelect.val(), 'discrete-coloring-qiime');
       equal(controller.$scaled.is(':checked'), false);
+      equal(controller.$searchBar.val(), '');
+      equal(controller.$searchBar.prop('hidden'), false);
     });
 
     test('Testing fromJSON scaled', function() {
@@ -607,6 +614,8 @@ requirejs([
       equal(controller.$colormapSelect.val(), 'Viridis');
       equal(controller.$scaled.is(':checked'), true);
       equal(controller.isColoringContinuous(), true);
+      equal(controller.$searchBar.val(), '');
+      equal(controller.$searchBar.prop('hidden'), true);
     });
 
     test('Testing toJSON (null)', function() {
@@ -642,6 +651,9 @@ requirejs([
       equal(controller.$colormapSelect.val(), 'discrete-coloring-qiime');
       equal(controller.$scaled.is(':checked'), false);
       equal(controller.isColoringContinuous(), false);
+      equal(controller.$searchBar.val(), '');
+      equal(controller.$searchBar.prop('hidden'), false);
+
     });
 
     test('Test getDiscretePaletteColor(map)', function() {
@@ -656,20 +668,17 @@ requirejs([
       '#e5c494', '#b3b3b3']);
     });
 
-    asyncTest('Test setEnabled', function() {
+    test('Test setEnabled', function() {
       var container = $('<div style="height:11px; width:12px"></div>');
       var controller = new ColorViewController(
         container, this.sharedDecompositionViewDict);
 
-      $(function() {
-        // disable
-        controller.setEnabled(false);
-
-        equal(controller.$colormapSelect.is(':disabled'), true);
-        equal(controller.$scaled.is(':disabled'), true);
+      // disable
+      controller.setEnabled(false);
 
-        start(); // qunit
-      });
+      equal(controller.$colormapSelect.is(':disabled'), true);
+      equal(controller.$scaled.is(':disabled'), true);
+      equal(controller.$searchBar.prop('hidden'), false);
     });
 
     /**
@@ -702,6 +711,8 @@ requirejs([
         equal(attr.$select.is(':disabled'), false);
         equal(attr.$colormapSelect.is(':disabled'), true);
         equal(attr.$scaled.is(':disabled'), true);
+        equal(attr.$searchBar.val(), '');
+        equal(attr.$searchBar.is(':disabled'), true);
 
         start(); // qunit
       });
@@ -737,6 +748,8 @@ requirejs([
         equal(attr.$select.is(':disabled'), false);
         equal(attr.$colormapSelect.is(':disabled'), true);
         equal(attr.$scaled.is(':disabled'), true);
+        equal(attr.$searchBar.val(), '');
+        equal(attr.$searchBar.is(':disabled'), true);
 
         start(); // qunit
       });