Cleanup components after testsfix-time-window-default

1 files changed, 16 insertions, 20 deletions

diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index d19660db514..bbbc5a23764 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,
@@ -199,7 +201,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,
@@ -236,7 +238,7 @@ describe('Dashboard', () => {
     });
 
     it('hides the dropdown', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -257,7 +259,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,
@@ -278,7 +280,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,
@@ -304,7 +306,7 @@ describe('Dashboard', () => {
     });
 
     it('fetches the metrics data with proper time window', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -342,7 +344,7 @@ describe('Dashboard', () => {
     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,
@@ -363,7 +365,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,
@@ -388,7 +390,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,
@@ -418,16 +420,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({