@dhis2/app-service-offline 3.17.1 → 3.18.0-beta.2

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.1",
+    "version": "3.18.0-beta.2",
     "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.1",
+        "@dhis2/app-service-config": "3.18.0-beta.2",
         "react": "^16.8.6 || ^18",
         "react-dom": "^16.8.6 || ^18"
     },

package/.gitignore

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

package/d2.config.js

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

package/jest.config.js

@@ -1,14 +0,0 @@
-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/src/__tests__/integration.test.tsx

@@ -1,341 +0,0 @@
-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

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

package/src/index.ts

@@ -1,12 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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)
-    })
-})