mirror of
https://github.com/nasa/openmct.git
synced 2025-04-09 20:31:26 +00:00
Unpause telemetry table on user bounds change (#5186)
* Unpause telemetry table on user bounds change (#5113) * Add tests for table pause and unpause (#5113) * Add test (#5113) - Add test for scenario where table is paused by button but unpaused by user bounds change * Add test (#5113) - Add test for table does not unpause on a bounds change caused by a tick * Add e2e test (#5113) - Add test for scenario where table is paused by button but unpaused by user bounds change * Add test (#5113) - Correctly simulate clock tick - Exclude datum with new bounds and ensure the correct tableRow count * Remove 'wait for save banner' logic from e2e test * Use augmented `test` object in e2e test - Imports `test` object from `fixtures.js` * e2e: Add workarounds for chromium issue * Refactor per code review comments - Simplify `userBoundsChanged()` logic, get rid of duplicate code * Just get rid of the unnecessary method * Respond to code review comments - `destroyed()` --> `beforeDestroy()` - Rename `unpausedByButton` parameter to include user bounds change condition - Remove unused parameter
This commit is contained in:
Jesse Mazzella
GitHub
parent
8d761f729b
commit
dfb726b924
101
e2e/tests/plugins/telemetryTable/telemetryTable.e2e.spec.js
Normal file
101
e2e/tests/plugins/telemetryTable/telemetryTable.e2e.spec.js
Normal file
@ -0,0 +1,101 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
|
||||
const { test } = require('../../../fixtures');
|
||||
const { expect } = require('@playwright/test');
|
||||
|
||||
test.describe('Telemetry Table', () => {
|
||||
test('unpauses when paused by button and user changes bounds', async ({ page }) => {
|
||||
test.info().annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/nasa/openmct/issues/5113'
|
||||
});
|
||||
|
||||
const bannerMessage = '.c-message-banner__message';
|
||||
const createButton = 'button:has-text("Create")';
|
||||
|
||||
await page.goto('/', { waitUntil: 'networkidle' });
|
||||
|
||||
// Click create button
|
||||
await page.locator(createButton).click();
|
||||
await page.locator('li:has-text("Telemetry Table")').click();
|
||||
|
||||
// Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
|
||||
await page.click('form[name="mctForm"] a:has-text("My Items")');
|
||||
|
||||
await Promise.all([
|
||||
page.waitForNavigation(),
|
||||
page.locator('text=OK').click(),
|
||||
// Wait for Save Banner to appear
|
||||
page.waitForSelector(bannerMessage)
|
||||
]);
|
||||
|
||||
// Save (exit edit mode)
|
||||
await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(3).click();
|
||||
await page.locator('text=Save and Finish Editing').click();
|
||||
|
||||
// Click create button
|
||||
await page.locator(createButton).click();
|
||||
|
||||
// add Sine Wave Generator with defaults
|
||||
await page.locator('li:has-text("Sine Wave Generator")').click();
|
||||
|
||||
// Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
|
||||
await page.click('form[name="mctForm"] a:has-text("My Items")');
|
||||
|
||||
await Promise.all([
|
||||
page.waitForNavigation(),
|
||||
page.locator('text=OK').click(),
|
||||
// Wait for Save Banner to appear
|
||||
page.waitForSelector(bannerMessage)
|
||||
]);
|
||||
|
||||
// focus the Telemetry Table
|
||||
await page.locator('text=Open MCT My Items >> span').nth(3).click();
|
||||
await Promise.all([
|
||||
page.waitForNavigation(),
|
||||
page.locator('text=Unnamed Telemetry Table').first().click()
|
||||
]);
|
||||
|
||||
// Click pause button
|
||||
const pauseButton = await page.locator('button.c-button.icon-pause');
|
||||
await pauseButton.click();
|
||||
|
||||
const tableWrapper = await page.locator('div.c-table-wrapper');
|
||||
await expect(tableWrapper).toHaveClass(/is-paused/);
|
||||
|
||||
// Arbitrarily change end date to some time in the future
|
||||
const endTimeInput = page.locator('input[type="text"].c-input--datetime').nth(1);
|
||||
await endTimeInput.click();
|
||||
|
||||
let endDate = await endTimeInput.inputValue();
|
||||
endDate = new Date(endDate);
|
||||
endDate.setUTCDate(endDate.getUTCDate() + 1);
|
||||
endDate = endDate.toISOString().replace(/T.*/, '');
|
||||
|
||||
await endTimeInput.fill('');
|
||||
await endTimeInput.fill(endDate);
|
||||
await page.keyboard.press('Enter');
|
||||
|
||||
await expect(tableWrapper).not.toHaveClass(/is-paused/);
|
||||
});
|
||||
});
|
||||
@ -499,6 +499,8 @@ export default {
|
||||
this.table.tableRows.on('sort', this.updateVisibleRows);
|
||||
this.table.tableRows.on('filter', this.updateVisibleRows);
|
||||
|
||||
this.openmct.time.on('bounds', this.boundsChanged);
|
||||
|
||||
//Default sort
|
||||
this.sortOptions = this.table.tableRows.sortBy();
|
||||
this.scrollable = this.$el.querySelector('.js-telemetry-table__body-w');
|
||||
@ -513,7 +515,7 @@ export default {
|
||||
|
||||
this.table.initialize();
|
||||
},
|
||||
destroyed() {
|
||||
beforeDestroy() {
|
||||
this.table.off('object-added', this.addObject);
|
||||
this.table.off('object-removed', this.removeObject);
|
||||
this.table.off('historical-rows-processed', this.checkForMarkedRows);
|
||||
@ -527,6 +529,8 @@ export default {
|
||||
|
||||
this.table.configuration.off('change', this.updateConfiguration);
|
||||
|
||||
this.openmct.time.off('bounds', this.boundsChanged);
|
||||
|
||||
clearInterval(this.resizePollHandle);
|
||||
|
||||
this.table.configuration.destroy();
|
||||
@ -823,16 +827,16 @@ export default {
|
||||
this.visibleRows = [];
|
||||
this.$nextTick().then(this.updateVisibleRows);
|
||||
},
|
||||
pause(pausedByButton) {
|
||||
if (pausedByButton) {
|
||||
pause(byButton) {
|
||||
if (byButton) {
|
||||
this.pausedByButton = true;
|
||||
}
|
||||
|
||||
this.paused = true;
|
||||
this.table.pause();
|
||||
},
|
||||
unpause(unpausedByButton) {
|
||||
if (unpausedByButton) {
|
||||
unpause(byButtonOrUserBoundsChange) {
|
||||
if (byButtonOrUserBoundsChange) {
|
||||
this.undoMarkedRows();
|
||||
this.table.unpause();
|
||||
this.paused = false;
|
||||
@ -847,6 +851,16 @@ export default {
|
||||
|
||||
this.isShowingMarkedRowsOnly = false;
|
||||
},
|
||||
boundsChanged(_bounds, isTick) {
|
||||
if (isTick) {
|
||||
return;
|
||||
}
|
||||
|
||||
// User bounds change.
|
||||
if (this.paused) {
|
||||
this.unpause(true);
|
||||
}
|
||||
},
|
||||
togglePauseByButton() {
|
||||
if (this.paused) {
|
||||
this.unpause(true);
|
||||
@ -854,7 +868,7 @@ export default {
|
||||
this.pause(true);
|
||||
}
|
||||
},
|
||||
undoMarkedRows(unpause) {
|
||||
undoMarkedRows() {
|
||||
this.markedRows.forEach(r => r.marked = false);
|
||||
this.markedRows = [];
|
||||
},
|
||||
|
||||
@ -133,6 +133,7 @@ describe("the plugin", () => {
|
||||
let tableViewProvider;
|
||||
let tableView;
|
||||
let tableInstance;
|
||||
let mockClock;
|
||||
|
||||
beforeEach(() => {
|
||||
openmct.time.timeSystem('utc', {
|
||||
@ -140,6 +141,20 @@ describe("the plugin", () => {
|
||||
end: 4
|
||||
});
|
||||
|
||||
mockClock = jasmine.createSpyObj("clock", [
|
||||
"on",
|
||||
"off",
|
||||
"currentValue"
|
||||
]);
|
||||
mockClock.key = 'mockClock';
|
||||
mockClock.currentValue.and.returnValue(1);
|
||||
|
||||
openmct.time.addClock(mockClock);
|
||||
openmct.time.clock('mockClock', {
|
||||
start: 0,
|
||||
end: 4
|
||||
});
|
||||
|
||||
testTelemetryObject = {
|
||||
identifier: {
|
||||
namespace: "",
|
||||
@ -360,5 +375,115 @@ describe("the plugin", () => {
|
||||
tableRowCells = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr:first-child td');
|
||||
expect(tableRowCells.length).toEqual(4);
|
||||
});
|
||||
|
||||
it("Pauses the table when a row is marked", async () => {
|
||||
let firstRow = element.querySelector('table.c-telemetry-table__body > tbody > tr');
|
||||
let clickEvent = createMouseEvent('click');
|
||||
|
||||
// Mark a row
|
||||
firstRow.dispatchEvent(clickEvent);
|
||||
|
||||
await Vue.nextTick();
|
||||
|
||||
// Verify table is paused
|
||||
expect(element.querySelector('div.c-table.is-paused')).not.toBeNull();
|
||||
});
|
||||
|
||||
it("Unpauses the table on user bounds change", async () => {
|
||||
let firstRow = element.querySelector('table.c-telemetry-table__body > tbody > tr');
|
||||
let clickEvent = createMouseEvent('click');
|
||||
|
||||
// Mark a row
|
||||
firstRow.dispatchEvent(clickEvent);
|
||||
|
||||
await Vue.nextTick();
|
||||
|
||||
// Verify table is paused
|
||||
expect(element.querySelector('div.c-table.is-paused')).not.toBeNull();
|
||||
|
||||
const currentBounds = openmct.time.bounds();
|
||||
|
||||
const newBounds = {
|
||||
start: currentBounds.start,
|
||||
end: currentBounds.end - 3
|
||||
};
|
||||
|
||||
// Manually change the time bounds
|
||||
openmct.time.bounds(newBounds);
|
||||
|
||||
await Vue.nextTick();
|
||||
|
||||
// Verify table is no longer paused
|
||||
expect(element.querySelector('div.c-table.is-paused')).toBeNull();
|
||||
|
||||
await Vue.nextTick();
|
||||
|
||||
// Verify table displays the correct number of rows within the new bounds
|
||||
const tableRows = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr');
|
||||
expect(tableRows.length).toEqual(2);
|
||||
});
|
||||
|
||||
it("Unpauses the table on user bounds change if paused by button", async () => {
|
||||
const viewContext = tableView.getViewContext();
|
||||
|
||||
// Pause by button
|
||||
viewContext.togglePauseByButton();
|
||||
|
||||
await Vue.nextTick();
|
||||
|
||||
// Verify table is paused
|
||||
expect(element.querySelector('div.c-table.is-paused')).not.toBeNull();
|
||||
|
||||
const currentBounds = openmct.time.bounds();
|
||||
|
||||
const newBounds = {
|
||||
start: currentBounds.start,
|
||||
end: currentBounds.end - 3
|
||||
};
|
||||
|
||||
// Manually change the time bounds
|
||||
openmct.time.bounds(newBounds);
|
||||
|
||||
await Vue.nextTick();
|
||||
|
||||
// Verify table is no longer paused
|
||||
expect(element.querySelector('div.c-table.is-paused')).toBeNull();
|
||||
|
||||
await Vue.nextTick();
|
||||
|
||||
// Verify table displays the correct number of rows within the new bounds
|
||||
const tableRows = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr');
|
||||
expect(tableRows.length).toEqual(2);
|
||||
});
|
||||
|
||||
it("Does not unpause the table on tick", async () => {
|
||||
const viewContext = tableView.getViewContext();
|
||||
|
||||
// Pause by button
|
||||
viewContext.togglePauseByButton();
|
||||
|
||||
await Vue.nextTick();
|
||||
|
||||
// Verify table displays the correct number of rows
|
||||
let tableRows = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr');
|
||||
expect(tableRows.length).toEqual(3);
|
||||
|
||||
// Verify table is paused
|
||||
expect(element.querySelector('div.c-table.is-paused')).not.toBeNull();
|
||||
|
||||
// Tick the clock
|
||||
openmct.time.tick(1);
|
||||
|
||||
await Vue.nextTick();
|
||||
|
||||
// Verify table is still paused
|
||||
expect(element.querySelector('div.c-table.is-paused')).not.toBeNull();
|
||||
|
||||
await Vue.nextTick();
|
||||
|
||||
// Verify table displays the correct number of rows
|
||||
tableRows = element.querySelectorAll('table.c-telemetry-table__body > tbody > tr');
|
||||
expect(tableRows.length).toEqual(3);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user