Commit 335d8dcf authored by Tim Zallmann's avatar Tim Zallmann Committed by 🤖 GitLab Bot 🤖

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

(cherry picked from commit 2ba2ca16)

6009f68f Display no data message in MR table if not loading
63085a2d Reset page on MR table
parent 0e80c052
Pipeline #83042834 passed with stages
in 38 minutes
......@@ -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