Provide renderWhenVisible to LadTableSets (#7384)

* Provide renderWhenVisible for LadTables

* fix open in new tab

* add test for open in new tab

* fix test to include renderWhenVisible

* refactor test

* fix tests

* fix tests

* having timing issues now
This commit is contained in:
Scott Bell 2024-01-19 09:47:44 +01:00 committed by GitHub
parent 01434ff2d5
commit 43ae3cf655
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 127 additions and 41 deletions

View File

@ -36,7 +36,7 @@ test.describe('Testing numeric data with inspector data visualization (i.e., dat
await page.goto('./', { waitUntil: 'domcontentloaded' });
});
test('Can click on telemetry and see data in inspector', async ({ page }) => {
test('Can click on telemetry and see data in inspector', async ({ page, context }) => {
const exampleDataVisualizationSource = await createDomainObjectWithDefaults(page, {
type: 'Example Data Visualization Source'
});
@ -67,5 +67,16 @@ test.describe('Testing numeric data with inspector data visualization (i.e., dat
page.locator('span.plot-series-name', { hasText: 'Second Sine Wave Generator Hz' })
).toBeVisible();
await expect(page.locator('.js-series-data-loaded')).toBeVisible();
// test new tab
await page.getByLabel('Inspector Views').getByLabel('More actions').click();
const pagePromise = context.waitForEvent('page');
await page.getByRole('menuitem', { name: /Open In New Tab/ }).click();
// ensure our new tab's title is correct
const newPage = await pagePromise;
await newPage.waitForLoadState();
// expect new tab title to contain 'Second Sine Wave Generator'
await expect(newPage).toHaveTitle('Second Sine Wave Generator');
});
});

View File

@ -56,9 +56,9 @@ test.describe('Testing LAD table configuration', () => {
await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
// make sure headers are visible initially
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@ -66,10 +66,10 @@ test.describe('Testing LAD table configuration', () => {
await expect(page.getByRole('cell', { name: 'SEVERE' })).toBeVisible();
// hide timestamp column
await page.getByLabel('Timestamp').uncheck();
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeHidden();
await page.getByLabel('Timestamp', { exact: true }).uncheck();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@ -78,10 +78,10 @@ test.describe('Testing LAD table configuration', () => {
// hide units & type column
await page.getByLabel('Units').uncheck();
await page.getByLabel('Type').uncheck();
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeHidden();
await page.getByLabel('Type', { exact: true }).uncheck();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Type' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@ -90,9 +90,9 @@ test.describe('Testing LAD table configuration', () => {
// hide WATCH column
await page.getByLabel('WATCH').uncheck();
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Type' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@ -103,9 +103,9 @@ test.describe('Testing LAD table configuration', () => {
await page.locator('button[title="Save"]').click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
await page.reload();
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Type' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@ -117,10 +117,10 @@ test.describe('Testing LAD table configuration', () => {
await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
// show timestamp column
await page.getByLabel('Timestamp').check();
await page.getByLabel('Timestamp', { exact: true }).check();
await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Type' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@ -132,8 +132,8 @@ test.describe('Testing LAD table configuration', () => {
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
await page.reload();
await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Type' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeHidden();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@ -146,11 +146,11 @@ test.describe('Testing LAD table configuration', () => {
// show units, type, and WATCH columns
await page.getByLabel('Units').check();
await page.getByLabel('Type').check();
await page.getByLabel('Type', { exact: true }).check();
await page.getByLabel('WATCH').check();
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@ -161,9 +161,9 @@ test.describe('Testing LAD table configuration', () => {
await page.locator('button[title="Save"]').click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
await page.reload();
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@ -185,9 +185,9 @@ test.describe('Testing LAD table configuration', () => {
await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
// make sure Sine Wave headers are visible initially too
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Units' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'DISTRESS' })).toBeVisible();
@ -206,8 +206,8 @@ test.describe('Testing LAD table configuration', () => {
// Ensure Units & Limit columns are gone
// as Event Generator don't have them
await page.goto(ladTable.url);
await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type' })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Timestamp', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Type', exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'Units' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'WATCH' })).toBeHidden();
await expect(page.getByRole('cell', { name: 'WARNING' })).toBeHidden();

View File

@ -0,0 +1,66 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2024, 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 { createDomainObjectWithDefaults } from '../../../../appActions.js';
import { expect, test } from '../../../../pluginFixtures.js';
test.describe('LAD Table Sets', () => {
test('Ensure we have numbers in cells', async ({ page }) => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
const ladTableSet = await createDomainObjectWithDefaults(page, {
type: 'LAD Table Set'
});
const firstLadTable = await createDomainObjectWithDefaults(page, {
type: 'LAD Table',
parent: ladTableSet.uuid
});
await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
parent: firstLadTable.uuid
});
const secondLadTable = await createDomainObjectWithDefaults(page, {
type: 'LAD Table',
parent: ladTableSet.uuid
});
await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
parent: secondLadTable.uuid
});
await page.goto(ladTableSet.url);
const valueFromFirstSineWave = await page.getByLabel('lad value').first().innerText();
const firstSineWaveNumber = parseFloat(valueFromFirstSineWave);
// ensure we have a float value in the cell and it's finite
expect(Number.isFinite(firstSineWaveNumber)).toBeTruthy();
const valueFromSecondSineWave = await page.getByLabel('lad value').last().innerText();
const secondSineWaveNumber = parseFloat(valueFromSecondSineWave);
// ensure we have a float value in the cell and it's finite
expect(Number.isFinite(secondSineWaveNumber)).toBeTruthy();
});
});

View File

@ -34,7 +34,7 @@ export default class LadTableSetView {
this.component = null;
}
show(element) {
show(element, isEditing, { renderWhenVisible }) {
let ladTableConfiguration = new LADTableConfiguration(this.domainObject, this.openmct);
const { vNode, destroy } = mount(
@ -47,7 +47,8 @@ export default class LadTableSetView {
openmct: this.openmct,
objectPath: this.objectPath,
currentView: this,
ladTableConfiguration
ladTableConfiguration,
renderWhenVisible
},
data: () => {
return {

View File

@ -35,13 +35,20 @@
>
{{ domainObject.name }}
</td>
<td v-if="showTimestamp" class="js-second-data">{{ formattedTimestamp }}</td>
<td class="js-third-data" :class="valueClasses">{{ value }}</td>
<td v-if="showTimestamp" aria-label="lad timestamp" class="js-second-data">
{{ formattedTimestamp }}
</td>
<td aria-label="lad value" class="js-third-data" :class="valueClasses">{{ value }}</td>
<td v-if="hasUnits" class="js-units">
{{ unit }}
</td>
<td v-if="showType" class="js-type-data">{{ typeLabel }}</td>
<td v-for="limit in formattedLimitValues" :key="limit.key" class="js-limit-data">
<td v-if="showType" aria-label="lad type" class="js-type-data">{{ typeLabel }}</td>
<td
v-for="limit in formattedLimitValues"
:key="limit.key"
aria-label="lad limit value"
class="js-limit-data"
>
{{ limit.value }}
</td>
</tr>

View File

@ -143,6 +143,9 @@ export default {
ladTable.domainObject = domainObject;
ladTable.key = this.openmct.objects.makeKeyString(domainObject.identifier);
if (!this.ladTelemetryObjects) {
this.ladTelemetryObjects = {};
}
this.ladTelemetryObjects[ladTable.key] = [];
this.ladTableObjects.push(ladTable);

View File

@ -423,7 +423,7 @@ describe('The LAD Table Set', () => {
(viewProvider) => viewProvider.key === ladTableSetKey
);
ladTableSetView = ladTableSetViewProvider.view(mockObj.ladTableSet, [mockObj.ladTableSet]);
ladTableSetView.show(child);
ladTableSetView.show(child, false, { renderWhenVisible });
return nextTick();
});

View File

@ -93,13 +93,11 @@ export default {
this.showMenu = !this.showMenu;
},
async getTelemetryPath() {
let sourceTelem;
if (this.telemetryObject.type === 'yamcs.telemetry') {
sourceTelem = this.openmct.objects.makeKeyString(this.telemetryObject.identifier);
} else if (this.telemetryObject.type === 'yamcs.image') {
sourceTelem = this.openmct.objects.makeKeyString(this.telemetryObject.identifier);
}
const telemetryPath = await this.openmct.objects.getOriginalPath(sourceTelem);
const telemetryObjectKeyString = this.openmct.objects.makeKeyString(
this.telemetryObject.identifier
);
const telemetryPath = await this.openmct.objects.getOriginalPath(telemetryObjectKeyString);
return telemetryPath;
},
async openInNewTab() {