From 06f6cc9ba46aa35dc9d55184c64dc7c0b6ca2cbf Mon Sep 17 00:00:00 2001
From: defless <simon.deflesschouwer@mmibordeaux.com>
Date: Mon, 20 Jul 2020 10:43:07 +0200
Subject: [PATCH] feat(native): change Button base component & add tests

---
 packages/junipero-native/lib/Button/index.js  | 67 ++++++++++++-------
 .../lib/Button/index.stories.js               |  4 +-
 .../junipero-native/lib/Button/index.test.js  | 45 +++++++++++--
 3 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/packages/junipero-native/lib/Button/index.js b/packages/junipero-native/lib/Button/index.js
index 72f122181..03239cb0b 100644
--- a/packages/junipero-native/lib/Button/index.js
+++ b/packages/junipero-native/lib/Button/index.js
@@ -1,50 +1,71 @@
-import React from 'react';
+import React, { useState, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { TouchableOpacity, Text } from 'react-native';
+import { TouchableWithoutFeedback, Text, View } from 'react-native';
 
 import styles from './index.styles';
 import { applyStyles } from '../theme';
 
-const Button = ({
+const Button = forwardRef(({
   children,
   testID = 'Button',
   disabled = false,
-  onClick = () => {},
+  onPress = () => {},
   customStyle = {},
   ...rest
-}) => {
+}, ref) => {
+
+  const [active, setActive] = useState(false);
+
+  useImperativeHandle(ref, () => ({
+    active: active,
+  }));
+
   const onPress_ = e => {
     if (disabled) {
       return;
     }
+    onPress(e);
+  };
 
-    onClick(e);
+  const onPressIn_ = () => {
+    setActive(true);
+  };
+
+  const onPressOut_ = () => {
+    setActive(false);
   };
 
   return (
-    <TouchableOpacity
-      { ...rest }
-      style={[
-        styles.button,
-        customStyle,
-        applyStyles(disabled, styles.disabledButton),
-      ]}
-      disabled={ disabled }
+    <TouchableWithoutFeedback
+      testID={ testID }
+      onPress={ onPress_ }
+      onPressIn={ !disabled && onPressIn_ }
+      onPressOut={ !disabled && onPressOut_ }
     >
-      <Text
-        onPress={ onPress_ }
-        style={styles.title}
-        testID={ testID }>
-        {children}
-      </Text>
-    </TouchableOpacity>
+      <View
+        { ...rest }
+        style={[
+          styles.button,
+          customStyle.button,
+          applyStyles(disabled, styles.disabledButton),
+        ]}
+      >
+        { typeof children === 'string' ? (
+          <Text
+            style={[styles.title, customStyle.title]}
+          >
+            { children }
+          </Text>
+        ) : children }
+      </View>
+    </TouchableWithoutFeedback>
   );
-};
+});
 
 Button.propTypes = {
   customStyle: PropTypes.object,
   disabled: PropTypes.bool,
-  onClick: PropTypes.func,
+  onPress: PropTypes.func,
   testID: PropTypes.string,
 };
 
diff --git a/packages/junipero-native/lib/Button/index.stories.js b/packages/junipero-native/lib/Button/index.stories.js
index d22148722..bc9c9684d 100644
--- a/packages/junipero-native/lib/Button/index.stories.js
+++ b/packages/junipero-native/lib/Button/index.stories.js
@@ -9,7 +9,9 @@ export const basic = () => (
 );
 
 export const customStyles = () => (
-  <Button customStyle={{ backgroundColor: 'green' }}> Clique ici</Button>
+  <Button customStyle={{ button: { backgroundColor: 'green' } }}>
+    Clique ici
+  </Button>
 );
 
 export const disabled = () => (
diff --git a/packages/junipero-native/lib/Button/index.test.js b/packages/junipero-native/lib/Button/index.test.js
index f8eafe138..ff8b0f106 100644
--- a/packages/junipero-native/lib/Button/index.test.js
+++ b/packages/junipero-native/lib/Button/index.test.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { createRef } from 'react';
+import { Text } from 'react-native';
 import { render, wait, fireEvent } from '@testing-library/react-native';
 import sinon from 'sinon';
 
@@ -8,25 +9,55 @@ describe('<TextField />', () => {
 
   it('should render', async () => {
 
-    const onClick = sinon.spy();
-
-    const { getByTestId } = render(<Button onClick={onClick}>Click</Button>);
+    const { getByTestId } = render(<Button>Click</Button>);
     await wait(() => getByTestId('Button'));
     expect(getByTestId('Button')).toBeDefined();
-    console.log(render(<Button onClick={onClick}>Click</Button>).debug());
 
     fireEvent.press(getByTestId('Button'));
-    expect(onClick.called).toBe(true);
 
   });
+
+  it('should fire onPress event by clicking the button', async () => {
+
+    const onPress = sinon.spy();
+
+    const { getByTestId } = render(<Button onPress={onPress}>Click</Button>);
+    await wait(() => getByTestId('Button'));
+
+    fireEvent.press(getByTestId('Button'));
+    expect(onPress.called).toBe(true);
+  });
+
   it('should not be able to press if button is disabled', async () => {
 
     const onPress = sinon.spy();
 
-    const { getByTestId } = render(<Button disabled onPress={onPress} />);
+    const { getByTestId } = render(
+      <Button disabled onPress={onPress}>Click</Button>
+    );
     await wait(() => getByTestId('Button'));
 
     fireEvent.press(getByTestId('Button'));
     expect(onPress.called).toBe(false);
   });
+
+  it('should render with the provided component as children', async () => {
+
+    const { getByTestId } = render(
+      <Button><Text testID='title'>Click</Text></Button>
+    );
+    await wait(() => getByTestId('title'));
+    expect(getByTestId('title')).toBeDefined();
+
+  });
+
+  it('should toggle button active state on click', async () => {
+    const ref = createRef();
+    const { getByTestId } = render(<Button ref={ref}> Click </Button>);
+    await wait(() => getByTestId('Button'));
+    fireEvent.pressIn(getByTestId('Button'));
+    expect(ref.current.active).toBe(true);
+    fireEvent.pressOut(getByTestId('Button'));
+    expect(ref.current.active).toBe(false);
+  });
 });