mirror of
https://github.com/nasa/openmct.git
synced 2025-01-31 16:36:13 +00:00
Tests for flexible layouts and tabs views (#3768)
This commit is contained in:
Shefali Joshi
GitHub
parent
86ebd14ae7
commit
e83cfa24c2
197
src/plugins/flexibleLayout/pluginSpec.js
Normal file
197
src/plugins/flexibleLayout/pluginSpec.js
Normal file
@ -0,0 +1,197 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2021, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
import { createOpenMct, resetApplicationState } from 'utils/testing';
|
||||
import FlexibleLayout from './plugin';
|
||||
|
||||
describe('the plugin', function () {
|
||||
let element;
|
||||
let child;
|
||||
let openmct;
|
||||
let flexibleLayoutDefinition;
|
||||
const testViewObject = {
|
||||
id: 'test-object',
|
||||
type: 'flexible-layout',
|
||||
configuration: {
|
||||
rowsLayout: false,
|
||||
containers: [
|
||||
{
|
||||
'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e',
|
||||
frames: [],
|
||||
size: 50
|
||||
|
||||
},
|
||||
{
|
||||
'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7f',
|
||||
frames: [],
|
||||
size: 50
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
composition: []
|
||||
};
|
||||
|
||||
beforeEach((done) => {
|
||||
openmct = createOpenMct();
|
||||
openmct.install(new FlexibleLayout());
|
||||
flexibleLayoutDefinition = openmct.types.get('flexible-layout');
|
||||
|
||||
element = document.createElement('div');
|
||||
child = document.createElement('div');
|
||||
element.appendChild(child);
|
||||
|
||||
openmct.on('start', done);
|
||||
openmct.startHeadless();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
return resetApplicationState(openmct);
|
||||
});
|
||||
|
||||
it('defines a flexible layout object type with the correct key', () => {
|
||||
expect(flexibleLayoutDefinition.definition.name).toEqual('Flexible Layout');
|
||||
});
|
||||
|
||||
describe('the view', function () {
|
||||
let flexibleLayoutViewProvider;
|
||||
|
||||
beforeEach(() => {
|
||||
const applicableViews = openmct.objectViews.get(testViewObject, []);
|
||||
flexibleLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'flexible-layout');
|
||||
});
|
||||
|
||||
it('provides a view', () => {
|
||||
expect(flexibleLayoutViewProvider).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('the toolbar', () => {
|
||||
let flexibleLayoutItem;
|
||||
let flexibleLayoutToolbar;
|
||||
let telemetryItem;
|
||||
let selection;
|
||||
|
||||
beforeEach(() => {
|
||||
flexibleLayoutItem = {
|
||||
id: 'test-object',
|
||||
type: 'flexible-layout',
|
||||
configuration: {
|
||||
rowsLayout: true,
|
||||
containers: [
|
||||
{
|
||||
'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e',
|
||||
frames: [{
|
||||
id: "329bf482-d0dc-486a-aae0-6176276bd315",
|
||||
'domainObjectIdentifier': {
|
||||
'namespace': '',
|
||||
'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
|
||||
},
|
||||
size: 100,
|
||||
noFrame: false
|
||||
}],
|
||||
size: 61
|
||||
|
||||
},
|
||||
{
|
||||
'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7f',
|
||||
frames: [{
|
||||
id: "329bf482-d0dc-486a-aae0-6176276bd316",
|
||||
'domainObjectIdentifier': {
|
||||
'namespace': '',
|
||||
'key': '55122607-e65e-44d5-9c9d-9c31a914ca90'
|
||||
},
|
||||
size: 100,
|
||||
noFrame: false
|
||||
}],
|
||||
size: 39
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
composition: [
|
||||
{
|
||||
'identifier': {
|
||||
'namespace': '',
|
||||
'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
|
||||
}
|
||||
},
|
||||
{
|
||||
'identifier': {
|
||||
'namespace': '',
|
||||
'key': '55122607-e65e-44d5-9c9d-9c31a914ca90'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
telemetryItem = {
|
||||
'telemetry': {
|
||||
'period': 5,
|
||||
'amplitude': 5,
|
||||
'offset': 5,
|
||||
'dataRateInHz': 5,
|
||||
'phase': 5,
|
||||
'randomness': 0
|
||||
},
|
||||
'name': 'Sine Wave Generator',
|
||||
'type': 'generator',
|
||||
'modified': 1592851063871,
|
||||
'location': 'mine',
|
||||
'persisted': 1592851063871,
|
||||
'id': '55122607-e65e-44d5-9c9d-9c31a914ca89',
|
||||
'identifier': {
|
||||
'namespace': '',
|
||||
'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
|
||||
}
|
||||
};
|
||||
selection = [
|
||||
[{
|
||||
context: {
|
||||
frameId: "329bf482-d0dc-486a-aae0-6176276bd315",
|
||||
item: telemetryItem,
|
||||
type: "frame"
|
||||
}
|
||||
},
|
||||
{
|
||||
context: {
|
||||
containerId: "deb9f839-80ad-4ccf-a152-5c763ceb7d7e",
|
||||
'item': flexibleLayoutItem,
|
||||
type: "container"
|
||||
}
|
||||
},
|
||||
{
|
||||
context: {
|
||||
item: flexibleLayoutItem,
|
||||
type: "flexible-layout"
|
||||
}
|
||||
|
||||
}]
|
||||
];
|
||||
|
||||
flexibleLayoutToolbar = openmct.toolbars.get(selection);
|
||||
});
|
||||
|
||||
it('provides controls including separators', () => {
|
||||
expect(flexibleLayoutToolbar.length).toBe(6);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -22,7 +22,7 @@
|
||||
<div
|
||||
v-for="(tab, index) in tabsList"
|
||||
:key="tab.keyString"
|
||||
class="c-tab c-tabs-view__tab"
|
||||
class="c-tab c-tabs-view__tab js-tab"
|
||||
:class="{
|
||||
'is-current': isCurrent(tab)
|
||||
}"
|
||||
|
||||
179
src/plugins/tabs/pluginSpec.js
Normal file
179
src/plugins/tabs/pluginSpec.js
Normal file
@ -0,0 +1,179 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2021, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
import { createOpenMct, resetApplicationState } from 'utils/testing';
|
||||
import TabsLayout from './plugin';
|
||||
import Vue from "vue";
|
||||
import EventEmitter from "EventEmitter";
|
||||
|
||||
describe('the plugin', function () {
|
||||
let element;
|
||||
let child;
|
||||
let openmct;
|
||||
let tabsLayoutDefinition;
|
||||
const testViewObject = {
|
||||
id: 'af3f0e11-354e-48b5-9887-de47dfb6ecf6',
|
||||
identifier: {
|
||||
key: 'af3f0e11-354e-48b5-9887-de47dfb6ecf6',
|
||||
namespace: ''
|
||||
},
|
||||
type: 'tabs',
|
||||
name: 'Tabs view',
|
||||
keep_alive: true,
|
||||
composition: [
|
||||
{
|
||||
'identifier': {
|
||||
'namespace': '',
|
||||
'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
|
||||
}
|
||||
},
|
||||
{
|
||||
'identifier': {
|
||||
'namespace': '',
|
||||
'key': '55122607-e65e-44d5-9c9d-9c31a914ca90'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const telemetryItemTemplate = {
|
||||
'telemetry': {
|
||||
'period': 5,
|
||||
'amplitude': 5,
|
||||
'offset': 5,
|
||||
'dataRateInHz': 5,
|
||||
'phase': 5,
|
||||
'randomness': 0
|
||||
},
|
||||
'name': 'Sine Wave Generator',
|
||||
'type': 'generator',
|
||||
'modified': 1592851063871,
|
||||
'location': 'mine',
|
||||
'persisted': 1592851063871
|
||||
};
|
||||
let telemetryItem1 = Object.assign({}, telemetryItemTemplate, {
|
||||
'id': '55122607-e65e-44d5-9c9d-9c31a914ca89',
|
||||
'identifier': {
|
||||
'namespace': '',
|
||||
'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
|
||||
}
|
||||
});
|
||||
let telemetryItem2 = Object.assign({}, telemetryItemTemplate, {
|
||||
'id': '55122607-e65e-44d5-9c9d-9c31a914ca90',
|
||||
'identifier': {
|
||||
'namespace': '',
|
||||
'key': '55122607-e65e-44d5-9c9d-9c31a914ca90'
|
||||
}
|
||||
});
|
||||
|
||||
beforeEach((done) => {
|
||||
openmct = createOpenMct();
|
||||
openmct.install(new TabsLayout());
|
||||
tabsLayoutDefinition = openmct.types.get('tabs');
|
||||
|
||||
element = document.createElement('div');
|
||||
child = document.createElement('div');
|
||||
element.appendChild(child);
|
||||
|
||||
openmct.on('start', done);
|
||||
openmct.startHeadless();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
return resetApplicationState(openmct);
|
||||
});
|
||||
|
||||
it('defines a tabs object type with the correct key', () => {
|
||||
expect(tabsLayoutDefinition.definition.name).toEqual('Tabs View');
|
||||
});
|
||||
|
||||
it('is creatable', () => {
|
||||
expect(tabsLayoutDefinition.definition.creatable).toEqual(true);
|
||||
});
|
||||
|
||||
describe('the view', function () {
|
||||
let tabsLayoutViewProvider;
|
||||
let mockComposition;
|
||||
|
||||
beforeEach((done) => {
|
||||
mockComposition = new EventEmitter();
|
||||
mockComposition.load = () => {
|
||||
return Promise.resolve([telemetryItem1]);
|
||||
};
|
||||
|
||||
spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
|
||||
|
||||
const applicableViews = openmct.objectViews.get(testViewObject, []);
|
||||
tabsLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'tabs');
|
||||
let view = tabsLayoutViewProvider.view(testViewObject, []);
|
||||
view.show(child, true);
|
||||
Vue.nextTick(done);
|
||||
});
|
||||
|
||||
it('provides a view', () => {
|
||||
expect(tabsLayoutViewProvider).toBeDefined();
|
||||
});
|
||||
|
||||
it('renders tab element', () => {
|
||||
const tabsElements = element.querySelectorAll('.c-tabs');
|
||||
|
||||
expect(tabsElements.length).toBe(1);
|
||||
});
|
||||
|
||||
it('renders empty tab element with msg', () => {
|
||||
const tabsElement = element.querySelector('.c-tabs');
|
||||
|
||||
expect(tabsElement.innerText.trim()).toEqual('Drag objects here to add them to this view.');
|
||||
});
|
||||
});
|
||||
|
||||
describe('the view', function () {
|
||||
let tabsLayoutViewProvider;
|
||||
let mockComposition;
|
||||
let count = 0;
|
||||
|
||||
beforeEach((done) => {
|
||||
mockComposition = new EventEmitter();
|
||||
mockComposition.load = () => {
|
||||
if (count === 0) {
|
||||
mockComposition.emit('add', telemetryItem1);
|
||||
mockComposition.emit('add', telemetryItem2);
|
||||
count++;
|
||||
}
|
||||
|
||||
return Promise.resolve([telemetryItem1, telemetryItem2]);
|
||||
};
|
||||
|
||||
spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
|
||||
|
||||
const applicableViews = openmct.objectViews.get(testViewObject, []);
|
||||
tabsLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'tabs');
|
||||
let view = tabsLayoutViewProvider.view(testViewObject, []);
|
||||
view.show(child, true);
|
||||
Vue.nextTick(done);
|
||||
});
|
||||
|
||||
it ('renders a tab for each item', () => {
|
||||
let tabEls = element.querySelectorAll('.js-tab');
|
||||
expect(tabEls.length).toEqual(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user