* Pass engine connection state to NetworkHealthIndicator * Create the basis for styling and further work * Add icons * Update styles on network health indicator * Cleanup styles and unused state * Rename State to NetworkHealthState * Update tests * fmt --------- Co-authored-by: 49lf <ircsurfer33@gmail.com>
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import { fireEvent, render, screen } from '@testing-library/react'
|
|
import { BrowserRouter } from 'react-router-dom'
|
|
import { GlobalStateProvider } from './GlobalStateProvider'
|
|
import CommandBarProvider from './CommandBar/CommandBar'
|
|
import {
|
|
NETWORK_HEALTH_TEXT,
|
|
NetworkHealthIndicator,
|
|
NetworkHealthState,
|
|
} from './NetworkHealthIndicator'
|
|
|
|
function TestWrap({ children }: { children: React.ReactNode }) {
|
|
// wrap in router and xState context
|
|
return (
|
|
<BrowserRouter>
|
|
<CommandBarProvider>
|
|
<GlobalStateProvider>{children}</GlobalStateProvider>
|
|
</CommandBarProvider>
|
|
</BrowserRouter>
|
|
)
|
|
}
|
|
|
|
describe('NetworkHealthIndicator tests', () => {
|
|
test('Renders the network indicator', () => {
|
|
render(
|
|
<TestWrap>
|
|
<NetworkHealthIndicator />
|
|
</TestWrap>
|
|
)
|
|
|
|
fireEvent.click(screen.getByTestId('network-toggle'))
|
|
|
|
expect(screen.getByTestId('network')).toHaveTextContent(
|
|
NETWORK_HEALTH_TEXT[NetworkHealthState.Ok]
|
|
)
|
|
})
|
|
|
|
test('Responds to network changes', () => {
|
|
render(
|
|
<TestWrap>
|
|
<NetworkHealthIndicator />
|
|
</TestWrap>
|
|
)
|
|
|
|
fireEvent.offline(window)
|
|
fireEvent.click(screen.getByTestId('network-toggle'))
|
|
|
|
expect(screen.getByTestId('network')).toHaveTextContent(
|
|
NETWORK_HEALTH_TEXT[NetworkHealthState.Disconnected]
|
|
)
|
|
})
|
|
})
|