From 00710b1265e59c316483e387e8e05abb6050e2a8 Mon Sep 17 00:00:00 2001
From: Juan Pablo Lomeli Diaz <juanpablo@thetinkertrain.codes>
Date: Mon, 14 Jun 2021 13:48:30 +0200
Subject: [PATCH 1/3] Fixes selection and beefs up test for ActionSelect

---
 src/components/ActionSelect/ActionSelect.jsx  |  4 +--
 .../ActionSelect/ActionSelect.test.js         | 36 ++++++++++++++-----
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/ActionSelect/ActionSelect.jsx b/src/components/ActionSelect/ActionSelect.jsx
index 8ac6a7c06..65e683327 100644
--- a/src/components/ActionSelect/ActionSelect.jsx
+++ b/src/components/ActionSelect/ActionSelect.jsx
@@ -15,7 +15,7 @@ export class ActionSelect extends React.PureComponent {
   state = {
     isOpen: this.props.isOpen,
     resizeCount: 0,
-    selectedItem: null,
+    selectedItem: this.props.selectedItem || null,
   }
 
   _isMounted = false
@@ -141,7 +141,7 @@ export class ActionSelect extends React.PureComponent {
             onOpenedStateChange={this.handleOnOpenClose}
             onSelect={this.handleOnSelect}
             toggler={<SelectTag text={getSelectTagText(selectedItem, items)} />}
-            selection={this.props.selectedItem}
+            selection={selectedItem}
           />
         </div>
         <ContentResizer
diff --git a/src/components/ActionSelect/ActionSelect.test.js b/src/components/ActionSelect/ActionSelect.test.js
index 2ff1ab1a0..0b01da345 100644
--- a/src/components/ActionSelect/ActionSelect.test.js
+++ b/src/components/ActionSelect/ActionSelect.test.js
@@ -17,8 +17,8 @@ const mockItems = [
   },
 ]
 
-describe('SelectDropdown', () => {
-  test('Renders a SelectDropdown with items', async () => {
+describe('DropList', () => {
+  test('Renders a DropList with items', async () => {
     const { getByRole, getAllByRole } = render(
       <ActionSelect items={mockItems} isOpen={true} />
     )
@@ -35,20 +35,38 @@ describe('SelectDropdown', () => {
     })
   })
 
-  test('Renders a SelectDropdown with a selected item', async () => {
-    const { getByRole, getAllByRole } = render(
-      <ActionSelect items={mockItems} selectedItem={mockItems[1]} />
+  test('DropList Selection', async () => {
+    const onSelectSpy = jest.fn()
+    const { getByRole, getAllByRole, getByTestId } = render(
+      <ActionSelect
+        items={mockItems}
+        selectedItem={mockItems[1]}
+        onSelect={onSelectSpy}
+      />
     )
 
     user.click(getByRole('button'))
 
     await waitFor(() => {
-      const selectedItem = getAllByRole('option').filter(item =>
-        item.classList.contains('is-selected')
+      expect(
+        getAllByRole('option')[1].classList.contains('is-selected')
+      ).toBeTruthy()
+      expect(getByTestId('DropList.SelectTagToggler').textContent).toBe(
+        'Hansel'
       )
 
-      expect(selectedItem.length).toBeTruthy()
-      expect(selectedItem[0].textContent).toBe('Hansel')
+      user.click(getAllByRole('option')[0])
+    })
+
+    await waitFor(() => {
+      expect(
+        getAllByRole('option')[1].classList.contains('is-selected')
+      ).toBeFalsy()
+      expect(
+        getAllByRole('option')[0].classList.contains('is-selected')
+      ).toBeTruthy()
+      expect(getByTestId('DropList.SelectTagToggler').textContent).toBe('Derek')
+      expect(onSelectSpy).toHaveBeenCalledTimes(1)
     })
   })
 })

From 19e5929b05e18ca69708831d941c6ee3b90812d4 Mon Sep 17 00:00:00 2001
From: Juan Pablo Lomeli Diaz <juanpablo@thetinkertrain.codes>
Date: Mon, 14 Jun 2021 13:59:33 +0200
Subject: [PATCH 2/3] Move the classname prop to root in SplittButton toggler

---
 src/components/DropList/DropList.togglers.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/DropList/DropList.togglers.jsx b/src/components/DropList/DropList.togglers.jsx
index bd48ca262..9de6732fb 100644
--- a/src/components/DropList/DropList.togglers.jsx
+++ b/src/components/DropList/DropList.togglers.jsx
@@ -116,7 +116,11 @@ export const SplittedButton = forwardRef(
   ) => {
     return (
       <ControlGroup
-        className="DropListToggler SplitButtonTogglerControlGroup"
+        className={classNames(
+          className,
+          'DropListToggler',
+          'SplitButtonTogglerControlGroup'
+        )}
         data-cy="DropList.SplitButtonTogglerControlGroup"
         {...rest}
       >
@@ -141,7 +145,6 @@ export const SplittedButton = forwardRef(
             aria-expanded={isActive}
             buttonRef={ref}
             className={classNames(
-              className,
               'DropListToggler',
               'SplitButton__Toggler',
               isActive && 'is-active'

From e98000996d73a1fd3cc34ab2caad5266ac067906 Mon Sep 17 00:00:00 2001
From: Juan Pablo Lomeli Diaz <juanpablo@thetinkertrain.codes>
Date: Mon, 14 Jun 2021 14:25:34 +0200
Subject: [PATCH 3/3] Use constructor to initialize state from props

---
 src/components/ActionSelect/ActionSelect.jsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/ActionSelect/ActionSelect.jsx b/src/components/ActionSelect/ActionSelect.jsx
index 65e683327..2a0908b89 100644
--- a/src/components/ActionSelect/ActionSelect.jsx
+++ b/src/components/ActionSelect/ActionSelect.jsx
@@ -12,10 +12,14 @@ import { ActionSelectUI } from './ActionSelect.css'
 export class ActionSelect extends React.PureComponent {
   static className = 'c-ActionSelect'
 
-  state = {
-    isOpen: this.props.isOpen,
-    resizeCount: 0,
-    selectedItem: this.props.selectedItem || null,
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isOpen: props.isOpen,
+      resizeCount: 0,
+      selectedItem: props.selectedItem || null,
+    }
   }
 
   _isMounted = false