Merge branch 'vs/change-vue-emit-to-single-arg-in-roadmap-shell' into 'master'

Emit events in Vue with single arg instead of multiple in roadmap_shell.vue

See merge request gitlab-org/gitlab!67241

ee/app/assets/javascripts/roadmap/components/roadmap_app.vue

@@ -106,13 +106,13 @@ export default {
      * 3. In case of prepending timeframe,
      *    reset scroll-position (due to DOM prepend).
      */
-    processExtendedTimeline({ extendType = EXTEND_AS.PREPEND, roadmapTimelineEl, itemsCount = 0 }) {
+    processExtendedTimeline({ extendAs = EXTEND_AS.PREPEND, roadmapTimelineEl, itemsCount = 0 }) {
       // Re-render timeline bars with updated timeline
       eventHub.$emit('refreshTimeline', {
-        todayBarReady: extendType === EXTEND_AS.PREPEND,
+        todayBarReady: extendAs === EXTEND_AS.PREPEND,
       });
 
-      if (extendType === EXTEND_AS.PREPEND) {
+      if (extendAs === EXTEND_AS.PREPEND) {
         // When DOM is prepended with elements
         // we compensate the scrolling for added elements' width
         roadmapTimelineEl.parentElement.scrollBy(
@@ -121,8 +121,8 @@ export default {
         );
       }
     },
-    handleScrollToExtend(roadmapTimelineEl, extendType = EXTEND_AS.PREPEND) {
-      this.extendTimeframe({ extendAs: extendType });
+    handleScrollToExtend({ el: roadmapTimelineEl, extendAs = EXTEND_AS.PREPEND }) {
+      this.extendTimeframe({ extendAs });
       this.refreshEpicDates();
       this.refreshMilestoneDates();
 
@@ -135,7 +135,7 @@ export default {
               // Re-render timeline bars with updated timeline
               this.processExtendedTimeline({
                 itemsCount: this.extendedTimeframe ? this.extendedTimeframe.length : 0,
-                extendType,
+                extendAs,
                 roadmapTimelineEl,
               });
             });
@@ -164,9 +164,8 @@ export default {
       primary-button-link="https://docs.gitlab.com/ee/user/group/roadmap/"
       data-testid="epics_limit_callout"
       @dismiss="dismissTooManyEpicsWarning"
+      >{{ $options.i18n.warningBody }}</gl-alert
     >
-      {{ $options.i18n.warningBody }}
-    </gl-alert>
     <div :class="{ 'overflow-reset': epicsFetchResultEmpty }" class="roadmap-container">
       <gl-loading-icon v-if="epicsFetchInProgress" class="gl-mt-5" size="md" />
       <epics-list-empty

ee/app/assets/javascripts/roadmap/components/roadmap_shell.vue

@@ -76,10 +76,16 @@ export default {
 
       // If timeline was scrolled to start
       if (isInViewport(timelineEdgeStartEl, { left: this.timeframeStartOffset })) {
-        this.$emit('onScrollToStart', this.$refs.roadmapTimeline.$el, EXTEND_AS.PREPEND);
+        this.$emit('onScrollToStart', {
+          el: this.$refs.roadmapTimeline.$el,
+          extendAs: EXTEND_AS.PREPEND,
+        });
       } else if (isInViewport(timelineEdgeEndEl)) {
         // If timeline was scrolled to end
-        this.$emit('onScrollToEnd', this.$refs.roadmapTimeline.$el, EXTEND_AS.APPEND);
+        this.$emit('onScrollToEnd', {
+          el: this.$refs.roadmapTimeline.$el,
+          extendAs: EXTEND_AS.APPEND,
+        });
       }
 
       eventHub.$emit('epicsListScrolled', { scrollTop, scrollLeft, clientHeight, scrollHeight });

ee/spec/frontend/roadmap/components/roadmap_app_spec.js

 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import Cookies from 'js-cookie';
+import { nextTick } from 'vue';
 import Vuex from 'vuex';
 import EpicsListEmpty from 'ee/roadmap/components/epics_list_empty.vue';
 import RoadmapApp from 'ee/roadmap/components/roadmap_app.vue';
@@ -212,27 +213,26 @@ describe('RoadmapApp', () => {
 
       const extendType = EXTEND_AS.PREPEND;
 
-      wrapper.vm.handleScrollToExtend(roadmapTimelineEl, extendType);
+      wrapper.vm.handleScrollToExtend({ el: roadmapTimelineEl, extendAs: extendType });
 
       expect(wrapper.vm.extendTimeframe).toHaveBeenCalledWith({ extendAs: extendType });
       expect(wrapper.vm.refreshEpicDates).toHaveBeenCalled();
       expect(wrapper.vm.refreshMilestoneDates).toHaveBeenCalled();
     });
 
-    it('calls `fetchEpicsForTimeframe` with extended timeframe array', () => {
+    it('calls `fetchEpicsForTimeframe` with extended timeframe array', async () => {
       jest.spyOn(wrapper.vm, 'fetchEpicsForTimeframe').mockResolvedValue();
 
       const extendType = EXTEND_AS.PREPEND;
 
-      wrapper.vm.handleScrollToExtend(roadmapTimelineEl, extendType);
+      wrapper.vm.handleScrollToExtend({ el: roadmapTimelineEl, extendAs: extendType });
 
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.vm.fetchEpicsForTimeframe).toHaveBeenCalledWith(
-          expect.objectContaining({
-            timeframe: wrapper.vm.extendedTimeframe,
-          }),
-        );
-      });
+      await nextTick();
+      expect(wrapper.vm.fetchEpicsForTimeframe).toHaveBeenCalledWith(
+        expect.objectContaining({
+          timeframe: wrapper.vm.extendedTimeframe,
+        }),
+      );
     });
   });