openmct/e2e/tests/functional/tooltips.e2e.spec.js

/*****************************************************************************
 * 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);
  });
});