From 06d9813a7b4c389660e6edd64b594a7eed30b67d Mon Sep 17 00:00:00 2001
From: Joe Prang <joseph.prang@sofarsounds.com>
Date: Thu, 2 Jan 2020 14:21:52 +0000
Subject: [PATCH 1/3] Add type=button to input button to prevent triggering of
 form submission when toggling the select dropdown.

While testing a form with a Select component, we found that when clicking the
toggle for the Select component it was triggering the form submission (as
opposed to clicking the "Submit" button. This was due to the fact that no type
attribute was specified on the button element that triggers the dropdown of
select inputs. This commit adds this type attribute to fix this. It also adds
some additional data-qaids to enable easier testing of Select Inputs.
---
 src/molecules/Select/Input.test.tsx           | 14 ++++++++----
 src/molecules/Select/Input.tsx                |  3 ++-
 src/molecules/Select/Select.test.tsx          |  6 ++++-
 .../Select/__snapshots__/Input.test.tsx.snap  | 13 +++++++++++
 .../Select/__snapshots__/Select.test.tsx.snap | 22 +++++++++++++++++++
 5 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/molecules/Select/Input.test.tsx b/src/molecules/Select/Input.test.tsx
index 70fbd7a2..4852ba83 100644
--- a/src/molecules/Select/Input.test.tsx
+++ b/src/molecules/Select/Input.test.tsx
@@ -25,7 +25,9 @@ const setup = (
 
 describe('Select <Input />', () => {
   it('it renders correctly', () => {
-    expect(setup()).toMatchSnapshot();
+    expect(
+      setup(false, 'I am a placeholder', false, 'testDataId')
+    ).toMatchSnapshot();
   });
 
   it('it has the correct style properties when isOpen is false', () => {
@@ -56,10 +58,14 @@ describe('Select <Input />', () => {
     expect(placeholder).toBe('I am a placeholder');
   });
 
-  it('it adds a data-qaid', () => {
+  it('it adds a data-qaid on the InputWrapper, InputStyle, and Button', () => {
     let wrapper = setup(true, 'cat', true, 'testDataId');
-    let qaid = wrapper.find('Input').props()['data-qaid'];
-    expect(qaid).toBe('testDataId');
+    let wrapperQaid = wrapper.find('Input').props()['data-qaid'];
+    expect(wrapperQaid).toBe('testDataId');
+    let inputQaid = wrapper.find('input').props()['data-qaid'];
+    expect(inputQaid).toBe('testDataId-input');
+    let buttonQaid = wrapper.find('button').props()['data-qaid'];
+    expect(buttonQaid).toBe('testDataId-toggle');
   });
 
   it('it handles no data-qaid', () => {
diff --git a/src/molecules/Select/Input.tsx b/src/molecules/Select/Input.tsx
index 3d6ea30c..46c4b704 100644
--- a/src/molecules/Select/Input.tsx
+++ b/src/molecules/Select/Input.tsx
@@ -119,8 +119,9 @@ const Input: React.SFC<Props> = ({
         isOpen={isOpen}
         placeholder={placeholder}
         name={name}
+        data-qaid={`${qaId}-input`}
       />
-      <Button isOpen={isOpen}>
+      <Button isOpen={isOpen} type="button" data-qaid={`${qaId}-toggle`}>
         <Icon name={isOpen ? 'caretUp' : 'caretDown'} />
       </Button>
     </InputWrapper>
diff --git a/src/molecules/Select/Select.test.tsx b/src/molecules/Select/Select.test.tsx
index a50217bd..889caa8d 100644
--- a/src/molecules/Select/Select.test.tsx
+++ b/src/molecules/Select/Select.test.tsx
@@ -17,7 +17,11 @@ const setup = () =>
       <div onClick={outsideClick} id="outside_idiot">
         I am a idiot
       </div>
-      <Select handleOptionClick={mockClick} placeholder={'I am placeholder'}>
+      <Select
+        handleOptionClick={mockClick}
+        placeholder={'I am placeholder'}
+        data-qaid="testQaId"
+      >
         {({ optionClick }: any) =>
           citiesData.map((cityData, index) => (
             <Option key={index} value={cityData.value} onClick={optionClick} />
diff --git a/src/molecules/Select/__snapshots__/Input.test.tsx.snap b/src/molecules/Select/__snapshots__/Input.test.tsx.snap
index e08f33e5..1cd06b97 100644
--- a/src/molecules/Select/__snapshots__/Input.test.tsx.snap
+++ b/src/molecules/Select/__snapshots__/Input.test.tsx.snap
@@ -445,16 +445,19 @@ exports[`Select <Input /> it renders correctly 1`] = `
   }
 >
   <Input
+    data-qaid="testDataId"
     isOpen={false}
     placeholder="I am a placeholder"
     readonly={false}
     toggleSelect={[MockFunction]}
   >
     <styled.div
+      data-qaid="testDataId"
       isOpen={false}
       onClick={[MockFunction]}
     >
       <StyledComponent
+        data-qaid="testDataId"
         forwardedComponent={
           Object {
             "$$typeof": Symbol(react.forward_ref),
@@ -487,14 +490,17 @@ exports[`Select <Input /> it renders correctly 1`] = `
       >
         <div
           className="c0"
+          data-qaid="testDataId"
           onClick={[MockFunction]}
         >
           <styled.input
+            data-qaid="testDataId-input"
             isOpen={false}
             placeholder="I am a placeholder"
             readOnly={false}
           >
             <StyledComponent
+              data-qaid="testDataId-input"
               forwardedComponent={
                 Object {
                   "$$typeof": Symbol(react.forward_ref),
@@ -528,15 +534,19 @@ exports[`Select <Input /> it renders correctly 1`] = `
             >
               <input
                 className="c1"
+                data-qaid="testDataId-input"
                 placeholder="I am a placeholder"
                 readOnly={false}
               />
             </StyledComponent>
           </styled.input>
           <styled.button
+            data-qaid="testDataId-toggle"
             isOpen={false}
+            type="button"
           >
             <StyledComponent
+              data-qaid="testDataId-toggle"
               forwardedComponent={
                 Object {
                   "$$typeof": Symbol(react.forward_ref),
@@ -566,9 +576,12 @@ exports[`Select <Input /> it renders correctly 1`] = `
               }
               forwardedRef={null}
               isOpen={false}
+              type="button"
             >
               <button
                 className="c2"
+                data-qaid="testDataId-toggle"
+                type="button"
               >
                 <Icon
                   name="caretDown"
diff --git a/src/molecules/Select/__snapshots__/Select.test.tsx.snap b/src/molecules/Select/__snapshots__/Select.test.tsx.snap
index f9444d85..573a8969 100644
--- a/src/molecules/Select/__snapshots__/Select.test.tsx.snap
+++ b/src/molecules/Select/__snapshots__/Select.test.tsx.snap
@@ -451,10 +451,12 @@ exports[`Select renders correctly 1`] = `
     I am a idiot
   </div>
   <Select
+    data-qaid="testQaId"
     handleOptionClick={[MockFunction]}
     placeholder="I am placeholder"
   >
     <Input
+      data-qaid="testQaId"
       innerRef={
         Object {
           "current": .c3 {
@@ -759,14 +761,18 @@ exports[`Select renders correctly 1`] = `
 
 <div
             class="c0"
+            data-qaid="testQaId"
           >
             <input
               class="c1"
+              data-qaid="testQaId-input"
               placeholder="I am placeholder"
               value=""
             />
             <button
               class="c2"
+              data-qaid="testQaId-toggle"
+              type="button"
             >
               <i
                 class="c3 icon-caretDown "
@@ -781,10 +787,12 @@ exports[`Select renders correctly 1`] = `
       value=""
     >
       <styled.div
+        data-qaid="testQaId"
         isOpen={false}
         onClick={[Function]}
       >
         <StyledComponent
+          data-qaid="testQaId"
           forwardedComponent={
             Object {
               "$$typeof": Symbol(react.forward_ref),
@@ -815,14 +823,18 @@ exports[`Select renders correctly 1`] = `
             Object {
               "current": <div
                 class="c0"
+                data-qaid="testQaId"
               >
                 <input
                   class="c1"
+                  data-qaid="testQaId-input"
                   placeholder="I am placeholder"
                   value=""
                 />
                 <button
                   class="c2"
+                  data-qaid="testQaId-toggle"
+                  type="button"
                 >
                   <i
                     class="c3 icon-caretDown "
@@ -836,14 +848,17 @@ exports[`Select renders correctly 1`] = `
         >
           <div
             className="c0"
+            data-qaid="testQaId"
             onClick={[Function]}
           >
             <styled.input
+              data-qaid="testQaId-input"
               isOpen={false}
               placeholder="I am placeholder"
               value=""
             >
               <StyledComponent
+                data-qaid="testQaId-input"
                 forwardedComponent={
                   Object {
                     "$$typeof": Symbol(react.forward_ref),
@@ -877,15 +892,19 @@ exports[`Select renders correctly 1`] = `
               >
                 <input
                   className="c1"
+                  data-qaid="testQaId-input"
                   placeholder="I am placeholder"
                   value=""
                 />
               </StyledComponent>
             </styled.input>
             <styled.button
+              data-qaid="testQaId-toggle"
               isOpen={false}
+              type="button"
             >
               <StyledComponent
+                data-qaid="testQaId-toggle"
                 forwardedComponent={
                   Object {
                     "$$typeof": Symbol(react.forward_ref),
@@ -915,9 +934,12 @@ exports[`Select renders correctly 1`] = `
                 }
                 forwardedRef={null}
                 isOpen={false}
+                type="button"
               >
                 <button
                   className="c2"
+                  data-qaid="testQaId-toggle"
+                  type="button"
                 >
                   <Icon
                     name="caretDown"

From 6e120cb5ffca4b0badbcd45ea4abb19098781cbe Mon Sep 17 00:00:00 2001
From: Joe Prang <joseph.prang@sofarsounds.com>
Date: Thu, 2 Jan 2020 14:29:41 +0000
Subject: [PATCH 2/3] Bump package version to 5.0.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7bb59feb..4f705571 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sofarsounds/maestro",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "The official sofar sounds react uikit library",
   "main": "dist/index.js",
   "scripts": {

From 552578e0bcb8696b360f38eae4de712d5302784c Mon Sep 17 00:00:00 2001
From: prangarang <joseph.prang@sofarsounds.com>
Date: Thu, 2 Jan 2020 14:48:56 +0000
Subject: [PATCH 3/3] Update src/molecules/Select/Select.test.tsx

Co-Authored-By: David Floegel <david.floegel@sofarsounds.com>
---
 src/molecules/Select/Select.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/molecules/Select/Select.test.tsx b/src/molecules/Select/Select.test.tsx
index 889caa8d..ab588c07 100644
--- a/src/molecules/Select/Select.test.tsx
+++ b/src/molecules/Select/Select.test.tsx
@@ -19,7 +19,7 @@ const setup = () =>
       </div>
       <Select
         handleOptionClick={mockClick}
-        placeholder={'I am placeholder'}
+        placeholder="I am placeholder"
         data-qaid="testQaId"
       >
         {({ optionClick }: any) =>