@dhis2/app-service-offline 3.17.0 → 3.17.1

package/src/lib/__tests__/network-status.test.tsx

@@ -0,0 +1,496 @@
+import {
+    render,
+    screen,
+    waitFor,
+    act,
+    renderHook,
+} from '@testing-library/react'
+import React from 'react'
+import { useNetworkStatus as useOnlineStatus } from '../network-status'
+
+interface CapturedEventListeners {
+    [index: string]: EventListener
+}
+
+function wait(ms: number): Promise<void> {
+    return new Promise((resolve) => {
+        setTimeout(() => resolve(), ms)
+    })
+}
+
+beforeEach(() => {
+    jest.restoreAllMocks()
+})
+
+afterEach(() => {
+    localStorage.clear()
+})
+
+describe('initalizes to navigator.onLine value', () => {
+    it('initializes to true', () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        const { result } = renderHook(() => useOnlineStatus())
+
+        expect(result.current.online).toBe(true)
+        expect(result.current.offline).toBe(false)
+    })
+
+    it('initializes to false', () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(false)
+        const { result } = renderHook(() => useOnlineStatus())
+
+        expect(result.current.online).toBe(false)
+        expect(result.current.offline).toBe(true)
+    })
+})
+
+describe('state changes in response to browser "online" and "offline" events', () => {
+    it('switches from online to offline when the "offline" event triggers', async () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        // Capture callback to trigger later using addEventListener mock
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result } = renderHook((...args) => useOnlineStatus(...args), {
+            initialProps: { debounceDelay: 50 },
+        })
+
+        act(() => {
+            // Trigger callback captured by addEventListener mock
+            events.offline(new Event('offline'))
+        })
+
+        // Wait for debounce
+        await waitFor(() => {
+            expect(result.current.online).toBe(false)
+            expect(result.current.offline).toBe(true)
+        })
+    })
+
+    it('switches from offline to online when the "online" event triggers', async () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(false)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result } = renderHook((...args) => useOnlineStatus(...args), {
+            initialProps: { debounceDelay: 50 },
+        })
+
+        act(() => {
+            events.online(new Event('online'))
+        })
+
+        // Wait for debounce
+        await waitFor(() => {
+            expect(result.current.online).toBe(true)
+            expect(result.current.offline).toBe(false)
+        })
+    })
+})
+
+describe('debouncing state changes', () => {
+    it('debounces with a 1s delay by default', async () => {
+        // Start online
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result } = renderHook(() => useOnlineStatus())
+
+        await act(async () => {
+            // Multiple events in succession
+            events.offline(new Event('offline'))
+            events.online(new Event('online'))
+            events.offline(new Event('offline'))
+        })
+
+        // Immediately, nothing should happen
+        expect(result.current.online).toBe(true)
+
+        await wait(1000)
+        // 1s later, final 'offline' event should resolve
+        await waitFor(() => {
+            expect(result.current.online).toBe(false)
+        })
+    })
+
+    it('can have debounce delay set to another number', async () => {
+        // Start online
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result } = renderHook((...args) => useOnlineStatus(...args), {
+            initialProps: { debounceDelay: 50 },
+        })
+
+        await act(async () => {
+            // Multiple events in succession
+            events.offline(new Event('offline'))
+            events.online(new Event('online'))
+            events.offline(new Event('offline'))
+        })
+
+        // Immediately, nothing should happen
+        expect(result.current.online).toBe(true)
+
+        // 50ms later, final "offline" event should finally resolve
+        await waitFor(() => {
+            expect(result.current.online).toBe(false)
+        })
+    })
+
+    it('can use a debounceDelay of 0 to skip debouncing', async () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result } = renderHook((...args) => useOnlineStatus(...args), {
+            initialProps: { debounceDelay: 0 },
+        })
+        await act(async () => {
+            events.offline(new Event('offline'))
+            events.online(new Event('online'))
+            events.offline(new Event('offline'))
+        })
+
+        // await wait(0) didn't work here
+        await waitFor(() => {
+            // There should be no delay before status is offline
+            expect(result.current.online).toBe(false)
+            expect(result.current.offline).toBe(true)
+        })
+    })
+
+    it('can have the debounce delay changed during its lifecycle', async () => {
+        // Start with 150 ms debounce
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result, rerender } = renderHook(
+            (...args) => useOnlineStatus(...args),
+            { initialProps: { debounceDelay: 150 } }
+        )
+
+        await act(async () => {
+            // Multiple events in succession
+            events.offline(new Event('offline'))
+            events.online(new Event('online'))
+            events.offline(new Event('offline'))
+        })
+
+        // Immediately, nothing should happen
+        expect(result.current.online).toBe(true)
+
+        // 150ms later, final "offline" event should finally resolve
+        await wait(160)
+        expect(result.current.online).toBe(false)
+
+        // Change to 50 ms debounce
+        rerender({ debounceDelay: 50 })
+
+        await act(async () => {
+            // Multiple events in succession
+            events.online(new Event('online'))
+            events.offline(new Event('offline'))
+            events.online(new Event('online'))
+        })
+
+        // Immediately, nothing should happen
+        expect(result.current.online).toBe(false)
+
+        // 50ms later, final "online" event should finally resolve
+        await wait(60)
+        expect(result.current.online).toBe(true)
+    })
+
+    it('handles debounced state change when parent component rerenders during a debounce delay', async () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+
+        const TestComponent = () => {
+            const { online } = useOnlineStatus({ debounceDelay: 50 })
+            return <div data-testid="status">{online ? 'on' : 'off'}</div>
+        }
+        const { rerender } = render(<TestComponent />)
+
+        const { getByTestId } = screen
+        expect(getByTestId('status')).toHaveTextContent('on')
+
+        await act(async () => {
+            // Multiple events in succession
+            events.offline(new Event('offline'))
+            events.online(new Event('online'))
+            events.offline(new Event('offline'))
+        })
+
+        // Immediately, nothing should happen
+        expect(getByTestId('status')).toHaveTextContent('on')
+
+        // Rerender parent component
+        rerender(<TestComponent />)
+
+        // Final "offline" event should still resolve
+        await waitFor(() =>
+            expect(getByTestId('status')).toHaveTextContent('off')
+        )
+    })
+
+    it('handles debounced state change when debounce delay is changed during a delay', async () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+
+        const TestComponent = ({ options }: { options?: any }) => {
+            const { online } = useOnlineStatus(options)
+            return <div data-testid="status">{online ? 'on' : 'off'}</div>
+        }
+        const { rerender } = render(
+            <TestComponent options={{ debounceDelay: 100 }} />
+        )
+
+        const { getByTestId } = screen
+        expect(getByTestId('status')).toHaveTextContent('on')
+
+        await act(async () => {
+            // Multiple events in succession
+            events.offline(new Event('offline'))
+            events.online(new Event('online'))
+            events.offline(new Event('offline'))
+        })
+
+        // Immediately, nothing should happen
+        expect(getByTestId('status')).toHaveTextContent('on')
+
+        // Change debounce options
+        rerender(<TestComponent options={{ debounceDelay: 50 }} />)
+
+        // Final "offline" event should still resolve
+        await waitFor(() =>
+            expect(getByTestId('status')).toHaveTextContent('off')
+        )
+    })
+
+    it('debounces consistently across rerenders', async () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+
+        const TestComponent = () => {
+            const { online } = useOnlineStatus({ debounceDelay: 100 })
+            return <div data-testid="status">{online ? 'on' : 'off'}</div>
+        }
+        const { rerender } = render(<TestComponent />)
+
+        const { getByTestId } = screen
+        expect(getByTestId('status')).toHaveTextContent('on')
+
+        await act(async () => {
+            // Multiple events in succession
+            events.offline(new Event('offline'))
+            events.online(new Event('online'))
+            events.offline(new Event('offline'))
+        })
+
+        // wait a little bit - not long enough for debounce to resolve
+        await wait(50)
+        expect(getByTestId('status')).toHaveTextContent('on')
+
+        // Rerender parent component
+        rerender(<TestComponent />)
+
+        // Trigger more events
+        await act(async () => {
+            events.online(new Event('online'))
+            events.offline(new Event('offline'))
+        })
+
+        // wait a little more - long enough that the first debounced callbacks
+        // _would_ have resolved if there weren't the second set of events
+        await wait(60)
+        expect(getByTestId('status')).toHaveTextContent('on')
+
+        // wait long enough for second set of callbacks to resolve
+        await waitFor(() =>
+            expect(getByTestId('status')).toHaveTextContent('off')
+        )
+    })
+})
+
+describe('it updates the lastOnline value in local storage', () => {
+    const lastOnlineKey = 'dhis2.lastOnline'
+    const testDateString = 'Fri, 27 Aug 2021 19:53:06 GMT'
+
+    it('sets lastOnline in local storage when it goes offline', async () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result } = renderHook((...args) => useOnlineStatus(...args), {
+            initialProps: { debounceDelay: 0 },
+        })
+
+        // Correct initial state
+        expect(localStorage.getItem(lastOnlineKey)).toBe(null)
+        expect(result.current.lastOnline).toBe(null)
+
+        act(() => {
+            events.offline(new Event('offline'))
+        })
+
+        // Wait for debounce
+        await wait(500)
+
+        expect(result.current.online).toBe(false)
+        expect(result.current.offline).toBe(true)
+
+        // Check localStorage for a stored date
+        const parsedDate = new Date(
+            localStorage.getItem(lastOnlineKey) as string
+        )
+        expect(parsedDate.toString()).not.toBe('Invalid Date')
+        // Check hook return value
+        expect(result.current.lastOnline).toBeInstanceOf(Date)
+        expect(result.current.lastOnline?.toUTCString()).toBe(
+            localStorage.getItem(lastOnlineKey)
+        )
+    })
+
+    // not necessary
+    it.skip("sets lastOnline on mount if it's not set", () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(false)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result } = renderHook((...args) => useOnlineStatus(...args), {
+            initialProps: { debounceDelay: 0 },
+        })
+
+        const parsedDate = new Date(
+            localStorage.getItem(lastOnlineKey) as string
+        )
+        expect(parsedDate.toString()).not.toBe('Invalid Date')
+        expect(result.current.lastOnline).toBeInstanceOf(Date)
+        expect(result.current.lastOnline?.toUTCString()).toBe(
+            localStorage.getItem(lastOnlineKey)
+        )
+    })
+
+    it("doesn't change lastOnline it exists and if it's already offline", async () => {
+        // seed localStorage
+        localStorage.setItem(lastOnlineKey, testDateString)
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(false)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result } = renderHook((...args) => useOnlineStatus(...args), {
+            initialProps: { debounceDelay: 0 },
+        })
+
+        expect(localStorage.getItem(lastOnlineKey)).toBe(testDateString)
+        expect(result.current.lastOnline).toEqual(new Date(testDateString))
+
+        act(() => {
+            events.offline(new Event('offline'))
+        })
+
+        await wait(0)
+
+        expect(result.current.online).toBe(false)
+        expect(result.current.offline).toBe(true)
+
+        expect(localStorage.getItem(lastOnlineKey)).toBe(testDateString)
+        expect(result.current.lastOnline).toEqual(new Date(testDateString))
+    })
+
+    it('clears lastOnline when it goes online', async () => {
+        // seed localStorage
+        localStorage.setItem(lastOnlineKey, testDateString)
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(false)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result } = renderHook((...args) => useOnlineStatus(...args), {
+            initialProps: { debounceDelay: 0 },
+        })
+
+        expect(localStorage.getItem(lastOnlineKey)).toBe(testDateString)
+        expect(result.current.lastOnline).toEqual(new Date(testDateString))
+
+        act(() => {
+            events.offline(new Event('online'))
+        })
+
+        // Wait for debounce
+        await wait(500)
+
+        expect(result.current.online).toBe(true)
+        expect(result.current.offline).toBe(false)
+
+        // expect(localStorage.getItem(lastOnlineKey)).toBe(null)
+        expect(result.current.lastOnline).toBe(null)
+    })
+
+    it('tracks correctly when going offline and online', async () => {
+        jest.spyOn(navigator, 'onLine', 'get').mockReturnValueOnce(true)
+        const events: CapturedEventListeners = {}
+        window.addEventListener = jest.fn(
+            (event, cb) => (events[event] = cb as EventListener)
+        )
+        const { result } = renderHook((...args) => useOnlineStatus(...args), {
+            initialProps: { debounceDelay: 0 },
+        })
+
+        // Correct initial state
+        expect(localStorage.getItem(lastOnlineKey)).toBe(null)
+        expect(result.current.lastOnline).toBe(null)
+
+        act(() => {
+            events.offline(new Event('offline'))
+        })
+        await waitFor(() => undefined)
+
+        const firstDate = new Date(
+            localStorage.getItem(lastOnlineKey) as string
+        )
+        const firstValue = result.current.lastOnline?.valueOf()
+
+        act(() => {
+            events.offline(new Event('online'))
+        })
+        await wait(500)
+
+        expect(result.current.lastOnline).toBe(null)
+
+        // todo: this is an error from UTC strings' imprecision
+        await wait(500)
+
+        act(() => {
+            events.offline(new Event('offline'))
+        })
+        await wait(500)
+
+        expect(
+            new Date(localStorage.getItem(lastOnlineKey) as string)
+        ).not.toEqual(firstDate)
+        expect(result.current.lastOnline?.valueOf()).not.toEqual(firstValue)
+    })
+})

package/src/lib/__tests__/offline-provider.test.tsx

@@ -0,0 +1,116 @@
+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 as jest.Mock).mockRestore()
+})
+
+describe('Testing offline provider', () => {
+    it('Should render without failing', () => {
+        render(
+            <OfflineProvider offlineInterface={mockOfflineInterface}>
+                <div data-testid="test-div" />
+            </OfflineProvider>
+        )
+
+        expect(screen.getByTestId('test-div')).toBeInTheDocument()
+    })
+
+    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 (
+                <div data-testid="sections">
+                    {JSON.stringify(cachedSections)}
+                </div>
+            )
+        }
+
+        render(
+            <OfflineProvider offlineInterface={testOfflineInterface}>
+                <CachedSections />
+            </OfflineProvider>
+        )
+
+        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 (
+                <CacheableSection loadingMask={<div />} id={'id'}>
+                    <div data-testid="test-div" />
+                </CacheableSection>
+            )
+        }
+
+        render(
+            <OfflineProvider offlineInterface={mockOfflineInterface}>
+                <TestConsumer />
+            </OfflineProvider>
+        )
+
+        expect(screen.getByTestId('test-div')).toBeInTheDocument()
+    })
+
+    it('Should render without failing when no offlineInterface is provided', () => {
+        render(
+            <OfflineProvider>
+                <div data-testid="test-div" />
+            </OfflineProvider>
+        )
+        expect(screen.getByTestId('test-div')).toBeInTheDocument()
+    })
+
+    it('Should render without failing if PWA is not enabled', () => {
+        const testOfflineInterface = {
+            ...mockOfflineInterface,
+            pwaEnabled: false,
+        }
+        render(
+            <OfflineProvider offlineInterface={testOfflineInterface}>
+                <div data-testid="test-div" />
+            </OfflineProvider>
+        )
+
+        expect(screen.getByTestId('test-div')).toBeInTheDocument()
+    })
+})