mirror of
https://github.com/nasa/openmct.git
synced 2024-12-27 16:38:51 +00:00
73734d99ea
* fix: remove unnecessary emit
* refactor: fix parameter names
* fix: update limit lines on axis reset
* Revert "fix: remove unnecessary emit"
This reverts commit b9a92e5e96.
* refactor: adjust parameter names
* test: add test for limit lines visibility
* refactor: convert to one-liner
---------
Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
279 lines
12 KiB
JavaScript
279 lines
12 KiB
JavaScript
/*****************************************************************************
|
|
* Open MCT, Copyright (c) 2014-2023, 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.
|
|
*****************************************************************************/
|
|
|
|
/*
|
|
Tests to verify log plot functionality. Note this test suite if very much under active development and should not
|
|
necessarily be used for reference when writing new tests in this area.
|
|
*/
|
|
|
|
const { test, expect } = require('../../../../pluginFixtures');
|
|
const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../../../appActions');
|
|
|
|
test.describe('Overlay Plot', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('./', { waitUntil: 'networkidle' });
|
|
});
|
|
|
|
test('Plot legend color is in sync with plot series color', async ({ page }) => {
|
|
const overlayPlot = await createDomainObjectWithDefaults(page, {
|
|
type: "Overlay Plot"
|
|
});
|
|
|
|
await createDomainObjectWithDefaults(page, {
|
|
type: "Sine Wave Generator",
|
|
parent: overlayPlot.uuid
|
|
});
|
|
|
|
await page.goto(overlayPlot.url);
|
|
|
|
await selectInspectorTab(page, 'Config');
|
|
|
|
// navigate to plot series color palette
|
|
await page.click('.l-browse-bar__actions__edit');
|
|
await page.locator('li.c-tree__item.menus-to-left .c-disclosure-triangle').click();
|
|
await page.locator('.c-click-swatch--menu').click();
|
|
await page.locator('.c-palette__item[style="background: rgb(255, 166, 61);"]').click();
|
|
|
|
// gets color for swatch located in legend
|
|
const element = await page.waitForSelector('.plot-series-color-swatch');
|
|
const color = await element.evaluate((el) => {
|
|
return window.getComputedStyle(el).getPropertyValue('background-color');
|
|
});
|
|
|
|
expect(color).toBe('rgb(255, 166, 61)');
|
|
});
|
|
|
|
test('Limit lines persist when series is moved to another Y Axis and on refresh', async ({ page }) => {
|
|
test.info().annotations.push({
|
|
type: 'issue',
|
|
description: 'https://github.com/nasa/openmct/issues/6338'
|
|
});
|
|
// Create an Overlay Plot with a default SWG
|
|
const overlayPlot = await createDomainObjectWithDefaults(page, {
|
|
type: "Overlay Plot"
|
|
});
|
|
|
|
const swgA = await createDomainObjectWithDefaults(page, {
|
|
type: "Sine Wave Generator",
|
|
parent: overlayPlot.uuid
|
|
});
|
|
|
|
await page.goto(overlayPlot.url);
|
|
|
|
// Assert that no limit lines are shown by default
|
|
await page.waitForSelector('.js-limit-area', { state: 'attached' });
|
|
expect(await page.locator('.c-plot-limit-line').count()).toBe(0);
|
|
|
|
// Enter edit mode
|
|
await page.click('button[title="Edit"]');
|
|
|
|
// Expand the "Sine Wave Generator" plot series options and enable limit lines
|
|
await selectInspectorTab(page, 'Config');
|
|
await page.getByRole('list', { name: 'Plot Series Properties' }).locator('span').first().click();
|
|
await page.getByRole('list', { name: 'Plot Series Properties' }).locator('[title="Display limit lines"]~div input').check();
|
|
|
|
await assertLimitLinesExistAndAreVisible(page);
|
|
|
|
// Save (exit edit mode)
|
|
await page.locator('button[title="Save"]').click();
|
|
await page.locator('li[title="Save and Finish Editing"]').click();
|
|
|
|
await assertLimitLinesExistAndAreVisible(page);
|
|
|
|
await page.reload();
|
|
|
|
await assertLimitLinesExistAndAreVisible(page);
|
|
|
|
// Enter edit mode
|
|
await page.click('button[title="Edit"]');
|
|
|
|
await selectInspectorTab(page, 'Elements');
|
|
|
|
// Drag Sine Wave Generator series from Y Axis 1 into Y Axis 2
|
|
await page.locator(`#inspector-elements-tree >> text=${swgA.name}`).dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
|
|
|
|
await assertLimitLinesExistAndAreVisible(page);
|
|
|
|
// Save (exit edit mode)
|
|
await page.locator('button[title="Save"]').click();
|
|
await page.locator('li[title="Save and Finish Editing"]').click();
|
|
|
|
await assertLimitLinesExistAndAreVisible(page);
|
|
|
|
await page.reload();
|
|
|
|
await assertLimitLinesExistAndAreVisible(page);
|
|
|
|
});
|
|
|
|
test('The elements pool supports dragging series into multiple y-axis buckets', async ({ page }) => {
|
|
const overlayPlot = await createDomainObjectWithDefaults(page, {
|
|
type: "Overlay Plot"
|
|
});
|
|
|
|
const swgA = await createDomainObjectWithDefaults(page, {
|
|
type: "Sine Wave Generator",
|
|
parent: overlayPlot.uuid
|
|
});
|
|
const swgB = await createDomainObjectWithDefaults(page, {
|
|
type: "Sine Wave Generator",
|
|
parent: overlayPlot.uuid
|
|
});
|
|
const swgC = await createDomainObjectWithDefaults(page, {
|
|
type: "Sine Wave Generator",
|
|
parent: overlayPlot.uuid
|
|
});
|
|
const swgD = await createDomainObjectWithDefaults(page, {
|
|
type: "Sine Wave Generator",
|
|
parent: overlayPlot.uuid
|
|
});
|
|
const swgE = await createDomainObjectWithDefaults(page, {
|
|
type: "Sine Wave Generator",
|
|
parent: overlayPlot.uuid
|
|
});
|
|
|
|
await page.goto(overlayPlot.url);
|
|
await page.click('button[title="Edit"]');
|
|
|
|
await selectInspectorTab(page, 'Elements');
|
|
|
|
// Drag swg a, c, e into Y Axis 2
|
|
await page.locator(`#inspector-elements-tree >> text=${swgA.name}`).dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
|
|
await page.locator(`#inspector-elements-tree >> text=${swgC.name}`).dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
|
|
await page.locator(`#inspector-elements-tree >> text=${swgE.name}`).dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
|
|
|
|
// Assert that Y Axis 1 and Y Axis 2 property groups are visible only
|
|
await selectInspectorTab(page, 'Config');
|
|
|
|
const yAxis1PropertyGroup = page.locator('[aria-label="Y Axis Properties"]');
|
|
const yAxis2PropertyGroup = page.locator('[aria-label="Y Axis 2 Properties"]');
|
|
const yAxis3PropertyGroup = page.locator('[aria-label="Y Axis 3 Properties"]');
|
|
|
|
await expect(yAxis1PropertyGroup).toBeVisible();
|
|
await expect(yAxis2PropertyGroup).toBeVisible();
|
|
await expect(yAxis3PropertyGroup).toBeHidden();
|
|
|
|
const yAxis1Group = page.getByLabel("Y Axis 1");
|
|
const yAxis2Group = page.getByLabel("Y Axis 2");
|
|
const yAxis3Group = page.getByLabel("Y Axis 3");
|
|
|
|
await selectInspectorTab(page, 'Elements');
|
|
|
|
// Drag swg b into Y Axis 3
|
|
await page.locator(`#inspector-elements-tree >> text=${swgB.name}`).dragTo(page.locator('[aria-label="Element Item Group Y Axis 3"]'));
|
|
|
|
// Assert that all Y Axis property groups are visible
|
|
await selectInspectorTab(page, 'Config');
|
|
|
|
await expect(yAxis1PropertyGroup).toBeVisible();
|
|
await expect(yAxis2PropertyGroup).toBeVisible();
|
|
await expect(yAxis3PropertyGroup).toBeVisible();
|
|
|
|
// Verify that the elements are in the correct buckets and in the correct order
|
|
await selectInspectorTab(page, 'Elements');
|
|
|
|
expect(yAxis1Group.getByRole('listitem', { name: swgD.name })).toBeTruthy();
|
|
expect(yAxis1Group.getByRole('listitem').nth(0).getByText(swgD.name)).toBeTruthy();
|
|
expect(yAxis2Group.getByRole('listitem', { name: swgE.name })).toBeTruthy();
|
|
expect(yAxis2Group.getByRole('listitem').nth(0).getByText(swgE.name)).toBeTruthy();
|
|
expect(yAxis2Group.getByRole('listitem', { name: swgC.name })).toBeTruthy();
|
|
expect(yAxis2Group.getByRole('listitem').nth(1).getByText(swgC.name)).toBeTruthy();
|
|
expect(yAxis2Group.getByRole('listitem', { name: swgA.name })).toBeTruthy();
|
|
expect(yAxis2Group.getByRole('listitem').nth(2).getByText(swgA.name)).toBeTruthy();
|
|
expect(yAxis3Group.getByRole('listitem', { name: swgB.name })).toBeTruthy();
|
|
expect(yAxis3Group.getByRole('listitem').nth(0).getByText(swgB.name)).toBeTruthy();
|
|
});
|
|
|
|
test('Clicking on an item in the elements pool brings up the plot preview with data points', async ({ page }) => {
|
|
const overlayPlot = await createDomainObjectWithDefaults(page, {
|
|
type: "Overlay Plot"
|
|
});
|
|
|
|
const swgA = await createDomainObjectWithDefaults(page, {
|
|
type: "Sine Wave Generator",
|
|
parent: overlayPlot.uuid
|
|
});
|
|
|
|
await page.goto(overlayPlot.url);
|
|
await page.click('button[title="Edit"]');
|
|
|
|
await selectInspectorTab(page, 'Elements');
|
|
|
|
await page.locator(`#inspector-elements-tree >> text=${swgA.name}`).click();
|
|
|
|
const plotPixelSize = await getCanvasPixelsWithData(page);
|
|
expect(plotPixelSize).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
|
|
/**
|
|
* @param {import('@playwright/test').Page} page
|
|
*/
|
|
async function getCanvasPixelsWithData(page) {
|
|
const getTelemValuePromise = new Promise(resolve => page.exposeFunction('getCanvasValue', resolve));
|
|
|
|
await page.evaluate(() => {
|
|
// The document canvas is where the plot points and lines are drawn.
|
|
// The only way to access the canvas is using document (using page.evaluate)
|
|
let data;
|
|
let canvas;
|
|
let ctx;
|
|
canvas = document.querySelector('.js-overlay canvas');
|
|
ctx = canvas.getContext('2d');
|
|
data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
|
|
const imageDataValues = Object.values(data);
|
|
let plotPixels = [];
|
|
// Each pixel consists of four values within the ImageData.data array. The for loop iterates by multiples of four.
|
|
// The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
|
|
for (let i = 0; i < imageDataValues.length;) {
|
|
if (imageDataValues[i] > 0) {
|
|
plotPixels.push({
|
|
startIndex: i,
|
|
endIndex: i + 3,
|
|
value: `rgb(${imageDataValues[i]}, ${imageDataValues[i + 1]}, ${imageDataValues[i + 2]}, ${imageDataValues[i + 3]})`
|
|
});
|
|
}
|
|
|
|
i = i + 4;
|
|
|
|
}
|
|
|
|
window.getCanvasValue(plotPixels.length);
|
|
});
|
|
|
|
return getTelemValuePromise;
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param {import('@playwright/test').Page} page
|
|
*/
|
|
async function assertLimitLinesExistAndAreVisible(page) {
|
|
await page.waitForSelector('.js-limit-area', { state: 'attached' });
|
|
const limitLineCount = await page.locator('.c-plot-limit-line').count();
|
|
// There should be 10 limit lines created by default
|
|
expect(await page.locator('.c-plot-limit-line').count()).toBe(10);
|
|
for (let i = 0; i < limitLineCount; i++) {
|
|
await expect(page.locator('.c-plot-limit-line').nth(i)).toBeVisible();
|
|
}
|
|
}
|