From 3e7dc8ffc331dc0335a2a6f1353127f83599a36e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 19 May 2020 20:19:44 +0100
Subject: [PATCH] fix(ui): favicon counter should render on first mount

Fixes #1761
---
 ui/src/Components/FaviconBadge/index.js      | 19 ++++++++++++-------
 ui/src/Components/FaviconBadge/index.test.js | 19 +++++++++++++------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/ui/src/Components/FaviconBadge/index.js b/ui/src/Components/FaviconBadge/index.js
index d62768d48..9060e1cb0 100644
--- 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
index 5b488e80f..73e8b5b7d 100644
--- a/ui/src/Components/FaviconBadge/index.test.js
+++ b/ui/src/Components/FaviconBadge/index.test.js
@@ -14,22 +14,29 @@ beforeEach(() => {
   Favico.badge.mockClear();
 });
 
-afterEach(() => {
-  jest.restoreAllMocks();
-});
-
 const MountedFaviconBadge = () => {
   return mount(<FaviconBadge alertStore={alertStore} />);
 };
 
 describe("<FaviconBadge />", () => {
-  it("badge is updated when alertStore.info.totalAlerts changes", () => {
+  it("badge is updated on mount", () => {
     alertStore.info.totalAlerts = 99;
-    const tree = MountedFaviconBadge();
+    MountedFaviconBadge();
     expect(Favico.badge).toHaveBeenCalledTimes(1);
     expect(Favico.badge).toHaveBeenCalledWith(99);
   });
 
+  it("badge is updated when alertStore.info.totalAlerts changes", () => {
+    alertStore.info.totalAlerts = 99;
+    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", () => {
     alertStore.status.error = "foo";
     MountedFaviconBadge();