From 44663875b6794838676253549dad364368cfd917 Mon Sep 17 00:00:00 2001
From: Oscar Martinez <oscar.martinez@ticketmaster.com>
Date: Thu, 28 Jun 2018 14:59:33 -0700
Subject: [PATCH] feat(composeEventHandlers): Break out event handler
 composition

---
 src/components/Input/Search.js                |  9 +++----
 .../__tests__/composeEventHandlers.spec.js    | 27 +++++++++++++++++++
 src/utils/composeEventHandlers.js             |  5 ++++
 3 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/__tests__/composeEventHandlers.spec.js
 create mode 100644 src/utils/composeEventHandlers.js

diff --git a/src/components/Input/Search.js b/src/components/Input/Search.js
index 5842c7e87..799aa3476 100644
--- a/src/components/Input/Search.js
+++ b/src/components/Input/Search.js
@@ -7,6 +7,7 @@ import SearchIcon from "../Icons/Search";
 import colors from "../../theme/colors";
 import typography from "../../theme/typography";
 import constants from "../../theme/constants";
+import composeEventHandlers from "../../utils/composeEventHandlers";
 
 const Input = styled.input.attrs({
   type: "search"
@@ -70,10 +71,6 @@ const IconContainer = styled.div`
   }
 `;
 
-const composeHandler = (...args) => e => {
-  args.forEach(fn => fn && fn(e));
-};
-
 export default class SearchInput extends React.Component {
   static propTypes = {
     onBlur: PropTypes.func,
@@ -120,8 +117,8 @@ export default class SearchInput extends React.Component {
         <Input
           {...{
             ...props,
-            onBlur: composeHandler(this.onBlur, props.onBlur),
-            onFocus: composeHandler(this.onFocus, props.onFocus),
+            onBlur: composeEventHandlers(this.onBlur, props.onBlur),
+            onFocus: composeEventHandlers(this.onFocus, props.onFocus),
             slim,
             invert
           }}
diff --git a/src/utils/__tests__/composeEventHandlers.spec.js b/src/utils/__tests__/composeEventHandlers.spec.js
new file mode 100644
index 000000000..dd44083f8
--- /dev/null
+++ b/src/utils/__tests__/composeEventHandlers.spec.js
@@ -0,0 +1,27 @@
+import composeEventHandlers from "../composeEventHandlers";
+
+describe("composeEventHandlers", () => {
+  const mockEvent = { target: "element" };
+
+  it("calls single event handler", () => {
+    const mock = jest.fn();
+    const handler = composeEventHandlers(mock);
+
+    handler(mockEvent);
+
+    expect(mock).toHaveBeenCalledWith(mockEvent);
+  });
+
+  it("calls multiple event handlers", () => {
+    const mock1 = jest.fn();
+    const mock2 = jest.fn();
+    const mock3 = jest.fn();
+    const handler = composeEventHandlers(mock1, mock2, mock3);
+
+    handler(mockEvent);
+
+    expect(mock1).toHaveBeenCalledWith(mockEvent);
+    expect(mock2).toHaveBeenCalledWith(mockEvent);
+    expect(mock3).toHaveBeenCalledWith(mockEvent);
+  });
+});
diff --git a/src/utils/composeEventHandlers.js b/src/utils/composeEventHandlers.js
new file mode 100644
index 000000000..aa38fb41d
--- /dev/null
+++ b/src/utils/composeEventHandlers.js
@@ -0,0 +1,5 @@
+const composeHandler = (...args) => e => {
+  args.forEach(fn => fn && fn(e));
+};
+
+export default composeHandler;