Commit 8a1ae09e authored by Coung Ngo's avatar Coung Ngo Committed by Paul Slaughter

Add spinner to roadmap

Roadmap did not show any indication that anything was
being loaded when it was fetching epics for the roadmap
parent 162c6641
<script>
import { GlLoadingIcon } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex';
import epicsListEmpty from './epics_list_empty.vue';
import roadmapShell from './roadmap_shell.vue';
import EpicsListEmpty from './epics_list_empty.vue';
import RoadmapShell from './roadmap_shell.vue';
import eventHub from '../event_hub';
import { EXTEND_AS } from '../constants';
export default {
components: {
epicsListEmpty,
roadmapShell,
EpicsListEmpty,
GlLoadingIcon,
RoadmapShell,
},
props: {
presetType: {
......@@ -51,9 +51,6 @@ export default {
const last = this.timeframe.length - 1;
return this.timeframe[last];
},
showRoadmap() {
return !this.epicsFetchFailure && !this.epicsFetchInProgress && !this.epicsFetchResultEmpty;
},
},
mounted() {
this.fetchEpics();
......@@ -122,8 +119,19 @@ export default {
<template>
<div :class="{ 'overflow-reset': epicsFetchResultEmpty }" class="roadmap-container">
<gl-loading-icon v-if="epicsFetchInProgress" class="mt-4" size="md" />
<epics-list-empty
v-else-if="epicsFetchResultEmpty"
:preset-type="presetType"
:timeframe-start="timeframeStart"
:timeframe-end="timeframeEnd"
:has-filters-applied="hasFiltersApplied"
:new-epic-endpoint="newEpicEndpoint"
:empty-state-illustration-path="emptyStateIllustrationPath"
:is-child-epics="isChildEpics"
/>
<roadmap-shell
v-if="showRoadmap"
v-else-if="!epicsFetchFailure"
:preset-type="presetType"
:epics="epics"
:milestones="milestones"
......@@ -133,15 +141,5 @@ export default {
@onScrollToStart="handleScrollToExtend"
@onScrollToEnd="handleScrollToExtend"
/>
<epics-list-empty
v-if="epicsFetchResultEmpty"
:preset-type="presetType"
:timeframe-start="timeframeStart"
:timeframe-end="timeframeEnd"
:has-filters-applied="hasFiltersApplied"
:new-epic-endpoint="newEpicEndpoint"
:empty-state-illustration-path="emptyStateIllustrationPath"
:is-child-epics="isChildEpics"
/>
</div>
</template>
---
title: Add spinner to roadmap
merge_request: 31080
author:
type: added
import { GlLoadingIcon } from '@gitlab/ui';
import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
import Vue from 'vue';
import Vuex from 'vuex';
......@@ -67,35 +68,34 @@ describe('RoadmapApp', () => {
wrapper = null;
});
describe('when the app contains epics', () => {
describe.each`
testLabel | epicList | showLoading | showRoadmapShell | showEpicsListEmpty
${'is loading'} | ${null} | ${true} | ${false} | ${false}
${'has epics'} | ${epics} | ${false} | ${true} | ${false}
${'has no epics'} | ${[]} | ${false} | ${false} | ${true}
`(
`when epic list $testLabel`,
({ epicList, showLoading, showRoadmapShell, showEpicsListEmpty }) => {
beforeEach(() => {
wrapper = createComponent();
store.commit(types.RECEIVE_EPICS_SUCCESS, epics);
});
it('the roadmap is shown', () => {
expect(wrapper.contains(RoadmapShell)).toBe(true);
});
it('the empty state view is not shown', () => {
expect(wrapper.contains(EpicsListEmpty)).toBe(false);
});
if (epicList) {
store.commit(types.RECEIVE_EPICS_SUCCESS, epicList);
}
});
describe('when the app does not contain any epics', () => {
beforeEach(() => {
wrapper = createComponent();
store.commit(types.RECEIVE_EPICS_SUCCESS, []);
it(`loading icon is${showLoading ? '' : ' not'} shown`, () => {
expect(wrapper.contains(GlLoadingIcon)).toBe(showLoading);
});
it('the roadmap is not shown', () => {
expect(wrapper.contains(RoadmapShell)).toBe(false);
it(`roadmap is${showRoadmapShell ? '' : ' not'} shown`, () => {
expect(wrapper.contains(RoadmapShell)).toBe(showRoadmapShell);
});
it('the empty state view is shown', () => {
expect(wrapper.contains(EpicsListEmpty)).toBe(true);
});
it(`empty state view is${showEpicsListEmpty ? '' : ' not'} shown`, () => {
expect(wrapper.contains(EpicsListEmpty)).toBe(showEpicsListEmpty);
});
},
);
describe('empty state view', () => {
beforeEach(() => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment