openmct/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2024, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

import {
  setEndOffset,
  setFixedTimeMode,
  setRealTimeMode,
  setStartOffset
} from '../../../../appActions.js';
import { expect, test } from '../../../../pluginFixtures.js';

test.describe('Time conductor operations', () => {
  const DAY = '2024-01-01';
  const DAY_AFTER = '2024-01-02';
  const ONE_O_CLOCK = '01:00:00';
  const TWO_O_CLOCK = '02:00:00';

  test.beforeEach(async ({ page }) => {
    // Go to baseURL
    await page.goto('./', { waitUntil: 'domcontentloaded' });
  });

  test('validate date and time inputs are validated on input event', async ({ page }) => {
    const submitButtonLocator = page.getByLabel('Submit time bounds');

    // Open the time conductor popup
    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();

    await test.step('invalid start date disables submit button', async () => {
      const initialStartDate = await page.getByLabel('Start date').inputValue();
      const invalidStartDate = `${initialStartDate.substring(0, 5)}${initialStartDate.substring(6)}`;

      await page.getByLabel('Start date').fill(invalidStartDate);
      await expect(submitButtonLocator).toBeDisabled();
      await page.getByLabel('Start date').fill(initialStartDate);
      await expect(submitButtonLocator).toBeEnabled();
    });

    await test.step('invalid start time disables submit button', async () => {
      const initialStartTime = await page.getByLabel('Start time').inputValue();
      const invalidStartTime = `${initialStartTime.substring(0, 5)}${initialStartTime.substring(6)}`;

      await page.getByLabel('Start time').fill(invalidStartTime);
      await expect(submitButtonLocator).toBeDisabled();
      await page.getByLabel('Start time').fill(initialStartTime);
      await expect(submitButtonLocator).toBeEnabled();
    });

    await test.step('disable/enable submit button also works with multiple invalid inputs', async () => {
      const initialEndDate = await page.getByLabel('End date').inputValue();
      const invalidEndDate = `${initialEndDate.substring(0, 5)}${initialEndDate.substring(6)}`;
      const initialStartTime = await page.getByLabel('Start time').inputValue();
      const invalidStartTime = `${initialStartTime.substring(0, 5)}${initialStartTime.substring(6)}`;

      await page.getByLabel('Start time').fill(invalidStartTime);
      await expect(submitButtonLocator).toBeDisabled();
      await page.getByLabel('End date').fill(invalidEndDate);
      await expect(submitButtonLocator).toBeDisabled();
      await page.getByLabel('End date').fill(initialEndDate);
      await expect(submitButtonLocator).toBeDisabled();
      await page.getByLabel('Start time').fill(initialStartTime);
      await expect(submitButtonLocator).toBeEnabled();
    });
  });

  test('validate date and time inputs validation is reported on change event', async ({ page }) => {
    // Open the time conductor popup
    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();

    await test.step('invalid start date is reported on change event, not on input event', async () => {
      const initialStartDate = await page.getByLabel('Start date').inputValue();
      const invalidStartDate = `${initialStartDate.substring(0, 5)}${initialStartDate.substring(6)}`;

      await page.getByLabel('Start date').fill(invalidStartDate);
      await expect(page.getByLabel('Start date')).not.toHaveAttribute('title', 'Invalid Date');
      await page.getByLabel('Start date').press('Tab');
      await expect(page.getByLabel('Start date')).toHaveAttribute('title', 'Invalid Date');
      await page.getByLabel('Start date').fill(initialStartDate);
      await expect(page.getByLabel('Start date')).not.toHaveAttribute('title', 'Invalid Date');
    });

    await test.step('invalid start time is reported on change event, not on input event', async () => {
      const initialStartTime = await page.getByLabel('Start time').inputValue();
      const invalidStartTime = `${initialStartTime.substring(0, 5)}${initialStartTime.substring(6)}`;

      await page.getByLabel('Start time').fill(invalidStartTime);
      await expect(page.getByLabel('Start time')).not.toHaveAttribute('title', 'Invalid Time');
      await page.getByLabel('Start time').press('Tab');
      await expect(page.getByLabel('Start time')).toHaveAttribute('title', 'Invalid Time');
      await page.getByLabel('Start time').fill(initialStartTime);
      await expect(page.getByLabel('Start time')).not.toHaveAttribute('title', 'Invalid Time');
    });

    await test.step('invalid end date is reported on change event, not on input event', async () => {
      const initialEndDate = await page.getByLabel('End date').inputValue();
      const invalidEndDate = `${initialEndDate.substring(0, 5)}${initialEndDate.substring(6)}`;

      await page.getByLabel('End date').fill(invalidEndDate);
      await expect(page.getByLabel('End date')).not.toHaveAttribute('title', 'Invalid Date');
      await page.getByLabel('End date').press('Tab');
      await expect(page.getByLabel('End date')).toHaveAttribute('title', 'Invalid Date');
      await page.getByLabel('End date').fill(initialEndDate);
      await expect(page.getByLabel('End date')).not.toHaveAttribute('title', 'Invalid Date');
    });

    await test.step('invalid end time is reported on change event, not on input event', async () => {
      const initialEndTime = await page.getByLabel('End time').inputValue();
      const invalidEndTime = `${initialEndTime.substring(0, 5)}${initialEndTime.substring(6)}`;

      await page.getByLabel('End time').fill(invalidEndTime);
      await expect(page.getByLabel('End time')).not.toHaveAttribute('title', 'Invalid Time');
      await page.getByLabel('End time').press('Tab');
      await expect(page.getByLabel('End time')).toHaveAttribute('title', 'Invalid Time');
      await page.getByLabel('End time').fill(initialEndTime);
      await expect(page.getByLabel('End time')).not.toHaveAttribute('title', 'Invalid Time');
    });
  });

  test('validate start time does not exceed end time on submit', async ({ page }) => {
    // Open the time conductor popup
    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();

    // FIXME: https://github.com/nasa/openmct/pull/7818
    // eslint-disable-next-line playwright/no-wait-for-timeout
    await page.waitForTimeout(500);

    await page.getByLabel('Start date').fill(DAY);
    await page.getByLabel('Start time').fill(TWO_O_CLOCK);
    await page.getByLabel('End date').fill(DAY);
    await page.getByLabel('End time').fill(ONE_O_CLOCK);
    await page.getByLabel('Submit time bounds').click();

    await expect(page.getByLabel('Start date')).toHaveAttribute(
      'title',
      'Specified start date exceeds end bound'
    );
    await expect(page.getByLabel('Start bounds')).not.toHaveText(`${DAY} ${TWO_O_CLOCK}.000Z`);
    await expect(page.getByLabel('End bounds')).not.toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);

    await page.getByLabel('Start date').fill(DAY);
    await page.getByLabel('Start time').fill(ONE_O_CLOCK);
    await page.getByLabel('End date').fill(DAY);
    await page.getByLabel('End time').fill(TWO_O_CLOCK);
    await page.getByLabel('Submit time bounds').click();

    await expect(page.getByLabel('Start bounds')).toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
    await expect(page.getByLabel('End bounds')).toHaveText(`${DAY} ${TWO_O_CLOCK}.000Z`);
  });

  test('validate start datetime does not exceed end datetime on submit', async ({ page }) => {
    // Open the time conductor popup
    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();

    // FIXME: https://github.com/nasa/openmct/pull/7818
    // eslint-disable-next-line playwright/no-wait-for-timeout
    await page.waitForTimeout(500);

    await page.getByLabel('Start date').fill(DAY_AFTER);
    await page.getByLabel('Start time').fill(ONE_O_CLOCK);
    await page.getByLabel('End date').fill(DAY);
    await page.getByLabel('End time').fill(ONE_O_CLOCK);
    await page.getByLabel('Submit time bounds').click();

    await expect(page.getByLabel('Start date')).toHaveAttribute(
      'title',
      'Specified start date exceeds end bound'
    );
    await expect(page.getByLabel('Start bounds')).not.toHaveText(
      `${DAY_AFTER} ${ONE_O_CLOCK}.000Z`
    );
    await expect(page.getByLabel('End bounds')).not.toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);

    await page.getByLabel('Start date').fill(DAY);
    await page.getByLabel('Start time').fill(ONE_O_CLOCK);
    await page.getByLabel('End date').fill(DAY_AFTER);
    await page.getByLabel('End time').fill(ONE_O_CLOCK);
    await page.getByLabel('Submit time bounds').click();

    await expect(page.getByLabel('Start bounds')).toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
    await expect(page.getByLabel('End bounds')).toHaveText(`${DAY_AFTER} ${ONE_O_CLOCK}.000Z`);
  });

  test('cancelling form does not set bounds', async ({ page }) => {
    test.info().annotations.push({
      type: 'issue',
      description: 'https://github.com/nasa/openmct/issues/7791'
    });

    // Open the time conductor popup
    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();

    await page.getByLabel('Start date').fill(DAY);
    await page.getByLabel('Start time').fill(ONE_O_CLOCK);
    await page.getByLabel('End date').fill(DAY_AFTER);
    await page.getByLabel('End time').fill(ONE_O_CLOCK);
    await page.getByLabel('Discard changes and close time popup').click();

    await expect(page.getByLabel('Start bounds')).not.toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
    await expect(page.getByLabel('End bounds')).not.toHaveText(`${DAY_AFTER} ${ONE_O_CLOCK}.000Z`);

    // Open the time conductor popup
    await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();

    await page.getByLabel('Start date').fill(DAY);
    await page.getByLabel('Start time').fill(ONE_O_CLOCK);
    await page.getByLabel('End date').fill(DAY_AFTER);
    await page.getByLabel('End time').fill(ONE_O_CLOCK);
    await page.getByLabel('Submit time bounds').click();

    await expect(page.getByLabel('Start bounds')).toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
    await expect(page.getByLabel('End bounds')).toHaveText(`${DAY_AFTER} ${ONE_O_CLOCK}.000Z`);
  });
});

test.describe('Global Time Conductor', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('./', { waitUntil: 'domcontentloaded' });
  });

  test('Input field validation: real-time mode', async ({ page }) => {
    const startOffset = {
      startHours: '01',
      startMins: '29',
      startSecs: '23'
    };

    const endOffset = {
      endHours: '01',
      endMins: '30',
      endSecs: '31'
    };

    // Switch to real-time mode
    await setRealTimeMode(page);

    // Set start time offset
    await setStartOffset(page, startOffset);

    // Verify time was updated on time offset button
    await expect(page.getByLabel('Start offset: 01:29:23')).toBeVisible();

    // Set end time offset
    await setEndOffset(page, endOffset);

    // Verify time was updated on preceding time offset button
    await expect(page.getByLabel('End offset: 01:30:31')).toBeVisible();

    // Discard changes and verify that offsets remain unchanged
    await setStartOffset(page, {
      startHours: '00',
      startMins: '30',
      startSecs: '00',
      submitChanges: false
    });

    await expect(page.getByLabel('Start offset: 01:29:23')).toBeVisible();
    await expect(page.getByLabel('End offset: 01:30:31')).toBeVisible();
  });

  /**
   * Verify that offsets and url params are preserved when switching
   * between fixed timespan and real-time mode.
   */
  test('preserve offsets and url params when switching between fixed and real-time mode', async ({
    page
  }) => {
    const startOffset = {
      startMins: '30',
      startSecs: '23'
    };

    const endOffset = {
      endSecs: '01'
    };

    // Convert offsets to milliseconds
    const startDelta = 30 * 60 * 1000 + 23 * 1000;
    const endDelta = 1 * 1000;

    // Go to baseURL
    await page.goto('./', { waitUntil: 'domcontentloaded' });

    // Switch to real-time mode
    await setRealTimeMode(page);

    // Set start time offset
    await setStartOffset(page, startOffset);

    // Set end time offset
    await setEndOffset(page, endOffset);

    // Switch to fixed timespan mode
    await setFixedTimeMode(page);

    // Switch back to real-time mode
    await setRealTimeMode(page);

    // Verify updated start time offset persists after mode switch
    await expect(page.getByLabel('Start offset: 00:30:23')).toBeVisible();

    // Verify updated end time offset persists after mode switch
    await expect(page.getByLabel('End offset: 00:00:01')).toBeVisible();

    // Verify url parameters persist after mode switch
    // eslint-disable-next-line no-useless-escape
    const urlRegex = new RegExp(`.*tc\.startDelta=${startDelta}&tc\.endDelta=${endDelta}.*`);
    await page.waitForURL(urlRegex);
  });

  test.fixme(
    'time conductor history in fixed time mode will track changing start and end times',
    async ({ page }) => {
      // change start time, verify it's tracked in history
      // change end time, verify it's tracked in history
    }
  );

  test.fixme(
    'time conductor history in realtime mode will track changing start and end times',
    async ({ page }) => {
      // change start offset, verify it's tracked in history
      // change end offset, verify it's tracked in history
    }
  );

  test.fixme(
    'time conductor history allows you to set a historical timeframe',
    async ({ page }) => {
      // make sure there are historical history options
      // select an option and make sure the time conductor start and end bounds are updated correctly
    }
  );

  test.fixme('time conductor history allows you to set a realtime offsets', async ({ page }) => {
    // make sure there are realtime history options
    // select an option and verify the offsets are updated correctly
  });
});