Use Composition API to add/remove from composition (#5941)

* Use composition API in RemoveAction

* refactor: ScatterPlotView to use composition API

* fix: initialize transaction to null and reset

* fix: remove seriesKey and correct found condition

* refactor: Gauge to use composition API

* refactor: DisplayLayout to use composition API

* test: RemoveAction starts and ends transactions

* test: add ScatterPlot add/remove telemetry test

* test: fix e2e test and add annotation

* test: remove unnecessary awaits

* test: make some displayLayout tests stable

* test{displayLayout}: navigate to objects via url

* test(gauge): add test for add/remove telemetry

* fix(#3117): init layoutItems within transaction

* refactor: add clearSelection() method

* test: remove unstable tag

* fix(#3117): init frames and use transactions

- fixes #3117 for flexible layouts by syncing frames and composition

- also uses transactions now to avoid race condition

* test(flexibleLayout): removing items via context menu

- add test for removing items via context menu while focusing the layout

- add test for removing items via context menu while not focusing the layout

* fix(e2e): use pluginFixtures

* refactor(e2e): improve selectors

* refactor: use async/await for saving transactions

* docs(e2e): fix comments

* test: use soft expects

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
This commit is contained in:
Jesse Mazzella
2022-11-10 12:06:13 -08:00
committed by GitHub
parent 8af3b4309f
commit 7bb4a136d7
14 changed files with 375 additions and 81 deletions

View File

@ -23,7 +23,7 @@
const { test, expect } = require('../../../../pluginFixtures');
const { createDomainObjectWithDefaults, setStartOffset, setFixedTimeMode, setRealTimeMode } = require('../../../../appActions');
test.describe('Testing Display Layout @unstable', () => {
test.describe('Display Layout', () => {
let sineWaveObject;
test.beforeEach(async ({ page }) => {
await page.goto('./', { waitUntil: 'networkidle' });
@ -55,12 +55,12 @@ test.describe('Testing Display Layout @unstable', () => {
// On getting data, check if the value found in the Display Layout is the most recent value
// from the Sine Wave Generator
const getTelemValuePromise = await subscribeToTelemetry(page, sineWaveObject.uuid);
const formattedTelemetryValue = await getTelemValuePromise;
const formattedTelemetryValue = getTelemValuePromise;
const displayLayoutValuePromise = await page.waitForSelector(`text="${formattedTelemetryValue}"`);
const displayLayoutValue = await displayLayoutValuePromise.textContent();
const trimmedDisplayValue = displayLayoutValue.trim();
await expect(trimmedDisplayValue).toBe(formattedTelemetryValue);
expect(trimmedDisplayValue).toBe(formattedTelemetryValue);
});
test('alpha-numeric widget telemetry value exactly matches latest telemetry value received in fixed time', async ({ page }) => {
// Create a Display Layout
@ -86,12 +86,12 @@ test.describe('Testing Display Layout @unstable', () => {
// On getting data, check if the value found in the Display Layout is the most recent value
// from the Sine Wave Generator
const formattedTelemetryValue = await getTelemValuePromise;
const formattedTelemetryValue = getTelemValuePromise;
const displayLayoutValuePromise = await page.waitForSelector(`text="${formattedTelemetryValue}"`);
const displayLayoutValue = await displayLayoutValuePromise.textContent();
const trimmedDisplayValue = displayLayoutValue.trim();
await expect(trimmedDisplayValue).toBe(formattedTelemetryValue);
expect(trimmedDisplayValue).toBe(formattedTelemetryValue);
});
test('items in a display layout can be removed with object tree context menu when viewing the display layout', async ({ page }) => {
// Create a Display Layout
@ -121,11 +121,15 @@ test.describe('Testing Display Layout @unstable', () => {
// delete
expect.soft(await page.locator('.l-layout .l-layout__frame').count()).toEqual(0);
expect(await page.locator('.l-layout .l-layout__frame').count()).toEqual(0);
});
test('items in a display layout can be removed with object tree context menu when viewing another item', async ({ page }) => {
test.info().annotations.push({
type: 'issue',
description: 'https://github.com/nasa/openmct/issues/3117'
});
// Create a Display Layout
await createDomainObjectWithDefaults(page, {
const displayLayout = await createDomainObjectWithDefaults(page, {
type: 'Display Layout',
name: "Test Display Layout"
});
@ -144,18 +148,18 @@ test.describe('Testing Display Layout @unstable', () => {
// Expand the Display Layout so we can remove the sine wave generator
await page.locator('.c-tree__item.is-navigated-object .c-disclosure-triangle').click();
// Click the original Sine Wave Generator to navigate away from the Display Layout
await page.locator('.c-tree__item .c-tree__item__name:text("Test Sine Wave Generator")').click();
// Go to the original Sine Wave Generator to navigate away from the Display Layout
await page.goto(sineWaveObject.url);
// Bring up context menu and remove
await page.locator('.c-tree__item.is-alias .c-tree__item__name:text("Test Sine Wave Generator")').click({ button: 'right' });
await page.locator('text=Remove').click();
await page.locator('li[role="menuitem"]:has-text("Remove")').click();
await page.locator('button:has-text("OK")').click();
// navigate back to the display layout to confirm it has been removed
await page.locator('.c-tree__item .c-tree__item__name:text("Test Display Layout")').click();
await page.goto(displayLayout.url);
expect.soft(await page.locator('.l-layout .l-layout__frame').count()).toEqual(0);
expect(await page.locator('.l-layout .l-layout__frame').count()).toEqual(0);
});
});