GUI -- Button and Toolbar Services with unit tests - finished implementing button widget, started modifying toolbar to use ButtonService
Change-Id: I96078516d396951175fb8d9e69dd7796da9f114e
diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/button-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/button-spec.js
index f07664c..b0251c1 100644
--- a/web/gui/src/main/webapp/tests/app/fw/widget/button-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/widget/button-spec.js
@@ -83,8 +83,16 @@
expect(count).toBe(0);
});
+ it('should not append toggle to an undefined div', function () {
+ spyOn($log, 'warn');
+ expect(bns.toggle(undefined, 'id', 'gid', false,
+ function () {})).toBeNull();
+ expect($log.warn).toHaveBeenCalledWith('Toggle cannot append to div');
+ });
+
it('should verify toggle glyph', function () {
- var tog = bns.toggle(d3Elem, 'tbar0-tog-0', 'crown', function () {});
+ var tog = bns.toggle(d3Elem, 'tbar0-tog-0', 'crown',
+ false, function () {});
expect((tog.el).classed('tog')).toBeTruthy();
expect((tog.el).attr('id')).toBe('tbar0-tog-0');
expect((tog.el).select('svg')).toBeTruthy();
@@ -116,10 +124,139 @@
expect(tog.selected()).toBe(false);
});
- it('should not append toggle to an undefined div', function () {
- spyOn($log, 'warn');
- expect(bns.toggle(undefined, 'id', 'gid', function () {})).toBeNull();
- expect($log.warn).toHaveBeenCalledWith('Toggle cannot append to div');
+ it('should verity toggle initial state', function () {
+ var tog = bns.toggle(d3Elem, 'id', 'gid', true);
+ expect(tog.selected()).toBe(true);
+ tog = bns.toggle(d3Elem, 'id', 'gid', false);
+ expect(tog.selected()).toBe(false);
+ tog = bns.toggle(d3Elem, 'id', 'gid', '');
+ expect(tog.selected()).toBe(false);
+ tog = bns.toggle(d3Elem, 'id', 'gid', 'something');
+ expect(tog.selected()).toBe(true);
});
+ it('should not append radio button set to an undefined div', function () {
+ spyOn($log, 'warn');
+ expect(bns.radioSet(undefined, 'id', [])).toBeNull();
+ expect($log.warn).toHaveBeenCalledWith('Radio buttons cannot append ' +
+ 'to div');
+ });
+
+ it('should not create radio button set from a non-array', function () {
+ var rads = {test: 'test'};
+ spyOn($log, 'warn');
+
+ expect(bns.radioSet(d3Elem, 'test', rads)).toBeNull();
+ expect($log.warn).toHaveBeenCalledWith('Radio button set is not ' +
+ 'an array');
+ rads = 'rads';
+ expect(bns.radioSet(d3Elem, 'test', rads)).toBeNull();
+ expect($log.warn).toHaveBeenCalledWith('Radio button set is not ' +
+ 'an array');
+ rads = {arr: [1, 2, 3]};
+ expect(bns.radioSet(d3Elem, 'test', rads)).toBeNull();
+ expect($log.warn).toHaveBeenCalledWith('Radio button set is not ' +
+ 'an array');
+ });
+
+ it('should not create radio button set from empty array', function () {
+ var rads = [];
+ spyOn($log, 'warn');
+ expect(bns.radioSet(d3Elem, 'test', rads)).toBeNull();
+ expect($log.warn).toHaveBeenCalledWith('Cannot create radio button ' +
+ 'set from empty array');
+ });
+
+ it('should verify radio button glyph structure', function () {
+ var rads = [
+ { gid: 'crown', cb: function () {}, tooltip: 'n/a'}
+ ], rdiv;
+
+ spyOn($log, 'warn');
+ expect(bns.radioSet(d3Elem, 'test', rads)).toBeTruthy();
+ expect($log.warn).not.toHaveBeenCalled();
+
+ rdiv = d3Elem.select('div');
+ expect(rdiv.classed('rset')).toBe(true);
+ expect(rdiv.select('div').classed('rad')).toBe(true);
+ expect(rdiv.select('div').classed('tog')).toBe(false);
+ expect(rdiv.select('div').attr('id')).toBe('test-0');
+ expect(rdiv.select('div').select('svg')).toBeTruthy();
+ expect(rdiv.select('use').classed('glyph')).toBeTruthy();
+ expect(rdiv.select('use').attr('xlink:href')).toBe('#crown');
+ });
+
+ it('should verify more than one radio button glyph was added', function () {
+ var rads = [
+ { gid: 'crown', cb: function () {}, tooltip: 'n/a'},
+ { gid: 'router', cb: function () {}, tooltip: 'n/a'}
+ ], rdiv;
+
+ expect(bns.radioSet(d3Elem, 'test', rads)).toBeTruthy();
+ rdiv = d3Elem.select('div');
+ expect(rdiv.select('#test-0')).toBeTruthy();
+ expect(rdiv.select('#test-1')).toBeTruthy();
+
+ expect(rdiv.select('#test-0')
+ .select('use')
+ .classed('glyph'))
+ .toBeTruthy();
+ expect(rdiv.select('#test-0')
+ .select('use')
+ .attr('xlink:href'))
+ .toBe('#crown');
+
+ expect(rdiv.select('#test-1')
+ .select('use')
+ .classed('glyph'))
+ .toBeTruthy();
+ expect(rdiv.select('#test-1')
+ .select('use')
+ .attr('xlink:href'))
+ .toBe('#router');
+ });
+
+ it('should select the correct radio button', function () {
+ var count0 = 0,
+ count1 = 9;
+ function cb0() { count0++; }
+ function cb1() { count1++; }
+
+ var rads = [
+ { gid: 'crown', cb: cb0, tooltip: 'n/a'},
+ { gid: 'router', cb: cb1, tooltip: 'n/a'}
+ ],
+ rset = bns.radioSet(d3Elem, 'test', rads);
+ spyOn($log, 'error');
+
+ expect(rset.selected()).toBe(0);
+ expect(count0).toBe(0);
+ expect(count1).toBe(9);
+ rset.selected(0);
+ expect(rset.selected()).toBe(0);
+ expect(count0).toBe(0);
+ expect(count1).toBe(9);
+
+ rset.selected(1);
+ expect(rset.selected()).toBe(1);
+ expect(count0).toBe(1);
+ expect(count1).toBe(10);
+
+ rset.selected(-1);
+ expect($log.error).toHaveBeenCalledWith('Cannot select radio button ' +
+ 'of index -1');
+ expect(rset.selected()).toBe(1);
+ expect(count0).toBe(1);
+ expect(count1).toBe(10);
+
+ rset.selected(66);
+ expect($log.error).toHaveBeenCalledWith('Cannot select radio button ' +
+ 'of index 66');
+ expect(rset.selected()).toBe(1);
+ expect(count0).toBe(1);
+ expect(count1).toBe(10);
+ });
+
+ // TODO: figure out how to trigger d3 onclick for buttons and toggles
+
});
diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js
index 30eec65..3bca9e7 100644
--- a/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js
@@ -18,19 +18,23 @@
ONOS GUI -- Widget -- Toolbar Service - Unit Tests
*/
describe('factory: fw/widget/toolbar.js', function () {
- var $log, fs, tbs, ps,
+ var $log, fs, tbs, ps, bns, is,
d3Elem;
- beforeEach(module('onosWidget', 'onosUtil', 'onosLayer'));
+ beforeEach(module('onosWidget', 'onosUtil', 'onosLayer', 'onosSvg'));
- beforeEach(inject(function (_$log_, FnService,
- ToolbarService, PanelService) {
+ beforeEach(inject(function (_$log_, FnService, ToolbarService,
+ PanelService, ButtonService, IconService) {
$log = _$log_;
fs = FnService;
tbs = ToolbarService;
ps = PanelService;
+ bns = ButtonService;
+ is = IconService;
}));
+ // TODO: figure out solution for calling tests with new info instead of calling init
+
beforeEach(function () {
d3Elem = d3.select('body').append('div').attr('id', 'floatpanels');
tbs.init();
@@ -50,7 +54,7 @@
it('should define api functions', function () {
expect(fs.areFunctions(tbs, [
'init', 'makeButton', 'makeToggle', 'makeRadio', 'separator',
- 'createToolbar'
+ 'createToolbar', 'createToolbar1', 'destroyToolbar'
])).toBeTruthy();
});
@@ -264,4 +268,86 @@
expect(sepDiv.style('border-style')).toBe('solid');
});
+ // ==== new Toolbar Unit tests --------------------------------------------
+
+ it('should warn if createToolbar id is invalid', function () {
+ spyOn($log, 'warn');
+ expect(tbs.createToolbar1()).toBeNull();
+ expect($log.warn).toHaveBeenCalledWith('createToolbar: no ID given');
+
+ expect(tbs.createToolbar1('test')).toBeTruthy();
+ expect(tbs.createToolbar1('test')).toBeNull();
+ expect($log.warn).toHaveBeenCalledWith('createToolbar: ID already exists');
+ });
+
+ it('should create an unpopulated toolbar', function () {
+ spyOn($log, 'warn');
+ expect(tbs.createToolbar1('test')).toBeTruthy();
+ expect($log.warn).not.toHaveBeenCalled();
+ });
+
+ it('should create a button', function () {
+ spyOn($log, 'warn');
+ var toolbar = tbs.createToolbar1('test'),
+ btn = toolbar.addButton1('btn0', 'gid', function () {});
+ expect(btn).not.toBeNull();
+ expect(btn.id).toBe('tbar-test-btn0');
+ expect($log.warn).not.toHaveBeenCalled();
+ });
+
+ it('should not create a button with a duplicate id', function () {
+ spyOn($log, 'warn');
+ var toolbar = tbs.createToolbar1('test'),
+ btn = toolbar.addButton1('btn0', 'gid', function () {}),
+ btn1 = toolbar.addButton1('btn0', 'gid', function () {});
+ expect(btn).not.toBeNull();
+ expect(btn.id).toBe('tbar-test-btn0');
+ expect($log.warn).toHaveBeenCalledWith('addButton: ID already exists');
+ expect(btn1).toBeNull();
+ });
+
+ it('should create a toggle', function () {
+ spyOn($log, 'warn');
+ var toolbar = tbs.createToolbar1('test'),
+ tog = toolbar.addButton1('tog0', 'gid', false, function () {});
+ expect(tog).not.toBeNull();
+ expect(tog.id).toBe('tbar-test-tog0');
+ expect($log.warn).not.toHaveBeenCalled();
+ });
+
+ it('should not create a toggle with a duplicate id', function () {
+ spyOn($log, 'warn');
+ var toolbar = tbs.createToolbar1('test'),
+ tog = toolbar.addToggle1('tog0', 'gid', false, function () {}),
+ tog1 = toolbar.addToggle1('tog0', 'gid', true, function () {});
+ expect(tog).not.toBeNull();
+ expect(tog.id).toBe('tbar-test-tog0');
+ expect($log.warn).toHaveBeenCalledWith('addToggle: ID already exists');
+ expect(tog1).toBeNull();
+ });
+
+
+ it('should create a radio button set', function () {
+ spyOn($log, 'warn');
+ var toolbar = tbs.createToolbar1('test'),
+ rset = [
+ { gid: 'crown', cb: function () {}, tooltip: 'nothing' },
+ { gid: 'bird', cb: function () {}, tooltip: 'nothing' }
+ ],
+ rad = toolbar.addRadioSet('rad0', rset);
+ expect(rad).not.toBeNull();
+ expect(rad.rads[0].id).toBe('tbar-test-rad0-0');
+ expect(rad.rads[1].id).toBe('tbar-test-rad0-1');
+ expect($log.warn).not.toHaveBeenCalled();
+ });
+
+ //it('should not append to a destroyed toolbar', function () {
+ // spyOn($log, 'warn');
+ // var toolbar = tbs.createToolbar1('test');
+ // expect(toolbar).not.toBeNull();
+ // tbs.destroyToolbar('tbar-test');
+ // expect(toolbar.addButton1('btn', 'gid', function () {})).toBeNull();
+ // expect($log.warn).toHaveBeenCalledWith('Button cannot append to div');
+ //});
+
});