Only show marquee for selected item (#7180)

* only show marquee for selected item

* Revert "only show marquee for selected item"

This reverts commit d17af21.

* revert change made in #6767

* create framework for displayLayout visual test

* WIP create display layout for test

* only show marquee for selected

* fix selection of object in nested layout

* fix grid and code cleanup

* add child layouts side by side

* code cleanup

* externalize setup for reuse in multiple tests

* write marquee and grid tests

* fix object in layout locator

* fix nested layout selector

* add aria label to layouts

* fix layout locator

* add jsdoc for test setup function

* make test more efficient

* cleanup and linting

* update locator

* update locators

---------

Co-authored-by: John Hill <john.c.hill@nasa.gov>

e2e/appActions.js

@@ -81,7 +81,7 @@ async function createDomainObjectWithDefaults(
   await page.goto(`${parentUrl}`);
 
   //Click the Create button
-  await page.click('button:has-text("Create")');
+  await page.getByRole('button', { name: 'Create' }).click();
 
   // Click the object specified by 'type'
   await page.click(`li[role='menuitem']:text("${type}")`);
@@ -108,7 +108,7 @@ async function createDomainObjectWithDefaults(
   // Click OK button and wait for Navigate event
   await Promise.all([
     page.waitForLoadState(),
-    page.click('[aria-label="Save"]'),
+    await page.getByRole('button', { name: 'Save' }).click(),
     // Wait for Save Banner to appear
     page.waitForSelector('.c-message-banner__message')
   ]);
@@ -120,8 +120,8 @@ async function createDomainObjectWithDefaults(
 
   if (await _isInEditMode(page, uuid)) {
     // Save (exit edit mode)
-    await page.locator('button[title="Save"]').click();
-    await page.locator('li[title="Save and Finish Editing"]').click();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
   }
 
   return {
@@ -182,7 +182,7 @@ async function createPlanFromJSON(page, { name, json, parent = 'mine' }) {
   await page.goto(`${parentUrl}`);
 
   // Click the Create button
-  await page.click('button:has-text("Create")');
+  await page.getByRole('button', { name: 'Create' }).click();
 
   // Click 'Plan' menu option
   await page.click(`li:text("Plan")`);
@@ -231,7 +231,7 @@ async function createExampleTelemetryObject(page, parent = 'mine') {
 
   await page.goto(`${parentUrl}`);
 
-  await page.locator('button:has-text("Create")').click();
+  await page.getByRole('button', { name: 'Create' }).click();
 
   await page.locator('li:has-text("Sine Wave Generator")').click();
 

e2e/tests/functional/moveAndLinkObjects.e2e.spec.js

@@ -149,7 +149,7 @@ test.describe('Move & link item tests', () => {
 
     // Finish editing and save Telemetry Table
     await page.locator('.c-button--menu.c-button--major.icon-save').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Create New Folder Basic Domain Object
     let folder = 'Test Folder';

e2e/tests/functional/notification.e2e.spec.js

@@ -109,8 +109,7 @@ test.describe('Notification Overlay', () => {
     // Click on the "Save" button
     await page.click('button[title="Save"]');
 
-    // Click on the "Save and Finish Editing" option
-    await page.click('li[title="Save and Finish Editing"]');
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Verify that Notification List is NOT open
     expect(await page.locator('div[role="dialog"]').isVisible()).toBe(false);

e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js

@@ -122,7 +122,7 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
       .nth(1)
       .click();
     // Click Save and Finish Editing Option
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     //Verify Main section reflects updated Name Property
     await expect

e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js

@@ -148,7 +148,7 @@ test.describe('Display Layout', () => {
     const layoutGridHolder = page.locator('.l-layout__grid-holder');
     await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder);
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Subscribe to the Sine Wave Generator data
     // On getting data, check if the value found in the  Display Layout is the most recent value
@@ -186,7 +186,7 @@ test.describe('Display Layout', () => {
     const layoutGridHolder = page.locator('.l-layout__grid-holder');
     await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder);
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Subscribe to the Sine Wave Generator data
     const getTelemValuePromise = await subscribeToTelemetry(page, sineWaveObject.uuid);
@@ -228,7 +228,7 @@ test.describe('Display Layout', () => {
     const layoutGridHolder = page.locator('.l-layout__grid-holder');
     await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder);
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     expect.soft(await page.locator('.l-layout .l-layout__frame').count()).toEqual(1);
 
@@ -270,7 +270,7 @@ test.describe('Display Layout', () => {
     const layoutGridHolder = page.locator('.l-layout__grid-holder');
     await sineWaveGeneratorTreeItem.dragTo(layoutGridHolder);
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     expect.soft(await page.locator('.l-layout .l-layout__frame').count()).toEqual(1);
 
@@ -326,7 +326,7 @@ test.describe('Display Layout', () => {
     await page.locator('div[title="Resize object width"] > input').fill('70');
 
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     const startDate = '2021-12-30 01:01:00.000Z';
     const endDate = '2021-12-30 01:11:00.000Z';
@@ -388,7 +388,7 @@ test.describe('Display Layout', () => {
     await page.getByText('Overlay Plot').click();
 
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Time to inspect some network traffic
     let networkRequests = [];
@@ -460,7 +460,7 @@ async function removeLayoutObject(page, layoutObject) {
  * @param {'Box' | 'Ellipse' | 'Line' | 'Text' | 'Image'} layoutObject
  */
 async function addLayoutObject(page, layoutName, layoutObject) {
-  await page.getByLabel(`${layoutName} Layout Grid`).click();
+  await page.getByLabel(`${layoutName} Layout`, { exact: true }).click();
   await page.getByText('Add Drawing Object').click();
   await page
     .getByRole('menuitem', {

e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js

@@ -88,7 +88,7 @@ test.describe('Flexible Layout', () => {
     await expect(dragWrapper).toHaveAttribute('draggable', 'true');
     // Save Flexible Layout
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
     // Check that panes are not draggable while Flexible Layout is in Browse mode
     dragWrapper = page.locator('.c-fl-container__frames-holder .c-fl-frame__drag-wrapper').first();
     await expect(dragWrapper).toHaveAttribute('draggable', 'false');
@@ -174,7 +174,7 @@ test.describe('Flexible Layout', () => {
     // Add the Sine Wave Generator to the Flexible Layout and save changes
     await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     expect.soft(await page.locator('.c-fl-container__frame').count()).toEqual(1);
 
@@ -205,7 +205,7 @@ test.describe('Flexible Layout', () => {
     // Add the Sine Wave Generator to the Flexible Layout and save changes
     await sineWaveGeneratorTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     expect.soft(await page.locator('.c-fl-container__frame').count()).toEqual(1);
 
@@ -246,7 +246,7 @@ test.describe('Flexible Layout', () => {
     await exampleImageryTreeItem.dragTo(page.locator('.c-fl__container.is-empty').first());
 
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // flip on independent time conductor
     await setIndependentTimeConductorBounds(

e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js

@@ -53,7 +53,7 @@ test.describe('Gauge', () => {
     await editButtonLocator.click();
     await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg1.name}`)).toBeVisible();
     await saveButtonLocator.click();
-    await page.locator('li[title="Save and Finish Editing"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Create another sine wave generator within the gauge
     const swg2 = await createDomainObjectWithDefaults(page, {

e2e/tests/functional/plugins/lad/lad.e2e.spec.js

@@ -101,7 +101,7 @@ test.describe('Testing LAD table configuration', () => {
 
     // save and reload and verify they columns are still hidden
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').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: 'Units' })).toBeHidden();
@@ -129,7 +129,7 @@ test.describe('Testing LAD table configuration', () => {
 
     // save and reload and make sure timestamp is still visible
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    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();
@@ -159,7 +159,7 @@ test.describe('Testing LAD table configuration', () => {
 
     // save and reload and make sure all columns are still visible
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').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: 'Units' })).toBeVisible();
@@ -265,7 +265,7 @@ test.describe('Testing LAD table @unstable', () => {
     // Add the Sine Wave Generator to the LAD table and save changes
     await page.dragAndDrop('text=Test Sine Wave Generator', '.c-lad-table-wrapper');
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Subscribe to the Sine Wave Generator data
     // On getting data, check if the value found in the LAD table is the most recent value
@@ -293,7 +293,7 @@ test.describe('Testing LAD table @unstable', () => {
     // Add the Sine Wave Generator to the LAD table and save changes
     await page.dragAndDrop('text=Test Sine Wave Generator', '.c-lad-table-wrapper');
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Subscribe to the Sine Wave Generator data
     const getTelemValuePromise = await subscribeToTelemetry(page, sineWaveObject.uuid);

e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js

@@ -68,7 +68,7 @@ test.describe('Autoscale', () => {
     // save
     await page.click('button[title="Save"]');
     await Promise.all([
-      page.locator('li[title = "Save and Finish Editing"]').click(),
+      page.getByRole('listitem', { name: 'Save and Finish Editing' }).click(),
       //Wait for Save Banner to appear
       page.waitForSelector('.c-message-banner__message')
     ]);

e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js

@@ -214,7 +214,7 @@ async function saveOverlayPlot(page) {
     .click();
 
   await Promise.all([
-    page.locator('text=Save and Finish Editing').click(),
+    page.getByRole('listitem', { name: 'Save and Finish Editing' }).click(),
     //Wait for Save Banner to appear
     page.waitForSelector('.c-message-banner__message')
   ]);

e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js

@@ -105,7 +105,7 @@ test.describe('Overlay Plot', () => {
 
     // Save (exit edit mode)
     await page.locator('button[title="Save"]').click();
-    await page.locator('li[title="Save and Finish Editing"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     await assertLimitLinesExistAndAreVisible(page);
 
@@ -127,7 +127,7 @@ test.describe('Overlay Plot', () => {
 
     // Save (exit edit mode)
     await page.locator('button[title="Save"]').click();
-    await page.locator('li[title="Save and Finish Editing"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     await assertLimitLinesExistAndAreVisible(page);
 

e2e/tests/functional/plugins/plot/scatterPlot.e2e.spec.js

@@ -57,7 +57,7 @@ test.describe('Scatter Plot', () => {
     await page.getByRole('tab', { name: 'Elements' }).click();
     await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg1.name}`)).toBeVisible();
     await saveButton.click();
-    await page.locator('li[title="Save and Finish Editing"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Create another sine wave generator within the scatter plot
     const swg2 = await createDomainObjectWithDefaults(page, {

e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js

@@ -135,7 +135,7 @@ test.describe('Stacked Plot', () => {
 
     // Save (exit edit mode)
     await page.locator('button[title="Save"]').click();
-    await page.locator('li[title="Save and Finish Editing"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // assert plot order persists after save - [swgB, swgC, swgA]
     await expect(stackedPlotItem1).toHaveAttribute('aria-label', `Stacked Plot Item ${swgB.name}`);
@@ -243,7 +243,7 @@ test.describe('Stacked Plot', () => {
 
     // Save (exit edit mode)
     await page.locator('button[title="Save"]').click();
-    await page.locator('li[title="Save and Finish Editing"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     await assertAggregateLegendIsVisible(page);
 

e2e/tests/functional/search.e2e.spec.js

@@ -88,8 +88,8 @@ test.describe('Grand Search', () => {
       .locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button')
       .nth(1)
       .click();
-    // Click text=Save and Finish Editing
-    await page.locator('text=Save and Finish Editing').click();
+
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
     // Click [aria-label="OpenMCT Search"] [aria-label="Search Input"]
     await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
     // Fill [aria-label="OpenMCT Search"] [aria-label="Search Input"]

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

@@ -103,7 +103,7 @@ test.describe('Verify tooltips', () => {
     await page.dragAndDrop(`text=${sineWaveObject2.name}`, '.c-lad-table-wrapper');
     await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-lad-table-wrapper');
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     await page.keyboard.down('Control');
 
@@ -133,7 +133,7 @@ test.describe('Verify tooltips', () => {
     await page.dragAndDrop(`text=${sineWaveObject2.name}`, '.gl-plot');
     await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.gl-plot');
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     await page.keyboard.down('Control');
 
@@ -200,7 +200,7 @@ test.describe('Verify tooltips', () => {
     await page.locator('[title="Edit"]').click();
     await page.dragAndDrop(`text=${sineWaveObject1.name}`, '.gl-plot');
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Create Stacked Plot
     await createDomainObjectWithDefaults(page, {
@@ -211,7 +211,7 @@ test.describe('Verify tooltips', () => {
     await page.locator('[title="Edit"]').click();
     await page.dragAndDrop(`text=${sineWaveObject2.name}`, '.c-plot--stacked.holder');
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Create Display Layout
     await createDomainObjectWithDefaults(page, {
@@ -231,7 +231,7 @@ test.describe('Verify tooltips', () => {
       targetPosition: { x: 500, y: 200 }
     });
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     await page.keyboard.down('Control');
 
@@ -269,7 +269,7 @@ test.describe('Verify tooltips', () => {
     await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-fl__container >> nth=1');
 
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     await page.keyboard.down('Control');
     await page.getByText('SWG 1').nth(2).hover();
@@ -293,7 +293,7 @@ test.describe('Verify tooltips', () => {
     await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-tabs-view__tabs-holder');
 
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     await page.keyboard.down('Control');
     await page.getByText('SWG 1').nth(2).hover();
@@ -378,7 +378,7 @@ test.describe('Verify tooltips', () => {
     await page.dragAndDrop(`text=${sineWaveObject3.name}`, '.c-telemetry-table');
 
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
     await page.keyboard.down('Control');
 
     await page.locator('.noselect > [title="SWG 3"]').first().hover();
@@ -442,7 +442,7 @@ test.describe('Verify tooltips', () => {
       '.c-object-view.is-object-type-time-strip'
     );
     await page.locator('button[title="Save"]').click();
-    await page.locator('text=Save and Finish Editing').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     await page.keyboard.down('Control');
     await page.getByText(sineWaveObject1.name).nth(2).hover();