From dced537adb38b2d306cc6224c5463ced9be54001 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 26 Aug 2018 16:18:21 +0100
Subject: [PATCH] feat(tests): add missing navbar test for resize events

---
 ui/src/Components/NavBar/index.js      |  8 ++++----
 ui/src/Components/NavBar/index.test.js | 20 +++++++++++++++++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js
index 7d9c551c5..92e617587 100644
--- a/ui/src/Components/NavBar/index.js
+++ b/ui/src/Components/NavBar/index.js
@@ -15,8 +15,8 @@ import { SilenceModal } from "Components/SilenceModal";
 
 import "./index.css";
 
-const navbarResize = function(width, height) {
-  document.body.style["padding-top"] = height + 4 + "px";
+const NavbarOnResize = function(width, height) {
+  document.body.style["padding-top"] = `${height + 4}px`;
 };
 
 const NavBar = observer(
@@ -41,7 +41,7 @@ const NavBar = observer(
       return (
         <div className="container">
           <nav className="navbar fixed-top navbar-expand navbar-dark p-1 bg-primary-transparent d-inline-block">
-            <ReactResizeDetector handleHeight onResize={navbarResize} />
+            <ReactResizeDetector handleHeight onResize={NavbarOnResize} />
             <span className="navbar-brand my-0 mx-2 h1 d-none d-sm-block float-left">
               {alertStore.info.totalAlerts}
               <FetchIndicator status={alertStore.status.value.toString()} />
@@ -67,4 +67,4 @@ const NavBar = observer(
   }
 );
 
-export { NavBar };
+export { NavBar, NavbarOnResize };
diff --git a/ui/src/Components/NavBar/index.test.js b/ui/src/Components/NavBar/index.test.js
index ca76b2367..8cb85595d 100644
--- a/ui/src/Components/NavBar/index.test.js
+++ b/ui/src/Components/NavBar/index.test.js
@@ -7,7 +7,7 @@ import moment from "moment";
 import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
-import { NavBar } from ".";
+import { NavBar, NavbarOnResize } from ".";
 
 let alertStore;
 let settingsStore;
@@ -76,3 +76,21 @@ describe("<NavBar />", () => {
     ValidateNavClass(3, "flex-column");
   });
 });
+
+describe("NavbarOnResize()", () => {
+  it("body 'padding-top' style is updated after calling NavbarOnResize()", () => {
+    NavbarOnResize(0, 10);
+    expect(
+      window
+        .getComputedStyle(document.body, null)
+        .getPropertyValue("padding-top")
+    ).toBe("14px");
+
+    NavbarOnResize(0, 36);
+    expect(
+      window
+        .getComputedStyle(document.body, null)
+        .getPropertyValue("padding-top")
+    ).toBe("40px");
+  });
+});