OLD | NEW |
1 'use strict'; | 1 'use strict'; |
2 | 2 |
3 describe('charm configuration', function() { | 3 describe('charm configuration', function() { |
4 var Y, juju, db, models, views, makeView, container, | 4 var Y, juju, db, models, views, makeView, container, |
5 charmConfig = | 5 charmConfig = |
6 { config: | 6 { config: |
7 { options: | 7 { options: |
8 { option0: | 8 { option0: |
9 { name: 'option0', | 9 { name: 'option0', |
10 type: 'string', | 10 type: 'string', |
11 description: 'Option Zero'}, | 11 description: 'Option Zero'}, |
12 option1: | 12 option1: |
13 { name: 'option1', | 13 { name: 'option1', |
14 type: 'boolean', | 14 type: 'boolean', |
15 description: 'Option One'}, | 15 description: 'Option One'}, |
16 option2: | 16 option2: |
17 { name: 'option2', | 17 { name: 'option2', |
18 type: 'int', | 18 type: 'int', |
19 description: 'Option Two'} | 19 description: 'Option Two'} |
20 } | 20 } |
21 } | 21 } |
22 }; | 22 }; |
23 | 23 |
24 before(function(done) { | 24 before(function(done) { |
25 Y = YUI(GlobalConfig).use( | 25 Y = YUI(GlobalConfig).use( |
26 'juju-models', | 26 'juju-models', |
| 27 'juju-charm-models', |
27 'juju-views', | 28 'juju-views', |
28 'juju-gui', | 29 'juju-gui', |
29 'juju-env', | 30 'juju-env', |
30 'juju-tests-utils', | 31 'juju-tests-utils', |
31 'node-event-simulate', | 32 'node-event-simulate', |
32 'node', | 33 'node', |
33 | 34 |
34 function(Y) { | 35 function(Y) { |
35 juju = Y.namespace('juju'); | 36 juju = Y.namespace('juju'); |
36 models = Y.namespace('juju.models'); | 37 models = Y.namespace('juju.models'); |
(...skipping 155 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
192 controls.item(1).focus(); | 193 controls.item(1).focus(); |
193 tooltip.get('srcNode').get('text').should.equal( | 194 tooltip.get('srcNode').get('text').should.equal( |
194 'Number of units to deploy for this service.'); | 195 'Number of units to deploy for this service.'); |
195 tooltip.get('visible').should.equal(true); | 196 tooltip.get('visible').should.equal(true); |
196 controls.item(1).blur(); | 197 controls.item(1).blur(); |
197 controls.item(3).focus(); | 198 controls.item(3).focus(); |
198 tooltip.get('srcNode').get('text').should.equal('Option Zero'); | 199 tooltip.get('srcNode').get('text').should.equal('Option Zero'); |
199 tooltip.get('visible').should.equal(true); | 200 tooltip.get('visible').should.equal(true); |
200 }); | 201 }); |
201 | 202 |
202 it('must keep the tooltip aligned with its field', function() { | 203 it('must keep the tooltip aligned with its field vertically', function() { |
203 var charm = new models.Charm({id: 'precise/mysql-7'}), | 204 // The tooltip's Y coordinate should be such that it is centered vertically |
204 view = new views.CharmConfigurationView( | 205 // on its associated field. |
205 { container: container, | 206 var fieldHeight = 7; |
206 model: charm, | 207 var tooltipHeight = 17; |
207 tooltipDelay: 0 }); | 208 var fieldY = 1000; |
208 charm.setAttrs(charmConfig); | 209 var view = new views.CharmConfigurationView(); |
209 charm.loaded = true; | 210 var y = view._calculateTooltipY(fieldY, fieldHeight, tooltipHeight); |
210 view.render(); | 211 assert.equal(y, 995); |
211 var tooltip = view.tooltip, | 212 }); |
212 controls = container.all('.control-group input'), | 213 |
213 panel = container.one('.charm-panel'); | 214 it('must keep the tooltip to the left of its field', function() { |
214 // The panel needs to be scrollable and smaller than what it contains. We | 215 // The tooltip's X coordinate should be such that it is to the left of its |
215 // do this by setting a height to the panel and then setting the height to | 216 // associated field. |
216 // one of the controls to something much bigger. | 217 var tooltipWidth = 100; |
217 panel.setStyles({height: '400px', overflowY: 'auto'}); | 218 var fieldX = 1000; |
218 controls.item(2).set('height', '4000px'); | 219 var view = new views.CharmConfigurationView(); |
219 // We need to have the field visible or else the call to "focus" will | 220 var x = view._calculateTooltipX(fieldX, tooltipWidth); |
220 // change the positioning after our calculation has occurred, thus | 221 assert.equal(x, 885); |
221 // changing our Y field. | |
222 controls.item(1).scrollIntoView(); | |
223 controls.item(1).focus(); | |
224 var originalY = tooltip.get('boundingBox').getY(); | |
225 panel.set('scrollTop', panel.get('scrollTop') + 10); | |
226 // The simulate module does not support firing scroll events so we call | |
227 // the associated method directly. | |
228 view._moveTooltip(); | |
229 Math.floor(tooltip.get('boundingBox').getY()) | |
230 .should.equal(Math.floor(originalY - 10)); | |
231 }); | 222 }); |
232 | 223 |
233 it('must hide the tooltip when its field scrolls away', function() { | 224 it('must hide the tooltip when its field scrolls away', function() { |
234 var charm = new models.Charm({id: 'precise/mysql-7'}), | 225 var charm = new models.Charm({id: 'precise/mysql-7'}), |
235 view = new views.CharmConfigurationView( | 226 view = new views.CharmConfigurationView( |
236 { container: container, | 227 { container: container, |
237 model: charm, | 228 model: charm, |
238 tooltipDelay: 0 }); | 229 tooltipDelay: 0 }); |
239 charm.setAttrs(charmConfig); | 230 charm.setAttrs(charmConfig); |
240 charm.loaded = true; | 231 charm.loaded = true; |
(...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
368 view.render(); | 359 view.render(); |
369 var config_raw = 'tuning-level: \n expert'; | 360 var config_raw = 'tuning-level: \n expert'; |
370 view.configFileContent = config_raw; | 361 view.configFileContent = config_raw; |
371 container.one('#charm-deploy').simulate('click'); | 362 container.one('#charm-deploy').simulate('click'); |
372 var _ = expect(received_config).to.not.exist; | 363 var _ = expect(received_config).to.not.exist; |
373 received_config_raw.should.equal(config_raw); | 364 received_config_raw.should.equal(config_raw); |
374 }); | 365 }); |
375 | 366 |
376 | 367 |
377 }); | 368 }); |
OLD | NEW |