Merge pull request #452 from nasa/open1400

[Common UI] Test mct-split-pane, mct-splitter
This commit is contained in:
akhenry 2016-01-06 11:11:27 -08:00
commit 01772e4020
7 changed files with 230 additions and 201 deletions

View File

@ -116,10 +116,6 @@
"implementation": "controllers/GetterSetterController.js",
"depends": [ "$scope" ]
},
{
"key": "SplitPaneController",
"implementation": "controllers/SplitPaneController.js"
},
{
"key": "SelectorController",
"implementation": "controllers/SelectorController.js",

View File

@ -1,30 +0,0 @@
<!--
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.
-->
<span ng-controller="SplitPaneController as splitter">
<div class="splitter" ng-style="splitter.style()"
mct-drag="splitter.move(delta.x)">
</div>
<div class='split-pane-component items pane' style="right:0;"
ng-style="splitter.style()"
ng-transclude>
</div>
</span>

View File

@ -1,89 +0,0 @@
/*****************************************************************************
* 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(
[],
function () {
"use strict";
var DEFAULT_MAXIMUM = 1000,
DEFAULT_MINIMUM = 120;
/**
* Controller for the splitter in Browse mode. Current implementation
* uses many hard-coded constants; this could be generalized.
* @memberof platform/commonUI/general
* @constructor
*/
function SplitPaneController() {
this.current = 200;
this.start = 200;
this.assigned = false;
}
/**
* Get the current position of the splitter, in pixels
* from the left edge.
* @returns {number} position of the splitter, in pixels
*/
SplitPaneController.prototype.state = function (defaultState) {
// Set the state to the desired default, if we don't have a
// "real" current state yet.
if (arguments.length > 0 && !this.assigned) {
this.current = defaultState;
this.assigned = true;
}
return this.current;
};
/**
* Begin moving the splitter; this will note the splitter's
* current position, which is necessary for correct
* interpretation of deltas provided by mct-drag.
*/
SplitPaneController.prototype.startMove = function () {
this.start = this.current;
};
/**
* Move the splitter a number of pixels to the right
* (negative numbers move the splitter to the left.)
* This movement is relative to the position of the
* splitter when startMove was last invoked.
* @param {number} delta number of pixels to move
*/
SplitPaneController.prototype.move = function (delta, minimum, maximum) {
// Ensure defaults for minimum/maximum
maximum = isNaN(maximum) ? DEFAULT_MAXIMUM : maximum;
minimum = isNaN(minimum) ? DEFAULT_MINIMUM : minimum;
// Update current splitter state
this.current = Math.min(
maximum,
Math.max(minimum, this.start + delta)
);
};
return SplitPaneController;
}
);

View File

@ -1,74 +0,0 @@
/*****************************************************************************
* 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,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
define(
["../../src/controllers/SplitPaneController"],
function (SplitPaneController) {
"use strict";
describe("The split pane controller", function () {
var controller;
beforeEach(function () {
controller = new SplitPaneController();
});
it("has an initial position", function () {
expect(controller.state() > 0).toBeTruthy();
});
it("can be moved", function () {
var initialState = controller.state();
controller.startMove();
controller.move(50);
expect(controller.state()).toEqual(initialState + 50);
});
it("clamps its position", function () {
var initialState = controller.state();
controller.startMove();
// Move some really extreme number
controller.move(-100000);
// Shouldn't have moved below 0...
expect(controller.state() > 0).toBeTruthy();
// ...but should have moved left somewhere
expect(controller.state() < initialState).toBeTruthy();
// Then do the same to the right
controller.move(100000);
// Shouldn't have moved below 0...
expect(controller.state() < 100000).toBeTruthy();
// ...but should have moved left somewhere
expect(controller.state() > initialState).toBeTruthy();
});
it("accepts a default state", function () {
// Should use default state the first time...
expect(controller.state(12321)).toEqual(12321);
// ...but not after it's been initialized
expect(controller.state(42)).toEqual(12321);
});
});
}
);

View File

@ -30,13 +30,16 @@ define(
'on',
'addClass',
'children',
'eq'
'eq',
'toggleClass',
'css'
];
describe("The mct-split-pane directive", function () {
var mockParse,
mockLog,
mockInterval,
mockParsed,
mctSplitPane;
beforeEach(function () {
@ -45,6 +48,11 @@ define(
jasmine.createSpyObj('$log', ['warn', 'info', 'debug']);
mockInterval = jasmine.createSpy('$interval');
mockInterval.cancel = jasmine.createSpy('mockCancel');
mockParsed = jasmine.createSpy('parsed');
mockParsed.assign = jasmine.createSpy('assign');
mockParse.andReturn(mockParsed);
mctSplitPane = new MCTSplitPane(
mockParse,
mockLog,
@ -61,8 +69,19 @@ define(
mockElement,
testAttrs,
mockChildren,
mockFirstPane,
mockSplitter,
mockSecondPane,
controller;
function fireOn(eventType) {
mockScope.$on.calls.forEach(function (call) {
if (call.args[0] === eventType) {
call.args[1]();
}
});
}
beforeEach(function () {
mockScope =
jasmine.createSpyObj('$scope', ['$apply', '$watch', '$on']);
@ -71,10 +90,33 @@ define(
testAttrs = {};
mockChildren =
jasmine.createSpyObj('children', JQLITE_METHODS);
mockFirstPane =
jasmine.createSpyObj('firstPane', JQLITE_METHODS);
mockSplitter =
jasmine.createSpyObj('splitter', JQLITE_METHODS);
mockSecondPane =
jasmine.createSpyObj('secondPane', JQLITE_METHODS);
mockElement.children.andReturn(mockChildren);
mockChildren.eq.andReturn(mockChildren);
mockChildren[0] = {};
mockElement[0] = {
offsetWidth: 12321,
offsetHeight: 45654
};
mockChildren.eq.andCallFake(function (i) {
return [mockFirstPane, mockSplitter, mockSecondPane][i];
});
mockFirstPane[0] = { offsetWidth: 123, offsetHeight: 456 };
mockSplitter[0] = {
nodeName: 'mct-splitter',
offsetWidth: 10,
offsetHeight: 456
};
mockSecondPane[0] = { offsetWidth: 10, offsetHeight: 456 };
mockChildren[0] = mockFirstPane[0];
mockChildren[1] = mockSplitter[0];
mockChildren[3] = mockSecondPane[0];
mockChildren.length = 3;
controller = mctSplitPane.controller[3](
mockScope,
@ -87,6 +129,77 @@ define(
expect(mockInterval.mostRecentCall.args[3]).toBe(false);
});
it("exposes its splitter's initial position", function () {
expect(controller.position()).toEqual(
mockFirstPane[0].offsetWidth + mockSplitter[0].offsetWidth
);
});
it("exposes the current anchoring mode", function () {
expect(controller.anchor()).toEqual({
edge : 'left',
opposite : 'right',
dimension : 'width',
orientation : 'vertical'
});
});
it("allows classes to be toggled on contained elements", function () {
controller.toggleClass('resizing');
expect(mockChildren.toggleClass)
.toHaveBeenCalledWith('resizing');
});
it("allows positions to be set", function () {
var testValue = mockChildren[0].offsetWidth + 50;
controller.position(testValue);
expect(mockFirstPane.css).toHaveBeenCalledWith(
'width',
(testValue - mockSplitter[0].offsetWidth) + 'px'
);
});
it("issues no warnings under nominal usage", function () {
expect(mockLog.warn).not.toHaveBeenCalled();
});
it("warns if no mct-splitter is present", function () {
mockSplitter[0].nodeName = "not-mct-splitter";
controller = mctSplitPane.controller[3](
mockScope,
mockElement,
testAttrs
);
expect(mockLog.warn).toHaveBeenCalled();
});
it("warns if an unknown anchor key is given", function () {
testAttrs.anchor = "middle";
controller = mctSplitPane.controller[3](
mockScope,
mockElement,
testAttrs
);
expect(mockLog.warn).toHaveBeenCalled();
});
it("updates positions on a timer", function () {
mockFirstPane[0].offsetWidth += 100;
// Should not reflect the change yet
expect(controller.position()).not.toEqual(
mockFirstPane[0].offsetWidth + mockSplitter[0].offsetWidth
);
mockInterval.mostRecentCall.args[0]();
expect(controller.position()).toEqual(
mockFirstPane[0].offsetWidth + mockSplitter[0].offsetWidth
);
});
it("cancels the active interval when scope is destroyed", function () {
expect(mockInterval.cancel).not.toHaveBeenCalled();
fireOn('$destroy');
expect(mockInterval.cancel).toHaveBeenCalled();
});
});
});

View File

@ -0,0 +1,113 @@
/*****************************************************************************
* 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,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
define(
["../../src/directives/MCTSplitter"],
function (MCTSplitter) {
'use strict';
describe("The mct-splitter directive", function () {
var mctSplitter;
beforeEach(function () {
mctSplitter = new MCTSplitter();
});
it("is applicable to elements", function () {
expect(mctSplitter.restrict).toEqual("E");
});
it("depends on the mct-split-pane controller", function () {
expect(mctSplitter.require).toEqual("^mctSplitPane");
});
describe("when linked", function () {
var mockScope,
mockElement,
testAttrs,
mockSplitPane;
beforeEach(function () {
mockScope = jasmine.createSpyObj(
'$scope',
[ '$on', '$watch' ]
);
mockElement = jasmine.createSpyObj(
'element',
[ 'addClass' ]
);
testAttrs = {};
mockSplitPane = jasmine.createSpyObj(
'mctSplitPane',
[ 'position', 'toggleClass', 'anchor' ]
);
mctSplitter.link(
mockScope,
mockElement,
testAttrs,
mockSplitPane
);
});
it("adds a splitter class", function () {
expect(mockElement.addClass)
.toHaveBeenCalledWith('splitter');
});
describe("and then manipulated", function () {
var testPosition;
beforeEach(function () {
testPosition = 12321;
mockSplitPane.position.andReturn(testPosition);
mockSplitPane.anchor.andReturn({
orientation: 'vertical',
reversed: false
});
mockScope.splitter.startMove();
});
it("adds a 'resizing' class", function () {
expect(mockSplitPane.toggleClass)
.toHaveBeenCalledWith('resizing');
});
it("repositions during drag", function () {
mockScope.splitter.move([ 10, 0 ]);
expect(mockSplitPane.position)
.toHaveBeenCalledWith(testPosition + 10);
});
it("removes the 'resizing' class when finished", function () {
mockSplitPane.toggleClass.reset();
mockScope.splitter.endMove();
expect(mockSplitPane.toggleClass)
.toHaveBeenCalledWith('resizing');
});
});
});
});
}
);

View File

@ -8,7 +8,6 @@
"controllers/GetterSetterController",
"controllers/ObjectInspectorController",
"controllers/SelectorController",
"controllers/SplitPaneController",
"controllers/TimeRangeController",
"controllers/ToggleController",
"controllers/TreeNodeController",
@ -20,6 +19,7 @@
"directives/MCTResize",
"directives/MCTScroll",
"directives/MCTSplitPane",
"directives/MCTSplitter",
"services/Popup",
"services/PopupService",
"services/UrlService",