fix(ui): rewrite FaviconBadge using hooks

ui/src/Components/FaviconBadge/index.js

@@ -1,59 +1,40 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
+import { useObserver } from "mobx-react";
 
 import Favico from "favico.js";
 
 import { AlertStore } from "Stores/AlertStore";
 
-const FaviconBadge = observer(
-  class FaviconBadge extends Component {
-    static propTypes = {
-      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
-    };
+const FaviconBadge = ({ alertStore }) => {
+  const [favico] = useState(
+    new Favico({
+      animation: "none",
+      position: "down",
+      bgColor: "#e74c3c",
+      textColor: "#fff",
+      fontStyle: "lighter",
+    })
+  );
 
-    constructor(props) {
-      super(props);
-
-      this.favicon = new Favico({
-        animation: "none",
-        position: "down",
-        bgColor: "#e74c3c",
-        textColor: "#fff",
-        fontStyle: "lighter",
-      });
+  useEffect(() => {
+    if (alertStore.status.error !== null) {
+      favico.badge("?");
+    } else {
+      favico.badge(alertStore.info.totalAlerts);
     }
+  });
 
-    updateBadge = () => {
-      const { alertStore } = this.props;
-
-      if (alertStore.status.error !== null) {
-        this.favicon.badge("?");
-      } else {
-        this.favicon.badge(alertStore.info.totalAlerts);
-      }
-    };
-
-    componentDidMount() {
-      this.updateBadge();
-    }
-
-    componentDidUpdate() {
-      this.updateBadge();
-    }
-
-    render() {
-      const { alertStore } = this.props;
-
-      return (
-        <span
-          data-total-alerts={alertStore.info.totalAlerts}
-          data-status-error={alertStore.status.error}
-        />
-      );
-    }
-  }
-);
+  return useObserver(() => (
+    <span
+      data-total-alerts={alertStore.info.totalAlerts}
+      data-status-error={alertStore.status.error}
+    />
+  ));
+};
+FaviconBadge.propTypes = {
+  alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+};
 
 export { FaviconBadge };

ui/src/Components/FaviconBadge/index.test.js

@@ -2,6 +2,8 @@ import React from "react";
 
 import { mount } from "enzyme";
 
+import Favico from "favico.js";
+
 import { AlertStore } from "Stores/AlertStore";
 import { FaviconBadge } from ".";
 
@@ -9,6 +11,7 @@ let alertStore;
 
 beforeEach(() => {
   alertStore = new AlertStore([]);
+  Favico.badge.mockClear();
 });
 
 afterEach(() => {
@@ -20,25 +23,17 @@ const MountedFaviconBadge = () => {
 };
 
 describe("<FaviconBadge />", () => {
-  it("creates Favico instance on mount", () => {
-    const tree = MountedFaviconBadge();
-    const instance = tree.instance();
-    expect(instance.favicon).toBeInstanceOf(Object);
-  });
-
-  it("updateBadge is called when alertStore.info.totalAlerts changes", () => {
-    const tree = MountedFaviconBadge();
-    const instance = tree.instance();
-    const updateSpy = jest.spyOn(instance, "updateBadge");
+  it("badge is updated when alertStore.info.totalAlerts changes", () => {
     alertStore.info.totalAlerts = 99;
-    expect(updateSpy).toHaveBeenCalledTimes(1);
+    const tree = MountedFaviconBadge();
+    expect(Favico.badge).toHaveBeenCalledTimes(1);
+    expect(Favico.badge).toHaveBeenCalledWith(99);
   });
 
-  it("updateBadge is called when alertStore.status.error changes", () => {
-    const tree = MountedFaviconBadge();
-    const instance = tree.instance();
-    const updateSpy = jest.spyOn(instance, "updateBadge");
+  it("badge is updated when alertStore.status.error changes", () => {
     alertStore.status.error = "foo";
-    expect(updateSpy).toHaveBeenCalledTimes(1);
+    MountedFaviconBadge();
+    expect(Favico.badge).toHaveBeenCalledTimes(1);
+    expect(Favico.badge).toHaveBeenCalledWith("?");
   });
 });

ui/src/__mocks__/favico.js.js

@@ -0,0 +1,9 @@
+export default class Favico {
+  static badge = jest.fn();
+
+  constructor() {
+    return {
+      badge: Favico.badge,
+    };
+  }
+}