Merge e980009 into 23a57cb

helpscout · Jun 14, 2021 · db30171 · db30171
2 parents 23a57cb + e980009
commit db30171
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git 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: null,
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isOpen: props.isOpen,
+      resizeCount: 0,
+      selectedItem: props.selectedItem || null,
+    }
   }
 
   _isMounted = false
@@ -141,7 +145,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
@@ -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)
     })
   })
 })

diff --git 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'