refactor: updated DialogActions.tsx and tests

Author: kachmashk

src/components/Dialog/DialogActions.tsx

@@ -61,15 +61,14 @@ const DialogActions = ({ children, style, theme, ...rest }: Props) => {
   return (
     <View {...rest} style={[styles.v3Container, style]}>
       {actions.map((child, index) => (
-        <View
-          key={child.key ?? index}
-          style={[
-            index === actions.length - 1 ? styles.itemLast : styles.item,
-            child.props.style,
-          ]}
+        <React.Fragment
+          key={
+            React.isValidElement(child) && child.key != null ? child.key : index
+          }
         >
+          {index > 0 && <View style={styles.spacer} />}
           {child}
-        </View>
+        </React.Fragment>
       ))}
     </View>
   );
@@ -86,11 +85,8 @@ const styles = StyleSheet.create({
     paddingBottom: 24,
     paddingHorizontal: 24,
   },
-  item: {
-    marginRight: 8,
-  },
-  itemLast: {
-    marginRight: 0,
+  spacer: {
+    width: 8,
   },
 });
 

src/components/__tests__/Dialog.test.tsx

@@ -219,29 +219,36 @@ describe('DialogActions', () => {
     );
 
     const dialogActionsContainer = screen.getByTestId('dialog-actions');
-    const dialogActionButtons = dialogActionsContainer.children;
+    const dialogActionChildren = dialogActionsContainer.children;
 
     expect(dialogActionsContainer).toHaveStyle({
       paddingBottom: 24,
       paddingHorizontal: 24,
     });
-    expect(dialogActionButtons[0]).toHaveStyle({ marginRight: 8 });
-    expect(dialogActionButtons[1]).toHaveStyle({ marginRight: 0 });
+
+    // We expect 3 children because Dialog.Actions puts <View style={{ width: 8 }} /> in between actions to add a proper styling
+    expect(dialogActionChildren).toHaveLength(3);
+    expect(dialogActionChildren[1]).toHaveStyle({ width: 8 });
   });
 
   it('should apply custom styles', async () => {
     await render(
       <Dialog.Actions testID="dialog-actions">
-        <Button style={styles.spacing}>Cancel</Button>
-        <Button style={styles.noSpacing}>Ok</Button>
+        <Button testID="button-cancel" style={styles.spacing}>
+          Cancel
+        </Button>
+        <Button testID="button-ok" style={styles.noSpacing}>
+          Ok
+        </Button>
       </Dialog.Actions>
     );
 
-    const dialogActionsContainer = screen.getByTestId('dialog-actions');
-    const dialogActionButtons = dialogActionsContainer.children;
-
-    expect(dialogActionButtons[0]).toHaveStyle({ margin: 10 });
-    expect(dialogActionButtons[1]).toHaveStyle({ margin: 0 });
+    expect(screen.getByTestId('button-cancel-container')).toHaveStyle({
+      margin: 10,
+    });
+    expect(screen.getByTestId('button-ok-container')).toHaveStyle({
+      margin: 0,
+    });
   });
 });