From 93b4de60f6694abe1b8d59108950eab2428342cf Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 25 Dec 2020 11:05:50 +0100
Subject: [PATCH] Improved sorting dropdown to display order field and order
 dir

---
 src/utils/SortingDropdown.tsx       |  2 +-
 test/utils/SortingDropdown.test.tsx | 22 +++++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/utils/SortingDropdown.tsx b/src/utils/SortingDropdown.tsx
index 2bb59cba..d9e06ec3 100644
--- a/src/utils/SortingDropdown.tsx
+++ b/src/utils/SortingDropdown.tsx
@@ -33,7 +33,7 @@ export default function SortingDropdown<T extends string = string>(
       >
         {!isButton && <>Order by</>}
         {isButton && !orderField && <>Order by...</>}
-        {isButton && orderField && <>Order by: {items[orderField]} - {orderDir}</>}
+        {isButton && orderField && `Order by: "${items[orderField]}" - "${orderDir ?? 'DESC'}"`}
       </DropdownToggle>
       <DropdownMenu
         right={right}
diff --git a/test/utils/SortingDropdown.test.tsx b/test/utils/SortingDropdown.test.tsx
index c327a172..6b3f9682 100644
--- a/test/utils/SortingDropdown.test.tsx
+++ b/test/utils/SortingDropdown.test.tsx
@@ -1,9 +1,10 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { DropdownItem } from 'reactstrap';
+import { DropdownItem, DropdownToggle } from 'reactstrap';
 import { identity, values } from 'ramda';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons';
 import SortingDropdown, { SortingDropdownProps } from '../../src/utils/SortingDropdown';
+import { OrderDir } from '../../src/utils/utils';
 
 describe('<SortingDropdown />', () => {
   let wrapper: ShallowWrapper;
@@ -73,4 +74,23 @@ describe('<SortingDropdown />', () => {
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith('foo', 'DESC');
   });
+
+  it.each([
+    [{ isButton: false }, '>Order by<' ],
+    [{ isButton: true }, '>Order by...<' ],
+    [
+      { isButton: true, orderField: 'foo', orderDir: 'ASC' as OrderDir },
+      'Order by: &quot;Foo&quot; - &quot;ASC&quot;',
+    ],
+    [
+      { isButton: true, orderField: 'baz', orderDir: 'DESC' as OrderDir },
+      'Order by: &quot;Hello World&quot; - &quot;DESC&quot;',
+    ],
+    [{ isButton: true, orderField: 'baz' }, 'Order by: &quot;Hello World&quot; - &quot;DESC&quot;' ],
+  ])('displays expected text in toggle', (props, expectedText) => {
+    const wrapper = createWrapper(props);
+    const toggle = wrapper.find(DropdownToggle);
+
+    expect(toggle.html()).toContain(expectedText);
+  });
 });