Merge pull request tttstudios#47 from Twotalltotems/improvement/unit-test-setup

Unit Test Setup & Github Action

Author: fpena

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+name: Tests
+
+on:
+ push:
+ branches: 
+ - master
+ pull_request:
+ branches:
+ - master
+
+
+jobs:
+ build:
+
+ runs-on: ubuntu-latest
+
+ container:
+ image: node:13.4.0
+
+ steps:
+ - uses: actions/checkout@v1
+ - name: Run Jest
+ uses: stefanoeb/jest-action@1.0.2
+ - name: Run Unit Test
+ run: npm install --only=dev && npm test
+ 

CONTRIBUTING.md

@@ -0,0 +1,32 @@
+# Introduction
+
+Thank you for considering contributing to `@twotalltotems/react-native-otp-input`. It's people like you that make the library better.
+
+# Ways to Contribute
+
+There are many ways to contribute, from writing tutorials or blog posts, improving the documentation, submitting bug reports and feature requests or writing code which can be incorporated into the library.
+
+
+# Your First Contribution
+If you decided to look into a pending issue, hope the guideline below can help you start.
+
+>1. Create your own fork of the code
+>2. Do the changes in your fork
+>3. If you like the change and think the project could use it: 
+* Be sure you have followed the code style for the project.
+* Well test your changes and add unit tests if necessary. 
+* Be sure to run `npm test` before submitting a pull request. This would help us maintain the compatablity of the library. 
+>4. Send a pull request. 
+
+# Code review process
+The development team in TTT Studios looks at Pull Requests on a regular basis. Depends on the PR reviewed, we might reach out with some feedback or clarification. 
+
+After feedback/clarification has been given we expect responses within two weeks. After two weeks we may close the pull request if it isn't showing any activity.
+
+TTT Studios appreaciate your interest and effort in contributing to the library. Look forward to your great Pull Requests!
+
+
+
+
+
+

README.md

@@ -1,6 +1,8 @@
 ![PaginatableList](https://raw.githubusercontent.com/Twotalltotems/react-native-otp-input/master/assets/otp_banner.jpg)
 # React Native OTP Input
 
+![Tests](https://github.com/Twotalltotems/react-native-otp-input/workflows/Tests/badge.svg)
+
 **@twotalltotems/react-native-otp-input** is a tiny Javascript library which provides an elegant UI for the end user to input one time passcode (OTP). It handles the input suggestion on iOS when the OTP SMS is received. For Android, it will autofill when the user presses the copy button on the SMS notification bar. It also features a carefully crafted flow to handle edge cases for volatile user gestures. We provide default UI, but you can always customize the appearance as you like.
 
 ![demo.gif](https://s3.ca-central-1.amazonaws.com/tttevents/iosvideo.gif)

__tests__/App.test.js

@@ -0,0 +1,41 @@
+import "react-native"
+import React from 'react'
+import { shallow, mount } from 'enzyme'
+import OTPInputView from '../index'
+
+const setup = (props = {}) => {
+ const wrapper = shallow(<OTPInputView {...props} />)
+ return wrapper;
+}
+
+describe('OTPInputView renders correclty.', () => {
+ let shallowWrapper;
+ it('OTP container view renders correctly.', () => {
+ shallowWrapper = setup()
+ const otpInputView = shallowWrapper.find({ testID: 'OTPInputView' })
+ 
+ expect(otpInputView.length).toBe(1)
+ })
+ 
+ it('Render same amount of input slots as prop `pinCount`', () => {
+ const pinCount = 6
+ shallowWrapper = setup({ pinCount })
+ const inputSlotViews = shallowWrapper.find({ testID: 'inputSlotView' })
+
+ expect(inputSlotViews.length).toBe(pinCount)
+ })
+
+ it('Render the slots initial state as `code` prop.', () => {
+ const code = '123456'
+ const pinCount = code.length
+ const reactWrapper = mount(<OTPInputView code={code} pinCount={pinCount} />)
+ const textInputs = reactWrapper.find({ testID: 'textInput' }).hostNodes()
+ const chars = code.split('')
+
+ textInputs.map((textInput, index) => {
+ expect(textInput.props().value).toBe(chars[index])
+ })
+ })
+})
+
+

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+ presets: ["module:metro-react-native-babel-preset"]
+}

index.js

@@ -195,8 +195,9 @@ export default class OTPInputView extends Component {
  const { clearInputs, placeholderCharacter, placeholderTextColor } = this.props
  const { color: defaultPlaceholderTextColor } = { ...defaultTextFieldStyle, ...codeInputFieldStyle }
  return (
- <View pointerEvents="none" key={index + "view"}>
+ <View pointerEvents="none" key={index + "view"} testID="inputSlotView">
  <TextInput
+ testID="textInput"
  underlineColorAndroid='rgba(0,0,0,0)'
  style={selectedIndex === index ? [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle] : [defaultTextFieldStyle, codeInputFieldStyle]}
  ref={ref => { this.fields[index] = ref }}
@@ -228,6 +229,7 @@ export default class OTPInputView extends Component {
  const digits = this.getDigits()
  return (
  <View
+ testID="OTPInputView"
  style={style}
  >
  <TouchableWithoutFeedback

package.json

@@ -3,11 +3,25 @@
  "version": "1.2.0",
  "description": "is a tiny JS library for one time passcode (OTP). Supports smart input suggestion on iOS and code autofill on Android (it will be filled when you press the copy button on the SMS notification bar)",
  "main": "index.js",
- "directories": {
- "test": "test"
- },
  "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "start": "node node_modules/react-native/local-cli/cli.js start",
+ "test": "jest"
+ },
+ "jest": {
+ "preset": "react-native",
+ "setupFilesAfterEnv": [
+ "<rootDir>setup-tests.js"
+ ],
+ "testEnvironment": "enzyme",
+ "testEnvironmentOptions": {
+ "enzymeAdapter": "react16"
+ },
+ "testMatch": [
+ "<rootDir>/__tests__/*.test.js"
+ ],
+ "transform": {
+ "^.+\\.jsx$": "babel-jest"
+ }
  },
  "repository": {
  "type": "git",
@@ -31,5 +45,18 @@
  "Anson Yao <yaoenxin@gmail.com> (https://github.com/ansonyao)",
  "Felipe Peña <felipe@penya.cl> (http://felipe.penya.cl)"
  ],
- "license": "MIT"
+ "license": "MIT",
+ "devDependencies": {
+ "@babel/core": "^7.8.4",
+ "babel-jest": "^25.1.0",
+ "enzyme": "^3.11.0",
+ "enzyme-adapter-react-16": "^1.15.2",
+ "jest": "^25.1.0",
+ "jest-environment-enzyme": "^7.1.2",
+ "jest-enzyme": "^7.1.2",
+ "jsdom": "^16.1.0",
+ "react": "16",
+ "react-dom": "^16.12.0",
+ "react-native": "^0.61.5"
+ }
 }

setup-tests.js

@@ -0,0 +1,45 @@
+import 'react-native';
+import 'jest-enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Enzyme from 'enzyme';
+
+/**
+ * Set up DOM in node.js environment for Enzyme to mount to
+ */
+const { JSDOM } = require('jsdom');
+
+const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
+const { window } = jsdom;
+
+function copyProps(src, target) {
+ Object.defineProperties(target, {
+ ...Object.getOwnPropertyDescriptors(src),
+ ...Object.getOwnPropertyDescriptors(target),
+ });
+}
+
+global.window = window;
+global.document = window.document;
+global.navigator = {
+ userAgent: 'node.js',
+};
+copyProps(window, global);
+
+/**
+ * Resolve the unnecessary warning log while running unit test.
+ * Referring solution from https://github.com/airbnb/enzyme/issues/831#issuecomment-490644160
+ */
+const originalConsoleError = console.error;
+console.error = (message) => {
+ if (message.startsWith('Warning:')) {
+ return;
+ }
+
+ originalConsoleError(message);
+};
+
+/**
+ * Set up Enzyme to mount to DOM, simulate events,
+ * and inspect the DOM in tests.
+ */
+Enzyme.configure({ adapter: new Adapter() });