Commit 07e89047 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

Merge branch '323917-remove-roadmap_daterange_filter-ff' into 'master'

Remove `roadmap_daterange_filter` feature flag and related legacy code from Roadmap app

See merge request gitlab-org/gitlab!72419
parents 4f6a4289 605d5dca
<script>
import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
import Cookies from 'js-cookie';
import { GlLoadingIcon } from '@gitlab/ui';
import { mapState, mapActions } from 'vuex';
import { __, s__ } from '~/locale';
import {
EPICS_LIMIT_DISMISSED_COOKIE_NAME,
EPICS_LIMIT_DISMISSED_COOKIE_TIMEOUT,
DATE_RANGES,
} from '../constants';
import { DATE_RANGES } from '../constants';
import EpicsListEmpty from './epics_list_empty.vue';
import RoadmapFilters from './roadmap_filters.vue';
import RoadmapShell from './roadmap_shell.vue';
export default {
i18n: {
warningTitle: s__('GroupRoadmap|Some of your epics might not be visible'),
warningBody: s__(
'GroupRoadmap|Roadmaps can display up to 1,000 epics. These appear in your selected sort order.',
),
warningButtonLabel: __('Learn more'),
},
components: {
EpicsListEmpty,
GlAlert,
GlLoadingIcon,
RoadmapFilters,
RoadmapShell,
......@@ -43,11 +29,6 @@ export default {
required: true,
},
},
data() {
return {
isWarningDismissed: Cookies.get(EPICS_LIMIT_DISMISSED_COOKIE_NAME) === 'true',
};
},
computed: {
...mapState([
'currentGroupId',
......@@ -85,12 +66,6 @@ export default {
},
methods: {
...mapActions(['fetchEpics', 'fetchMilestones']),
dismissTooManyEpicsWarning() {
Cookies.set(EPICS_LIMIT_DISMISSED_COOKIE_NAME, 'true', {
expires: EPICS_LIMIT_DISMISSED_COOKIE_TIMEOUT,
});
this.isWarningDismissed = true;
},
},
};
</script>
......@@ -101,16 +76,6 @@ export default {
v-if="showFilteredSearchbar && !epicIid"
:timeframe-range-type="timeframeRangeType"
/>
<gl-alert
v-if="isWarningVisible"
variant="warning"
:title="$options.i18n.warningTitle"
:primary-button-text="$options.i18n.warningButtonLabel"
primary-button-link="https://docs.gitlab.com/ee/user/group/roadmap/"
data-testid="epics_limit_callout"
@dismiss="dismissTooManyEpicsWarning"
>{{ $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
......
......@@ -11,7 +11,6 @@ import { mapState, mapActions } from 'vuex';
import { visitUrl, mergeUrlParams, updateHistory, setUrlParams } from '~/lib/utils/url_utility';
import { __, s__ } from '~/locale';
import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { EPICS_STATES, PRESET_TYPES, DATE_RANGES } from '../constants';
import EpicsFilteredSearchMixin from '../mixins/filtered_search_mixin';
......@@ -56,7 +55,7 @@ export default {
GlDropdownDivider,
FilteredSearchBar,
},
mixins: [EpicsFilteredSearchMixin, glFeatureFlagsMixin()],
mixins: [EpicsFilteredSearchMixin],
props: {
timeframeRangeType: {
type: String,
......@@ -95,10 +94,6 @@ export default {
const months = { text: __('Months'), value: PRESET_TYPES.MONTHS };
const weeks = { text: __('Weeks'), value: PRESET_TYPES.WEEKS };
if (!this.glFeatures.roadmapDaterangeFilter) {
return [quarters, months, weeks];
}
if (this.selectedDaterange === DATE_RANGES.CURRENT_YEAR) {
return [months, weeks];
} else if (this.selectedDaterange === DATE_RANGES.THREE_YEARS) {
......@@ -146,9 +141,7 @@ export default {
handleRoadmapLayoutChange(presetType) {
visitUrl(
mergeUrlParams(
this.glFeatures.roadmapDaterangeFilter
? { timeframe_range_type: this.selectedDaterange, layout: presetType }
: { layout: presetType },
{ timeframe_range_type: this.selectedDaterange, layout: presetType },
window.location.href,
),
);
......@@ -175,7 +168,6 @@ export default {
class="epics-details-filters filtered-search-block gl-display-flex gl-flex-direction-column gl-xl-flex-direction-row gl-pb-3 row-content-block second-block"
>
<gl-dropdown
v-if="glFeatures.roadmapDaterangeFilter"
icon="calendar"
class="gl-mr-0 gl-lg-mr-3 mb-sm-2 roadmap-daterange-dropdown"
toggle-class="gl-rounded-base!"
......
......@@ -41,11 +41,6 @@ export const EPICS_STATES = {
CLOSED: 'closed',
};
export const EXTEND_AS = {
PREPEND: 'prepend',
APPEND: 'append',
};
export const emptyStateDefault = s__(
'GroupRoadmap|To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from %{startDate} to %{endDate}.',
);
......@@ -58,18 +53,6 @@ export const emptyStateWithEpicIidFiltered = s__(
'GroupRoadmap|To make your epics appear in the roadmap, add start or due dates to them.',
);
export const PRESET_DEFAULTS = {
QUARTERS: {
TIMEFRAME_LENGTH: 21,
},
MONTHS: {
TIMEFRAME_LENGTH: 8,
},
WEEKS: {
TIMEFRAME_LENGTH: 7,
},
};
export const EPIC_LEVEL_MARGIN = {
1: 'ml-4',
2: 'ml-6',
......@@ -77,8 +60,4 @@ export const EPIC_LEVEL_MARGIN = {
4: 'ml-10',
};
export const EPICS_LIMIT_DISMISSED_COOKIE_NAME = 'epics_limit_warning_dismissed';
export const EPICS_LIMIT_DISMISSED_COOKIE_TIMEOUT = 365;
export const ROADMAP_PAGE_SIZE = 50;
......@@ -11,11 +11,10 @@ import EpicItem from './components/epic_item.vue';
import EpicItemContainer from './components/epic_item_container.vue';
import roadmapApp from './components/roadmap_app.vue';
import { PRESET_TYPES, EPIC_DETAILS_CELL_WIDTH, DATE_RANGES } from './constants';
import { DATE_RANGES } from './constants';
import createStore from './store';
import {
getTimeframeForPreset,
getPresetTypeForTimeframeRangeType,
getTimeframeForRangeType,
} from './utils/roadmap_utils';
......@@ -70,30 +69,16 @@ export default () => {
},
data() {
const { dataset } = this.$options.el;
let timeframe;
let timeframeRangeType;
let presetType;
if (gon.features.roadmapDaterangeFilter) {
timeframeRangeType =
const timeframeRangeType =
Object.keys(DATE_RANGES).indexOf(dataset.timeframeRangeType) > -1
? dataset.timeframeRangeType
: DATE_RANGES.CURRENT_QUARTER;
presetType = getPresetTypeForTimeframeRangeType(timeframeRangeType, dataset.presetType);
timeframe = getTimeframeForRangeType({
const presetType = getPresetTypeForTimeframeRangeType(timeframeRangeType, dataset.presetType);
const timeframe = getTimeframeForRangeType({
timeframeRangeType,
presetType,
});
} else {
presetType =
Object.keys(PRESET_TYPES).indexOf(dataset.presetType) > -1
? dataset.presetType
: PRESET_TYPES.MONTHS;
timeframe = getTimeframeForPreset(
presetType,
window.innerWidth - el.offsetLeft - EPIC_DETAILS_CELL_WIDTH,
);
}
const rawFilterParams = queryToObject(window.location.search, {
gatherArrays: true,
......
......@@ -19,9 +19,6 @@ export const INIT_EPIC_CHILDREN_FLAGS = 'INIT_EPIC_CHILDREN_FLAGS';
export const EXPAND_EPIC = 'EXPAND_EPIC';
export const COLLAPSE_EPIC = 'COLLAPSE_EPIC';
export const PREPEND_TIMEFRAME = 'PREPEND_TIMEFRAME';
export const APPEND_TIMEFRAME = 'APPEND_TIMEFRAME';
export const SET_MILESTONES = 'SET_MILESTONES';
export const UPDATE_MILESTONE_IDS = 'UPDATE_MILESTONE_IDS';
......
......@@ -85,15 +85,6 @@ export default {
state.childrenFlags[parentItemId].itemExpanded = false;
},
[types.PREPEND_TIMEFRAME](state, extendedTimeframe) {
state.extendedTimeframe = extendedTimeframe;
state.timeframe.unshift(...extendedTimeframe);
},
[types.APPEND_TIMEFRAME](state, extendedTimeframe) {
state.extendedTimeframe = extendedTimeframe;
state.timeframe.push(...extendedTimeframe);
},
[types.SET_MILESTONES](state, milestones) {
state.milestones = milestones;
},
......
......@@ -15,7 +15,6 @@ export default () => ({
currentGroupId: -1,
fullPath: '',
timeframe: [],
extendedTimeframe: [],
presetType: '',
timeframeRangeType: '',
sortedBy: '',
......
......@@ -7,9 +7,6 @@ module Groups
before_action :check_epics_available!
before_action :persist_roadmap_layout, only: [:show]
before_action do
push_frontend_feature_flag(:roadmap_daterange_filter, @group, type: :development, default_enabled: :yaml)
end
feature_category :roadmaps
......
---
name: roadmap_daterange_filter
introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/55639
rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/323917
milestone: '14.3'
type: development
group: group::product planning
default_enabled: true
......@@ -29,7 +29,6 @@ RSpec.describe 'group epic roadmap', :js do
before do
stub_licensed_features(epics: true)
stub_feature_flags(unfiltered_epic_aggregates: false)
stub_feature_flags(roadmap_daterange_filter: false)
sign_in(user)
end
......@@ -47,11 +46,47 @@ RSpec.describe 'group epic roadmap', :js do
end
describe 'roadmap page' do
it 'renders roadmap preset buttons correctly' do
page.within('.gl-segmented-control') do
expect(page).to have_css('input[value="QUARTERS"]')
expect(page).to have_css('input[value="MONTHS"]')
expect(page).to have_css('input[value="WEEKS"]')
context 'roadmap daterange filtering' do
def select_date_range(range_type)
page.within('.epics-roadmap-filters') do
page.find('[data-testid="daterange-dropdown"] button.dropdown-toggle').click
click_button(range_type)
end
end
it 'renders daterange filtering dropdown with "This quarter" selected by default no layout presets available', :aggregate_failures do
page.within('.epics-roadmap-filters') do
expect(page).to have_selector('[data-testid="daterange-dropdown"]')
expect(page).not_to have_selector('.gl-segmented-control')
expect(page.find('[data-testid="daterange-dropdown"] button.dropdown-toggle')).to have_content('This quarter')
end
end
it 'selecting "This year" as daterange shows `Months` and `Weeks` layout presets', :aggregate_failures do
select_date_range('This year')
page.within('.epics-roadmap-filters') do
expect(page).to have_selector('.gl-segmented-control')
expect(page).to have_selector('input[value="MONTHS"]')
expect(page).to have_selector('input[value="WEEKS"]')
end
end
it 'selecting "Within 3 years" as daterange shows `Quarters`, `Months` and `Weeks` layout presets', :aggregate_failures do
select_date_range('Within 3 years')
page.within('.epics-roadmap-filters') do
expect(page).to have_selector('.gl-segmented-control')
expect(page).to have_selector('input[value="QUARTERS"]')
expect(page).to have_selector('input[value="MONTHS"]')
expect(page).to have_selector('input[value="WEEKS"]')
end
end
end
it 'renders the epics state dropdown' do
page.within('.content-wrapper .content .epics-filters') do
expect(page).to have_css('.dropdown-epics-state')
end
end
......@@ -192,38 +227,4 @@ RSpec.describe 'group epic roadmap', :js do
end
end
end
context 'when over 1000 epics match roadmap filters' do
before do
create_list(:epic, 2, group: group, start_date: 10.days.ago, end_date: 1.day.ago)
visit group_roadmap_path(group)
execute_script("gon.roadmap_epics_limit = 1;")
end
describe 'roadmap page' do
it 'renders warning callout banner' do
page.within('.content-wrapper .content') do
expect(page).to have_selector('[data-testid="epics_limit_callout"]', count: 1)
expect(find('[data-testid="epics_limit_callout"]')).to have_content 'Some of your epics might not be visible Roadmaps can display up to 1,000 epics. These appear in your selected sort order.'
end
page.within('[data-testid="epics_limit_callout"]') do
expect(find_link('Learn more')[:href]).to eq("https://docs.gitlab.com/ee/user/group/roadmap/")
end
end
it 'is removed after dismissal and even after reload' do
page.within('[data-testid="epics_limit_callout"]') do
find('.gl-dismiss-btn').click
end
expect(page).not_to have_selector('[data-testid="epics_limit_callout"]')
refresh
expect(page).not_to have_selector('[data-testid="epics_limit_callout"]')
end
end
end
end
import { shallowMount } from '@vue/test-utils';
import CurrentDayIndicator from 'ee/roadmap/components/current_day_indicator.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import {
getTimeframeForQuartersView,
getTimeframeForMonthsView,
getTimeframeForWeeksView,
} from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { mockTimeframeInitialDate } from 'ee_jest/roadmap/mock_data';
const mockTimeframeQuarters = getTimeframeForQuartersView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeWeeks = getTimeframeForWeeksView(mockTimeframeInitialDate);
const mockTimeframeQuarters = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.THREE_YEARS,
presetType: PRESET_TYPES.QUARTERS,
initialDate: mockTimeframeInitialDate,
});
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const mockTimeframeWeeks = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_QUARTER,
presetType: PRESET_TYPES.WEEKS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = () =>
shallowMount(CurrentDayIndicator, {
......
......@@ -3,9 +3,9 @@ import { mount } from '@vue/test-utils';
import EpicItem from 'ee/roadmap/components/epic_item.vue';
import EpicItemContainer from 'ee/roadmap/components/epic_item_container.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import createStore from 'ee/roadmap/store';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import {
mockTimeframeInitialDate,
......@@ -15,7 +15,11 @@ import {
let store;
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = ({
presetType = PRESET_TYPES.MONTHS,
......
......@@ -6,9 +6,9 @@ import CurrentDayIndicator from 'ee/roadmap/components/current_day_indicator.vue
import EpicItemComponent from 'ee/roadmap/components/epic_item.vue';
import EpicItemContainer from 'ee/roadmap/components/epic_item_container.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import createStore from 'ee/roadmap/store';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import {
mockTimeframeInitialDate,
......@@ -27,7 +27,11 @@ jest.mock('lodash/delay', () =>
let store;
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = ({
presetType = PRESET_TYPES.MONTHS,
......
import { GlPopover, GlProgressBar } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import EpicItemTimeline from 'ee/roadmap/components/epic_item_timeline.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { mockTimeframeInitialDate, mockFormattedEpic } from 'ee_jest/roadmap/mock_data';
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = ({
epic = mockFormattedEpic,
......
import { shallowMount } from '@vue/test-utils';
import EpicsListEmpty from 'ee/roadmap/components/epics_list_empty.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import {
getTimeframeForQuartersView,
getTimeframeForWeeksView,
getTimeframeForMonthsView,
} from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { mockTimeframeInitialDate, mockSvgPath } from 'ee_jest/roadmap/mock_data';
import { TEST_HOST } from 'helpers/test_constants';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
......@@ -13,9 +9,21 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
const TEST_EPICS_PATH = '/epics';
const TEST_NEW_EPIC_PATH = '/epics/new';
const mockTimeframeQuarters = getTimeframeForQuartersView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeWeeks = getTimeframeForWeeksView(mockTimeframeInitialDate);
const mockTimeframeQuarters = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.THREE_YEARS,
presetType: PRESET_TYPES.QUARTERS,
initialDate: mockTimeframeInitialDate,
});
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const mockTimeframeWeeks = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_QUARTER,
presetType: PRESET_TYPES.WEEKS,
initialDate: mockTimeframeInitialDate,
});
describe('ee/roadmap/components/epics_list_empty.vue', () => {
let wrapper;
......@@ -78,7 +86,7 @@ describe('ee/roadmap/components/epics_list_empty.vue', () => {
});
expect(findSubTitle().text()).toBe(
'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Jul 1, 2017 to Mar 31, 2019.',
'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Jul 1, 2016 to Jun 30, 2019.',
);
});
......@@ -91,7 +99,7 @@ describe('ee/roadmap/components/epics_list_empty.vue', () => {
});
expect(findSubTitle().text()).toBe(
'To widen your search, change or remove filters; from Jul 1, 2017 to Mar 31, 2019.',
'To widen your search, change or remove filters; from Jul 1, 2016 to Jun 30, 2019.',
);
});
});
......@@ -103,7 +111,7 @@ describe('ee/roadmap/components/epics_list_empty.vue', () => {
});
expect(findSubTitle().text()).toBe(
'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Nov 1, 2017 to Jun 30, 2018.',
'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Jan 1 to Dec 31, 2018.',
);
});
......@@ -114,7 +122,7 @@ describe('ee/roadmap/components/epics_list_empty.vue', () => {
});
expect(findSubTitle().text()).toBe(
'To widen your search, change or remove filters; from Nov 1, 2017 to Jun 30, 2018.',
'To widen your search, change or remove filters; from Jan 1 to Dec 31, 2018.',
);
});
});
......@@ -135,7 +143,7 @@ describe('ee/roadmap/components/epics_list_empty.vue', () => {
});
expect(findSubTitle().text()).toBe(
'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Dec 17, 2017 to Feb 9, 2018.',
'To view the roadmap, add a start or due date to one of your epics in this group or its subgroups; from Dec 31, 2017 to Apr 6, 2018.',
);
});
......@@ -148,7 +156,7 @@ describe('ee/roadmap/components/epics_list_empty.vue', () => {
});
expect(findSubTitle().text()).toBe(
'To widen your search, change or remove filters; from Dec 17, 2017 to Feb 15, 2018.',
'To widen your search, change or remove filters; from Dec 31, 2017 to Apr 12, 2018.',
);
});
});
......
......@@ -4,6 +4,7 @@ import { createLocalVue } from '@vue/test-utils';
import EpicItem from 'ee/roadmap/components/epic_item.vue';
import EpicsListSection from 'ee/roadmap/components/epics_list_section.vue';
import {
DATE_RANGES,
PRESET_TYPES,
EPIC_DETAILS_CELL_WIDTH,
TIMELINE_CELL_MIN_WIDTH,
......@@ -11,7 +12,7 @@ import {
import createStore from 'ee/roadmap/store';
import { REQUEST_EPICS_FOR_NEXT_PAGE } from 'ee/roadmap/store/mutation_types';
import { scrollToCurrentDay } from 'ee/roadmap/utils/epic_utils';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import {
mockFormattedChildEpic1,
mockFormattedChildEpic2,
......@@ -30,7 +31,11 @@ jest.mock('ee/roadmap/utils/epic_utils', () => ({
scrollToCurrentDay: jest.fn(),
}));
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const store = createStore();
store.dispatch('setInitialData', {
currentGroupId: mockGroupId,
......
......@@ -3,18 +3,22 @@ import Vue from 'vue';
import milestoneItemComponent from 'ee/roadmap/components/milestone_item.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { mockTimeframeInitialDate, mockMilestone2 } from 'ee_jest/roadmap/mock_data';
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.THREE_YEARS,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = ({
presetType = PRESET_TYPES.MONTHS,
milestone = mockMilestone2,
timeframe = mockTimeframeMonths,
timeframeItem = mockTimeframeMonths[0],
timeframeItem = mockTimeframeMonths[16], // timeframe item where milestone begins
}) => {
const Component = Vue.extend(milestoneItemComponent);
......
......@@ -2,12 +2,16 @@ import { shallowMount } from '@vue/test-utils';
import MilestoneItem from 'ee/roadmap/components/milestone_item.vue';
import MilestoneTimelineComponent from 'ee/roadmap/components/milestone_timeline.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { mockTimeframeInitialDate, mockMilestone2, mockGroupId } from 'ee_jest/roadmap/mock_data';
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
describe('MilestoneTimelineComponent', () => {
let wrapper;
......
......@@ -3,13 +3,14 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import MilestoneTimeline from 'ee/roadmap/components/milestone_timeline.vue';
import milestonesListSectionComponent from 'ee/roadmap/components/milestones_list_section.vue';
import {
DATE_RANGES,
PRESET_TYPES,
EPIC_DETAILS_CELL_WIDTH,
TIMELINE_CELL_MIN_WIDTH,
} from 'ee/roadmap/constants';
import createStore from 'ee/roadmap/store';
import { scrollToCurrentDay } from 'ee/roadmap/utils/epic_utils';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import {
mockTimeframeInitialDate,
mockGroupId,
......@@ -37,7 +38,11 @@ describe('MilestonesListSectionComponent', () => {
let wrapper;
let store;
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const findMilestoneCount = () => wrapper.find('[data-testid="count"]');
const findMilestoneCountTooltip = () => getBinding(findMilestoneCount().element, 'gl-tooltip');
const findExpandButtonContainer = () => wrapper.find('[data-testid="expandButton"]');
......
import Vue from 'vue';
import MonthsHeaderItemComponent from 'ee/roadmap/components/preset_months/months_header_item.vue';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import mountComponent from 'helpers/vue_mount_component_helper';
import { mockTimeframeInitialDate } from '../../mock_data';
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const mockTimeframeIndex = 0;
const createComponent = ({
......@@ -46,7 +51,7 @@ describe('MonthsHeaderItemComponent', () => {
it('returns string containing Year and Month for current timeline header item', () => {
vm = createComponent({});
expect(vm.timelineHeaderLabel).toBe('2017 Nov');
expect(vm.$el.innerText.trim()).toContain('2018 Jan');
});
it('returns string containing only Month for current timeline header item when previous header contained Year', () => {
......@@ -55,7 +60,7 @@ describe('MonthsHeaderItemComponent', () => {
timeframeItem: mockTimeframeMonths[mockTimeframeIndex + 1],
});
expect(vm.timelineHeaderLabel).toBe('Dec');
expect(vm.$el.innerText.trim()).toContain('Feb');
});
});
......@@ -107,7 +112,7 @@ describe('MonthsHeaderItemComponent', () => {
const itemLabelEl = vm.$el.querySelector('.item-label');
expect(itemLabelEl).not.toBeNull();
expect(itemLabelEl.innerText.trim()).toBe('2017 Nov');
expect(itemLabelEl.innerText.trim()).toBe('2018 Jan');
});
});
});
import Vue from 'vue';
import MonthsHeaderSubItemComponent from 'ee/roadmap/components/preset_months/months_header_sub_item.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { PRESET_TYPES, DATE_RANGES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import mountComponent from 'helpers/vue_mount_component_helper';
import { mockTimeframeInitialDate } from '../../mock_data';
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = ({
currentDate = mockTimeframeMonths[0],
......
import Vue from 'vue';
import QuartersHeaderItemComponent from 'ee/roadmap/components/preset_quarters/quarters_header_item.vue';
import { getTimeframeForQuartersView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import mountComponent from 'helpers/vue_mount_component_helper';
import { mockTimeframeInitialDate } from '../../mock_data';
const mockTimeframeIndex = 0;
const mockTimeframeQuarters = getTimeframeForQuartersView(mockTimeframeInitialDate);
const mockTimeframeQuarters = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.THREE_YEARS,
presetType: PRESET_TYPES.QUARTERS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = ({
timeframeIndex = mockTimeframeIndex,
......@@ -56,7 +61,7 @@ describe('QuartersHeaderItemComponent', () => {
it('returns string containing Year and Quarter for current timeline header item', () => {
vm = createComponent({});
expect(vm.timelineHeaderLabel).toBe('2017 Q3');
expect(vm.$el.innerText.trim()).toContain('2016 Q3');
});
it('returns string containing only Quarter for current timeline header item when previous header contained Year', () => {
......@@ -65,7 +70,7 @@ describe('QuartersHeaderItemComponent', () => {
timeframeItem: mockTimeframeQuarters[mockTimeframeIndex + 2],
});
expect(vm.timelineHeaderLabel).toBe('2018 Q1');
expect(vm.$el.innerText.trim()).toContain('2017 Q1');
});
});
......@@ -118,7 +123,7 @@ describe('QuartersHeaderItemComponent', () => {
const itemLabelEl = vm.$el.querySelector('.item-label');
expect(itemLabelEl).not.toBeNull();
expect(itemLabelEl.innerText.trim()).toBe('2017 Q3');
expect(itemLabelEl.innerText.trim()).toBe('2016 Q3');
});
});
});
import Vue from 'vue';
import QuartersHeaderSubItemComponent from 'ee/roadmap/components/preset_quarters/quarters_header_sub_item.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForQuartersView } from 'ee/roadmap/utils/roadmap_utils';
import { PRESET_TYPES, DATE_RANGES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import mountComponent from 'helpers/vue_mount_component_helper';
import { mockTimeframeInitialDate } from '../../mock_data';
const mockTimeframeQuarters = getTimeframeForQuartersView(mockTimeframeInitialDate);
const mockTimeframeQuarters = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.THREE_YEARS,
presetType: PRESET_TYPES.QUARTERS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = ({
currentDate = mockTimeframeQuarters[0].range[1],
......
import Vue from 'vue';
import WeeksHeaderItemComponent from 'ee/roadmap/components/preset_weeks/weeks_header_item.vue';
import { getTimeframeForWeeksView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import mountComponent from 'helpers/vue_mount_component_helper';
import { mockTimeframeInitialDate } from '../../mock_data';
const mockTimeframeIndex = 0;
const mockTimeframeWeeks = getTimeframeForWeeksView(mockTimeframeInitialDate);
const mockTimeframeWeeks = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_QUARTER,
presetType: PRESET_TYPES.WEEKS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = ({
timeframeIndex = mockTimeframeIndex,
......@@ -42,9 +47,8 @@ describe('WeeksHeaderItemComponent', () => {
describe('computed', () => {
describe('lastDayOfCurrentWeek', () => {
it('returns date object representing last day of the week as set in `timeframeItem`', () => {
expect(vm.lastDayOfCurrentWeek.getDate()).toBe(
mockTimeframeWeeks[mockTimeframeIndex].getDate() + 7,
);
vm = createComponent({});
expect(vm.lastDayOfCurrentWeek.getDate()).toBe(7);
});
});
......@@ -52,7 +56,7 @@ describe('WeeksHeaderItemComponent', () => {
it('returns string containing Year, Month and Date for first timeframe item of the entire timeframe', () => {
vm = createComponent({});
expect(vm.timelineHeaderLabel).toBe('2017 Dec 17');
expect(vm.$el.innerText.trim()).toContain('2017 Dec 31');
});
it('returns string containing Year, Month and Date for timeframe item when it is first week of the year', () => {
......@@ -66,11 +70,11 @@ describe('WeeksHeaderItemComponent', () => {
it('returns string containing only Month and Date timeframe item when it is somewhere in the middle of timeframe', () => {
vm = createComponent({
timeframeIndex: mockTimeframeIndex + 1,
timeframeItem: mockTimeframeWeeks[mockTimeframeIndex + 1],
timeframeIndex: mockTimeframeIndex + 2,
timeframeItem: mockTimeframeWeeks[mockTimeframeIndex + 2],
});
expect(vm.timelineHeaderLabel).toBe('Dec 24');
expect(vm.timelineHeaderLabel).toBe('Jan 14');
});
});
......@@ -116,7 +120,7 @@ describe('WeeksHeaderItemComponent', () => {
const itemLabelEl = vm.$el.querySelector('.item-label');
expect(itemLabelEl).not.toBeNull();
expect(itemLabelEl.innerText.trim()).toBe('2017 Dec 17');
expect(itemLabelEl.innerText.trim()).toBe('2017 Dec 31');
});
});
});
import Vue from 'vue';
import WeeksHeaderSubItemComponent from 'ee/roadmap/components/preset_weeks/weeks_header_sub_item.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForWeeksView } from 'ee/roadmap/utils/roadmap_utils';
import { PRESET_TYPES, DATE_RANGES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import mountComponent from 'helpers/vue_mount_component_helper';
import { mockTimeframeInitialDate } from '../../mock_data';
const mockTimeframeWeeks = getTimeframeForWeeksView(mockTimeframeInitialDate);
const mockTimeframeWeeks = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_QUARTER,
presetType: PRESET_TYPES.WEEKS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = ({
currentDate = mockTimeframeWeeks[0],
......
import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
import { GlLoadingIcon } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Cookies from 'js-cookie';
import Vuex from 'vuex';
import EpicsListEmpty from 'ee/roadmap/components/epics_list_empty.vue';
import RoadmapApp from 'ee/roadmap/components/roadmap_app.vue';
import RoadmapFilters from 'ee/roadmap/components/roadmap_filters.vue';
import RoadmapShell from 'ee/roadmap/components/roadmap_shell.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { PRESET_TYPES, DATE_RANGES } from 'ee/roadmap/constants';
import createStore from 'ee/roadmap/store';
import * as types from 'ee/roadmap/store/mutation_types';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import {
basePath,
mockFormattedEpic,
mockFormattedChildEpic2,
mockGroupId,
mockSortedBy,
mockSvgPath,
......@@ -32,7 +30,11 @@ describe('RoadmapApp', () => {
const epics = [mockFormattedEpic];
const hasFiltersApplied = true;
const presetType = PRESET_TYPES.MONTHS;
const timeframe = getTimeframeForMonthsView(mockTimeframeInitialDate);
const timeframe = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = (mountFunction = shallowMount) => {
return mountFunction(RoadmapApp, {
......@@ -151,31 +153,4 @@ describe('RoadmapApp', () => {
});
});
});
describe('roadmap epics limit warning', () => {
beforeEach(() => {
wrapper = createComponent();
store.commit(types.RECEIVE_EPICS_SUCCESS, {
epics: [mockFormattedEpic, mockFormattedChildEpic2],
});
window.gon.roadmap_epics_limit = 1;
});
it('displays warning when epics limit is reached', () => {
expect(wrapper.find(GlAlert).exists()).toBe(true);
expect(wrapper.find(GlAlert).text()).toContain(
'Roadmaps can display up to 1,000 epics. These appear in your selected sort order.',
);
});
it('sets epics_limit_warning_dismissed cookie to true when dismissing alert', () => {
wrapper.find(GlAlert).vm.$emit('dismiss');
expect(Cookies.get('epics_limit_warning_dismissed')).toBe('true');
return wrapper.vm.$nextTick(() => {
expect(wrapper.find(GlAlert).exists()).toBe(false);
});
});
});
});
......@@ -5,7 +5,7 @@ import Vuex from 'vuex';
import RoadmapFilters from 'ee/roadmap/components/roadmap_filters.vue';
import { PRESET_TYPES, EPICS_STATES, DATE_RANGES } from 'ee/roadmap/constants';
import createStore from 'ee/roadmap/store';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import {
mockSortedBy,
mockTimeframeInitialDate,
......@@ -36,10 +36,13 @@ const createComponent = ({
groupFullPath = 'gitlab-org',
listEpicsPath = '/groups/gitlab-org/-/epics',
groupMilestonesPath = '/groups/gitlab-org/-/milestones.json',
timeframe = getTimeframeForMonthsView(mockTimeframeInitialDate),
timeframe = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.THREE_YEARS,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
}),
filterParams = {},
roadmapDaterangeFilter = false,
timeframeRangeType = DATE_RANGES.CURRENT_QUARTER,
timeframeRangeType = DATE_RANGES.THREE_YEARS,
} = {}) => {
const localVue = createLocalVue();
const store = createStore();
......@@ -61,9 +64,6 @@ const createComponent = ({
groupFullPath,
groupMilestonesPath,
listEpicsPath,
glFeatures: {
roadmapDaterangeFilter,
},
},
props: {
timeframeRangeType,
......@@ -130,16 +130,12 @@ describe('RoadmapFilters', () => {
updateHistory({ url: TEST_HOST, title: document.title, replace: true });
});
it('renders roadmap layout switching buttons', () => {
const layoutSwitches = wrapper.find(GlSegmentedControl);
it('switching layout using roadmap layout switching buttons causes page to reload with selected layout', async () => {
wrapper.setData({ selectedDaterange: DATE_RANGES.THREE_YEARS });
expect(layoutSwitches.exists()).toBe(true);
expect(layoutSwitches.props('checked')).toBe(PRESET_TYPES.MONTHS);
expect(layoutSwitches.props('options')).toEqual([quarters, months, weeks]);
});
await wrapper.vm.$nextTick();
it('switching layout using roadmap layout switching buttons causes page to reload with selected layout', () => {
wrapper.find(GlSegmentedControl).vm.$emit('input', PRESET_TYPES.OPENED);
wrapper.findComponent(GlSegmentedControl).vm.$emit('input', PRESET_TYPES.OPENED);
expect(mergeUrlParams).toHaveBeenCalledWith(
expect.objectContaining({ layout: PRESET_TYPES.OPENED }),
......@@ -312,7 +308,7 @@ describe('RoadmapFilters', () => {
});
});
describe('when roadmapDaterangeFilter feature flag is enabled', () => {
describe('daterange filtering', () => {
let wrapperWithDaterangeFilter;
const availableRanges = [
{ text: 'This quarter', value: DATE_RANGES.CURRENT_QUARTER },
......@@ -322,7 +318,6 @@ describe('RoadmapFilters', () => {
beforeEach(async () => {
wrapperWithDaterangeFilter = createComponent({
roadmapDaterangeFilter: true,
timeframeRangeType: DATE_RANGES.CURRENT_QUARTER,
});
......
......@@ -7,10 +7,10 @@ import MonthsHeaderItem from 'ee/roadmap/components/preset_months/months_header_
import MonthsHeaderSubItem from 'ee/roadmap/components/preset_months/months_header_sub_item.vue';
import RoadmapShell from 'ee/roadmap/components/roadmap_shell.vue';
import RoadmapTimelineSection from 'ee/roadmap/components/roadmap_timeline_section.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import eventHub from 'ee/roadmap/event_hub';
import createStore from 'ee/roadmap/store';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import {
mockEpic,
......@@ -19,7 +19,11 @@ import {
mockMilestone,
} from 'ee_jest/roadmap/mock_data';
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
describe('RoadmapShell', () => {
const localVue = createLocalVue();
......
import Vue from 'vue';
import roadmapTimelineSectionComponent from 'ee/roadmap/components/roadmap_timeline_section.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import eventHub from 'ee/roadmap/event_hub';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { mockEpic, mockTimeframeInitialDate } from 'ee_jest/roadmap/mock_data';
import mountComponent from 'helpers/vue_mount_component_helper';
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
const createComponent = ({
presetType = PRESET_TYPES.MONTHS,
......@@ -46,7 +50,7 @@ describe('RoadmapTimelineSectionComponent', () => {
it('returns object containing `width` with value based on epic details cell width, timeline cell width and timeframe length', () => {
expect(vm.sectionContainerStyles).toEqual(
expect.objectContaining({
width: '1760px',
width: '2480px', // We now have fixed columns in timeframe.
}),
);
});
......
import { shallowMount } from '@vue/test-utils';
import EpicItemTimelineComponent from 'ee/roadmap/components/epic_item_timeline.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { mockTimeframeInitialDate, mockEpic } from 'ee_jest/roadmap/mock_data';
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
describe('MonthsPresetMixin', () => {
let wrapper;
......@@ -130,28 +134,24 @@ describe('MonthsPresetMixin', () => {
describe('getTimelineBarWidthForMonths', () => {
it('returns calculated width value based on Epic.startDate and Epic.endDate', () => {
wrapper = createComponent({
timeframeItem: mockTimeframeMonths[1],
timeframeItem: mockTimeframeMonths[0],
epic: {
...mockEpic,
startDate: new Date(2017, 11, 15), // Dec 15, 2017
endDate: new Date(2018, 1, 15), // Feb 15, 2018
startDate: new Date(2018, 0, 1), // Jan 01, 2018
endDate: new Date(2018, 2, 15), // Mar 15, 2018
},
});
/*
The epic timeline bar width calculation:
- The width of the bar should account for 31 - 15 = 16 days from December.
- The width of the bar should fully account for all of January (31 days).
- The width of the bar should account for only 15 days
Dec: 16 days / 31 days * 180px ~= 92.9px
+ Jan: 31 days = 180px
+ Feb: 15 days / 28 days * 180px ~= 96.43px
Jan: 31 days = 180px
+ Feb: 28 days = 180px
+ Mar: (180px / 31 days) * 15 days ~= 87.15px
---------------------------------------------------
Total ~= 369px
Total ~= 447px
*/
const expectedTimelineBarWidth = 369; // in px.
const expectedTimelineBarWidth = 447; // in px.
expect(Math.floor(wrapper.vm.getTimelineBarWidthForMonths())).toBe(
expectedTimelineBarWidth,
);
......
import { shallowMount } from '@vue/test-utils';
import EpicItemTimelineComponent from 'ee/roadmap/components/epic_item_timeline.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForQuartersView } from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { mockTimeframeInitialDate, mockEpic } from 'ee_jest/roadmap/mock_data';
const mockTimeframeQuarters = getTimeframeForQuartersView(mockTimeframeInitialDate);
const mockTimeframeQuarters = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.THREE_YEARS,
presetType: PRESET_TYPES.QUARTERS,
initialDate: mockTimeframeInitialDate,
});
describe('QuartersPresetMixin', () => {
let wrapper;
......
import { shallowMount } from '@vue/test-utils';
import EpicItemTimelineComponent from 'ee/roadmap/components/epic_item_timeline.vue';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForWeeksView } from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { mockTimeframeInitialDate, mockEpic } from 'ee_jest/roadmap/mock_data';
const mockTimeframeWeeks = getTimeframeForWeeksView(mockTimeframeInitialDate);
const mockTimeframeWeeks = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_QUARTER,
presetType: PRESET_TYPES.WEEKS,
initialDate: mockTimeframeInitialDate,
});
describe('WeeksPresetMixin', () => {
let wrapper;
......@@ -59,9 +63,9 @@ describe('WeeksPresetMixin', () => {
wrapper = createComponent();
const lastDayOfWeek = wrapper.vm.getLastDayOfWeek(mockTimeframeWeeks[0]);
expect(lastDayOfWeek.getDate()).toBe(23);
expect(lastDayOfWeek.getMonth()).toBe(11);
expect(lastDayOfWeek.getFullYear()).toBe(2017);
expect(lastDayOfWeek.getDate()).toBe(6);
expect(lastDayOfWeek.getMonth()).toBe(0);
expect(lastDayOfWeek.getFullYear()).toBe(2018);
});
});
......@@ -197,7 +201,7 @@ describe('WeeksPresetMixin', () => {
approximately 154px ^
~ approximately 154px
*/
const expectedTimelineBarWidth = 848; // in px;
const expectedTimelineBarWidth = 488; // in px;
expect(Math.floor(wrapper.vm.getTimelineBarWidthForWeeks())).toBe(expectedTimelineBarWidth);
});
......
import { GlFilteredSearchToken } from '@gitlab/ui';
import {
getTimeframeForWeeksView,
getTimeframeForMonthsView,
getTimeframeForQuartersView,
} from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import { dateFromString } from 'helpers/datetime_helpers';
import {
......@@ -137,7 +134,11 @@ export const mockWeekly = {
Oct 18 2020, Oct 25 2020, Nov 1 2020,
Nov 8 2020 ]
*/
timeframe: getTimeframeForWeeksView(OCT_11_2020),
timeframe: getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_QUARTER,
presetType: PRESET_TYPES.WEEKS,
initialDate: OCT_11_2020,
}),
};
const DEC_1_2020 = dateFromString('Dec 1 2020');
......@@ -150,7 +151,11 @@ export const mockMonthly = {
Jan 1 2021, Feb 1 2021, Mar 1 2021,
Apr 1 2021, May 31 2021 ]
*/
timeframe: getTimeframeForMonthsView(DEC_1_2020),
timeframe: getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: DEC_1_2020,
}),
};
const DEC_25_2020 = dateFromString('Dec 25 2020');
......@@ -170,7 +175,11 @@ export const mockQuarterly = {
{ 2021 Q1 }, { 2021 Q2 }, { 2021 Q3 },
{ 2021 Q4 } ]
*/
timeframe: getTimeframeForQuartersView(DEC_25_2020),
timeframe: getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.THREE_YEARS,
presetType: PRESET_TYPES.QUARTERS,
initialDate: DEC_25_2020,
}),
};
export const mockEpic = {
......@@ -269,7 +278,7 @@ export const mockFormattedChildEpic2 = {
export const mockFormattedEpic = {
...mockRawEpic,
startDate: new Date(2017, 10, 1),
startDate: new Date(2018, 0, 1),
originalStartDate: new Date(2017, 5, 26),
endDate: new Date(2018, 2, 10),
originalEndDate: new Date(2018, 2, 10),
......@@ -283,9 +292,9 @@ export const mockFormattedEpic2 = {
...mockRawEpic2,
isChildEpic: false,
newEpic: undefined,
startDateOutOfRange: false,
startDateOutOfRange: true,
endDateOutOfRange: false,
startDate: new Date(2017, 11, 31),
startDate: new Date(2018, 0, 1),
originalStartDate: new Date(2017, 11, 31),
endDate: new Date(2018, 1, 15),
originalEndDate: new Date(2018, 1, 15),
......
import MockAdapter from 'axios-mock-adapter';
import { PRESET_TYPES } from 'ee/roadmap/constants';
import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
import groupMilestones from 'ee/roadmap/queries/groupMilestones.query.graphql';
import * as actions from 'ee/roadmap/store/actions';
import * as types from 'ee/roadmap/store/mutation_types';
import defaultState from 'ee/roadmap/store/state';
import * as epicUtils from 'ee/roadmap/utils/epic_utils';
import * as roadmapItemUtils from 'ee/roadmap/utils/roadmap_item_utils';
import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
import testAction from 'helpers/vuex_action_helper';
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
......@@ -33,7 +33,11 @@ import {
jest.mock('~/flash');
const mockTimeframeMonths = getTimeframeForMonthsView(mockTimeframeInitialDate);
const mockTimeframeMonths = getTimeframeForRangeType({
timeframeRangeType: DATE_RANGES.CURRENT_YEAR,
presetType: PRESET_TYPES.MONTHS,
initialDate: mockTimeframeInitialDate,
});
describe('Roadmap Vuex Actions', () => {
const timeframeStartDate = mockTimeframeMonths[0];
......@@ -458,8 +462,8 @@ describe('Roadmap Vuex Actions', () => {
fullPath: 'gitlab-org',
state: mockState.milestonessState,
timeframe: {
start: '2017-11-01',
end: '2018-06-30',
start: '2018-01-01',
end: '2018-12-31',
},
includeDescendants: true,
};
......@@ -551,9 +555,9 @@ describe('Roadmap Vuex Actions', () => {
payload: [
{
...mockFormattedMilestone,
startDateOutOfRange: false,
startDateOutOfRange: true,
endDateOutOfRange: false,
startDate: new Date(2017, 11, 31),
startDate: new Date(2018, 0, 1),
originalStartDate: new Date(2017, 11, 31),
endDate: new Date(2018, 1, 15),
originalEndDate: new Date(2018, 1, 15),
......
......@@ -212,30 +212,6 @@ describe('Roadmap Store Mutations', () => {
});
});
describe('PREPEND_TIMEFRAME', () => {
it('Should set extendedTimeframe to provided extendedTimeframe param and prepend it to timeframe array in state', () => {
state.timeframe.push('foo');
const extendedTimeframe = ['bar'];
mutations[types.PREPEND_TIMEFRAME](state, extendedTimeframe);
expect(state.extendedTimeframe).toBe(extendedTimeframe);
expect(state.timeframe[0]).toBe(extendedTimeframe[0]);
});
});
describe('APPEND_TIMEFRAME', () => {
it('Should set extendedTimeframe to provided extendedTimeframe param and append it to timeframe array in state', () => {
state.timeframe.push('foo');
const extendedTimeframe = ['bar'];
mutations[types.APPEND_TIMEFRAME](state, extendedTimeframe);
expect(state.extendedTimeframe).toBe(extendedTimeframe);
expect(state.timeframe[1]).toBe(extendedTimeframe[0]);
});
});
describe('SET_MILESTONES', () => {
it('Should provided milestones array in state', () => {
const milestones = [{ id: 1 }, { id: 2 }];
......
......@@ -161,11 +161,11 @@ describe('timeframeEndDate', () => {
/*
Note: there are inconsistencies in how timeframes are generated.
A monthly timeframe generated with roadmap_util's getTimeframeForMonthsView function -
A monthly timeframe generated with roadmap_util's getTimeframeForRangeType function -
will always set its last item to the ending date for that month.
E.g., [ Oct 1, Nov 1, Dec 31 ]
The same is true of quarterly timeframes generated with getTimeframeForQuarterlyView
The same is true of quarterly timeframes generated with getTimeframeForRangeType
E.g., [ ..., { range: [ Oct 1, Nov 1, Dec 31 ] }]
In comparison, a weekly timeframe won't have its last item set to the ending date for the week.
......@@ -176,9 +176,9 @@ describe('timeframeEndDate', () => {
*/
it.each`
presetType | endDate | timeframe
${PRESET_TYPES.QUARTERS} | ${dateFromString('Dec 31 2021')} | ${mockQuarterly.timeframe}
${PRESET_TYPES.MONTHS} | ${dateFromString('May 31 2021')} | ${mockMonthly.timeframe}
${PRESET_TYPES.WEEKS} | ${dateFromString('Nov 15 2020')} | ${mockWeekly.timeframe}
${PRESET_TYPES.QUARTERS} | ${dateFromString('May 31 2022')} | ${mockQuarterly.timeframe}
${PRESET_TYPES.MONTHS} | ${dateFromString('Dec 31 2020')} | ${mockMonthly.timeframe}
${PRESET_TYPES.WEEKS} | ${dateFromString('Jan 03 2021')} | ${mockWeekly.timeframe}
`(
`should return ending date for the timeframe range array when preset type is $presetType`,
({ presetType, endDate, timeframe }) => {
......
......@@ -16215,12 +16215,6 @@ msgstr ""
msgid "GroupRoadmap|No start date – %{dateWord}"
msgstr ""
msgid "GroupRoadmap|Roadmaps can display up to 1,000 epics. These appear in your selected sort order."
msgstr ""
msgid "GroupRoadmap|Some of your epics might not be visible"
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