feat(tests): add missing navbar test for resize events

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 };

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");
+  });
+});