Add Unit test + fix clicking in the middle of the delete button does …

…nothing
observation · May 6, 2024 · eba0817 · eba0817
1 parent 2b077b0
commit eba0817
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 45 deletions.
diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
@@ -5,7 +5,6 @@ import ImageView from '@observation.org/react-native-image-viewing'
 import Color from 'color'
 
 import { Icon } from './Icon'
-import IconButton from './IconButton'
 import PageIndicator from './PageIndicator'
 import font from '../styles/font'
 import textStyle from '../styles/text'
@@ -62,7 +61,7 @@ const getLightboxFooterComponent =
           <View style={styles.buttonsContainer}>
             <View style={styles.buttonContainer}>
               <TouchableOpacity onPress={onPressDelete} hitSlop={hitSlop}>
-                <IconButton testID="delete-photo" icon={{ name: 'trash-alt', size: 20, color: theme.color.white }} />
+                <Icon name="trash-alt" color={theme.color.white} size={20} testID="delete-photo" />
               </TouchableOpacity>
             </View>
           </View>

diff --git a/src/components/__tests__/Lightbox.test.tsx b/src/components/__tests__/Lightbox.test.tsx
@@ -15,6 +15,15 @@ const content = <Text>Jan de Vogelaar</Text>
 
 let onClose: () => void
 
+let mockOnImageIndexChange = jest.fn()
+jest.mock('@observation.org/react-native-image-viewing', () => {
+  const actualModule = jest.requireActual('@observation.org/react-native-image-viewing')
+  return (props: any) => {
+    mockOnImageIndexChange = props.onImageIndexChange as any
+    return actualModule.default(props)
+  }
+})
+
 describe('Lightbox', () => {
   beforeEach(() => {
     onClose = jest.fn()
@@ -85,13 +94,28 @@ describe('Lightbox', () => {
     test('Press delete button calls onDelete', async () => {
       // GIVEN
       const onDelete = jest.fn()
-      const { getByTestId } = render(<Lightbox photos={photos} index={1} onClose={onClose} onDelete={onDelete} />)
+      const { getByTestId } = render(<Lightbox photos={photos} index={0} onClose={onClose} onDelete={onDelete} />)
+
+      // WHEN
+      await fireEvent.press(getByTestId('delete-photo'))
+
+      // THEN
+      expect(onDelete).toHaveBeenCalledWith(0)
+    })
+
+    test('When swiping to the second photo and pressing the delete button, onDelete is called with the second photo', async () => {
+      // GIVEN
+      jest.mock('@observation.org/react-native-image-viewing', () => 'ImageCarousel')
+
+      const onDelete = jest.fn()
+      const { getByTestId } = render(<Lightbox photos={photos} index={0} onClose={onClose} onDelete={onDelete} />)
 
       // WHEN
+      mockOnImageIndexChange(1)
       await fireEvent.press(getByTestId('delete-photo'))
 
       // THEN
-      expect(onDelete).toHaveBeenCalled()
+      expect(onDelete).toHaveBeenCalledWith(1)
     })
   })
 })
diff --git a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
@@ -2013,48 +2013,13 @@ exports[`Lightbox Rendering With a delete button 1`] = `
                   }
                 }
               >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={false}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  style={
-                    {
-                      "opacity": 1,
-                    }
-                  }
+                <Icon
+                  color="#FFFFFF"
+                  name="trash-can"
+                  size={20}
                   testID="delete-photo"
-                >
-                  <Icon
-                    color="#FFFFFF"
-                    name="trash-can"
-                    size={20}
-                    type="light"
-                  />
-                </View>
+                  type="light"
+                />
               </View>
             </View>
           </View>