@dhis2/app-service-offline 2.10.0 → 2.12.0

package/build/es/index.js

@@ -1 +1,5 @@
-export { useOnlineStatus } from './lib/online-status';
+export { OfflineProvider } from './lib/offline-provider';
+export { CacheableSection, useCacheableSection } from './lib/cacheable-section';
+export { useCachedSections } from './lib/cacheable-section-state';
+export { useOnlineStatus } from './lib/online-status';
+export { clearSensitiveCaches } from './lib/clear-sensitive-caches';

package/build/es/lib/__tests__/clear-sensitive-caches.test.js

@@ -0,0 +1,123 @@
+import FDBFactory from 'fake-indexeddb/lib/FDBFactory';
+import { openDB } from 'idb';
+import 'fake-indexeddb/auto';
+import { clearSensitiveCaches, SECTIONS_DB, SECTIONS_STORE } from '../clear-sensitive-caches'; // Mocks for CacheStorage API
+
+const keysMockDefault = jest.fn().mockImplementation(async () => []);
+const deleteMockDefault = jest.fn().mockImplementation(async () => null);
+const cachesDefault = {
+  keys: keysMockDefault,
+  delete: deleteMockDefault
+};
+window.caches = cachesDefault;
+afterEach(() => {
+  window.caches = cachesDefault;
+  jest.clearAllMocks();
+}); // silence debug logs for these tests
+
+const originalDebug = console.debug;
+beforeAll(() => {
+  jest.spyOn(console, 'debug').mockImplementation((...args) => {
+    const pattern = /Clearing sensitive caches/;
+
+    if (typeof args[0] === 'string' && pattern.test(args[0])) {
+      return;
+    }
+
+    return originalDebug.call(console, ...args);
+  });
+});
+afterAll(() => {
+  ;
+  console.debug.mockRestore();
+});
+it('does not fail if there are no caches or no sections-db', () => {
+  return expect(clearSensitiveCaches()).resolves.toBeDefined();
+});
+it('clears potentially sensitive caches', async () => {
+  const keysMock = jest.fn().mockImplementation(async () => ['cache1', 'cache2', 'app-shell']);
+  window.caches = { ...cachesDefault,
+    keys: keysMock
+  };
+  await clearSensitiveCaches();
+  expect(deleteMockDefault).toHaveBeenCalledTimes(3);
+  expect(deleteMockDefault.mock.calls[0][0]).toBe('cache1');
+  expect(deleteMockDefault.mock.calls[1][0]).toBe('cache2');
+  expect(deleteMockDefault.mock.calls[2][0]).toBe('app-shell');
+});
+it('preserves keepable caches', async () => {
+  const keysMock = jest.fn().mockImplementation(async () => ['cache1', 'cache2', 'app-shell', 'other-assets', 'workbox-precache-v2-https://hey.howareya.now/']);
+  window.caches = { ...cachesDefault,
+    keys: keysMock
+  };
+  await clearSensitiveCaches();
+  expect(deleteMockDefault).toHaveBeenCalledTimes(3);
+  expect(deleteMockDefault.mock.calls[0][0]).toBe('cache1');
+  expect(deleteMockDefault.mock.calls[1][0]).toBe('cache2');
+  expect(deleteMockDefault.mock.calls[2][0]).toBe('app-shell');
+  expect(deleteMockDefault).not.toHaveBeenCalledWith('other-assets');
+  expect(deleteMockDefault).not.toHaveBeenCalledWith('workbox-precache-v2-https://hey.howareya.now/');
+});
+describe('clears sections-db', () => {
+  // Test DB
+  function openTestDB(dbName) {
+    // simplified version of app platform openDB logic
+    return openDB(dbName, 1, {
+      upgrade(db) {
+        db.createObjectStore(SECTIONS_STORE, {
+          keyPath: 'sectionId'
+        });
+      }
+
+    });
+  }
+
+  afterEach(() => {
+    // reset indexedDB state
+    window.indexedDB = new FDBFactory();
+  });
+  it('clears sections-db if it exists', async () => {
+    // Open and populate test DB
+    const db = await openTestDB(SECTIONS_DB);
+    await db.put(SECTIONS_STORE, {
+      sectionId: 'id-1',
+      lastUpdated: new Date(),
+      requests: 3
+    });
+    await db.put(SECTIONS_STORE, {
+      sectionId: 'id-2',
+      lastUpdated: new Date(),
+      requests: 3
+    });
+    await clearSensitiveCaches(); // Sections-db should be cleared
+
+    const allSections = await db.getAll(SECTIONS_STORE);
+    expect(allSections).toHaveLength(0);
+  });
+  it("doesn't clear sections-db if it doesn't exist and doesn't open a new one", async () => {
+    const openMock = jest.fn();
+    window.indexedDB.open = openMock;
+    expect(await indexedDB.databases()).not.toContain(SECTIONS_DB);
+    await clearSensitiveCaches();
+    expect(openMock).not.toHaveBeenCalled();
+    return expect(await indexedDB.databases()).not.toContain(SECTIONS_DB);
+  });
+  it("doesn't handle IDB if 'databases' property is not on window.indexedDB", async () => {
+    // Open DB -- 'indexedDB.open' _would_ get called in this test
+    // if 'databases' property exists
+    await openTestDB(SECTIONS_DB);
+    const openMock = jest.fn();
+    window.indexedDB.open = openMock; // Remove 'databases' from indexedDB prototype for this test
+    // (simulates Firefox environment)
+
+    const idbProto = Object.getPrototypeOf(window.indexedDB);
+    const databases = idbProto.databases;
+    delete idbProto.databases;
+    expect('databases' in window.indexedDB).toBe(false);
+    await expect(clearSensitiveCaches()).resolves.toBeDefined();
+    expect(openMock).not.toHaveBeenCalled(); // Restore indexedDB prototype for later tests
+
+    idbProto.databases = databases;
+    expect('databases' in window.indexedDB).toBe(true);
+  });
+});

package/build/es/lib/__tests__/offline-provider.test.js

@@ -0,0 +1,117 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { mockOfflineInterface } from '../../utils/test-mocks';
+import { useCacheableSection, CacheableSection } from '../cacheable-section';
+import { useCachedSections } from '../cacheable-section-state';
+import { OfflineProvider } from '../offline-provider'; // Suppress 'act' warning for these tests
+
+const originalError = console.error;
+beforeEach(() => {
+  jest.spyOn(console, 'error').mockImplementation((...args) => {
+    const pattern = /Warning: An update to .* inside a test was not wrapped in act/;
+
+    if (typeof args[0] === 'string' && pattern.test(args[0])) {
+      return;
+    }
+
+    return originalError.call(console, ...args);
+  });
+});
+afterEach(() => {
+  jest.clearAllMocks() // syntax needed to appease typescript
+  ;
+  console.error.mockRestore();
+});
+describe('Testing offline provider', () => {
+  it('Should render without failing', () => {
+    render( /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: mockOfflineInterface
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": "test-div"
+    })));
+    expect(screen.getByTestId('test-div')).toBeInTheDocument();
+  });
+  it('Should initialize the offline interface with an update prompt', () => {
+    render( /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: mockOfflineInterface
+    }));
+    expect(mockOfflineInterface.init).toHaveBeenCalledTimes(1); // Expect to have been called with a 'promptUpdate' function
+
+    const arg = mockOfflineInterface.init.mock.calls[0][0];
+    expect(arg).toHaveProperty('promptUpdate');
+    expect(typeof arg['promptUpdate']).toBe('function');
+  });
+  it('Should sync cached sections with indexedDB', async () => {
+    const testOfflineInterface = { ...mockOfflineInterface,
+      getCachedSections: jest.fn().mockResolvedValue([{
+        sectionId: '1',
+        lastUpdated: 'date1'
+      }, {
+        sectionId: '2',
+        lastUpdated: 'date2'
+      }])
+    };
+
+    const CachedSections = () => {
+      const {
+        cachedSections
+      } = useCachedSections();
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "sections"
+      }, JSON.stringify(cachedSections));
+    };
+
+    render( /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: testOfflineInterface
+    }, /*#__PURE__*/React.createElement(CachedSections, null)));
+    const {
+      getByTestId
+    } = screen;
+    expect(testOfflineInterface.getCachedSections).toHaveBeenCalled();
+    await waitFor(() => getByTestId('sections').textContent !== '{}');
+    const textContent = JSON.parse(getByTestId('sections').textContent || '');
+    expect(textContent).toEqual({
+      1: {
+        lastUpdated: 'date1'
+      },
+      2: {
+        lastUpdated: 'date2'
+      }
+    });
+  });
+  it('Should provide the relevant contexts to consumers', () => {
+    const TestConsumer = () => {
+      useCacheableSection('id');
+      return /*#__PURE__*/React.createElement(CacheableSection, {
+        loadingMask: /*#__PURE__*/React.createElement("div", null),
+        id: 'id'
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": "test-div"
+      }));
+    };
+
+    render( /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: mockOfflineInterface
+    }, /*#__PURE__*/React.createElement(TestConsumer, null)));
+    expect(screen.getByTestId('test-div')).toBeInTheDocument();
+  });
+  it('Should render without failing when no offlineInterface is provided', () => {
+    render( /*#__PURE__*/React.createElement(OfflineProvider, null, /*#__PURE__*/React.createElement("div", {
+      "data-testid": "test-div"
+    })));
+    expect(screen.getByTestId('test-div')).toBeInTheDocument();
+  });
+  it('Should render without failing if PWA is not enabled', () => {
+    const testOfflineInterface = { ...mockOfflineInterface,
+      pwaEnabled: false
+    };
+    render( /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: testOfflineInterface
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": "test-div"
+    }))); // Init should still be called - see comments in offline-provider.js
+
+    expect(testOfflineInterface.init).toHaveBeenCalled();
+    expect(screen.getByTestId('test-div')).toBeInTheDocument();
+  });
+});

package/build/es/lib/__tests__/use-cacheable-section.test.js

@@ -0,0 +1,218 @@
+/* eslint-disable react/display-name, react/prop-types */
+import { renderHook, act } from '@testing-library/react-hooks';
+import React from 'react';
+import { errorRecordingMock, failedMessageRecordingMock, mockOfflineInterface } from '../../utils/test-mocks';
+import { useCacheableSection } from '../cacheable-section';
+import { OfflineProvider } from '../offline-provider'; // Suppress 'act' warning for these tests
+
+const originalError = console.error;
+beforeEach(() => {
+  jest.spyOn(console, 'error').mockImplementation((...args) => {
+    const pattern = /Warning: An update to .* inside a test was not wrapped in act/;
+
+    if (typeof args[0] === 'string' && pattern.test(args[0])) {
+      return;
+    }
+
+    return originalError.call(console, ...args);
+  });
+});
+afterEach(() => {
+  jest.clearAllMocks() // This syntax appeases typescript:
+  ;
+  console.error.mockRestore();
+});
+it('renders in the default state initially', () => {
+  const {
+    result
+  } = renderHook(() => useCacheableSection('one'), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: mockOfflineInterface
+    }, children)
+  });
+  expect(result.current.recordingState).toBe('default');
+  expect(result.current.isCached).toBe(false);
+  expect(result.current.lastUpdated).toBeUndefined();
+});
+it('handles a successful recording', async done => {
+  const [sectionId, timeoutDelay] = ['one', 1234];
+  const testOfflineInterface = { ...mockOfflineInterface,
+    getCachedSections: jest.fn().mockResolvedValueOnce([]).mockResolvedValueOnce([{
+      sectionId: sectionId,
+      lastUpdated: new Date()
+    }])
+  };
+  const {
+    result,
+    waitFor
+  } = renderHook(() => useCacheableSection(sectionId), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: testOfflineInterface
+    }, children)
+  });
+
+  const assertRecordingStarted = () => {
+    expect(result.current.recordingState).toBe('recording');
+  };
+
+  const assertRecordingCompleted = async () => {
+    expect(result.current.recordingState).toBe('default'); // Test that 'isCached' gets updated
+
+    expect(testOfflineInterface.getCachedSections).toBeCalledTimes(2);
+    await waitFor(() => result.current.isCached === true);
+    expect(result.current.isCached).toBe(true);
+    expect(result.current.lastUpdated).toBeInstanceOf(Date); // If this cb is not called, test should time out and fail
+
+    done();
+  };
+
+  await act(async () => {
+    await result.current.startRecording({
+      onStarted: assertRecordingStarted,
+      onCompleted: assertRecordingCompleted,
+      recordingTimeoutDelay: timeoutDelay
+    });
+  }); // At this stage, recording should be 'pending'
+
+  expect(result.current.recordingState).toBe('pending'); // Check correct options sent to offline interface
+
+  const options = mockOfflineInterface.startRecording.mock.calls[0][0];
+  expect(options.sectionId).toBe(sectionId);
+  expect(options.recordingTimeoutDelay).toBe(timeoutDelay);
+  expect(typeof options.onStarted).toBe('function');
+  expect(typeof options.onCompleted).toBe('function');
+  expect(typeof options.onError).toBe('function'); // Make sure all async assertions are called
+
+  expect.assertions(11);
+});
+it('handles a recording that encounters an error', async done => {
+  // Suppress the expected error from console (in addition to 'act' warning)
+  jest.spyOn(console, 'error').mockImplementation((...args) => {
+    const actPattern = /Warning: An update to .* inside a test was not wrapped in act/;
+    const errPattern = /Error during recording/;
+    const matchesPattern = actPattern.test(args[0]) || errPattern.test(args[0]);
+
+    if (typeof args[0] === 'string' && matchesPattern) {
+      return;
+    }
+
+    return originalError.call(console, ...args);
+  });
+  const testOfflineInterface = { ...mockOfflineInterface,
+    startRecording: errorRecordingMock
+  };
+  const {
+    result
+  } = renderHook(() => useCacheableSection('one'), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: testOfflineInterface
+    }, children)
+  });
+
+  const assertRecordingStarted = () => {
+    expect(result.current.recordingState).toBe('recording');
+  };
+
+  const assertRecordingError = error => {
+    expect(result.current.recordingState).toBe('error');
+    expect(error.message).toMatch(/test err/); // see errorRecordingMock
+
+    expect(console.error).toHaveBeenCalledWith('Error during recording:', error); // Expect only one call, from initialization:
+
+    expect(mockOfflineInterface.getCachedSections).toBeCalledTimes(1); // If this cb is not called, test should time out and fail
+
+    done();
+  };
+
+  await act(async () => {
+    await result.current.startRecording({
+      onStarted: assertRecordingStarted,
+      onError: assertRecordingError
+    });
+  }); // At this stage, recording should be 'pending'
+
+  expect(result.current.recordingState).toBe('pending'); // Make sure all async assertions are called
+
+  expect.assertions(6);
+});
+it('handles an error starting the recording', async () => {
+  const testOfflineInterface = { ...mockOfflineInterface,
+    startRecording: failedMessageRecordingMock
+  };
+  const {
+    result
+  } = renderHook(() => useCacheableSection('err'), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: testOfflineInterface
+    }, children)
+  });
+  await expect(result.current.startRecording()).rejects.toThrow('Failed message' // from failedMessageRecordingMock
+  );
+});
+it('handles remove and updates sections', async () => {
+  const sectionId = 'one';
+  const testOfflineInterface = { ...mockOfflineInterface,
+    getCachedSections: jest.fn().mockResolvedValueOnce([{
+      sectionId: sectionId,
+      lastUpdated: new Date()
+    }]).mockResolvedValueOnce([])
+  };
+  const {
+    result,
+    waitFor
+  } = renderHook(() => useCacheableSection(sectionId), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: testOfflineInterface
+    }, children)
+  }); // Wait for state to sync with indexedDB
+
+  await waitFor(() => result.current.isCached === true);
+  let success;
+  await act(async () => {
+    success = await result.current.remove();
+  });
+  expect(success).toBe(true); // Test that 'isCached' gets updated
+
+  expect(testOfflineInterface.getCachedSections).toBeCalledTimes(2);
+  await waitFor(() => result.current.isCached === false);
+  expect(result.current.isCached).toBe(false);
+  expect(result.current.lastUpdated).toBeUndefined();
+});
+it('handles a change in ID', async () => {
+  const testOfflineInterface = { ...mockOfflineInterface,
+    getCachedSections: jest.fn().mockResolvedValue([{
+      sectionId: 'id-one',
+      lastUpdated: new Date()
+    }])
+  };
+  const {
+    result,
+    waitFor,
+    rerender
+  } = renderHook((...args) => useCacheableSection(...args), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/React.createElement(OfflineProvider, {
+      offlineInterface: testOfflineInterface
+    }, children),
+    initialProps: 'id-one'
+  }); // Wait for state to sync with indexedDB
+
+  await waitFor(() => result.current.isCached === true);
+  rerender('id-two'); // Test that 'isCached' gets updated
+  // expect(testOfflineInterface.getCachedSections).toBeCalledTimes(2)
+
+  await waitFor(() => result.current.isCached === false);
+  expect(result.current.isCached).toBe(false);
+  expect(result.current.lastUpdated).toBeUndefined();
+});