feat(native): change Button base component & add tests

p3ol · Jul 20, 2020 · 06f6cc9 · 06f6cc9
1 parent 31f61ca
commit 06f6cc9
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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);
+  });
 });