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

nasa · Jul 24, 2024 · 689f7cc · 689f7cc
1 parent 1fae0a6
commit 689f7cc
Show file tree

Hide file tree

Showing 77 changed files with 540 additions and 485 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -39,6 +39,7 @@ const config = {
     'vue/no-deprecated-events-api': 'warn',
     'vue/no-v-for-template-key': 'off',
     'vue/no-v-for-template-key-on-child': 'error',
+    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
     'prettier/prettier': 'error',
     'you-dont-need-lodash-underscore/omit': 'off',
     'you-dont-need-lodash-underscore/throttle': 'off',

diff --git a/.webpack/webpack.dev.mjs b/.webpack/webpack.dev.mjs
@@ -39,7 +39,7 @@ export default merge(common, {
         return shouldWrite;
       }
     },
-    watchFiles: ['**/*.css'],
+    watchFiles: ['src/**/*.css', 'example/**/*.css'],
     static: {
       directory: fileURLToPath(new URL('../dist', import.meta.url)),
       publicPath: '/dist',

diff --git a/e2e/appActions.js b/e2e/appActions.js
@@ -78,13 +78,13 @@ async function createDomainObjectWithDefaults(
 
   // Navigate to the parent object. This is necessary to create the object
   // in the correct location, such as a folder, layout, or plot.
-  await page.goto(`${parentUrl}`);
+  await page.goto(parentUrl);
 
-  //Click the Create button
-  await page.getByRole('button', { name: 'Create' }).click();
+  // Click the Create button
+  await page.getByRole('button', { name: 'Create', exact: true }).click();
 
-  // Click the object specified by 'type'
-  await page.click(`li[role='menuitem']:text("${type}")`);
+  // Click the object specified by 'type'-- case insensitive
+  await page.getByRole('menuitem', { name: new RegExp(`^${type}$`, 'i') }).click();
 
   // Modify the name input field of the domain object to accept 'name'
   const nameInput = page.locator('form[name="mctForm"] .first input[type="text"]');
@@ -353,7 +353,7 @@ async function getFocusedObjectUuid(page) {
  * @returns {Promise<string>} the url of the object
  */
 async function getHashUrlToDomainObject(page, identifier) {
-  await page.waitForLoadState('load');
+  await page.waitForLoadState('domcontentloaded');
   const hashUrl = await page.evaluate(async (objectIdentifier) => {
     const path = await window.openmct.objects.getOriginalPath(objectIdentifier);
     let url =

diff --git a/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js b/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
diff --git a/src/api/forms/components/controls/LocatorField.vue b/src/api/forms/components/controls/LocatorField.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <mct-tree
+  <MctTree
     :is-selector-tree="true"
     :initial-selection="model.parent"
     @tree-item-selection="handleItemSelection"

diff --git a/src/plugins/LADTable/components/LadTable.vue b/src/plugins/LADTable/components/LadTable.vue
@@ -36,7 +36,7 @@
         </tr>
       </thead>
       <tbody>
-        <lad-row
+        <LadRow
           v-for="ladRow in items"
           :key="ladRow.key"
           :domain-object="ladRow.domainObject"

diff --git a/src/plugins/LADTable/components/LadTableSet.vue b/src/plugins/LADTable/components/LadTableSet.vue
@@ -39,7 +39,7 @@
               {{ ladTable.domainObject.name }}
             </td>
           </tr>
-          <lad-row
+          <LadRow
             v-for="ladRow in ladTelemetryObjects[ladTable.key]"
             :key="combineKeys(ladTable.key, ladRow.key)"
             :domain-object="ladRow.domainObject"

diff --git a/src/plugins/charts/bar/inspector/BarGraphOptions.vue b/src/plugins/charts/bar/inspector/BarGraphOptions.vue
@@ -24,7 +24,7 @@
     <ul class="c-tree">
       <h2 title="Display properties for this object">Bar Graph Series</h2>
       <li>
-        <series-options
+        <SeriesOptions
           v-for="series in plotSeries"
           :key="series.keyString"
           :item="series"

diff --git a/src/plugins/charts/scatter/inspector/PlotOptions.vue b/src/plugins/charts/scatter/inspector/PlotOptions.vue
@@ -22,10 +22,10 @@
 <template>
   <div>
     <div v-if="canEdit">
-      <plot-options-edit />
+      <PlotOptionsEdit />
     </div>
     <div v-else>
-      <plot-options-browse />
+      <PlotOptionsBrowse />
     </div>
   </div>
 </template>

diff --git a/src/plugins/condition/components/ConditionItem.vue b/src/plugins/condition/components/ConditionItem.vue
@@ -57,7 +57,7 @@
         <span class="c-condition__summary">
           <template v-if="!condition.isDefault && !canEvaluateCriteria"> Define criteria </template>
           <span v-else>
-            <condition-description :show-label="false" :condition="condition" />
+            <ConditionDescription :show-label="false" :condition="condition" />
           </span>
         </span>
 
@@ -184,7 +184,7 @@
         <span class="c-condition__output"> Output: {{ condition.configuration.output }} </span>
       </div>
       <div class="c-condition__summary">
-        <condition-description :show-label="false" :condition="condition" />
+        <ConditionDescription :show-label="false" :condition="condition" />
       </div>
     </div>
   </div>

diff --git a/src/plugins/condition/components/inspector/StyleEditor.vue b/src/plugins/condition/components/inspector/StyleEditor.vue
@@ -43,31 +43,31 @@
         </span>
       </div>
 
-      <toolbar-color-picker
+      <ToolbarColorPicker
         v-if="hasProperty(styleItem.style.border)"
         class="c-style__toolbar-button--border-color u-menu-to--center"
         :options="borderColorOption"
         @change="updateStyleValue"
       />
-      <toolbar-color-picker
+      <ToolbarColorPicker
         v-if="hasProperty(styleItem.style.backgroundColor)"
         class="c-style__toolbar-button--background-color u-menu-to--center"
         :options="backgroundColorOption"
         @change="updateStyleValue"
       />
-      <toolbar-color-picker
+      <ToolbarColorPicker
         v-if="hasProperty(styleItem.style.color)"
         class="c-style__toolbar-button--color u-menu-to--center"
         :options="colorOption"
         @change="updateStyleValue"
       />
-      <toolbar-button
+      <ToolbarButton
         v-if="hasProperty(styleItem.style.imageUrl)"
         class="c-style__toolbar-button--image-url"
         :options="imageUrlOption"
         @change="updateStyleValue"
       />
-      <toolbar-toggle-button
+      <ToolbarToggleButton
         v-if="hasProperty(styleItem.style.isStyleInvisible)"
         class="c-style__toolbar-button--toggle-visible"
         :options="isStyleInvisibleOption"
@@ -76,7 +76,7 @@
     </div>
 
     <!-- Save Styles -->
-    <toolbar-button
+    <ToolbarButton
       v-if="canSaveStyle"
       ref="saveStyleButton"
       class="c-style__toolbar-button--save c-local-controls--show-on-hover c-icon-button c-icon-button--major"

diff --git a/src/plugins/condition/components/inspector/StylesView.vue b/src/plugins/condition/components/inspector/StylesView.vue
@@ -112,11 +112,11 @@
           :class="{ 'is-current': conditionStyle.conditionId === selectedConditionId }"
           @click="applySelectedConditionStyle(conditionStyle.conditionId)"
         >
-          <condition-error
+          <ConditionError
             :show-label="true"
             :condition="getCondition(conditionStyle.conditionId)"
           />
-          <condition-description
+          <ConditionDescription
             :show-label="true"
             :condition="getCondition(conditionStyle.conditionId)"
           />

diff --git a/src/plugins/displayLayout/components/BoxView.vue b/src/plugins/displayLayout/components/BoxView.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <layout-frame
+  <LayoutFrame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
@@ -38,7 +38,7 @@
         aria-label="Box"
       ></div>
     </template>
-  </layout-frame>
+  </LayoutFrame>
 </template>
 
 <script>

diff --git a/src/plugins/displayLayout/components/EllipseView.vue b/src/plugins/displayLayout/components/EllipseView.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <layout-frame
+  <LayoutFrame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
@@ -38,7 +38,7 @@
         aria-label="Ellipse"
       ></div>
     </template>
-  </layout-frame>
+  </LayoutFrame>
 </template>
 
 <script>

diff --git a/src/plugins/displayLayout/components/ImageView.vue b/src/plugins/displayLayout/components/ImageView.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <layout-frame
+  <LayoutFrame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
@@ -31,7 +31,7 @@
     <template #content>
       <div class="c-image-view" :style="style"></div>
     </template>
-  </layout-frame>
+  </LayoutFrame>
 </template>
 
 <script>

diff --git a/src/plugins/displayLayout/components/SubobjectView.vue b/src/plugins/displayLayout/components/SubobjectView.vue
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <layout-frame
+  <LayoutFrame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
@@ -39,7 +39,7 @@
         :layout-font="item.font"
       />
     </template>
-  </layout-frame>
+  </LayoutFrame>
 </template>
 
 <script>

diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <layout-frame
+  <LayoutFrame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
@@ -68,7 +68,7 @@
         </div>
       </div>
     </template>
-  </layout-frame>
+  </LayoutFrame>
 </template>
 
 <script>

diff --git a/src/plugins/displayLayout/components/TextView.vue b/src/plugins/displayLayout/components/TextView.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <layout-frame
+  <LayoutFrame
     :item="item"
     :grid-size="gridSize"
     :is-editing="isEditing"
@@ -42,7 +42,7 @@
         <div class="c-text-view__text">{{ item.text }}</div>
       </div>
     </template>
-  </layout-frame>
+  </LayoutFrame>
 </template>
 
 <script>

diff --git a/src/plugins/filters/components/FilterObject.vue b/src/plugins/filters/components/FilterObject.vue
@@ -50,14 +50,14 @@
         </div>
 
         <div v-if="isEditing" class="c-inspect-properties__label span-all">
-          <toggle-switch
+          <ToggleSwitch
             :id="keyString"
             :checked="persistedFilters.useGlobal"
             @change="useGlobalFilter"
           />
           Use global filter
         </div>
-        <filter-field
+        <FilterField
           v-for="metadatum in activeFilters"
           :key="metadatum.key"
           :filter-field="metadatum"

diff --git a/src/plugins/filters/components/FiltersView.vue b/src/plugins/filters/components/FiltersView.vue
@@ -25,12 +25,12 @@
     <div v-if="hasActiveFilters" class="c-filter-indication">
       {{ label }}
     </div>
-    <global-filters
+    <GlobalFilters
       :global-filters="globalFilters"
       :global-metadata="globalMetadata"
       @persist-global-filters="persistGlobalFilters"
     />
-    <filter-object
+    <FilterObject
       v-for="(child, key) in children"
       :key="key"
       :filter-object="child"

diff --git a/src/plugins/filters/components/GlobalFilters.vue b/src/plugins/filters/components/GlobalFilters.vue
@@ -38,7 +38,7 @@
       </div>
     </div>
     <ul v-if="expanded" class="c-inspect-properties">
-      <filter-field
+      <FilterField
         v-for="metadatum in globalMetadata"
         :key="metadatum.key"
         :filter-field="metadatum"

diff --git a/src/plugins/flexibleLayout/components/ContainerComponent.vue b/src/plugins/flexibleLayout/components/ContainerComponent.vue
@@ -38,7 +38,7 @@
       <span class="c-fl-container__size-indicator">{{ sizeString }}</span>
     </div>
 
-    <drop-hint
+    <DropHint
       class="c-fl-frame__drop-hint"
       :index="-1"
       :allow-drop="allowDrop"
@@ -47,7 +47,7 @@
 
     <div role="row" class="c-fl-container__frames-holder" :class="flexLayoutCssClass">
       <template v-for="(frame, i) in frames" :key="frame.id">
-        <frame-component
+        <FrameComponent
           class="c-fl-container__frame"
           :frame="frame"
           :index="i"
@@ -58,14 +58,14 @@
           :object-path="objectPath"
         />
 
-        <drop-hint
+        <DropHint
           class="c-fl-frame__drop-hint"
           :index="i"
           :allow-drop="allowDrop"
           @object-drop-to="moveOrCreateNewFrame"
         />
 
-        <resize-handle
+        <ResizeHandle
           v-if="i !== frames.length - 1"
           :index="i"
           :drag-orientation="rowsLayout ? 'horizontal' : 'vertical'"

diff --git a/src/plugins/flexibleLayout/components/FlexibleLayout.vue b/src/plugins/flexibleLayout/components/FlexibleLayout.vue
@@ -34,15 +34,15 @@
       :aria-label="`Flexible Layout ${rowsLayout ? 'Rows' : 'Columns'}`"
     >
       <template v-for="(container, index) in containers" :key="`component-${container.id}`">
-        <drop-hint
+        <DropHint
           v-if="index === 0 && containers.length > 1"
           class="c-fl-frame__drop-hint"
           :index="-1"
           :allow-drop="allowContainerDrop"
           @object-drop-to="moveContainer"
         />
 
-        <container-component
+        <ContainerComponent
           :index="index"
           :container="container"
           :rows-layout="rowsLayout"
@@ -54,7 +54,7 @@
           @persist="persist"
         />
 
-        <resize-handle
+        <ResizeHandle
           v-if="index !== containers.length - 1"
           :index="index"
           :drag-orientation="rowsLayout ? 'vertical' : 'horizontal'"
@@ -64,7 +64,7 @@
           @end-move="endContainerResizing"
         />
 
-        <drop-hint
+        <DropHint
           v-if="containers.length > 1"
           class="c-fl-frame__drop-hint"
           :index="index"