Expanding unit test suite (#223)

andyfry01 · appleboy · commit b148acb94987 · 2018-02-01T09:10:36.000+08:00
* updated documentation to include available and default props for component

* added testing libraries to dev dependencies

* added unit tests, added window mocking via JSDOM

* added test:watch script to package.json

* replaced tabs with spaces

* yarn.lock update

* deleting package-lock.json, created in error

* readme update, added info on supported node version

* dropping node v4 and v5 support and CI tests
diff --git a/.travis.yml b/.travis.yml
@@ -3,8 +3,6 @@ sudo: false
 language: node_js
 
 node_js:
-  - '4'
-  - '5'
   - '6'
   - '7'
   - '8'
diff --git a/README.md b/README.md
@@ -42,6 +42,10 @@ $ npm start
 
 open the `http://localhost:3000` in your browser.
 
+# Node support
+
+Node >= v6 is required for this package. Run `node -v` in your command prompt if you're unsure which Node version you have installed.
+
 ### Automatically render the reCAPTCHA widget
 
 Html example code:
diff --git a/__tests__/recaptcha-test.js b/__tests__/recaptcha-test.js
@@ -1,13 +1,182 @@
-jest.dontMock('../src/index');
+// Mock grecaptcha, see below
+const grecaptchaMock = {
+  reset: function() {
+    return true
+  },
+  render: function() {
+    return true
+  }
+}
 
+// JSDOM configuration (should be done before requiring anything else, see: http://airbnb.io/enzyme/docs/guides/jsdom.html)
+const {JSDOM} = require('jsdom');
+const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
+const {window} = jsdom;
+// set grecaptchaMock as a property on JSDOM window, will now be accessable by component when rendered in tests
+window.grecaptcha = grecaptchaMock
+
+function copyProps(src, target) {
+  const props = Object.getOwnPropertyNames(src).filter(prop => typeof target[prop] === 'undefined').reduce((result, prop) => ({
+    ...result,
+    [prop]: Object.getOwnPropertyDescriptor(src, prop)
+  }), {});
+  Object.defineProperties(target, props);
+}
+
+global.window = window;
+global.document = window.document;
+global.navigator = {
+  userAgent: 'node.js'
+};
+copyProps(window, global);
+
+// Import React, test utils, component
 import React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
 import Recaptcha from '../src/index';
+import sinon from 'sinon';
+
+// Lodash for deep equality testing
+import _ from 'lodash'
+
+// Import enzyme and configure for React 15
+import Adapter from 'enzyme-adapter-react-15';
+import {configure, render, mount} from 'enzyme';
+configure({adapter: new Adapter()});
+
+// Test method for test props
+function testFunction() {
+  return true
+}
+
+// Test props with all props specified
+const testProps = {
+  className: 'testClass',
+  onloadCallbackName: 'testCallBackName',
+  elementID: 'testElementID',
+  onloadCallback: testFunction,
+  verifyCallback: testFunction,
+  expiredCallback: testFunction,
+  render: 'testRender',
+  sitekey: 'testSitekey',
+  theme: 'testTheme',
+  type: 'testType',
+  verifyCallbackName: 'testVerifyCallbackName',
+  expiredCallbackName: 'testExpiredCallbackName',
+  size: 'testSize',
+  tabindex: 'testTabindex',
+  hl: 'testHl',
+  badge: 'testBadge'
+};
+
+
+/* ----------
+   Test cases!
+   ---------- */
 
 describe('Recaptcha Test', () => {
-  it('should exists', () => {
-    // Render into document
-    let recaptcha = ReactTestUtils.renderIntoDocument(<Recaptcha sitekey="123456789" />);
-    expect(ReactTestUtils.isCompositeComponent(recaptcha)).toBeTruthy();
-  });
-});
+  describe('Recaptcha component', () => {
+    it('should exist', () => {
+      // Render into document
+      let recaptcha = ReactTestUtils.renderIntoDocument(<Recaptcha sitekey="123456789"/>);
+      expect(ReactTestUtils.isCompositeComponent(recaptcha)).toBeTruthy();
+    });
+    it('should mount successfully', () => {
+      const component = mount(<Recaptcha />);
+      let actual = component.length
+      let expected = 1
+      expect(actual).toEqual(expected)
+    })
+  })
+
+  describe('Component props', () => {
+    it('should render props correctly', () => {
+      const component = mount(<Recaptcha {...testProps} />)
+      let componentProps = component.props()
+      let actual = _.isEqual(componentProps, testProps)
+      let expected = true
+      expect(actual).toEqual(expected)
+    })
+    it('should render default props for the component\'s specified default props', () => {
+      const component = mount(<Recaptcha />)
+      let componentProps = component.props()
+      let actual = _.isEqual(Recaptcha.defaultProps, componentProps)
+      let expected = true
+      expect(actual).toEqual(expected)
+    })
+  })
+
+  describe('Component methods', () => {
+    describe('component#constructor', () => {
+      it('should exist', () => {
+        const component = mount(<Recaptcha />)
+        let actual = typeof component.instance().constructor
+        let expected = 'function'
+        expect(actual).toEqual(expected)
+      })
+      it('should bind \'this\' to the appropriate component methods when called', () => {
+        const component = mount(<Recaptcha />)
+        const boundComponentMethods = ['_renderGrecaptcha', 'reset']
+        let actual = undefined
+        let expected = undefined
+        boundComponentMethods.forEach(method => {
+          actual = component.instance()[method].hasOwnProperty('prototype')
+          expected = false
+          expect(actual).toEqual(expected)
+          actual = undefined
+          expected = undefined
+        })
+      })
+    })
+
+    describe('component#reset', () => {
+      it('should exist', () => {
+        const component = mount(<Recaptcha />)
+        let actual = typeof component.instance().reset
+        let expected = 'function'
+        expect(actual).toEqual(expected)
+      })
+      it('should call reset on window.grecaptcha when called', () => {
+        let resetSpy = sinon.spy(window.grecaptcha, 'reset');
+        const component = mount(<Recaptcha />, {context: window})
+        component.instance().reset()
+        let actual = resetSpy.callCount
+        let expected = 1
+        expect(actual).toEqual(expected)
+        resetSpy.restore()
+      })
+    })
+
+    describe('component#_updateReadyState', () => {
+      it('should exist', () => {
+        const component = mount(<Recaptcha />)
+        let actual = typeof component.instance()._updateReadyState
+        let expected = 'function'
+        expect(actual).toEqual(expected)
+      })
+      it('should set the component\'s state to ready when isReady returns true', () => {
+        const component = mount(<Recaptcha />, {context: window})
+        let actual = component.instance().state.ready
+        let expected = true
+        expect(actual).toEqual(expected)
+      })
+    })
+
+    describe('component#_renderGrecaptcha', () => {
+      it('should exist', () => {
+        const component = mount(<Recaptcha />)
+        let actual = typeof component.instance()._renderGrecaptcha
+        let expected = 'function'
+        expect(actual).toEqual(expected)
+      })
+      it('should be called when the captcha is ready to render', () => {
+        let componentSpy = sinon.spy(Recaptcha.prototype, '_renderGrecaptcha');
+        const component = mount(<Recaptcha />, {context: window})
+        let actual = componentSpy.callCount
+        let expected = 1
+        expect(actual).toEqual(expected)
+        componentSpy.restore()
+      })
+    })
+  })
+})
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "compile": "webpack -p --config webpack.production.config.js",
     "lint": "eslint src example",
     "test": "BABEL_ENV=production jest",
+    "test:watch": "BABEL_ENV=production jest --watch",
     "prepublish": "NODE_ENV=production npm run compile"
   },
   "repository": {
@@ -43,19 +44,26 @@
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
     "babel-runtime": "^6.3.19",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-15": "^1.0.5",
     "eslint": "^1.10.3",
     "eslint-config-airbnb": "^5.0.0",
     "eslint-plugin-react": "^3.14.0",
     "jest": "^20.0.4",
     "jest-cli": "^20.0.4",
+    "jsdom": "^11.6.1",
+    "lodash": "^4.17.4",
     "pre-commit": "^1.1.2",
     "prop-types": "^15.5.10",
     "react": "^15.5.4",
+    "react-addons-test-utils": "^15.6.2",
     "react-dom": "^15.5.4",
     "react-hot-loader": "^1.3.0",
+    "react-test-renderer": "^15.6.2",
     "react-transform-catch-errors": "^1.0.1",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.2.0",
+    "sinon": "^4.2.2",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.0"
   },
diff --git a/yarn.lock b/yarn.lock
