Properly sync status between background and foreground

Author: johman10

__mocks__/webextension-polyfill.ts

@@ -30,6 +30,9 @@ export const storage: DeepPartial<Storage.Static> = {
       storedValues = {};
       return Promise.resolve;
     }),
+    onChanged: {
+      addListener: jest.fn(),
+    },
   },
 };
 

src/background.ts

@@ -7,7 +7,7 @@ import ErrorHandler from "./utils/ErrorHandler";
 
 async function init() {
   const badgeNumberManager = await BadgeNumberManager.init();
-  badgeNumberManager.startStorageChangeListener();
+  badgeNumberManager.startListeners();
   const ntfyNotificationManager =
     await NtfyNotificationManager.init(badgeNumberManager);
   const browserNotificationManager = new BrowserNotificationManager();

src/popup.tsx

@@ -20,7 +20,7 @@ const Popup = () => {
   useEffect(() => {
     BadgeNumberManager.init()
       .then((badgeManager) => {
-        badgeManager.startStorageChangeListener();
+        badgeManager.startListeners();
         setBadgeNumberManager(badgeManager);
 
         return NtfyNotificationManager.init(badgeManager);
@@ -73,5 +73,5 @@ const root = createRoot(rootElement);
 root.render(
   <React.StrictMode>
     <Popup />
-  </React.StrictMode>,
+  </React.StrictMode>
 );

src/utils/BadgeNumberManager.ts

@@ -14,8 +14,8 @@ export default class BadgeNumberManager implements BadgeNumberManagerInterface {
 
   private constructor() {}
 
-  static async init() {
-    if (BadgeNumberManager.instance) {
+  static async init(reset = false) {
+    if (!reset && BadgeNumberManager.instance) {
       return BadgeNumberManager.instance;
     }
     BadgeNumberManager.instance = new BadgeNumberManager();
@@ -73,7 +73,7 @@ export default class BadgeNumberManager implements BadgeNumberManagerInterface {
     return await action.setBadgeText({ text });
   }
 
-  startStorageChangeListener() {
+  startListeners() {
     storage.local.onChanged.addListener((changes) => {
       const newValue = changes[BADGE_NUMBER_MANAGER_STORAGE_KEY]?.newValue;
       if (!newValue) return;

src/utils/NtfyNotificationManager.ts

@@ -148,5 +148,12 @@ export default class NtfyNotificationManager {
         await this.badgeNumberManager.lower();
       }
     });
+
+    storage.local.onChanged.addListener((changes) => {
+      const newValue = changes[NTFY_NOTIFICATION_MANAGER_STORAGE_KEY]?.newValue;
+      if (!newValue) return;
+
+      this.notificationCache = newValue.notificationCache;
+    });
   }
 }

src/utils/__tests__/BadgeNumberManager.spec.ts

@@ -1,6 +1,7 @@
 jest.mock("webextension-polyfill");
 
-import { action } from "webextension-polyfill";
+import { action, storage } from "webextension-polyfill";
+import { BADGE_NUMBER_MANAGER_STORAGE_KEY } from "../constants";
 
 type BadgeNumberManagerImport = typeof import("../BadgeNumberManager");
 
@@ -9,6 +10,7 @@ describe("BadgeNumberManager", () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    storage.local.clear();
 
     jest.isolateModules(() => {
       const module = jest.requireActual<BadgeNumberManagerImport>(
@@ -19,51 +21,103 @@ describe("BadgeNumberManager", () => {
   });
 
   it("is a singleton", async () => {
-    const badgeNumberManager1 = await BadgeNumberManager.init();
+    const badgeNumberManager1 = await BadgeNumberManager.init(true);
     const badgeNumberManager2 = await BadgeNumberManager.init();
 
     expect(badgeNumberManager1).toBe(badgeNumberManager2);
   });
 
-  it("can higher the badge text", async () => {
-    const badgeNumberManager = await BadgeNumberManager.init();
+  it("restores values from storage", async () => {
+    await storage.local.set({
+      [BADGE_NUMBER_MANAGER_STORAGE_KEY]: {
+        currentNumber: 2,
+      },
+    });
 
+    const badgeNumberManager = await BadgeNumberManager.init(true);
     await badgeNumberManager.higher();
     expect(action.setBadgeText).toHaveBeenNthCalledWith(1, {
-      text: "1",
+      text: "3",
     });
+  });
 
-    await badgeNumberManager.higher();
-    expect(action.setBadgeText).toHaveBeenNthCalledWith(2, {
-      text: "2",
+  describe("higher", () => {
+    it("can higher the badge text", async () => {
+      const badgeNumberManager = await BadgeNumberManager.init(true);
+
+      await badgeNumberManager.higher();
+      expect(action.setBadgeText).toHaveBeenNthCalledWith(1, {
+        text: "1",
+      });
+
+      await badgeNumberManager.higher();
+      expect(action.setBadgeText).toHaveBeenNthCalledWith(2, {
+        text: "2",
+      });
+    });
+
+    it("stores the new value", async () => {
+      const badgeNumberManager = await BadgeNumberManager.init(true);
+
+      await badgeNumberManager.higher();
+      expect(storage.local.set).toHaveBeenCalledTimes(1);
+      expect(storage.local.set).toHaveBeenCalledWith({
+        [BADGE_NUMBER_MANAGER_STORAGE_KEY]: { currentNumber: 1 },
+      });
     });
   });
 
-  it("can lower the badge text", async () => {
-    const badgeNumberManager = await BadgeNumberManager.init();
+  describe("lower", () => {
+    it("can lower the badge text", async () => {
+      const badgeNumberManager = await BadgeNumberManager.init(true);
 
-    await badgeNumberManager.higher();
-    await badgeNumberManager.higher();
+      await badgeNumberManager.higher();
+      await badgeNumberManager.higher();
 
-    await badgeNumberManager.lower();
-    expect(action.setBadgeText).toHaveBeenNthCalledWith(3, {
-      text: "1",
+      await badgeNumberManager.lower();
+      expect(action.setBadgeText).toHaveBeenNthCalledWith(3, {
+        text: "1",
+      });
+
+      await badgeNumberManager.lower();
+      expect(action.setBadgeText).toHaveBeenNthCalledWith(4, {
+        text: "",
+      });
     });
 
-    await badgeNumberManager.lower();
-    expect(action.setBadgeText).toHaveBeenNthCalledWith(4, {
-      text: "",
+    it("stores the new value", async () => {
+      const badgeNumberManager = await BadgeNumberManager.init(true);
+
+      await badgeNumberManager.higher();
+      await badgeNumberManager.lower();
+      expect(storage.local.set).toHaveBeenCalledTimes(2);
+      expect(storage.local.set).toHaveBeenNthCalledWith(2, {
+        [BADGE_NUMBER_MANAGER_STORAGE_KEY]: { currentNumber: 0 },
+      });
     });
   });
 
-  it("can reset the badge text", async () => {
-    const badgeNumberManager = await BadgeNumberManager.init();
+  describe("reset", () => {
+    it("can reset the badge text", async () => {
+      const badgeNumberManager = await BadgeNumberManager.init(true);
 
-    await badgeNumberManager.higher();
+      await badgeNumberManager.higher();
+
+      await badgeNumberManager.reset();
+      expect(action.setBadgeText).toHaveBeenNthCalledWith(2, {
+        text: "",
+      });
+    });
+
+    it("stores the new value", async () => {
+      const badgeNumberManager = await BadgeNumberManager.init(true);
 
-    await badgeNumberManager.reset();
-    expect(action.setBadgeText).toHaveBeenNthCalledWith(2, {
-      text: "",
+      await badgeNumberManager.higher();
+      await badgeNumberManager.reset();
+      expect(storage.local.set).toHaveBeenCalledTimes(2);
+      expect(storage.local.set).toHaveBeenNthCalledWith(2, {
+        [BADGE_NUMBER_MANAGER_STORAGE_KEY]: { currentNumber: 0 },
+      });
     });
   });
 });

src/utils/__tests__/NtfyNotificationManager.spec.ts

@@ -107,9 +107,8 @@ describe("NtfyNotificationManager", () => {
     it("adds the notification to storage", async () => {
       await ntfyNotificationManager.publish(ntfyNotificationMinimal);
 
-      expect(
-        await storage.local.get([NTFY_NOTIFICATION_MANAGER_STORAGE_KEY])
-      ).toEqual({
+      expect(storage.local.set).toHaveBeenCalledTimes(1);
+      expect(storage.local.set).toHaveBeenCalledWith({
         [NTFY_NOTIFICATION_MANAGER_STORAGE_KEY]: {
           notificationCache: [ntfyNotificationMinimal],
         },