From a81b0608c64c0ac66ed09e67a16c7dfe6af45805 Mon Sep 17 00:00:00 2001 From: Ayoub Aabass Date: Sat, 23 Jun 2018 16:16:49 +0200 Subject: [PATCH 1/4] [+] callbacks on success and timeout, more tests --- src/Component.js | 9 +++++- test/Component.js | 71 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 77 insertions(+), 3 deletions(-) diff --git a/src/Component.js b/src/Component.js index f17ee42..663dcc1 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,6 +44,8 @@ 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 (timeout) { this.setState({ @@ -54,6 +57,8 @@ module.exports = React.createClass({ this.setState({ timer: null }); + + if (onTimeout) onTimeout(); }).bind(this), timeout) }); } else { @@ -61,6 +66,8 @@ module.exports = React.createClass({ timer: Number.POSITIVE_INFINITY }); } + + if (onKeysCoincide) onKeysCoincide(); }, getDefaultProps: function defaultProps() { 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); + }); + }); }); From 95eed565a123ac25f6bb7eb122bc915e69bb18a8 Mon Sep 17 00:00:00 2001 From: Ayoub Aabass Date: Sat, 23 Jun 2018 16:17:23 +0200 Subject: [PATCH 2/4] [*] Update README --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 */} ); From 5b62e849160d25f459f4880bbf7f9c934357dfb4 Mon Sep 17 00:00:00 2001 From: Ayoub Aabass Date: Sat, 23 Jun 2018 16:48:24 +0200 Subject: [PATCH 3/4] [*] Fix peerdependency issue --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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" }, From 753d5992f42d07c4d38060920eae25c286e8feca Mon Sep 17 00:00:00 2001 From: Ayoub Aabass Date: Sat, 23 Jun 2018 18:50:33 +0200 Subject: [PATCH 4/4] [*] reduced code complexity --- src/Component.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/Component.js b/src/Component.js index 663dcc1..7cdaca2 100644 --- a/src/Component.js +++ b/src/Component.js @@ -47,18 +47,14 @@ module.exports = React.createClass({ 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); - - this.setState({ - timer: null - }); - + clearTimeout(this.state.timer); if (onTimeout) onTimeout(); + + this.setState({ timer: null }); }).bind(this), timeout) }); } else { @@ -66,8 +62,6 @@ module.exports = React.createClass({ timer: Number.POSITIVE_INFINITY }); } - - if (onKeysCoincide) onKeysCoincide(); }, getDefaultProps: function defaultProps() {