diff --git a/README.md b/README.md index 02174e3..841f333 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,9 @@ render() { + timeout={/* Duration to show your easter egg, easter egg is displayed forever if prop is not set */} + onKeysCoincide={/* Callback to call when the code is correctly inserted*/} + onTimeout={/* Callback to call when the timer runs out*/}> {/* Your easter egg JSX goes here */} ); diff --git a/package.json b/package.json index a8986cf..f30f546 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "dependencies": { "bluebird": "3.4.7", "lodash": "^4.17.4", - "react": "15.4.2", + "react": "^15.4.2", "react-dom": "^15.4.2", "react-shortcut": "1.0.6" }, diff --git a/src/Component.js b/src/Component.js index f17ee42..7cdaca2 100644 --- a/src/Component.js +++ b/src/Component.js @@ -2,12 +2,13 @@ var React = require('react'); var HotKey = require('react-shortcut'); - module.exports = React.createClass({ propTypes: { keys: React.PropTypes.array, simultaneous: React.PropTypes.bool, timeout: React.PropTypes.number, + onKeysCoincide: React.PropTypes.func, + onTimeout: React.PropTypes.func, children: React.PropTypes.oneOfType([ React.PropTypes.array, React.PropTypes.element @@ -43,17 +44,17 @@ module.exports = React.createClass({ onKeysCoincide: function keysCoincide() { var props = this.props || {}; var timeout = props.timeout || null; + var onKeysCoincide = props.onKeysCoincide || null; + var onTimeout = props.onTimeout || null; + if (onKeysCoincide) onKeysCoincide(); if (timeout) { this.setState({ timer: setTimeout((function resolveTimeout() { - var state = this.state || {}; - - clearTimeout(state.timer); + clearTimeout(this.state.timer); + if (onTimeout) onTimeout(); - this.setState({ - timer: null - }); + this.setState({ timer: null }); }).bind(this), timeout) }); } else { diff --git a/test/Component.js b/test/Component.js index 2f1cf08..0568b51 100644 --- a/test/Component.js +++ b/test/Component.js @@ -1,13 +1,12 @@ var React = require('react'); var enzyme = require('enzyme'); +var sinon = require('sinon'); var Promise = require('bluebird'); var Component = require('../src/Component'); - var mount = enzyme.mount; - function Page(wrapper) { this.wrapper = function() { return wrapper; @@ -128,4 +127,72 @@ describe('', function() { expect(page.wrapper().contains(child)).toEqual(false); }); }); + + it('Should fire callback when keys are correct', function() { + var handleKeysCoincide = sinon.stub(); + + var child = createChild(); + var created = createComponent({ + keys: ['t', 'e', 's', 't'], + onKeysCoincide: handleKeysCoincide + }, child); + + var wrapper = created.wrapper; + var page = created.page; + + return new Promise(function(resolveAll) { + return new Promise(function(resolve) { + expect(page.wrapper().contains(child)).toEqual(false); + + document.dispatchEvent(new KeyboardEvent('keydown', {'key': 't'})); + document.dispatchEvent(new KeyboardEvent('keydown', {'key': 'e'})); + document.dispatchEvent(new KeyboardEvent('keydown', {'key': 's'})); + document.dispatchEvent(new KeyboardEvent('keydown', {'key': 't'})); + + setTimeout(function() { + resolve(); + }, 500); + }).then(function() { + expect(page.wrapper().contains(child)).toEqual(true); + expect(handleKeysCoincide.callCount).toEqual(1); + setTimeout(function() { + resolveAll(); + }, 500); + }); + }).then(function() { + expect(page.wrapper().contains(child)).toEqual(true); + }); + }); + + it('Should fire callback when timer runs out', function() { + var handleTimeout = sinon.stub(); + + var child = createChild(); + var created = createComponent({ + keys: ['t', 'e', 's', 't'], + timeout: 300, + onTimeout: handleTimeout + }, child); + + var wrapper = created.wrapper; + var page = created.page; + + return new Promise(function(resolve) { + expect(page.wrapper().contains(child)).toEqual(false); + + document.dispatchEvent(new KeyboardEvent('keydown', {'key': 't'})); + document.dispatchEvent(new KeyboardEvent('keydown', {'key': 'e'})); + document.dispatchEvent(new KeyboardEvent('keydown', {'key': 's'})); + document.dispatchEvent(new KeyboardEvent('keydown', {'key': 't'})); + + expect(page.wrapper().contains(child)).toEqual(true); + + setTimeout(function() { + resolve(); + }, 1000); + }).then(function() { + expect(handleTimeout.callCount).toEqual(1); + expect(page.wrapper().contains(child)).toEqual(false); + }); + }); });