fix(e2e): Stabilize ITC tests (#6933)

* fix(ITC): initialize ITC in `created()` hook

* fix(e2e): stabilize ITC tests

* docs: add JSDocs

* refactor: lint:fix

* test(e2e): add comment and assertion

* refactor: lint:fix

e2e/appActions.js

@@ -480,8 +480,18 @@ async function setEndOffset(page, offset) {
   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);
@@ -489,20 +499,31 @@ async function setTimeConductorBounds(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 expect(page.locator('.itc-popout')).toBeVisible();
 
   await setTimeBounds(page, startDate, endDate);
 
   await page.keyboard.press('Enter');
 }
 
+/**
+ * Set the bounds of the visible conductor in fixed time mode
+ * @param {import('@playwright/test').Page} page
+ * @param {string} startDate
+ * @param {string} endDate
+ */
 async function setTimeBounds(page, startDate, endDate) {
   if (startDate) {
     // Fill start time

e2e/tests/functional/plugins/plot/tagging.e2e.spec.js

@@ -91,8 +91,10 @@ test.describe('Plot Tagging', () => {
     await expect(page.getByText('No tags to display for this item')).toBeVisible();
 
     const canvas = page.locator('canvas').nth(1);
-
     //Wait for canvas to stabilize.
+    await waitForPlotsToRender(page);
+
+    await expect(canvas).toBeInViewport();
     await canvas.hover({ trial: true });
 
     // click on the tagged plot point

src/plugins/timeConductor/independent/IndependentTimeConductor.vue

@@ -194,7 +194,7 @@ export default {
       deep: true
     }
   },
-  mounted() {
+  created() {
     this.initialize();
   },
   beforeUnmount() {