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

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

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

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