diff --git a/CHANGELOG.md b/CHANGELOG.md
index f39b3ad9..66a55f29 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 660e559a..11822c3a 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/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 (
', () => {
+ let wrapper;
+ const ShortUrlsRow = () => '';
+ const listShortUrlsMock = jest.fn();
+ const resetShortUrlParamsMock = jest.fn();
+
+ const ShortUrlsList = shortUrlsListCreator(ShortUrlsRow);
+
+ beforeEach(() => {
+ wrapper = shallow(
+
+ );
+ });
+
+ 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]);
+ }
+ }
+ });
+});