홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
751804ef 1 parent f582920b

GUI -- Implemented createToolbar in ToolbarService. 

- Will log warnings if no toolbar id is given, there are no tools, and if the tool's ids are duplicated
- creates toolbar div and calls add button functions based on tool input
- Created skeleton dispatchers to ButtonService
- Wrote unit tests for current ToolbarService

Change-Id: I3d05158c5ce132cb94d465674949ade81ed12664
Inline Side-by-side
Showing 3 changed files with 305 additions and 37 deletions
...@@ -20,16 +20,40 @@ ...@@ -20,16 +20,40 @@
20 (function () { 20 (function () {
21 'use strict'; 21 'use strict';
22 22
23 - var $log; 23 + var $log, ps;
24 24
25 - // rids will hold all the ids used with makeRadio so that you can create 25 + var toolBtnIds = {},
26 - // more radio buttons not in order 26 + toolbarPanel,
27 - // TODO: implement this --^ 27 + toolbarDiv;
28 - var rids = {},
29 - ridCtr = 0;
30 28
31 - // toggle state is used in createToolbar (not needed in makeToggle) (??) 29 + function init() {
32 - var toggle = false; 30 + toolBtnIds = {};
31 + }
32 +
33 + function addButton(btn) {
34 + // pass in button object and pass separate the pieces in this function,
35 + // to be passed to ButtonService
36 + var btndiv = toolbarDiv.append('div').attr('class', 'btn');
37 + // use ButtonService to create btn with other arguments and btndiv
38 + }
39 +
40 + function addToggle(tog) {
41 + var togdiv = toolbarDiv.append('div').attr('class', 'tog');
42 + // use ButtonService to create btn with other arguments and togdiv
43 + }
44 +
45 + function addRadio(rad) {
46 + var raddiv = toolbarDiv.append('div').attr('class', 'rad');
47 + // use ButtonService to create btn with other arguments and raddiv
48 + }
49 +
50 + function addSeparator() {
51 + toolbarDiv.append('div')
52 + .attr('class', 'sep')
53 + .style({'width': '2px',
54 + 'border-width': '1px',
55 + 'border-style': 'solid'});
56 + }
33 57
34 function makeButton(id, gid, cb) { 58 function makeButton(id, gid, cb) {
35 return { 59 return {
...@@ -49,10 +73,13 @@ ...@@ -49,10 +73,13 @@
49 }; 73 };
50 } 74 }
51 75
52 - function makeRadio(id, cb) { 76 + function makeRadio(id, gid, cb) {
77 + (id in toolBtnIds) ? toolBtnIds[id] += 1 : toolBtnIds[id] = 0;
53 return { 78 return {
54 t: 'rad', 79 t: 'rad',
55 - id: id + '-' + ridCtr, 80 + id: id + '-' + toolBtnIds[id],
81 + rid: toolBtnIds[id] + '',
82 + gid: gid,
56 cb: cb 83 cb: cb
57 }; 84 };
58 } 85 }
...@@ -63,21 +90,72 @@ ...@@ -63,21 +90,72 @@
63 }; 90 };
64 } 91 }
65 92
66 - function createToolbar() { 93 + function createToolbar(tbarId, tools) {
94 + var api;
67 95
96 + if (!tbarId) {
97 + $log.warn('createToolbar: no ID given');
98 + return null;
99 + }
100 + if (!tools || tools.constructor !== Array || !tools.length) {
101 + $log.warn('createToolbar: no tools given');
102 + return null;
103 + }
104 +
105 + for(var i = 0; i < tools.length; i += 1) {
106 + if (tools[i].t === 'rad' || tools[i].t === 'sep') {
107 + continue;
108 + } else {
109 + if (tools[i].id in toolBtnIds) {
110 + $log.warn('createToolbar: item with id '
111 + + tools[i].id + ' already exists');
112 + return null;
113 + }
114 + toolBtnIds[tools[i].id] = 1;
115 + }
116 + }
117 +
118 + // need to pass in an object with settings for where the toolbar will go
119 + toolbarPanel = ps.createPanel(tbarId, {});
120 + toolbarPanel.classed('toolbar', true);
121 + toolbarDiv = toolbarPanel.el();
122 +
123 + tools.forEach(function (tool) {
124 + switch (tool['t']) {
125 + case 'btn': addButton(tool); break;
126 + case 'tog': addToggle(tool); break;
127 + case 'rad': addRadio(tool); break;
128 + default: addSeparator(); break;
129 + }
130 + });
131 +
132 + // api functions to be returned defined here
133 +
134 + function size(arr) {
135 + return arr.length;
136 + }
137 +
138 + api = {
139 + size: size
140 + };
141 +
142 + return api;
68 } 143 }
69 144
70 angular.module('onosWidget') 145 angular.module('onosWidget')
71 - .factory('ToolbarService', ['$log', function (_$log_) { 146 + .factory('ToolbarService', ['$log', 'PanelService',
72 - $log = _$log_; 147 + function (_$log_, _ps_) {
73 - 148 + $log = _$log_;
74 - return { 149 + ps = _ps_;
75 - makeButton: makeButton, 150 +
76 - makeToggle: makeToggle, 151 + return {
77 - makeRadio: makeRadio, 152 + init: init,
78 - separator: separator, 153 + makeButton: makeButton,
79 - createToolbar: createToolbar 154 + makeToggle: makeToggle,
80 - }; 155 + makeRadio: makeRadio,
81 - }]); 156 + separator: separator,
157 + createToolbar: createToolbar
158 + };
159 + }]);
82 160
83 }()); 161 }());
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -108,7 +108,7 @@ describe('factory: fw/layer/panel.js', function () { ...@@ -108,7 +108,7 @@ describe('factory: fw/layer/panel.js', function () {
108 it('should note when there is no panel to destroy', function () { 108 it('should note when there is no panel to destroy', function () {
109 spyOn($log, 'debug'); 109 spyOn($log, 'debug');
110 ps.destroyPanel('bar'); 110 ps.destroyPanel('bar');
111 - expect($log.debug).toHaveBeenCalledWith('no panel to destroy:', 'bar') 111 + expect($log.debug).toHaveBeenCalledWith('no panel to destroy:', 'bar');
112 }); 112 });
113 113
114 it('should destroy the panel', function () { 114 it('should destroy the panel', function () {
...@@ -117,7 +117,7 @@ describe('factory: fw/layer/panel.js', function () { ...@@ -117,7 +117,7 @@ describe('factory: fw/layer/panel.js', function () {
117 expect(floatPanelSelection().size()).toBe(1); 117 expect(floatPanelSelection().size()).toBe(1);
118 118
119 ps.destroyPanel('foo'); 119 ps.destroyPanel('foo');
120 - expect($log.debug).toHaveBeenCalledWith('destroying panel:', 'foo') 120 + expect($log.debug).toHaveBeenCalledWith('destroying panel:', 'foo');
121 expect(floatPanelSelection().size()).toBe(0); 121 expect(floatPanelSelection().size()).toBe(0);
122 }); 122 });
123 123
......
...@@ -18,26 +18,82 @@ ...@@ -18,26 +18,82 @@
18 ONOS GUI -- Widget -- Toolbar Service - Unit Tests 18 ONOS GUI -- Widget -- Toolbar Service - Unit Tests
19 */ 19 */
20 describe('factory: fw/widget/toolbar.js', function () { 20 describe('factory: fw/widget/toolbar.js', function () {
21 - var $log, fs, tbs; 21 + var $log, fs, tbs, ps,
22 + d3Elem;
22 23
23 - beforeEach(module('onosWidget', 'onosUtil')); 24 + beforeEach(module('onosWidget', 'onosUtil', 'onosLayer'));
24 25
25 - beforeEach(inject(function (_$log_, FnService, ToolbarService) { 26 + beforeEach(inject(function (_$log_, FnService,
27 + ToolbarService, PanelService) {
26 $log = _$log_; 28 $log = _$log_;
27 fs = FnService; 29 fs = FnService;
28 tbs = ToolbarService; 30 tbs = ToolbarService;
31 + ps = PanelService;
29 })); 32 }));
30 33
34 + beforeEach(function () {
35 + d3Elem = d3.select('body').append('div').attr('id', 'floatpanels');
36 + tbs.init();
37 + ps.init();
38 + });
39 +
40 + afterEach(function () {
41 + d3.select('#floatpanels').remove();
42 + tbs.init();
43 + ps.init();
44 + });
45 +
31 it('should define ToolbarService', function () { 46 it('should define ToolbarService', function () {
32 expect(tbs).toBeDefined(); 47 expect(tbs).toBeDefined();
33 }); 48 });
34 49
35 it('should define api functions', function () { 50 it('should define api functions', function () {
36 expect(fs.areFunctions(tbs, [ 51 expect(fs.areFunctions(tbs, [
37 - 'makeButton', 'makeToggle', 'makeRadio', 'separator', 'createToolbar' 52 + 'init', 'makeButton', 'makeToggle', 'makeRadio', 'separator',
53 + 'createToolbar'
38 ])).toBeTruthy(); 54 ])).toBeTruthy();
39 }); 55 });
40 56
57 + function toolbarSelection() {
58 + return d3Elem.selectAll('.toolbar');
59 + }
60 +
61 + it('should have no toolbars to start', function () {
62 + expect(toolbarSelection().size()).toBe(0);
63 + });
64 +
65 + it('should log a warning if no ID is given', function () {
66 + spyOn($log, 'warn');
67 + var tbar = tbs.createToolbar();
68 + expect(tbar).toBeNull();
69 + expect($log.warn).toHaveBeenCalledWith('createToolbar: no ID given');
70 + expect(toolbarSelection().size()).toBe(0);
71 + });
72 +
73 + it('should log a warning if no tools are given', function () {
74 + spyOn($log, 'warn');
75 + var tbar = tbs.createToolbar(true);
76 + expect(tbar).toBeNull();
77 + expect($log.warn).toHaveBeenCalledWith('createToolbar: no tools given');
78 + expect(toolbarSelection().size()).toBe(0);
79 + });
80 +
81 + it('should log a warning if tools are not an array', function () {
82 + spyOn($log, 'warn');
83 + var tbar = tbs.createToolbar(true, {});
84 + expect(tbar).toBeNull();
85 + expect($log.warn).toHaveBeenCalledWith('createToolbar: no tools given');
86 + expect(toolbarSelection().size()).toBe(0);
87 + });
88 +
89 + it('should log a warning if tools array is empty', function () {
90 + spyOn($log, 'warn');
91 + var tbar = tbs.createToolbar(true, []);
92 + expect(tbar).toBeNull();
93 + expect($log.warn).toHaveBeenCalledWith('createToolbar: no tools given');
94 + expect(toolbarSelection().size()).toBe(0);
95 + });
96 +
41 it("should verify makeButton's returned object", function () { 97 it("should verify makeButton's returned object", function () {
42 var button = tbs.makeButton('foo', 'glyph-bar', function () {}); 98 var button = tbs.makeButton('foo', 'glyph-bar', function () {});
43 99
...@@ -57,16 +113,48 @@ describe('factory: fw/widget/toolbar.js', function () { ...@@ -57,16 +113,48 @@ describe('factory: fw/widget/toolbar.js', function () {
57 }); 113 });
58 114
59 it("should verify makeRadio's returned object", function () { 115 it("should verify makeRadio's returned object", function () {
60 - // TODO: finish this 116 + var rFoo0 = tbs.makeRadio('foo', 'glyph-foo0', function () {});
117 + var rFoo1 = tbs.makeRadio('foo', 'glyph-foo1', function () {});
118 + var rFoo2 = tbs.makeRadio('foo', 'glyph-foo2', function () {});
119 + var rBar0 = tbs.makeRadio('bar', 'glyph-bar0', function () {});
120 + var rBar1 = tbs.makeRadio('bar', 'glyph-bar1', function () {});
121 + var rFoo3 = tbs.makeRadio('foo', 'glyph-foo3', function () {});
122 +
123 + expect(rFoo0.t).toBe('rad');
124 + expect(rFoo0.id).toBe('foo-0');
125 + expect(rFoo0.rid).toBe('0');
126 + expect(rFoo0.gid).toBe('glyph-foo0');
127 + expect(fs.isF(rFoo0.cb)).toBeTruthy();
128 +
129 + expect(rFoo1.t).toBe('rad');
130 + expect(rFoo1.id).toBe('foo-1');
131 + expect(rFoo1.rid).toBe('1');
132 + expect(rFoo1.gid).toBe('glyph-foo1');
133 + expect(fs.isF(rFoo1.cb)).toBeTruthy();
61 134
62 - //var rFoo1 = tbs.makeRadio('foo', function () {}); 135 + expect(rFoo2.t).toBe('rad');
63 - //var rFoo2 = tbs.makeRadio('foo', function () {}); 136 + expect(rFoo2.id).toBe('foo-2');
64 - //var rFoo3 = tbs.makeRadio('foo', function () {}); 137 + expect(rFoo2.rid).toBe('2');
65 - //var rBar1 = tbs.makeRadio('bar', function () {}); 138 + expect(rFoo2.gid).toBe('glyph-foo2');
66 - // 139 + expect(fs.isF(rFoo2.cb)).toBeTruthy();
67 - //expect(radio1.t).toBe('rad'); 140 +
68 - //expect(radio1.id).toBe('foo'); 141 + expect(rFoo3.t).toBe('rad');
69 - //expect(fs.isF(radio1.cb)).toBeTruthy(); 142 + expect(rFoo3.id).toBe('foo-3');
143 + expect(rFoo3.rid).toBe('3');
144 + expect(rFoo3.gid).toBe('glyph-foo3');
145 + expect(fs.isF(rFoo3.cb)).toBeTruthy();
146 +
147 + expect(rBar0.t).toBe('rad');
148 + expect(rBar0.id).toBe('bar-0');
149 + expect(rBar0.rid).toBe('0');
150 + expect(rBar0.gid).toBe('glyph-bar0');
151 + expect(fs.isF(rBar0.cb)).toBeTruthy();
152 +
153 + expect(rBar1.t).toBe('rad');
154 + expect(rBar1.id).toBe('bar-1');
155 + expect(rBar1.rid).toBe('1');
156 + expect(rBar1.gid).toBe('glyph-bar1');
157 + expect(fs.isF(rBar1.cb)).toBeTruthy();
70 }); 158 });
71 159
72 it("should verify separator's returned object", function () { 160 it("should verify separator's returned object", function () {
...@@ -74,4 +162,106 @@ describe('factory: fw/widget/toolbar.js', function () { ...@@ -74,4 +162,106 @@ describe('factory: fw/widget/toolbar.js', function () {
74 expect(separator.t).toBe('sep'); 162 expect(separator.t).toBe('sep');
75 }); 163 });
76 164
165 + it('should log a warning if btn id is already in use', function () {
166 + var tools = [
167 + tbs.makeButton('id0', 'glyph-id0', function () {}),
168 + tbs.makeButton('id0', 'glyph-id0', function () {})
169 + ];
170 +
171 + spyOn($log, 'warn');
172 + var tbar = tbs.createToolbar('someId', tools);
173 + expect(tbar).toBeNull();
174 + expect($log.warn).toHaveBeenCalledWith('createToolbar: item with id ' +
175 + 'id0 already exists');
176 + expect(toolbarSelection().size()).toBe(0);
177 + });
178 +
179 + it('should log a warning if tog id is already in use', function () {
180 + var tools = [
181 + tbs.makeToggle('id0', 'glyph-id0', function () {}),
182 + tbs.makeToggle('id1', 'glyph-id1', function () {}),
183 + tbs.makeToggle('id0', 'glyph-id0', function () {})
184 + ];
185 +
186 + spyOn($log, 'warn');
187 + var tbar = tbs.createToolbar('someId', tools);
188 + expect(tbar).toBeNull();
189 + expect($log.warn).toHaveBeenCalledWith('createToolbar: item with id ' +
190 + 'id0 already exists');
191 + expect(toolbarSelection().size()).toBe(0);
192 + });
193 +
194 + it('should create a toolbar', function () {
195 + // need to create a button so it does not throw errors
196 + var tools = [
197 + tbs.makeButton('btn0', 'glyph0', function () {})
198 + ];
199 + spyOn($log, 'warn');
200 + var tbar = tbs.createToolbar('test', tools);
201 + expect($log.warn).not.toHaveBeenCalled();
202 + expect(toolbarSelection().size()).toBe(1);
203 + });
204 +
205 + it('should test multiple separators in a row', function () {
206 + var tools = [
207 + tbs.separator(),
208 + tbs.separator(),
209 + tbs.separator()
210 + ];
211 + spyOn($log, 'warn');
212 + var tbar = tbs.createToolbar('test', tools);
213 + expect($log.warn).not.toHaveBeenCalled();
214 + expect(toolbarSelection().size()).toBe(1);
215 + });
216 +
217 + it('should create a button div', function () {
218 + var tools = [
219 + tbs.makeButton('btn0', 'glyph0', function () {})
220 + ];
221 + spyOn($log, 'warn');
222 + var tbar = tbs.createToolbar('test', tools);
223 + expect($log.warn).not.toHaveBeenCalled();
224 + expect(toolbarSelection().size()).toBe(1);
225 +
226 + expect(d3Elem.select('.btn')).toBeTruthy();
227 + });
228 +
229 + it('should create a toggle div', function () {
230 + var tools = [
231 + tbs.makeToggle('tog0', 'glyph0', function () {})
232 + ];
233 + spyOn($log, 'warn');
234 + var tbar = tbs.createToolbar('test', tools);
235 + expect($log.warn).not.toHaveBeenCalled();
236 + expect(toolbarSelection().size()).toBe(1);
237 +
238 + expect(d3Elem.select('.tog')).toBeTruthy();
239 + });
240 +
241 + it('should create a radio btn div', function () {
242 + var tools = [
243 + tbs.makeRadio('rad0', 'glyph0', function () {})
244 + ];
245 + spyOn($log, 'warn');
246 + var tbar = tbs.createToolbar('test', tools);
247 + expect($log.warn).not.toHaveBeenCalled();
248 + expect(toolbarSelection().size()).toBe(1);
249 +
250 + expect(d3Elem.select('.rad')).toBeTruthy();
251 + });
252 +
253 +
254 + it('should create a separator div', function () {
255 + var tools = [
256 + tbs.separator()
257 + ];
258 + tbs.createToolbar('test', tools);
259 +
260 + var sepDiv = d3Elem.select('.sep');
261 + expect(sepDiv).toBeTruthy();
262 + expect(sepDiv.style('width')).toBe('2px');
263 + expect(sepDiv.style('border-width')).toBe('1px');
264 + expect(sepDiv.style('border-style')).toBe('solid');
265 + });
266 +
77 }); 267 });
......