fix: adjust condition for displaying icon (#3574)

callstack · Jan 9, 2023 · ce990de · ce990de
1 parent 9273d37
commit ce990de
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 44 deletions.
diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -119,9 +119,12 @@ const SegmentedButtonItem = ({
   });
   const rippleColor = color(textColor).alpha(0.12).rgb().string();
 
+  const showIcon = !icon ? false : label && checked ? !showSelectedCheck : true;
+  const showCheckedIcon = checked && showSelectedCheck;
+
   const iconSize = isV3 ? 18 : 16;
   const iconStyle = {
-    marginRight: label ? 5 : checked && showSelectedCheck ? 3 : 0,
+    marginRight: label ? 5 : showCheckedIcon ? 3 : 0,
     ...(label && {
       transform: [
         {
@@ -146,7 +149,6 @@ const SegmentedButtonItem = ({
     borderRadius,
     ...segmentBorderRadius,
   };
-  const showIcon = icon && !label ? true : checked ? !showSelectedCheck : true;
   const labelTextStyle: TextStyle = {
     ...(!isV3
       ? {
@@ -171,7 +173,7 @@ const SegmentedButtonItem = ({
         style={rippleStyle}
       >
         <View style={[styles.content, { paddingVertical }]}>
-          {checked && showSelectedCheck ? (
+          {showCheckedIcon ? (
             <Animated.View
               testID={`${testID}-check-icon`}
               style={[iconStyle, { transform: [{ scale: checkScale }] }]}
@@ -180,7 +182,7 @@ const SegmentedButtonItem = ({
             </Animated.View>
           ) : null}
           {showIcon ? (
-            <Animated.View style={iconStyle}>
+            <Animated.View testID={`${testID}-icon`} style={iconStyle}>
               <Icon
                 source={icon}
                 size={iconSize}

diff --git a/src/components/__tests__/SegmentedButton.test.js b/src/components/__tests__/SegmentedButton.test.js
@@ -237,6 +237,139 @@ describe('getDisabledSegmentedButtonBorderWidth', () => {
   });
 });
 
+describe('should render icon when', () => {
+  it('icon prop is passed', () => {
+    const { getByTestId } = render(
+      <SegmentedButtons
+        value={'walk'}
+        buttons={[
+          {
+            icon: 'walk',
+            value: 'walk',
+            testID: 'walking-button',
+          },
+          {
+            icon: 'car',
+            value: 'drive',
+            testID: 'driving-button',
+          },
+        ]}
+        onValueChange={() => {}}
+      />
+    );
+
+    expect(getByTestId('walking-button-icon')).toBeTruthy();
+    expect(getByTestId('driving-button-icon')).toBeTruthy();
+  });
+
+  it('icon prop is passed along with label, no matter if button is checked', () => {
+    const { getByTestId } = render(
+      <SegmentedButtons
+        value={'walk'}
+        buttons={[
+          {
+            icon: 'walk',
+            value: 'walk',
+            label: 'Walking',
+            testID: 'walking-button',
+          },
+          {
+            icon: 'car',
+            value: 'drive',
+            label: 'Driving',
+            testID: 'driving-button',
+          },
+        ]}
+        onValueChange={() => {}}
+      />
+    );
+
+    expect(getByTestId('walking-button-icon')).toBeTruthy();
+    expect(getByTestId('driving-button-icon')).toBeTruthy();
+  });
+
+  it('icon prop is passed along with label, button is checked, showSelectedCheck is false', () => {
+    const { getByTestId } = render(
+      <SegmentedButtons
+        value={'walk'}
+        buttons={[
+          {
+            icon: 'walk',
+            value: 'walk',
+            label: 'Walking',
+            testID: 'walking-button',
+            showSelectedCheck: false,
+          },
+          {
+            icon: 'car',
+            value: 'drive',
+            label: 'Driving',
+            testID: 'driving-button',
+            showSelectedCheck: false,
+          },
+        ]}
+        onValueChange={() => {}}
+      />
+    );
+
+    expect(getByTestId('walking-button-icon')).toBeTruthy();
+    expect(getByTestId('driving-button-icon')).toBeTruthy();
+  });
+});
+
+describe('should not render icon when', () => {
+  it('icon prop is not passed', () => {
+    const { queryByTestId } = render(
+      <SegmentedButtons
+        value={'walk'}
+        buttons={[
+          {
+            value: 'walk',
+            testID: 'walking-button',
+          },
+          {
+            value: 'drive',
+            testID: 'driving-button',
+          },
+        ]}
+        onValueChange={() => {}}
+      />
+    );
+
+    expect(queryByTestId('walking-button-icon')).toBeNull();
+    expect(queryByTestId('driving-button-icon')).toBeNull();
+  });
+
+  it('icon prop is passed along with label, button is checked, showSelectedCheck is true', () => {
+    const { getByTestId, queryByTestId } = render(
+      <SegmentedButtons
+        value={'walk'}
+        buttons={[
+          {
+            icon: 'walk',
+            label: 'Walking',
+            value: 'walk',
+            testID: 'walking-button',
+            showSelectedCheck: true,
+          },
+          {
+            icon: 'car',
+            label: 'Driving',
+            value: 'drive',
+            testID: 'driving-button',
+            showSelectedCheck: true,
+          },
+        ]}
+        onValueChange={() => {}}
+      />
+    );
+
+    expect(queryByTestId('walking-button-icon')).toBeNull();
+    expect(getByTestId('walking-button-check-icon')).toBeTruthy();
+    expect(getByTestId('driving-button-icon')).toBeTruthy();
+  });
+});
+
 describe('should have `accessibilityState={ checked: true }` when selected', () => {
   it('should have two button selected', () => {
     const onValueChange = jest.fn();

diff --git a/src/components/__tests__/__snapshots__/SegmentedButton.test.js.snap b/src/components/__tests__/__snapshots__/SegmentedButton.test.js.snap
@@ -250,14 +250,6 @@ exports[`renders checked segmented button with selected check 1`] = `
           ]
         }
       >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "marginRight": 0,
-            }
-          }
-        />
         <Text
           numberOfLines={1}
           selectable={false}
@@ -387,14 +379,6 @@ exports[`renders disabled segmented button 1`] = `
           ]
         }
       >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "marginRight": 0,
-            }
-          }
-        />
         <Text
           numberOfLines={1}
           selectable={false}
@@ -506,14 +490,6 @@ exports[`renders disabled segmented button 1`] = `
           ]
         }
       >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "marginRight": 0,
-            }
-          }
-        />
         <Text
           numberOfLines={1}
           selectable={false}
@@ -641,14 +617,6 @@ exports[`renders segmented button 1`] = `
           ]
         }
       >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "marginRight": 0,
-            }
-          }
-        />
         <Text
           numberOfLines={1}
           selectable={false}
@@ -760,14 +728,6 @@ exports[`renders segmented button 1`] = `
           ]
         }
       >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "marginRight": 0,
-            }
-          }
-        />
         <Text
           numberOfLines={1}
           selectable={false}