refactor(app): refactor PreventRobotCaching section (#14335)

* refactor(app): refactor PreventRobotCaching section

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<Dispatch>()
+
+  return (
+    <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
+      <Box width="70%">
+        <StyledText
+          css={TYPOGRAPHY.h3SemiBold}
+          paddingBottom={SPACING.spacing8}
+          id="AdvancedSettings_unavailableRobots"
+        >
+          {t('prevent_robot_caching')}
+        </StyledText>
+        <StyledText as="p">
+          <Trans
+            t={t}
+            i18nKey="prevent_robot_caching_description"
+            components={{
+              strong: (
+                <StyledText
+                  as="span"
+                  fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+                />
+              ),
+            }}
+          />
+        </StyledText>
+      </Box>
+      <ToggleButton
+        label="display_unavailable_robots"
+        toggledOn={!displayUnavailRobots}
+        onClick={() => dispatch(toggleConfigValue('discovery.disableCache'))}
+        id="AdvancedSettings_unavailableRobotsToggleButton"
+      />
+    </Flex>
+  )
+}

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<typeof getConfig>
+const mockToggleConfigValue = toggleConfigValue as jest.MockedFunction<
+  typeof toggleConfigValue
+>
+
+const MOCK_STATE: State = {
+  config: {
+    discovery: {
+      disableCache: false,
+    },
+  },
+} as any
+
+const render = () => {
+  return renderWithProviders(<PreventRobotCaching />, {
+    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')
+  })
+})

app/src/organisms/AdvancedSettings/index.ts

@@ -1,2 +1,3 @@
 export * from './EnableDevTools'
 export * from './OT2AdvancedSettings'
+export * from './PreventRobotCaching'

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 {
           }
         </Flex>
         <Divider marginY={SPACING.spacing24} />
-        <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
-          <Box width="70%">
-            <StyledText
-              css={TYPOGRAPHY.h3SemiBold}
-              paddingBottom={SPACING.spacing8}
-              id="AdvancedSettings_unavailableRobots"
-            >
-              {t('prevent_robot_caching')}
-            </StyledText>
-            <StyledText as="p">
-              <Trans
-                t={t}
-                i18nKey="prevent_robot_caching_description"
-                components={{
-                  strong: (
-                    <StyledText
-                      as="span"
-                      fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-                    />
-                  ),
-                }}
-              />
-            </StyledText>
-          </Box>
-          <ToggleButton
-            label="display_unavailable_robots"
-            toggledOn={!displayUnavailRobots}
-            onClick={() =>
-              dispatch(Config.toggleConfigValue('discovery.disableCache'))
-            }
-            id="AdvancedSettings_unavailableRobotsToggleButton"
-          />
-        </Flex>
+        <PreventRobotCaching />
         <Divider marginY={SPACING.spacing24} />
         <Flex
           alignItems={ALIGN_CENTER}

app/src/pages/AppSettings/__test__/AdvancedSettings.test.tsx

@@ -28,6 +28,7 @@ import * as Fixtures from '../../../redux/system-info/__fixtures__'
 import {
   EnableDevTools,
   OT2AdvancedSettings,
+  PreventRobotCaching,
 } from '../../../organisms/AdvancedSettings'
 
 import { AdvancedSettings } from '../AdvancedSettings'
@@ -96,6 +97,9 @@ const mockOpenPythonInterpreterDirectory = ProtocolAnalysis.openPythonInterprete
 const mockUseTrackEvent = useTrackEvent as jest.MockedFunction<
   typeof useTrackEvent
 >
+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(<div>mock PreventRobotCaching</div>)
     mockOT2AdvancedSettings.mockReturnValue(<div>mock OT2AdvancedSettings</div>)
     mockEnableDevTools.mockReturnValue(<div>mock EnableDevTools</div>)
   })
+
   afterEach(() => {
     jest.resetAllMocks()
     resetAllWhenMocks()
@@ -142,17 +148,18 @@ 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(
       'Stable receives the latest stable releases. Beta allows you to try out new in-progress features before they launch in Stable channel, but they have not completed testing yet.'
     )
     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')