When no order is specified, the order by indicator(triangle) in column header should be Cleared

CHANGELOG.md

@@ -24,7 +24,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Fixed
 
-* *Nothing*
+* [#151](https://github.com/shlinkio/shlink-web-client/issues/151) Bugfix: When no order is specified, the order by indicator(triangle) still indicate ASC on column header.
 
 
 ## 2.1.0 - 2019-05-19

src/short-urls/ShortUrlsList.js

@@ -11,7 +11,7 @@ import { shortUrlType } from './reducers/shortUrlsList';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 import './ShortUrlsList.scss';
 
-const SORTABLE_FIELDS = {
+export const SORTABLE_FIELDS = {
   dateCreated: 'Created at',
   shortCode: 'Short URL',
   longUrl: 'Long URL',
@@ -50,6 +50,10 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon
       return null;
     }
 
+    if (!this.state.orderDir) {
+      return null;
+    }
+
     return (
       <FontAwesomeIcon
         icon={this.state.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}

test/short-urls/ShortUrlsList.test.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
+import shortUrlsListCreator, { SORTABLE_FIELDS } from '../../src/short-urls/ShortUrlsList';
+
+describe('<ShortUrlsList />', () => {
+  let wrapper;
+  const ShortUrlsRow = () => '';
+  const listShortUrlsMock = jest.fn();
+  const resetShortUrlParamsMock = jest.fn();
+
+  const ShortUrlsList = shortUrlsListCreator(ShortUrlsRow);
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <ShortUrlsList
+        listShortUrls={listShortUrlsMock}
+        resetShortUrlParams={resetShortUrlParamsMock}
+        shortUrlsListParams={{
+          page: '1',
+          tags: [ 'test tag' ],
+          searchTerm: 'example.com',
+        }}
+        match={{ params: {} }}
+        location={{}}
+        loading={false}
+        error={false}
+        shortUrlsList={
+          [
+            {
+              shortCode: 'testShortCode',
+              shortUrl: 'https://www.example.com/testShortUrl',
+              longUrl: 'https://www.example.com/testLongUrl',
+              tags: [ 'test tag' ],
+            },
+          ]
+        }
+      />
+    );
+  });
+
+  afterEach(() => {
+    listShortUrlsMock.mockReset();
+    resetShortUrlParamsMock.mockReset();
+    wrapper && wrapper.unmount();
+  });
+
+  it('wraps a ShortUrlsList with 1 ShortUrlsRow', () => {
+    expect(wrapper.find(ShortUrlsRow)).toHaveLength(1);
+  });
+
+  it('should render inner table by default', () => {
+    expect(wrapper.find('table')).toHaveLength(1);
+  });
+
+  it('should render table header by default', () => {
+    expect(wrapper.find('table').shallow().find('thead')).toHaveLength(1);
+  });
+
+  it('should render 6 table header cells by default', () => {
+    expect(wrapper.find('table').shallow()
+      .find('thead').shallow()
+      .find('tr').shallow()
+      .find('th')).toHaveLength(6);
+  });
+
+  it('should render 6 table header cells without order by icon by default', () => {
+    const thElements = wrapper.find('table').shallow()
+      .find('thead').shallow()
+      .find('tr').shallow()
+      .find('th').map((e) => e.shallow());
+
+    for (const thElement of thElements) {
+      expect(thElement.find(FontAwesomeIcon)).toHaveLength(0);
+    }
+  });
+
+  it('should render 6 table header cells with conditional order by icon', () => {
+    const orderDirOptionToIconMap = {
+      ASC: caretUpIcon,
+      DESC: caretDownIcon,
+    };
+
+    for (const sortableField of Object.getOwnPropertyNames(SORTABLE_FIELDS)) {
+      wrapper.setState({ orderField: sortableField, orderDir: undefined });
+      const [ dateCreatedThElement ] = wrapper.find('table').shallow()
+        .find('thead').shallow()
+        .find('tr').shallow()
+        .find('th')
+        .filterWhere(
+          (e) =>
+            e.text().includes(SORTABLE_FIELDS[sortableField])
+        );
+
+      const dateCreatedThElementWrapper = shallow(dateCreatedThElement);
+
+      expect(dateCreatedThElementWrapper.find(FontAwesomeIcon)).toHaveLength(0);
+
+      for (const orderDir of Object.getOwnPropertyNames(orderDirOptionToIconMap)) {
+        wrapper.setState({ orderField: sortableField, orderDir });
+        const [ dateCreatedThElement ] = wrapper.find('table').shallow()
+          .find('thead').shallow()
+          .find('tr').shallow()
+          .find('th')
+          .filterWhere(
+            (e) =>
+              e.text().includes(SORTABLE_FIELDS[sortableField])
+          );
+
+        const dateCreatedThElementWrapper = shallow(dateCreatedThElement);
+
+        expect(dateCreatedThElementWrapper.find(FontAwesomeIcon)).toHaveLength(1);
+        expect(
+          dateCreatedThElementWrapper.find(FontAwesomeIcon).prop('icon')
+        ).toEqual(orderDirOptionToIconMap[orderDir]);
+      }
+    }
+  });
+});