Commit 2ba2ca16 authored by Tim Zallmann's avatar Tim Zallmann

Merge branch 'mw-productivity-analytics-reset-mr-table-page-on-chart-click' into 'master'

Productivity Analytics: Reset MR table page on main chart click

See merge request gitlab-org/gitlab!17136
parents 5d7b1892 39c1be47
Pipeline #83042760 passed with stages
in 126 minutes and 38 seconds
...@@ -73,6 +73,9 @@ export default { ...@@ -73,6 +73,9 @@ export default {
showMergeRequestTable() { showMergeRequestTable() {
return !this.isLoadingTable && this.mergeRequests.length; return !this.isLoadingTable && this.mergeRequests.length;
}, },
showMergeRequestTableNoData() {
return !this.isLoadingTable && !this.mergeRequests.length;
},
showSecondaryCharts() { showSecondaryCharts() {
return !this.chartLoading(chartKeys.main) && this.chartHasData(chartKeys.main); return !this.chartLoading(chartKeys.main) && this.chartHasData(chartKeys.main);
}, },
...@@ -93,6 +96,8 @@ export default { ...@@ -93,6 +96,8 @@ export default {
onMainChartItemClicked({ params }) { onMainChartItemClicked({ params }) {
const itemValue = params.data.value[0]; const itemValue = params.data.value[0];
this.chartItemClicked({ chartKey: this.chartKeys.main, item: itemValue }); this.chartItemClicked({ chartKey: this.chartKeys.main, item: itemValue });
// let's reset the page on the MR table
this.setMergeRequestsPage(0);
}, },
getColumnChartOption(chartKey) { getColumnChartOption(chartKey) {
return { return {
...@@ -344,7 +349,7 @@ export default { ...@@ -344,7 +349,7 @@ export default {
@columnMetricChange="setColumnMetric" @columnMetricChange="setColumnMetric"
@pageChange="setMergeRequestsPage" @pageChange="setMergeRequestsPage"
/> />
<div v-else class="bs-callout bs-callout-info"> <div v-if="showMergeRequestTableNoData" class="js-no-data bs-callout bs-callout-info">
{{ __('There is no data available. Please change your selection.') }} {{ __('There is no data available. Please change your selection.') }}
</div> </div>
</div> </div>
......
...@@ -23,14 +23,13 @@ describe('ProductivityApp component', () => { ...@@ -23,14 +23,13 @@ describe('ProductivityApp component', () => {
const actionSpies = { const actionSpies = {
setMetricType: jest.fn(), setMetricType: jest.fn(),
chartItemClicked: jest.fn(),
setSortField: jest.fn(), setSortField: jest.fn(),
setMergeRequestsPage: jest.fn(), setMergeRequestsPage: jest.fn(),
toggleSortOrder: jest.fn(), toggleSortOrder: jest.fn(),
setColumnMetric: jest.fn(), setColumnMetric: jest.fn(),
}; };
const onMainChartItemClickedMock = jest.fn();
beforeEach(() => { beforeEach(() => {
wrapper = shallowMount(localVue.extend(ProductivityApp), { wrapper = shallowMount(localVue.extend(ProductivityApp), {
localVue, localVue,
...@@ -38,10 +37,11 @@ describe('ProductivityApp component', () => { ...@@ -38,10 +37,11 @@ describe('ProductivityApp component', () => {
sync: false, sync: false,
propsData, propsData,
methods: { methods: {
onMainChartItemClicked: onMainChartItemClickedMock,
...actionSpies, ...actionSpies,
}, },
}); });
jest.spyOn(store, 'dispatch').mockImplementation();
}); });
afterEach(() => { afterEach(() => {
...@@ -128,21 +128,32 @@ describe('ProductivityApp component', () => { ...@@ -128,21 +128,32 @@ describe('ProductivityApp component', () => {
).toBe(true); ).toBe(true);
}); });
it('calls onMainChartItemClicked when chartItemClicked is emitted on the column chart ', () => { describe('when an item on the chart is clicked', () => {
const data = { beforeEach(() => {
chart: null, const data = {
params: { chart: null,
data: { params: {
value: [0, 1], data: {
value: [0, 1],
},
}, },
}, };
};
findTimeToMergeSection() findTimeToMergeSection()
.find(GlColumnChart) .find(GlColumnChart)
.vm.$emit('chartItemClicked', data); .vm.$emit('chartItemClicked', data);
});
it('dispatches chartItemClicked action', () => {
expect(actionSpies.chartItemClicked).toHaveBeenCalledWith({
chartKey: chartKeys.main,
item: 0,
});
});
expect(onMainChartItemClickedMock).toHaveBeenCalledWith(data); it('dispatches setMergeRequestsPage action', () => {
expect(actionSpies.setMergeRequestsPage).toHaveBeenCalledWith(0);
});
}); });
}); });
...@@ -312,7 +323,7 @@ describe('ProductivityApp component', () => { ...@@ -312,7 +323,7 @@ describe('ProductivityApp component', () => {
store.state.charts.charts[chartKeys.main].data = { 1: 2, 2: 3 }; store.state.charts.charts[chartKeys.main].data = { 1: 2, 2: 3 };
}); });
describe('when isLoadingTable is true', () => { describe('when table is loading', () => {
beforeEach(() => { beforeEach(() => {
store.state.table.isLoadingTable = true; store.state.table.isLoadingTable = true;
}); });
...@@ -326,53 +337,89 @@ describe('ProductivityApp component', () => { ...@@ -326,53 +337,89 @@ describe('ProductivityApp component', () => {
}); });
}); });
describe('when isLoadingTable is false', () => { describe('when table finished loading', () => {
beforeEach(() => { beforeEach(() => {
store.state.table.isLoadingTable = false; store.state.table.isLoadingTable = false;
store.state.table.mergeRequests = [{ id: 1, title: 'This is a test MR' }];
}); });
it('renders the MR table', () => { describe('and the table has data', () => {
expect(findMrTable().exists()).toBe(true); beforeEach(() => {
}); store.state.table.mergeRequests = [{ id: 1, title: 'This is a test MR' }];
});
it('should change the column metric', () => {
findMrTable().vm.$emit('columnMetricChange', 'time_to_first_comment');
expect(actionSpies.setColumnMetric).toHaveBeenCalledWith('time_to_first_comment');
});
it('should change the page', () => { it('renders the MR table', () => {
const page = 2; expect(findMrTable().exists()).toBe(true);
findMrTable().vm.$emit('pageChange', page); });
expect(actionSpies.setMergeRequestsPage).toHaveBeenCalledWith(page);
});
describe('and there are merge requests available', () => { it('doesn’t render a "no data" message', () => {
beforeEach(() => { expect(
store.state.table.mergeRequests = [{ id: 1 }]; findMrTableSection()
.find('.js-no-data')
.exists(),
).toBe(false);
}); });
describe('sort controls', () => { it('should change the column metric', () => {
it('renders the sort dropdown and button', () => { findMrTable().vm.$emit('columnMetricChange', 'time_to_first_comment');
expect(findSortFieldDropdown().exists()).toBe(true); expect(actionSpies.setColumnMetric).toHaveBeenCalledWith('time_to_first_comment');
expect(findSortOrderToggle().exists()).toBe(true); });
});
it('should change the sort field', () => { it('should change the page', () => {
findSortFieldDropdown() const page = 2;
.findAll(GlDropdownItem) findMrTable().vm.$emit('pageChange', page);
.at(0) expect(actionSpies.setMergeRequestsPage).toHaveBeenCalledWith(page);
.vm.$emit('click'); });
expect(actionSpies.setSortField).toHaveBeenCalled(); describe('and there are merge requests available', () => {
beforeEach(() => {
store.state.table.mergeRequests = [{ id: 1 }];
}); });
it('should toggle the sort order', () => { describe('sort controls', () => {
findSortOrderToggle().vm.$emit('click'); it('renders the sort dropdown and button', () => {
expect(actionSpies.toggleSortOrder).toHaveBeenCalled(); expect(findSortFieldDropdown().exists()).toBe(true);
expect(findSortOrderToggle().exists()).toBe(true);
});
it('should change the sort field', () => {
findSortFieldDropdown()
.findAll(GlDropdownItem)
.at(0)
.vm.$emit('click');
expect(actionSpies.setSortField).toHaveBeenCalled();
});
it('should toggle the sort order', () => {
findSortOrderToggle().vm.$emit('click');
expect(actionSpies.toggleSortOrder).toHaveBeenCalled();
});
}); });
}); });
}); });
describe("and the table doesn't have any data", () => {
beforeEach(() => {
store.state.table.mergeRequests = [];
});
it('renders a "no data" message', () => {
expect(
findMrTableSection()
.find('.js-no-data')
.exists(),
).toBe(true);
});
it('doesn`t render the MR table', () => {
expect(findMrTable().exists()).not.toBe(true);
});
it('doesn`t render the sort dropdown and button', () => {
expect(findSortFieldDropdown().exists()).not.toBe(true);
expect(findSortOrderToggle().exists()).not.toBe(true);
});
});
}); });
}); });
}); });
......
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