Merge pull request #11302 from qmonmert/fix/11158

Cypress: Best practices for selectors

src/main/resources/generator/client/common/cypress/utils/DataSelector.ts

@@ -1 +1,2 @@
-export const dataSelector = (selector: string): string => `[data-selector="${selector}"]`;
+export const dataSelector = (selector: string): string =>
+  `[data-selector="${selector}"], [data-cy="${selector}"], [data-test="${selector}"], [data-testid="${selector}"]`;

src/main/webapp/app/module/primary/landscape-loader/LandscapeLoader.html

@@ -1,4 +1,4 @@
-<div class="jhlite-landscape-loader jhlite-menu-content-template" data-selector="landscape-loader">
+<div class="jhlite-landscape-loader jhlite-menu-content-template" data-testid="landscape-loader">
   <div class="ph-jhlite-landscape-modes-selection">
     <div class="ph-item">
       <div class="ph-row">

src/main/webapp/app/module/primary/landscape-minimap/LandscapeMiniMap.component.ts

@@ -42,7 +42,7 @@ export default defineComponent({
     });
 
     const removeDataSelectorAttrs = (data: string): string => {
-      const regex = /data-selector="[^"]*"/g;
+      const regex = /data-testid="[^"]*"/g;
       return data.replace(regex, '');
     };
 

src/main/webapp/app/module/primary/landscape-minimap/LandscapeMiniMap.html

@@ -1,13 +1,11 @@
 <div ref="minimapContainer" class="jhlite-landscape-minimap jhlite-minimap--container">
-  <button v-if="!isMiniMapOpen" class="jhlite-button-main -block" @click="openMiniMap" data-selector="show-minimap-btn">
-    OPEN MINIMAP
-  </button>
+  <button v-if="!isMiniMapOpen" class="jhlite-button-main -block" @click="openMiniMap" data-testid="show-minimap-btn">OPEN MINIMAP</button>
   <button
     class="jhlite-button-main -rounded-top -small"
     v-if="isMiniMapOpen"
     @click="closeMiniMap"
     title="Hide minimap"
-    data-selector="hide-minimap-btn"
+    data-testid="hide-minimap-btn"
   >
     <IconVue name="eye-off" aria-label="Icon map" title="Hide minimap" />
   </button>
@@ -19,8 +17,8 @@
       @mousemove="grabbing"
       @mouseup="stopGrabbing"
       @mouseleave="stopGrabbing"
-      data-selector="minimap-viewer"
+      data-testid="minimap-viewer"
     ></div>
-    <div data-selector="minimap-content" ref="minimapContent" class="jhlite-minimap--content" v-html="minimapHTML"></div>
+    <div data-testid="minimap-content" ref="minimapContent" class="jhlite-minimap--content" v-html="minimapHTML"></div>
   </div>
 </div>

src/main/webapp/app/module/primary/landscape-module/LandscapeModule.html

@@ -2,7 +2,7 @@
   class="jhlite-chip"
   :class="moduleClass()"
   :ref="el => landscapeElements.set(module.slugString(), el)"
-  :data-selector="`${module.slugString()}-module`"
+  :data-testid="`${module.slugString()}-module`"
   @mouseover="emphasizeModule()"
   @mouseleave="deEmphasizeModule()"
   @click="clickedModule()"
@@ -15,7 +15,7 @@
       name="ccw"
       aria-label="Reapply"
       title="Re-apply module"
-      :data-selector="`module-${module.slug}-application-icon`"
+      :data-testid="`module-${module.slug}-application-icon`"
     />
   </div>
   <div class="jhlite-chip--description" :class="moduleClass()">{{ module.operation() }}</div>

src/main/webapp/app/module/primary/landscape-preset-configuration/LandscapePresetConfiguration.html

@@ -4,7 +4,7 @@
     class="jhlite-button-main -small"
     @click="openPresetConfiguration"
     title="Show presets configurations"
-    data-selector="show-preset-configuration-btn"
+    data-testid="show-preset-configuration-btn"
   >
     <IconVue name="cog-alt" aria-label="Icon presets configurations" title="Show presets configurations" />
   </button>
@@ -13,7 +13,7 @@
     v-if="isPresetConfigurationOpen"
     @click="closePresetConfiguration"
     title="Hide presets configurations"
-    data-selector="hide-preset-configuration-btn"
+    data-testid="hide-preset-configuration-btn"
   >
     <IconVue name="eye-off" aria-label="Icon presets configurations" title="Hide presets configurations" />
   </button>

src/main/webapp/app/module/primary/landscape/Landscape.html

@@ -1,21 +1,21 @@
 <LandscapeLoaderVue v-if="levels.isLoading()" />
-<div class="jhipster-landscape jhlite-menu-content-template" v-else data-selector="landscape">
+<div class="jhipster-landscape jhlite-menu-content-template" v-else data-testid="landscape">
   <div class="jhipster-landscape-modes-selection">
     <div class="jhlite-mode-switch">
       <div class="jhlite-mode-switch--modes">
         <button
           class="jhlite-button-switch"
           :class="modeSwitchClass('COMPACTED')"
           @click="selectMode('COMPACTED')"
-          data-selector="compacted-mode-button"
+          data-testid="compacted-mode-button"
         >
           Compacted
         </button>
         <button
           class="jhlite-button-switch"
           :class="modeSwitchClass('EXTENDED')"
           @click="selectMode('EXTENDED')"
-          data-selector="extended-mode-button"
+          data-testid="extended-mode-button"
         >
           Extended
         </button>
@@ -36,7 +36,7 @@
                 class="jhlite-input-text"
                 placeholder="Search modules..."
                 @input="performSearch($event.target.value)"
-                data-selector="landscape-search-input"
+                data-testid="landscape-search-input"
               />
             </div>
           </div>
@@ -46,7 +46,7 @@
       <div
         :class="landscapeClass()"
         ref="landscapeContainer"
-        data-selector="landscape-container"
+        data-testid="landscape-container"
         @mousedown="startGrabbing"
         @mousemove="grabbing"
         @mouseup="stopGrabbing"
@@ -58,7 +58,7 @@
               <div
                 class="jhipster-landscape-feature"
                 :class="elementFlavor(element.slug())"
-                :data-selector="`${element.slugString()}-feature`"
+                :data-testid="`${element.slugString()}-feature`"
                 v-if="isFeature(element)"
                 :ref="el => landscapeElements.set(element.slugString(), el)"
               >
@@ -95,7 +95,7 @@ <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.sl
         <svg
           class="jhipster-landscape-connectors"
           :style="`width: ${landscapeSize.width}px; height: ${landscapeSize.height}px`"
-          data-selector="landscape-connectors"
+          data-testid="landscape-connectors"
         >
           <path
             v-for="connector in landscapeConnectors"
@@ -136,7 +136,7 @@ <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.sl
           <div class="jhlite-vertical-space--line">
             <button
               class="jhlite-button-main -block"
-              data-selector="modules-apply-new-button"
+              data-testid="modules-apply-new-button"
               :disabled="disabledNewApplication()"
               @click="applyNewModules"
             >
@@ -148,7 +148,7 @@ <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.sl
           <div class="jhlite-vertical-space--line">
             <button
               class="jhlite-button-main -block"
-              data-selector="modules-apply-all-button"
+              data-testid="modules-apply-all-button"
               :disabled="disabledAllApplication()"
               @click="applyAllModules"
             >

src/main/webapp/app/module/primary/module-parameters/ModuleParameters.html

@@ -2,12 +2,12 @@
   v-if="propertiesDefinitions.length !== 0"
   class="jhipster-module-parameters"
   :class="stateClass()"
-  :data-selector="`module-${moduleSlug}-${propertiesType}-parameters`"
+  :data-testid="`module-${moduleSlug}-${propertiesType}-parameters`"
 >
   <div class="jhipster-module-parameters--type" :class="stateClass()">
     <div class="jhipster-module-parameters--type-title" :class="stateClass()">{{ typeLabel() }}</div>
     <div
-      :data-selector="`module-${moduleSlug}-${propertiesType}-parameters-stats`"
+      :data-testid="`module-${moduleSlug}-${propertiesType}-parameters-stats`"
       class="jhipster-module-parameters--type-stats"
       :class="stateClass()"
     >
@@ -19,7 +19,7 @@
     <div
       class="jhipster-module-parameters--parameter-value"
       :class="stateClass()"
-      :data-selector="`module-${moduleSlug}-${propertyDefinition.key}-parameter-value`"
+      :data-testid="`module-${moduleSlug}-${propertyDefinition.key}-parameter-value`"
     >
       {{ moduleParameters.get(propertyDefinition.key) }}
     </div>

src/main/webapp/app/module/primary/module-properties-form/ModulePropertiesForm.html

@@ -12,7 +12,7 @@ <h2 class="jhipster-modules-properties-form--properties-title">Properties</h2>
           type="text"
           id="folder-path"
           class="jhlite-input-text"
-          data-selector="folder-path-field"
+          data-testid="folder-path-field"
           :value="folderPath"
           @input="updateFolderPath($event.target.value)"
           @blur="folderPathSelected()"
@@ -35,7 +35,7 @@ <h2 class="jhipster-modules-properties-form--properties-title">Properties</h2>
           :placeholder="property.defaultValue"
           @input="setStringProperty(property.key, $event.target.value)"
           :value="parameters.get(property.key)"
-          :data-selector="`parameter-${property.key}-field`"
+          :data-testid="`parameter-${property.key}-field`"
           v-if="property.type === 'STRING'"
         />
         <input
@@ -45,22 +45,22 @@ <h2 class="jhipster-modules-properties-form--properties-title">Properties</h2>
           :placeholder="property.defaultValue"
           @input="setNumberProperty(property.key, $event.target.value)"
           :value="parameters.get(property.key)"
-          :data-selector="`parameter-${property.key}-field`"
+          :data-testid="`parameter-${property.key}-field`"
           v-if="property.type === 'INTEGER'"
         />
         <select
           class="jhipster-modules-properties-form--field"
           :id="`module-parameter-${property.key}`"
           @change="setBooleanProperty(property.key, $event.target.value)"
-          :data-selector="`parameter-${property.key}-field`"
+          :data-testid="`parameter-${property.key}-field`"
           v-if="property.type === 'BOOLEAN'"
         >
           <option value="" :selected="parameters.get(property.key) === undefined"></option>
           <option value="true" :selected="parameters.get(property.key) === true">Yes</option>
           <option value="false" :selected="parameters.get(property.key) === false">No</option>
         </select>
       </div>
-      <div class="jhlite-field--optional" :data-selector="`parameter-${property.key}-optional-marker`" v-if="!property.mandatory">
+      <div class="jhlite-field--optional" :data-testid="`parameter-${property.key}-optional-marker`" v-if="!property.mandatory">
         Optional
       </div>
     </div>
@@ -70,7 +70,7 @@ <h2 class="jhipster-modules-properties-form--properties-title">Properties</h2>
       type="checkbox"
       id="commit-modules"
       @click="updateModuleCommit($event.target.checked)"
-      data-selector="commit-module-application"
+      data-testid="commit-module-application"
       checked="checked"
     />
     <label for="commit-modules" class="jhipster-modules-properties-form--commit-modules-label">Commit module application</label>

src/main/webapp/app/module/primary/modules-patch-loader/ModulesPatchLoader.html

@@ -1,4 +1,4 @@
-<div class="jhipster-module-patch-loader jhlite-modules-loader-content jhlite-menu-content-template" data-selector="modules-loader">
+<div class="jhipster-module-patch-loader jhlite-modules-loader-content jhlite-menu-content-template" data-testid="modules-loader">
   <div class="ph-jhlite-modules-container-content jhlite-menu-content-template--content">
     <div class="modules-filter">
       <div class="ph-item">

src/main/webapp/app/module/primary/modules-patch/ModulesPatch.html

@@ -1,5 +1,5 @@
 <ModulesPatchLoaderVue v-if="content.isLoading()" />
-<div class="jhipster-modules-patch jhlite-menu-content-template" v-else data-selector="modules-list">
+<div class="jhipster-modules-patch jhlite-menu-content-template" v-else data-testid="modules-list">
   <div class="jhipster-modules-list jhlite-menu-content-template--content">
     <div class="jhipster-modules-filters">
       <div class="jhipster-modules-filters--tags">
@@ -12,11 +12,11 @@
         type="text"
         class="jhipster-modules-filters--filter"
         placeholder="Filter"
-        data-selector="modules-filter-field"
+        data-testid="modules-filter-field"
         @input="updateSearch($event.target.value)"
       />
 
-      <div class="jhipster-modules-filters--displayed-modules-count" data-selector="displayed-modules-count">
+      <div class="jhipster-modules-filters--displayed-modules-count" data-testid="displayed-modules-count">
         {{ displayedModulesCount() }}&nbsp;/&nbsp;{{ totalModulesCount() }}
       </div>
     </div>
@@ -31,7 +31,7 @@ <h2 class="jhipster-module-category--name">{{ category.name }}</h2>
               :class="moduleClass(module.slug)"
               @click="toggleModule(module.slug)"
               @keyup.enter="toggleModule(module.slug)"
-              :data-selector="`${module.slug}-module-content`"
+              :data-testid="`${module.slug}-module-content`"
             >
               <div class="jhipster-module--tags" :class="moduleClass(module.slug)">
                 <div v-for="tag in module.tags" class="jhipster-module--tag">{{ tag }}</div>
@@ -61,23 +61,13 @@ <h2 class="jhipster-module-category--name">{{ category.name }}</h2>
               :class="moduleClass(module.slug)"
               :disabled="disabledApplication(module.slug)"
               @click="applyModule(module.slug)"
-              :data-selector="`module-${module.slug}-application-button`"
+              :data-testid="`module-${module.slug}-application-button`"
             >
               <span v-if="appliedModule(module.slug)">
-                <IconVue
-                  name="ccw"
-                  aria-label="Reapply"
-                  title="Re-apply module"
-                  :data-selector="`module-${module.slug}-application-icon`"
-                />
+                <IconVue name="ccw" aria-label="Reapply" title="Re-apply module" :data-testid="`module-${module.slug}-application-icon`" />
               </span>
               <span v-else>
-                <IconVue
-                  name="play"
-                  aria-label="Reapply"
-                  title="Re-apply module"
-                  :data-selector="`module-${module.slug}-application-icon`"
-                />
+                <IconVue name="play" aria-label="Reapply" title="Re-apply module" :data-testid="`module-${module.slug}-application-icon`" />
               </span>
             </button>
           </div>

src/main/webapp/app/module/primary/project-actions/ProjectActions.html

@@ -3,13 +3,13 @@
     <slot />
 
     <div class="jhlite-vertical-space--line">
-      <button class="jhlite-button-main -block" @click="formatProject()" :disabled="disabledPrettier()" data-selector="format-button">
+      <button class="jhlite-button-main -block" @click="formatProject()" :disabled="disabledPrettier()" data-testid="format-button">
         <IconVue name="code" aria-label="Icon code" />
         Format
       </button>
     </div>
     <div class="jhlite-vertical-space--line">
-      <button class="jhlite-button-main -block" @click="downloadProject()" :disabled="disabledActions()" data-selector="download-button">
+      <button class="jhlite-button-main -block" @click="downloadProject()" :disabled="disabledActions()" data-testid="download-button">
         <IconVue name="download" aria-label="Icon download" />
         Download
       </button>

src/main/webapp/app/module/primary/tag-filter/TagFilter.html

@@ -1 +1 @@
-<button class="jhipster-tag-filter" :class="selectionClass()" @click="select" :data-selector="`${tag}-tag-filter`">{{ tag }}</button>
+<button class="jhipster-tag-filter" :class="selectionClass()" @click="select" :data-testid="`${tag}-tag-filter`">{{ tag }}</button>

src/main/webapp/app/shared/theme-button/infrastructure/primary/ThemeButton.vue

@@ -6,7 +6,7 @@
       type="checkbox"
       name="mode"
       :checked="!isDarkTheme"
-      data-selector="theme-switch-button"
+      data-testid="theme-switch-button"
       @change="toggleTheme"
     />
     <label for="switch" class="jhlite-theme-switch-label" :aria-label="theme">

src/main/webapp/app/shared/toast/infrastructure/primary/Toast.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" class="jhlite-toast-overlay" data-selector="toast-overlay">
+  <div v-if="show" class="jhlite-toast-overlay" data-testid="toast-overlay">
     <div
       ref="toast"
       :class="{ '-success': type === 'SUCCESS', '-error': type === 'ERROR' }"
@@ -9,7 +9,7 @@
       aria-atomic="true"
     >
       <div class="jhlite-toast--message">{{ message }}</div>
-      <button data-selector="toast.close" type="button" class="jhlite-toast--action" title="Close" @click="close">
+      <button data-testid="toast.close" type="button" class="jhlite-toast--action" title="Close" @click="close">
         <IconVue name="cancel" />
       </button>
     </div>

src/test/webapp/component/support/selector.ts

@@ -1 +1,2 @@
-export const dataSelector = (value: string) => `[data-selector="${value}"]`;
+export const dataSelector = (selector: string): string =>
+  `[data-selector="${selector}"], [data-cy="${selector}"], [data-test="${selector}"], [data-testid="${selector}"]`;

src/test/webapp/e2e/support/selector.ts

@@ -1 +1,2 @@
-export const dataSelector = (value: string) => `[data-selector="${value}"]`;
+export const dataSelector = (selector: string): string =>
+  `[data-selector="${selector}"], [data-cy="${selector}"], [data-test="${selector}"], [data-testid="${selector}"]`;

src/test/webapp/unit/WrappedElement.ts

@@ -1 +1,2 @@
-export const wrappedElement = (selector: string): string => `[data-selector="${selector}"]`;
+export const wrappedElement = (selector: string) =>
+  `[data-selector="${selector}"], [data-cy="${selector}"], [data-test="${selector}"], [data-testid="${selector}"]`;

src/test/webapp/unit/common/primary/toast/Toast.spec.ts

@@ -82,9 +82,9 @@ describe('Toast', () => {
   it('should hide toast on close', async () => {
     await successToast();
 
-    await wrapper.find('[data-selector="toast.close"]').trigger('click');
+    await wrapper.find('[data-testid="toast.close"]').trigger('click');
 
-    expect(wrapper.find('[data-selector="toast-overlay"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="toast-overlay"]').exists()).toBe(false);
   });
 
   it('should unsubscribe on before unmount', () => {
@@ -148,7 +148,7 @@ describe('Toast', () => {
         toastTimeout,
       });
 
-      await wrapper.find('[data-selector="toast.close"]').trigger('click');
+      await wrapper.find('[data-testid="toast.close"]').trigger('click');
 
       expect(component.show).toBe(false);
       expect(toastTimeout.unregister.callCount).toBe(1);