Form validation error messages are not being displayed properly (#4887)

* Form validation error messages are not being displayed properly #4697

* e2e Tests

* fixed element.checkValidity test

* remove comment

* adding timeconductor tests

* rename

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: unlikelyzero <jchill2@gmail.com>

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

@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+const { test, expect } = require('@playwright/test');
+
+test.describe('Time counductor operations', () => {
+    test('validate start time does not exceeds end time', async ({ page }) => {
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+        const year = new Date().getFullYear();
+
+        let startDate = 'xxxx-01-01 01:00:00.000Z';
+        startDate = year + startDate.substring(4);
+
+        let endDate = 'xxxx-01-01 02:00:00.000Z';
+        endDate = year + endDate.substring(4);
+
+        const startTimeLocator = page.locator('input[type="text"]').first();
+        const endTimeLocator = page.locator('input[type="text"]').nth(1);
+
+        // Click start time
+        await startTimeLocator.click();
+
+        // Click end time
+        await endTimeLocator.click();
+
+        await endTimeLocator.fill(endDate.toString());
+        await startTimeLocator.fill(startDate.toString());
+
+        // invalid start date
+        startDate = (year + 1) + startDate.substring(4);
+        await startTimeLocator.fill(startDate.toString());
+        await endTimeLocator.click();
+
+        const startDateValidityStatus = await startTimeLocator.evaluate((element) => element.checkValidity());
+        expect(startDateValidityStatus).not.toBeTruthy();
+
+        // fix to valid start date
+        startDate = (year - 1) + startDate.substring(4);
+        await startTimeLocator.fill(startDate.toString());
+
+        // invalid end date
+        endDate = (year - 2) + endDate.substring(4);
+        await endTimeLocator.fill(endDate.toString());
+        await startTimeLocator.click();
+
+        const endDateValidityStatus = await endTimeLocator.evaluate((element) => element.checkValidity());
+        expect(endDateValidityStatus).not.toBeTruthy();
+    });
+});

e2e/tests/visual/default.spec.js

@@ -111,3 +111,42 @@ test('Visual - Default Condition Widget', async ({ page }) => {
     await page.waitForTimeout(VISUAL_GRACE_PERIOD);
     await percySnapshot(page, 'Default Condition Widget');
 });
+
+test('Visual - Time Conductor start time is less than end time', async ({ page }) => {
+    //Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
+    const year = new Date().getFullYear();
+
+    let startDate = 'xxxx-01-01 01:00:00.000Z';
+    startDate = year + startDate.substring(4);
+
+    let endDate = 'xxxx-01-01 02:00:00.000Z';
+    endDate = year + endDate.substring(4);
+
+    await page.locator('input[type="text"]').nth(1).fill(endDate.toString());
+    await page.locator('input[type="text"]').first().fill(startDate.toString());
+
+    //  verify no error msg
+    await page.waitForTimeout(VISUAL_GRACE_PERIOD);
+    await percySnapshot(page, 'Default Time conductor');
+
+    startDate = (year + 1) + startDate.substring(4);
+    await page.locator('input[type="text"]').first().fill(startDate.toString());
+    await page.locator('input[type="text"]').nth(1).click();
+
+    //  verify error msg for start time (unable to capture snapshot of popup)
+    await page.waitForTimeout(VISUAL_GRACE_PERIOD);
+    await percySnapshot(page, 'Start time error');
+
+    startDate = (year - 1) + startDate.substring(4);
+    await page.locator('input[type="text"]').first().fill(startDate.toString());
+
+    endDate = (year - 2) + endDate.substring(4);
+    await page.locator('input[type="text"]').nth(1).fill(endDate.toString());
+
+    await page.locator('input[type="text"]').first().click();
+
+    //  verify error msg for end time (unable to capture snapshot of popup)
+    await page.waitForTimeout(VISUAL_GRACE_PERIOD);
+    await percySnapshot(page, 'End time error');
+});

package.json

@@ -88,7 +88,7 @@
     "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
     "test:coverage": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" COVERAGE=true karma start --single-run",
     "test:coverage:firefox": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
-    "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke default condition.e2e",
+    "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke default condition timeConductor",
     "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js",
     "test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js default",
     "test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js",

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -253,6 +253,8 @@ export default {
                 input.title = '';
             }
 
+            this.$refs.fixedDeltaInput.reportValidity();
+
             return validationResult.valid;
         },
         startDateSelected(date) {