diff --git a/app/src/organisms/AdvancedSettings/PreventRobotCaching.tsx b/app/src/organisms/AdvancedSettings/PreventRobotCaching.tsx new file mode 100644 index 00000000000..244d2f6b893 --- /dev/null +++ b/app/src/organisms/AdvancedSettings/PreventRobotCaching.tsx @@ -0,0 +1,60 @@ +import * as React from 'react' +import { Trans, useTranslation } from 'react-i18next' +import { useDispatch, useSelector } from 'react-redux' + +import { + ALIGN_CENTER, + Box, + Flex, + JUSTIFY_SPACE_BETWEEN, + SPACING, + TYPOGRAPHY, +} from '@opentrons/components' + +import { StyledText } from '../../atoms/text' +import { ToggleButton } from '../../atoms/buttons' +import { getConfig, toggleConfigValue } from '../../redux/config' + +import type { Dispatch, State } from '../../redux/types' + +export function PreventRobotCaching(): JSX.Element { + const { t } = useTranslation('app_settings') + const displayUnavailRobots = useSelector((state: State) => { + return getConfig(state)?.discovery.disableCache ?? false + }) + const dispatch = useDispatch() + + return ( + + + + {t('prevent_robot_caching')} + + + + ), + }} + /> + + + dispatch(toggleConfigValue('discovery.disableCache'))} + id="AdvancedSettings_unavailableRobotsToggleButton" + /> + + ) +} diff --git a/app/src/organisms/AdvancedSettings/__tests__/PreventRobotCaching.test.tsx b/app/src/organisms/AdvancedSettings/__tests__/PreventRobotCaching.test.tsx new file mode 100644 index 00000000000..42a4d49d861 --- /dev/null +++ b/app/src/organisms/AdvancedSettings/__tests__/PreventRobotCaching.test.tsx @@ -0,0 +1,63 @@ +import * as React from 'react' +import { when, resetAllWhenMocks } from 'jest-when' +import { screen, fireEvent } from '@testing-library/react' + +import { renderWithProviders } from '@opentrons/components' +import { i18n } from '../../../i18n' + +import { getConfig, toggleConfigValue } from '../../../redux/config' +import { PreventRobotCaching } from '../PreventRobotCaching' + +import type { State } from '../../../redux/types' + +jest.mock('../../../redux/config') + +const mockGetConfig = getConfig as jest.MockedFunction +const mockToggleConfigValue = toggleConfigValue as jest.MockedFunction< + typeof toggleConfigValue +> + +const MOCK_STATE: State = { + config: { + discovery: { + disableCache: false, + }, + }, +} as any + +const render = () => { + return renderWithProviders(, { + i18nInstance: i18n, + }) +} + +describe('PreventRobotCaching', () => { + beforeEach(() => { + when(mockGetConfig) + .calledWith(MOCK_STATE) + .mockReturnValue(MOCK_STATE.config) + }) + + afterEach(() => { + jest.clearAllMocks() + resetAllWhenMocks() + }) + + it('should render text and toggle button', () => { + render() + screen.getByText('Prevent Robot Caching') + screen.queryByText( + 'The app will immediately clear unavailable robots and will not remember unavailable robots while this is enabled. On networks with many robots, preventing caching may improve network performance at the expense of slower and less reliable robot discovery on app launch.' + ) + screen.getByRole('switch', { name: 'display_unavailable_robots' }) + }) + + it('should call mock toggleConfigValue when clicking the toggle button', () => { + render() + const toggleButton = screen.getByRole('switch', { + name: 'display_unavailable_robots', + }) + fireEvent.click(toggleButton) + expect(mockToggleConfigValue).toHaveBeenCalledWith('discovery.disableCache') + }) +}) diff --git a/app/src/organisms/AdvancedSettings/index.ts b/app/src/organisms/AdvancedSettings/index.ts index d0979d6a2e2..4dee5f74880 100644 --- a/app/src/organisms/AdvancedSettings/index.ts +++ b/app/src/organisms/AdvancedSettings/index.ts @@ -1,2 +1,3 @@ export * from './EnableDevTools' export * from './OT2AdvancedSettings' +export * from './PreventRobotCaching' diff --git a/app/src/pages/AppSettings/AdvancedSettings.tsx b/app/src/pages/AppSettings/AdvancedSettings.tsx index 65c8228ef1e..3f6cd50481b 100644 --- a/app/src/pages/AppSettings/AdvancedSettings.tsx +++ b/app/src/pages/AppSettings/AdvancedSettings.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { Trans, useTranslation } from 'react-i18next' +import { useTranslation } from 'react-i18next' import { useSelector, useDispatch } from 'react-redux' import { @@ -52,6 +52,7 @@ import { useToaster } from '../../organisms/ToasterOven' import { EnableDevTools, OT2AdvancedSettings, + PreventRobotCaching, } from '../../organisms/AdvancedSettings' import type { Dispatch, State } from '../../redux/types' @@ -137,9 +138,6 @@ export function AdvancedSettings(): JSX.Element { const handleChannel = (_: string, value: string): void => { dispatch(Config.updateConfigValue('update.channel', value)) } - const displayUnavailRobots = useSelector((state: State) => { - return Config.getConfig(state)?.discovery.disableCache ?? false - }) const formatOptionLabel: React.ComponentProps< typeof SelectField @@ -293,39 +291,7 @@ export function AdvancedSettings(): JSX.Element { } - - - - {t('prevent_robot_caching')} - - - - ), - }} - /> - - - - dispatch(Config.toggleConfigValue('discovery.disableCache')) - } - id="AdvancedSettings_unavailableRobotsToggleButton" - /> - + +const mockPreventRobotCaching = PreventRobotCaching as jest.MockedFunction< + typeof PreventRobotCaching +> const mockOT2AdvancedSettings = OT2AdvancedSettings as jest.MockedFunction< typeof OT2AdvancedSettings @@ -130,9 +134,11 @@ describe('AdvancedSettings', () => { showConfirmation: true, cancel: mockCancel, }) + mockPreventRobotCaching.mockReturnValue(
mock PreventRobotCaching
) mockOT2AdvancedSettings.mockReturnValue(
mock OT2AdvancedSettings
) mockEnableDevTools.mockReturnValue(
mock EnableDevTools
) }) + afterEach(() => { jest.resetAllMocks() resetAllWhenMocks() @@ -142,10 +148,10 @@ describe('AdvancedSettings', () => { const [{ getByText }] = render() getByText('Update Channel') getByText('Additional Custom Labware Source Folder') - getByText('Prevent Robot Caching') getByText('Clear Unavailable Robots') getByText('USB-to-Ethernet Adapter Information') }) + it('renders the update channel combobox and section', () => { const [{ getByText, getByRole }] = render() getByText( @@ -153,6 +159,7 @@ describe('AdvancedSettings', () => { ) getByRole('combobox', { name: '' }) }) + it('renders the custom labware section with source folder selected', () => { getCustomLabwarePath.mockReturnValue('/mock/custom-labware-path') const [{ getByText, getByRole }] = render() @@ -162,6 +169,7 @@ describe('AdvancedSettings', () => { getByText('Additional Source Folder') getByRole('button', { name: 'Change labware source folder' }) }) + it('renders the custom labware section with no source folder selected', () => { const [{ getByText, getByRole }] = render() getByText('No additional source folder specified') @@ -176,12 +184,10 @@ describe('AdvancedSettings', () => { render() screen.getByText('mock OT2AdvancedSettings') }) - it('renders the robot caching section', () => { - const [{ queryByText, getByRole }] = render() - queryByText( - 'The app will immediately clear unavailable robots and will not remember unavailable robots while this is enabled. On networks with many robots, preventing caching may improve network performance at the expense of slower and less reliable robot discovery on app launch.' - ) - getByRole('switch', { name: 'display_unavailable_robots' }) + + it('should render mock robot caching section', () => { + render() + screen.getByText('mock PreventRobotCaching') }) it('render the usb-to-ethernet adapter information', () => { @@ -345,6 +351,7 @@ describe('AdvancedSettings', () => { fireEvent.click(proceedBtn) expect(mockConfirm).toHaveBeenCalled() }) + it('should render mock developer tools section', () => { render() screen.getByText('mock EnableDevTools')