Improve how time bounds are set in independent time conductor.

Fix tests for flexible layout and timestrip

e2e/appActions.js

@@ -410,23 +410,46 @@ async function setEndOffset(page, offset) {
   await setTimeConductorOffset(page, offset, true);
 }
 
-async function setTimeConductorBounds(page, startDate, endDate, isIndepdendentTime) {
+async function setTimeConductorBounds(page, startDate, endDate) {
   // Bring up the time conductor popup
-  const timeConductorMode = isIndepdendentTime
-    ? await page.locator('.c-conductor-holder--compact .c-compact-tc')
-    : await page.locator('.l-shell__time-conductor.c-compact-tc');
-  await timeConductorMode.click();
+  await page.click('.l-shell__time-conductor.c-compact-tc');
 
+  await setTimeBounds(page, startDate, endDate);
+
+  await page.keyboard.press('Enter');
+}
+
+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')).toBeVisible();
+
+  await setTimeBounds(page, startDate, endDate);
+
+  await page.keyboard.press('Enter');
+}
+
+async function setTimeBounds(page, startDate, endDate) {
   if (startDate) {
     // Fill start time
-    page.getByRole('textbox', { name: 'Start date' }).fill(startDate.toString().substring(0, 10));
-    page.getByRole('textbox', { name: 'Start time' }).fill(startDate.toString().substring(11, 19));
+    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
-    page.getByRole('textbox', { name: 'End date' }).fill(endDate.toString().substring(0, 10));
-    page.getByRole('textbox', { name: 'End time' }).fill(endDate.toString().substring(11, 19));
+    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));
   }
 }
 
@@ -542,6 +565,7 @@ module.exports = {
   setStartOffset,
   setEndOffset,
   setTimeConductorBounds,
+  setIndependentTimeConductorBounds,
   selectInspectorTab,
   waitForPlotsToRender
 };

e2e/tests/functional/planning/timestrip.e2e.spec.js

@@ -21,7 +21,11 @@
  *****************************************************************************/
 
 const { test, expect } = require('../../../pluginFixtures');
-const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../../appActions');
+const {
+  createDomainObjectWithDefaults,
+  createPlanFromJSON,
+  setIndependentTimeConductorBounds
+} = require('../../../appActions');
 
 const testPlan = {
   TEST_GROUP: [
@@ -78,9 +82,6 @@ test.describe('Time Strip', () => {
     });
 
     // Constant locators
-    const independentTimeConductorInputs = page.locator(
-      '.l-shell__main-independent-time-conductor .c-input--datetime'
-    );
     const activityBounds = page.locator('.activity-bounds');
 
     // Goto baseURL
@@ -122,9 +123,7 @@ test.describe('Time Strip', () => {
     });
 
     await test.step('TimeStrip can use the Independent Time Conductor', async () => {
-      // Activate Independent Time Conductor in Fixed Time Mode
-      await page.click('.c-toggle-switch__slider');
-      expect(await activityBounds.count()).toEqual(0);
+      expect(await activityBounds.count()).toEqual(5);
 
       // Set the independent time bounds so that only one event is shown
       const startBound = testPlan.TEST_GROUP[0].start;
@@ -132,12 +131,7 @@ test.describe('Time Strip', () => {
       const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
       const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
 
-      await independentTimeConductorInputs.nth(0).fill('');
-      await independentTimeConductorInputs.nth(0).fill(startBoundString);
-      await page.keyboard.press('Enter');
-      await independentTimeConductorInputs.nth(1).fill('');
-      await independentTimeConductorInputs.nth(1).fill(endBoundString);
-      await page.keyboard.press('Enter');
+      await setIndependentTimeConductorBounds(page, startBoundString, endBoundString);
       expect(await activityBounds.count()).toEqual(1);
     });
 
@@ -156,9 +150,6 @@ test.describe('Time Strip', () => {
       await page.click("button[title='Save']");
       await page.click("li[title='Save and Finish Editing']");
 
-      // Activate Independent Time Conductor in Fixed Time Mode
-      await page.click('.c-toggle-switch__slider');
-
       // All events should be displayed at this point because the
       // initial independent context bounds will match the global bounds
       expect(await activityBounds.count()).toEqual(5);
@@ -169,19 +160,14 @@ test.describe('Time Strip', () => {
       const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
       const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
 
-      await independentTimeConductorInputs.nth(0).fill('');
-      await independentTimeConductorInputs.nth(0).fill(startBoundString);
-      await page.keyboard.press('Enter');
-      await independentTimeConductorInputs.nth(1).fill('');
-      await independentTimeConductorInputs.nth(1).fill(endBoundString);
-      await page.keyboard.press('Enter');
+      await setIndependentTimeConductorBounds(page, startBoundString, endBoundString);
 
       // Verify that two events are displayed
       expect(await activityBounds.count()).toEqual(2);
 
       // Switch to the previous Time Strip and verify that only one event is displayed
       await page.goto(timestrip.url);
-      expect(await activityBounds.count()).toEqual(1);
+      expect(await activityBounds.count()).toEqual(5);
     });
   });
 });

e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js

@@ -21,7 +21,10 @@
  *****************************************************************************/
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+const {
+  createDomainObjectWithDefaults,
+  setIndependentTimeConductorBounds
+} = require('../../../../appActions');
 
 test.describe('Flexible Layout', () => {
   let sineWaveObject;
@@ -187,16 +190,17 @@ test.describe('Flexible Layout', () => {
     await page.locator('text=Save and Finish Editing').click();
 
     // flip on independent time conductor
-    await page.getByTitle('Enable independent Time Conductor').first().locator('label').click();
-    await page.getByRole('textbox').nth(1).fill('2021-12-30 01:11:00.000Z');
-    await page.getByRole('textbox').nth(0).fill('2021-12-30 01:01:00.000Z');
-    await page.getByRole('textbox').nth(1).click();
+    await setIndependentTimeConductorBounds(
+      page,
+      '2021-12-30 01:01:00.000Z',
+      '2021-12-30 01:11:00.000Z'
+    );
 
     // check image date
     await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
 
     // flip it off
-    await page.getByTitle('Disable independent Time Conductor').first().locator('label').click();
+    await page.getByRole('switch').click();
     // timestamp shouldn't be in the past anymore
     await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
   });