diff options
Diffstat (limited to 'spec/javascripts/monitoring/dashboard_spec.js')
| -rw-r--r-- | spec/javascripts/monitoring/dashboard_spec.js | 70 |
1 files changed, 51 insertions, 19 deletions
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js index cea8cb18918..80b9b740b94 100644 --- a/spec/javascripts/monitoring/dashboard_spec.js +++ b/spec/javascripts/monitoring/dashboard_spec.js @@ -38,6 +38,7 @@ describe('Dashboard', () => { let DashboardComponent; let mock; let store; + let component; beforeEach(() => { setFixtures(` @@ -59,12 +60,13 @@ describe('Dashboard', () => { }); afterEach(() => { + component.$destroy(); mock.restore(); }); describe('no metrics are available yet', () => { it('shows a getting started empty state when no metrics are present', () => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, showTimeWindowDropdown: false }, store, @@ -81,7 +83,7 @@ describe('Dashboard', () => { }); it('shows up a loading state', done => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: false }, store, @@ -94,7 +96,7 @@ describe('Dashboard', () => { }); it('hides the legend when showLegend is false', done => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, @@ -114,7 +116,7 @@ describe('Dashboard', () => { }); it('hides the group panels when showPanels is false', done => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, @@ -134,7 +136,7 @@ describe('Dashboard', () => { }); it('renders the environments dropdown with a number of environments', done => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, @@ -165,7 +167,7 @@ describe('Dashboard', () => { }); it('hides the environments dropdown list when there is no environments', done => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, @@ -195,7 +197,7 @@ describe('Dashboard', () => { }); it('renders the environments dropdown with a single active element', done => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, @@ -228,7 +230,7 @@ describe('Dashboard', () => { }); it('hides the dropdown', done => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, @@ -249,7 +251,7 @@ describe('Dashboard', () => { }); it('does not show the time window dropdown when the feature flag is not set', done => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, @@ -270,7 +272,7 @@ describe('Dashboard', () => { }); it('renders the time window dropdown with a set of options', done => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, @@ -295,10 +297,46 @@ describe('Dashboard', () => { }); }); + it('fetches the metrics data with proper time window', done => { + component = new DashboardComponent({ + el: document.querySelector('.prometheus-graphs'), + propsData: { + ...propsData, + hasMetrics: true, + showPanels: false, + showTimeWindowDropdown: true, + }, + store, + }); + + spyOn(component.$store, 'dispatch').and.stub(); + const getTimeDiffSpy = spyOnDependency(Dashboard, 'getTimeDiff'); + + component.$store.commit( + `monitoringDashboard/${types.SET_ENVIRONMENTS_ENDPOINT}`, + '/environments', + ); + component.$store.commit( + `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`, + environmentData, + ); + + component.$mount(); + + Vue.nextTick() + .then(() => { + expect(component.$store.dispatch).toHaveBeenCalled(); + expect(getTimeDiffSpy).toHaveBeenCalledWith(component.selectedTimeWindow); + + done(); + }) + .catch(done.fail); + }); + it('shows a specific time window selected from the url params', done => { spyOnDependency(Dashboard, 'getParameterValues').and.returnValue(['thirtyMinutes']); - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true }, store, @@ -319,7 +357,7 @@ describe('Dashboard', () => { '<script>alert("XSS")</script>', ]); - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true }, store, @@ -344,7 +382,7 @@ describe('Dashboard', () => { }); it('sets elWidth to page width when the sidebar is resized', done => { - const component = new DashboardComponent({ + component = new DashboardComponent({ el: document.querySelector('.prometheus-graphs'), propsData: { ...propsData, @@ -374,16 +412,10 @@ describe('Dashboard', () => { }); describe('external dashboard link', () => { - let component; - beforeEach(() => { mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); }); - afterEach(() => { - component.$destroy(); - }); - describe('with feature flag enabled', () => { beforeEach(() => { component = new DashboardComponent({ |