diff --git a/assets/static/__mocks__/faviconMock.js b/assets/static/__mocks__/faviconMock.js
new file mode 100644
index 000000000..c01c233aa
--- /dev/null
+++ b/assets/static/__mocks__/faviconMock.js
@@ -0,0 +1,6 @@
+class MockFavicon {
+    badge() {
+    }
+}
+
+module.exports = MockFavicon;
diff --git a/assets/static/counter.test.js b/assets/static/counter.test.js
index d0db8c1d7..57186396b 100644
--- a/assets/static/counter.test.js
+++ b/assets/static/counter.test.js
@@ -1,5 +1,84 @@
+const $ = require("jquery");
+
 const counter = require("./counter");
 
-test("counter hide()", () => {
+const mockHTML =
+    "<div>" +
+    "  <div id='alert-count' ></div>" +
+    "  <div id='spinner' >" +
+    "    <span id='spinner-child'></span>" +
+    "  </div>" +
+    "</div>";
+
+test("counter & spinner visibility after hide() & show()", () => {
+    document.body.innerHTML = mockHTML;
+
+    counter.init();
+    expect($("#alert-count").css("display")).not.toEqual("none");
+    expect($("#spinner").css("display")).toEqual("none");
+
     counter.hide();
+    expect($("#alert-count").css("display")).toEqual("none");
+    expect($("#spinner").css("display")).not.toEqual("none");
+
+    counter.show();
+    expect($("#alert-count").css("display")).not.toEqual("none");
+    expect($("#spinner").css("display")).toEqual("none");
+
+    counter.hide();
+    expect($("#alert-count").css("display")).toEqual("none");
+    expect($("#spinner").css("display")).not.toEqual("none");
+
+    counter.setCounter(0);
+    expect($("#alert-count").css("display")).not.toEqual("none");
+    expect($("#spinner").css("display")).toEqual("none");
+});
+
+test("counter colors are correct", () => {
+    document.body.innerHTML = mockHTML;
+
+    counter.init();
+    expect($("#alert-count").hasClass("text-success")).toBe(false);
+    expect($("#alert-count").hasClass("text-warning")).toBe(false);
+    expect($("#alert-count").hasClass("text-danger")).toBe(false);
+
+    counter.setCounter(0);
+    expect(document.title).toBe("(◕‿◕)");
+    expect($("#alert-count").hasClass("text-success")).toBe(true);
+    expect($("#alert-count").hasClass("text-warning")).toBe(false);
+    expect($("#alert-count").hasClass("text-danger")).toBe(false);
+
+    for (var i = 1; i < 10; i++) {
+        counter.setCounter(i);
+        expect(document.title).toBe("(◕_◕)");
+        expect($("#alert-count").hasClass("text-success")).toBe(false);
+        expect($("#alert-count").hasClass("text-warning")).toBe(true);
+        expect($("#alert-count").hasClass("text-danger")).toBe(false);
+    }
+
+    for (i = 10; i < 20; i++) {
+        counter.setCounter(i);
+        expect(document.title).toBe("(◕︵◕)");
+        expect($("#alert-count").hasClass("text-success")).toBe(false);
+        expect($("#alert-count").hasClass("text-warning")).toBe(false);
+        expect($("#alert-count").hasClass("text-danger")).toBe(true);
+    }
+});
+
+test("spinner children is red after error", () => {
+    document.body.innerHTML = mockHTML;
+
+    counter.init();
+    counter.markError();
+    expect($("#spinner-child").hasClass("spinner-success")).toBe(false);
+    expect($("#spinner-child").hasClass("spinner-error")).toBe(true);
+});
+
+test("spinner children is green after success", () => {
+    document.body.innerHTML = mockHTML;
+
+    counter.init();
+    counter.markSuccess();
+    expect($("#spinner-child").hasClass("spinner-success")).toBe(true);
+    expect($("#spinner-child").hasClass("spinner-error")).toBe(false);
 });
diff --git a/package.json b/package.json
index 18fe0f68a..c28ad4f34 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
       "\\.(css|less)$": "<rootDir>/assets/static/__mocks__/styleMock.js",
       "no-op\\.js$": "<rootDir>/assets/static/__mocks__/styleMock.js",
       "font-awesome.config\\.js$": "<rootDir>/assets/static/__mocks__/styleMock.js",
+      "favico\\.js": "<rootDir>/assets/static/__mocks__/faviconMock.js",
       "./favicon.ico": "<rootDir>/assets/static/__mocks__/styleMock.js"
     }
   },