@dhis2/app-service-offline 3.17.0-beta.4 → 3.17.1

package/.gitignore

@@ -0,0 +1,5 @@
+# DHIS2 Platform
+node_modules
+.d2
+src/locales
+build

package/build/cjs/declarations.d.js

@@ -0,0 +1 @@
+"use strict";

package/build/es/declarations.d.js

@@ -0,0 +1 @@
+export {};

package/d2.config.js

@@ -0,0 +1,9 @@
+const config = {
+    type: 'lib',
+
+    entryPoints: {
+        lib: './src/index.ts',
+    },
+}
+
+module.exports = config

package/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    collectCoverageFrom: [
+        'src/**/*.(js|jsx|ts|tsx)',
+        '!src/index.ts',
+        '!src/**/types/*',
+        '!src/**/types.ts',
+    ],
+
+    // Setup react-testing-library
+    setupFilesAfterEnv: ['<rootDir>/src/setupRTL.ts'],
+    // Fix for Jest 27
+    // https://github.com/facebook/jest/issues/11404#issuecomment-1003328922
+    testRunner: 'jest-jasmine2',
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dhis2/app-service-offline",
     "description": "A runtime service for online/offline detection and offline caching",
-    "version": "3.17.0-beta.4",
+    "version": "3.17.1",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "types": "./build/types/index.d.ts",
@@ -21,7 +21,7 @@
         "access": "public"
     },
     "files": [
-        "build/**"
+        "**"
     ],
     "scripts": {
         "build:types": "tsc --emitDeclarationOnly --outDir ./build/types",
@@ -34,7 +34,7 @@
         "coverage": "yarn test --coverage"
     },
     "peerDependencies": {
-        "@dhis2/app-service-config": "3.17.0-beta.4",
+        "@dhis2/app-service-config": "3.17.1",
         "react": "^16.8.6 || ^18",
         "react-dom": "^16.8.6 || ^18"
     },

package/src/__tests__/integration.test.tsx

@@ -0,0 +1,341 @@
+import { AlertsProvider } from '@dhis2/app-service-alerts'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import {
+    useCacheableSection,
+    CacheableSection,
+    CacheableSectionStartRecording,
+} 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: any) => arg
+
+const TestControls = ({
+    id,
+    makeRecordingHandler = identity,
+}: {
+    id: string
+    makeRecordingHandler?: (cb?: any) => () => Promise<any>
+}) => {
+    const { startRecording, remove, isCached, lastUpdated, recordingState } =
+        useCacheableSection(id)
+
+    return (
+        <>
+            <RenderCounter id={`controls-rc-${id}`} countsObj={renderCounts} />
+            <button
+                data-testid={`start-recording-${id}`}
+                onClick={makeRecordingHandler(startRecording)}
+            />
+            <button
+                data-testid={`remove-${id}`}
+                onClick={() => {
+                    remove()
+                }}
+            />
+            <div data-testid={`is-cached-${id}`}>{isCached ? 'yes' : 'no'}</div>
+            <div data-testid={`last-updated-${id}`}>
+                {lastUpdated?.toISOString() ?? 'never'}
+            </div>
+            <div data-testid={`recording-state-${id}`}>{recordingState}</div>
+        </>
+    )
+}
+
+const TestSection = ({
+    id,
+    children,
+}: {
+    id: string
+    children?: React.ReactNode
+}) => (
+    <CacheableSection
+        id={id}
+        loadingMask={<div data-testid={`loading-mask-${id}`} />}
+    >
+        <RenderCounter id={`section-rc-${id}`} countsObj={renderCounts} />
+        {children}
+    </CacheableSection>
+)
+
+const TestSingleSection = (props?: any) => {
+    // Props are spread so they can be overwritten
+    return (
+        <AlertsProvider>
+            <OfflineProvider offlineInterface={mockOfflineInterface} {...props}>
+                <TestControls id={'1'} {...props} />
+                <TestSection id={'1'} {...props} />
+            </OfflineProvider>
+        </AlertsProvider>
+    )
+}
+
+// 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 as jest.Mock).mockRestore()
+    resetRenderCounts(renderCounts)
+})
+
+describe('Coordination between useCacheableSection and CacheableSection', () => {
+    it('renders in the default state initially', async () => {
+        render(<TestSingleSection />)
+
+        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: CacheableSectionStartRecording
+        ) => {
+            return () => startRecording(recordingOptions)
+        }
+        render(
+            <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: CacheableSectionStartRecording
+        ) => {
+            return () => startRecording({ onError })
+        }
+        render(
+            <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: Error) => {
+            expect(err.message).toBe('Failed message') // from the mock
+            expect(onStarted).not.toHaveBeenCalled()
+            expect(getByTestId(/recording-state/)).toHaveTextContent('default')
+            done()
+        }
+
+        const makeRecordingHandler = (
+            startRecording: CacheableSectionStartRecording
+        ) => {
+            return () => startRecording({ onStarted }).catch(testErrCondition)
+        }
+
+        render(
+            <TestSingleSection
+                offlineInterface={testOfflineInterface}
+                makeRecordingHandler={makeRecordingHandler}
+            />
+        )
+
+        await act(async () => {
+            fireEvent.click(getByTestId(/start-recording/))
+        })
+    })
+})
+
+const TwoTestSections = (props?: any) => (
+    // Props are spread so they can be overwritten (but only on one section)
+    <AlertsProvider>
+        <OfflineProvider offlineInterface={mockOfflineInterface} {...props}>
+            <TestControls id={'1'} {...props} />
+            <TestSection id={'1'} {...props} />
+            <TestControls id={'2'} />
+            <TestSection id={'2'} />
+        </OfflineProvider>
+    </AlertsProvider>
+)
+
+// test that other sections don't rerender when one section does
+describe('Performant state management', () => {
+    it('establishes a pre-recording render count', () => {
+        render(<TwoTestSections />)
+
+        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: CacheableSectionStartRecording) => () =>
+                startRecording({ onCompleted })
+        render(<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?: any) => {
+        // Props are spread so they can be overwritten
+        return (
+            <AlertsProvider>
+                <OfflineProvider
+                    offlineInterface={mockOfflineInterface}
+                    {...props}
+                >
+                    <TestSection id={'1'} {...props}>
+                        <TestControls id={'1'} {...props} />
+                    </TestSection>
+                </OfflineProvider>
+            </AlertsProvider>
+        )
+    }
+
+    it('handles a successful recording', async (done) => {
+        const { getByTestId, queryByTestId } = screen
+
+        const onStarted = async () => {
+            await waitFor(() => {
+                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: CacheableSectionStartRecording
+        ) => {
+            return () => startRecording(recordingOptions)
+        }
+
+        render(<ChildTest makeRecordingHandler={makeRecordingHandler} />)
+
+        await act(async () => {
+            await fireEvent.click(getByTestId(/start-recording/))
+        })
+
+        await waitFor(() => {
+            // 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)
+        })
+    })
+})

package/src/declarations.d.ts

@@ -0,0 +1 @@
+declare module 'fake-indexeddb/lib/FDBFactory'

package/src/index.ts

@@ -0,0 +1,12 @@
+export { OfflineProvider } from './lib/offline-provider'
+export { CacheableSection, useCacheableSection } from './lib/cacheable-section'
+export { useCachedSections } from './lib/cacheable-section-state'
+// Use "useOnlineStatus" name for backwards compatibility
+export { useNetworkStatus as useOnlineStatus } from './lib/network-status'
+export {
+    useOnlineStatusMessage,
+    useSetOnlineStatusMessage,
+    useOnlineStatusMessageValue,
+} from './lib/online-status-message'
+export { clearSensitiveCaches } from './lib/clear-sensitive-caches'
+export { useDhis2ConnectionStatus } from './lib/dhis2-connection-status'

package/src/lib/__tests__/cacheable-section-state.test.tsx

@@ -0,0 +1,45 @@
+import { renderHook } from '@testing-library/react'
+import React, { FC, PropsWithChildren } from 'react'
+import { mockOfflineInterface } from '../../utils/test-mocks'
+import { useCachedSection, useRecordingState } from '../cacheable-section-state'
+import { OfflineProvider } from '../offline-provider'
+
+const wrapper: FC<PropsWithChildren> = ({ children }) => (
+    <OfflineProvider offlineInterface={mockOfflineInterface}>
+        {children}
+    </OfflineProvider>
+)
+
+test('useRecordingState has stable references', () => {
+    const { result, rerender } = renderHook(() => useRecordingState('one'), {
+        wrapper,
+    })
+
+    const origRecordingState = result.current.recordingState
+    const origSetRecordingState = result.current.setRecordingState
+    const origRemoveRecordingState = result.current.removeRecordingState
+
+    rerender()
+
+    expect(result.current.recordingState).toBe(origRecordingState)
+    expect(result.current.setRecordingState).toBe(origSetRecordingState)
+    expect(result.current.removeRecordingState).toBe(origRemoveRecordingState)
+})
+
+test('useCachedSection has stable references', () => {
+    const { result, rerender } = renderHook(() => useCachedSection('one'), {
+        wrapper,
+    })
+
+    const origIsCached = result.current.isCached
+    const origLastUpdated = result.current.lastUpdated
+    const origRemove = result.current.remove
+    const origSyncCachedSections = result.current.syncCachedSections
+
+    rerender()
+
+    expect(result.current.isCached).toBe(origIsCached)
+    expect(result.current.lastUpdated).toBe(origLastUpdated)
+    expect(result.current.remove).toBe(origRemove)
+    expect(result.current.syncCachedSections).toBe(origSyncCachedSections)
+})

package/src/lib/__tests__/clear-sensitive-caches.test.ts

@@ -0,0 +1,182 @@
+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
+
+// Returns true if an existing cache is deleted
+const makeCachesDeleteMock = (keys: string[]) => {
+    return jest
+        .fn()
+        .mockImplementation((key) => Promise.resolve(keys.includes(key)))
+}
+
+const keysMockDefault = jest.fn().mockImplementation(async () => [])
+const deleteMockDefault = makeCachesDeleteMock([])
+const cachesDefault = {
+    keys: keysMockDefault,
+    delete: deleteMockDefault,
+    // the following to satisfy types:
+    has: () => Promise.resolve(true),
+    open: () => Promise.resolve(new Cache()),
+    match: () => Promise.resolve(new Response()),
+}
+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 as jest.Mock).mockRestore()
+})
+
+it('does not fail if there are no caches or no sections-db', () => {
+    return expect(clearSensitiveCaches()).resolves.toBe(false)
+})
+
+it('returns false if caches.keys throws', async () => {
+    const spy = jest.fn(() => {
+        throw new Error('Security Error')
+    })
+    window.caches = {
+        ...cachesDefault,
+        keys: spy,
+    }
+
+    const result = await clearSensitiveCaches()
+
+    expect(spy).toHaveBeenCalled()
+    expect(result).toBe(false)
+})
+
+it('clears potentially sensitive caches', async () => {
+    const testKeys = ['cache1', 'cache2', 'app-shell', 'other-assets']
+    const keysMock = jest
+        .fn()
+        .mockImplementation(() => Promise.resolve(testKeys))
+    const deleteMock = makeCachesDeleteMock(testKeys)
+    window.caches = { ...cachesDefault, keys: keysMock, delete: deleteMock }
+
+    const cachesDeleted = await clearSensitiveCaches()
+    expect(cachesDeleted).toBe(true)
+
+    expect(deleteMock).toHaveBeenCalledTimes(4)
+    expect(deleteMock.mock.calls[0][0]).toBe('cache1')
+    expect(deleteMock.mock.calls[1][0]).toBe('cache2')
+    expect(deleteMock.mock.calls[2][0]).toBe('app-shell')
+    expect(deleteMock.mock.calls[3][0]).toBe('other-assets')
+})
+
+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(4)
+    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.mock.calls[3][0]).toBe('other-assets')
+    expect(deleteMockDefault).not.toHaveBeenCalledWith(
+        'workbox-precache-v2-https://hey.howareya.now/'
+    )
+})
+
+describe('clears sections-db', () => {
+    // Test DB
+    function openTestDB(dbName: string) {
+        // 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)
+    })
+})