Fix bad color value for Gauge 'Needle' type (#7821)

* Closes #7820
- Fix 0 opacity fill in theme constants files for Gauge type needle.

* move gauge plugin to its own suite

* add two more snapshots

* driveby: fix some flake

* bug: update linting rule

---------

Co-authored-by: John Hill <[email protected]>
Co-authored-by: Andrew Henry <[email protected]>

e2e/.eslintrc.cjs

@@ -27,6 +27,12 @@ module.exports = {
       rules: {
         'playwright/no-raw-locators': 'off'
       }
+    },
+    {
+      files: ['**/*.visual.spec.js'],
+      rules: {
+        'playwright/no-networkidle': 'off' //https://github.com/nasa/openmct/issues/7549
+      }
     }
   ]
 };

e2e/README.md

@@ -469,6 +469,7 @@ By adhering to this principle, we can create tests that are both robust and refl
     //Select from object
     await percySnapshot(page, `object selected (theme: ${theme})`)
     ```
+8. **Use `networkidle` to wait for network requests to complete**: This is necessary to ensure that all network requests have completed before taking a snapshot. This ensures that icons are loaded and other assets are available. https://github.com/nasa/openmct/issues/7549
 
 #### How to write a great network test
 

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

@@ -85,16 +85,6 @@ test.describe('Visual - Default @a11y', () => {
     await percySnapshot(page, `Display Layout Create Menu (theme: '${theme}')`);
   });
 
-  test('Visual - Default Gauge', async ({ page, theme }) => {
-    await createDomainObjectWithDefaults(page, {
-      type: 'Gauge',
-      name: 'Default Gauge'
-    });
-
-    // Take a snapshot of the newly created Gauge object
-    await percySnapshot(page, `Default Gauge (theme: '${theme}')`);
-  });
-
   test.afterEach(async ({ page }, testInfo) => {
     await scanForA11yViolations(page, testInfo.title);
   });

e2e/tests/visual-a11y/gauge.visual.spec.js

@@ -0,0 +1,81 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_FIXED_URL } from '../../constants.js';
+
+test.describe('Visual - Gauges', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Visual - Default Gauge', async ({ page, theme }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Default Gauge'
+    });
+
+    // Take a snapshot of the newly created Gauge object
+    await percySnapshot(page, `Default Gauge (theme: '${theme}')`);
+  });
+
+  test('Visual - Needle Gauge with State Generator', async ({ page, theme }) => {
+    const needleGauge = await createDomainObjectWithDefaults(page, {
+      type: 'Gauge',
+      name: 'Needle Gauge'
+    });
+
+    //Modify the Gauge to be a Needle Gauge
+    await page.getByLabel('More actions').click();
+    await page.getByLabel('Edit Properties...').click();
+    await page.getByLabel('Gauge type', { exact: true }).selectOption('dial-needle');
+    await page.getByText('Ok').click();
+
+    //Add a State Generator to the Gauge
+    await page.goto(needleGauge.url + '?hideTree=true&hideInspector=true', {
+      waitUntil: 'domcontentloaded'
+    });
+
+    // Take a snapshot of the newly created Gauge object
+    await percySnapshot(page, `Needle Gauge with no telemetry source (theme: '${theme}')`);
+
+    //Add a State Generator to the Gauge. Note this requires that snapshots are taken within 5 seconds
+    await page.getByLabel('Create', { exact: true }).click();
+    await page.getByLabel('State Generator').click();
+    await page.getByLabel('Modal Overlay').getByLabel('Navigate to Needle Gauge').click();
+    await page.getByLabel('Save').click();
+
+    //Add a State Generator to the Gauge
+    await page.goto(needleGauge.url + '?hideTree=true&hideInspector=true', {
+      waitUntil: 'domcontentloaded'
+    });
+
+    // Take a snapshot of the newly created Gauge object
+    await percySnapshot(page, `Needle Gauge with State Generator (theme: '${theme}')`);
+  });
+
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
+});

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

@@ -98,7 +98,7 @@ test.describe('Visual - Notebook @a11y', () => {
 
     await page.getByLabel('Expand My Items folder').click();
 
-    await page.goto(notebook.url);
+    await page.goto(notebook.url, { waitUntil: 'networkidle' });
 
     await page
       .getByLabel('Navigate to Dropped Overlay Plot')

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

@@ -53,7 +53,7 @@ test.describe('Grand Search @a11y', () => {
     theme
   }) => {
     // Navigate to display layout
-    await page.goto(displayLayout.url);
+    await page.goto(displayLayout.url, { waitUntil: 'networkidle' });
 
     // Search for the object
     await page.getByRole('searchbox', { name: 'Search Input' }).click();

src/styles/_constants-espresso.scss

@@ -461,7 +461,7 @@ $colorGaugeMeterTextValue: $colorGaugeTextValue; // Meter text value, overlaid o
 $colorGaugeRange: $colorBodyFg; // Range text color
 $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
-$colorGaugeNeedle: rgba(#fff, 0);
+$colorGaugeNeedle: $colorGaugeValue; // Color of needle in a needle gauge.
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
 $gaugeMeterValueShadow: rgba(255, 255, 255, 0);

src/styles/_constants-maelstrom.scss

@@ -477,7 +477,7 @@ $colorGaugeMeterTextValue: $colorGaugeTextValue; // Meter text value, overlaid o
 $colorGaugeRange: $colorBodyFg; // Range text color
 $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
-$colorGaugeNeedle: rgba(#fff, 0);
+$colorGaugeNeedle: $colorGaugeValue; // Color of needle in a needle gauge.
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
 $gaugeMeterValueShadow: rgba(255, 255, 255, 0);

src/styles/_constants-snow.scss

@@ -460,7 +460,7 @@ $colorGaugeMeterTextValue: $colorGaugeTextValue; // Meter text value, overlaid o
 $colorGaugeRange: $colorBodyFg; // Range text color
 $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.2);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
-$colorGaugeNeedle: rgba(#fff, 0);
+$colorGaugeNeedle: $colorGaugeValue; // Color of needle in a needle gauge.
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
 $gaugeMeterValueShadow: rgba(255, 255, 255, 0);