feat(native): add CheckboxField component

.ci/config/react-native.js

@@ -0,0 +1,2 @@
+jest.mock('react-native/Libraries/Components/Touchable/TouchableWithoutFeedback',
+  () => 'TouchableWithoutFeedback');

packages/junipero-native/jest.config.js

@@ -9,13 +9,17 @@ module.exports = {
   moduleNameMapper: {
     '^@poool/junipero-(.+)$': '<rootDir>/packages/junipero-$1/lib/index.js',
   },
-  testEnvironment: 'jest-environment-jsdom-fourteen',
-  testMatch: ['<rootDir>/packages/junipero-native/lib/*.test.js'],
+  testMatch: ['<rootDir>/packages/junipero-native/lib/**/*.test.js'],
   testPathIgnorePatterns: [
-    '/node_modules/',
+    'node_modules',
+  ],
+  coveragePathIgnorePatterns: [
+    'node_modules',
+    'theme',
+    '^.+\\.stories.js$',
+    '^.+\\.styles.js$',
   ],
   setupFilesAfterEnv: [
-    '<rootDir>/.ci/config/enzyme.js',
-    '<rootDir>/.ci/config/popper.js',
+    '<rootDir>/.ci/config/react-native.js',
   ],
 };

packages/junipero-native/lib/CheckboxField/index.js

@@ -37,6 +37,7 @@ const CheckboxField = forwardRef(({
   useImperativeHandle(ref, () => ({
     innerRef,
     inputRef,
+    internalValue: state.checked,
     focused: state.focused,
     active: state.active,
   }));
@@ -71,17 +72,18 @@ const CheckboxField = forwardRef(({
       onPressIn={onPressIn_}
       onPressOut={onPressOut_}
       onPress={onChange_}
+      onFocus={onFocus_}
+      onBlur={onBlur_}
+      testID="CheckboxField/Main"
     >
       <View
-        focusable={true}
         ref={innerRef}
-        onFocus={onFocus_}
-        onBlur={onBlur_}
         style={[
           styles.wrapper,
           customStyle.wrapper,
         ]}
         { ...rest }
+        testID="CheckboxField/Wrapper"
       >
         <View
           style={[
@@ -96,6 +98,7 @@ const CheckboxField = forwardRef(({
               customStyle.check__focused,
             ]),
           ]}
+          testID="CheckboxField/Check"
         >
           <View
             style={[
@@ -106,6 +109,7 @@ const CheckboxField = forwardRef(({
                 customStyle.tick__checked,
               ]),
             ]}
+            testID="CheckboxField/Tick"
           />
           <View
             style={[
@@ -116,11 +120,20 @@ const CheckboxField = forwardRef(({
                 customStyle.checkBackground__checked,
               ]),
             ]}
+            testID="CheckboxField/CheckBackground"
           />
         </View>
-        <View style={[styles.content, customStyle.content]}>
+        <View
+          style={[styles.content, customStyle.content]}
+          testID="CheckboxField/Content"
+        >
           { typeof children === 'string' ? (
-            <Text style={[styles.text, customStyle.text]}>{ children }</Text>
+            <Text
+              style={[styles.text, customStyle.text]}
+              testID="CheckboxField/Text"
+            >
+              { children }
+            </Text>
           ) : children }
         </View>
       </View>
@@ -142,4 +155,6 @@ CheckboxField.propTypes = {
   ]),
 };
 
+CheckboxField.displayName = 'CheckboxField';
+
 export default CheckboxField;

packages/junipero-native/lib/CheckboxField/index.styles.js

@@ -1,13 +1,13 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 
 import { colors, commons } from '../theme';
 
 export default StyleSheet.create({
   wrapper: {
-    cursor: 'pointer',
+    ...(Platform.OS === 'web' ? { cursor: 'pointer' } : {}),
     flexDirection: 'row',
-    alignItems: 'start',
-    justifyContent: 'start',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
   },
   check: {
     flex: -1,
@@ -42,10 +42,8 @@ export default StyleSheet.create({
     width: 5,
     height: 9,
     borderBottomWidth: 2,
-    borderBottomStyle: 'solid',
     borderBottomColor: colors.white,
     borderRightWidth: 2,
-    borderRightStyle: 'solid',
     borderRightColor: colors.white,
     transform: [
       { translateX: '-50%' },

packages/junipero-native/lib/CheckboxField/index.test.js

@@ -1,10 +1,63 @@
-import React from 'react';
-import { mount } from 'enzyme';
+import React, { createRef } from 'react';
+import sinon from 'sinon';
+import { render, wait, fireEvent } from '@testing-library/react-native';
 
 import CheckboxField from './';
 
-describe('test', () => {
-  it('should render', () => {
-    expect(mount(<CheckboxField />).html()).toBe('<div></div>');
+describe('<CheckboxField />', () => {
+
+  it('should render', async () => {
+    const ref = createRef();
+    const { getByTestId } = render(
+      <CheckboxField ref={ref}>Check this</CheckboxField>
+    );
+
+    await wait(() => getByTestId('CheckboxField/Main'));
+    expect(getByTestId('CheckboxField/Main')).toBeDefined();
+    fireEvent.press(getByTestId('CheckboxField/Main'));
+    expect(ref.current.internalValue).toBe(true);
+    fireEvent.focus(getByTestId('CheckboxField/Main'));
+    expect(ref.current.focused).toBe(true);
+    fireEvent.blur(getByTestId('CheckboxField/Main'));
+    expect(ref.current.focused).toBe(false);
   });
+
+  it('should correctly fire onChange event', async () => {
+    const onChange = sinon.spy();
+    const { getByTestId } = render(<CheckboxField onChange={onChange} />);
+    await wait(() => getByTestId('CheckboxField/Main'));
+    fireEvent.press(getByTestId('CheckboxField/Main'));
+    expect(onChange.calledWith(sinon.match({ checked: true })))
+      .toBe(true);
+    fireEvent.press(getByTestId('CheckboxField/Main'));
+    expect(onChange.calledWith(sinon.match({ checked: false })))
+      .toBe(true);
+  });
+
+  it('should toggle checkbox active state on click', async () => {
+    const ref = createRef();
+    const { getByTestId } = render(<CheckboxField ref={ref} />);
+    await wait(() => getByTestId('CheckboxField/Main'));
+    fireEvent.pressIn(getByTestId('CheckboxField/Main'));
+    expect(ref.current.active).toBe(true);
+    fireEvent.pressOut(getByTestId('CheckboxField/Main'));
+    expect(ref.current.active).toBe(false);
+  });
+
+  it('should toggle checkbox focused state on focus', async () => {
+    const ref = createRef();
+    const onFocus = sinon.spy();
+    const onBlur = sinon.spy();
+    const { getByTestId } = render(
+      <CheckboxField onFocus={onFocus} onBlur={onBlur} ref={ref} />
+    );
+    await wait(() => getByTestId('CheckboxField/Main'));
+    fireEvent.focus(getByTestId('CheckboxField/Main'));
+    expect(ref.current.focused).toBe(true);
+    expect(onFocus.called).toBe(true);
+    fireEvent.blur(getByTestId('CheckboxField/Main'));
+    expect(ref.current.focused).toBe(false);
+    expect(onBlur.called).toBe(true);
+  });
+
 });