ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-03 21:00:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tests for flexible layouts and tabs views ()

Browse Source
This commit is contained in:
Shefali Joshi 2021-03-26 11:50:40 -07:00 committed by GitHub
parent 86ebd14ae7
commit e83cfa24c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 377 additions and 1 deletions
src/plugins
flexibleLayout
pluginSpec.js
tabs
components
tabs.vue
pluginSpec.js

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);
});
});
});

2
src/plugins/tabs/components/tabs.vue

@ -22,7 +22,7 @@
<div <div
v-for="(tab, index) in tabsList" v-for="(tab, index) in tabsList"
:key="tab.keyString" :key="tab.keyString"
class="c-tab c-tabs-view__tab" class="c-tab c-tabs-view__tab js-tab"
:class="{ :class="{
'is-current': isCurrent(tab) 'is-current': isCurrent(tab)
}" }"

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);
});
});
});