Fixed testcases

Author: jinidev

src/app/hooks/useServiceWorkerRegistration/index.test.tsx

@@ -32,7 +32,9 @@ describe('useServiceWorkerRegistration', () => {
   it('should register service worker with correct path when service is provided', () => {
     renderHook(() => useServiceWorkerRegistration('mundo'));
 
-    expect(mockRegister).toHaveBeenCalledWith('/mundo/sw.js');
+    expect(mockRegister).toHaveBeenCalledWith('/mundo/sw.js', {
+      scope: '/mundo',
+    });
   });
 
   it('should register service worker for different services', () => {
@@ -43,12 +45,16 @@ describe('useServiceWorkerRegistration', () => {
       },
     );
 
-    expect(mockRegister).toHaveBeenCalledWith('/news/sw.js');
+    expect(mockRegister).toHaveBeenCalledWith('/news/sw.js', {
+      scope: '/news',
+    });
 
     mockRegister.mockClear();
     rerender({ service: 'sport' });
 
-    expect(mockRegister).toHaveBeenCalledWith('/sport/sw.js');
+    expect(mockRegister).toHaveBeenCalledWith('/sport/sw.js', {
+      scope: '/sport',
+    });
   });
 
   it('should not register service worker when service is undefined', () => {
@@ -124,13 +130,17 @@ describe('useServiceWorkerRegistration', () => {
     );
 
     expect(mockRegister).toHaveBeenCalledTimes(1);
-    expect(mockRegister).toHaveBeenCalledWith('/mundo/sw.js');
+    expect(mockRegister).toHaveBeenCalledWith('/mundo/sw.js', {
+      scope: '/mundo',
+    });
 
     mockRegister.mockClear();
     rerender({ service: 'news' });
 
     expect(mockRegister).toHaveBeenCalledTimes(1);
-    expect(mockRegister).toHaveBeenCalledWith('/news/sw.js');
+    expect(mockRegister).toHaveBeenCalledWith('/news/sw.js', {
+      scope: '/news',
+    });
   });
 
   it('should not register again when service prop stays the same', () => {
@@ -159,7 +169,9 @@ describe('useServiceWorkerRegistration', () => {
 
     renderHook(() => useServiceWorkerRegistration('mundo'));
 
-    expect(mockRegister).toHaveBeenCalledWith('/mundo/sw.js');
+    expect(mockRegister).toHaveBeenCalledWith('/mundo/sw.js', {
+      scope: '/mundo',
+    });
 
     await Promise.resolve();
 

src/app/hooks/useServiceWorkerRegistration/index.tsx

@@ -20,13 +20,11 @@ const useServiceWorkerRegistration = (service?: string) => {
       onClient() && 'serviceWorker' in navigator;
 
     if (shouldInstallServiceWorker) {
-      // TODO: scope option to be used once Service-Worker-Allowed header is whitelisted
+      // Scope option to ensure the service worker only controls pages under /{service}
       const result = sw.register(`/${service}/sw.js`, {
         scope: `/${service}`,
       });
 
-      // const result = sw.register(`/${service}/sw.js`);
-
       Promise.resolve(result).catch(err => {
         // eslint-disable-next-line no-console
         console.error('Service worker registration failed:', err);

ws-nextjs-app/next.config.js

@@ -24,8 +24,8 @@ module.exports = {
           },
         ],
       },
-      //* *TODO: */ Service worker headers — commented out, as this will be handled as part of future work in this ticket https://bbc.atlassian.net/browse/WS-2004.
 
+      // Service worker headers to allow scope to be set correctly */
       {
         source: '/:service/sw.js',
         headers: [
@@ -35,7 +35,8 @@ module.exports = {
           },
           {
             key: 'Cache-Control',
-            value: 'public, max-age=0, must-revalidate',
+            value:
+              'public, stale-if-error=6000, stale-while-revalidate=600, max-age=300',
           },
           { key: 'Content-Type', value: 'application/javascript' },
         ],