test(e2e): stabilize flaky imagery tests (#7765)

src/plugins/timeConductor/ConductorComponent.vue

@@ -32,13 +32,13 @@
   >
     <ConductorModeIcon class="c-conductor__mode-icon" />
     <div class="c-compact-tc__setting-value u-fade-truncate">
-      <conductor-mode :mode="mode" :read-only="true" />
-      <conductor-clock :read-only="true" />
-      <conductor-time-system :read-only="true" />
+      <ConductorMode :mode="mode" :read-only="true" />
+      <ConductorClock :read-only="true" />
+      <ConductorTimeSystem :read-only="true" />
     </div>
-    <conductor-inputs-fixed v-if="isFixed" :input-bounds="viewBounds" :read-only="true" />
-    <conductor-inputs-realtime v-else :input-bounds="viewBounds" :read-only="true" />
-    <conductor-axis
+    <ConductorInputsFixed v-if="isFixed" :input-bounds="viewBounds" :read-only="true" />
+    <ConductorInputsRealtime v-else :input-bounds="viewBounds" :read-only="true" />
+    <ConductorAxis
       v-if="isFixed"
       class="c-conductor__ticks"
       :view-bounds="viewBounds"
@@ -55,7 +55,7 @@
       aria-label="Time Conductor Settings"
     ></div>
 
-    <conductor-pop-up
+    <ConductorPopUp
       v-if="showConductorPopup"
       ref="conductorPopup"
       :bottom="false"

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <time-popup-fixed
+  <TimePopupFixed
     v-if="readOnly === false"
     :input-bounds="bounds"
     :input-time-system="timeSystem"

src/plugins/timeConductor/ConductorInputsRealtime.vue

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <time-popup-realtime
+  <TimePopupRealtime
     v-if="readOnly === false"
     :offsets="offsets"
     @focus="$event.target.select()"

src/plugins/timeConductor/ConductorPopUp.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="c-tc-input-popup" :class="popupClasses" :style="position">
-    <div class="c-tc-input-popup__options">
+    <div class="c-tc-input-popup__options" aria-label="Time Conductor Options">
       <IndependentMode
         v-if="isIndependent"
         class="c-conductor__mode-select"
@@ -44,14 +44,14 @@
         :button-css-class="'c-icon-button'"
       />
     </div>
-    <conductor-inputs-fixed
+    <ConductorInputsFixed
       v-if="isFixed"
       :input-bounds="bounds"
       :object-path="objectPath"
       @bounds-updated="saveFixedBounds"
       @dismiss-inputs-fixed="dismiss"
     />
-    <conductor-inputs-realtime
+    <ConductorInputsRealtime
       v-else
       :input-bounds="bounds"
       :object-path="objectPath"

src/plugins/timeConductor/TimePopupFixed.vue

@@ -17,9 +17,9 @@
           autocorrect="off"
           spellcheck="false"
           aria-label="Start date"
-          @change="validateAllBounds('startDate')"
+          @input="validateAllBounds('startDate')"
         />
-        <date-picker
+        <DatePicker
           v-if="isUTCBased"
           class="c-ctrl-wrapper--menus-right"
           :default-date-time="formattedBounds.start"
@@ -37,7 +37,7 @@
           autocorrect="off"
           spellcheck="false"
           aria-label="Start time"
-          @change="validateAllBounds('startDate')"
+          @input="validateAllBounds('startDate')"
         />
       </div>
 
@@ -54,9 +54,9 @@
           autocorrect="off"
           spellcheck="false"
           aria-label="End date"
-          @change="validateAllBounds('endDate')"
+          @input="validateAllBounds('endDate')"
         />
-        <date-picker
+        <DatePicker
           v-if="isUTCBased"
           class="c-ctrl-wrapper--menus-left"
           :default-date-time="formattedBounds.end"
@@ -74,7 +74,7 @@
           autocorrect="off"
           spellcheck="false"
           aria-label="End time"
-          @change="validateAllBounds('endDate')"
+          @input="validateAllBounds('endDate')"
         />
       </div>
 
@@ -83,12 +83,12 @@
           class="c-button c-button--major icon-check"
           :disabled="isDisabled"
           aria-label="Submit time bounds"
-          @click.prevent="submit"
+          @click.prevent="handleFormSubmission(true)"
         ></button>
         <button
           class="c-button icon-x"
           aria-label="Discard changes and close time popup"
-          @click.prevent="hide"
+          @click.prevent="handleFormSubmission(true)"
         ></button>
       </div>
     </div>
@@ -219,18 +219,21 @@ export default {
         return false;
       }
     },
-    submit() {
+    handleFormSubmission(shouldDismiss) {
+      // Validate bounds before submission
       this.validateAllBounds('startDate');
       this.validateAllBounds('endDate');
-      this.submitForm(!this.isDisabled);
-    },
-    submitForm(dismiss) {
-      // Allow Vue model to catch up to user input.
-      // Submitting form will cause validation messages to display (but only if triggered by button click)
-      this.$nextTick(() => this.setBoundsFromView(dismiss));
+
+      // Submit the form if it's valid
+      if (!this.isDisabled) {
+        this.setBoundsFromView(shouldDismiss);
+      }
     },
     validateAllBounds(ref) {
+      this.isDisabled = false; // Reset isDisabled at the start of validation
+
       if (!this.areBoundsFormatsValid()) {
+        this.isDisabled = true;
         return false;
       }
 
@@ -305,7 +308,6 @@ export default {
       } else {
         input.setCustomValidity('');
         input.title = '';
-        this.isDisabled = false;
       }
 
       this.$refs.fixedDeltaInput.reportValidity();