LEFT | RIGHT |
1 /* | 1 /* |
2 This file is part of the Juju GUI, which lets users view and manage Juju | 2 This file is part of the Juju GUI, which lets users view and manage Juju |
3 environments within a graphical interface (https://launchpad.net/juju-gui). | 3 environments within a graphical interface (https://launchpad.net/juju-gui). |
4 Copyright (C) 2012-2013 Canonical Ltd. | 4 Copyright (C) 2012-2013 Canonical Ltd. |
5 | 5 |
6 This program is free software: you can redistribute it and/or modify it under | 6 This program is free software: you can redistribute it and/or modify it under |
7 the terms of the GNU Affero General Public License version 3, as published by | 7 the terms of the GNU Affero General Public License version 3, as published by |
8 the Free Software Foundation. | 8 the Free Software Foundation. |
9 | 9 |
10 This program is distributed in the hope that it will be useful, but WITHOUT | 10 This program is distributed in the hope that it will be useful, but WITHOUT |
11 ANY WARRANTY; without even the implied warranties of MERCHANTABILITY, | 11 ANY WARRANTY; without even the implied warranties of MERCHANTABILITY, |
12 SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero | 12 SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero |
13 General Public License for more details. | 13 General Public License for more details. |
14 | 14 |
15 You should have received a copy of the GNU Affero General Public License along | 15 You should have received a copy of the GNU Affero General Public License along |
16 with this program. If not, see <http://www.gnu.org/licenses/>. | 16 with this program. If not, see <http://www.gnu.org/licenses/>. |
17 */ | 17 */ |
18 | 18 |
19 'use strict'; | 19 'use strict'; |
20 | 20 |
21 describe('charm token drag and drop', function() { | 21 describe('charm token drag and drop', function() { |
22 var Y, charmContainer, container, CharmContainer, dropZone; | 22 var Y, container, outerContainer, CharmToken, token; |
23 | 23 |
24 before(function(done) { | 24 before(function(done) { |
25 Y = YUI(GlobalConfig).use([ | 25 Y = YUI(GlobalConfig).use([ |
26 'browser-charm-container', | 26 'browser-charm-token', |
27 'juju-tests-utils' | 27 'juju-tests-utils' |
28 ], | 28 ], |
29 function(Y) { | 29 function(Y) { |
30 CharmContainer = Y.juju.widgets.browser.CharmContainer; | 30 CharmToken = Y.juju.widgets.browser.CharmToken; |
31 done(); | 31 done(); |
32 }); | 32 }); |
33 | 33 |
34 }); | 34 }); |
35 | 35 |
36 beforeEach(function() { | 36 beforeEach(function() { |
37 container = Y.namespace('juju-tests.utils').makeContainer('container'); | 37 outerContainer = Y.namespace('juju-tests.utils').makeContainer() |
38 dropZone = Y.namespace('juju-tests.utils').makeContainer('the-drop-zone') | 38 .addClass('yui3-charmtoken'); |
39 .addClass('zoom-plane'); | 39 container = Y.namespace('juju-tests.utils').makeContainer(); |
| 40 outerContainer.append(container); |
40 }); | 41 }); |
41 | 42 |
42 afterEach(function() { | 43 afterEach(function() { |
43 if (charmContainer) { | 44 outerContainer.remove().destroy(true); |
44 charmContainer.destroy(); | 45 if (token) { |
| 46 token.destroy(); |
45 } | 47 } |
46 container.remove().destroy(true); | |
47 }); | 48 }); |
48 | 49 |
49 it('makes each charm token draggable', function() { | 50 it('makes each charm token draggable', function() { |
50 var charmData = [{ | 51 var cfg = { |
51 name: 'foo', | 52 id: 'test', |
52 id: 'foo-id' | 53 name: 'some-charm', |
53 }, { | 54 description: 'some description', |
54 name: 'bar', | 55 recent_commit_count: 1, |
55 id: 'bar-id' | 56 recent_download_count: 3, |
56 }, { | 57 tested_providers: ['ec2'] |
57 name: 'baz', | |
58 id: 'baz-id' | |
59 }]; | |
60 charmContainer = new Y.juju.widgets.browser.CharmContainer({ | |
61 children: charmData | |
62 }); | |
63 charmContainer.render(container); | |
64 var draggableCharms = []; | |
65 charmContainer._makeDraggable = function(element, dragImage, charmId) { | |
66 draggableCharms.push(charmId); | |
67 }; | 58 }; |
68 charmContainer.addCharmTokenDragAndDrop(container); | 59 token = new CharmToken(cfg); |
69 // Since each individual element in the charm token DOM is made draggable, | 60 var draggable = []; |
70 // the total number of DOM nodes touched is greater than the number of | 61 token._makeDraggable = function(element, dragImage, charmData) { |
71 // charms represented. | 62 draggable.push(Y.JSON.parse(charmData).id); |
72 assert.isTrue(draggableCharms.length > charmData.length); | 63 }; |
| 64 token.renderUI(container); |
| 65 // Many elements are made draggable for a single token token. |
| 66 assert.isTrue(draggable.length > 1); |
| 67 // There is only a single token represented by all the draggable elements. |
| 68 draggable = Y.Array.dedupe(draggable); |
| 69 assert.equal(draggable.length, 1); |
73 // All of the charm tokens are made draggable. | 70 // All of the charm tokens are made draggable. |
74 draggableCharms = Y.Array.dedupe(draggableCharms); | 71 assert.deepEqual(draggable, ['test']); |
75 assert.deepEqual(draggableCharms, ['foo-id', 'bar-id', 'baz-id']); | |
76 }); | |
77 | |
78 it('adds a drop handler to the drop zone', function(done) { | |
79 charmContainer = new Y.juju.widgets.browser.CharmContainer(); | |
80 dropZone = { | |
81 on: function(what, callable) { | |
82 assert.equal(what, 'drop'); | |
83 done(); | |
84 } | |
85 }; | |
86 charmContainer.render(container); | |
87 charmContainer._getDropZone = function() {return dropZone;}; | |
88 charmContainer.addCharmTokenDragAndDrop(container); | |
89 }); | 72 }); |
90 | 73 |
91 it('can make an element draggable', function() { | 74 it('can make an element draggable', function() { |
92 charmContainer = new Y.juju.widgets.browser.CharmContainer(); | 75 token = new CharmToken(); |
93 var setAttributeCalled, onCalled; | 76 var setAttributeCalled, onCalled; |
94 var element = { | 77 var element = { |
95 setAttribute: function(name, value) { | 78 setAttribute: function(name, value) { |
96 assert.equal(name, 'draggable'); | 79 assert.equal(name, 'draggable'); |
97 assert.equal(value, 'true'); | 80 assert.equal(value, 'true'); |
98 setAttributeCalled = true; | 81 setAttributeCalled = true; |
99 }, | 82 }, |
100 on: function(when, callable) { | 83 on: function(when, callable) { |
101 assert.equal(when, 'dragstart'); | 84 assert.equal(when, 'dragstart'); |
102 onCalled = true; | 85 onCalled = true; |
| 86 return {detach: function() {}}; |
103 } | 87 } |
104 }; | 88 }; |
105 var dragImage = {}; | 89 var dragImage = {}; |
106 charmContainer._makeDragStartHandler = function(dragImage, charmId) { | 90 token._makeDragStartHandler = function(dragImage, charmData) { |
107 assert.equal(element, element); | 91 assert.equal(element, element); |
108 assert.equal(dragImage, dragImage); | 92 assert.equal(dragImage, dragImage); |
109 assert.equal(charmId, charmId); | 93 assert.equal(charmData, charmData); |
110 }; | 94 }; |
111 charmContainer._makeDraggable(element, dragImage, 'charm-id'); | 95 token._makeDraggable(element, dragImage, 'charm-id'); |
112 assert.isTrue(setAttributeCalled); | 96 assert.isTrue(setAttributeCalled); |
113 assert.isTrue(onCalled); | 97 assert.isTrue(onCalled); |
114 }); | 98 }); |
115 | 99 |
116 it('can set up drag and drop configuration', function() { | 100 it('can set up drag and drop configuration', function() { |
117 charmContainer = new Y.juju.widgets.browser.CharmContainer(); | 101 token = new CharmToken(); |
118 var setDataCalled, setDragImageCalled; | 102 var setDataCalled, setDragImageCalled; |
119 var dragImage = {_node: {id: 'the real drag image'}}; | 103 var dragImage = {_node: {id: 'the real drag image'}}; |
120 var charmId = 'charm-id'; | 104 var charmData = 'data'; |
121 var handler = charmContainer._makeDragStartHandler(dragImage, charmId); | 105 var handler = token._makeDragStartHandler(dragImage, charmData); |
| 106 var dragDataSet = []; |
122 var evt = { | 107 var evt = { |
123 _event: { | 108 _event: { |
124 dataTransfer: { | 109 dataTransfer: { |
125 setData: function(name, value) { | 110 setData: function(name, value) { |
126 assert.equal(name, 'charmId'); | 111 dragDataSet.push([name, value]); |
127 assert.equal(value, charmId); | |
128 setDataCalled = true; | 112 setDataCalled = true; |
129 }, | 113 }, |
130 setDragImage: function(provideDragImage, x, y) { | 114 setDragImage: function(provideDragImage, x, y) { |
131 assert.equal(provideDragImage, dragImage._node); | 115 assert.equal(provideDragImage, dragImage._node); |
132 assert.equal(x, 0); | 116 assert.equal(x, 0); |
133 assert.equal(y, 0); | 117 assert.equal(y, 0); |
134 setDragImageCalled = true; | 118 setDragImageCalled = true; |
135 } | 119 } |
136 } | 120 } |
137 } | 121 } |
138 }; | 122 }; |
139 handler(evt); | 123 handler(evt); |
140 assert.equal(evt._event.dataTransfer.effectAllowed, 'copy'); | 124 assert.equal(evt._event.dataTransfer.effectAllowed, 'copy'); |
| 125 assert.equal(Y.JSON.stringify(dragDataSet), |
| 126 '[["charmData","data"],["dataType","charm-token-drag-and-drop"]]'); |
141 assert.isTrue(setDataCalled); | 127 assert.isTrue(setDataCalled); |
142 assert.isTrue(setDragImageCalled); | 128 assert.isTrue(setDragImageCalled); |
143 }); | 129 }); |
144 | 130 |
145 it('can get the drop zone', function() { | 131 it('respects the isDraggable switch', function() { |
146 charmContainer = new Y.juju.widgets.browser.CharmContainer(); | 132 token = new CharmToken({contentBox: container}); |
147 assert.equal(charmContainer._getDropZone().get('id'), 'the-drop-zone'); | 133 token.set('isDraggable', false); |
| 134 var dragEnabled = false; |
| 135 token._addDraggability = function() { |
| 136 dragEnabled = true; |
| 137 }; |
| 138 token.renderUI(container); |
| 139 // Since we set isDraggable to false, _addDraggability was not called. |
| 140 assert.isFalse(dragEnabled); |
| 141 // If we set isDraggable to true, _addDraggability will be called. |
| 142 token.set('isDraggable', true); |
| 143 token.renderUI(container); |
| 144 assert.isTrue(dragEnabled); |
148 }); | 145 }); |
149 | 146 |
150 }); | 147 }); |
LEFT | RIGHT |