PB-1327 : rework report a problem Cypress test

so that it uses aliases on element whenever possible, and also test the payload of feedback for the category too.

src/modules/drawing/components/DrawingExporter.vue

@@ -15,7 +15,7 @@ const exportOptions = [
 
 const drawingLayer = inject('drawingLayer')
 
-const exportSelection = ref('KML')
+const exportSelection = ref(exportOptions[0].title)
 
 const store = useStore()
 
@@ -24,7 +24,7 @@ const isDrawingEmpty = computed(() => store.getters.isDrawingEmpty)
 const activeKmlLayer = computed(() => store.getters.activeKmlLayer)
 
 function onExportOptionSelected(dropdownItem) {
-    exportSelection.value = dropdownItem.value
+    exportSelection.value = dropdownItem.title
     exportDrawing()
 }
 function exportDrawing() {
@@ -55,7 +55,7 @@ function exportDrawing() {
         :disabled="isDrawingEmpty"
         with-toggle-button
         data-cy="drawing-toolbox-export-button"
-        @select:item="onExportOptionSelected"
+        @select-item="onExportOptionSelected"
         @click="exportDrawing()"
     />
 </template>

src/modules/infobox/components/styling/DrawingStyleIconSelector.vue

@@ -14,7 +14,7 @@
                     :items="iconSetDropdownItems"
                     :current-value="currentIconSet"
                     data-cy="drawing-style-icon-set-button"
-                    @select:item="changeDisplayedIconSet"
+                    @select-item="changeDisplayedIconSet"
                 />
             </div>
         </div>

src/modules/infobox/components/styling/DrawingStyleSizeSelector.vue

@@ -15,7 +15,7 @@ const { t } = useI18n()
             :current-value="currentSize"
             :title="sizeLabel"
             :items="dropdownItems"
-            @select:item="onSizeSelect"
+            @select-item="onSizeSelect"
         />
     </div>
 </template>

src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue

@@ -339,7 +339,7 @@ function changeStyle(newStyle) {
                         :items="kmlStylesAsDropdownItems"
                         :current-value="currentKmlStyle"
                         small
-                        @select:item="changeStyle"
+                        @select-item="changeStyle"
                     />
                 </div>
             </div>

src/modules/menu/components/help/ReportProblemButton.vue

@@ -27,18 +27,22 @@ const feedbackCategories = [
     {
         id: 'background_map',
         title: 'feedback_category_background_map',
+        value: 'background_map',
     },
     {
         id: 'thematic_map',
         title: 'feedback_category_thematic_map',
+        value: 'thematic_map',
     },
     {
         id: 'application_service',
         title: 'feedback_category_application_service',
+        value: 'application_service',
     },
     {
         id: 'other',
         title: 'feedback_category_other',
+        value: 'other',
     },
 ]
 
@@ -146,6 +150,7 @@ async function sendReportProblem() {
 function closeAndCleanForm() {
     activateValidation.value = false
     showReportProblemForm.value = false
+    feedback.value.category = null
     feedback.value.message = null
     feedback.value.email = null
     feedback.value.file = null
@@ -217,28 +222,26 @@ function selectItem(dropdownItem) {
         :hide="showDrawingOverlay"
         initial-position="top-right"
         movable
+        data-cy="report-problem-window"
         @close="closeAndCleanForm"
     >
         <div v-if="!request.completed" class="report-problem" data-cy="report-problem-form">
             <div class="mb-2 fw-bold">
                 {{ i18n.t('feedback_category') }}
             </div>
-            <div
+            <DropdownButton
+                label="feedback_description"
+                :title="feedback.category ?? 'select_category'"
+                :current-value="feedback.category"
+                :items="feedbackCategories"
+                data-cy="report-problem-category"
                 class="my-2"
                 :class="{
                     'is-valid': feedback.category,
                     'is-invalid': !feedback.category && activateValidation,
                 }"
-                data-cy="report-feedback-category-dropdown"
-            >
-                <DropdownButton
-                    label="feedback_description"
-                    :title="feedback.category ?? 'select_category'"
-                    :current-value="feedback.category"
-                    :items="feedbackCategories"
-                    @select:item="selectItem"
-                />
-            </div>
+                @select-item="selectItem"
+            />
             <div class="invalid-feedback" data-cy="text-area-input-invalid-feedback">
                 {{ i18n.t('category_not_selected_warning') }}
             </div>
@@ -250,7 +253,7 @@ function selectItem(dropdownItem) {
                     label="feedback_description"
                     :disabled="request.pending"
                     required
-                    data-cy="report-problem"
+                    data-cy="report-problem-text-area"
                     :activate-validation="activateValidation"
                     invalid-message="feedback_empty_warning"
                     @validate="onTextValidate"
@@ -289,7 +292,7 @@ function selectItem(dropdownItem) {
                     :disabled="request.pending"
                     :description="'no_email_feedback'"
                     :activate-validation="activateValidation"
-                    data-cy="report-problem"
+                    data-cy="report-problem-email"
                     @validate="onEmailValidate"
                 />
             </div>
@@ -303,7 +306,7 @@ function selectItem(dropdownItem) {
                     :activate-validation="activateValidation"
                     :disabled="request.pending"
                     :max-file-size="ATTACHMENT_MAX_SIZE"
-                    data-cy="report-problem"
+                    data-cy="report-problem-file"
                     @validate="onAttachmentValidate"
                 />
             </div>

src/utils/components/DropdownButton.vue

@@ -64,7 +64,7 @@ const props = defineProps({
 })
 const { title, currentValue, items, withToggleButton, disabled, small } = toRefs(props)
 
-const emits = defineEmits(['click', 'select:item'])
+const emits = defineEmits({ click: () => true, selectItem: (item) => item?.id && item?.title })
 
 const { t } = useI18n()
 
@@ -104,7 +104,7 @@ function onMainButtonClick() {
 }
 
 function selectItem(item) {
-    emits('select:item', item)
+    emits('selectItem', item)
 }
 </script>
 
@@ -142,7 +142,7 @@ function selectItem(item) {
             <li v-for="item in items" :key="item.id">
                 <a
                     class="dropdown-item"
-                    :class="{ active: currentValue === item.value }"
+                    :class="{ active: currentValue === (item.value ?? item.title) }"
                     :data-tippy-content="item.description"
                     :data-cy="`dropdown-item-${item.id}`"
                     @click="selectItem(item)"

src/utils/components/SimpleWindow.vue

@@ -42,6 +42,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    dataCy: {
+        type: String,
+        default: '',
+    },
 })
 const { title, hide } = toRefs(props)
 
@@ -85,6 +89,7 @@ onMounted(() => {
             v-show="!hide"
             ref="windowRef"
             class="simple-window card"
+            :data-cy="dataCy"
             :class="[
                 initialPositionClass,
                 {
@@ -104,7 +109,11 @@ onMounted(() => {
                 }}</span>
                 <span v-else class="me-auto" />
                 <PrintButton v-if="allowPrint && showBody" :content="contentRef"></PrintButton>
-                <button class="btn btn-light btn-sm me-2" @click.stop="showBody = !showBody">
+                <button
+                    class="btn btn-light btn-sm me-2"
+                    data-cy="simple-window-minimize"
+                    @click.stop="showBody = !showBody"
+                >
                     <FontAwesomeIcon :icon="`caret-${showBody ? 'up' : 'down'}`" />
                 </button>
                 <button
@@ -115,7 +124,12 @@ onMounted(() => {
                     <FontAwesomeIcon icon="times" />
                 </button>
             </div>
-            <div ref="contentRef" class="card-body" :class="{ hide: !showBody }">
+            <div
+                ref="contentRef"
+                class="card-body"
+                :class="{ hide: !showBody }"
+                data-cy="simple-window-body"
+            >
                 <slot />
             </div>
         </div>

tests/cypress/tests-e2e/feedbackTestUtils.js

@@ -36,13 +36,21 @@ export function parseFormData(request) {
     )
 }
 
-export function interceptFeedback(success) {
+/**
+ * @param {Boolean} success
+ * @param {Object} [options]
+ * @param {Number} [options.delay] How long the delay before answering should last (in ms). Default
+ *   to 1 second.
+ * @param {String} [options.alias] How to name the intercept. Default to 'feedback'.
+ */
+export function interceptFeedback(success, options = {}) {
+    const { delay = 1000, alias = 'feedback' } = options
     cy.intercept('POST', '**/api/feedback', (req) => {
         req.reply({
             body: {
                 success,
             },
-            delay: 1000,
+            delay,
         })
-    }).as('feedback')
+    }).as(alias)
 }