@dhis2/app-service-offline 2.10.0 → 2.12.0

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

@@ -0,0 +1,127 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _testMocks = require("../../utils/test-mocks");
+
+var _cacheableSection = require("../cacheable-section");
+
+var _cacheableSectionState = require("../cacheable-section-state");
+
+var _offlineProvider = require("../offline-provider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// 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', () => {
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_offlineProvider.OfflineProvider, {
+      offlineInterface: _testMocks.mockOfflineInterface
+    }, /*#__PURE__*/_react2.default.createElement("div", {
+      "data-testid": "test-div"
+    })));
+    expect(_react.screen.getByTestId('test-div')).toBeInTheDocument();
+  });
+  it('Should initialize the offline interface with an update prompt', () => {
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_offlineProvider.OfflineProvider, {
+      offlineInterface: _testMocks.mockOfflineInterface
+    }));
+    expect(_testMocks.mockOfflineInterface.init).toHaveBeenCalledTimes(1); // Expect to have been called with a 'promptUpdate' function
+
+    const arg = _testMocks.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 = { ..._testMocks.mockOfflineInterface,
+      getCachedSections: jest.fn().mockResolvedValue([{
+        sectionId: '1',
+        lastUpdated: 'date1'
+      }, {
+        sectionId: '2',
+        lastUpdated: 'date2'
+      }])
+    };
+
+    const CachedSections = () => {
+      const {
+        cachedSections
+      } = (0, _cacheableSectionState.useCachedSections)();
+      return /*#__PURE__*/_react2.default.createElement("div", {
+        "data-testid": "sections"
+      }, JSON.stringify(cachedSections));
+    };
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_offlineProvider.OfflineProvider, {
+      offlineInterface: testOfflineInterface
+    }, /*#__PURE__*/_react2.default.createElement(CachedSections, null)));
+    const {
+      getByTestId
+    } = _react.screen;
+    expect(testOfflineInterface.getCachedSections).toHaveBeenCalled();
+    await (0, _react.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 = () => {
+      (0, _cacheableSection.useCacheableSection)('id');
+      return /*#__PURE__*/_react2.default.createElement(_cacheableSection.CacheableSection, {
+        loadingMask: /*#__PURE__*/_react2.default.createElement("div", null),
+        id: 'id'
+      }, /*#__PURE__*/_react2.default.createElement("div", {
+        "data-testid": "test-div"
+      }));
+    };
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_offlineProvider.OfflineProvider, {
+      offlineInterface: _testMocks.mockOfflineInterface
+    }, /*#__PURE__*/_react2.default.createElement(TestConsumer, null)));
+    expect(_react.screen.getByTestId('test-div')).toBeInTheDocument();
+  });
+  it('Should render without failing when no offlineInterface is provided', () => {
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_offlineProvider.OfflineProvider, null, /*#__PURE__*/_react2.default.createElement("div", {
+      "data-testid": "test-div"
+    })));
+    expect(_react.screen.getByTestId('test-div')).toBeInTheDocument();
+  });
+  it('Should render without failing if PWA is not enabled', () => {
+    const testOfflineInterface = { ..._testMocks.mockOfflineInterface,
+      pwaEnabled: false
+    };
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_offlineProvider.OfflineProvider, {
+      offlineInterface: testOfflineInterface
+    }, /*#__PURE__*/_react2.default.createElement("div", {
+      "data-testid": "test-div"
+    }))); // Init should still be called - see comments in offline-provider.js
+
+    expect(testOfflineInterface.init).toHaveBeenCalled();
+    expect(_react.screen.getByTestId('test-div')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,227 @@
+"use strict";
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _testMocks = require("../../utils/test-mocks");
+
+var _cacheableSection = require("../cacheable-section");
+
+var _offlineProvider = require("../offline-provider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable react/display-name, react/prop-types */
+// 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
+  } = (0, _reactHooks.renderHook)(() => (0, _cacheableSection.useCacheableSection)('one'), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_offlineProvider.OfflineProvider, {
+      offlineInterface: _testMocks.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 = { ..._testMocks.mockOfflineInterface,
+    getCachedSections: jest.fn().mockResolvedValueOnce([]).mockResolvedValueOnce([{
+      sectionId: sectionId,
+      lastUpdated: new Date()
+    }])
+  };
+  const {
+    result,
+    waitFor
+  } = (0, _reactHooks.renderHook)(() => (0, _cacheableSection.useCacheableSection)(sectionId), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_offlineProvider.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 (0, _reactHooks.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 = _testMocks.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 = { ..._testMocks.mockOfflineInterface,
+    startRecording: _testMocks.errorRecordingMock
+  };
+  const {
+    result
+  } = (0, _reactHooks.renderHook)(() => (0, _cacheableSection.useCacheableSection)('one'), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_offlineProvider.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(_testMocks.mockOfflineInterface.getCachedSections).toBeCalledTimes(1); // If this cb is not called, test should time out and fail
+
+    done();
+  };
+
+  await (0, _reactHooks.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 = { ..._testMocks.mockOfflineInterface,
+    startRecording: _testMocks.failedMessageRecordingMock
+  };
+  const {
+    result
+  } = (0, _reactHooks.renderHook)(() => (0, _cacheableSection.useCacheableSection)('err'), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_offlineProvider.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 = { ..._testMocks.mockOfflineInterface,
+    getCachedSections: jest.fn().mockResolvedValueOnce([{
+      sectionId: sectionId,
+      lastUpdated: new Date()
+    }]).mockResolvedValueOnce([])
+  };
+  const {
+    result,
+    waitFor
+  } = (0, _reactHooks.renderHook)(() => (0, _cacheableSection.useCacheableSection)(sectionId), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_offlineProvider.OfflineProvider, {
+      offlineInterface: testOfflineInterface
+    }, children)
+  }); // Wait for state to sync with indexedDB
+
+  await waitFor(() => result.current.isCached === true);
+  let success;
+  await (0, _reactHooks.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 = { ..._testMocks.mockOfflineInterface,
+    getCachedSections: jest.fn().mockResolvedValue([{
+      sectionId: 'id-one',
+      lastUpdated: new Date()
+    }])
+  };
+  const {
+    result,
+    waitFor,
+    rerender
+  } = (0, _reactHooks.renderHook)((...args) => (0, _cacheableSection.useCacheableSection)(...args), {
+    wrapper: ({
+      children
+    }) => /*#__PURE__*/_react.default.createElement(_offlineProvider.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();
+});

package/build/cjs/lib/cacheable-section-state.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCacheableSectionStore = createCacheableSectionStore;
+exports.CacheableSectionProvider = CacheableSectionProvider;
+exports.useRecordingState = useRecordingState;
+exports.useCachedSections = useCachedSections;
+exports.useCachedSection = useCachedSection;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _globalStateService = require("./global-state-service");
+
+var _offlineInterface = require("./offline-interface");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Helper that transforms an array of cached section objects from the IndexedDB
+ * into an object of values keyed by section ID
+ *
+ * @param {Array} list - An array of section objects
+ * @returns {Object} An object of sections, keyed by ID
+ */
+function getSectionsById(sectionsArray) {
+  return sectionsArray.reduce((result, {
+    sectionId,
+    lastUpdated
+  }) => ({ ...result,
+    [sectionId]: {
+      lastUpdated
+    }
+  }), {});
+}
+/**
+ * Create a store for Cacheable Section state.
+ * Expected to be used in app adapter
+ */
+
+
+function createCacheableSectionStore() {
+  const initialState = {
+    recordingStates: {},
+    cachedSections: {}
+  };
+  return (0, _globalStateService.createStore)(initialState);
+}
+/**
+ * Helper hook that returns a value that will persist between renders but makes
+ * sure to only set its initial state once.
+ * See https://gist.github.com/amcgee/42bb2fa6d5f79e607f00e6dccc733482
+ */
+
+
+function useConst(factory) {
+  const ref = _react.default.useRef(null);
+
+  if (ref.current === null) {
+    ref.current = factory();
+  }
+
+  return ref.current;
+}
+/**
+ * Provides context for a global state context which will track cached
+ * sections' status and cacheable sections' recording states, which will
+ * determine how that component will render. The provider will be a part of
+ * the OfflineProvider.
+ */
+
+
+function CacheableSectionProvider({
+  children
+}) {
+  const offlineInterface = (0, _offlineInterface.useOfflineInterface)();
+  const store = useConst(createCacheableSectionStore); // On load, get sections and add to store
+
+  _react.default.useEffect(() => {
+    if (offlineInterface) {
+      offlineInterface.getCachedSections().then(sections => {
+        store.mutate(state => ({ ...state,
+          cachedSections: getSectionsById(sections)
+        }));
+      });
+    }
+  }, [store, offlineInterface]);
+
+  return /*#__PURE__*/_react.default.createElement(_globalStateService.GlobalStateProvider, {
+    store: store
+  }, children);
+}
+
+CacheableSectionProvider.propTypes = {
+  children: _propTypes.default.node
+};
+
+/**
+ * Uses an optimized global state to manage 'recording state' values without
+ * unnecessarily rerendering all consuming components
+ *
+ * @param {String} id - ID of the cacheable section to track
+ * @returns {Object} { recordingState: String, setRecordingState: Function, removeRecordingState: Function}
+ */
+function useRecordingState(id) {
+  const [recordingState] = (0, _globalStateService.useGlobalState)(state => state.recordingStates[id]);
+  const setRecordingState = (0, _globalStateService.useGlobalStateMutation)(newState => state => ({ ...state,
+    recordingStates: { ...state.recordingStates,
+      [id]: newState
+    }
+  }));
+  const removeRecordingState = (0, _globalStateService.useGlobalStateMutation)(() => state => {
+    const recordingStates = { ...state.recordingStates
+    };
+    delete recordingStates[id];
+    return { ...state,
+      recordingStates
+    };
+  });
+  return {
+    recordingState,
+    setRecordingState,
+    removeRecordingState
+  };
+}
+/**
+ * Returns a function that syncs cached sections in the global state
+ * with IndexedDB, so that IndexedDB is the single source of truth
+ *
+ * @returns {Function} syncCachedSections
+ */
+
+
+function useSyncCachedSections() {
+  const offlineInterface = (0, _offlineInterface.useOfflineInterface)();
+  const setCachedSections = (0, _globalStateService.useGlobalStateMutation)(cachedSections => state => ({ ...state,
+    cachedSections
+  }));
+  return async function syncCachedSections() {
+    const sections = await offlineInterface.getCachedSections();
+    setCachedSections(getSectionsById(sections));
+  };
+}
+
+/**
+ * Uses global state to manage an object of cached sections' statuses
+ *
+ * @returns {Object} { cachedSections: Object, removeSection: Function }
+ */
+function useCachedSections() {
+  const [cachedSections] = (0, _globalStateService.useGlobalState)(state => state.cachedSections);
+  const syncCachedSections = useSyncCachedSections();
+  const offlineInterface = (0, _offlineInterface.useOfflineInterface)();
+  /**
+   * Uses offline interface to remove a section from IndexedDB and Cache
+   * Storage.
+   *
+   * Returns a promise that resolves to `true` if a section is found and
+   * deleted, or `false` if asection with the specified ID does not exist.
+   */
+
+  async function removeById(id) {
+    const success = await offlineInterface.removeSection(id);
+
+    if (success) {
+      await syncCachedSections();
+    }
+
+    return success;
+  }
+
+  return {
+    cachedSections,
+    removeById,
+    syncCachedSections
+  };
+}
+
+/**
+ * Uses global state to manage the cached status of just one section, which
+ * prevents unnecessary rerenders of consuming components
+ *
+ * @param {String} id
+ * @returns {Object} { lastUpdated: Date, remove: Function }
+ */
+function useCachedSection(id) {
+  const [status] = (0, _globalStateService.useGlobalState)(state => state.cachedSections[id]);
+  const syncCachedSections = useSyncCachedSections();
+  const offlineInterface = (0, _offlineInterface.useOfflineInterface)();
+  const lastUpdated = status && status.lastUpdated;
+  /**
+   * Uses offline interface to remove a section from IndexedDB and Cache
+   * Storage.
+   *
+   * Returns `true` if a section is found and deleted, or `false` if a
+   * section with the specified ID does not exist.
+   */
+
+  async function remove() {
+    const success = await offlineInterface.removeSection(id);
+
+    if (success) {
+      await syncCachedSections();
+    }
+
+    return success;
+  }
+
+  return {
+    lastUpdated,
+    isCached: !!lastUpdated,
+    remove,
+    syncCachedSections
+  };
+}