Compare commits

...

10 Commits

9 changed files with 342 additions and 309 deletions

View File

@ -19,7 +19,6 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
import AutoflowTabularPlugin from './AutoflowTabularPlugin';
import AutoflowTabularConstants from './AutoflowTabularConstants';
import DOMObserver from './dom-observer';
import {
@ -29,344 +28,376 @@ import {
} from 'utils/testing';
import Vue from 'vue';
// TODO lots of its without expects
xdescribe("AutoflowTabularPlugin", () => {
let testType;
let testObject;
let mockmct;
describe("AutoflowTabularPlugin", () => {
let testTypeObject;
let autoflowObject;
let otherObject;
let openmct;
let viewProviders;
let autoflowViewProvider;
beforeEach(() => {
testType = "some-type";
testObject = { type: testType };
mockmct = createOpenMct();
spyOn(mockmct.composition, 'get');
spyOn(mockmct.objectViews, 'addProvider');
spyOn(mockmct.telemetry, 'getMetadata');
spyOn(mockmct.telemetry, 'getValueFormatter');
spyOn(mockmct.telemetry, 'limitEvaluator');
spyOn(mockmct.telemetry, 'request');
spyOn(mockmct.telemetry, 'subscribe');
beforeEach(done => {
testTypeObject = {
type: 'some-type'
};
autoflowObject = {
identifier: {
namespace: '',
key: 'some-type-key'
},
type: 'some-type'
};
otherObject = {
identifier: {
namespace: '',
key: 'other-type-key'
},
type: 'other-type'
};
const plugin = new AutoflowTabularPlugin({ type: testType });
plugin(mockmct);
openmct = createOpenMct();
openmct.install(openmct.plugins.AutoflowView(testTypeObject));
spyOn(openmct.composition, 'get');
spyOn(openmct.telemetry, 'getMetadata');
spyOn(openmct.telemetry, 'getValueFormatter');
spyOn(openmct.telemetry, 'limitEvaluator');
spyOn(openmct.telemetry, 'request');
spyOn(openmct.telemetry, 'subscribe');
openmct.on('start', done);
openmct.startHeadless();
viewProviders = openmct.objectViews.get(autoflowObject, []);
autoflowViewProvider = viewProviders.filter(provider => provider?.key === 'autoflow')?.[0];
});
afterEach(() => {
return resetApplicationState(mockmct);
return resetApplicationState(openmct);
});
it("installs a view provider", () => {
expect(mockmct.objectViews.addProvider).toHaveBeenCalled();
expect(autoflowViewProvider).toBeDefined();
});
describe("installs a view provider which", () => {
let provider;
it("applies its view to the type from options", () => {
expect(autoflowViewProvider.canView(autoflowObject, [])).toBeTrue();
});
it("does not apply to other types", () => {
expect(autoflowViewProvider.canView(otherObject, [])).toBeFalse();
});
describe("provides a view which", () => {
let testKeys;
let testChildren;
let testContainer;
let testHistories;
let mockComposition;
let mockMetadata;
let mockEvaluator;
let mockUnsubscribes;
let callbacks;
let view;
let domObserver;
function waitsForChange() {
return new Promise(function (resolve) {
window.requestAnimationFrame(resolve);
});
}
function emitEvent(mockEmitter, type, event) {
mockEmitter.on.calls.all().forEach((call) => {
if (call.args[0] === type) {
call.args[1](event);
}
});
}
beforeEach(() => {
provider =
mockmct.objectViews.addProvider.calls.mostRecent().args[0];
});
callbacks = {};
it("applies its view to the type from options", () => {
expect(provider.canView(testObject, [])).toBe(true);
});
spyOnBuiltins(['requestAnimationFrame']);
window.requestAnimationFrame.and.callFake((callBack) => {
callBack();
});
it("does not apply to other types", () => {
expect(provider.canView({ type: 'foo' }, [])).toBe(false);
});
testKeys = ['abc', 'def', 'xyz'];
testChildren = testKeys.map((key) => {
return {
identifier: {
namespace: "test",
key: key
},
name: "Object " + key
};
});
testContainer = document.createElement('div');
domObserver = new DOMObserver(testContainer);
describe("provides a view which", () => {
let testKeys;
let testChildren;
let testContainer;
let testHistories;
let mockComposition;
let mockMetadata;
let mockEvaluator;
let mockUnsubscribes;
let callbacks;
let view;
let domObserver;
testHistories = testKeys.reduce((histories, key, index) => {
histories[key] = {
key: key,
range: index + 10,
domain: key + index
};
function waitsForChange() {
return new Promise(function (resolve) {
window.requestAnimationFrame(resolve);
return histories;
}, {});
mockComposition =
jasmine.createSpyObj('composition', ['load', 'on', 'off']);
mockMetadata =
jasmine.createSpyObj('metadata', ['valuesForHints']);
mockEvaluator = jasmine.createSpyObj('evaluator', ['evaluate']);
mockUnsubscribes = testKeys.reduce((map, key) => {
map[key] = jasmine.createSpy('unsubscribe-' + key);
return map;
}, {});
openmct.composition.get.and.returnValue(mockComposition);
mockComposition.load.and.callFake(() => {
testChildren.forEach(emitEvent.bind(null, mockComposition, 'add'));
return Promise.resolve(testChildren);
});
openmct.telemetry.getMetadata.and.returnValue(mockMetadata);
openmct.telemetry.getValueFormatter.and.callFake((metadatum) => {
const mockFormatter = jasmine.createSpyObj('formatter', ['format']);
mockFormatter.format.and.callFake((datum) => {
return datum[metadatum.hint];
});
return mockFormatter;
});
openmct.telemetry.limitEvaluator.and.returnValue(mockEvaluator);
openmct.telemetry.subscribe.and.callFake((obj, callback) => {
const key = obj.identifier.key;
callbacks[key] = callback;
return mockUnsubscribes[key];
});
openmct.telemetry.request.and.callFake((obj, request) => {
const key = obj.identifier.key;
return Promise.resolve([testHistories[key]]);
});
mockMetadata.valuesForHints.and.callFake((hints) => {
return [{ hint: hints[0] }];
});
view = autoflowViewProvider.view(autoflowObject);
view.show(testContainer);
return Vue.nextTick();
});
afterEach(() => {
domObserver.destroy();
});
it("populates its container", () => {
expect(testContainer.children.length > 0).toBe(true);
});
describe("when rows have been populated", () => {
function rowsMatch() {
const rows = testContainer.querySelectorAll(".l-autoflow-row").length;
return rows === testChildren.length;
}
function emitEvent(mockEmitter, type, event) {
mockEmitter.on.calls.all().forEach((call) => {
if (call.args[0] === type) {
call.args[1](event);
}
});
it("shows one row per child object", async () => {
const success = await domObserver.when(rowsMatch);
expect(success).toBeTrue();
});
it("adds rows on composition change", async () => {
const child = {
identifier: {
namespace: "test",
key: "123"
},
name: "Object 123"
};
testChildren.push(child);
emitEvent(mockComposition, 'add', child);
const success = await domObserver.when(rowsMatch);
expect(success).toBeTrue();
});
it("removes rows on composition change", async () => {
const child = testChildren.pop();
emitEvent(mockComposition, 'remove', child.identifier);
const success = await domObserver.when(rowsMatch);
expect(success).toBeTrue();
});
});
it("removes subscriptions when destroyed", () => {
testKeys.forEach((key) => {
expect(mockUnsubscribes[key]).not.toHaveBeenCalled();
});
view.destroy();
testKeys.forEach((key) => {
expect(mockUnsubscribes[key]).toHaveBeenCalled();
});
});
it("provides a button to change column width", async () => {
let buttonClicked;
const initialWidth = testContainer.querySelector('.l-autoflow-col').style.width;
expect(initialWidth.length).toBeGreaterThan(0);
function widthHasChanged() {
if (!buttonClicked) {
buttonClicked = true;
testContainer.querySelector('.change-column-width').click();
}
const changedWidth = testContainer.querySelector('.l-autoflow-col').style.width;
return changedWidth !== initialWidth;
}
beforeEach(() => {
callbacks = {};
const success = await domObserver.when(widthHasChanged);
spyOnBuiltins(['requestAnimationFrame']);
window.requestAnimationFrame.and.callFake((callBack) => {
callBack();
expect(success).toBeTrue();
});
it("subscribes to all child objects", () => {
testKeys.forEach((key) => {
expect(callbacks[key]).toEqual(jasmine.any(Function));
});
});
it("displays historical telemetry", () => {
function rowTextDefined() {
return testContainer.querySelector(".l-autoflow-item.r").textContent !== "";
}
return domObserver.when(rowTextDefined).then(() => {
const rows = testContainer.querySelectorAll(".l-autoflow-row");
testKeys.forEach((key, index) => {
const datum = testHistories[key];
const $cell = rows[index].querySelector(".l-autoflow-item.r");
expect($cell.textContent).toEqual(String(datum.range));
});
});
});
testObject = { type: 'some-type' };
testKeys = ['abc', 'def', 'xyz'];
testChildren = testKeys.map((key) => {
return {
identifier: {
namespace: "test",
key: key
},
name: "Object " + key
};
});
testContainer = document.createElement('div');
domObserver = new DOMObserver(testContainer);
testHistories = testKeys.reduce((histories, key, index) => {
histories[key] = {
key: key,
range: index + 10,
domain: key + index
};
return histories;
}, {});
mockComposition =
jasmine.createSpyObj('composition', ['load', 'on', 'off']);
mockMetadata =
jasmine.createSpyObj('metadata', ['valuesForHints']);
mockEvaluator = jasmine.createSpyObj('evaluator', ['evaluate']);
mockUnsubscribes = testKeys.reduce((map, key) => {
map[key] = jasmine.createSpy('unsubscribe-' + key);
return map;
}, {});
mockmct.composition.get.and.returnValue(mockComposition);
mockComposition.load.and.callFake(() => {
testChildren.forEach(emitEvent.bind(null, mockComposition, 'add'));
return Promise.resolve(testChildren);
});
mockmct.telemetry.getMetadata.and.returnValue(mockMetadata);
mockmct.telemetry.getValueFormatter.and.callFake((metadatum) => {
const mockFormatter = jasmine.createSpyObj('formatter', ['format']);
mockFormatter.format.and.callFake((datum) => {
return datum[metadatum.hint];
});
return mockFormatter;
});
mockmct.telemetry.limitEvaluator.and.returnValue(mockEvaluator);
mockmct.telemetry.subscribe.and.callFake((obj, callback) => {
const key = obj.identifier.key;
callbacks[key] = callback;
return mockUnsubscribes[key];
});
mockmct.telemetry.request.and.callFake((obj, request) => {
const key = obj.identifier.key;
return Promise.resolve([testHistories[key]]);
});
mockMetadata.valuesForHints.and.callFake((hints) => {
return [{ hint: hints[0] }];
});
view = provider.view(testObject);
view.show(testContainer);
return Vue.nextTick();
it("displays incoming telemetry", () => {
const testData = testKeys.map((key, index) => {
return {
key: key,
range: index * 100,
domain: key + index
};
});
afterEach(() => {
domObserver.destroy();
testData.forEach((datum) => {
callbacks[datum.key](datum);
});
it("populates its container", () => {
expect(testContainer.children.length > 0).toBe(true);
});
return waitsForChange().then(() => {
const rows = testContainer.querySelectorAll(".l-autoflow-row");
describe("when rows have been populated", () => {
function rowsMatch() {
const rows = testContainer.querySelectorAll(".l-autoflow-row").length;
testData.forEach((datum, index) => {
const $cell = rows[index].querySelector(".l-autoflow-item.r");
return rows === testChildren.length;
}
it("shows one row per child object", () => {
return domObserver.when(rowsMatch);
expect($cell.textContent).toEqual(String(datum.range));
});
});
});
// it("adds rows on composition change", () => {
// const child = {
// identifier: {
// namespace: "test",
// key: "123"
// },
// name: "Object 123"
// };
// testChildren.push(child);
// emitEvent(mockComposition, 'add', child);
it("updates classes for limit violations", () => {
const testClass = "some-limit-violation";
// return domObserver.when(rowsMatch);
// });
mockEvaluator.evaluate.and.returnValue({ cssClass: testClass });
it("removes rows on composition change", () => {
const child = testChildren.pop();
emitEvent(mockComposition, 'remove', child.identifier);
return domObserver.when(rowsMatch);
testKeys.forEach((key) => {
callbacks[key]({
range: 'foo',
domain: 'bar'
});
});
it("removes subscriptions when destroyed", () => {
testKeys.forEach((key) => {
expect(mockUnsubscribes[key]).not.toHaveBeenCalled();
});
view.destroy();
testKeys.forEach((key) => {
expect(mockUnsubscribes[key]).toHaveBeenCalled();
return waitsForChange().then(() => {
const rows = testContainer.querySelectorAll(".l-autoflow-row");
testKeys.forEach((datum, index) => {
const $cell = rows[index].querySelector(".l-autoflow-item.r");
expect($cell.classList.contains(testClass)).toBe(true);
});
});
});
it("provides a button to change column width", () => {
const initialWidth = AutoflowTabularConstants.INITIAL_COLUMN_WIDTH;
const nextWidth =
initialWidth + AutoflowTabularConstants.COLUMN_WIDTH_STEP;
it("automatically flows to new columns", () => {
const rowHeight = AutoflowTabularConstants.ROW_HEIGHT;
const sliderHeight = AutoflowTabularConstants.SLIDER_HEIGHT;
const count = testKeys.length;
const $container = testContainer;
let promiseChain = Promise.resolve();
expect(testContainer.querySelector('.l-autoflow-col').css('width'))
.toEqual(initialWidth + 'px');
function columnsHaveAutoflowed() {
const itemsHeight = $container.querySelector('.l-autoflow-items').style.height;
const availableHeight = itemsHeight - sliderHeight;
const availableRows = Math.max(Math.floor(availableHeight / rowHeight), 1);
const columns = Math.ceil(count / availableRows);
testContainer.querySelector('.change-column-width').click();
return $container.querySelectorAll('.l-autoflow-col').length === columns;
}
function widthHasChanged() {
const width = testContainer.querySelector('.l-autoflow-col').css('width');
const absElement = $container.querySelector('.abs');
absElement.style.position = 'absolute';
absElement.style.left = 0;
absElement.style.right = 0;
absElement.style.top = 0;
absElement.style.bottom = 0;
return width !== initialWidth + 'px';
}
$container.style.position = 'absolute';
return domObserver.when(widthHasChanged)
.then(() => {
expect(testContainer.querySelector('.l-autoflow-col').css('width'))
.toEqual(nextWidth + 'px');
});
document.body.append($container);
function setHeight(height) {
$container.style.height = `${height}px`;
return domObserver.when(columnsHaveAutoflowed);
}
for (let height = 0; height < rowHeight * count * 2; height += rowHeight / 2) {
// eslint-disable-next-line no-invalid-this
promiseChain = promiseChain.then(setHeight.bind(this, height));
}
return promiseChain.then(success => {
expect(success).toBeTrue();
$container.remove();
});
});
it("subscribes to all child objects", () => {
testKeys.forEach((key) => {
expect(callbacks[key]).toEqual(jasmine.any(Function));
});
});
it("displays historical telemetry", () => {
function rowTextDefined() {
return testContainer.querySelector(".l-autoflow-item").filter(".r").text() !== "";
}
return domObserver.when(rowTextDefined).then(() => {
testKeys.forEach((key, index) => {
const datum = testHistories[key];
const $cell = testContainer.querySelector(".l-autoflow-row").eq(index).find(".r");
expect($cell.text()).toEqual(String(datum.range));
});
});
});
it("displays incoming telemetry", () => {
const testData = testKeys.map((key, index) => {
return {
key: key,
range: index * 100,
domain: key + index
};
});
testData.forEach((datum) => {
callbacks[datum.key](datum);
});
return waitsForChange().then(() => {
testData.forEach((datum, index) => {
const $cell = testContainer.querySelector(".l-autoflow-row").eq(index).find(".r");
expect($cell.text()).toEqual(String(datum.range));
});
});
});
it("updates classes for limit violations", () => {
const testClass = "some-limit-violation";
mockEvaluator.evaluate.and.returnValue({ cssClass: testClass });
testKeys.forEach((key) => {
callbacks[key]({
range: 'foo',
domain: 'bar'
});
});
return waitsForChange().then(() => {
testKeys.forEach((datum, index) => {
const $cell = testContainer.querySelector(".l-autoflow-row").eq(index).find(".r");
expect($cell.hasClass(testClass)).toBe(true);
});
});
});
it("automatically flows to new columns", () => {
const rowHeight = AutoflowTabularConstants.ROW_HEIGHT;
const sliderHeight = AutoflowTabularConstants.SLIDER_HEIGHT;
const count = testKeys.length;
const $container = testContainer;
let promiseChain = Promise.resolve();
function columnsHaveAutoflowed() {
const itemsHeight = $container.querySelector('.l-autoflow-items').height();
const availableHeight = itemsHeight - sliderHeight;
const availableRows = Math.max(Math.floor(availableHeight / rowHeight), 1);
const columns = Math.ceil(count / availableRows);
return $container.querySelector('.l-autoflow-col').length === columns;
}
$container.find('.abs').css({
position: 'absolute',
left: '0px',
right: '0px',
top: '0px',
bottom: '0px'
});
$container.css({ position: 'absolute' });
$container.appendTo(document.body);
function setHeight(height) {
$container.css('height', height + 'px');
return domObserver.when(columnsHaveAutoflowed);
}
for (let height = 0; height < rowHeight * count * 2; height += rowHeight / 2) {
// eslint-disable-next-line no-invalid-this
promiseChain = promiseChain.then(setHeight.bind(this, height));
}
return promiseChain.then(() => {
$container.remove();
});
});
it("loads composition exactly once", () => {
const testObj = testChildren.pop();
emitEvent(mockComposition, 'remove', testObj.identifier);
testChildren.push(testObj);
emitEvent(mockComposition, 'add', testObj);
expect(mockComposition.load.calls.count()).toEqual(1);
});
it("loads composition exactly once", () => {
const testObj = testChildren.pop();
emitEvent(mockComposition, 'remove', testObj.identifier);
testChildren.push(testObj);
emitEvent(mockComposition, 'add', testObj);
expect(mockComposition.load.calls.count()).toEqual(1);
});
});
});

View File

@ -30,7 +30,7 @@ define([], function () {
return new Promise(function (resolve, reject) {
//Test latch function at least once
if (latchFunction()) {
resolve();
resolve(true);
} else {
//Latch condition not true yet, create observer on DOM and test again on change.
const config = {
@ -40,7 +40,7 @@ define([], function () {
};
const observer = new MutationObserver(function () {
if (latchFunction()) {
resolve();
resolve(true);
}
});
observer.observe(this.element, config);

View File

@ -493,6 +493,7 @@ describe("The Imagery View Layouts", () => {
});
});
});
//Note this is a WIP test. Coverage was added in e2e suite
xit('should change the image zoom factor when using the zoom buttons', async (done) => {
await Vue.nextTick();
let imageSizeBefore;
@ -514,6 +515,7 @@ describe("The Imagery View Layouts", () => {
expect(imageSizeAfter.width).toBeLessThan(imageSizeBefore.width);
done();
});
//Note this is a WIP test. Coverage was added in e2e suite
xit('should reset the zoom factor on the image when clicking the zoom button', async (done) => {
await Vue.nextTick();
// test clicking the zoom reset button

View File

@ -28,7 +28,7 @@ import EventEmitter from "EventEmitter";
import PlotOptions from "./inspector/PlotOptions.vue";
import PlotConfigurationModel from "./configuration/PlotConfigurationModel";
describe("the plugin", function () {
xdescribe("the plugin", function () {
let element;
let child;
let openmct;

View File

@ -26,7 +26,7 @@ define([
SummaryWidgetTelemetryProvider
) {
xdescribe('SummaryWidgetTelemetryProvider', function () {
describe('SummaryWidgetTelemetryProvider', function () {
let telemObjectA;
let telemObjectB;
let summaryWidgetObject;

View File

@ -21,7 +21,7 @@
*****************************************************************************/
define(['../src/ConditionManager'], function (ConditionManager) {
xdescribe('A Summary Widget Condition Manager', function () {
describe('A Summary Widget Condition Manager', function () {
let conditionManager;
let mockDomainObject;
let mockCompObject1;
@ -360,7 +360,7 @@ define(['../src/ConditionManager'], function (ConditionManager) {
});
});
it('populates its LAD cache with historial data on load, if available', function (done) {
xit('populates its LAD cache with historial data on load, if available', function (done) {
expect(telemetryRequests.length).toBe(2);
expect(telemetryRequests[0].object).toBe(mockCompObject1);
expect(telemetryRequests[1].object).toBe(mockCompObject2);
@ -379,7 +379,7 @@ define(['../src/ConditionManager'], function (ConditionManager) {
telemetryRequests[1].resolve([mockTelemetryValues.mockCompObject2]);
});
it('updates its LAD cache upon receiving telemetry and invokes the appropriate handlers', function () {
xit('updates its LAD cache upon receiving telemetry and invokes the appropriate handlers', function () {
mockTelemetryAPI.triggerTelemetryCallback('mockCompObject1');
expect(conditionManager.subscriptionCache.mockCompObject1.property1).toEqual('Its a different string');
mockTelemetryAPI.triggerTelemetryCallback('mockCompObject2');

View File

@ -21,7 +21,7 @@
*****************************************************************************/
define(['../src/Condition'], function (Condition) {
xdescribe('A summary widget condition', function () {
describe('A summary widget condition', function () {
let testCondition;
let mockConfig;
let mockConditionManager;

View File

@ -21,7 +21,7 @@
*****************************************************************************/
define(['../src/SummaryWidget'], function (SummaryWidget) {
xdescribe('The Summary Widget', function () {
describe('The Summary Widget', function () {
let summaryWidget;
let mockDomainObject;
let mockOldDomainObject;
@ -97,7 +97,7 @@ define(['../src/SummaryWidget'], function (SummaryWidget) {
summaryWidget.show(mockContainer);
});
it('queries with legacyId', function () {
xit('queries with legacyId', function () {
expect(mockObjectService.getObjects).toHaveBeenCalledWith(['testNamespace:testKey']);
});
@ -154,14 +154,14 @@ define(['../src/SummaryWidget'], function (SummaryWidget) {
setTimeout(function () {
summaryWidget.onEdit([]);
expect(summaryWidget.editing).toEqual(false);
expect(summaryWidget.ruleArea.css('display')).toEqual('none');
expect(summaryWidget.testDataArea.css('display')).toEqual('none');
expect(summaryWidget.addRuleButton.css('display')).toEqual('none');
expect(summaryWidget.ruleArea.style.display).toEqual('none');
expect(summaryWidget.testDataArea.style.display).toEqual('none');
expect(summaryWidget.addRuleButton.style.display).toEqual('none');
summaryWidget.onEdit(['editing']);
expect(summaryWidget.editing).toEqual(true);
expect(summaryWidget.ruleArea.css('display')).not.toEqual('none');
expect(summaryWidget.testDataArea.css('display')).not.toEqual('none');
expect(summaryWidget.addRuleButton.css('display')).not.toEqual('none');
expect(summaryWidget.ruleArea.style.display).not.toEqual('none');
expect(summaryWidget.testDataArea.style.display).not.toEqual('none');
expect(summaryWidget.addRuleButton.style.display).not.toEqual('none');
}, 100);
});

View File

@ -83,7 +83,7 @@ describe("the inspector", () => {
});
});
xit("should allow a saved style to be applied", () => {
it("should allow a saved style to be applied", () => {
spyOn(openmct.editor, 'isEditing').and.returnValue(true);
selection = mockTelemetryTableSelection;