@dhis2/app-service-offline 2.10.0 → 2.12.0

package/build/cjs/types.js

@@ -1,2 +1 @@
-// todo
 "use strict";

package/build/cjs/utils/__tests__/render-counter.test.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Rerenderer = void 0;
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _renderCounter = require("../render-counter");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const renderCounts = {};
+
+const Rerenderer = () => {
+  const [, setState] = _react2.default.useState(true);
+
+  const toggleState = () => setState(prevState => !prevState);
+
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("button", {
+    onClick: toggleState,
+    role: "button"
+  }), /*#__PURE__*/_react2.default.createElement(_renderCounter.RenderCounter, {
+    id: 'rc1',
+    countsObj: renderCounts
+  }));
+};
+
+exports.Rerenderer = Rerenderer;
+afterEach(() => {
+  (0, _renderCounter.resetRenderCounts)(renderCounts);
+});
+it('increments the counter when rerendered', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Rerenderer, null));
+  const {
+    getByTestId,
+    getByRole
+  } = _react.screen;
+  expect(getByTestId('rc1')).toHaveTextContent('1');
+  (0, _react.act)(() => {
+    _react.fireEvent.click(getByRole('button'));
+  });
+  expect(getByTestId('rc1')).toHaveTextContent('2');
+  (0, _react.act)(() => {
+    _react.fireEvent.click(getByRole('button'));
+  });
+  expect(getByTestId('rc1')).toHaveTextContent('3');
+});
+it('resets the render counter successfully', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Rerenderer, null));
+  expect(_react.screen.getByTestId('rc1')).toHaveTextContent('1');
+});

package/build/cjs/utils/render-counter.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resetRenderCounts = exports.RenderCounter = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const RenderCounter = ({
+  id,
+  countsObj
+}) => {
+  if (!(id in countsObj)) countsObj[id] = 0;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": id
+  }, ++countsObj[id]);
+};
+
+exports.RenderCounter = RenderCounter;
+
+const resetRenderCounts = renderCounts => Object.keys(renderCounts).forEach(key => renderCounts[key] = 0);
+
+exports.resetRenderCounts = resetRenderCounts;

package/build/cjs/utils/test-mocks.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockOfflineInterface = exports.failedMessageRecordingMock = exports.errorRecordingMock = exports.successfulRecordingMock = void 0;
+const successfulRecordingMock = jest.fn().mockImplementation(async ({
+  onStarted,
+  onCompleted
+} = {}) => {
+  // in 100ms, call 'onStarted' callback (allows 'pending' state)
+  if (onStarted) setTimeout(onStarted, 100); // in 200ms, call 'onCompleted' callback
+
+  if (onCompleted) setTimeout(onCompleted, 200); // resolve
+
+  return Promise.resolve();
+});
+exports.successfulRecordingMock = successfulRecordingMock;
+const errorRecordingMock = jest.fn().mockImplementation(({
+  onStarted,
+  onError
+} = {}) => {
+  // in 100ms, call 'onStarted' callback (allows 'pending' state)
+  if (onStarted) setTimeout(onStarted, 100); // in 200ms, call 'onError'
+
+  setTimeout(() => onError(new Error('test err')), 200); // resolve to signal successful initiation
+
+  return Promise.resolve();
+});
+exports.errorRecordingMock = errorRecordingMock;
+const failedMessageRecordingMock = jest.fn().mockRejectedValue(new Error('Failed message'));
+exports.failedMessageRecordingMock = failedMessageRecordingMock;
+const mockOfflineInterface = {
+  pwaEnabled: true,
+  init: jest.fn(),
+  startRecording: successfulRecordingMock,
+  getCachedSections: jest.fn().mockResolvedValue([]),
+  removeSection: jest.fn().mockResolvedValue(true)
+};
+exports.mockOfflineInterface = mockOfflineInterface;

package/build/es/__tests__/integration.test.js

@@ -0,0 +1,327 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { useCacheableSection, CacheableSection } from '../lib/cacheable-section';
+import { OfflineProvider } from '../lib/offline-provider';
+import { RenderCounter, resetRenderCounts } from '../utils/render-counter';
+import { errorRecordingMock, failedMessageRecordingMock, mockOfflineInterface } from '../utils/test-mocks';
+const renderCounts = {};
+
+const identity = arg => arg;
+
+const TestControls = ({
+  id,
+  makeRecordingHandler = identity
+}) => {
+  const {
+    startRecording,
+    remove,
+    isCached,
+    lastUpdated,
+    recordingState
+  } = useCacheableSection(id);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RenderCounter, {
+    id: "controls-rc-".concat(id),
+    countsObj: renderCounts
+  }), /*#__PURE__*/React.createElement("button", {
+    "data-testid": "start-recording-".concat(id),
+    onClick: makeRecordingHandler(startRecording)
+  }), /*#__PURE__*/React.createElement("button", {
+    "data-testid": "remove-".concat(id),
+    onClick: () => {
+      remove();
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-testid": "is-cached-".concat(id)
+  }, isCached ? 'yes' : 'no'), /*#__PURE__*/React.createElement("div", {
+    "data-testid": "last-updated-".concat(id)
+  }, lastUpdated || 'never'), /*#__PURE__*/React.createElement("div", {
+    "data-testid": "recording-state-".concat(id)
+  }, recordingState));
+};
+
+const TestSection = ({
+  id,
+  children
+}) => /*#__PURE__*/React.createElement(CacheableSection, {
+  id: id,
+  loadingMask: /*#__PURE__*/React.createElement("div", {
+    "data-testid": "loading-mask-".concat(id)
+  })
+}, /*#__PURE__*/React.createElement(RenderCounter, {
+  id: "section-rc-".concat(id),
+  countsObj: renderCounts
+}), children);
+
+const TestSingleSection = props => {
+  // Props are spread so they can be overwritten
+  return /*#__PURE__*/React.createElement(OfflineProvider, _extends({
+    offlineInterface: mockOfflineInterface
+  }, props), /*#__PURE__*/React.createElement(TestControls, _extends({
+    id: '1'
+  }, props)), /*#__PURE__*/React.createElement(TestSection, _extends({
+    id: '1'
+  }, props)));
+}; // Suppress 'act' warning for these tests
+
+
+const originalError = console.error;
+beforeEach(() => {
+  // This is done before each because the 'recording error' test uses its own
+  // spy on console.error
+  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();
+  resetRenderCounts(renderCounts);
+});
+describe('Coordination between useCacheableSection and CacheableSection', () => {
+  it('renders in the default state initially', async () => {
+    render( /*#__PURE__*/React.createElement(TestSingleSection, null));
+    const {
+      getByTestId
+    } = screen;
+    expect(getByTestId(/recording-state/)).toHaveTextContent('default');
+    expect(getByTestId(/is-cached/)).toHaveTextContent('no');
+    expect(getByTestId(/last-updated/)).toHaveTextContent('never');
+    expect(getByTestId(/section-rc/)).toBeInTheDocument();
+    expect(getByTestId(/controls-rc/)).toBeInTheDocument();
+  });
+  it('handles a successful recording', async done => {
+    const {
+      getByTestId,
+      queryByTestId
+    } = screen;
+
+    const onStarted = () => {
+      expect(getByTestId(/recording-state/)).toHaveTextContent('recording');
+      expect(getByTestId(/loading-mask/)).toBeInTheDocument();
+      expect(getByTestId(/section-rc/)).toBeInTheDocument();
+    };
+
+    const onCompleted = () => {
+      expect(getByTestId(/recording-state/)).toHaveTextContent('default');
+      expect(queryByTestId(/loading-mask/)).not.toBeInTheDocument();
+      done();
+    };
+
+    const recordingOptions = {
+      onStarted,
+      onCompleted
+    };
+
+    const makeRecordingHandler = startRecording => {
+      return () => startRecording(recordingOptions);
+    };
+
+    render( /*#__PURE__*/React.createElement(TestSingleSection, {
+      makeRecordingHandler: makeRecordingHandler
+    }));
+    await act(async () => {
+      fireEvent.click(getByTestId(/start-recording/));
+    }); // At this stage, should be pending
+
+    expect(getByTestId(/recording-state/)).toHaveTextContent('pending');
+    expect(queryByTestId(/section-rc/)).not.toBeInTheDocument();
+    expect.assertions(7);
+  });
+  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 {
+      getByTestId,
+      queryByTestId
+    } = screen;
+    const testOfflineInterface = { ...mockOfflineInterface,
+      startRecording: errorRecordingMock
+    };
+
+    const onError = () => {
+      expect(getByTestId(/recording-state/)).toHaveTextContent('error');
+      expect(queryByTestId(/loading-mask/)).not.toBeInTheDocument();
+      expect(getByTestId(/section-rc/)).toBeInTheDocument();
+      done();
+    };
+
+    const makeRecordingHandler = startRecording => {
+      return () => startRecording({
+        onError
+      });
+    };
+
+    render( /*#__PURE__*/React.createElement(TestSingleSection, {
+      offlineInterface: testOfflineInterface,
+      makeRecordingHandler: makeRecordingHandler
+    }));
+    await act(async () => {
+      fireEvent.click(getByTestId(/start-recording/));
+    });
+    expect.assertions(3);
+  }); // ! After bumping testing-library versions, something about this test
+  // ! causes the following ones to mysteriously fail 😤
+
+  it.skip('handles an error starting the recording', async done => {
+    const {
+      getByTestId
+    } = screen;
+    const testOfflineInterface = { ...mockOfflineInterface,
+      startRecording: failedMessageRecordingMock
+    };
+    const onStarted = jest.fn();
+
+    const testErrCondition = err => {
+      expect(err.message).toBe('Failed message'); // from the mock
+
+      expect(onStarted).not.toHaveBeenCalled();
+      expect(getByTestId(/recording-state/)).toHaveTextContent('default');
+      done();
+    };
+
+    const makeRecordingHandler = startRecording => {
+      return () => startRecording({
+        onStarted
+      }).catch(testErrCondition);
+    };
+
+    render( /*#__PURE__*/React.createElement(TestSingleSection, {
+      offlineInterface: testOfflineInterface,
+      makeRecordingHandler: makeRecordingHandler
+    }));
+    await act(async () => {
+      fireEvent.click(getByTestId(/start-recording/));
+    });
+  });
+});
+
+const TwoTestSections = props =>
+/*#__PURE__*/
+// Props are spread so they can be overwritten (but only on one section)
+React.createElement(OfflineProvider, _extends({
+  offlineInterface: mockOfflineInterface
+}, props), /*#__PURE__*/React.createElement(TestControls, _extends({
+  id: '1'
+}, props)), /*#__PURE__*/React.createElement(TestSection, _extends({
+  id: '1'
+}, props)), /*#__PURE__*/React.createElement(TestControls, {
+  id: '2'
+}), /*#__PURE__*/React.createElement(TestSection, {
+  id: '2'
+})); // test that other sections don't rerender when one section does
+
+
+describe('Performant state management', () => {
+  it('establishes a pre-recording render count', () => {
+    render( /*#__PURE__*/React.createElement(TwoTestSections, null));
+    const {
+      getByTestId
+    } = screen; // Two renders for controls: undefined and 'default' states
+
+    expect(getByTestId('controls-rc-1')).toHaveTextContent('2');
+    expect(getByTestId('controls-rc-2')).toHaveTextContent('2'); // Just one render for sections
+
+    expect(getByTestId('section-rc-1')).toHaveTextContent('1');
+    expect(getByTestId('section-rc-2')).toHaveTextContent('1');
+  });
+  it('isolates rerenders from other consumers', async done => {
+    const {
+      getByTestId
+    } = screen; // Make assertions
+
+    const onCompleted = () => {
+      // Before refactor: controls components have 6 renders EACH, and
+      // sections 1 and 2 have 2 and 1 renders, respectively
+      // After refactor, render counts for section that recorded:
+      expect(getByTestId('controls-rc-1')).toHaveTextContent('5');
+      expect(getByTestId('section-rc-1')).toHaveTextContent('2'); // Section that did not record (should be same as pre-recording):
+
+      expect(getByTestId('controls-rc-2')).toHaveTextContent('2');
+      expect(getByTestId('section-rc-2')).toHaveTextContent('1');
+      done();
+    };
+
+    const makeRecordingHandler = startRecording => () => startRecording({
+      onCompleted
+    });
+
+    render( /*#__PURE__*/React.createElement(TwoTestSections, {
+      makeRecordingHandler: makeRecordingHandler
+    }));
+    await act(async () => {
+      fireEvent.click(getByTestId('start-recording-1'));
+    });
+    expect.assertions(4);
+  });
+});
+describe('useCacheableSection can be used inside a child of CacheableSection', () => {
+  const ChildTest = props => {
+    // Props are spread so they can be overwritten
+    return /*#__PURE__*/React.createElement(OfflineProvider, _extends({
+      offlineInterface: mockOfflineInterface
+    }, props), /*#__PURE__*/React.createElement(TestSection, _extends({
+      id: '1'
+    }, props), /*#__PURE__*/React.createElement(TestControls, _extends({
+      id: '1'
+    }, props))));
+  };
+
+  it('handles a successful recording', async done => {
+    const {
+      getByTestId,
+      queryByTestId
+    } = screen;
+
+    const onStarted = () => {
+      expect(getByTestId(/recording-state/)).toHaveTextContent('recording');
+      expect(getByTestId(/loading-mask/)).toBeInTheDocument();
+      expect(getByTestId(/section-rc/)).toBeInTheDocument();
+    };
+
+    const onCompleted = () => {
+      expect(getByTestId(/recording-state/)).toHaveTextContent('default');
+      expect(queryByTestId(/loading-mask/)).not.toBeInTheDocument();
+      done();
+    };
+
+    const recordingOptions = {
+      onStarted,
+      onCompleted
+    };
+
+    const makeRecordingHandler = startRecording => {
+      return () => startRecording(recordingOptions);
+    };
+
+    render( /*#__PURE__*/React.createElement(ChildTest, {
+      makeRecordingHandler: makeRecordingHandler
+    }));
+    await act(async () => {
+      fireEvent.click(getByTestId(/start-recording/));
+    }); // At this stage, should be pending
+    // - In this test case, 'controls' should not be rendered
+
+    expect(queryByTestId(/recording-state/)).not.toBeInTheDocument();
+    expect(queryByTestId(/section-rc/)).not.toBeInTheDocument();
+    expect.assertions(7);
+  });
+});