fix(ui): favicon counter should render on first mount

Fixes #1761
prymitive · May 19, 2020 · 3e7dc8f · 3e7dc8f
1 parent 8cfbd74
commit 3e7dc8f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/ui/src/Components/FaviconBadge/index.js b/ui/src/Components/FaviconBadge/index.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
+import { autorun } from "mobx";
 import { useObserver } from "mobx-react";
 
 import Favico from "favico.js";
@@ -18,13 +19,17 @@ const FaviconBadge = ({ alertStore }) => {
     })
   );
 
-  useEffect(() => {
-    if (alertStore.status.error !== null) {
-      favico.badge("?");
-    } else {
-      favico.badge(alertStore.info.totalAlerts);
-    }
-  });
+  useEffect(
+    () =>
+      autorun(() => {
+        if (alertStore.status.error !== null) {
+          favico.badge("?");
+        } else {
+          favico.badge(alertStore.info.totalAlerts);
+        }
+      }),
+    [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
 
   return useObserver(() => (
     <span

diff --git a/ui/src/Components/FaviconBadge/index.test.js b/ui/src/Components/FaviconBadge/index.test.js
@@ -14,20 +14,27 @@ beforeEach(() => {
   Favico.badge.mockClear();
 });
 
-afterEach(() => {
-  jest.restoreAllMocks();
-});
-
 const MountedFaviconBadge = () => {
   return mount(<FaviconBadge alertStore={alertStore} />);
 };
 
 describe("<FaviconBadge />", () => {
+  it("badge is updated on mount", () => {
+    alertStore.info.totalAlerts = 99;
+    MountedFaviconBadge();
+    expect(Favico.badge).toHaveBeenCalledTimes(1);
+    expect(Favico.badge).toHaveBeenCalledWith(99);
+  });
+
   it("badge is updated when alertStore.info.totalAlerts changes", () => {
     alertStore.info.totalAlerts = 99;
-    const tree = MountedFaviconBadge();
+    MountedFaviconBadge();
     expect(Favico.badge).toHaveBeenCalledTimes(1);
     expect(Favico.badge).toHaveBeenCalledWith(99);
+
+    alertStore.info.totalAlerts = 100;
+    expect(Favico.badge).toHaveBeenCalledTimes(2);
+    expect(Favico.badge).toHaveBeenLastCalledWith(100);
   });
 
   it("badge is updated when alertStore.status.error changes", () => {