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