Hide filters UI in Roadmap within epic page

- Hides filtering UI while roadmap data is being loaded
within an epic page.
- Cleans up Roadmap component tests

Changelog: fixed
EE: true

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

@@ -55,6 +55,7 @@ export default {
   computed: {
     ...mapState([
       'currentGroupId',
+      'epicIid',
       'epics',
       'milestones',
       'timeframe',
@@ -158,7 +159,10 @@ export default {
 
 <template>
   <div class="roadmap-app-container gl-h-full">
-    <roadmap-filters v-if="showFilteredSearchbar" :timeframe-range-type="timeframeRangeType" />
+    <roadmap-filters
+      v-if="showFilteredSearchbar && !epicIid"
+      :timeframe-range-type="timeframeRangeType"
+    />
     <gl-alert
       v-if="isWarningVisible"
       variant="warning"

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

@@ -106,32 +106,17 @@ describe('RoadmapApp', () => {
       store.commit(types.RECEIVE_EPICS_SUCCESS, { epics: [] });
     });
 
-    it('contains path for the empty state illustration', () => {
-      expect(wrapper.find(EpicsListEmpty).props('emptyStateIllustrationPath')).toBe(
+    it('shows epic-list-empty component', () => {
+      const epicsListEmpty = wrapper.findComponent(EpicsListEmpty);
+      expect(epicsListEmpty.exists()).toBe(true);
+      expect(epicsListEmpty.props()).toMatchObject({
         emptyStateIllustrationPath,
-      );
-    });
-
-    it('contains whether to apply filters', () => {
-      expect(wrapper.find(EpicsListEmpty).props('hasFiltersApplied')).toBe(hasFiltersApplied);
-    });
-
-    it('contains whether it is child epics', () => {
-      expect(wrapper.find(EpicsListEmpty).props('isChildEpics')).toBe(false);
-    });
-
-    it('contains the preset type', () => {
-      expect(wrapper.find(EpicsListEmpty).props('presetType')).toBe(presetType);
-    });
-
-    it('contains the start of the timeframe', () => {
-      expect(wrapper.find(EpicsListEmpty).props('timeframeStart')).toStrictEqual(timeframe[0]);
+        hasFiltersApplied,
+        presetType,
+        timeframeStart: timeframe[0],
+        timeframeEnd: timeframe[timeframe.length - 1],
+        isChildEpics: false,
       });
-
-    it('contains the end of the timeframe', () => {
-      expect(wrapper.find(EpicsListEmpty).props('timeframeEnd')).toStrictEqual(
-        timeframe[timeframe.length - 1],
-      );
     });
   });
 
@@ -141,32 +126,32 @@ describe('RoadmapApp', () => {
       store.commit(types.RECEIVE_EPICS_SUCCESS, { epics });
     });
 
-    it('contains roadmap filters UI', () => {
-      expect(wrapper.find(RoadmapFilters).exists()).toBe(true);
-    });
-
-    it('contains the current group id', () => {
-      expect(wrapper.find(RoadmapShell).props('currentGroupId')).toBe(currentGroupId);
+    it('does not show filters UI when epicIid is present', async () => {
+      store.dispatch('setInitialData', {
+        epicIid: mockFormattedEpic.iid,
       });
 
-    it('contains epics', () => {
-      expect(wrapper.find(RoadmapShell).props('epics')).toEqual(epics);
-    });
+      await wrapper.vm.$nextTick();
 
-    it('contains whether filters are applied', () => {
-      expect(wrapper.find(RoadmapShell).props('hasFiltersApplied')).toBe(hasFiltersApplied);
+      expect(wrapper.findComponent(RoadmapFilters).exists()).toBe(false);
     });
 
-    it('contains milestones', () => {
-      expect(wrapper.find(RoadmapShell).props('milestones')).toEqual([]);
+    it('shows roadmap filters UI when epicIid is not present', () => {
+      // By default, `epicIid` is not set on store.
+      expect(wrapper.findComponent(RoadmapFilters).exists()).toBe(true);
     });
 
-    it('contains the preset type', () => {
-      expect(wrapper.find(RoadmapShell).props('presetType')).toBe(presetType);
+    it('shows roadmap-shell component', () => {
+      const roadmapShell = wrapper.findComponent(RoadmapShell);
+      expect(wrapper.find(RoadmapShell).exists()).toBe(true);
+      expect(roadmapShell.props()).toMatchObject({
+        currentGroupId,
+        epics,
+        hasFiltersApplied,
+        presetType,
+        timeframe,
+        milestones: [],
       });
-
-    it('contains timeframe', () => {
-      expect(wrapper.find(RoadmapShell).props('timeframe')).toEqual(timeframe);
     });
   });