openmct/e2e/tests/functional/tooltips.e2e.spec.js
John Hill 0413e77d8a
test(e2e): Major refactor and stabilization of e2e tests (#7581)
* fix: update broken locator

* update eslint package

* first pass of lint fixes

* update package

* change ruleset

* update component tests to match linting rules

* driveby

* start to factor out bad locators

* update gauge component

* update notebook snapshot drop area

* Update plot aria

* add draggable true to tree items

* update package

* driveby to remove dead code

* unneeded

* unneeded

* tells a screenreader that this is a row and a cell

* adds an id for dragondrops

* this should be a button

* first pass at fixing tooltip selectors

* review comments

* Updating more tests

* update to remove expect expect given our use of check functions

* add expand component

* move role around

* update more locators

* force

* new local storage

* remove choochoo steps

* test: do `lint:fix` and also add back accidentally removed code

* test: add back more removed code

* test: remove `unstable` annotation from tests which are not unstable

* test: remove invalid test-- the "new" time conductor doesn't allow for millisecond changes in fixed time

* test: fix unstable gauge test

* test: remove useless asserts-- this was secretly non-functional. now that we've fixed it, it makes no sense and just fails

* test: add back accidentally removed changes

* test: revert changes that break test

* test: more fixes

* Remove all notion of the unstable/stable e2e tests

* test: eviscerate the flake with FACTS and LOGIC

* test: fix anotha one

* lint fixes

* test: no need to wait for save dialog

* test: fix more tests

* lint: fix more warnings

* test: fix anotha one

* test: use `toHaveLength` instead of `.length).toBe()`

* test: stabilize tabs view example imagery test

* fix: more tests be fixed

* test: more `toHaveCount()`s please

* test: revert more accidentally removed fixes

* test: fix selector

* test: fix anotha one

* update lint rules to clean up bad locators in shared fixtures

* update and remove bad appActions

* test: fix some restricted notebook tests

* test: mass find/replace to enforce `toHaveCount()` instead of `.count()).toBe()`

* Remove some bad appActions and update text

* test: fix da tree tests

* test: await not await await

* test: fix upload plan appAction and add a11y

* Updating externalFixtures with best practice locators and add missing appAction framework tests

* test: fix test

* test: fix appAction test for plans

* test: yum yum fix'em up and get rid of some dragon drops

* fix: alas, a `.only()` got my hopes up that i was done fixing tests

* test: add `setTimeConductorMode` test "suite" which covers most TC related appActions

* test: fix arg

* test(couchdb): fix some network tests via expect polling

* Stabalize visual test

* getCanasPixels

* test: stabilize tooltip telemetry table test, better a11y for tooltips

* chore: update to use `docker compose` instead of `docker-compose`

* New rules, new tests, new me

* fix sort order

* test: add `waitForPlotsToRender` framework test, passthru timeout override

* test: remove `clockOptions` test as we have `page.clock` now

* test: refactor out `overrideClock`

* test: use `clock.install` instead

* test: use `clock.install` instead

* time clock fix

* test: fix timer tests

* remove ever reference to old base fixture

* test: stabilize restricted notebook test

* lint fixes

* test: use clock.install

* update timelist

* test: update visual tests to use `page.clock()`, update snapshots

* test: stabilize tree renaming/reordering test

* a11y: add aria-label and role=region to object view

* refactor: use `dragTo`

* refactor: use `dragTo`, other small fixes

* test: use `page.clock()` to stabilize tooltip telemetry table test

* test: use web-first assertion to stabilize staleness test

* test: knock out a few more `page.click`s

* test: destroy all `page.click()`s

* refactor: consistently use `'Ok'` instead of `'OK'` and `'Ok'` mixed

* test: remove gauge aria label

* test: more test fixes

* test: more fixes and refactors

* docs: add comment

* test: refactor all instances of `dragAndDrop`

* test: remove redundant test (covered in previous test steps)

* test: stabilize imagery operations tests for display layout

* chore: remove bad unicorn rule

* chore(lint): remove unused disable directives

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
2024-08-07 21:36:14 +00:00

471 lines
19 KiB
JavaScript

/*****************************************************************************
* 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.
*****************************************************************************/
/*
This suite is dedicated to tests which verify that tooltips are displayed correctly.
*/
import { createDomainObjectWithDefaults, expandEntireTree } from '../../appActions.js';
import { MISSION_TIME } from '../../constants.js';
import { expect, test } from '../../pluginFixtures.js';
test.describe('Verify tooltips', () => {
let folder1;
let folder2;
let folder3;
let sineWaveObject1;
let sineWaveObject2;
let sineWaveObject3;
const swg1Path = 'My Items / Folder Foo / SWG 1';
const swg2Path = 'My Items / Folder Foo / Folder Bar / SWG 2';
const swg3Path = 'My Items / Folder Foo / Folder Bar / Folder Baz / SWG 3';
test.beforeEach(async ({ page }) => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
folder1 = await createDomainObjectWithDefaults(page, {
type: 'Folder',
name: 'Folder Foo'
});
folder2 = await createDomainObjectWithDefaults(page, {
type: 'Folder',
name: 'Folder Bar',
parent: folder1.uuid
});
folder3 = await createDomainObjectWithDefaults(page, {
type: 'Folder',
name: 'Folder Baz',
parent: folder2.uuid
});
// Create Sine Wave Generator
sineWaveObject1 = await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
name: 'SWG 1',
parent: folder1.uuid
});
sineWaveObject1.path = swg1Path;
sineWaveObject2 = await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
name: 'SWG 2',
parent: folder2.uuid
});
sineWaveObject2.path = swg2Path;
sineWaveObject3 = await createDomainObjectWithDefaults(page, {
type: 'Sine Wave Generator',
name: 'SWG 3',
parent: folder3.uuid
});
sineWaveObject3.path = swg3Path;
// Expand all folders
await expandEntireTree(page);
});
test('display correct paths for LAD tables', async ({ page }) => {
// Create LAD table
await createDomainObjectWithDefaults(page, {
type: 'LAD Table',
name: 'Test LAD Table'
});
// Edit LAD table
await page.getByLabel('Edit Object').click();
// Add the Sine Wave Generator to the LAD table and save changes.
//TODO Follow up with https://github.com/nasa/openmct/issues/7773
await page.getByLabel(`Preview ${sineWaveObject1.name}`).dragTo(page.getByLabel('Object View'));
await page.getByLabel(`Preview ${sineWaveObject2.name}`).dragTo(page.getByLabel('Object View'));
await page.getByLabel(`Preview ${sineWaveObject3.name}`).dragTo(page.getByLabel('Object View'));
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
await page.keyboard.down('Control');
//Hover on something else
await page.getByRole('button', { name: 'Create' }).hover();
//Hover over the first
await page.getByLabel('lad name').getByText(sineWaveObject1.name).hover();
await expect(page.getByRole('tooltip', { name: sineWaveObject1.path })).toBeVisible();
//Hover on something else
await page.getByRole('button', { name: 'Create' }).hover();
//Hover over second object
await page.getByLabel('lad name').getByText(sineWaveObject2.name).hover();
await expect(page.getByRole('tooltip', { name: sineWaveObject2.path })).toBeVisible();
//Hover on something else
await page.getByRole('button', { name: 'Create' }).hover();
//Hover over third object
await page.getByLabel('lad name').getByText(sineWaveObject3.name).hover();
await expect(page.getByRole('tooltip', { name: sineWaveObject3.path })).toBeVisible();
});
test('display correct paths for expanded and collapsed plot legend items', async ({ page }) => {
// Create Overlay Plot
await createDomainObjectWithDefaults(page, {
type: 'Overlay Plot',
name: 'Test Overlay Plots'
});
// Edit Overlay Plot
await page.getByLabel('Edit Object').click();
// Add the Sine Wave Generators to the and save changes
await page
.getByLabel('Preview SWG 1 generator Object')
.dragTo(page.getByLabel('Plot Container Style Target'));
await page
.getByLabel('Preview SWG 2 generator Object')
.dragTo(page.getByLabel('Plot Container Style Target'));
await page
.getByLabel('Preview SWG 3 generator Object')
.dragTo(page.getByLabel('Plot Container Style Target'));
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
//Hover over Collapsed Plot Legend Components with the Control Key pressed
await page.keyboard.down('Control');
//Hover over first object
await page.getByText('SWG 1 Hz').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject1.path);
//Hover over another object to clear
await page.getByRole('button', { name: 'create' }).hover();
//Hover over second object
await page.getByText('SWG 2 Hz').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject2.path);
//Hover over another object to clear
await page.getByRole('button', { name: 'create' }).hover();
//Hover over third object
await page.getByText('SWG 3 Hz').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
//Release the Control Key
await page.keyboard.up('Control');
//Expand the legend
await page.locator('.gl-plot-legend__view-control.c-disclosure-triangle').click();
//Hover over Expanded Plot Legend Components with the Control Key pressed
await page.keyboard.down('Control');
await page.getByLabel('Plot Legend Expanded').getByText('SWG 1').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject1.path);
//Hover over another object to clear
await page.getByRole('button', { name: 'create' }).hover();
//Hover over second object
await page.getByLabel('Plot Legend Expanded').getByText('SWG 2').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject2.path);
//Hover over another object to clear
await page.getByRole('button', { name: 'create' }).hover();
//Hover over third object
await page.getByLabel('Plot Legend Expanded').getByText('SWG 3').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
});
test('display correct paths when hovering over object labels', async ({ page }) => {
//Navigate to SWG 1 in Tree
await page.getByLabel('Navigate to SWG 1 generator').click();
//Expect tooltip to be the path of SWG 1
await page.keyboard.down('Control');
await page.getByRole('main').getByText('SWG 1', { exact: true }).hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject1.path);
await page.keyboard.up('Control');
//Navigate to SWG 3 in Tree
await page.getByLabel('Navigate to SWG 3 generator').click();
//Expect tooltip to be the path of SWG 3
await page.keyboard.down('Control');
await page.getByRole('main').getByText('SWG 3', { exact: true }).hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
});
test('display correct paths when hovering over display layout pane headers', async ({ page }) => {
// Create Overlay Plot
await createDomainObjectWithDefaults(page, {
type: 'Overlay Plot',
name: 'Test Overlay Plot'
});
// Edit Overlay Plot
await page.getByLabel('Edit Object').click();
await page
.getByLabel('Preview SWG 1 generator Object')
.dragTo(page.getByLabel('Plot Container Style Target'));
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
// Create Stacked Plot
await createDomainObjectWithDefaults(page, {
type: 'Stacked Plot',
name: 'Test Stacked Plot'
});
// Edit Stacked Plot
await page.getByLabel('Edit Object').click();
await page.getByLabel(`Preview ${sineWaveObject2.name}`).dragTo(page.getByLabel('Object View'));
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
// Create Display Layout
await createDomainObjectWithDefaults(page, {
type: 'Display Layout',
name: 'Test Display Layout'
});
// Edit Display Layout
await page.getByLabel('Edit Object').click();
await page
.getByLabel('Preview Test Overlay Plot')
.dragTo(page.locator('#display-layout-drop-area'), {
targetPosition: { x: 0, y: 0 }
});
//Add Display Layout below Overlay Plot
await page
.getByLabel('Preview Test Stacked Plot')
.dragTo(page.locator('#display-layout-drop-area'), {
targetPosition: { x: 0, y: 250 }
});
//Drag the SWG3 Object to the Display off to the right
await page
.getByLabel('Preview SWG 3 generator Object')
.dragTo(page.locator('#display-layout-drop-area'), {
targetPosition: { x: 500, y: 200 }
});
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
//Hover over Overlay Plot with the Control Key pressed
await page.keyboard.down('Control');
//Hover Overlay Plot
await page.getByTitle('Test Overlay Plot').hover();
await expect(page.getByRole('tooltip')).toHaveText('My Items / Test Overlay Plot');
await page.keyboard.up('Control');
//Expand the Overlay Plot Legend and hover over the first legend item
await page.getByLabel('Expand Test Overlay Plot Legend').click();
await page.keyboard.down('Control');
await page.getByLabel('Plot Legend Item for Test').getByText('SWG').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject1.path);
//Hover over Stacked Plot Title
await page.getByTitle('Test Stacked Plot').hover();
await expect(page.getByRole('tooltip')).toHaveText('My Items / Test Stacked Plot');
//Hover over SWG3 Object
await page.getByLabel('Alpha-numeric telemetry name for SWG').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
});
test('display correct paths when hovering over flexible object labels', async ({ page }) => {
//Create Flexible Layout
await createDomainObjectWithDefaults(page, {
type: 'Flexible Layout',
name: 'Test Flexible Layout'
});
//Add SWG1 and SWG3 to Flexible Layout
await page.getByLabel('Navigate to SWG 1 generator').dragTo(page.getByRole('row').nth(0));
await page
.getByLabel('Preview SWG 3 generator Object')
.dragTo(page.getByLabel('Container Handle 2'));
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
//Hover over SWG1 Object
await page.keyboard.down('Control');
await page.getByTitle('SWG 1').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject1.path);
//Hover over SWG3 Object
await page.getByTitle('SWG 3').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
});
test('display correct paths when hovering over tab view labels', async ({ page }) => {
await createDomainObjectWithDefaults(page, {
type: 'Tabs View',
name: 'Test Tabs View'
});
//Add SWG1 and SWG3 to Flexible Layout
await page
.getByLabel('Navigate to SWG 1 generator')
.dragTo(page.getByText('Drag objects here to add them'));
await page.getByLabel('Preview SWG 3 generator Object').dragTo(page.getByLabel('SWG 1 tab'));
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
await page.keyboard.down('Control');
await page.getByLabel('SWG 1 tab').getByText('SWG').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject1.path);
await page.getByLabel('SWG 3 tab').getByText('SWG').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
});
test('display correct paths when hovering tree items', async ({ page }) => {
await page.keyboard.down('Control');
await page.getByText('SWG 1').first().hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject1.path);
await page.getByText('SWG 3').first().hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
});
test('display correct paths when hovering search items', async ({ page }) => {
await page.getByRole('searchbox', { name: 'Search Input' }).click();
await page.getByRole('searchbox', { name: 'Search Input' }).fill('SWG 3');
await page.keyboard.down('Control');
await page.getByLabel('Object Results').getByText('SWG').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
});
test('display path for source telemetry when hovering over gauge', async ({ page }) => {
await createDomainObjectWithDefaults(page, {
type: 'Gauge',
name: 'Test Gauge'
});
await page.getByLabel('Navigate to SWG 3 generator').dragTo(page.getByRole('meter'));
await page.keyboard.down('Control');
// FIXME: We shouldn't need a `force: true` here, but the parent
// element blocks
// eslint-disable-next-line playwright/no-force-option
await page.getByRole('meter').hover({ position: { x: 0, y: 0 }, force: true });
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
});
test('display tooltip path for notebook embeds', async ({ page }) => {
await createDomainObjectWithDefaults(page, {
type: 'Notebook',
name: 'Test Notebook'
});
await page
.getByLabel('Navigate to SWG 3 generator')
.dragTo(page.getByLabel('To start a new entry, click'));
await page.keyboard.down('Control');
await page.getByLabel('SWG 3 Notebook Embed').hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
});
test('display tooltip path for telemetry table names @clock', async ({ page }) => {
await page.clock.install({ time: MISSION_TIME });
await page.clock.resume();
await createDomainObjectWithDefaults(page, {
type: 'Telemetry Table',
name: 'Test Telemetry Table'
});
await page
.getByLabel(`Navigate to ${sineWaveObject1.name}`)
.dragTo(page.getByLabel('Object View'));
await page.getByLabel(`Preview ${sineWaveObject3.name}`).dragTo(page.getByLabel('Object View'));
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
// Confirm that telemetry rows exist for SWG 1 and 3 and are in view
await expect(page.getByLabel('name table cell SWG 1').first()).toBeInViewport();
await expect(page.getByLabel('name table cell SWG 3').first()).toBeInViewport();
// Pause to prevent more telemetry from streaming in
await page.clock.pauseAt(MISSION_TIME + 30 * 1000);
// Run for 30 seconds to allow SOME telemetry to stream in
await page.clock.runFor(30 * 1000);
await page.keyboard.down('Control');
// Hover over SWG3 in Telemetry Table
await page.getByLabel('name table cell SWG 3').first().hover();
await expect(page.getByRole('tooltip', { name: sineWaveObject3.path })).toBeVisible();
// Release Control Key
await page.keyboard.up('Control');
// Hover somewhere else so the tooltip goes away
await page.getByLabel('Navigate to Test Telemetry Table').hover();
await expect(page.getByRole('tooltip')).toBeHidden();
await page.keyboard.down('Control');
// Hover over SWG1 in Telemetry Table
await page.getByLabel('name table cell SWG 1').first().hover();
await expect(page.getByRole('tooltip', { name: sineWaveObject1.path })).toBeVisible();
});
test('display tooltip path for recently viewed items', async ({ page }) => {
// drag up Recently Viewed pane
await page.getByLabel('Resize Recently Viewed Pane').hover();
await page.mouse.down();
await page.mouse.move(0, 300);
await page.mouse.up();
await page.keyboard.down('Control');
await page.getByLabel('Recent Objects').getByText(sineWaveObject3.name).hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
await page.getByLabel('Recent Objects').getByText(sineWaveObject2.name).hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject2.path);
await page.getByLabel('Recent Objects').getByText(sineWaveObject1.name).hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject1.path);
});
test('display tooltip path for time strips', async ({ page }) => {
// Create Time Strip
await createDomainObjectWithDefaults(page, {
type: 'Time Strip',
name: 'Test Time Strip'
});
// Edit Overlay Plot
await page.getByLabel('Edit Object').click();
await page
.getByLabel(`Preview ${sineWaveObject1.name}`)
.dragTo(page.getByLabel('Test Time Strip Object View'));
await page
.getByLabel(`Preview ${sineWaveObject2.name}`)
.dragTo(page.getByLabel('Test Time Strip Object View'));
await page
.getByLabel(`Preview ${sineWaveObject3.name}`)
.dragTo(page.getByLabel('Test Time Strip Object View'));
await page.getByRole('button', { name: 'Save' }).click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
await page.keyboard.down('Control');
await page.getByText(sineWaveObject1.name).nth(2).hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject1.path);
await page.getByText(sineWaveObject2.name).nth(2).hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject2.path);
await page.getByText(sineWaveObject3.name).nth(2).hover();
await expect(page.getByRole('tooltip')).toHaveText(sineWaveObject3.path);
});
});