1 files changed, 41 insertions, 1 deletions
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 997163c7602..f0d53b2d8d7 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -25,7 +25,10 @@ describe('Dashboard', () => {
   };
 
   beforeEach(() => {
-    setFixtures('<div class="prometheus-graphs"></div>');
+    setFixtures(`
+      <div class="prometheus-graphs"></div>
+      <div class="nav-sidebar"></div> 
+    `);
     DashboardComponent = Vue.extend(Dashboard);
   });
 
@@ -127,4 +130,41 @@ describe('Dashboard', () => {
       });
     });
   });
+
+  describe('when the window resizes', () => {
+    let mock;
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+      jasmine.clock().install();
+    });
+
+    afterEach(() => {
+      mock.restore();
+      jasmine.clock().uninstall();
+    });
+
+    it('rerenders the dashboard when the sidebar is resized', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+      });
+
+      expect(component.forceRedraw).toEqual(0);
+
+      const navSidebarEl = document.querySelector('.nav-sidebar');
+      navSidebarEl.classList.add('nav-sidebar-collapsed');
+
+      Vue.nextTick()
+        .then(() => {
+          jasmine.clock().tick(1000);
+          return Vue.nextTick();
+        })
+        .then(() => {
+          expect(component.forceRedraw).toEqual(component.elWidth);
+          done();
+        })
+        .catch(done.fail);
+    });
+  });
 });