Merge pull request #4 from lawnstarter/task/add-unit-tests

Task/add unit tests

Author: lfkwtz

.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [
+      "react-native"
+    ]
+  }

.circleci/config.yml

@@ -0,0 +1,38 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:8.9.4-browsers
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      # run tests!
+      - run: yarn test
+

.gitignore

@@ -1 +1,3 @@
-node_modules
+.DS_Store
+node_modules/
+coverage/

package.json

@@ -20,13 +20,36 @@
     "lodash.isequal": "^4.5.0"
   },
   "devDependencies": {
+    "babel-jest": "^22.2.2",
+    "babel-preset-react-native": "^4.0.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.1",
     "eslint": "^4.17.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.6.1",
+    "jest": "^22.3.0",
     "prop-types": "^15.6.0",
     "react": "16.0.0",
-    "react-native": "0.51.0"
+    "react-dom": "^16.2.0",
+    "react-native": "0.51.0",
+    "react-test-renderer": "^16.2.0"
+  },
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "open:coverage": "open ./coverage/lcov-report/index.html"
+  },
+  "jest": {
+    "preset": "react-native",
+    "setupFiles": [
+      "./test/setup.js"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   }
 }

test/setup.js

@@ -0,0 +1,10 @@
+import Enzyme, { shallow, render, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+// React 16 Enzyme adapter
+Enzyme.configure({ adapter: new Adapter() });
+
+// Make Enzyme functions available in all test files without importing
+global.shallow = shallow;
+global.render = render;
+global.mount = mount;

test/test.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import RNPickerSelect from '../src/';
+
+const selectItems = [
+  {
+    label: 'Orange',
+    value: 'orange',
+  },
+  {
+    label: 'Red',
+    value: 'red',
+  },
+  {
+    label: 'Green',
+    value: 'green',
+  },
+  {
+    label: 'Purple',
+    value: 'purple',
+  },
+  {
+    label: 'Yellow',
+    value: 'yellow',
+  },
+];
+
+const placeholder = {
+  label: 'Select a color...',
+  value: null,
+};
+
+describe('RNPickerSelect', () => {
+  it('should set the picked value to state', () => {
+    const wrapper = shallow(<RNPickerSelect
+      items={selectItems}
+      placeholder={placeholder}
+      onSelect={() => {}}
+    />);
+
+    wrapper.find('[testId="RNPickerSelectIOS"]').props().onValueChange('orange', 1);
+    expect(wrapper.state().selectedItem.value).toEqual('orange');
+  });
+
+  it('should return the expected option to a callback passed into onSelect', () => {
+    const onSelectSpy = jest.fn();
+    const wrapper = shallow(<RNPickerSelect
+      items={selectItems}
+      placeholder={placeholder}
+      onSelect={onSelectSpy}
+    />);
+
+    wrapper.find('[testId="RNPickerSelectIOS"]').props().onValueChange('orange', 1);
+    expect(onSelectSpy).toHaveBeenCalledWith({ index: 1, value: 'orange' });
+  });
+
+  it('should show the picker when pressed', () => {
+    const wrapper = shallow(<RNPickerSelect
+      items={selectItems}
+      placeholder={placeholder}
+      onSelect={() => {}}
+    />);
+
+    const touchable = wrapper.find('TouchableWithoutFeedback').at(1);
+    touchable.simulate('press');
+    expect(wrapper.state().showPicker).toEqual(true);
+  });
+
+  it('should not show the picker when pressed if disabled', () => {
+    const wrapper = shallow(<RNPickerSelect
+      items={selectItems}
+      placeholder={placeholder}
+      onSelect={() => {}}
+      disabled
+    />);
+
+    const touchable = wrapper.find('TouchableWithoutFeedback').at(1);
+    touchable.simulate('press');
+    expect(wrapper.state().showPicker).toEqual(false);
+  });
+
+  it('should update the picked value when the parent updates', () => {
+    const wrapper = shallow(<RNPickerSelect
+      items={selectItems}
+      placeholder={placeholder}
+      onSelect={() => {}}
+      value="red"
+    />);
+
+    expect(wrapper.state().selectedItem.value).toEqual('red');
+    wrapper.setProps({ value: 'orange' });
+    expect(wrapper.state().selectedItem.value).toEqual('orange');
+  });
+
+  it('should set the picked value to state (Android)', () => {
+    Platform.OS = 'android';
+    const wrapper = shallow(<RNPickerSelect
+      items={selectItems}
+      placeholder={placeholder}
+      onSelect={() => {}}
+    />);
+
+    wrapper.find('[testId="RNPickerSelectAndroid"]').props().onValueChange('orange', 1);
+    expect(wrapper.state().selectedItem.value).toEqual('orange');
+  });
+});