-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Announce offline status (#57178)
* refactor: Rename `useIsConnected` to `useNetworkConnectivity` Attempt to better communicate the Hook intent. * test: Add `useNetworkConnectivity` Hook tests * docs: Document `useNetworkConnectivity` Hook * refactor: Rename `withIsConnected` to `withNetworkConnectivity` * fix: Optimistically presume network connectivity Prior to making the asynchronous request to the host app across the bridge, it is a better UX to presume network connectivity is present rather than displaying network connectivity messages briefly. * test: Create realistic default `requestConnectionStatus` mock * fix: Prevent duplicative offline status indicators Hoist the `OfflineStatus` indicator from the block list to the editor. The block list is leveraged for inner blocks, which means it rendered nested `OfflineStatus` indicators for blocks with inner blocks. Additionally, the `editor` package feels like an appropriate location for the offline detection component. * feat: Announce offline status Improve the UX for screen reader users by announcing the state of network connectivity whenever it changes. * test: Add automated `OfflineStatus` tests * refactor: Fix typo * Add missing closing tag and fix indentation from merge --------- Co-authored-by: Derek Blank <[email protected]>
- Loading branch information
1 parent
1fface7
commit a50e4c7
Showing
2 changed files
with
165 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
108 changes: 108 additions & 0 deletions
108
packages/editor/src/components/offline-status/test/index.native.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { act, render, screen } from 'test/helpers'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { | ||
requestConnectionStatus, | ||
subscribeConnectionStatus, | ||
} from '@wordpress/react-native-bridge'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import OfflineStatus from '../index'; | ||
import { AccessibilityInfo } from 'react-native'; | ||
|
||
jest.mock( '../style.native.scss', () => ( { | ||
'offline--icon': { | ||
fill: '', | ||
}, | ||
} ) ); | ||
|
||
describe( 'when network connectivity is unavailable', () => { | ||
beforeAll( () => { | ||
requestConnectionStatus.mockImplementation( ( callback ) => { | ||
callback( false ); | ||
return { remove: jest.fn() }; | ||
} ); | ||
} ); | ||
|
||
it( 'should display a helpful message', () => { | ||
render( <OfflineStatus /> ); | ||
|
||
expect( screen.getByText( 'Working Offline' ) ).toBeVisible(); | ||
} ); | ||
|
||
it( 'should display an accessible message', () => { | ||
render( <OfflineStatus /> ); | ||
|
||
expect( | ||
screen.getByLabelText( 'Network connection lost, working offline' ) | ||
).toBeVisible(); | ||
} ); | ||
|
||
it( 'should announce network status', () => { | ||
render( <OfflineStatus /> ); | ||
|
||
expect( | ||
AccessibilityInfo.announceForAccessibility | ||
).toHaveBeenCalledWith( 'Network connection lost, working offline' ); | ||
} ); | ||
|
||
it( 'should announce changes to network status', () => { | ||
let subscriptionCallback; | ||
subscribeConnectionStatus.mockImplementation( ( callback ) => { | ||
subscriptionCallback = callback; | ||
return { remove: jest.fn() }; | ||
} ); | ||
render( <OfflineStatus /> ); | ||
|
||
act( () => subscriptionCallback( { isConnected: false } ) ); | ||
|
||
expect( | ||
AccessibilityInfo.announceForAccessibility | ||
).toHaveBeenCalledWith( 'Network connection lost, working offline' ); | ||
} ); | ||
} ); | ||
|
||
describe( 'when network connectivity is available', () => { | ||
beforeAll( () => { | ||
requestConnectionStatus.mockImplementation( ( callback ) => { | ||
callback( true ); | ||
return { remove: jest.fn() }; | ||
} ); | ||
} ); | ||
|
||
it( 'should not display a helpful message', () => { | ||
render( <OfflineStatus /> ); | ||
|
||
expect( screen.queryByText( 'Working Offline' ) ).toBeNull(); | ||
} ); | ||
|
||
it( 'should not announce network status', () => { | ||
render( <OfflineStatus /> ); | ||
|
||
expect( | ||
AccessibilityInfo.announceForAccessibility | ||
).not.toHaveBeenCalled(); | ||
} ); | ||
|
||
it( 'should announce changes to network status', () => { | ||
let subscriptionCallback; | ||
subscribeConnectionStatus.mockImplementation( ( callback ) => { | ||
subscriptionCallback = callback; | ||
return { remove: jest.fn() }; | ||
} ); | ||
render( <OfflineStatus /> ); | ||
|
||
act( () => subscriptionCallback( { isConnected: false } ) ); | ||
|
||
expect( | ||
AccessibilityInfo.announceForAccessibility | ||
).toHaveBeenCalledWith( 'Network connection lost, working offline' ); | ||
} ); | ||
} ); |