From ab99213d8c6b9f5031118cf24493d7d35a71561d Mon Sep 17 00:00:00 2001 From: Haocen Xu Date: Sat, 14 Sep 2019 12:23:26 -0400 Subject: [PATCH] When no order is specified, the order by indicator(triangle) in column header should be Cleared --- CHANGELOG.md | 2 +- src/short-urls/ShortUrlsList.js | 6 +- test/short-urls/ShortUrlsList.test.js | 120 ++++++++++++++++++++++++++ 3 files changed, 126 insertions(+), 2 deletions(-) create mode 100644 test/short-urls/ShortUrlsList.test.js 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]); + } + } + }); +});