ONOS-1783 - GUI -- Refresh buttons for tabular views added. Minor table.js refactor.

Change-Id: Iee6c65fa8477b367e40a556c3c820ca454601a5f
diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
index 184d29d..693f42d 100644
--- a/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
@@ -19,7 +19,7 @@
  */
 describe('factory: fw/widget/table.js', function () {
     var $log, $compile, $rootScope,
-        fs, mast, is,
+        fs, ts, mast, is,
         scope, compiled,
         table, thead, tbody, mockHeader,
         mockH2Height = 20,
@@ -99,11 +99,12 @@
     });
 
     beforeEach(inject(function (_$log_, _$compile_, _$rootScope_,
-                                FnService, MastService, IconService) {
+                                FnService, TableService, MastService, IconService) {
         $log = _$log_;
         $compile = _$compile_;
         $rootScope = _$rootScope_;
         fs = FnService;
+        ts = TableService;
         mast = MastService;
         is = IconService;
     }));
@@ -127,6 +128,16 @@
         mockHeader.remove();
     });
 
+    it('should define TableBuilderService', function () {
+        expect(ts).toBeDefined();
+    });
+
+    it('should define api functions', function () {
+        expect(fs.areFunctions(ts, [
+            'resetSortIcons'
+        ])).toBeTruthy();
+    });
+
     function compileTable() {
         compiled = $compile(table);
         compiled(scope);
@@ -204,26 +215,22 @@
         thElems[1].click();
         currentTh = angular.element(thElems[1]);
         div = currentTh.find('div');
-        expect(div.html()).toBe('<svg class="embeddedIcon" ' +
-                                'width="10" height="10" viewBox="0 0 50 50">' +
-                                '<g class="icon upArrow">' +
-                                '<rect width="50" height="50" rx="5"></rect>' +
-                                '<use width="50" height="50" class="glyph" ' +
-                                'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
-                                'xlink:href="#triangleUp">' +
-                                '</use>' +
-                                '</g></svg>');
+        expect(div.html()).toBe(
+            '<svg class="embeddedIcon" width="10" height="10" viewBox="0 0 ' +
+            '50 50"><g class="icon upArrow"><rect width="50" height="50" ' +
+            'rx="5"></rect><use width="50" height="50" class="glyph" xmlns:' +
+            'xlink="http://www.w3.org/1999/xlink" xlink:href="#triangleUp">' +
+            '</use></g></svg>'
+        );
         thElems[1].click();
         div = currentTh.find('div');
-        expect(div.html()).toBe('<svg class="embeddedIcon" ' +
-                                'width="10" height="10" viewBox="0 0 50 50">' +
-                                '<g class="icon downArrow">' +
-                                '<rect width="50" height="50" rx="5"></rect>' +
-                                '<use width="50" height="50" class="glyph" ' +
-                                'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
-                                'xlink:href="#triangleDown">' +
-                                '</use>' +
-                                '</g></svg>');
+        expect(div.html()).toBe(
+            '<svg class="embeddedIcon" width="10" height="10" viewBox="0 0 ' +
+            '50 50"><g class="icon downArrow"><rect width="50" height="50" ' +
+            'rx="5"></rect><use width="50" height="50" class="glyph" xmlns:' +
+            'xlink="http://www.w3.org/1999/xlink" xlink:href="#triangleDown">' +
+            '</use></g></svg>'
+        );
 
         thElems[2].click();
         div = currentTh.children();
@@ -233,15 +240,13 @@
         // the new element should have the ascending icon
         currentTh = angular.element(thElems[2]);
         div = currentTh.children();
-        expect(div.html()).toBe('<svg class="embeddedIcon" ' +
-                                'width="10" height="10" viewBox="0 0 50 50">' +
-                                '<g class="icon upArrow">' +
-                                '<rect width="50" height="50" rx="5"></rect>' +
-                                '<use width="50" height="50" class="glyph" ' +
-                                'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
-                                'xlink:href="#triangleUp">' +
-                                '</use>' +
-                                '</g></svg>');
+        expect(div.html()).toBe(
+            '<svg class="embeddedIcon" width="10" height="10" viewBox="0 0 ' +
+            '50 50"><g class="icon upArrow"><rect width="50" height="50" ' +
+            'rx="5"></rect><use width="50" height="50" class="glyph" xmlns:' +
+            'xlink="http://www.w3.org/1999/xlink" xlink:href="#triangleUp">' +
+            '</use></g></svg>'
+        );
     }
 
     it('should affirm that onos-fixed-header is working', function () {
@@ -264,8 +269,7 @@
 
         compileTable();
         verifyGivenTags('onos-sortable-header');
-        // ctrlCallback functionality is tested in device-spec
-        // only checking that it has been called correctly in the directive
+
         scope.sortCallback = jasmine.createSpy('sortCallback');
 
         thElems = thead.find('th');
@@ -273,4 +277,8 @@
         verifyIcons(thElems);
     });
 
+    // Note: testing resetSortIcons isn't feasible because due to the nature of
+    //       directive compilation: they are jQuery elements, not d3 elements,
+    //       so the function doesn't work.
+
 });