[e2e] Update remaining tests and add missing comparison coverage

e2e/tests/functional/branding.e2e.spec.js

@@ -27,39 +27,36 @@ This test suite is dedicated to tests which verify branding related components.
 import { expect, test } from '../../baseFixtures.js';
 
 test.describe('Branding tests', () => {
-  test('About Modal launches with basic branding properties', async ({ page }) => {
-    // Go to baseURL
+  test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
-
-    // Click About button
-    await page.click('.l-shell__app-logo');
+  });
+  test('About Modal launches with basic branding properties', async ({ page }) => {
+    await page.getByLabel('About Modal').click();
 
     // Verify that the NASA Logo Appears
-    await expect(page.locator('.c-about__image')).toBeVisible();
+    await expect(page.getByAltText('Open MCT Splash Logo')).toBeVisible();
 
     // Modify the Build information in 'about' Modal
-    const versionInformationLocator = page.locator('ul.t-info.l-info.s-info').first();
-    await expect(versionInformationLocator).toBeEnabled();
-    await expect.soft(versionInformationLocator).toContainText(/Version: \d/);
+    await expect(page.getByTestId('versionInfo')).toBeEnabled();
+    await expect.soft(page.getByTestId('versionInfo')).toContainText(/Version: \d/);
     await expect
-      .soft(versionInformationLocator)
+      .soft(page.getByTestId('versionInfo'))
       .toContainText(/Build Date: ((?:Mon|Tue|Wed|Thu|Fri|Sat|Sun))/);
-    await expect.soft(versionInformationLocator).toContainText(/Revision: \b[0-9a-f]{5,40}\b/);
-    await expect.soft(versionInformationLocator).toContainText(/Branch: ./);
+    await expect
+      .soft(page.getByTestId('versionInfo'))
+      .toContainText(/Revision: \b[0-9a-f]{5,40}\b/);
+    await expect.soft(page.getByTestId('versionInfo')).toContainText(/Branch: ./);
   });
   test('Verify Links in About Modal @2p', async ({ page }) => {
-    // Go to baseURL
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
-
     // Click About button
-    await page.click('.l-shell__app-logo');
+    await page.getByLabel('About Modal').click();
 
     // Verify that clicking on the third party licenses information opens up another tab on licenses url
     const [page2] = await Promise.all([
       page.waitForEvent('popup'),
-      page.locator('text=click here for third party licensing information').click()
+      page.getByText('click here for third party licensing information').click()
     ]);
-    await page2.waitForLoadState('networkidle'); //Avoids timing issues with juggler/firefox
+    await page2.waitForLoadState('domcontentloaded'); //Avoids timing issues with juggler/firefox
     expect(page2.waitForURL('**/licenses**')).toBeTruthy();
   });
 });

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

@@ -26,29 +26,33 @@ Tests the branding associated with the default deployment. At least the about mo
 
 import percySnapshot from '@percy/playwright';
 
+import { expect, scanForA11yViolations, test } from '../../../avpFixtures.js';
 import { VISUAL_URL } from '../../../constants.js';
-import { expect, test } from '../../../pluginFixtures.js';
 
-test.describe('Visual - Branding', () => {
+test.describe('Visual - Branding @a11y', () => {
   test.beforeEach(async ({ page }) => {
     //Go to baseURL and Hide Tree
     await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });
 
   test('Visual - About Modal', async ({ page, theme }) => {
     // Click About button
-    await page.click('.l-shell__app-logo');
+    await page.getByLabel('About Modal').click();
 
     // Modify the Build information in 'about' to be consistent run-over-run
-    const versionInformationLocator = page.locator('ul.t-info.l-info.s-info').first();
-    await expect(versionInformationLocator).toBeEnabled();
-    await versionInformationLocator.evaluate(
-      (node) =>
-        (node.innerHTML =
-          '<li>Version: visual-snapshot</li> <li>Build Date: Mon Nov 15 2021 08:07:51 GMT-0800 (Pacific Standard Time)</li> <li>Revision: 93049cdbc6c047697ca204893db9603b864b8c9f</li> <li>Branch: master</li>')
-    );
+    await expect(page.getByTestId('versionInfo')).toBeEnabled();
+    await page
+      .getByTestId('versionInfo')
+      .evaluate(
+        (node) =>
+          (node.innerHTML =
+            '<li>Version: visual-snapshot</li> <li>Build Date: Mon Nov 15 2021 08:07:51 GMT-0800 (Pacific Standard Time)</li> <li>Revision: 93049cdbc6c047697ca204893db9603b864b8c9f</li> <li>Branch: master</li>')
+      );
 
     // Take a snapshot of the About modal
     await percySnapshot(page, `About (theme: '${theme}')`);
   });
 });
+test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
+});

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

@@ -28,7 +28,7 @@ import { test } from '../../../pluginFixtures.js';
 //Declare the scope of the visual test
 const inspectorPane = '.l-shell__pane-inspector';
 
-test.describe('Visual - Controlled Clock', () => {
+test.describe('Visual - Inspector @ally', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });

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

@@ -44,14 +44,15 @@ test.describe('Visual - Controlled Clock', () => {
 
   test('Overlay Plot Loading Indicator @localStorage', async ({ page, theme }) => {
     await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
-    await page.locator('a').filter({ hasText: 'Overlay Plot with 5s Delay' }).click();
+    await page
+      .getByRole('gridcell', { hasText: 'Overlay Plot with 5s Delay Overlay Plot' })
+      .click();
     //Ensure that we're on the Unnamed Overlay Plot object
-    await expect(page.locator('.l-browse-bar__object-name')).toContainText(
-      'Overlay Plot with 5s Delay'
-    );
+    await expect(page.getByRole('main')).toContainText('Overlay Plot with 5s Delay');
 
-    //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 });
+    //Wait for canvas to be rendered and stop animating, but plot should not be loaded.
+    //Cannot use waitForPlotsToRender due to clockOptions.
+    await page.getByAltText('webglContext').hover({ trial: true });
 
     //Take snapshot of Sine Wave Generator within Overlay Plot
     await percySnapshot(page, `SineWaveInOverlayPlot (theme: '${theme}')`);

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

@@ -26,43 +26,54 @@
 
 import percySnapshot from '@percy/playwright';
 
-import { createDomainObjectWithDefaults } from '../../appActions.js';
+import { createNotification } from '../../appActions.js';
 import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
 import { VISUAL_URL } from '../../constants.js';
 
-test.describe("Visual - Check Notification Info Banner of 'Save successful' @a11y", () => {
+test.describe('Visual - Notifications @a11y', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });
 
-  test("Create a clock, click on 'Save successful' banner and dismiss it", async ({
-    page,
-    theme
-  }) => {
-    // Create a clock domain object
-    await createDomainObjectWithDefaults(page, {
-      type: 'Clock',
-      name: 'Default Clock'
+  test('Alert Levels and Notification List Modal', async ({ page, theme }) => {
+    await createNotification(page, {
+      message: 'Test info notification',
+      severity: 'info'
     });
-    // Click on the div with role="alert" that has "Save successful" text
-    await page.getByRole('alert').filter({ hasText: 'Save successful' }).click();
-    // Verify there is a div with role="dialog"
-    await expect(page.getByRole('dialog', { name: 'Overlay' })).toBeVisible();
-    // Verify the div with role="dialog" contains text "Save successful"
-    expect(await page.getByRole('dialog', { name: 'Overlay' }).innerText()).toContain(
-      'Save successful'
-    );
-    await percySnapshot(page, `Notification banner shows Save successful (theme: '${theme}')`);
-    // Verify there is a button with text "Dismiss"
-    await expect(page.getByText('Dismiss', { exact: true })).toBeVisible();
-    await percySnapshot(page, `Notification banner shows Dismiss (theme: '${theme}')`);
-    // Click on button with text "Dismiss"
-    await page.getByText('Dismiss', { exact: true }).click();
-    // Verify there is no div with role="dialog"
-    await expect(page.getByRole('dialog', { name: 'Overlay' })).toBeHidden();
-    await percySnapshot(page, `Notification banner dismissed (theme: '${theme}')`);
-  });
-  test.afterEach(async ({ page }, testInfo) => {
-    await scanForA11yViolations(page, testInfo.title);
+    await expect(page.getByText('Test info notification')).toBeVisible();
+    await percySnapshot(page, `Info Notification banner shown (theme: '${theme}')`);
+    await page.getByLabel('Dismiss').click();
+    await page.getByRole('alert').waitFor({ state: 'detached' });
+    await createNotification(page, {
+      message: 'Test alert notification',
+      severity: 'alert'
+    });
+    await expect(page.getByText('Test alert notification')).toBeVisible();
+    await percySnapshot(page, `Alert Notification banner shown (theme: '${theme}')`);
+    await page.getByLabel('Dismiss').click();
+    await page.getByRole('alert').waitFor({ state: 'detached' });
+    await createNotification(page, {
+      message: 'Test error notification',
+      severity: 'error'
+    });
+    await expect(page.getByText('Test error notification')).toBeVisible();
+    await percySnapshot(page, `Error Notification banner shown (theme: '${theme}')`);
+    await page.getByLabel('Dismiss').click();
+    await page.getByRole('alert').waitFor({ state: 'detached' });
+
+    await page.getByLabel('Review 2 Notifications').click();
+    await page.getByText('Test alert notification').waitFor();
+    await percySnapshot(page, `Notification List Modal with alert and error (theme: '${theme}')`);
+
+    // Skipping due to https://github.com/nasa/openmct/issues/6820
+    // await page.getByLabel('Dismiss notification of Test alert notification').click();
+    // await page.getByText('Test alert notification').waitFor({ state: 'detached' });
+    // await percySnapshot(page, `Notification Modal with error only (theme: '${theme}')`);
+
+    await page.getByRole('button', { name: 'Clear All Notifications', exact: true }).click();
+    await percySnapshot(page, `Notification Modal after Clear All (theme: '${theme}')`);
   });
 });
+test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
+});

src/plugins/folderView/components/GridItem.vue

@@ -42,14 +42,22 @@
     <div class="c-grid-item__details">
       <!-- Name and metadata -->
       <div class="c-grid-item__name" :title="item.model.name">{{ item.model.name }}</div>
-      <div class="c-grid-item__metadata" :title="item.type.name">
+      <div class="c-grid-item__metadata" :aria-label="item.type.name" :title="item.type.name">
         <span class="c-grid-item__metadata__type">{{ item.type.name }}</span>
       </div>
     </div>
     <div class="c-grid-item__controls">
-      <div class="is-status__indicator" :title="`This item is ${status}`"></div>
+      <div
+        class="is-status__indicator"
+        :aria-label="`This item is ${status}`"
+        :title="`This item is ${status}`"
+      ></div>
       <div class="icon-people" title="Shared"></div>
-      <button class="c-icon-button icon-info c-info-button" title="More Info"></button>
+      <button
+        class="c-icon-button icon-info c-info-button"
+        aria-label="More Info"
+        title="More Info"
+      ></button>
       <div class="icon-pointer-right c-pointer-icon"></div>
     </div>
   </a>

src/plugins/folderView/components/GridView.vue

@@ -20,12 +20,13 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="l-grid-view">
+  <div class="l-grid-view" role="grid">
     <grid-item
       v-for="(item, index) in items"
       :key="index"
       :item="item"
       :object-path="item.objectPath"
+      role="gridcell"
     />
   </div>
 </template>

src/plugins/plot/chart/MctChart.vue

@@ -22,20 +22,22 @@
 
 <template>
   <div ref="chart" class="gl-plot-chart-area">
-    <canvas :style="canvasStyle" class="js-overlay-canvas"></canvas>
-    <canvas :style="canvasStyle" class="js-main-canvas"></canvas>
-    <div ref="limitArea" class="js-limit-area">
+    <canvas :style="canvasStyle" class="js-overlay-canvas" role="img" alt="2dContext"></canvas>
+    <canvas :style="canvasStyle" class="js-main-canvas" role="img" alt="webglContext"></canvas>
+    <div ref="limitArea" class="js-limit-area" aria-hidden="true">
       <limit-label
         v-for="(limitLabel, index) in visibleLimitLabels"
         :key="index"
         :point="limitLabel.point"
         :limit="limitLabel.limit"
+        role="text"
       ></limit-label>
       <limit-line
         v-for="(limitLine, index) in visibleLimitLines"
         :key="index"
         :point="limitLine.point"
         :limit="limitLine.limit"
+        role="text"
       ></limit-line>
     </div>
   </div>

src/ui/layout/AboutDialog.vue

@@ -22,7 +22,7 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
   <div class="c-about c-about--splash">
-    <div class="c-about__image c-splash-image"></div>
+    <div class="c-about__image c-splash-image" role="img" alt="Open MCT Splash Logo"></div>
     <div class="c-about__text s-text">
       <div
         v-if="branding.aboutHtml"
@@ -40,7 +40,10 @@
             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
-            <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0"
+            <a
+              target="_blank"
+              href="http://www.apache.org/licenses/LICENSE-2.0"
+              rel="noopener noreferrer"
               >http://www.apache.org/licenses/LICENSE-2.0</a
             >.
           </p>
@@ -57,7 +60,7 @@
           </p>
         </div>
         <h2>Version Information</h2>
-        <ul class="t-info l-info s-info">
+        <ul data-testid="versionInfo" class="t-info l-info s-info">
           <li>Version: {{ buildInfo.version || 'Unknown' }}</li>
           <li>Build Date: {{ buildInfo.buildDate || 'Unknown' }}</li>
           <li>Revision: {{ buildInfo.revision || 'Unknown' }}</li>

src/ui/layout/AppLogo.vue

@@ -20,7 +20,13 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div ref="aboutLogo" class="l-shell__app-logo" @click="launchAbout"></div>
+  <div
+    ref="aboutLogo"
+    class="l-shell__app-logo"
+    role="button"
+    aria-label="About Modal"
+    @click="launchAbout"
+  ></div>
 </template>
 
 <script>