fix(#7338): Persisted styles correctly apply to StackedPlotItems on…

… mount (#7341) * refactor: use `Plot` component directly in `StackedPlotItem` template * test(e2e): fix style test for stackedplot * test(e2e): add annotation back in * test: fix unit tests * refactor: tidy up * fix: move const, remove eslint ignore * fix: apply staleness styling properly * refactor: remove unused data() * refactor: remove unused `isMissing` * refactor: remove debug statements
nasa · Jan 8, 2024 · dfba4e2 · dfba4e2
1 parent 70de736
commit dfba4e2
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 229 deletions.
diff --git a/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js b/e2e/tests/functional/plugins/styling/stackedPlotStyling.e2e.spec.js
@@ -38,10 +38,10 @@ const setBackgroundColor = '#5b0f00';
 const setTextColor = '#e6b8af';
 const defaultTextColor = '#aaaaaa'; // default text color
 const NO_STYLE_RGBA = 'rgba(0, 0, 0, 0)'; //default background color value
+const DEFAULT_PLOT_VIEW_BORDER_COLOR = '#AAAAAA';
 const setFontSize = '72px';
 const setFontWeight = '700'; //bold for monospace bold
-// eslint-disable-next-line prettier/prettier
-const setFontFamily = "\"Andale Mono\", sans-serif";
+const setFontFamily = '"Andale Mono", sans-serif';
 
 test.describe('Stacked Plot styling', () => {
   let stackedPlot;
@@ -156,91 +156,90 @@ test.describe('Stacked Plot styling', () => {
     );
   });
 
-  test.fixme(
-    'styling a child object of the flexible layout properly applies that style to only that child',
-    async ({ page }) => {
-      test.info().annotations.push({
-        type: 'issue',
-        description: 'https://github.com/nasa/openmct/issues/7338'
-      });
-      await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
-
-      await page.getByLabel('Edit').click();
-
-      await page.getByRole('tab', { name: 'Styles' }).click();
-
-      //Check default styles for SWG1 and SWG2
-      await checkStyles(
-        NO_STYLE_RGBA,
-        NO_STYLE_RGBA,
-        hexToRGB(defaultTextColor),
-        page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
-      );
-
-      await checkStyles(
-        NO_STYLE_RGBA,
-        NO_STYLE_RGBA,
-        hexToRGB(defaultTextColor),
-        page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
-      );
-
-      // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
-      await setStyles(
-        page,
-        setBorderColor,
-        setBackgroundColor,
-        setTextColor,
-        page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
-      );
-
-      //Set Font Styles on SWG1 but not SWG2
-      await page.getByLabel('Stacked Plot Item Sine Wave Generator 1').click();
-      //Set Font Size to 72
-      await page.getByLabel('Set Font Size').click();
-      await page.getByRole('menuitem', { name: '72px' }).click();
-
-      //Set Font Type to Monospace Bold. See setFontWeight and setFontFamily variables
-      await page.getByLabel('Set Font Type').click();
-      await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
-
-      // Save Flexible Layout
-      await page.getByRole('button', { name: 'Save' }).click();
-      await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
-
-      // Check styles on StackedPlot1
-      await checkStyles(
-        hexToRGB(setBorderColor),
-        hexToRGB(setBackgroundColor),
-        hexToRGB(setTextColor),
-        page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
-      );
-
-      // Check styles on StackedPlot2
-      await checkStyles(
-        NO_STYLE_RGBA,
-        NO_STYLE_RGBA,
-        hexToRGB(defaultTextColor),
-        page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
-      );
-
-      // Reload page and verify that styles persist
-      await page.reload({ waitUntil: 'domcontentloaded' });
-
-      // Check styles on StackedPlot1
-      await checkStyles(
-        hexToRGB(setBorderColor),
-        hexToRGB(setBackgroundColor),
-        hexToRGB(setTextColor),
-        page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
-      );
-
-      // Check styles on StackedPlot2
-      await checkStyles(
-        NO_STYLE_RGBA,
-        NO_STYLE_RGBA,
-        hexToRGB(defaultTextColor),
-        page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
-      );
-    }
-  );
+  test('styling a child object of the flexible layout properly applies that style to only that child', async ({
+    page
+  }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7338'
+    });
+    await page.goto(stackedPlot.url, { waitUntil: 'domcontentloaded' });
+
+    await page.getByLabel('Edit').click();
+
+    await page.getByRole('tab', { name: 'Styles' }).click();
+
+    //Check default styles for SWG1 and SWG2
+    await checkStyles(
+      NO_STYLE_RGBA,
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+    );
+
+    await checkStyles(
+      NO_STYLE_RGBA,
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 2')
+    );
+
+    // Set styles using setStyles function on StackedPlot1 but not StackedPlot2
+    await setStyles(
+      page,
+      setBorderColor,
+      setBackgroundColor,
+      setTextColor,
+      page.getByLabel('Stacked Plot Item Sine Wave Generator 1')
+    );
+
+    //Set Font Styles on SWG1 but not SWG2
+    await page.getByLabel('Stacked Plot Item Sine Wave Generator 1').click();
+    //Set Font Size to 72
+    await page.getByLabel('Set Font Size').click();
+    await page.getByRole('menuitem', { name: '72px' }).click();
+
+    //Set Font Type to Monospace Bold. See setFontWeight and setFontFamily variables
+    await page.getByLabel('Set Font Type').click();
+    await page.getByRole('menuitem', { name: 'Monospace Bold' }).click();
+
+    // Save Flexible Layout
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('Plot Container Style Target').first()
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(DEFAULT_PLOT_VIEW_BORDER_COLOR),
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('Plot Container Style Target').nth(1)
+    );
+
+    // Reload page and verify that styles persist
+    await page.reload({ waitUntil: 'domcontentloaded' });
+
+    // Check styles on StackedPlot1
+    await checkStyles(
+      hexToRGB(setBorderColor),
+      hexToRGB(setBackgroundColor),
+      hexToRGB(setTextColor),
+      page.getByLabel('Plot Container Style Target').first()
+    );
+
+    // Check styles on StackedPlot2
+    await checkStyles(
+      hexToRGB(DEFAULT_PLOT_VIEW_BORDER_COLOR),
+      NO_STYLE_RGBA,
+      hexToRGB(defaultTextColor),
+      page.getByLabel('Plot Container Style Target').nth(1)
+    );
+  });
 });
diff --git a/src/plugins/plot/PlotView.vue b/src/plugins/plot/PlotView.vue
@@ -20,11 +20,18 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div ref="plotWrapper" class="c-plot holder holder-plot has-control-bar" :class="staleClass">
+  <div
+    ref="plotWrapper"
+    class="c-plot holder holder-plot has-control-bar"
+    :class="isStale && 'is-stale'"
+  >
     <div
       ref="plotContainer"
       class="l-view-section u-style-receiver js-style-receiver"
-      :class="{ 's-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced' }"
+      aria-label="Plot Container Style Target"
+      :class="{
+        's-status-timeconductor-unsynced': status === 'timeconductor-unsynced'
+      }"
     >
       <progress-bar
         v-show="!!loading"
@@ -78,7 +85,7 @@ export default {
     PlotLegend
   },
   mixins: [stalenessMixin],
-  inject: ['openmct', 'domainObject', 'path'],
+  inject: ['openmct', 'domainObject'],
   props: {
     options: {
       type: Object,
@@ -157,9 +164,6 @@ export default {
     gridLinesProp() {
       return this.gridLines ?? !this.options.compact;
     },
-    staleClass() {
-      return this.isStale ? 'is-stale' : '';
-    },
     plotLegendPositionClass() {
       return this.position ? `plot-legend-${this.position}` : '';
     },