Commit 8f5e1ce0 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera

Merge branch '326701-move-vsa-filters-into-shared-component' into 'master'

Moves the VSA filters into a reusable component

See merge request gitlab-org/gitlab!65329
parents 6b587b1a 857d228b
......@@ -4,29 +4,23 @@ import { mapActions, mapState, mapGetters } from 'vuex';
import PathNavigation from '~/cycle_analytics/components/path_navigation.vue';
import { OVERVIEW_STAGE_ID } from '~/cycle_analytics/constants';
import UrlSync from '~/vue_shared/components/url_sync.vue';
import DateRange from '../../shared/components/daterange.vue';
import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
import { DATE_RANGE_LIMIT } from '../../shared/constants';
import { toYmd } from '../../shared/utils';
import { PROJECTS_PER_PAGE } from '../constants';
import DurationChart from './duration_chart.vue';
import FilterBar from './filter_bar.vue';
import Metrics from './metrics.vue';
import StageTable from './stage_table.vue';
import TypeOfWorkCharts from './type_of_work_charts.vue';
import ValueStreamFilters from './value_stream_filters.vue';
import ValueStreamSelect from './value_stream_select.vue';
export default {
name: 'CycleAnalytics',
components: {
DateRange,
DurationChart,
GlEmptyState,
ProjectsDropdownFilter,
TypeOfWorkCharts,
StageTable,
PathNavigation,
FilterBar,
ValueStreamFilters,
ValueStreamSelect,
UrlSync,
Metrics,
......@@ -56,8 +50,8 @@ export default {
'stages',
'selectedStageEvents',
'errorCode',
'startDate',
'endDate',
'createdAfter',
'createdBefore',
'isLoadingValueStreams',
'selectedStageError',
'selectedValueStream',
......@@ -90,7 +84,7 @@ export default {
return Boolean(!this.shouldRenderEmptyState && !this.isLoadingValueStreams);
},
hasDateRangeSet() {
return this.startDate && this.endDate;
return this.createdAfter && this.createdBefore;
},
query() {
const selectedProjectIds = this.selectedProjectIds?.length ? this.selectedProjectIds : null;
......@@ -109,8 +103,8 @@ export default {
return {
value_stream_id: this.selectedValueStream?.id || null,
project_ids: selectedProjectIds,
created_after: toYmd(this.startDate),
created_before: toYmd(this.endDate),
created_after: toYmd(this.createdAfter),
created_before: toYmd(this.createdBefore),
stage_id: (!this.isOverviewStageSelected && this.selectedStage?.id) || null, // the `overview` stage is always the default, so dont persist the id if its selected
...paginationUrlParams,
};
......@@ -118,12 +112,6 @@ export default {
stageCount() {
return this.activeStages.length;
},
projectsQueryParams() {
return {
first: PROJECTS_PER_PAGE,
includeSubgroups: true,
};
},
},
methods: {
...mapActions([
......@@ -147,12 +135,16 @@ export default {
this.updateStageTablePagination({ ...this.pagination, page: 1 });
}
},
onSetDateRange({ startDate, endDate }) {
this.setDateRange({
createdAfter: new Date(startDate),
createdBefore: new Date(endDate),
});
},
onHandleUpdatePagination(data) {
this.updateStageTablePagination(data);
},
},
multiProjectSelect: true,
maxDateRange: DATE_RANGE_LIMIT,
};
</script>
<template>
......@@ -183,36 +175,15 @@ export default {
:selected-stage="selectedStage"
@selected="onStageSelect"
/>
<div class="gl-mt-3 gl-py-2 gl-px-3 bg-gray-light border-top border-bottom">
<filter-bar
v-if="shouldDisplayFilters"
class="js-filter-bar filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none"
:group-path="currentGroupPath"
/>
<div
v-if="shouldDisplayFilters"
class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between"
>
<projects-dropdown-filter
:key="currentGroup.id"
class="js-projects-dropdown-filter project-select gl-mb-2 gl-lg-mb-0"
:group-id="currentGroup.id"
:group-namespace="currentGroupPath"
:query-params="projectsQueryParams"
:multi-select="$options.multiProjectSelect"
:default-projects="selectedProjects"
@selected="onProjectsSelect"
/>
<date-range
:start-date="startDate"
:end-date="endDate"
:max-date-range="$options.maxDateRange"
:include-selected-date="true"
class="js-daterange-picker"
@change="setDateRange"
/>
</div>
</div>
<value-stream-filters
:group-id="currentGroup.id"
:group-path="currentGroupPath"
:selected-projects="selectedProjects"
:start-date="createdAfter"
:end-date="createdBefore"
@selectProject="onProjectsSelect"
@setDateRange="onSetDateRange"
/>
</div>
<div v-if="!shouldRenderEmptyState" class="cycle-analytics gl-mt-2">
<gl-empty-state
......
<script>
import DateRange from '../../shared/components/daterange.vue';
import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
import { DATE_RANGE_LIMIT } from '../../shared/constants';
import { PROJECTS_PER_PAGE } from '../constants';
import FilterBar from './filter_bar.vue';
export default {
name: 'ValueStreamFilters',
components: {
DateRange,
ProjectsDropdownFilter,
FilterBar,
},
props: {
selectedProjects: {
type: Array,
required: false,
default: () => [],
},
hasProjectFilter: {
type: Boolean,
required: false,
default: true,
},
hasDateRangeFilter: {
type: Boolean,
required: false,
default: true,
},
groupId: {
type: Number,
required: true,
},
groupPath: {
type: String,
required: true,
},
startDate: {
type: Date,
required: false,
default: null,
},
endDate: {
type: Date,
required: false,
default: null,
},
},
computed: {
projectsQueryParams() {
return {
first: PROJECTS_PER_PAGE,
includeSubgroups: true,
};
},
},
multiProjectSelect: true,
maxDateRange: DATE_RANGE_LIMIT,
};
</script>
<template>
<div class="gl-mt-3 gl-py-2 gl-px-3 bg-gray-light border-top border-bottom">
<filter-bar
class="js-filter-bar filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none"
:group-path="groupPath"
/>
<div
v-if="hasDateRangeFilter || hasProjectFilter"
class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between"
>
<projects-dropdown-filter
v-if="hasProjectFilter"
:key="groupId"
class="js-projects-dropdown-filter project-select gl-mb-2 gl-lg-mb-0"
:group-id="groupId"
:group-namespace="groupPath"
:query-params="projectsQueryParams"
:multi-select="$options.multiProjectSelect"
:default-projects="selectedProjects"
@selected="$emit('selectProject', $event)"
/>
<date-range
v-if="hasDateRangeFilter"
:start-date="startDate"
:end-date="endDate"
:max-date-range="$options.maxDateRange"
:include-selected-date="true"
class="js-daterange-picker"
@change="$emit('setDateRange', $event)"
/>
</div>
</div>
</template>
......@@ -34,9 +34,9 @@ export const setSelectedStage = ({ commit }, stage) => commit(types.SET_SELECTED
export const setDateRange = (
{ commit, dispatch, getters: { isOverviewStageSelected }, state: { selectedStage } },
{ startDate, endDate },
{ createdAfter, createdBefore },
) => {
commit(types.SET_DATE_RANGE, { startDate, endDate });
commit(types.SET_DATE_RANGE, { createdBefore, createdAfter });
if (selectedStage && !isOverviewStageSelected) dispatch('fetchStageData', selectedStage.id);
return dispatch('fetchCycleAnalyticsData');
};
......
......@@ -21,8 +21,8 @@ export const selectedProjectIds = ({ selectedProjects }) =>
export const cycleAnalyticsRequestParams = (state, getters) => {
const {
startDate = null,
endDate = null,
createdAfter = null,
createdBefore = null,
filters: {
authors: { selected: selectedAuthor },
milestones: { selected: selectedMilestone },
......@@ -40,8 +40,8 @@ export const cycleAnalyticsRequestParams = (state, getters) => {
return {
project_ids: getters.selectedProjectIds,
created_after: startDate ? dateFormat(startDate, dateFormats.isoDate) : null,
created_before: endDate ? dateFormat(endDate, dateFormats.isoDate) : null,
created_after: createdAfter ? dateFormat(createdAfter, dateFormats.isoDate) : null,
created_before: createdBefore ? dateFormat(createdBefore, dateFormats.isoDate) : null,
...filterBarQuery,
};
};
......
import { getDurationChartData } from '../../../utils';
export const durationChartPlottableData = (state, _, rootState) => {
const { startDate, endDate } = rootState;
const { createdAfter, createdBefore } = rootState;
const { durationData } = state;
const selectedStagesDurationData = durationData.filter((stage) => stage.selected);
const plottableData = getDurationChartData(selectedStagesDurationData, startDate, endDate);
const plottableData = getDurationChartData(
selectedStagesDurationData,
createdAfter,
createdBefore,
);
return plottableData.length ? plottableData : [];
};
......@@ -2,24 +2,29 @@ import { getTasksByTypeData } from '../../../utils';
export const selectedTasksByTypeFilters = (state = {}, _, rootState = {}) => {
const { selectedLabelIds = [], subject } = state;
const { currentGroup, selectedProjectIds = [], startDate = null, endDate = null } = rootState;
const {
currentGroup,
selectedProjectIds = [],
createdAfter = null,
createdBefore = null,
} = rootState;
return {
currentGroup,
selectedProjectIds,
startDate,
endDate,
createdAfter,
createdBefore,
selectedLabelIds,
subject,
};
};
export const tasksByTypeChartData = ({ data = [] } = {}, _, rootState = {}) => {
const { startDate = null, endDate = null } = rootState;
const { createdAfter = null, createdBefore = null } = rootState;
return data.length
? getTasksByTypeData({
data,
startDate,
endDate,
startDate: createdAfter,
endDate: createdBefore,
})
: { groupBy: [], data: [] };
};
......@@ -14,9 +14,9 @@ export default {
[types.SET_SELECTED_STAGE](state, rawData) {
state.selectedStage = convertObjectPropsToCamelCase(rawData);
},
[types.SET_DATE_RANGE](state, { startDate, endDate }) {
state.startDate = startDate;
state.endDate = endDate;
[types.SET_DATE_RANGE](state, { createdBefore, createdAfter }) {
state.createdBefore = createdBefore;
state.createdAfter = createdAfter;
},
[types.SET_STAGE_EVENTS](state, data = []) {
state.formEvents = data.map((ev) => convertObjectPropsToCamelCase(ev, { deep: true }));
......@@ -88,8 +88,8 @@ export default {
state,
{
group = null,
createdAfter: startDate = null,
createdBefore: endDate = null,
createdAfter = null,
createdBefore = null,
selectedProjects = [],
selectedValueStream = {},
defaultStageConfig = [],
......@@ -100,8 +100,8 @@ export default {
state.currentGroup = group;
state.selectedProjects = selectedProjects;
state.selectedValueStream = selectedValueStream;
state.startDate = startDate;
state.endDate = endDate;
state.createdBefore = createdBefore;
state.createdAfter = createdAfter;
state.defaultStageConfig = defaultStageConfig;
Vue.set(state, 'pagination', {
......
......@@ -4,8 +4,8 @@ export default () => ({
featureFlags: {},
defaultStageConfig: [],
startDate: null,
endDate: null,
createdAfter: null,
createdBefore: null,
isLoading: false,
isLoadingStage: false,
......
......@@ -5,14 +5,12 @@ import MockAdapter from 'axios-mock-adapter';
import Vuex from 'vuex';
import Component from 'ee/analytics/cycle_analytics/components/base.vue';
import DurationChart from 'ee/analytics/cycle_analytics/components/duration_chart.vue';
import FilterBar from 'ee/analytics/cycle_analytics/components/filter_bar.vue';
import Metrics from 'ee/analytics/cycle_analytics/components/metrics.vue';
import StageTable from 'ee/analytics/cycle_analytics/components/stage_table.vue';
import TypeOfWorkCharts from 'ee/analytics/cycle_analytics/components/type_of_work_charts.vue';
import ValueStreamFilters from 'ee/analytics/cycle_analytics/components/value_stream_filters.vue';
import ValueStreamSelect from 'ee/analytics/cycle_analytics/components/value_stream_select.vue';
import createStore from 'ee/analytics/cycle_analytics/store';
import Daterange from 'ee/analytics/shared/components/daterange.vue';
import ProjectsDropdownFilter from 'ee/analytics/shared/components/projects_dropdown_filter.vue';
import { toYmd } from 'ee/analytics/shared/utils';
import waitForPromises from 'helpers/wait_for_promises';
import PathNavigation from '~/cycle_analytics/components/path_navigation.vue';
......@@ -55,8 +53,8 @@ const [selectedValueStream] = mockData.valueStreams;
const initialCycleAnalyticsState = {
selectedValueStream,
createdAfter: mockData.startDate,
createdBefore: mockData.endDate,
createdAfter: mockData.createdAfter,
createdBefore: mockData.createdBefore,
group: currentGroup,
stage,
};
......@@ -159,14 +157,6 @@ describe('EE Value Stream Analytics component', () => {
const findPathNavigation = () => wrapper.findComponent(PathNavigation);
const findStageTable = () => wrapper.findComponent(StageTable);
const displaysProjectsDropdownFilter = (flag) => {
expect(wrapper.findComponent(ProjectsDropdownFilter).exists()).toBe(flag);
};
const displaysDateRangePicker = (flag) => {
expect(wrapper.findComponent(Daterange).exists()).toBe(flag);
};
const displaysMetrics = (flag) => {
expect(wrapper.findComponent(Metrics).exists()).toBe(flag);
};
......@@ -187,8 +177,8 @@ describe('EE Value Stream Analytics component', () => {
expect(findPathNavigation().exists()).toBe(flag);
};
const displaysFilterBar = (flag) => {
expect(wrapper.findComponent(FilterBar).exists()).toBe(flag);
const displaysFilters = (flag) => {
expect(wrapper.findComponent(ValueStreamFilters).exists()).toBe(flag);
};
const displaysValueStreamSelect = (flag) => {
......@@ -215,14 +205,6 @@ describe('EE Value Stream Analytics component', () => {
expect(emptyState.props('svgPath')).toBe(emptyStateSvgPath);
});
it('does not display the projects filter', () => {
displaysProjectsDropdownFilter(false);
});
it('does not display the date range picker', () => {
displaysDateRangePicker(false);
});
it('does not display the metrics cards', () => {
displaysMetrics(false);
});
......@@ -263,14 +245,6 @@ describe('EE Value Stream Analytics component', () => {
expect(emptyState.props('svgPath')).toBe(noAccessSvgPath);
});
it('does not display the projects filter', () => {
displaysProjectsDropdownFilter(false);
});
it('does not display the date range picker', () => {
displaysDateRangePicker(false);
});
it('does not display the metrics', () => {
displaysMetrics(false);
});
......@@ -309,27 +283,12 @@ describe('EE Value Stream Analytics component', () => {
expect(wrapper.findComponent(GlEmptyState).exists()).toBe(false);
});
it('displays the projects filter', () => {
displaysProjectsDropdownFilter(true);
expect(wrapper.findComponent(ProjectsDropdownFilter).props()).toEqual(
expect.objectContaining({
queryParams: wrapper.vm.projectsQueryParams,
multiSelect: wrapper.vm.$options.multiProjectSelect,
}),
);
});
it('displays the value stream select component', () => {
displaysValueStreamSelect(true);
});
it('displays the date range picker', () => {
displaysDateRangePicker(true);
});
it('displays the filter bar', () => {
displaysFilterBar(true);
displaysFilters(true);
});
it('displays the metrics', () => {
......@@ -505,8 +464,8 @@ describe('EE Value Stream Analytics component', () => {
describe('Url parameters', () => {
const defaultParams = {
value_stream_id: selectedValueStream.id,
created_after: toYmd(mockData.startDate),
created_before: toYmd(mockData.endDate),
created_after: toYmd(mockData.createdAfter),
created_before: toYmd(mockData.createdBefore),
stage_id: null,
project_ids: null,
sort: null,
......@@ -556,8 +515,8 @@ describe('EE Value Stream Analytics component', () => {
it('sets the value_stream_id url parameter', async () => {
await shouldMergeUrlParams(wrapper, {
...defaultParams,
created_after: toYmd(mockData.startDate),
created_before: toYmd(mockData.endDate),
created_after: toYmd(mockData.createdAfter),
created_before: toYmd(mockData.createdBefore),
project_ids: null,
});
});
......@@ -573,8 +532,8 @@ describe('EE Value Stream Analytics component', () => {
it('sets the project_ids url parameter', async () => {
await shouldMergeUrlParams(wrapper, {
...defaultParams,
created_after: toYmd(mockData.startDate),
created_before: toYmd(mockData.endDate),
created_after: toYmd(mockData.createdAfter),
created_before: toYmd(mockData.createdBefore),
project_ids: selectedProjectIds,
stage_id: null,
});
......
import { shallowMount } from '@vue/test-utils';
import FilterBar from 'ee/analytics/cycle_analytics/components/filter_bar.vue';
import ValueStreamFilters from 'ee/analytics/cycle_analytics/components/value_stream_filters.vue';
import Daterange from 'ee/analytics/shared/components/daterange.vue';
import ProjectsDropdownFilter from 'ee/analytics/shared/components/projects_dropdown_filter.vue';
import {
createdAfter as startDate,
createdBefore as endDate,
currentGroup,
selectedProjects,
} from '../mock_data';
function createComponent(props = {}) {
return shallowMount(ValueStreamFilters, {
propsData: {
selectedProjects,
groupId: currentGroup.id,
groupPath: currentGroup.fullPath,
startDate,
endDate,
...props,
},
});
}
describe('ValueStreamFilters', () => {
let wrapper;
const findProjectsDropdown = () => wrapper.findComponent(ProjectsDropdownFilter);
const findDateRangePicker = () => wrapper.findComponent(Daterange);
const findFilterBar = () => wrapper.findComponent(FilterBar);
beforeEach(() => {
wrapper = createComponent();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('will render the filter bar', () => {
expect(findFilterBar().exists()).toBe(true);
});
it('will render the projects dropdown', () => {
expect(findProjectsDropdown().exists()).toBe(true);
expect(wrapper.findComponent(ProjectsDropdownFilter).props()).toEqual(
expect.objectContaining({
queryParams: wrapper.vm.projectsQueryParams,
multiSelect: wrapper.vm.$options.multiProjectSelect,
}),
);
});
it('will render the date range picker', () => {
expect(findDateRangePicker().exists()).toBe(true);
});
it('will emit `selectProject` when a project is selected', () => {
findProjectsDropdown().vm.$emit('selected');
expect(wrapper.emitted('selectProject')).not.toBeUndefined();
});
it('will emit `setDateRange` when the date range changes', () => {
findDateRangePicker().vm.$emit('change');
expect(wrapper.emitted('setDateRange')).not.toBeUndefined();
});
describe('hasDateRangeFilter = false', () => {
beforeEach(() => {
wrapper = createComponent({ hasDateRangeFilter: false });
});
it('will not render the date range picker', () => {
expect(findDateRangePicker().exists()).toBe(false);
});
});
describe('hasProjectFilter = false', () => {
beforeEach(() => {
wrapper = createComponent({ hasProjectFilter: false });
});
it('will not render the project dropdown', () => {
expect(findProjectsDropdown().exists()).toBe(false);
});
});
});
......@@ -158,8 +158,8 @@ export const stageCounts = rawStageMedians.reduce((acc, { id, value }) => {
return { ...acc, [stageId]: value };
}, {});
export const endDate = new Date(2019, 0, 14);
export const startDate = getDateInPast(endDate, DEFAULT_DAYS_IN_PAST);
export const createdBefore = new Date(2019, 0, 14);
export const createdAfter = getDateInPast(createdBefore, DEFAULT_DAYS_IN_PAST);
export const issueEvents = deepCamelCase(stageFixtures.issue);
export const planEvents = deepCamelCase(stageFixtures.plan);
......@@ -204,7 +204,7 @@ export const labelEndEvent = customStageLabelEvents.find(
(ev) => ev.identifier === labelStartEvent.allowedEndEvents[0],
);
const dateRange = getDatesInRange(startDate, endDate, toYmd);
const dateRange = getDatesInRange(createdAfter, createdBefore, toYmd);
export const apiTasksByTypeData = getJSONFixture(
'analytics/charts/type_of_work/tasks_by_type.json',
......
......@@ -10,8 +10,8 @@ import httpStatusCodes from '~/lib/utils/http_status';
import {
currentGroup,
allowedStages as stages,
startDate,
endDate,
createdAfter,
createdBefore,
customizableStagesAndEvents,
endpoints,
valueStreams,
......@@ -53,8 +53,8 @@ describe('Value Stream Analytics actions', () => {
beforeEach(() => {
state = {
startDate,
endDate,
createdAfter,
createdBefore,
stages: [],
featureFlags: {
hasDurationChart: true,
......@@ -269,7 +269,7 @@ describe('Value Stream Analytics actions', () => {
}
beforeEach(() => {
state = { ...state, currentGroup, startDate, endDate };
state = { ...state, currentGroup, createdAfter, createdBefore };
});
it(`dispatches actions for required value stream analytics analytics data`, () => {
......@@ -961,9 +961,9 @@ describe('Value Stream Analytics actions', () => {
});
describe.each`
targetAction | payload | mutations
${actions.setDateRange} | ${{ startDate, endDate }} | ${[{ type: 'SET_DATE_RANGE', payload: { startDate, endDate } }]}
${actions.setFilters} | ${''} | ${[]}
targetAction | payload | mutations
${actions.setDateRange} | ${{ createdAfter, createdBefore }} | ${[{ type: 'SET_DATE_RANGE', payload: { createdAfter, createdBefore } }]}
${actions.setFilters} | ${''} | ${[]}
`('$action', ({ targetAction, payload, mutations }) => {
let stateWithOverview = null;
......
......@@ -9,8 +9,8 @@ import {
getFilterValues,
} from 'jest/vue_shared/components/filtered_search_bar/store/modules/filters/test_helper';
import {
startDate,
endDate,
createdAfter,
createdBefore,
allowedStages,
selectedProjects,
issueStage,
......@@ -97,8 +97,8 @@ describe('Value Stream Analytics getters', () => {
currentGroup: {
fullPath,
},
startDate,
endDate,
createdAfter,
createdBefore,
selectedProjects,
filters: {
authors: { selected: selectedUserParams[0] },
......
......@@ -10,8 +10,8 @@ import httpStatusCodes from '~/lib/utils/http_status';
import {
group,
allowedStages as stages,
startDate,
endDate,
createdAfter,
createdBefore,
rawDurationData,
transformedDurationData,
endpoints,
......@@ -27,8 +27,8 @@ const [selectedValueStream] = valueStreams;
const error = new Error(`Request failed with status code ${httpStatusCodes.BAD_REQUEST}`);
const rootState = {
startDate,
endDate,
createdAfter,
createdBefore,
stages: [...activeStages, hiddenStage],
selectedGroup,
selectedValueStream,
......
import * as getters from 'ee/analytics/cycle_analytics/store/modules/duration_chart/getters';
import {
startDate,
endDate,
createdAfter,
createdBefore,
transformedDurationData,
durationChartPlottableData,
} from '../../../mock_data';
const rootState = {
startDate,
endDate,
createdAfter,
createdBefore,
};
describe('DurationChart getters', () => {
......
......@@ -11,7 +11,13 @@ import * as types from 'ee/analytics/cycle_analytics/store/modules/type_of_work/
import testAction from 'helpers/vuex_action_helper';
import createFlash from '~/flash';
import httpStatusCodes from '~/lib/utils/http_status';
import { groupLabels, endpoints, startDate, endDate, rawTasksByTypeData } from '../../../mock_data';
import {
groupLabels,
endpoints,
createdAfter,
createdBefore,
rawTasksByTypeData,
} from '../../../mock_data';
jest.mock('~/flash');
......@@ -33,7 +39,7 @@ describe('Type of work actions', () => {
...rootGetters,
...getters,
...state,
rootState: { startDate, endDate },
rootState: { createdAfter, createdBefore },
};
beforeEach(() => {
......
......@@ -2,13 +2,13 @@ import { tasksByTypeChartData } from 'ee/analytics/cycle_analytics/store/modules
import {
rawTasksByTypeData,
transformedTasksByTypeData,
startDate,
endDate,
createdAfter,
createdBefore,
} from '../../../mock_data';
describe('Type of work getters', () => {
describe('tasksByTypeChartData', () => {
const rootState = { startDate, endDate };
const rootState = { createdAfter, createdBefore };
describe('with data', () => {
it('correctly transforms the raw task by type data', () => {
expect(tasksByTypeChartData(rawTasksByTypeData, null, rootState)).toEqual(
......
......@@ -11,8 +11,8 @@ import {
codeStage,
stagingStage,
reviewStage,
startDate,
endDate,
createdAfter,
createdBefore,
selectedProjects,
customizableStagesAndEvents,
valueStreams,
......@@ -91,7 +91,7 @@ describe('Value Stream Analytics mutations', () => {
mutation | payload | expectedState
${types.SET_FEATURE_FLAGS} | ${{ hasDurationChart: true }} | ${{ featureFlags: { hasDurationChart: true } }}
${types.SET_SELECTED_PROJECTS} | ${selectedProjects} | ${{ selectedProjects }}
${types.SET_DATE_RANGE} | ${{ startDate, endDate }} | ${{ startDate, endDate }}
${types.SET_DATE_RANGE} | ${{ createdAfter, createdBefore }} | ${{ createdAfter, createdBefore }}
${types.SET_SELECTED_STAGE} | ${{ id: 'first-stage' }} | ${{ selectedStage: { id: 'first-stage' } }}
${types.RECEIVE_CREATE_VALUE_STREAM_ERROR} | ${valueStreamErrors} | ${{ createValueStreamErrors: expectedValueStreamErrors, isCreatingValueStream: false }}
${types.RECEIVE_UPDATE_VALUE_STREAM_ERROR} | ${valueStreamErrors} | ${{ createValueStreamErrors: expectedValueStreamErrors, isEditingValueStream: false }}
......@@ -235,8 +235,8 @@ describe('Value Stream Analytics mutations', () => {
stateKey | expectedState
${'isLoading'} | ${true}
${'selectedProjects'} | ${initialData.selectedProjects}
${'startDate'} | ${initialData.createdAfter}
${'endDate'} | ${initialData.createdBefore}
${'createdAfter'} | ${initialData.createdAfter}
${'createdBefore'} | ${initialData.createdBefore}
`('$stateKey will be set to $expectedState', ({ stateKey, expectedState }) => {
state = {};
mutations[types.INITIALIZE_VSA](state, initialData);
......
......@@ -32,8 +32,8 @@ import {
transformedDurationData,
flattenedDurationData,
durationChartPlottableData,
startDate,
endDate,
createdAfter,
createdBefore,
issueStage,
rawCustomStage,
rawTasksByTypeData,
......@@ -141,7 +141,11 @@ describe('Value Stream Analytics utils', () => {
describe('cycleAnalyticsDurationChart', () => {
it('computes the plottable data as expected', () => {
const plottableData = getDurationChartData(transformedDurationData, startDate, endDate);
const plottableData = getDurationChartData(
transformedDurationData,
createdAfter,
createdBefore,
);
expect(plottableData).toStrictEqual(durationChartPlottableData);
});
......@@ -251,7 +255,7 @@ describe('Value Stream Analytics utils', () => {
describe('getTasksByTypeData', () => {
let transformed = {};
const groupBy = getDatesInRange(startDate, endDate, toYmd);
const groupBy = getDatesInRange(createdAfter, createdBefore, toYmd);
// only return the values, drop the date which is the first paramater
const extractSeriesValues = ({ label: { title: name }, series }) => {
return {
......@@ -268,17 +272,23 @@ describe('Value Stream Analytics utils', () => {
});
it('will return blank arrays if given no data', () => {
[{ data: [], startDate, endDate }, [], {}].forEach((chartData) => {
transformed = getTasksByTypeData(chartData);
['data', 'groupBy'].forEach((key) => {
expect(transformed[key]).toEqual([]);
});
});
[{ data: [], startDate: createdAfter, endDate: createdBefore }, [], {}].forEach(
(chartData) => {
transformed = getTasksByTypeData(chartData);
['data', 'groupBy'].forEach((key) => {
expect(transformed[key]).toEqual([]);
});
},
);
});
describe('with data', () => {
beforeEach(() => {
transformed = getTasksByTypeData({ data: rawTasksByTypeData, startDate, endDate });
transformed = getTasksByTypeData({
data: rawTasksByTypeData,
startDate: createdAfter,
endDate: createdBefore,
});
});
it('will return an object with the properties needed for the chart', () => {
......@@ -293,11 +303,11 @@ describe('Value Stream Analytics utils', () => {
});
it('the start date is the first element', () => {
expect(transformed.groupBy[0]).toEqual(toYmd(startDate));
expect(transformed.groupBy[0]).toEqual(toYmd(createdAfter));
});
it('the end date is the last element', () => {
expect(transformed.groupBy[transformed.groupBy.length - 1]).toEqual(toYmd(endDate));
expect(transformed.groupBy[transformed.groupBy.length - 1]).toEqual(toYmd(createdBefore));
});
});
......
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