diff --git a/packages/core/admin/admin/src/hooks/use-navigator-on-line.js b/packages/core/admin/admin/src/hooks/useNavigatorOnLine/index.js similarity index 100% rename from packages/core/admin/admin/src/hooks/use-navigator-on-line.js rename to packages/core/admin/admin/src/hooks/useNavigatorOnLine/index.js diff --git a/packages/core/admin/admin/src/hooks/useNavigatorOnLine/tests/index.test.js b/packages/core/admin/admin/src/hooks/useNavigatorOnLine/tests/index.test.js new file mode 100644 index 0000000000..16a84eadb4 --- /dev/null +++ b/packages/core/admin/admin/src/hooks/useNavigatorOnLine/tests/index.test.js @@ -0,0 +1,48 @@ +import { renderHook, act } from '@testing-library/react-hooks'; +import useNavigatorOnLine from '../index'; + +describe('useNavigatorOnLine', () => { + it('returns the online state', () => { + jest.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(true); + const { result } = renderHook(() => useNavigatorOnLine()); + + expect(result.current).toEqual(true); + }); + + it('returns the offline state', () => { + jest.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(false); + const { result } = renderHook(() => useNavigatorOnLine()); + + expect(result.current).toEqual(false); + }); + + it('listens for network change online', async () => { + // Initialize an offline state + jest.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(false); + const { result, waitForNextUpdate } = renderHook(() => useNavigatorOnLine()); + + await act(async () => { + // Simulate a change from offline to online + window.dispatchEvent(new window.Event('online')); + + await waitForNextUpdate(); + }); + + expect(result.current).toEqual(true); + }); + + it('listens for network change offline', async () => { + // Initialize an online state + jest.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(true); + const { result, waitForNextUpdate } = renderHook(() => useNavigatorOnLine()); + + await act(async () => { + // Simulate a change from online to offline + window.dispatchEvent(new window.Event('offline')); + + await waitForNextUpdate(); + }); + + expect(result.current).toEqual(false); + }); +}); diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js index 510f8ea8a9..c55b41620d 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js @@ -29,7 +29,7 @@ import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins'; import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins'; import adminPermissions from '../../permissions'; import offlineCloud from '../../assets/images/icon_offline-cloud.svg'; -import useNavigatorOnLine from '../../hooks/use-navigator-on-line'; +import useNavigatorOnLine from '../../hooks/useNavigatorOnLine'; const matchSearch = (plugins, search) => { return matchSorter(plugins, search, { diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js index 2025221a37..0ac25f591d 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js @@ -11,11 +11,14 @@ import { IntlProvider } from 'react-intl'; import { QueryClient, QueryClientProvider } from 'react-query'; import { ThemeProvider, lightTheme } from '@strapi/design-system'; import { useTracking, useAppInfos } from '@strapi/helper-plugin'; +import useNavigatorOnLine from '../../../hooks/useNavigatorOnLine'; import MarketPlacePage from '../index'; import server from './server'; const toggleNotification = jest.fn(); +jest.mock('../../../hooks/use-navigator-on-line', () => jest.fn(() => true)); + jest.mock('@strapi/helper-plugin', () => ({ ...jest.requireActual('@strapi/helper-plugin'), useNotification: jest.fn(() => { @@ -1533,7 +1536,7 @@ describe('Marketplace page', () => { expect(noResult).toBeVisible(); }); - it('handles production environment', async () => { + it('handles production environment', () => { // Simulate production environment useAppInfos.mockImplementation(() => ({ autoReload: false })); const { queryByText } = render(App); @@ -1547,9 +1550,25 @@ describe('Marketplace page', () => { }, blockTransition: true, }); + expect(toggleNotification).toHaveBeenCalledTimes(1); // Should not show install buttons expect(queryByText(/copy install command/i)).not.toBeInTheDocument(); }); + + it('shows an online layout', () => { + render(App); + const offlineText = screen.queryByText('You are offline'); + + expect(offlineText).toEqual(null); + }); + + it('shows the offline layout', () => { + useNavigatorOnLine.mockReturnValueOnce(false); + render(App); + const offlineText = screen.getByText('You are offline'); + + expect(offlineText).toBeVisible(); + }); });