Commit c11070f8 authored by Nathan Friend's avatar Nathan Friend

Merge branch 'fix-back-button-ci-cd-analytics' into 'master'

Add Listener so Back Button Switches Tabs

See merge request gitlab-org/gitlab!53495
parents 1206515e ca3f4f58
......@@ -20,18 +20,26 @@ export default {
},
},
data() {
const [chart] = getParameterValues('chart') || charts;
const tab = charts.indexOf(chart);
return {
chart,
selectedTab: tab >= 0 ? tab : 0,
selectedTab: 0,
};
},
created() {
this.selectTab();
window.addEventListener('popstate', this.selectTab);
},
methods: {
selectTab() {
const [chart] = getParameterValues('chart') || charts;
const tab = charts.indexOf(chart);
this.selectedTab = tab >= 0 ? tab : 0;
},
onTabChange(index) {
if (index !== this.selectedTab) {
this.selectedTab = index;
const path = mergeUrlParams({ chart: charts[index] }, window.location.pathname);
updateHistory({ url: path });
updateHistory({ url: path, title: window.title });
}
},
},
};
......
---
title: Back Button now switches to last active analytics tab
merge_request: 53495
author:
type: fixed
......@@ -87,6 +87,22 @@ describe('ProjectsPipelinesChartsApp', () => {
expect(tabs.attributes('value')).toBe('1');
});
it('should not try to push history if the tab does not change', async () => {
setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
mergeUrlParams.mockImplementation(({ chart }, path) => `${path}?chart=${chart}`);
const tabs = findGlTabs();
expect(tabs.attributes('value')).toBe('0');
tabs.vm.$emit('input', 0);
await wrapper.vm.$nextTick();
expect(updateHistory).not.toHaveBeenCalled();
});
});
describe('when provided with a query param', () => {
......@@ -105,6 +121,38 @@ describe('ProjectsPipelinesChartsApp', () => {
createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
expect(findGlTabs().attributes('value')).toBe(tab);
});
it('should set the tab when the back button is clicked', async () => {
let popstateHandler;
window.addEventListener = jest.fn();
window.addEventListener.mockImplementation((event, handler) => {
if (event === 'popstate') {
popstateHandler = handler;
}
});
getParameterValues.mockImplementation((name) => {
expect(name).toBe('chart');
return [];
});
createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
expect(findGlTabs().attributes('value')).toBe('0');
getParameterValues.mockImplementationOnce((name) => {
expect(name).toBe('chart');
return ['deployments'];
});
popstateHandler();
await wrapper.vm.$nextTick();
expect(findGlTabs().attributes('value')).toBe('1');
});
});
describe('when shouldRenderDeploymentFrequencyCharts is false', () => {
......
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