Merge remote-tracking branch 'origin/tree-732'

LICENSES.md

@@ -476,6 +476,44 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 ---
 
+### Zepto
+
+#### Info
+
+* Link: http://zeptojs.com/
+
+* Version: 1.1.6
+
+* Authors: Thomas Fuchs
+
+* Description: DOM manipulation
+
+#### License
+
+Copyright (c) 2010-2016 Thomas Fuchs
+http://zeptojs.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
 ### Json.NET
 
 #### Info

bower.json

@@ -17,6 +17,7 @@
     "screenfull": "^3.0.0",
     "node-uuid": "^1.4.7",
     "comma-separated-values": "^3.6.4",
-    "FileSaver.js": "^0.0.2"
+    "FileSaver.js": "^0.0.2",
+    "zepto": "^1.1.6"
   }
 }

main.js

@@ -33,7 +33,8 @@ requirejs.config({
         "saveAs": "bower_components/FileSaver.js/FileSaver.min",
         "screenfull": "bower_components/screenfull/dist/screenfull.min",
         "text": "bower_components/text/text",
-        "uuid": "bower_components/node-uuid/uuid"
+        "uuid": "bower_components/node-uuid/uuid",
+        "zepto": "bower_components/zepto/zepto.min"
     },
     "shim": {
         "angular": {
@@ -44,6 +45,9 @@ requirejs.config({
         },
         "moment-duration-format": {
             "deps": [ "moment" ]
+        },
+        "zepto": {
+            "exports": "Zepto"
         }
     }
 });

platform/commonUI/general/bundle.js

@@ -49,6 +49,7 @@ define([
     "./src/directives/MCTScroll",
     "./src/directives/MCTSplitPane",
     "./src/directives/MCTSplitter",
+    "./src/directives/MCTTree",
     "text!./res/templates/bottombar.html",
     "text!./res/templates/controls/action-button.html",
     "text!./res/templates/controls/input-filter.html",
@@ -97,6 +98,7 @@ define([
     MCTScroll,
     MCTSplitPane,
     MCTSplitter,
+    MCTTree,
     bottombarTemplate,
     actionButtonTemplate,
     inputFilterTemplate,
@@ -389,6 +391,11 @@ define([
                 {
                     "key": "mctSplitter",
                     "implementation": MCTSplitter
+                },
+                {
+                    "key": "mctTree",
+                    "implementation": MCTTree,
+                    "depends": [ '$parse', 'gestureService' ]
                 }
             ],
             "constants": [
@@ -535,6 +542,16 @@ define([
                     "copyright": "Copyright (c) Nicolas Gallagher and Jonathan Neal",
                     "license": "license-mit",
                     "link": "https://github.com/necolas/normalize.css/blob/v1.1.2/LICENSE.md"
+                },
+                {
+                    "name": "Zepto",
+                    "version": "1.1.6",
+                    "description": "DOM manipulation",
+                    "author": "Thomas Fuchs",
+                    "website": "http://zeptojs.com/",
+                    "copyright": "Copyright (c) 2010-2016 Thomas Fuchs",
+                    "license": "license-mit",
+                    "link": "https://github.com/madrobby/zepto/blob/master/MIT-LICENSE"
                 }
             ]
         }

platform/commonUI/general/res/templates/subtree.html

@@ -19,18 +19,6 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<ul class="tree">
+<mct-tree mct-object="domainObject" mct-model="ngModel.selectedObject">
-    <li ng-if="!composition">
+</mct-tree>
-        <span class="tree-item">
+
-            <span class="icon wait-spinner"></span>
-            <span class="title-label">Loading...</span>
-        </span>
-    </li>
-    <li ng-repeat="child in composition">
-        <mct-representation key="'tree-node'"
-                            mct-object="child"
-                            parameters="parameters"
-                            ng-model="ngModel">
-        </mct-representation>
-    </li>
-</ul>

platform/commonUI/general/res/templates/tree/node.html

@@ -0,0 +1,4 @@
+<span class="tree-item menus-to-left">
+</span>
+<span class="tree-item-subtree">
+</span>

platform/commonUI/general/res/templates/tree/toggle.html

@@ -0,0 +1,2 @@
+<span class='ui-symbol view-control flex-elem'>
+</span>

platform/commonUI/general/res/templates/tree/tree-label.html

@@ -0,0 +1,8 @@
+<span class="rep-object-label">
+    <div class="t-object-label l-flex-row flex-elem grows">
+        <div class="t-item-icon flex-elem">
+            <div class="t-item-icon-glyph"></div>
+        </div>
+        <div class='t-title-label flex-elem grows'></div>
+    </div>
+</span>

platform/commonUI/general/res/templates/tree/wait-node.html

@@ -0,0 +1,27 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<li>
+    <span class="tree-item">
+        <span class="icon wait-spinner"></span>
+        <span class="title-label">Loading...</span>
+    </span>
+</li>

platform/commonUI/general/src/directives/MCTTree.js

@@ -0,0 +1,54 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define([
+    'angular',
+    '../ui/TreeView'
+], function (angular, TreeView) {
+    function MCTTree($parse, gestureService) {
+        function link(scope, element, attrs) {
+            var treeView = new TreeView(gestureService),
+                expr = $parse(attrs.mctModel),
+                unobserve = treeView.observe(function (domainObject) {
+                    if (domainObject !== expr(scope.$parent)) {
+                        expr.assign(scope.$parent, domainObject);
+                        scope.$apply();
+                    }
+                });
+
+            element.append(angular.element(treeView.elements()));
+
+            scope.$parent.$watch(attrs.mctModel, treeView.value.bind(treeView));
+            scope.$watch('mctObject', treeView.model.bind(treeView));
+            scope.$on('$destroy', unobserve);
+        }
+
+        return {
+            restrict: "E",
+            link: link,
+            scope: { mctObject: "=" }
+        };
+    }
+
+    return MCTTree;
+});

platform/commonUI/general/src/ui/ToggleView.js

@@ -0,0 +1,65 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define([
+    'zepto',
+    'text!../../res/templates/tree/toggle.html'
+], function ($, toggleTemplate) {
+    function ToggleView(state) {
+        this.expanded = !!state;
+        this.callbacks = [];
+        this.el = $(toggleTemplate);
+        this.el.on('click', function () {
+            this.value(!this.expanded);
+        }.bind(this));
+    }
+
+    ToggleView.prototype.value = function (state) {
+        this.expanded = state;
+
+        if (state) {
+            this.el.addClass('expanded');
+        } else {
+            this.el.removeClass('expanded');
+        }
+
+        this.callbacks.forEach(function (callback) {
+            callback(state);
+        });
+    };
+
+    ToggleView.prototype.observe = function (callback) {
+        this.callbacks.push(callback);
+        return function () {
+            this.callbacks = this.callbacks.filter(function (c) {
+                return c !== callback;
+            });
+        }.bind(this);
+    };
+
+    ToggleView.prototype.elements = function () {
+        return this.el;
+    };
+
+    return ToggleView;
+});

platform/commonUI/general/src/ui/TreeLabelView.js

@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define([
+    'zepto',
+    'text!../../res/templates/tree/tree-label.html'
+], function ($, labelTemplate) {
+    'use strict';
+
+    function TreeLabelView(gestureService) {
+        this.el = $(labelTemplate);
+        this.gestureService = gestureService;
+    }
+
+    function getGlyph(domainObject) {
+        var type = domainObject.getCapability('type');
+        return type.getGlyph();
+    }
+
+    function isLink(domainObject) {
+        var location = domainObject.getCapability('location');
+        return location.isLink();
+    }
+
+    TreeLabelView.prototype.updateView = function (domainObject) {
+        var titleEl = this.el.find('.t-title-label'),
+            glyphEl = this.el.find('.t-item-icon-glyph'),
+            iconEl = this.el.find('.t-item-icon');
+
+        titleEl.text(domainObject ? domainObject.getModel().name : "");
+        glyphEl.text(domainObject ? getGlyph(domainObject) : "");
+
+        if (domainObject && isLink(domainObject)) {
+            iconEl.addClass('l-icon-link');
+        } else {
+            iconEl.removeClass('l-icon-link');
+        }
+    };
+
+    TreeLabelView.prototype.model = function (domainObject) {
+        if (this.unlisten) {
+            this.unlisten();
+            delete this.unlisten;
+        }
+
+        if (this.activeGestures) {
+            this.activeGestures.destroy();
+            delete this.activeGestures;
+        }
+
+        this.updateView(domainObject);
+
+        if (domainObject) {
+            this.unlisten = domainObject.getCapability('mutation')
+                .listen(this.updateView.bind(this, domainObject));
+
+            this.activeGestures = this.gestureService.attachGestures(
+                this.elements(),
+                domainObject,
+                [ 'info', 'menu', 'drag' ]
+            );
+        }
+    };
+
+    TreeLabelView.prototype.elements = function () {
+        return this.el;
+    };
+
+    return TreeLabelView;
+});

platform/commonUI/general/src/ui/TreeNodeView.js

@@ -0,0 +1,133 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define([
+    'zepto',
+    'text!../../res/templates/tree/node.html',
+    './ToggleView',
+    './TreeLabelView'
+], function ($, nodeTemplate, ToggleView, TreeLabelView) {
+    'use strict';
+
+    function TreeNodeView(gestureService, subtreeFactory, selectFn) {
+        this.li = $('<li>');
+
+        this.toggleView = new ToggleView(false);
+        this.toggleView.observe(function (state) {
+            if (state) {
+                if (!this.subtreeView) {
+                    this.subtreeView = subtreeFactory();
+                    this.subtreeView.model(this.activeObject);
+                    this.li.find('.tree-item-subtree').eq(0)
+                        .append($(this.subtreeView.elements()));
+                }
+                $(this.subtreeView.elements()).removeClass('hidden');
+            } else if (this.subtreeView) {
+                $(this.subtreeView.elements()).addClass('hidden');
+            }
+        }.bind(this));
+
+        this.labelView = new TreeLabelView(gestureService);
+
+        $(this.labelView.elements()).on('click', function () {
+            selectFn(this.activeObject);
+        }.bind(this));
+
+        this.li.append($(nodeTemplate));
+        this.li.find('span').eq(0)
+            .append($(this.toggleView.elements()))
+            .append($(this.labelView.elements()));
+
+        this.model(undefined);
+    }
+
+    TreeNodeView.prototype.model = function (domainObject) {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+
+        this.activeObject = domainObject;
+
+        if (domainObject && domainObject.hasCapability('composition')) {
+            $(this.toggleView.elements()).addClass('has-children');
+        } else {
+            $(this.toggleView.elements()).removeClass('has-children');
+        }
+
+        this.labelView.model(domainObject);
+        if (this.subtreeView) {
+            this.subtreeView.model(domainObject);
+        }
+    };
+
+    function getIdPath(domainObject) {
+        function getId(domainObject) {
+            return domainObject.getId();
+        }
+
+        return domainObject ?
+            domainObject.getCapability('context').getPath().map(getId) :
+            [];
+    }
+
+    TreeNodeView.prototype.value = function (domainObject) {
+        var activeIdPath = getIdPath(this.activeObject),
+            selectedIdPath = getIdPath(domainObject);
+
+        if (this.onSelectionPath) {
+            this.li.find('.tree-item').eq(0).removeClass('selected');
+            if (this.subtreeView) {
+                this.subtreeView.value(undefined);
+            }
+        }
+
+        this.onSelectionPath =
+            !!domainObject &&
+            !!this.activeObject &&
+            (activeIdPath.length <= selectedIdPath.length) &&
+                activeIdPath.every(function (id, index) {
+                    return selectedIdPath[index] === id;
+                });
+
+        if (this.onSelectionPath) {
+            if (activeIdPath.length === selectedIdPath.length) {
+                this.li.find('.tree-item').eq(0).addClass('selected');
+            } else {
+                // Expand to reveal the selection
+                this.toggleView.value(true);
+                this.subtreeView.value(domainObject);
+            }
+        }
+    };
+
+    /**
+     *
+     * @returns {HTMLElement[]}
+     */
+    TreeNodeView.prototype.elements = function () {
+        return this.li;
+    };
+
+
+    return TreeNodeView;
+});

platform/commonUI/general/src/ui/TreeView.js

@@ -0,0 +1,140 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define([
+    'zepto',
+    './TreeNodeView',
+    'text!../../res/templates/tree/wait-node.html'
+], function ($, TreeNodeView, spinnerTemplate) {
+    'use strict';
+
+    function TreeView(gestureService, selectFn) {
+        this.ul = $('<ul class="tree"></ul>');
+        this.nodeViews = [];
+        this.callbacks = [];
+        this.selectFn = selectFn || this.value.bind(this);
+        this.gestureService = gestureService;
+        this.pending = false;
+    }
+
+    TreeView.prototype.newTreeView = function () {
+        return new TreeView(this.gestureService, this.selectFn);
+    };
+
+    TreeView.prototype.setSize = function (sz) {
+        var nodeView;
+
+        while (this.nodeViews.length < sz) {
+            nodeView = new TreeNodeView(
+                this.gestureService,
+                this.newTreeView.bind(this),
+                this.selectFn
+            );
+            this.nodeViews.push(nodeView);
+            this.ul.append($(nodeView.elements()));
+        }
+
+        while (this.nodeViews.length > sz) {
+            nodeView = this.nodeViews.pop();
+            $(nodeView.elements()).remove();
+        }
+    };
+
+    TreeView.prototype.loadComposition = function (domainObject) {
+        var self = this;
+
+        function addNode(domainObject, index) {
+            self.nodeViews[index].model(domainObject);
+        }
+
+        function addNodes(domainObjects) {
+            if (self.pending) {
+                self.pending = false;
+                self.nodeViews = [];
+                self.ul.empty();
+            }
+
+            if (domainObject === self.activeObject) {
+                self.setSize(domainObjects.length);
+                domainObjects.forEach(addNode);
+                self.updateNodeViewSelection();
+            }
+        }
+
+        domainObject.useCapability('composition')
+            .then(addNodes);
+    };
+
+    TreeView.prototype.model = function (domainObject) {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+
+        this.activeObject = domainObject;
+        this.ul.empty();
+
+        if (domainObject && domainObject.hasCapability('composition')) {
+            this.pending = true;
+            this.ul.append($(spinnerTemplate));
+            this.unlisten = domainObject.getCapability('mutation')
+                .listen(this.loadComposition.bind(this));
+            this.loadComposition(domainObject);
+        } else {
+            this.setSize(0);
+        }
+    };
+
+    TreeView.prototype.updateNodeViewSelection = function () {
+        this.nodeViews.forEach(function (nodeView) {
+            nodeView.value(this.selectedObject);
+        }.bind(this));
+    };
+
+    TreeView.prototype.value = function (domainObject) {
+        this.selectedObject = domainObject;
+        this.updateNodeViewSelection();
+        this.callbacks.forEach(function (callback) {
+            callback(domainObject);
+        });
+    };
+
+    TreeView.prototype.observe = function (callback) {
+        this.callbacks.push(callback);
+        return function () {
+            this.callbacks = this.callbacks.filter(function (c) {
+                return c !== callback;
+            });
+        }.bind(this);
+    };
+
+    /**
+     *
+     * @returns {HTMLElement[]}
+     */
+    TreeView.prototype.elements = function () {
+        return this.ul;
+    };
+
+
+    return TreeView;
+});

platform/commonUI/general/test/directives/MCTTreeSpec.js

@@ -0,0 +1,95 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,describe,beforeEach,jasmine,it,expect*/
+
+define([
+    '../../src/directives/MCTTree'
+], function (MCTTree) {
+    describe("The mct-tree directive", function () {
+        var mockParse,
+            mockGestureService,
+            mockExpr,
+            mctTree;
+
+        beforeEach(function () {
+            mockGestureService = jasmine.createSpyObj(
+                'gestureService',
+                [ 'attachGestures' ]
+            );
+            mockParse = jasmine.createSpy('$parse');
+            mockExpr = jasmine.createSpy('expr');
+            mockExpr.assign = jasmine.createSpy('assign');
+            mockParse.andReturn(mockExpr);
+
+            mctTree = new MCTTree(mockParse, mockGestureService);
+        });
+
+        it("is applicable as an element", function () {
+            expect(mctTree.restrict).toEqual("E");
+        });
+
+        it("two-way binds to mctObject", function () {
+            expect(mctTree.scope).toEqual({ mctObject: "=" });
+        });
+
+        describe("link", function () {
+            var mockScope,
+                mockElement,
+                testAttrs;
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj('$scope', ['$watch', '$on']);
+                mockElement = jasmine.createSpyObj('element', ['append']);
+                testAttrs = { mctModel: "some-expression" };
+                mockScope.$parent =
+                    jasmine.createSpyObj('$scope', ['$watch', '$on']);
+                mctTree.link(mockScope, mockElement, testAttrs);
+            });
+
+            it("populates the mct-tree element", function () {
+                expect(mockElement.append).toHaveBeenCalled();
+            });
+
+            it("watches for mct-model's expression in the parent", function () {
+                expect(mockScope.$parent.$watch).toHaveBeenCalledWith(
+                    testAttrs.mctModel,
+                    jasmine.any(Function)
+                );
+            });
+
+            it("watches for changes to mct-object", function () {
+                expect(mockScope.$watch).toHaveBeenCalledWith(
+                    "mctObject",
+                    jasmine.any(Function)
+                );
+            });
+
+            it("listens for the $destroy event", function () {
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    "$destroy",
+                    jasmine.any(Function)
+                );
+            });
+        });
+    });
+
+});

platform/commonUI/general/test/ui/TreeViewSpec.js

@@ -0,0 +1,274 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,describe,beforeEach,jasmine,it,expect*/
+
+define([
+    '../../src/ui/TreeView',
+    'zepto'
+], function (TreeView, $) {
+    'use strict';
+
+    describe("TreeView", function () {
+        var mockGestureService,
+            mockGestureHandle,
+            mockDomainObject,
+            mockMutation,
+            mockUnlisten,
+            testCapabilities,
+            treeView;
+
+        function makeMockDomainObject(id, model, capabilities) {
+            var mockDomainObject = jasmine.createSpyObj(
+                'domainObject-' + id,
+                [
+                    'getId',
+                    'getModel',
+                    'getCapability',
+                    'hasCapability',
+                    'useCapability'
+                ]
+            );
+            mockDomainObject.getId.andReturn(id);
+            mockDomainObject.getModel.andReturn(model);
+            mockDomainObject.hasCapability.andCallFake(function (c) {
+                return !!(capabilities[c]);
+            });
+            mockDomainObject.getCapability.andCallFake(function (c) {
+                return capabilities[c];
+            });
+            mockDomainObject.useCapability.andCallFake(function (c) {
+                return capabilities[c] && capabilities[c].invoke();
+            });
+            return mockDomainObject;
+        }
+
+        beforeEach(function () {
+            mockGestureService = jasmine.createSpyObj(
+                'gestureService',
+                [ 'attachGestures' ]
+            );
+
+            mockGestureHandle = jasmine.createSpyObj('gestures', ['destroy']);
+
+            mockGestureService.attachGestures.andReturn(mockGestureHandle);
+
+            mockMutation = jasmine.createSpyObj('mutation', ['listen']);
+            mockUnlisten = jasmine.createSpy('unlisten');
+            mockMutation.listen.andReturn(mockUnlisten);
+
+            testCapabilities = { mutation: mockMutation };
+
+            mockDomainObject =
+                makeMockDomainObject('parent', {}, testCapabilities);
+
+            treeView = new TreeView(mockGestureService);
+        });
+
+        describe("elements", function () {
+            var elements;
+
+            beforeEach(function () {
+                elements = treeView.elements();
+            });
+
+            it("is an unordered list", function () {
+                expect(elements[0].tagName.toLowerCase())
+                    .toEqual('ul');
+            });
+        });
+
+        describe("model", function () {
+            var mockComposition;
+
+            function makeGenericCapabilities() {
+                var mockContext =
+                        jasmine.createSpyObj('context', [ 'getPath' ]),
+                    mockType =
+                        jasmine.createSpyObj('type', [ 'getGlyph' ]),
+                    mockLocation =
+                        jasmine.createSpyObj('location', [ 'isLink' ]),
+                    mockMutation =
+                        jasmine.createSpyObj('mutation', [ 'listen' ]);
+                return {
+                    context: mockContext,
+                    type: mockType,
+                    mutation: mockMutation,
+                    location: mockLocation
+                };
+            }
+
+            function waitForCompositionCallback() {
+                var calledBack = false;
+                testCapabilities.composition.invoke().then(function (c) {
+                    calledBack = true;
+                });
+                waitsFor(function () {
+                    return calledBack;
+                });
+            }
+
+            beforeEach(function () {
+                mockComposition = ['a', 'b', 'c'].map(function (id) {
+                    var testCapabilities = makeGenericCapabilities(),
+                        mockChild =
+                            makeMockDomainObject(id, {}, testCapabilities);
+
+                    testCapabilities.context.getPath
+                        .andReturn([mockDomainObject, mockChild]);
+
+                    return mockChild;
+                });
+
+                testCapabilities.composition =
+                    jasmine.createSpyObj('composition', ['invoke']);
+                testCapabilities.composition.invoke
+                    .andReturn(Promise.resolve(mockComposition));
+
+                treeView.model(mockDomainObject);
+                waitForCompositionCallback();
+            });
+
+            it("adds one node per composition element", function () {
+                expect(treeView.elements()[0].childElementCount)
+                    .toEqual(mockComposition.length);
+            });
+
+            it("listens for mutation", function () {
+                expect(testCapabilities.mutation.listen)
+                    .toHaveBeenCalledWith(jasmine.any(Function));
+            });
+
+            describe("when mutation occurs", function () {
+                beforeEach(function () {
+                    mockComposition.pop();
+                    testCapabilities.mutation.listen
+                        .mostRecentCall.args[0](mockDomainObject);
+                    waitForCompositionCallback();
+                });
+
+                it("continues to show one node per composition element", function () {
+                    expect(treeView.elements()[0].childElementCount)
+                        .toEqual(mockComposition.length);
+                });
+            });
+
+            describe("when replaced with a non-compositional domain object", function () {
+                beforeEach(function () {
+                    delete testCapabilities.composition;
+                    treeView.model(mockDomainObject);
+                });
+
+                it("stops listening for mutation", function () {
+                    expect(mockUnlisten).toHaveBeenCalled();
+                });
+
+                it("removes all tree nodes", function () {
+                    expect(treeView.elements()[0].childElementCount)
+                        .toEqual(0);
+                });
+            });
+
+            describe("when selection state changes", function () {
+                var selectionIndex = 1;
+
+                beforeEach(function () {
+                    treeView.value(mockComposition[selectionIndex]);
+                });
+
+                it("communicates selection state to an appropriate node", function () {
+                    var selected = $(treeView.elements()[0]).find('.selected');
+                    expect(selected.length).toEqual(1);
+                });
+            });
+
+            describe("when children contain children", function () {
+                beforeEach(function () {
+                    var newCapabilities = makeGenericCapabilities(),
+                        gcCapabilities = makeGenericCapabilities(),
+                        mockNewChild =
+                            makeMockDomainObject('d', {}, newCapabilities),
+                        mockGrandchild =
+                            makeMockDomainObject('gc', {}, gcCapabilities),
+                        calledBackInner = false;
+
+                    newCapabilities.composition =
+                        jasmine.createSpyObj('composition', [ 'invoke' ]);
+                    newCapabilities.composition.invoke
+                        .andReturn(Promise.resolve([mockGrandchild]));
+                    mockComposition.push(mockNewChild);
+
+                    newCapabilities.context.getPath.andReturn([
+                        mockDomainObject,
+                        mockNewChild
+                    ]);
+                    gcCapabilities.context.getPath.andReturn([
+                        mockDomainObject,
+                        mockNewChild,
+                        mockGrandchild
+                    ]);
+
+                    testCapabilities.mutation.listen
+                        .mostRecentCall.args[0](mockDomainObject);
+                    waitForCompositionCallback();
+                    runs(function () {
+                        // Select the innermost object to force expansion,
+                        // such that we can verify the subtree is present.
+                        treeView.value(mockGrandchild);
+                        newCapabilities.composition.invoke().then(function () {
+                            calledBackInner = true;
+                        });
+                    });
+                    waitsFor(function () {
+                        return calledBackInner;
+                    });
+                });
+
+                it("creates inner trees", function () {
+                    expect($(treeView.elements()[0]).find('ul').length)
+                        .toEqual(1);
+                });
+            });
+        });
+
+        describe("observe", function () {
+            var mockCallback,
+                unobserve;
+
+            beforeEach(function () {
+                mockCallback = jasmine.createSpy('callback');
+                unobserve = treeView.observe(mockCallback);
+            });
+
+            it("notifies listeners when value is changed", function () {
+                treeView.value(mockDomainObject);
+                expect(mockCallback).toHaveBeenCalledWith(mockDomainObject);
+            });
+
+            it("does not notify listeners when deactivated", function () {
+                unobserve();
+                treeView.value(mockDomainObject);
+                expect(mockCallback).not.toHaveBeenCalled();
+            });
+        });
+    });
+
+});

test-main.js

@@ -53,7 +53,8 @@ requirejs.config({
         "saveAs": "bower_components/FileSaver.js/FileSaver.min",
         "screenfull": "bower_components/screenfull/dist/screenfull.min",
         "text": "bower_components/text/text",
-        "uuid": "bower_components/node-uuid/uuid"
+        "uuid": "bower_components/node-uuid/uuid",
+        "zepto": "bower_components/zepto/zepto.min"
     },
 
     "shim": {
@@ -65,6 +66,9 @@ requirejs.config({
         },
         "moment-duration-format": {
             "deps": [ "moment" ]
+        },
+        "zepto": {
+            "exports": "Zepto"
         }
     },