From 1118d2600a783c03858c2df5be7c1d5989d4e980 Mon Sep 17 00:00:00 2001 From: louisbl Date: Sat, 1 Dec 2018 13:14:53 +0100 Subject: [PATCH 1/3] Fixes #2306 Fixes arrow in sorted column header when the field use sortBy props. --- packages/ra-ui-materialui/src/list/Datagrid.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ra-ui-materialui/src/list/Datagrid.js b/packages/ra-ui-materialui/src/list/Datagrid.js index 90f2dd5e71e..7a3f0d8994d 100644 --- a/packages/ra-ui-materialui/src/list/Datagrid.js +++ b/packages/ra-ui-materialui/src/list/Datagrid.js @@ -156,8 +156,8 @@ class Datagrid extends Component { currentSort={currentSort} field={field} isSorting={ - field.props.source === - currentSort.field + currentSort.field === + (field.props.sortBy || field.props.source) } key={field.props.source || index} resource={resource} From 9812f574d5ab5a30c7d942c635ac1047a9889844 Mon Sep 17 00:00:00 2001 From: louisbl Date: Tue, 4 Dec 2018 18:08:39 +0100 Subject: [PATCH 2/3] Add integration tests for sorting --- cypress/integration/list.js | 25 +++++++++++++++++++++++++ cypress/support/ListPage.js | 5 +++++ 2 files changed, 30 insertions(+) diff --git a/cypress/integration/list.js b/cypress/integration/list.js index 97c2302d04b..96c8511c331 100644 --- a/cypress/integration/list.js +++ b/cypress/integration/list.js @@ -167,4 +167,29 @@ describe('List Page', () => { cy.contains('1-10 of 10'); }); }); + + describe("Sorting", () => { + it('should display a sort arrow when clicking on a sortable column header', () => { + ListPagePosts.toggleColumnSort('id'); + cy.get(ListPagePosts.elements.sortBy('id')).get("svg").should('be.visible'); + + ListPagePosts.toggleColumnSort('tags'); + cy.get(ListPagePosts.elements.sortBy('tags')).get("svg").should('be.visible'); + }); + + it('should hide the sort arrow when clicking on another sortable column header', () => { + ListPagePosts.toggleColumnSort('published_at'); + cy.get(ListPagePosts.elements.sortBy('id')).get("svg").should('be.hidden'); + cy.get(ListPagePosts.elements.sortBy('tags')).get("svg").should('be.hidden'); + }); + + it('should reverse the sort arrow when clicking on an already sorted column header', () => { + ListPagePosts.toggleColumnSort('published_at'); + ListPagePosts.toggleColumnSort('tags'); + cy.get(ListPagePosts.elements.sortBy('tags')).get("[class*=iconDirectionAsc]").should('exist'); + + ListPagePosts.toggleColumnSort('tags'); + cy.get(ListPagePosts.elements.sortBy('tags')).get("[class*=iconDirectionDesc]").should('exist'); + }); + }) }); diff --git a/cypress/support/ListPage.js b/cypress/support/ListPage.js index d3403196793..841441f58f6 100644 --- a/cypress/support/ListPage.js +++ b/cypress/support/ListPage.js @@ -15,6 +15,7 @@ export default url => ({ recordRows: '.datagrid-body tr', viewsColumn: '.datagrid-body tr td:nth-child(6)', datagridHeaders: 'th', + sortBy: name => `th span[data-sort=${name}]`, logout: '.logout', bulkActionsToolbar: '[data-test=bulk-actions-toolbar]', customBulkActionsButton: @@ -101,4 +102,8 @@ export default url => ({ applyDeleteBulkAction() { cy.get(this.elements.deleteBulkActionsButton).click(); }, + + toggleColumnSort(name) { + cy.get(this.elements.sortBy(name)).click(); + } }); From 5ff475f1f3f354c63389883ca3e095cdc7ef7ed9 Mon Sep 17 00:00:00 2001 From: louisbl Date: Tue, 4 Dec 2018 18:09:56 +0100 Subject: [PATCH 3/3] Update example and tests to use sortBy props --- cypress/integration/list.js | 14 +++++++------- examples/simple/src/posts/PostList.js | 1 + 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/cypress/integration/list.js b/cypress/integration/list.js index 96c8511c331..146cc8b6574 100644 --- a/cypress/integration/list.js +++ b/cypress/integration/list.js @@ -173,23 +173,23 @@ describe('List Page', () => { ListPagePosts.toggleColumnSort('id'); cy.get(ListPagePosts.elements.sortBy('id')).get("svg").should('be.visible'); - ListPagePosts.toggleColumnSort('tags'); - cy.get(ListPagePosts.elements.sortBy('tags')).get("svg").should('be.visible'); + ListPagePosts.toggleColumnSort('"tags.name"'); + cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("svg").should('be.visible'); }); it('should hide the sort arrow when clicking on another sortable column header', () => { ListPagePosts.toggleColumnSort('published_at'); cy.get(ListPagePosts.elements.sortBy('id')).get("svg").should('be.hidden'); - cy.get(ListPagePosts.elements.sortBy('tags')).get("svg").should('be.hidden'); + cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("svg").should('be.hidden'); }); it('should reverse the sort arrow when clicking on an already sorted column header', () => { ListPagePosts.toggleColumnSort('published_at'); - ListPagePosts.toggleColumnSort('tags'); - cy.get(ListPagePosts.elements.sortBy('tags')).get("[class*=iconDirectionAsc]").should('exist'); + ListPagePosts.toggleColumnSort('"tags.name"'); + cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("[class*=iconDirectionAsc]").should('exist'); - ListPagePosts.toggleColumnSort('tags'); - cy.get(ListPagePosts.elements.sortBy('tags')).get("[class*=iconDirectionDesc]").should('exist'); + ListPagePosts.toggleColumnSort('"tags.name"'); + cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("[class*=iconDirectionDesc]").should('exist'); }); }) }); diff --git a/examples/simple/src/posts/PostList.js b/examples/simple/src/posts/PostList.js index 67dd09f0931..b7b2bf3e06d 100644 --- a/examples/simple/src/posts/PostList.js +++ b/examples/simple/src/posts/PostList.js @@ -114,6 +114,7 @@ const PostList = withStyles(styles)(({ classes, ...props }) => ( label="Tags" reference="tags" source="tags" + sortBy="tags.name" cellClassName={classes.hiddenOnSmallScreens} headerClassName={classes.hiddenOnSmallScreens} >