refactor the appActions a bit

e2e/appActions.js

@@ -375,174 +375,6 @@ async function _isInEditMode(page, identifier) {
   return await page.evaluate(() => window.openmct.editor.isEditing());
 }
 
-/**
- * Set the time conductor mode to either fixed timespan or realtime mode.
- * @param {import('@playwright/test').Page} page
- * @param {boolean} [isFixedTimespan=true] true for fixed timespan mode, false for realtime mode; default is true
- */
-async function setTimeConductorMode(page, isFixedTimespan = true) {
-  // Click 'mode' button
-  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
-  await page.getByRole('button', { name: 'Time Conductor Mode Menu' }).click();
-  // Switch time conductor mode
-  if (isFixedTimespan) {
-    await page.getByRole('menuitem', { name: /Fixed Timespan/ }).click();
-  } else {
-    await page.getByRole('menuitem', { name: /Real-Time/ }).click();
-  }
-}
-
-/**
- * Set the time conductor to fixed timespan mode
- * @param {import('@playwright/test').Page} page
- */
-async function setFixedTimeMode(page) {
-  await setTimeConductorMode(page, true);
-}
-
-/**
- * Set the time conductor to realtime mode
- * @param {import('@playwright/test').Page} page
- */
-async function setRealTimeMode(page) {
-  await setTimeConductorMode(page, false);
-}
-
-/**
- * @typedef {Object} OffsetValues
- * @property {string | undefined} startHours
- * @property {string | undefined} startMins
- * @property {string | undefined} startSecs
- * @property {string | undefined} endHours
- * @property {string | undefined} endMins
- * @property {string | undefined} endSecs
- */
-
-/**
- * Set the values (hours, mins, secs) for the TimeConductor offsets when in realtime mode
- * @param {import('@playwright/test').Page} page
- * @param {OffsetValues} offset
- * @param {import('@playwright/test').Locator} offsetButton
- */
-async function setTimeConductorOffset(
-  page,
-  { startHours, startMins, startSecs, endHours, endMins, endSecs }
-) {
-  if (startHours) {
-    await page.getByRole('spinbutton', { name: 'Start offset hours' }).fill(startHours);
-  }
-
-  if (startMins) {
-    await page.getByRole('spinbutton', { name: 'Start offset minutes' }).fill(startMins);
-  }
-
-  if (startSecs) {
-    await page.getByRole('spinbutton', { name: 'Start offset seconds' }).fill(startSecs);
-  }
-
-  if (endHours) {
-    await page.getByRole('spinbutton', { name: 'End offset hours' }).fill(endHours);
-  }
-
-  if (endMins) {
-    await page.getByRole('spinbutton', { name: 'End offset minutes' }).fill(endMins);
-  }
-
-  if (endSecs) {
-    await page.getByRole('spinbutton', { name: 'End offset seconds' }).fill(endSecs);
-  }
-
-  // Click the check button
-  await page.locator('.pr-time-input--buttons .icon-check').click();
-}
-
-/**
- * Set the values (hours, mins, secs) for the start time offset when in realtime mode
- * @param {import('@playwright/test').Page} page
- * @param {OffsetValues} offset
- */
-async function setStartOffset(page, offset) {
-  // Click 'mode' button
-  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
-  await setTimeConductorOffset(page, offset);
-}
-
-/**
- * Set the values (hours, mins, secs) for the end time offset when in realtime mode
- * @param {import('@playwright/test').Page} page
- * @param {OffsetValues} offset
- */
-async function setEndOffset(page, offset) {
-  // Click 'mode' button
-  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
-  await setTimeConductorOffset(page, offset);
-}
-
-/**
- * Set the time conductor bounds in fixed time mode
- *
- * NOTE: Unless explicitly testing the Time Conductor itself, it is advised to instead
- * navigate directly to the object with the desired time bounds using `navigateToObjectWithFixedTimeBounds()`.
- * @param {import('@playwright/test').Page} page
- * @param {string} startDate
- * @param {string} endDate
- */
-async function setTimeConductorBounds(page, startDate, endDate) {
-  // Bring up the time conductor popup
-  expect(await page.locator('.l-shell__time-conductor.c-compact-tc').count()).toBe(1);
-  await page.click('.l-shell__time-conductor.c-compact-tc');
-
-  await setTimeBounds(page, startDate, endDate);
-
-  await page.keyboard.press('Enter');
-}
-
-/**
- * Set the independent time conductor bounds in fixed time mode
- * @param {import('@playwright/test').Page} page
- * @param {string} startDate
- * @param {string} endDate
- */
-async function setIndependentTimeConductorBounds(page, startDate, endDate) {
-  // Activate Independent Time Conductor in Fixed Time Mode
-  await page.getByRole('switch').click();
-
-  // Bring up the time conductor popup
-  await page.click('.c-conductor-holder--compact .c-compact-tc');
-  await expect(page.locator('.itc-popout')).toBeInViewport();
-
-  await setTimeBounds(page, startDate, endDate);
-
-  await page.keyboard.press('Enter');
-}
-
-/**
- * Set the bounds of the visible conductor in fixed time mode
- * @private
- * @param {import('@playwright/test').Page} page
- * @param {string} startDate
- * @param {string} endDate
- */
-async function setTimeBounds(page, startDate, endDate) {
-  if (startDate) {
-    // Fill start time
-    await page
-      .getByRole('textbox', { name: 'Start date' })
-      .fill(startDate.toString().substring(0, 10));
-    await page
-      .getByRole('textbox', { name: 'Start time' })
-      .fill(startDate.toString().substring(11, 19));
-  }
-
-  if (endDate) {
-    // Fill end time
-    await page.getByRole('textbox', { name: 'End date' }).fill(endDate.toString().substring(0, 10));
-    await page
-      .getByRole('textbox', { name: 'End time' })
-      .fill(endDate.toString().substring(11, 19));
-  }
-}
-
 /**
  * Waits and asserts that all plot series data on the page
  * is loaded and drawn.
@@ -561,72 +393,6 @@ async function waitForPlotsToRender(page) {
   }
 }
 
-/**
- * @typedef {Object} PlotPixel
- * @property {number} r The value of the red channel (0-255)
- * @property {number} g The value of the green channel (0-255)
- * @property {number} b The value of the blue channel (0-255)
- * @property {number} a The value of the alpha channel (0-255)
- * @property {string} strValue The rgba string value of the pixel
- */
-
-/**
- * Wait for all plots to render and then retrieve and return an array
- * of canvas plot pixel data (RGBA values).
- * @param {import('@playwright/test').Page} page
- * @param {string} canvasSelector The selector for the canvas element
- * @return {Promise<PlotPixel[]>}
- */
-async function getCanvasPixels(page, canvasSelector) {
-  const getTelemValuePromise = new Promise((resolve) =>
-    page.exposeFunction('getCanvasValue', resolve)
-  );
-  const canvasHandle = await page.evaluateHandle(
-    (canvas) => document.querySelector(canvas),
-    canvasSelector
-  );
-  const canvasContextHandle = await page.evaluateHandle(
-    (canvas) => canvas.getContext('2d'),
-    canvasHandle
-  );
-
-  await waitForPlotsToRender(page);
-  await page.evaluate(
-    ([canvas, ctx]) => {
-      // The document canvas is where the plot points and lines are drawn.
-      // The only way to access the canvas is using document (using page.evaluate)
-      /** @type {ImageData} */
-      const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-      /** @type {number[]} */
-      const imageDataValues = Object.values(data);
-      /** @type {PlotPixel[]} */
-      const plotPixels = [];
-      // Each pixel consists of four values within the ImageData.data array. The for loop iterates by multiples of four.
-      // The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
-      for (let i = 0; i < imageDataValues.length; ) {
-        if (imageDataValues[i] > 0) {
-          plotPixels.push({
-            r: imageDataValues[i],
-            g: imageDataValues[i + 1],
-            b: imageDataValues[i + 2],
-            a: imageDataValues[i + 3],
-            strValue: `rgb(${imageDataValues[i]}, ${imageDataValues[i + 1]}, ${
-              imageDataValues[i + 2]
-            }, ${imageDataValues[i + 3]})`
-          });
-        }
-
-        i = i + 4;
-      }
-
-      window.getCanvasValue(plotPixels);
-    },
-    [canvasHandle, canvasContextHandle]
-  );
-
-  return getTelemValuePromise;
-}
-
 /**
  * @param {import('@playwright/test').Page} page
  * @param {string} myItemsFolderName
@@ -650,17 +416,10 @@ module.exports = {
   createPlanFromJSON,
   expandEntireTree,
   expandTreePaneItemByName,
-  getCanvasPixels,
   getHashUrlToDomainObject,
   getFocusedObjectUuid,
   navigateToObjectWithFixedTimeBounds,
   openObjectTreeContextMenu,
-  setFixedTimeMode,
-  setRealTimeMode,
-  setStartOffset,
-  setEndOffset,
-  setTimeConductorBounds,
-  setIndependentTimeConductorBounds,
   waitForPlotsToRender,
   renameObjectFromContextMenu
 };

e2e/helper/timeConductorUtils.js

@@ -0,0 +1,178 @@
+/**
+ * Set the time conductor to fixed timespan mode
+ * @param {import('@playwright/test').Page} page
+ */
+async function setFixedTimeMode(page) {
+  await setTimeConductorMode(page, true);
+}
+
+/**
+ * Set the time conductor to realtime mode
+ * @param {import('@playwright/test').Page} page
+ */
+async function setRealTimeMode(page) {
+  await setTimeConductorMode(page, false);
+}
+
+/**
+ * @typedef {Object} OffsetValues
+ * @property {string | undefined} startHours
+ * @property {string | undefined} startMins
+ * @property {string | undefined} startSecs
+ * @property {string | undefined} endHours
+ * @property {string | undefined} endMins
+ * @property {string | undefined} endSecs
+ */
+
+/**
+ * Set the values (hours, mins, secs) for the TimeConductor offsets when in realtime mode
+ * @param {import('@playwright/test').Page} page
+ * @param {OffsetValues} offset
+ * @param {import('@playwright/test').Locator} offsetButton
+ */
+async function setTimeConductorOffset(
+  page,
+  { startHours, startMins, startSecs, endHours, endMins, endSecs }
+) {
+  if (startHours) {
+    await page.getByRole('spinbutton', { name: 'Start offset hours' }).fill(startHours);
+  }
+
+  if (startMins) {
+    await page.getByRole('spinbutton', { name: 'Start offset minutes' }).fill(startMins);
+  }
+
+  if (startSecs) {
+    await page.getByRole('spinbutton', { name: 'Start offset seconds' }).fill(startSecs);
+  }
+
+  if (endHours) {
+    await page.getByRole('spinbutton', { name: 'End offset hours' }).fill(endHours);
+  }
+
+  if (endMins) {
+    await page.getByRole('spinbutton', { name: 'End offset minutes' }).fill(endMins);
+  }
+
+  if (endSecs) {
+    await page.getByRole('spinbutton', { name: 'End offset seconds' }).fill(endSecs);
+  }
+
+  // Click the check button
+  await page.locator('.pr-time-input--buttons .icon-check').click();
+}
+
+/**
+ * Set the values (hours, mins, secs) for the start time offset when in realtime mode
+ * @param {import('@playwright/test').Page} page
+ * @param {OffsetValues} offset
+ */
+async function setStartOffset(page, offset) {
+  // Click 'mode' button
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+  await setTimeConductorOffset(page, offset);
+}
+
+/**
+ * Set the values (hours, mins, secs) for the end time offset when in realtime mode
+ * @param {import('@playwright/test').Page} page
+ * @param {OffsetValues} offset
+ */
+async function setEndOffset(page, offset) {
+  // Click 'mode' button
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+  await setTimeConductorOffset(page, offset);
+}
+
+/**
+ * Set the time conductor bounds in fixed time mode
+ *
+ * NOTE: Unless explicitly testing the Time Conductor itself, it is advised to instead
+ * navigate directly to the object with the desired time bounds using `navigateToObjectWithFixedTimeBounds()`.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} startDate
+ * @param {string} endDate
+ */
+async function setTimeConductorBounds(page, startDate, endDate) {
+  // Bring up the time conductor popup
+  expect(await page.locator('.l-shell__time-conductor.c-compact-tc').count()).toBe(1);
+  await page.click('.l-shell__time-conductor.c-compact-tc');
+
+  await setTimeBounds(page, startDate, endDate);
+
+  await page.keyboard.press('Enter');
+}
+
+/**
+ * Set the independent time conductor bounds in fixed time mode
+ * @param {import('@playwright/test').Page} page
+ * @param {string} startDate
+ * @param {string} endDate
+ */
+async function setIndependentTimeConductorBounds(page, startDate, endDate) {
+  // Activate Independent Time Conductor in Fixed Time Mode
+  await page.getByRole('switch').click();
+
+  // Bring up the time conductor popup
+  await page.click('.c-conductor-holder--compact .c-compact-tc');
+  await expect(page.locator('.itc-popout')).toBeInViewport();
+
+  await setTimeBounds(page, startDate, endDate);
+
+  await page.keyboard.press('Enter');
+}
+
+/**
+ * Set the bounds of the visible conductor in fixed time mode
+ * @private
+ * @param {import('@playwright/test').Page} page
+ * @param {string} startDate
+ * @param {string} endDate
+ */
+async function setTimeBounds(page, startDate, endDate) {
+  if (startDate) {
+    // Fill start time
+    await page
+      .getByRole('textbox', { name: 'Start date' })
+      .fill(startDate.toString().substring(0, 10));
+    await page
+      .getByRole('textbox', { name: 'Start time' })
+      .fill(startDate.toString().substring(11, 19));
+  }
+
+  if (endDate) {
+    // Fill end time
+    await page.getByRole('textbox', { name: 'End date' }).fill(endDate.toString().substring(0, 10));
+    await page
+      .getByRole('textbox', { name: 'End time' })
+      .fill(endDate.toString().substring(11, 19));
+  }
+}
+
+/**
+ * Set the time conductor mode to either fixed timespan or realtime mode.
+ * @param {import('@playwright/test').Page} page
+ * @param {boolean} [isFixedTimespan=true] true for fixed timespan mode, false for realtime mode; default is true
+ */
+async function setTimeConductorMode(page, isFixedTimespan = true) {
+  // Click 'mode' button
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+  await page.getByRole('button', { name: 'Time Conductor Mode Menu' }).click();
+  // Switch time conductor mode
+  if (isFixedTimespan) {
+    await page.getByRole('menuitem', { name: /Fixed Timespan/ }).click();
+  } else {
+    await page.getByRole('menuitem', { name: /Real-Time/ }).click();
+  }
+}
+
+// eslint-disable-next-line no-undef
+module.exports = {
+  expect,
+  setFixedTimeMode,
+  setRealTimeMode,
+  setStartOffset,
+  setEndOffset,
+  setTimeConductorBounds,
+  setIndependentTimeConductorBounds
+};

e2e/pluginFixtures.js

@@ -27,7 +27,7 @@
  */
 
 const { test, expect, request } = require('./baseFixtures');
-// const { createDomainObjectWithDefaults } = require('./appActions');
+const { waitForPlotsToRender } = require('./appActions');
 const path = require('path');
 
 /**
@@ -142,9 +142,6 @@ exports.test = test.extend({
   }
 });
 
-exports.expect = expect;
-exports.request = request;
-
 /**
  * Takes a readable stream and returns a string.
  * @param {ReadableStream} readable - the readable stream
@@ -158,3 +155,76 @@ exports.streamToString = async function (readable) {
 
   return result;
 };
+
+/**
+ * @typedef {Object} PlotPixel
+ * @property {number} r The value of the red channel (0-255)
+ * @property {number} g The value of the green channel (0-255)
+ * @property {number} b The value of the blue channel (0-255)
+ * @property {number} a The value of the alpha channel (0-255)
+ * @property {string} strValue The rgba string value of the pixel
+ */
+
+/**
+ * Wait for all plots to render and then retrieve and return an array
+ * of canvas plot pixel data (RGBA values).
+ * @param {import('@playwright/test').Page} page
+ * @param {string} canvasSelector The selector for the canvas element
+ * @return {Promise<PlotPixel[]>}
+ */
+async function getCanvasPixels(page, canvasSelector) {
+  const getTelemValuePromise = new Promise((resolve) =>
+    page.exposeFunction('getCanvasValue', resolve)
+  );
+  const canvasHandle = await page.evaluateHandle(
+    (canvas) => document.querySelector(canvas),
+    canvasSelector
+  );
+  const canvasContextHandle = await page.evaluateHandle(
+    (canvas) => canvas.getContext('2d'),
+    canvasHandle
+  );
+
+  await waitForPlotsToRender(page);
+  await page.evaluate(
+    ([canvas, ctx]) => {
+      // The document canvas is where the plot points and lines are drawn.
+      // The only way to access the canvas is using document (using page.evaluate)
+      /** @type {ImageData} */
+      const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+      /** @type {number[]} */
+      const imageDataValues = Object.values(data);
+      /** @type {PlotPixel[]} */
+      const plotPixels = [];
+      // Each pixel consists of four values within the ImageData.data array. The for loop iterates by multiples of four.
+      // The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
+      for (let i = 0; i < imageDataValues.length; ) {
+        if (imageDataValues[i] > 0) {
+          plotPixels.push({
+            r: imageDataValues[i],
+            g: imageDataValues[i + 1],
+            b: imageDataValues[i + 2],
+            a: imageDataValues[i + 3],
+            strValue: `rgb(${imageDataValues[i]}, ${imageDataValues[i + 1]}, ${
+              imageDataValues[i + 2]
+            }, ${imageDataValues[i + 3]})`
+          });
+        }
+
+        i = i + 4;
+      }
+
+      window.getCanvasValue(plotPixels);
+    },
+    [canvasHandle, canvasContextHandle]
+  );
+
+  return getTelemValuePromise;
+}
+
+// eslint-disable-next-line no-undef
+module.exports = {
+  expect,
+  request,
+  getCanvasPixels
+};

e2e/tests/framework/appActions.e2e.spec.js

@@ -166,4 +166,13 @@ test.describe('AppActions', () => {
     const locatorTreeCollapsedItems = locatorTree.locator('role=treeitem[expanded=false]');
     expect(await locatorTreeCollapsedItems.count()).toBe(0);
   });
+  test.fixme('createExampleTelemetryObject', async ({ page }) => {});
+  test.fixme('createPlanFromJSON', async ({ page }) => {});
+  test.fixme('expandTreePaneItemByName', async ({ page }) => {});
+  test.fixme('getHashUrlToDomainObject', async ({ page }) => {});
+  test.fixme('getFocusedObjectUuid', async ({ page }) => {});
+  test.fixme('navigateToObjectWithFixedTimeBounds', async ({ page }) => {});
+  test.fixme('openObjectTreeContextMenu', async ({ page }) => {});
+  test.fixme('waitForPlotsToRender', async ({ page }) => {});
+  test.fixme('renameObjectFromContextMenu', async ({ page }) => {});
 });

e2e/tests/framework/baseFixtures.e2e.spec.js

@@ -30,7 +30,8 @@ const { test } = require('../../baseFixtures.js');
 
 test.describe('baseFixtures tests', () => {
   //Skip this test for now https://github.com/nasa/openmct/issues/6785
-  test.fixme('Verify that tests fail if console.error is thrown', async ({ page }) => {
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip('Verify that tests fail if console.error is thrown', async ({ page }) => {
     test.fail();
     //Go to baseURL
     await page.goto('./', { waitUntil: 'domcontentloaded' });

e2e/tests/functional/plugins/clocks/remoteClock.e2e.spec.js

@@ -20,22 +20,23 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// FIXME: Remove this eslint exception once tests are implemented
+// Note: this is not currently possible with openmct.js. Please do not attempt to run these tests until
+// we've implemented openmct.js
+//
 // eslint-disable-next-line no-unused-vars
-const { test, expect } = require('../../../../baseFixtures');
+// const { test, expect } = require('../../../../baseFixtures');
 
-test.describe('Remote Clock', () => {
-  // eslint-disable-next-line require-await
-  test.fixme('blocks historical requests until first tick is received', async ({ page }) => {
-    test.info().annotations.push({
-      type: 'issue',
-      description: 'https://github.com/nasa/openmct/issues/5221'
-    });
-    // addInitScript to with remote clock
-    // Switch time conductor mode to 'remote clock'
-    // Navigate to telemetry
-    // Verify that the plot renders historical data within the correct bounds
-    // Refresh the page
-    // Verify again that the plot renders historical data within the correct bounds
-  });
-});
+// test.describe('Remote Clock', () => {
+//   test.fixme('blocks historical requests until first tick is received', async ({ page }) => {
+//     test.info().annotations.push({
+//       type: 'issue',
+//       description: 'https://github.com/nasa/openmct/issues/5221'
+//     });
+//     // addInitScript to with remote clock
+//     // Switch time conductor mode to 'remote clock'
+//     // Navigate to telemetry
+//     // Verify that the plot renders historical data within the correct bounds
+//     // Refresh the page
+//     // Verify again that the plot renders historical data within the correct bounds
+//   });
+// });