test: preserve later service worker refreshes

Author: Programcode

src/register-service-worker.ts

@@ -6,7 +6,7 @@ export function registerServiceWorker() {
   if (isNativeApp()) return;
   if (!import.meta.env.PROD || !('serviceWorker' in navigator)) return;
 
-  const hadController = navigator.serviceWorker.controller !== null;
+  let hadController = navigator.serviceWorker.controller !== null;
 
   window.addEventListener('load', () => {
     navigator.serviceWorker.register(SERVICE_WORKER_URL)
@@ -27,7 +27,10 @@ export function registerServiceWorker() {
   });
 
   navigator.serviceWorker.addEventListener('controllerchange', () => {
-    if (!hadController) return;
+    if (!hadController) {
+      hadController = true;
+      return;
+    }
     if (sessionStorage.getItem('pwa-refreshing') === 'true') return;
     sessionStorage.setItem('pwa-refreshing', 'true');
     window.location.reload();

src/test/register-service-worker.test.ts

@@ -0,0 +1,48 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('@/lib/native', () => ({ isNativeApp: () => false }));
+
+import { registerServiceWorker } from '@/register-service-worker';
+
+describe('registerServiceWorker', () => {
+  const originalServiceWorker = Object.getOwnPropertyDescriptor(navigator, 'serviceWorker');
+  let controllerChange: EventListener | undefined;
+
+  beforeEach(() => {
+    vi.stubEnv('PROD', true);
+    sessionStorage.clear();
+    controllerChange = undefined;
+    Object.defineProperty(navigator, 'serviceWorker', {
+      configurable: true,
+      value: {
+        controller: null,
+        register: vi.fn().mockResolvedValue({ addEventListener: vi.fn() }),
+        addEventListener: vi.fn((type: string, listener: EventListener) => {
+          if (type === 'controllerchange') controllerChange = listener;
+        }),
+      },
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.restoreAllMocks();
+    if (originalServiceWorker) {
+      Object.defineProperty(navigator, 'serviceWorker', originalServiceWorker);
+    } else {
+      Reflect.deleteProperty(navigator, 'serviceWorker');
+    }
+  });
+
+  it('skips the initial claim but refreshes for a later controller change', () => {
+    registerServiceWorker();
+
+    expect(controllerChange).toBeDefined();
+    controllerChange?.(new Event('controllerchange'));
+    expect(sessionStorage.getItem('pwa-refreshing')).toBeNull();
+
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    controllerChange?.(new Event('controllerchange'));
+    expect(sessionStorage.getItem('pwa-refreshing')).toBe('true');
+  });
+});

src/test/vercel-deployment-config.test.ts

@@ -91,12 +91,6 @@ describe("Vercel frontend deployment configuration", () => {
     expect(serviceWorker).toContain("cache.put('/index.html', response.clone())");
   });
 
-  it("does not reload the page when the service worker first takes control", () => {
-    const registration = readProjectFile("src/register-service-worker.ts");
-    expect(registration).toContain("const hadController = navigator.serviceWorker.controller !== null");
-    expect(registration).toContain("if (!hadController) return");
-  });
-
   it.each(["/app", "/app/(.*)", "/login", "/share/(.*)"])(
     "keeps private route %s out of search indexes",
     (source) => {