ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-12 20:28:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: add appActions and stabilize overlayPlot and plotRendering e2e test suites (#6612)

Browse Source 
* test: add appActions, stabilize overlayPlot test

- Adds `waitForPlotsToRender`, a function that waits for all active `.plot` elements on the page to load and draw their series data
- Adds `getCanvasPixels`, a function that takes a canvas selector and retrieves an array of canvas pixel data.
- Modifies `getCanvasPixels` to use `page.evaluateHandle()` so that the canvas handle lifetime exists throughout the test (this was causing flakiness before)

* test: refactor and stabilize `plotRendering` tests

* test: remove redundant test suite

* test: stabilize plot legend color swatch test

* docs: mention `waitForPlotsToLoad()` in e2e docs

* refactor: have getCanvasPixels return actual rgba values

* docs: fix typo

* test: use appAction and fix reload wait condition

* docs: add additional context for `waitForPlotsToRender()`

* refactor: one-liner

* docs: tidy up docs
This commit is contained in:
Jesse Mazzella
2023-04-20 14:36:58 -07:00
committed by GitHub
parent c200999659
commit 7af7e68779
6 changed files with 147 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js
View File

@ -26,26 +26,25 @@
*/
const { test, expect } = require('../../../../pluginFixtures');
const { createDomainObjectWithDefaults} = require('../../../../appActions');
const { createDomainObjectWithDefaults, getCanvasPixels } = require('../../../../appActions');
test.describe('Plot Integrity Testing @unstable', () => {
test.describe('Plot Rendering', () => {
let sineWaveGeneratorObject;
test.beforeEach(async ({ page }) => {
//Open a browser, navigate to the main page, and wait until all networkevents to resolve
// Open a browser, navigate to the main page, and wait until all networkevents to resolve
await page.goto('./', { waitUntil: 'domcontentloaded' });
sineWaveGeneratorObject = await createDomainObjectWithDefaults(page, { type: 'Sine Wave Generator' });
});
test('Plots do not re-request data when a plot is clicked', async ({ page }) => {
//Navigate to Sine Wave Generator
// Navigate to Sine Wave Generator
await page.goto(sineWaveGeneratorObject.url);
//Click on the plot canvas
// Click on the plot canvas
await page.locator('canvas').nth(1).click();
//No request was made to get historical data
// No request was made to get historical data
const createMineFolderRequests = [];
page.on('request', req => {
// eslint-disable-next-line playwright/no-conditional-in-test
createMineFolderRequests.push(req);
});
expect(createMineFolderRequests.length).toEqual(0);
@ -56,7 +55,8 @@ test.describe('Plot Integrity Testing @unstable', () => {
await editSineWaveToUseInfinityOption(page, sineWaveGeneratorObject);
//Get pixel data from Canvas
const plotPixelSize = await getCanvasPixelsWithData(page);
const plotPixels = await getCanvasPixels(page, 'canvas');
const plotPixelSize = plotPixels.length;
expect(plotPixelSize).toBeGreaterThan(0);
});
});
@ -70,70 +70,19 @@ test.describe('Plot Integrity Testing @unstable', () => {
*/
async function editSineWaveToUseInfinityOption(page, sineWaveGeneratorObject) {
await page.goto(sineWaveGeneratorObject.url);
// Edit LAD table
// Edit SWG properties to include infinity values
await page.locator('[title="More options"]').click();
await page.locator('[title="Edit properties of this object."]').click();
// Modify the infinity option to true
const infinityInput = page.locator('[aria-label="Include Infinity Values"]');
await infinityInput.click();
await page.getByRole('switch', {
name: "Include Infinity Values"
}).check();
// Click OK button and wait for Navigate event
await Promise.all([
page.waitForLoadState(),
page.click('[aria-label="Save"]'),
// Wait for Save Banner to appear
page.waitForSelector('.c-message-banner__message')
]);
await page.getByRole('button', {
name: 'Save'
}).click();
// FIXME: Changes to SWG properties should be reflected on save, but they're not?
// Thus, navigate away and back to the object.
await page.goto('./#/browse/mine');
await page.goto(sineWaveGeneratorObject.url);
await page.locator('c-progress-bar c-telemetry-table__progress-bar').waitFor({
state: 'hidden'
});
// FIXME: The progress bar disappears on series data load, not on plot render,
// so wait for a half a second before evaluating the canvas.
// eslint-disable-next-line playwright/no-wait-for-timeout
await page.waitForTimeout(500);
}
/**
* @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('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;
}