Added e2e tests

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

@@ -0,0 +1,63 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('The performance indicator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page.evaluate(() => {
+      openmct.install(openmct.plugins.PerformanceIndicator());
+    });
+  });
+
+  test('can be installed', async ({ page }) => {
+    const performanceIndicator = await page.getByLabel('Performance Indicator');
+    expect(performanceIndicator).toBeDefined();
+  });
+
+  test('Shows a numerical FPS value', async ({ page }) => {
+    //We need to wait at least 1s to establish an average fps
+    await page.waitForTimeout(1000);
+    const performanceIndicator = await page.getByLabel('Performance Indicator');
+    expect(performanceIndicator).toHaveText(/\d\d? fps/);
+  });
+
+  test('Supports showing optional extended performance information in an overlay for debugging', async ({ page }) => {
+    const performanceMeasurementLabel = 'Some measurement';
+    const performanceMeasurementValue = 'Some value';
+
+    await page.evaluate(({performanceMeasurementLabel, performanceMeasurementValue}) => {
+      openmct.performance.measurements.set(
+        performanceMeasurementLabel,
+        performanceMeasurementValue
+      );
+    }, {performanceMeasurementLabel, performanceMeasurementValue});
+    const performanceIndicator = await page.getByLabel("Performance Indicator");
+    await performanceIndicator.click();
+    //Performance overlay is a crude debugging tool, it's evaluated once per second.
+    await page.waitForTimeout(1000);
+    const performanceOverlay = await page.getByLabel("Performance Overlay");
+    console.log(performanceOverlay.textContent());
+    expect(performanceOverlay).toHaveText(new RegExp(`${performanceMeasurementLabel}.*`));
+    expect(performanceOverlay).toHaveText(new RegExp(`.*${performanceMeasurementValue}`));
+  });
+});

src/api/indicators/SimpleIndicator.js

@@ -70,7 +70,7 @@ class SimpleIndicator extends EventEmitter {
   description(description) {
     if (description !== undefined && description !== this.descriptionValue) {
       this.descriptionValue = description;
-      this.element.title = description;
+      this.element.ariaLabel = description;
     }
 
     return this.descriptionValue;

src/api/indicators/res/indicator-template.html

@@ -1,3 +1,3 @@
-<div class="c-indicator c-indicator--clickable c-indicator--simple" title="">
+<div class="c-indicator c-indicator--clickable c-indicator--simple" title="" aria-label="">
   <span class="label js-indicator-text c-indicator__label"></span>
 </div>

src/plugins/performanceIndicator/plugin.js

@@ -30,6 +30,7 @@ export default function PerformanceIndicator() {
     const indicator = openmct.indicators.simpleIndicator();
     indicator.key = 'performance-indicator';
     indicator.text('~ fps');
+    indicator.description('Performance Indicator');
     indicator.statusClass('s-status-info');
     indicator.on('click', showOverlay);
 
@@ -75,7 +76,7 @@ export default function PerformanceIndicator() {
           }
       `;
       const overlayMarkup = `
-        <div id="c-performance-indicator--overlay">
+        <div id="c-performance-indicator--overlay" aria-label="Performance Overlay">
           <table id="c-performance-indicator--table">
             <tr class="c-performance-indicator--row"><td class="c-performance-indicator--measurement-name"></td><td class="c-performance-indicator--measurement-value"></td></tr>
           </table>