openmct/src/plugins/displayLayout/pluginSpec.js

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2022, 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 Vue from 'vue';
import DisplayLayoutPlugin from './plugin';

describe('the plugin', function () {
    let element;
    let child;
    let openmct;
    let displayLayoutDefinition;

    beforeEach((done) => {
        openmct = createOpenMct();
        openmct.install(new DisplayLayoutPlugin({
            showAsView: []
        }));
        displayLayoutDefinition = openmct.types.get('layout');

        element = document.createElement('div');
        child = document.createElement('div');
        element.appendChild(child);

        openmct.on('start', done);
        openmct.start(child);
    });

    afterEach(() => {
        return resetApplicationState(openmct);
    });

    it('defines a display layout object type with the correct key', () => {
        expect(displayLayoutDefinition.definition.name).toEqual('Display Layout');
    });

    it('provides a view', () => {
        const testViewObject = {
            id: 'test-object',
            type: 'layout',
            configuration: {
                items: [
                    {

                        'identifier': {
                            'namespace': '',
                            'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
                        },
                        'x': 8,
                        'y': 3,
                        'width': 10,
                        'height': 5,
                        'displayMode': 'all',
                        'value': 'sin',
                        'stroke': '',
                        'fill': '',
                        'color': '',
                        'size': '13px',
                        'type': 'telemetry-view',
                        'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e'

                    }
                ],
                layoutGrid: [10, 10]
            }
        };

        const applicableViews = openmct.objectViews.get(testViewObject, []);
        let displayLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'layout.view');
        expect(displayLayoutViewProvider).toBeDefined();
    });

    it('renders a display layout view without errors', () => {
        const testViewObject = {
            identifier: {
                namespace: 'test-namespace',
                key: 'test-key'
            },
            type: 'layout',
            configuration: {
                items: [],
                layoutGrid: [10, 10]
            },
            composition: []
        };

        const applicableViews = openmct.objectViews.get(testViewObject, []);
        let displayLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'layout.view');
        let view = displayLayoutViewProvider.view(testViewObject);
        let error;

        try {
            view.show(child, false);
        } catch (e) {
            error = e;
        }

        expect(error).toBeUndefined();

    });

    describe('on load', () => {
        let displayLayoutItem;
        let item;

        beforeEach((done) => {
            item = {
                'width': 32,
                'height': 18,
                'x': 78,
                'y': 8,
                'identifier': {
                    'namespace': '',
                    'key': 'bdeb91ab-3a7e-4a71-9dd2-39d73644e136'
                },
                'hasFrame': true,
                'type': 'line-view', // so no telemetry functionality is triggered, just want to test the sync
                'id': 'c0ff485a-344c-4e70-8d83-a9d9998a69fc'

            };
            displayLayoutItem = {
                'composition': [
                    // no item in compostion, but item in configuration items
                ],
                'configuration': {
                    'items': [
                        item
                    ],
                    'layoutGrid': [
                        10,
                        10
                    ]
                },
                'name': 'Display Layout',
                'type': 'layout',
                'identifier': {
                    'namespace': '',
                    'key': 'c5e636c1-6771-4c9c-b933-8665cab189b3'
                }
            };

            const applicableViews = openmct.objectViews.get(displayLayoutItem, []);
            const displayLayoutViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'layout.view');
            const view = displayLayoutViewProvider.view(displayLayoutItem);
            view.show(child, false);

            Vue.nextTick(done);
        });

        it('will sync compostion and layout items', () => {
            expect(displayLayoutItem.configuration.items.length).toBe(0);
        });
    });

    describe('the alpha numeric format view', () => {
        let displayLayoutItem;
        let telemetryItem;
        let selection;

        beforeEach(() => {
            displayLayoutItem = {
                'composition': [
                ],
                'configuration': {
                    'items': [
                        {

                            'identifier': {
                                'namespace': '',
                                'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
                            },
                            'x': 8,
                            'y': 3,
                            'width': 10,
                            'height': 5,
                            'displayMode': 'all',
                            'value': 'sin',
                            'stroke': '',
                            'fill': '',
                            'color': '',
                            'size': '13px',
                            'type': 'telemetry-view',
                            'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e'

                        }
                    ],
                    'layoutGrid': [
                        10,
                        10
                    ]
                },
                'name': 'Display Layout',
                'type': 'layout',
                'identifier': {
                    'namespace': '',
                    'key': 'c5e636c1-6771-4c9c-b933-8665cab189b3'
                }
            };
            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: {
                        'layoutItem': displayLayoutItem.configuration.items[0],
                        'item': telemetryItem,
                        'index': 1
                    }
                },
                {
                    context: {
                        'item': displayLayoutItem,
                        'supportsMultiSelect': true
                    }
                }]
            ];
        });

        it('provides an alphanumeric format view', () => {
            const displayLayoutAlphaNumFormatView = openmct.inspectorViews.get(selection);
            expect(displayLayoutAlphaNumFormatView.length).toBeDefined();
        });
    });

    describe('the toolbar', () => {
        let displayLayoutItem;
        let selection;

        beforeEach(() => {
            displayLayoutItem = {
                'composition': [
                ],
                'configuration': {
                    'items': [
                        {
                            'fill': '#666666',
                            'stroke': '',
                            'x': 1,
                            'y': 1,
                            'width': 10,
                            'height': 5,
                            'type': 'box-view',
                            'id': '89b88746-d325-487b-aec4-11b79afff9e8'
                        },
                        {
                            'fill': '#666666',
                            'stroke': '',
                            'x': 1,
                            'y': 1,
                            'width': 10,
                            'height': 10,
                            'type': 'ellipse-view',
                            'id': '19b88746-d325-487b-aec4-11b79afff9z8'
                        },
                        {
                            'x': 18,
                            'y': 9,
                            'x2': 23,
                            'y2': 4,
                            'stroke': '#666666',
                            'type': 'line-view',
                            'id': '57d49a28-7863-43bd-9593-6570758916f0'
                        },
                        {

                            'identifier': {
                                'namespace': '',
                                'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
                            },
                            'x': 8,
                            'y': 3,
                            'width': 10,
                            'height': 5,
                            'displayMode': 'all',
                            'value': 'sin',
                            'stroke': '',
                            'fill': '',
                            'color': '',
                            'size': '13px',
                            'type': 'telemetry-view',
                            'id': 'deb9f839-80ad-4ccf-a152-5c763ceb7d7e'

                        },
                        {

                            'width': 32,
                            'height': 18,
                            'x': 78,
                            'y': 8,
                            'identifier': {
                                'namespace': '',
                                'key': 'bdeb91ab-3a7e-4a71-9dd2-39d73644e136'
                            },
                            'hasFrame': true,
                            'type': 'subobject-view',
                            'id': 'c0ff485a-344c-4e70-8d83-a9d9998a69fc'

                        }
                    ],
                    'layoutGrid': [
                        10,
                        10
                    ]
                },
                'name': 'Display Layout',
                'type': 'layout',
                'identifier': {
                    'namespace': '',
                    'key': 'c5e636c1-6771-4c9c-b933-8665cab189b3'
                }
            };
            selection = [
                [{
                    context: {
                        'layoutItem': displayLayoutItem.configuration.items[1],
                        'index': 1
                    }
                },
                {
                    context: {
                        'item': displayLayoutItem,
                        'supportsMultiSelect': true
                    }
                }],
                [{
                    context: {
                        'layoutItem': displayLayoutItem.configuration.items[0],
                        'index': 0
                    }
                },
                {
                    context: {
                        item: displayLayoutItem,
                        'supportsMultiSelect': true
                    }
                }],
                [{
                    context: {
                        'layoutItem': displayLayoutItem.configuration.items[2],
                        'item': displayLayoutItem.configuration.items[2],
                        'index': 2
                    }
                },
                {
                    context: {
                        item: displayLayoutItem,
                        'supportsMultiSelect': true
                    }
                }],
                [{
                    context: {
                        'item': {

                            'composition': [
                                {
                                    'namespace': '',
                                    'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
                                }
                            ],
                            'configuration': {
                                'series': [
                                    {
                                        'identifier': {
                                            'namespace': '',
                                            'key': '55122607-e65e-44d5-9c9d-9c31a914ca89'
                                        }
                                    }
                                ],
                                'yAxis': {
                                },
                                'xAxis': {
                                }
                            },
                            'name': 'Unnamed Overlay Plot',
                            'type': 'telemetry.plot.overlay',
                            'modified': 1594142141929,
                            'location': 'mine',
                            'identifier': {
                                'namespace': '',
                                'key': 'bdeb91ab-3a7e-4a71-9dd2-39d73644e136'
                            },
                            'persisted': 1594142141929

                        },
                        'layoutItem': displayLayoutItem.configuration.items[3],
                        'index': 3
                    }
                },
                {
                    context: {
                        item: displayLayoutItem,
                        'supportsMultiSelect': true
                    }
                }]
            ];
        });

        it('provides controls including separators', () => {
            const displayLayoutToolbar = openmct.toolbars.get(selection);

            expect(displayLayoutToolbar.length).toBe(8);
        });
    });
});