add e2e test and aria labels for controls

nasa · Feb 1, 2024 · 576c0ec · 576c0ec
1 parent 6aa4fe7
commit 576c0ec
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
@@ -63,6 +63,47 @@ test.describe('Overlay Plot', () => {
     await expect(seriesColorSwatch).toHaveCSS('background-color', 'rgb(255, 166, 61)');
   });
 
+  test('Plot legend expands by default', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7403'
+    });
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    // Assert that the legend is collapsed by default
+    await expect(page.getByLabel('Plot Legend Collapsed')).toBeVisible();
+    await expect(page.getByLabel('Plot Legend Expanded')).toBeHidden();
+    let expandDefaultValue = await page.getByLabel('Expand by Default').textContent();
+    expect(expandDefaultValue).toBe('No');
+
+    // Change the legend to expand by default
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('Expand By Default').check();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await page.reload();
+
+    // Assert that the legend is expanded on page load
+    await expect(page.getByLabel('Plot Legend Collapsed')).toBeHidden();
+    await expect(page.getByLabel('Plot Legend Expanded')).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Value' })).toBeVisible();
+    expandDefaultValue = await page.getByLabel('Expand by Default').textContent();
+    expect(expandDefaultValue).toBe('Yes');
+  });
+
   test('Limit lines persist when series is moved to another Y Axis and on refresh', async ({
     page
   }) => {

diff --git a/src/plugins/plot/inspector/PlotOptionsBrowse.vue b/src/plugins/plot/inspector/PlotOptionsBrowse.vue
@@ -98,7 +98,9 @@
           <div class="grid-cell label" title="Show the legend expanded by default">
             Expand by Default
           </div>
-          <div class="grid-cell value">{{ expandByDefault ? 'Yes' : 'No' }}</div>
+          <div aria-label="Expand by Default" class="grid-cell value">
+            {{ expandByDefault ? 'Yes' : 'No' }}
+          </div>
         </li>
         <li class="grid-row">
           <div class="grid-cell label" title="What to display in the legend when it's collapsed.">

diff --git a/src/plugins/plot/inspector/forms/LegendForm.vue b/src/plugins/plot/inspector/forms/LegendForm.vue
@@ -64,7 +64,12 @@
         Expand by default
       </div>
       <div class="grid-cell value">
-        <input v-model="expandByDefault" type="checkbox" @change="updateForm('expandByDefault')" />
+        <input
+          v-model="expandByDefault"
+          aria-label="Expand By Default"
+          type="checkbox"
+          @change="updateForm('expandByDefault')"
+        />
       </div>
     </li>
     <li class="grid-row">

diff --git a/src/plugins/plot/legend/PlotLegend.vue b/src/plugins/plot/legend/PlotLegend.vue
@@ -38,6 +38,7 @@
       <div
         v-if="!isLegendExpanded"
         class="plot-wrapper-collapsed-legend"
+        aria-label="Plot Legend Collapsed"
         :class="{ 'is-cursor-locked': cursorLocked }"
       >
         <div
@@ -57,6 +58,7 @@
       <div
         v-else
         class="plot-wrapper-expanded-legend"
+        aria-label="Plot Legend Expanded"
         :class="{ 'is-cursor-locked': cursorLocked }"
       >
         <div