[CI] Stabilize visual tests, remove appAction, and update pane buttons (#7033)

* Add a VISUAL_URL constant and remove all vestiges of hide inspector and tree

* hide timer and add concurrency

* turn off concurrency

* factor out old appAction

* Add expand button to panes

* remove old slow annotations

* fix fault

* update domcontentloaded

* missed refactor

* driveby: setTimeBounds private

* add comments to the percyCSS

* suggest MISSION_TIME

* more notes

* regen

* clean up test

* driveby: clean up order

* restructure

* add new suite now that i'ts hidden

* use mission time everywhere possible

* driveby

* rerun generatedata

* comments

* lintfix

e2e/tests/visual/components/about.visual.spec.js

@@ -26,11 +26,12 @@ Tests the branding associated with the default deployment. At least the about mo
 
 const { test, expect } = require('../../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
+const VISUAL_URL = require('../../../constants').VISUAL_URL;
 
 test.describe('Visual - Branding', () => {
   test.beforeEach(async ({ page }) => {
     //Go to baseURL and Hide Tree
-    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });
 
   test('Visual - About Modal', async ({ page, theme }) => {

e2e/tests/visual/components/inspector.visual.spec.js

@@ -0,0 +1,56 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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('../../../pluginFixtures.js');
+const { VISUAL_URL, MISSION_TIME } = require('../../../constants.js');
+const percySnapshot = require('@percy/playwright');
+
+//Declare the scope of the visual test
+const inspectorPane = '.l-shell__pane-inspector';
+
+test.describe('Visual - Controlled Clock', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+  });
+  test.use({
+    storageState: './e2e/test-data/overlay_plot_with_delay_storage.json',
+    clockOptions: {
+      now: MISSION_TIME,
+      shouldAdvanceTime: true
+    }
+  });
+
+  test('Inspector from overlay_plot_with_delay_storage @localStorage', async ({ page, theme }) => {
+    //Expand the Inspector Pane
+    await page.getByRole('button', { name: 'Inspect' }).click();
+
+    await percySnapshot(page, `Inspector view of overlayPlot (theme: ${theme})`, {
+      scope: inspectorPane
+    });
+    //Open Annotations Tab
+    await page.getByRole('tab', { name: 'Annotations' }).click();
+
+    await percySnapshot(page, `Inspector view of Annotations Tab (theme: ${theme})`, {
+      scope: inspectorPane
+    });
+  });
+});

e2e/tests/visual/components/tree.visual.spec.js

@@ -25,14 +25,21 @@ const {
   expandTreePaneItemByName,
   createDomainObjectWithDefaults
 } = require('../../../appActions.js');
-
+const VISUAL_URL = require('../../../constants.js').VISUAL_URL;
 const percySnapshot = require('@percy/playwright');
 
-test.describe('Visual - Tree Pane', () => {
-  test('Tree pane in various states @unstable', async ({ page, theme, openmctConfig }) => {
-    const { myItemsFolderName } = openmctConfig;
-    await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
+//Declare the scope of the visual test
+const treePane = "[role=tree][aria-label='Main Tree']";
 
+test.describe('Visual - Tree Pane', () => {
+  test('Tree pane in various states', async ({ page, theme, openmctConfig }) => {
+    const { myItemsFolderName } = openmctConfig;
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
+    //Open Tree
+    await page.getByRole('button', { name: 'Browse' }).click();
+
+    //Create a Folder Structure
     const foo = await createDomainObjectWithDefaults(page, {
       type: 'Folder',
       name: 'Foo Folder'
@@ -60,8 +67,6 @@ test.describe('Visual - Tree Pane', () => {
       name: 'Z Clock'
     });
 
-    const treePane = "[role=tree][aria-label='Main Tree']";
-
     await percySnapshot(page, `Tree Pane w/ collapsed tree (theme: ${theme})`, {
       scope: treePane
     });

e2e/tests/visual/controlledClock.visual.spec.js

@@ -25,35 +25,31 @@ Collection of Visual Tests set to run with browser clock manipulate made possibl
 clockOptions plugin fixture.
 */
 
+const { VISUAL_URL, MISSION_TIME } = require('../../constants');
 const { test, expect } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
 
 test.describe('Visual - Controlled Clock', () => {
   test.beforeEach(async ({ page }) => {
-    //Go to baseURL and Hide Tree
-    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });
   test.use({
     storageState: './e2e/test-data/overlay_plot_with_delay_storage.json',
     clockOptions: {
+      now: MISSION_TIME,
       shouldAdvanceTime: false //Don't advance the clock
     }
   });
 
   test('Overlay Plot Loading Indicator @localStorage', async ({ page, theme }) => {
-    // Go to baseURL
-    await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
-    await page.getByTitle('Collapse Browse Pane').click();
-    await page
-      .locator('a')
-      .filter({ hasText: 'Overlay Plot with Telemetry Object Overlay Plot' })
-      .click();
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+    await page.locator('a').filter({ hasText: 'Overlay Plot with 5s Delay' }).click();
     //Ensure that we're on the Unnamed Overlay Plot object
     await expect(page.locator('.l-browse-bar__object-name')).toContainText(
-      'Overlay Plot with Telemetry Object'
+      'Overlay Plot with 5s Delay'
     );
 
-    //Wait for canvas to be rendered and stop animating
+    //Wait for canvas to be rendered and stop animating, but plot should not be loaded. Cannot use waitForPlotsToRender
     await page.locator('canvas >> nth=1').hover({ trial: true });
 
     //Take snapshot of Sine Wave Generator within Overlay Plot

e2e/tests/visual/defaultPlugins.visual.spec.js

@@ -29,11 +29,11 @@ are only meant to run against openmct's app.js started by `npm run start` within
 const { test, expect } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
 const { createDomainObjectWithDefaults } = require('../../appActions');
+const { VISUAL_URL } = require('../../constants');
 
 test.describe('Visual - Default', () => {
   test.beforeEach(async ({ page }) => {
-    //Go to baseURL and Hide Tree
-    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });
 
   test('Visual - Default Dashboard', async ({ page, theme }) => {

e2e/tests/visual/ladTable.visual.spec.js

@@ -23,13 +23,15 @@
 const { expect, test } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
 const { createDomainObjectWithDefaults } = require('../../appActions');
+const VISUAL_URL = require('../../constants').VISUAL_URL;
 
 test.describe('Visual - LAD Table', () => {
   /** @type {import('@playwright/test').Locator} */
   let ladTable;
 
   test.beforeEach(async ({ page }) => {
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
     // Create LAD Table
     ladTable = await createDomainObjectWithDefaults(page, {
       type: 'LAD Table',
@@ -55,9 +57,6 @@ test.describe('Visual - LAD Table', () => {
   });
   test('Toggled column widths behave accordingly', async ({ page, theme }) => {
     await page.goto(ladTable.url);
-    //Close panes for visual consistency
-    await page.getByTitle('Collapse Inspect Pane').click();
-    await page.getByTitle('Collapse Browse Pane').click();
 
     await expect(page.locator('button[title="Expand Columns"]')).toBeVisible();
 

e2e/tests/visual/notebook.visual.spec.js

@@ -22,15 +22,12 @@
 
 const { test } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
-const {
-  selectInspectorTab,
-  expandTreePaneItemByName,
-  createDomainObjectWithDefaults
-} = require('../../appActions');
+const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../appActions');
 const {
   startAndAddRestrictedNotebookObject,
   enterTextEntry
 } = require('../../helper/notebookUtils');
+const { VISUAL_URL } = require('../../constants');
 
 test.describe('Visual - Restricted Notebook', () => {
   test.beforeEach(async ({ page }) => {
@@ -44,23 +41,26 @@ test.describe('Visual - Restricted Notebook', () => {
 });
 
 test.describe('Visual - Notebook', () => {
+  let notebook;
   test.beforeEach(async ({ page }) => {
-    //Go to baseURL and Hide Tree
-    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+    notebook = await createDomainObjectWithDefaults(page, {
+      type: 'Notebook',
+      name: 'Test Notebook'
+    });
   });
-  test('Accepts dropped objects as embeds @unstable', async ({ page, theme, openmctConfig }) => {
+  test('Accepts dropped objects as embeds', async ({ page, theme, openmctConfig }) => {
     const { myItemsFolderName } = openmctConfig;
 
-    const notebook = await createDomainObjectWithDefaults(page, {
-      type: 'Notebook',
-      name: 'Embed Test Notebook'
-    });
     // Create Overlay Plot
     await createDomainObjectWithDefaults(page, {
       type: 'Overlay Plot',
       name: 'Dropped Overlay Plot'
     });
 
+    //Open Tree
+    await page.getByRole('button', { name: 'Browse' }).click();
+
     await expandTreePaneItemByName(page, myItemsFolderName);
 
     await page.goto(notebook.url);
@@ -70,18 +70,19 @@ test.describe('Visual - Notebook', () => {
     await percySnapshot(page, `Notebook w/ dropped embed (theme: ${theme})`);
   });
   test("Blur 'Add tag' on Notebook", async ({ page, theme }) => {
-    await createDomainObjectWithDefaults(page, {
-      type: 'Notebook',
-      name: 'Add Tag Test Notebook'
-    });
     await enterTextEntry(page, 'Entry 0');
 
-    // Click on Annotations tab
-    await selectInspectorTab(page, 'Annotations');
+    await percySnapshot(page, `Notebook Entry (theme: '${theme}')`);
+
+    // Open the Inspector
+    await page.getByRole('button', { name: 'Inspect' }).click();
+    // Open the Annotations tab
+    await page.getByRole('tab', { name: 'Annotations' }).click();
 
     // Take snapshot of the notebook with the Annotations tab opened
     await percySnapshot(page, `Notebook Annotation (theme: '${theme}')`);
 
+    // Add annotation
     await page.locator('button:has-text("Add Tag")').click();
 
     // Take snapshot of the notebook with the AutoComplete field visible

e2e/tests/visual/notification.visual.spec.js

@@ -27,11 +27,11 @@
 const { test, expect } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
 const { createDomainObjectWithDefaults } = require('../../appActions');
+const VISUAL_URL = require('../../constants').VISUAL_URL;
 
 test.describe("Visual - Check Notification Info Banner of 'Save successful'", () => {
   test.beforeEach(async ({ page }) => {
-    // Go to baseURL and Hide Tree
-    await page.goto('./', { waitUntil: 'networkidle' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });
 
   test("Create a clock, click on 'Save successful' banner and dismiss it", async ({
@@ -43,12 +43,6 @@ test.describe("Visual - Check Notification Info Banner of 'Save successful'", ()
       type: 'Clock',
       name: 'Default Clock'
     });
-    // Verify there is a button with aria-label="Review 1 Notification"
-    expect(await page.locator('button[aria-label="Review 1 Notification"]').isVisible()).toBe(true);
-    // Verify there is a button with aria-label="Clear all notifications"
-    expect(await page.locator('button[aria-label="Clear all notifications"]').isVisible()).toBe(
-      true
-    );
     // Click on the div with role="alert" that has "Save successful" text
     await page.locator('div[role="alert"]:has-text("Save successful")').click();
     // Verify there is a div with role="dialog"

e2e/tests/visual/planning.visual.spec.js

@@ -21,16 +21,20 @@
  *****************************************************************************/
 
 const { test } = require('../../pluginFixtures');
-const { setBoundsToSpanAllActivities } = require('../../helper/planningUtils');
+const {
+  setBoundsToSpanAllActivities,
+  setDraftStatusForPlan
+} = require('../../helper/planningUtils');
 const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../appActions');
 const percySnapshot = require('@percy/playwright');
+const VISUAL_URL = require('../../constants').VISUAL_URL;
 const examplePlanSmall = require('../../test-data/examplePlans/ExamplePlan_Small2.json');
 
 const snapshotScope = '.l-shell__pane-main .l-pane__contents';
 
 test.describe('Visual - Planning', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });
 
   test('Plan View', async ({ page, theme }) => {
@@ -50,8 +54,7 @@ test.describe('Visual - Planning', () => {
       name: 'Plan Visual Test (Draft)',
       json: examplePlanSmall
     });
-    await page.goto('./#/browse/mine');
-
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
     await setDraftStatusForPlan(page, plan);
 
     await setBoundsToSpanAllActivities(page, examplePlanSmall, plan.url);
@@ -87,7 +90,7 @@ test.describe('Visual - Planning', () => {
 
     await setDraftStatusForPlan(page, plan);
 
-    await page.goto('./#/browse/mine');
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
 
     await setBoundsToSpanAllActivities(page, examplePlanSmall, ganttChart.url);
     await percySnapshot(page, `Gantt Chart View w/ draft status (theme: ${theme})`, {
@@ -95,14 +98,3 @@ test.describe('Visual - Planning', () => {
     });
   });
 });
-
-/**
- * Uses the Open MCT API to set the status of a plan to 'draft'.
- * @param {import('@playwright/test').Page} page
- * @param {import('../../appActions').CreatedObjectInfo} plan
- */
-async function setDraftStatusForPlan(page, plan) {
-  await page.evaluate(async (planObject) => {
-    await window.openmct.status.set(planObject.uuid, 'draft');
-  }, plan);
-}

e2e/tests/visual/search.visual.spec.js

@@ -26,15 +26,15 @@ This test suite is dedicated to tests which verify search functionality.
 
 const { test, expect } = require('../../pluginFixtures');
 const { createDomainObjectWithDefaults } = require('../../appActions');
+const { VISUAL_URL } = require('../../constants');
 
 const percySnapshot = require('@percy/playwright');
 
 test.describe('Grand Search', () => {
   let clock;
   let displayLayout;
-  test.beforeEach(async ({ page, theme }) => {
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
-    await page.getByTitle('Collapse Browse Pane').click();
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
 
     displayLayout = await createDomainObjectWithDefaults(page, {
       type: 'Display Layout',