Time Conductor input fields do not work at all in real-time mode

[akhenry]

Summary

In real-time mode the inputs for the time conductor do not work at all, preventing the user from changing the real-time conductor offsets.

Expected vs Current Behavior

Clicking on the start or end time conductor offsets in the time conductor should allow the user to change the offset values.

Steps to Reproduce

1. Switch to real-time mode
2. Click on the start offset value (00:30:00 by default)
3. Observe that nothing happens. The usual popup that allows the user to select a new offset does not appear.

Environment

• Open MCT Version: 74b8390
• Deployment Type: Local
• Browser: Chrome 98.0.4758.109

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?

Additional Information

Initial investigation suggests that this is a Vue version issue.

• First priority is to do whatever is necessary to fix the time conductor.
• Second priority is to fix our code so that it is compatible with Vue. So, if the code fix needed is large, prioritize a short term fix for the conductor (like reverting to an earlier Vue version), then start working on the code fix (with Vue upgrade) in a separate PR

[shefalijoshi]

This might be related to #4877

[shefalijoshi]

Testing instructions:
Try to change the realtime offsets when in realtime (local clock) mode.

[unlikelyzero]

Verified!

[unlikelyzero]

e2e Testing notes

Note: some of this logic is already available here

openmct/e2e/tests/plugins/plot/log-plot.e2e.spec.js

Lines 79 to 84 in c089a47

	const timeInputs = page.locator('input.c-input--datetime');
	await timeInputs.first().click();
	await timeInputs.first().fill('2022-03-29 22:00:00.000Z');
	await timeInputs.nth(1).click();
	await timeInputs.nth(1).fill('2022-03-29 22:00:30.000Z');

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

test.describe('Time Conductor tests')
test('Verify that base page starts in fixed time)
page.goto('/');
//Verify that url is in fixed time
//Verify that Time Conductor starts in fixed time
test('Verify that Time Conductor allows user to switch between fixed time and Real Time')
page.goto('/');
//Verify that Time Conductor starts in fixed time
//Verify that the following things occur when switching to real-time
///// Real time mode is selected
///// Real Time offset defaults to -30 and + 30s
///// Real Time offsets can be modified

[afahey87]

This is how far I got this morning, maybe there is some local setup that I am not aware of that is stoping me. Please let me know @unlikelyzero.

Also not sure what specs you guys run your tests on so I will list mine:
2019 Macbook Pro i9 at 2.3 Ghz, 16 GB Ram, MacOS 12.3.1

1. mkdir nasa
2. cloned: https://github.com/nasa/openmct.git
3. npx playwright test openmct/e2e/tests/plugins/plot/log-plot.e2e.spec.js --headed
4. error

Running 2 tests using 1 worker

  ✘  e2e/tests/plugins/plot/log-plot.e2e.spec.js:30:10 › Log plot tests › Can create a log plot. (654ms)
  ✘  e2e/tests/plugins/plot/log-plot.e2e.spec.js:52:10 › Log plot tests › Verify that log mode option is reflected in import/ex (401ms)


  1) e2e/tests/plugins/plot/log-plot.e2e.spec.js:30:10 › Log plot tests › Can create a log plot. ===

    page.goto: Protocol error (Page.navigate): Cannot navigate to invalid URL
    =========================== logs ===========================
    navigating to "/", waiting until "networkidle"
    ============================================================

      72 | async function makeOverlayPlot(page) {
      73 |     // fresh page with time range from 2022-03-29 22:00:00.000Z to 2022-03-29 22:00:30.000Z
    > 74 |     await page.goto('/', { waitUntil: 'networkidle' });
         |                ^
      75 |
      76 |     // Set a specific time range for consistency, otherwise it will change
      77 |     // on every test to a range based on the current time.

        at makeOverlayPlot (/Users/adamfahey/nasa/openmct/e2e/tests/plugins/plot/log-plot.e2e.spec.js:74:16)
        at /Users/adamfahey/nasa/openmct/e2e/tests/plugins/plot/log-plot.e2e.spec.js:31:15

  2) e2e/tests/plugins/plot/log-plot.e2e.spec.js:52:10 › Log plot tests › Verify that log mode option is reflected in import/export JSON 

[afahey87]

Do I need to set the log plot for the tests?

[unlikelyzero]

Do I need to set the log plot for the tests?

@afahey87 hey, I meant to say that you should start a new test suite named e2e/tests/plugins/timeConductor.e2e.spec.js

A lot of the code can be seen in the logPlot.e2e.spec.js for reference.

I need to update our getting started guide, but that psuedocode I referenced should be the gist of the test. To run it,

git clone openmct
nvm use 16 (something greater than 12)
npm install
npm start
npm run test:e2e:local -- smoke

At that point, you can write a new test. The comment here #4914 (comment)

[afahey87]

Thank you! Ill give this a go.

[afahey87]

Thanks for the instructions above I was able to run the smoke test.
I have one more question before I start. I currently see openmct/e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js in the project. Do you want me to update the existing test with the specs from above? Or delete the current file and start from scratch?
Thank you.

[unlikelyzero]

@afahey87 yes please update the existing test suite with those two new tests. I didn't realize we had one already!

test('Verify that base page starts in fixed time)
page.goto('/');
//Verify that url is in fixed time
//Verify that Time Conductor starts in fixed time
test('Verify that Time Conductor allows user to switch between fixed time and Real Time')
page.goto('/');
//Verify that Time Conductor starts in fixed time
//Verify that the following things occur when switching to real-time
///// Real time mode is selected
///// Real Time offset defaults to -30 and + 30s
///// Real Time offsets can be modified

[afahey87]

@unlikelyzero I am having some issues with my branch. When I go to make a PR I am not able to see my local branch.
When I try and push my changes I get the following:

remote: Permission to nasa/openmct.git denied to afahey87.
fatal: unable to access 'https://github.com/nasa/openmct.git/': The requested URL returned error: 403

Do we need to add permissions to my git username to open a PR / See my branch?

How do you see the local branch in github if you cant push changes?

I must be missing something.

[afahey87]

I am not able to create a branch from the website https://github.com/nasa/openmct I am thinking it must be a permission thing.

[unlikelyzero]

@afahey87 you'll need to make a fork and branch

[afahey87]

Alright third times a charm here we go.

[afahey87]

@unlikelyzero I have my PR up ready for initial review and feedback. #5169
for some reason I cant assign it to anyone or add a reviewer. This has been an awesome pr to work on. This is my first ever playwright PR and my first automation test coded with JS. I have learned so much in the last week. I cant wait to do more!