feat(app): add UI to clear cached robots

Closes #2435

app/src/components/NetworkSettingsCard/ClearDiscoveryCache.js

@@ -14,12 +14,12 @@ import type { Dispatch } from '../../types'
 
 export function ClearDiscoveryCache() {
   const dispatch = useDispatch<Dispatch>()
-
   return (
     <LabeledButton
       label={CLEAR_ROBOTS_TITLE}
       buttonProps={{
-        onClick: () => {dispatch(clearDiscoveryCache())}, children: CLEAR
+        onClick: () => dispatch(clearDiscoveryCache()),
+        children: CLEAR,
       }}
     >
       <p>{CLEAR_ROBOTS_DESCRIPTION}</p>

app/src/components/NetworkSettingsCard/__tests__/ClearDiscoveryCache.test.js

@@ -1,15 +1,42 @@
 // @flow
 import * as React from 'react'
-import { shallow } from 'enzyme'
-
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import noop from 'lodash/noop'
 import { LabeledButton } from '@opentrons/components'
 import { ClearDiscoveryCache } from '../ClearDiscoveryCache'
+import { clearDiscoveryCache } from '../../../discovery'
 
 describe('ClearDiscoveryCache', () => {
-  it('renders clear discovery cache component', () => {
-    const wrapper = shallow(<ClearDiscoveryCache />)
-    expect(wrapper.find(LabeledButton).prop('label')).toBe(
-      'Clear Discovered Robots List'
-    )
+  const dispatch = jest.fn()
+  const MOCK_STORE = {
+    dispatch,
+    getState: noop,
+    subscribe: noop,
+  }
+
+  const render = () => {
+    return mount(<ClearDiscoveryCache />, {
+      wrappingComponent: Provider,
+      wrappingComponentProps: { store: MOCK_STORE },
+    })
+  }
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('renders a labelled button component', () => {
+    const wrapper = render()
+    const theButton = wrapper.find(LabeledButton)
+    expect(theButton.prop('label')).toBe('Clear Discovered Robots List')
+    expect(theButton.prop('buttonProps').children).toBe('clear')
+  })
+
+  it('dispatches a ClearDiscoveryCache Action', () => {
+    const wrapper = render()
+    const buttonProps = wrapper.find(LabeledButton).prop('buttonProps')
+    buttonProps.onClick()
+    expect(dispatch).toHaveBeenCalledWith(clearDiscoveryCache())
   })
 })

app/src/components/NetworkSettingsCard/__tests__/NetworkSettingsCard.test.js

@@ -5,6 +5,7 @@ import { shallow } from 'enzyme'
 import { Card } from '@opentrons/components'
 import { AddManualIp } from '../AddManualIp'
 import { NetworkSettingsCard } from '..'
+import { ClearDiscoveryCache } from '../ClearDiscoveryCache'
 
 describe('NetworkSettingsCard', () => {
   it('should render a card with the proper title', () => {
@@ -14,6 +15,11 @@ describe('NetworkSettingsCard', () => {
 
   it('should render an AddManualIp setting component', () => {
     const wrapper = shallow(<NetworkSettingsCard />)
-    expect(wrapper.find(AddManualIp)).toHaveLength(1)
+    expect(wrapper.exists(AddManualIp)).toBe(true)
+  })
+
+  it('should render a ClearDiscoveryCache component', () => {
+    const wrapper = shallow(<NetworkSettingsCard />)
+    expect(wrapper.exists(ClearDiscoveryCache)).toBe(true)
   })
 })