Skip to content

G
gitlab-ce
Commit a0ee4a9b authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Roadmap UX enhancements 

Adds skeleton loader for Epics on default load.
Makes re-rendering Epics more efficient.
parent ead50a4a
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 140 deletions
ee/app/assets/javascripts/roadmap/components/app.vue
View file @ a0ee4a9b
......@@ -3,7 +3,6 @@ import _ from 'underscore';
import Flash from '~/flash';
import { s__ } from '~/locale';
import { GlLoadingIcon } from '@gitlab/ui';
import epicsListEmpty from './epics_list_empty.vue';
import roadmapShell from './roadmap_shell.vue';
import eventHub from '../event_hub';
......@@ -14,7 +13,6 @@ export default {
components: {
epicsListEmpty,
roadmapShell,
GlLoadingIcon,
},
props: {
store: {
......@@ -44,7 +42,7 @@ export default {
},
data() {
return {
isLoading: true,
isLoading: false,
isEpicsListEmpty: false,
hasError: false,
handleResizeThrottled: {},
......@@ -86,9 +84,16 @@ export default {
.getEpics()
.then(res => res.data)
.then(epics => {
this.isLoading = false;
if (epics.length) {
this.store.setEpics(epics);
this.$nextTick(() => {
// Render timeline bars as we're already having timeline
// rendered before fetch
eventHub.$emit('refreshTimeline', {
todayBarReady: true,
initialRender: true,
});
});
} else {
this.isEpicsListEmpty = true;
}
......@@ -107,14 +112,15 @@ export default {
.then(epics => {
if (epics.length) {
this.store.addEpics(epics);
this.$nextTick(() => {
// Re-render timeline bars with updated timeline
eventHub.$emit('refreshTimeline', {
height: window.innerHeight - roadmapTimelineEl.offsetTop,
todayBarReady: extendType === EXTEND_AS.PREPEND,
});
});
}
this.$nextTick(() => {
// Re-render timeline bars with updated timeline
this.processExtendedTimeline({
itemsCount: timeframe ? timeframe.length : 0,
extendType,
roadmapTimelineEl,
});
});
})
.catch(() => {
this.hasError = true;
......@@ -156,7 +162,6 @@ export default {
processExtendedTimeline({ extendType = EXTEND_AS.PREPEND, roadmapTimelineEl, itemsCount = 0 }) {
// Re-render timeline bars with updated timeline
eventHub.$emit('refreshTimeline', {
height: window.innerHeight - roadmapTimelineEl.offsetTop,
todayBarReady: extendType === EXTEND_AS.PREPEND,
});
......@@ -172,16 +177,10 @@ export default {
handleScrollToExtend(roadmapTimelineEl, extendType = EXTEND_AS.PREPEND) {
const timeframe = this.store.extendTimeframe(extendType);
this.$nextTick(() => {
this.processExtendedTimeline({
itemsCount: timeframe ? timeframe.length : 0,
extendType,
roadmapTimelineEl,
});
this.fetchEpicsForTimeframe({
timeframe,
roadmapTimelineEl,
extendType,
roadmapTimelineEl,
});
});
},
......@@ -191,12 +190,6 @@ export default {
<template>
<div :class="{ 'overflow-reset': isEpicsListEmpty }" class="roadmap-container">
<gl-loading-icon
v-if="isLoading"
:label="s__('GroupRoadmap|Loading roadmap')"
:size="2"
class="loading-animation prepend-top-20 append-bottom-20"
/>
<roadmap-shell
v-if="showRoadmap"
:preset-type="presetType"
......
ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue
View file @ a0ee4a9b
......@@ -57,7 +57,7 @@ export default {
},
},
watch: {
shellWidth: function shellWidth() {
shellWidth() {
// Render timeline bar only when shellWidth is updated.
this.renderTimelineBar();
},
......
ee/app/assets/javascripts/roadmap/components/epics_list_section.vue
View file @ a0ee4a9b
......@@ -3,7 +3,7 @@ import eventHub from '../event_hub';
import SectionMixin from '../mixins/section_mixin';
import { TIMELINE_CELL_MIN_WIDTH } from '../constants';
import { TIMELINE_CELL_MIN_WIDTH, EPIC_ITEM_HEIGHT } from '../constants';
import epicItem from './epic_item.vue';
......@@ -74,18 +74,14 @@ export default {
},
mounted() {
eventHub.$on('epicsListScrolled', this.handleEpicsListScroll);
eventHub.$on('refreshTimeline', () => {
this.initEmptyRow(false);
});
eventHub.$on('refreshTimeline', this.handleTimelineRefresh);
this.$nextTick(() => {
this.initMounted();
});
},
beforeDestroy() {
eventHub.$off('epicsListScrolled', this.handleEpicsListScroll);
eventHub.$off('refreshTimeline', () => {
this.initEmptyRow(false);
});
eventHub.$off('refreshTimeline', this.handleTimelineRefresh);
},
methods: {
initMounted() {
......@@ -112,7 +108,7 @@ export default {
* based on height of available list items and sets it to component
* props.
*/
initEmptyRow(showEmptyRow = false) {
initEmptyRow() {
const children = this.$children;
let approxChildrenHeight = children[0].$el.clientHeight * this.epics.length;
......@@ -130,7 +126,6 @@ export default {
this.emptyRowHeight = this.shellHeight - approxChildrenHeight;
this.showEmptyRow = true;
} else {
this.showEmptyRow = showEmptyRow;
this.showBottomShadow = true;
}
},
......@@ -141,6 +136,28 @@ export default {
scrollToTodayIndicator() {
this.$el.parentElement.scrollBy(TIMELINE_CELL_MIN_WIDTH / 2, 0);
},
/**
* Method to update list section when refreshTimeline event
* is emitted on eventHub
*
* This method ensures that empty row is toggled
* based on whether list has enough epics to make
* list vertically scrollable.
*/
handleTimelineRefresh({ initialRender = false }) {
// Initialize emptyRow only once.
if (initialRender) {
this.initEmptyRow();
}
// Check if container height is less than total height of all Epic
// items combined (AKA list is scrollable).
const isListVertScrollable =
this.$el.parentElement.offsetHeight < EPIC_ITEM_HEIGHT * (this.epics.length + 1);
// Toggle empty row.
this.showEmptyRow = !isListVertScrollable;
},
handleEpicsListScroll({ scrollTop, clientHeight, scrollHeight }) {
this.showBottomShadow = Math.ceil(scrollTop) + clientHeight < scrollHeight;
},
......
ee/app/assets/javascripts/roadmap/components/roadmap_shell.vue
View file @ a0ee4a9b
<script>
import bp from '~/breakpoints';
import { GlSkeletonLoading } from '@gitlab/ui';
import { isInViewport } from '~/lib/utils/common_utils';
import { SCROLL_BAR_SIZE, EPIC_ITEM_HEIGHT, SHELL_MIN_WIDTH, EXTEND_AS } from '../constants';
import { SCROLL_BAR_SIZE, EPIC_ITEM_HEIGHT, EXTEND_AS } from '../constants';
import eventHub from '../event_hub';
import epicsListSection from './epics_list_section.vue';
......@@ -9,6 +10,7 @@ import roadmapTimelineSection from './roadmap_timeline_section.vue';
export default {
components: {
GlSkeletonLoading,
epicsListSection,
roadmapTimelineSection,
},
......@@ -40,18 +42,29 @@ export default {
},
computed: {
containerStyles() {
const width =
bp.windowWidth() > SHELL_MIN_WIDTH
? this.shellWidth + this.getWidthOffset()
: this.shellWidth;
return {
width: `${width}px`,
width: `${this.shellWidth}px`,
height: `${this.shellHeight}px`,
};
},
},
watch: {
/**
* Watcher to monitor whether epics list is long enough
* to allow vertical list scrolling.
*
* In case of scrollable list, we don't want vertical scrollbar
* to be visible, so we mask the scrollbar by increasing shell
* width past the scrollbar size.
*/
noScroll(value) {
if (this.$el.parentElement) {
this.shellWidth = this.getShellWidth(value);
}
},
},
mounted() {
eventHub.$on('refreshTimeline', this.handleEpicsListRendered);
this.$nextTick(() => {
// Client width at the time of component mount will not
// provide accurate size of viewport until child contents are
......@@ -62,18 +75,28 @@ export default {
if (this.$el.parentElement) {
this.shellHeight = window.innerHeight - this.$el.offsetTop;
this.noScroll = this.shellHeight > EPIC_ITEM_HEIGHT * (this.epics.length + 1);
this.shellWidth = this.$el.parentElement.clientWidth + this.getWidthOffset();
this.shellWidth = this.getShellWidth(this.noScroll);
this.timeframeStartOffset = this.$refs.roadmapTimeline.$el
.querySelector('.timeline-header-item')
.querySelector('.item-sublabel .sublabel-value:first-child')
.getBoundingClientRect().left;
// We're guarding this as in tests, `roadmapTimeline`
// is not ready when this line is executed.
if (this.$refs.roadmapTimeline) {
this.timeframeStartOffset = this.$refs.roadmapTimeline.$el
.querySelector('.timeline-header-item')
.querySelector('.item-sublabel .sublabel-value:first-child')
.getBoundingClientRect().left;
}
}
});
},
beforeDestroy() {
eventHub.$off('refreshTimeline', this.handleEpicsListRendered);
},
methods: {
getWidthOffset() {
return this.noScroll ? 0 : SCROLL_BAR_SIZE;
getShellWidth(noScroll) {
return this.$el.parentElement.clientWidth + (noScroll ? 0 : SCROLL_BAR_SIZE);
},
handleEpicsListRendered() {
this.noScroll = this.shellHeight > EPIC_ITEM_HEIGHT * (this.epics.length + 1);
},
handleScroll() {
const { scrollTop, scrollLeft, clientHeight, scrollHeight } = this.$el;
......@@ -92,7 +115,6 @@ export default {
this.$emit('onScrollToEnd', this.$refs.roadmapTimeline.$el, EXTEND_AS.APPEND);
}
this.noScroll = this.shellHeight > EPIC_ITEM_HEIGHT * (this.epics.length + 1);
eventHub.$emit('epicsListScrolled', { scrollTop, scrollLeft, clientHeight, scrollHeight });
},
},
......@@ -114,6 +136,11 @@ export default {
:shell-width="shellWidth"
:list-scrollable="!noScroll"
/>
<div v-if="!epics.length" class="skeleton-loader js-skeleton-loader">
<div v-for="n in 10" :key="n" class="mt-2">
<gl-skeleton-loading :lines="2" />
</div>
</div>
<epics-list-section
:preset-type="presetType"
:epics="epics"
......
ee/app/assets/javascripts/roadmap/components/timeline_today_indicator.vue
View file @ a0ee4a9b
<script>
import { totalDaysInMonth, dayInQuarter, totalDaysInQuarter } from '~/lib/utils/datetime_utility';
import { EPIC_DETAILS_CELL_WIDTH, PRESET_TYPES } from '../constants';
import { EPIC_DETAILS_CELL_WIDTH, PRESET_TYPES, DAYS_IN_WEEK } from '../constants';
import eventHub from '../event_hub';
......@@ -42,8 +42,9 @@ export default {
* and renders vertical line over the area where
* today falls in current timeline
*/
handleEpicsListRender({ height, todayBarReady }) {
handleEpicsListRender({ todayBarReady }) {
let left = 0;
let height = 0;
// Get total days of current timeframe Item and then
// get size in % from current date and days in range
......@@ -59,15 +60,21 @@ export default {
(this.currentDate.getDate() / totalDaysInMonth(this.timeframeItem)) * 100,
);
} else if (this.presetType === PRESET_TYPES.WEEKS) {
left = Math.floor(((this.currentDate.getDay() + 1) / 7) * 100 - 7);
left = Math.floor(((this.currentDate.getDay() + 1) / DAYS_IN_WEEK) * 100 - DAYS_IN_WEEK);
}
// On initial load, container element height is 0
if (this.$root.$el.clientHeight === 0) {
height = window.innerHeight - this.$root.$el.offsetTop;
} else {
// When list is scrollable both vertically and horizontally
// We set height using top-level parent container height & position of
// today indicator element container.
height = this.$root.$el.clientHeight - this.$el.parentElement.offsetTop;
}
// We add 20 to height to ensure that
// today indicator goes past the bottom
// edge of the browser even when
// scrollbar is present
this.todayBarStyles = {
height: `${height + 20}px`,
height: `${height}px`,
left: `${left}%`,
};
this.todayBarReady = todayBarReady === undefined ? true : todayBarReady;
......
ee/app/assets/javascripts/roadmap/constants.js
View file @ a0ee4a9b
......@@ -6,8 +6,6 @@ export const EPIC_ITEM_HEIGHT = 50;
export const TIMELINE_CELL_MIN_WIDTH = 180;
export const SHELL_MIN_WIDTH = 1620;
export const SCROLL_BAR_SIZE = 15;
export const EPIC_HIGHLIGHT_REMOVE_AFTER = 3000;
......
ee/app/assets/javascripts/roadmap/utils/roadmap_utils.js
View file @ a0ee4a9b
......@@ -204,7 +204,7 @@ export const getTimeframeForWeeksView = (initialDate = new Date(), length) => {
timeframe.push(newDate(startDate));
// Move date next Sunday
startDate.setDate(startDate.getDate() + 7);
startDate.setDate(startDate.getDate() + DAYS_IN_WEEK);
}
return timeframe;
......@@ -216,12 +216,10 @@ export const extendTimeframeForWeeksView = (initialDate = new Date(), length) =>
if (length < 0) {
// When length is negative, we need to go
// back as many weeks in time as value of length
startDate.setDate(startDate.getDate() + (length + 1) * 7);
} else {
startDate.setDate(startDate.getDate());
startDate.setDate(startDate.getDate() + length * DAYS_IN_WEEK);
}
return getTimeframeForWeeksView(startDate, Math.abs(length) + 1);
return getTimeframeForWeeksView(startDate, Math.abs(length));
};
export const extendTimeframeForPreset = ({
......@@ -348,8 +346,8 @@ export const getTimeframeForPreset = (
timeframe = getTimeframeForWeeksView();
timeframeStart = newDate(timeframe[0]);
timeframeEnd = newDate(timeframe[timeframe.length - 1]);
timeframeStart.setDate(timeframeStart.getDate() - 7); // Move date back by a week
timeframeEnd.setDate(timeframeEnd.getDate() + 7); // Move date ahead by a week
timeframeStart.setDate(timeframeStart.getDate());
timeframeEnd.setDate(timeframeEnd.getDate() + DAYS_IN_WEEK); // Move date ahead by a week
}
// Extend timeframe on initial load to ensure
......@@ -413,30 +411,40 @@ export const getEpicsPathForPreset = ({
export const sortEpics = (epics, sortedBy) => {
const sortByStartDate = sortedBy.indexOf('start_date') > -1;
const sortOrderAsc = sortedBy.indexOf('asc') > -1;
const pastDate = new Date(new Date().getFullYear() - 100, 0, 1);
const futureDate = new Date(new Date().getFullYear() + 100, 0, 1);
epics.sort((a, b) => {
let aDate;
let bDate;
if (sortByStartDate) {
aDate = a.startDate;
if (a.startDateOutOfRange) {
aDate = a.originalStartDate;
if (a.startDateUndefined) {
// Set proxy date to be far in the past
// to ensure sort order is correct.
aDate = pastDate;
} else {
aDate = a.startDateOutOfRange ? a.originalStartDate : a.startDate;
}
bDate = b.startDate;
if (b.startDateOutOfRange) {
bDate = b.originalStartDate;
if (b.startDateUndefined) {
aDate = pastDate;
} else {
bDate = b.startDateOutOfRange ? b.originalStartDate : b.startDate;
}
} else {
aDate = a.endDate;
if (a.endDateOutOfRange) {
aDate = a.originalEndDate;
if (a.endDateUndefined) {
// Set proxy date to be far into the future
// to ensure sort order is correct.
aDate = futureDate;
} else {
aDate = a.endDateOutOfRange ? a.originalEndDate : a.endDate;
}
bDate = b.endDate;
if (b.endDateOutOfRange) {
bDate = b.originalEndDate;
if (b.endDateUndefined) {
bDate = futureDate;
} else {
bDate = b.endDateOutOfRange ? b.originalEndDate : b.endDate;
}
}
......
ee/app/assets/stylesheets/pages/roadmap.scss
View file @ a0ee4a9b
$header-item-height: 60px;
$item-height: 50px;
$details-cell-width: 320px;
$timeline-cell-width: 180px;
$border-style: 1px solid $border-gray-normal;
$roadmap-gradient-dark-gray: rgba(0, 0, 0, 0.15);
$roadmap-gradient-gray: rgba(255, 255, 255, 0.001);
......@@ -118,15 +119,32 @@ $column-right-gradient: linear-gradient(
}
.roadmap-shell {
position: relative;
overflow-x: auto;
.skeleton-loader {
position: absolute;
top: $header-item-height;
left: $timeline-cell-width / 2;
width: $details-cell-width;
height: 100%;
padding-top: $gl-padding-top;
padding-left: $gl-padding;
z-index: 4;
&::after {
height: 100%;
}
}
&.prevent-vertical-scroll {
overflow-y: hidden;
}
}
.roadmap-timeline-section .timeline-header-blank::after,
.epics-list-section .epic-details-cell::after {
.epics-list-section .epic-details-cell::after,
.skeleton-loader::after {
content: "";
position: absolute;
top: 0;
......
ee/spec/javascripts/roadmap/components/app_spec.js
View file @ a0ee4a9b
......@@ -66,7 +66,7 @@ describe('AppComponent', () => {
describe('data', () => {
it('returns default data props', () => {
expect(vm.isLoading).toBe(true);
expect(vm.isLoading).toBe(false);
expect(vm.isEpicsListEmpty).toBe(false);
expect(vm.hasError).toBe(false);
expect(vm.handleResizeThrottled).toBeDefined();
......@@ -150,6 +150,7 @@ describe('AppComponent', () => {
it('calls service.getEpics and sets response to the store on success', done => {
mock.onGet(vm.service.epicsPath).reply(200, rawEpics);
spyOn(vm.store, 'setEpics');
spyOn(eventHub, '$emit');
vm.fetchEpics();
......@@ -157,7 +158,19 @@ describe('AppComponent', () => {
setTimeout(() => {
expect(vm.isLoading).toBe(false);
expect(vm.store.setEpics).toHaveBeenCalledWith(rawEpics);
done();
vm.$nextTick()
.then(() => {
expect(eventHub.$emit).toHaveBeenCalledWith(
'refreshTimeline',
jasmine.objectContaining({
todayBarReady: true,
initialRender: true,
}),
);
})
.then(done)
.catch(done.fail);
}, 0);
});
......@@ -210,13 +223,15 @@ describe('AppComponent', () => {
it('calls service.fetchEpicsForTimeframe and adds response to the store on success', done => {
mock.onGet(vm.service.epicsPath).reply(200, rawEpics);
const extendType = EXTEND_AS.APPEND;
spyOn(vm.service, 'getEpicsForTimeframe').and.callThrough();
spyOn(vm.store, 'addEpics');
spyOn(vm, '$nextTick').and.stub();
spyOn(vm, 'processExtendedTimeline');
vm.fetchEpicsForTimeframe({
timeframe: mockTimeframeMonths,
extendType: EXTEND_AS.APPEND,
extendType,
roadmapTimelineEl,
});
......@@ -227,7 +242,18 @@ describe('AppComponent', () => {
);
setTimeout(() => {
expect(vm.store.addEpics).toHaveBeenCalledWith(rawEpics);
done();
vm.$nextTick()
.then(() => {
expect(vm.processExtendedTimeline).toHaveBeenCalledWith(
jasmine.objectContaining({
itemsCount: 8,
extendType,
roadmapTimelineEl,
}),
);
})
.then(done)
.catch(done.fail);
}, 0);
});
......@@ -307,7 +333,6 @@ describe('AppComponent', () => {
it('updates the store and refreshes roadmap with extended timeline when called with `extendType` param as `prepend`', done => {
spyOn(vm.store, 'extendTimeframe');
spyOn(vm, 'processExtendedTimeline');
spyOn(vm, 'fetchEpicsForTimeframe');
const extendType = EXTEND_AS.PREPEND;
......@@ -319,14 +344,6 @@ describe('AppComponent', () => {
vm.$nextTick()
.then(() => {
expect(vm.processExtendedTimeline).toHaveBeenCalledWith(
jasmine.objectContaining({
itemsCount: 0,
extendType,
roadmapTimelineEl,
}),
);
expect(vm.fetchEpicsForTimeframe).toHaveBeenCalledWith(
jasmine.objectContaining({
// During tests, we don't extend timeframe
......@@ -343,7 +360,6 @@ describe('AppComponent', () => {
it('updates the store and refreshes roadmap with extended timeline when called with `extendType` param as `append`', done => {
spyOn(vm.store, 'extendTimeframe');
spyOn(vm, 'processExtendedTimeline');
spyOn(vm, 'fetchEpicsForTimeframe');
const extendType = EXTEND_AS.APPEND;
......@@ -355,14 +371,6 @@ describe('AppComponent', () => {
vm.$nextTick()
.then(() => {
expect(vm.processExtendedTimeline).toHaveBeenCalledWith(
jasmine.objectContaining({
itemsCount: 0,
extendType,
roadmapTimelineEl,
}),
);
expect(vm.fetchEpicsForTimeframe).toHaveBeenCalledWith(
jasmine.objectContaining({
// During tests, we don't extend timeframe
......
ee/spec/javascripts/roadmap/components/roadmap_shell_spec.js
View file @ a0ee4a9b
......@@ -7,7 +7,7 @@ import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { mockEpic, mockTimeframeInitialDate, mockGroupId, mockScrollBarSize } from '../mock_data';
import { mockEpic, mockTimeframeInitialDate, mockGroupId } from '../mock_data';
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
......@@ -45,6 +45,7 @@ describe('RoadmapShellComponent', () => {
expect(vm.shellWidth).toBe(0);
expect(vm.shellHeight).toBe(0);
expect(vm.noScroll).toBe(false);
expect(vm.timeframeStartOffset).toBe(0);
});
});
......@@ -59,7 +60,7 @@ describe('RoadmapShellComponent', () => {
document.querySelector('.roadmap-container').remove();
});
it('returns style object based on shellWidth and current Window width with Scollbar size offset', done => {
it('returns style object based on shellWidth and shellHeight', done => {
const vmWithParentEl = createComponent({}, document.getElementById('roadmap-shell'));
Vue.nextTick(() => {
const stylesObj = vmWithParentEl.containerStyles;
......@@ -75,30 +76,16 @@ describe('RoadmapShellComponent', () => {
});
describe('methods', () => {
describe('getWidthOffset', () => {
it('returns 0 when noScroll prop is true', () => {
vm.noScroll = true;
expect(vm.getWidthOffset()).toBe(0);
});
it('returns value of SCROLL_BAR_SIZE when noScroll prop is false', () => {
vm.noScroll = false;
beforeEach(() => {
document.body.innerHTML +=
'<div class="roadmap-container"><div id="roadmap-shell"></div></div>';
});
expect(vm.getWidthOffset()).toBe(mockScrollBarSize);
});
afterEach(() => {
document.querySelector('.roadmap-container').remove();
});
describe('handleScroll', () => {
beforeEach(() => {
document.body.innerHTML +=
'<div class="roadmap-container"><div id="roadmap-shell"></div></div>';
});
afterEach(() => {
document.querySelector('.roadmap-container').remove();
});
it('emits `epicsListScrolled` event via eventHub', done => {
const vmWithParentEl = createComponent({}, document.getElementById('roadmap-shell'));
spyOn(eventHub, '$emit');
......@@ -123,6 +110,17 @@ describe('RoadmapShellComponent', () => {
expect(vm.$el.classList.contains('roadmap-shell')).toBe(true);
});
it('renders skeleton loader element when Epics list is empty', done => {
vm.epics = [];
vm.$nextTick()
.then(() => {
expect(vm.$el.querySelector('.js-skeleton-loader')).not.toBeNull();
})
.then(done)
.catch(done.fail);
});
it('adds `prevent-vertical-scroll` class on component container element', done => {
vm.noScroll = true;
Vue.nextTick(() => {
......
ee/spec/javascripts/roadmap/components/timeline_today_indicator_spec.js
View file @ a0ee4a9b
......@@ -49,17 +49,24 @@ describe('TimelineTodayIndicatorComponent', () => {
describe('methods', () => {
describe('handleEpicsListRender', () => {
it('sets `todayBarStyles` and `todayBarReady` props based on provided height param, timeframeItem and currentDate props', () => {
it('sets `todayBarStyles` and `todayBarReady` props', () => {
vm = createComponent({});
vm.handleEpicsListRender({
height: 100,
});
vm.handleEpicsListRender({});
const stylesObj = vm.todayBarStyles;
expect(stylesObj.height).toBe('120px');
expect(stylesObj.height).toBe('600px');
expect(stylesObj.left).toBe('50%');
expect(vm.todayBarReady).toBe(true);
});
it('sets `todayBarReady` prop based on value of provided `todayBarReady` param', () => {
vm = createComponent({});
vm.handleEpicsListRender({
todayBarReady: false,
});
expect(vm.todayBarReady).toBe(false);
});
});
});
......@@ -90,9 +97,7 @@ describe('TimelineTodayIndicatorComponent', () => {
describe('template', () => {
it('renders component container element with class `today-bar`', done => {
vm = createComponent({});
vm.handleEpicsListRender({
height: 100,
});
vm.handleEpicsListRender({});
vm.$nextTick(() => {
expect(vm.$el.classList.contains('today-bar')).toBe(true);
done();
......
ee/spec/javascripts/roadmap/mock_data.js
View file @ a0ee4a9b
......@@ -70,13 +70,12 @@ export const mockTimeframeMonthsAppend = [
];
export const mockTimeframeWeeksPrepend = [
new Date(2017, 10, 5),
new Date(2017, 10, 12),
new Date(2017, 10, 19),
new Date(2017, 10, 26),
new Date(2017, 11, 3),
new Date(2017, 11, 10),
new Date(2017, 11, 17),
new Date(2017, 11, 24),
];
export const mockTimeframeWeeksAppend = [
new Date(2018, 0, 28),
......@@ -85,7 +84,6 @@ export const mockTimeframeWeeksAppend = [
new Date(2018, 1, 18),
new Date(2018, 1, 25),
new Date(2018, 2, 4),
new Date(2018, 2, 11),
];
export const mockEpic = {
......
locale/gitlab.pot
View file @ a0ee4a9b
......@@ -4529,9 +4529,6 @@ msgstr ""
msgid "GroupRoadmap|From %{dateWord}"
msgstr ""
msgid "GroupRoadmap|Loading roadmap"
msgstr ""
msgid "GroupRoadmap|Something went wrong while fetching epics"
msgstr ""
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7