Swimlanes - Fetch more epics button

Review feedback

ee/app/assets/javascripts/boards/components/epic_lane.vue

@@ -87,11 +87,14 @@ export default {
     shouldDisplay() {
       return this.issuesCount > 0 || this.isLoading;
     },
+    showUnassignedLane() {
+      return !this.isCollapsed && this.issuesCount > 0;
+    },
   },
   watch: {
-    filterParams: {
-      handler() {
-        if (!this.filterParams.epicId || this.filterParams.epicId === this.epic.id) {
+    'filterParams.epicId': {
+      handler(epicId) {
+        if (!epicId || epicId === this.epic.id) {
           this.fetchIssuesForEpic(this.epic.id);
         }
       },
@@ -134,7 +137,6 @@ export default {
           class="gl-mr-2 gl-cursor-pointer"
           category="tertiary"
           size="small"
-          data-testid="epic-lane-chevron"
           @click="toggleCollapsed"
         />
         <h4
@@ -165,7 +167,7 @@ export default {
       </div>
     </div>
     <div
-      v-if="!isCollapsed && issuesCount > 0"
+      v-if="showUnassignedLane"
       class="gl-display-flex gl-pb-5 board-epic-lane-issues"
       data-testid="board-epic-lane-issues"
     >

ee/app/assets/javascripts/boards/components/epics_swimlanes.vue

@@ -123,11 +123,7 @@ export default {
   watch: {
     filterParams: {
       handler() {
-        Promise.all(
-          this.epics.map((epic) => {
-            return this.fetchIssuesForEpic(epic.id);
-          }),
-        )
+        Promise.all(this.epics.map((epic) => this.fetchIssuesForEpic(epic.id)))
           .then(() => this.doneLoadingSwimlanesItems())
           .catch(() => {});
       },

ee/app/assets/javascripts/boards/stores/mutations.js

@@ -92,6 +92,7 @@ export default {
       ...state.epicsSwimlanesFetchInProgress,
       listItemsFetchInProgress: false,
     });
+    state.error = undefined;
   },
 
   [mutationTypes.RECEIVE_BOARD_LISTS_SUCCESS]: (state, boardLists) => {

ee/spec/frontend/boards/components/epic_lane_spec.js

-import { GlIcon, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import EpicLane from 'ee/boards/components/epic_lane.vue';
 import IssuesLaneList from 'ee/boards/components/issues_lane_list.vue';
 import getters from 'ee/boards/stores/getters';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { mockEpic, mockLists, mockIssuesByListId, issues } from '../mock_data';
 
 Vue.use(Vuex);
@@ -15,6 +14,8 @@ describe('EpicLane', () => {
 
   const updateBoardEpicUserPreferencesSpy = jest.fn();
 
+  const findChevronButton = () => wrapper.findComponent(GlButton);
+
   const createStore = ({ boardItemsByListId = mockIssuesByListId, isLoading = false }) => {
     return new Vuex.Store({
       actions: {
@@ -47,15 +48,13 @@ describe('EpicLane', () => {
       disabled: false,
     };
 
-    wrapper = extendedWrapper(
-      shallowMount(EpicLane, {
+    wrapper = shallowMountExtended(EpicLane, {
       propsData: {
         ...defaultProps,
         ...props,
       },
       store,
-      }),
-    );
+    });
   };
 
   afterEach(() => {
@@ -87,7 +86,7 @@ describe('EpicLane', () => {
       expect(wrapper.findAll(IssuesLaneList)).toHaveLength(wrapper.props('lists').length);
       expect(wrapper.vm.isCollapsed).toBe(false);
 
-      wrapper.findByTestId('epic-lane-chevron').vm.$emit('click');
+      findChevronButton().vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.findAll(IssuesLaneList)).toHaveLength(0);
@@ -96,12 +95,12 @@ describe('EpicLane', () => {
     });
 
     it('does not display loading icon when issues are not loading', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
     });
 
     it('displays loading icon and hides issues count when issues are loading', () => {
       createComponent({ isLoading: true });
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
       expect(wrapper.findByTestId('epic-lane-issue-count').exists()).toBe(false);
     });
 
@@ -110,7 +109,7 @@ describe('EpicLane', () => {
 
       expect(wrapper.vm.isCollapsed).toBe(collapsedValue);
 
-      wrapper.findByTestId('epic-lane-chevron').vm.$emit('click');
+      findChevronButton().vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(updateBoardEpicUserPreferencesSpy).toHaveBeenCalled();

ee/spec/frontend/boards/components/epics_swimlanes_spec.js

@@ -146,15 +146,15 @@ describe('EpicsSwimlanes', () => {
     });
 
     it('displays IssueLaneList component when toggling unassigned issues lane', async () => {
-      wrapper.vm.toggleUnassignedLane();
+      wrapper.findByTestId('unassigned-lane-toggle').vm.$emit('click');
 
       await wrapper.vm.$nextTick();
       expect(wrapper.findComponent(IssueLaneList).exists()).toBe(true);
     });
 
     it('displays issues icon and count for unassigned issue', () => {
-      expect(wrapper.findComponent(GlIcon).props('name')).toEqual('issues');
-      expect(wrapper.findByTestId('issues-lane-issue-count').text()).toEqual('2');
+      expect(wrapper.findComponent(GlIcon).props('name')).toBe('issues');
+      expect(wrapper.findByTestId('issues-lane-issue-count').text()).toBe('2');
     });
 
     it('makes non preset lists draggable', () => {

ee/spec/frontend/boards/stores/mutations_spec.js

@@ -140,17 +140,19 @@ describe('SET_EPICS_SWIMLANES', () => {
 });
 
 describe('DONE_LOADING_SWIMLANES_ITEMS', () => {
-  it('set listItemsFetchInProgress to false', () => {
+  it('set listItemsFetchInProgress to false ans resets error', () => {
     state = {
       ...state,
       epicsSwimlanesFetchInProgress: {
         listItemsFetchInProgress: true,
       },
+      error: 'Houston, we have a problem.',
     };
 
     mutations.DONE_LOADING_SWIMLANES_ITEMS(state);
 
     expect(state.epicsSwimlanesFetchInProgress.listItemsFetchInProgress).toBe(false);
+    expect(state.error).toBe(undefined);
   });
 });