From 70a81781e5a3f36d87497bb4cb74cad941e7a8d2 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Fri, 1 Sep 2023 11:40:15 +0100 Subject: [PATCH 01/22] Added shift+click sorting #1541 --- packages/datagateway-common/src/api/index.tsx | 28 ++++++--- .../headerRenderers/dataHeader.component.tsx | 61 +++++++++++++++---- .../src/table/table.component.tsx | 28 ++++++++- 3 files changed, 95 insertions(+), 22 deletions(-) diff --git a/packages/datagateway-common/src/api/index.tsx b/packages/datagateway-common/src/api/index.tsx index 8c61ee671..801dcf6c9 100644 --- a/packages/datagateway-common/src/api/index.tsx +++ b/packages/datagateway-common/src/api/index.tsx @@ -260,7 +260,8 @@ export const getApiParams = ( export const useSort = (): (( sortKey: string, order: Order | null, - updateMethod: UpdateMethod + updateMethod: UpdateMethod, + shiftDown?: boolean ) => void) => { const { push, replace } = useHistory(); @@ -268,17 +269,26 @@ export const useSort = (): (( ( sortKey: string, order: Order | null, - updateMethod: UpdateMethod + updateMethod: UpdateMethod, + shiftDown?: boolean ): void => { let query = parseSearchToQuery(window.location.search); + console.log(query); if (order !== null) { - query = { - ...query, - sort: { - ...query.sort, - [sortKey]: order, - }, - }; + query = shiftDown + ? { + ...query, + sort: { + ...query.sort, + [sortKey]: order, + }, + } + : { + ...query, + sort: { + [sortKey]: order, + }, + }; } else { // if order is null, user no longer wants to sort by that column so remove column from sort state const { [sortKey]: order, ...rest } = query.sort; diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx index fafa07dcb..c25203558 100644 --- a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx +++ b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx @@ -10,6 +10,9 @@ import { SxProps, } from '@mui/material'; import Draggable from 'react-draggable'; +import SortIcon from '@mui/icons-material/Sort'; +import AddIcon from '@mui/icons-material/Add'; +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; const DataHeader = React.memo( ( @@ -19,13 +22,15 @@ const DataHeader = React.memo( onSort: ( column: string, order: Order | null, - defaultSort: UpdateMethod + defaultSort: UpdateMethod, + shiftDown?: boolean ) => void; resizeColumn: (dataKey: string, deltaX: number) => void; labelString: string; icon?: React.ComponentType; filterComponent?: (label: string, dataKey: string) => React.ReactElement; defaultSort?: Order; + shiftDown?: boolean; } ): React.ReactElement => { const { @@ -40,15 +45,18 @@ const DataHeader = React.memo( resizeColumn, icon: Icon, filterComponent, + shiftDown, } = props; const currSortDirection = sort[dataKey]; + const [hover, setHover] = React.useState(false); + //Apply default sort on page load (but only if not already defined in URL params) //This will apply them in the order of the column definitions given to a table React.useEffect(() => { if (defaultSort !== undefined && currSortDirection === undefined) - onSort(dataKey, defaultSort, 'replace'); + onSort(dataKey, defaultSort, 'replace', false); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -65,16 +73,45 @@ const DataHeader = React.memo( } const inner = !disableSort ? ( - onSort(dataKey, nextSortDirection, 'push')} - > - - {label} - - + dataKey in sort ? ( + + onSort(dataKey, nextSortDirection, 'replace', shiftDown) + } + > + + {label} + + + ) : ( + { + onSort(dataKey, nextSortDirection, 'replace', shiftDown); + setHover(false); + }} + onMouseEnter={() => setHover(true)} + onMouseLeave={() => setHover(false)} + IconComponent={ + hover ? ArrowUpwardIcon : shiftDown ? AddIcon : SortIcon + } + > + + {label} + + + ) ) : ( {label} diff --git a/packages/datagateway-common/src/table/table.component.tsx b/packages/datagateway-common/src/table/table.component.tsx index 5c5d3d9da..d762f492a 100644 --- a/packages/datagateway-common/src/table/table.component.tsx +++ b/packages/datagateway-common/src/table/table.component.tsx @@ -123,7 +123,8 @@ interface VirtualizedTableProps { onSort: ( column: string, order: Order | null, - updateMethod: UpdateMethod + updateMethod: UpdateMethod, + shiftDown?: boolean ) => void; detailsPanel?: React.ComponentType; actions?: React.ComponentType[]; @@ -163,6 +164,30 @@ const VirtualizedTable = React.memo( disableSelectAll, } = props; + const [shiftDown, setShiftDown] = React.useState(false); + // add event listener to listen for shift key being pressed + React.useEffect(() => { + const handleKeyDown = (event: KeyboardEvent): void => { + if (event.key === 'Shift') { + setShiftDown(true); + } + }; + + const handleKeyUp = (event: KeyboardEvent): void => { + if (event.key === 'Shift') { + setShiftDown(false); + } + }; + + document.addEventListener('keydown', handleKeyDown); + document.addEventListener('keyup', handleKeyUp); + + return (): void => { + document.removeEventListener('keydown', handleKeyDown); + document.removeEventListener('keyup', handleKeyUp); + }; + }, []); + if ( (props.loadMoreRows && typeof totalRowCount === 'undefined') || (totalRowCount && typeof props.loadMoreRows === 'undefined') @@ -452,6 +477,7 @@ const VirtualizedTable = React.memo( filterComponent={filterComponent} resizeColumn={resizeColumn} defaultSort={defaultSort} + shiftDown={shiftDown} /> )} className={className} From d1294dd4de1a69399a4d5c111d100f3891ebce05 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Fri, 1 Sep 2023 11:44:08 +0100 Subject: [PATCH 02/22] Code cleanup #1541 --- packages/datagateway-common/src/api/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/datagateway-common/src/api/index.tsx b/packages/datagateway-common/src/api/index.tsx index 801dcf6c9..d0b2638e2 100644 --- a/packages/datagateway-common/src/api/index.tsx +++ b/packages/datagateway-common/src/api/index.tsx @@ -273,7 +273,6 @@ export const useSort = (): (( shiftDown?: boolean ): void => { let query = parseSearchToQuery(window.location.search); - console.log(query); if (order !== null) { query = shiftDown ? { From 88d27029d6bfa3ddcc80605825705b5e7138be09 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Fri, 1 Sep 2023 14:58:11 +0100 Subject: [PATCH 03/22] Sorting unit test fix #1541 --- .../dataHeader.component.test.tsx.snap | 16 +++--- .../dataHeader.component.test.tsx | 10 ++-- .../headerRenderers/dataHeader.component.tsx | 4 +- .../src/table/table.component.test.tsx | 6 +- ...ownloadStatusTable.component.test.tsx.snap | 56 +++++++++---------- ...ownloadStatusTable.component.test.tsx.snap | 24 ++++---- .../downloadTab.component.test.tsx.snap | 32 +++++------ 7 files changed, 74 insertions(+), 74 deletions(-) diff --git a/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap b/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap index f463d63d1..6157e8b88 100644 --- a/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap +++ b/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap @@ -131,7 +131,7 @@ exports[`Data column header component renders correctly with sort and filter 1`] class="MuiBox-root css-0" > @@ -142,13 +142,13 @@ exports[`Data column header component renders correctly with sort and filter 1`]

@@ -257,7 +257,7 @@ exports[`Data column header component renders correctly with sort but no filter class="MuiBox-root css-0" > @@ -268,13 +268,13 @@ exports[`Data column header component renders correctly with sort but no filter

diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.test.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.test.tsx index 96dfe5a5f..6c454de5f 100644 --- a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.test.tsx +++ b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.test.tsx @@ -71,7 +71,7 @@ describe('Data column header component', () => { it('sets asc order', async () => { render(); await user.click(await screen.findByRole('button', { name: 'Test' })); - expect(onSort).toHaveBeenCalledWith('test', 'asc', 'push'); + expect(onSort).toHaveBeenCalledWith('test', 'asc', 'push', false); }); it('sets desc order', async () => { @@ -84,7 +84,7 @@ describe('Data column header component', () => { /> ); await user.click(await screen.findByRole('button', { name: 'Test' })); - expect(onSort).toHaveBeenCalledWith('test', 'desc', 'push'); + expect(onSort).toHaveBeenCalledWith('test', 'desc', 'push', false); }); it('sets null order', async () => { @@ -97,7 +97,7 @@ describe('Data column header component', () => { /> ); await user.click(await screen.findByRole('button', { name: 'Test' })); - expect(onSort).toHaveBeenCalledWith('test', null, 'push'); + expect(onSort).toHaveBeenCalledWith('test', null, 'push', false); }); }); @@ -105,11 +105,11 @@ describe('Data column header component', () => { it('sets asc order', () => { render(); - expect(onSort).toHaveBeenCalledWith('test', 'asc', 'replace'); + expect(onSort).toHaveBeenCalledWith('test', 'asc', 'replace', false); }); it('sets desc order', () => { render(); - expect(onSort).toHaveBeenCalledWith('test', 'desc', 'replace'); + expect(onSort).toHaveBeenCalledWith('test', 'desc', 'replace', false); }); }); diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx index c25203558..9cd0e8d66 100644 --- a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx +++ b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx @@ -79,7 +79,7 @@ const DataHeader = React.memo( active={true} direction={currSortDirection} onClick={() => - onSort(dataKey, nextSortDirection, 'replace', shiftDown) + onSort(dataKey, nextSortDirection, 'push', shiftDown ?? false) } > { - onSort(dataKey, nextSortDirection, 'replace', shiftDown); + onSort(dataKey, nextSortDirection, 'push', shiftDown ?? false); setHover(false); }} onMouseEnter={() => setHover(true)} diff --git a/packages/datagateway-common/src/table/table.component.test.tsx b/packages/datagateway-common/src/table/table.component.test.tsx index 527561ffe..2bf7ae7fb 100644 --- a/packages/datagateway-common/src/table/table.component.test.tsx +++ b/packages/datagateway-common/src/table/table.component.test.tsx @@ -76,7 +76,7 @@ describe('Table component', () => { it('calls onSort function when sort label clicked', async () => { render(); await user.click(await screen.findByText('Test 1')); - expect(onSort).toHaveBeenCalledWith('TEST1', 'asc', 'push'); + expect(onSort).toHaveBeenCalledWith('TEST1', 'asc', 'push', false); }); it('calls onSort function when defaultSort has been specified', () => { @@ -89,8 +89,8 @@ describe('Table component', () => { }; render(
); - expect(onSort).toHaveBeenCalledWith('TEST1', 'asc', 'replace'); - expect(onSort).toHaveBeenCalledWith('TEST2', 'desc', 'replace'); + expect(onSort).toHaveBeenCalledWith('TEST1', 'asc', 'replace', false); + expect(onSort).toHaveBeenCalledWith('TEST2', 'desc', 'replace', false); }); it('renders select column correctly', async () => { diff --git a/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap b/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap index 325c25e3f..4003ffba4 100644 --- a/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap +++ b/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap @@ -101,7 +101,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -112,13 +112,13 @@ exports[`Admin Download Status Table should render correctly 1`] = `

@@ -224,7 +224,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -235,13 +235,13 @@ exports[`Admin Download Status Table should render correctly 1`] = `

@@ -347,7 +347,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -358,13 +358,13 @@ exports[`Admin Download Status Table should render correctly 1`] = `

@@ -470,7 +470,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -481,13 +481,13 @@ exports[`Admin Download Status Table should render correctly 1`] = `

@@ -593,7 +593,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -604,13 +604,13 @@ exports[`Admin Download Status Table should render correctly 1`] = `

@@ -716,7 +716,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -727,13 +727,13 @@ exports[`Admin Download Status Table should render correctly 1`] = `

@@ -1019,7 +1019,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -1030,13 +1030,13 @@ exports[`Admin Download Status Table should render correctly 1`] = `

diff --git a/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap b/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap index 7ae32866e..611336f5b 100644 --- a/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap +++ b/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap @@ -61,7 +61,7 @@ exports[`Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -72,13 +72,13 @@ exports[`Download Status Table should render correctly 1`] = `

@@ -184,7 +184,7 @@ exports[`Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -195,13 +195,13 @@ exports[`Download Status Table should render correctly 1`] = `

@@ -307,7 +307,7 @@ exports[`Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -318,13 +318,13 @@ exports[`Download Status Table should render correctly 1`] = `

diff --git a/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap b/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap index 049b6b42f..0c7e868b9 100644 --- a/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap +++ b/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap @@ -122,7 +122,7 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -133,13 +133,13 @@ exports[`DownloadTab should render correctly 1`] = `

@@ -245,7 +245,7 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -256,13 +256,13 @@ exports[`DownloadTab should render correctly 1`] = `

@@ -368,7 +368,7 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -379,13 +379,13 @@ exports[`DownloadTab should render correctly 1`] = `

@@ -423,7 +423,7 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -434,13 +434,13 @@ exports[`DownloadTab should render correctly 1`] = `

From a28a6bda487ab4b25bd53e9dc8e3d5722163ec46 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Mon, 4 Sep 2023 09:51:27 +0100 Subject: [PATCH 04/22] Shift-click sorting for download tables #1541 --- .../downloadCartTable.component.test.tsx | 8 ++++---- .../downloadCart/downloadCartTable.component.tsx | 6 ++++-- .../adminDownloadStatusTable.component.test.tsx | 9 ++++++--- .../adminDownloadStatusTable.component.tsx | 11 +++++++++-- .../downloadStatusTable.component.test.tsx | 14 +++++++------- .../downloadStatusTable.component.tsx | 11 +++++++++-- 6 files changed, 39 insertions(+), 20 deletions(-) diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx index fa22a6f42..b5842c326 100644 --- a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx @@ -276,10 +276,10 @@ describe('Download cart table component', () => { rows = await screen.findAllByText(/(DATAFILE|DATASET|INVESTIGATION) \d/); // row should be sorted by type desc & name asc. - expect(rows[0]).toHaveTextContent('INVESTIGATION 1'); - expect(rows[1]).toHaveTextContent('INVESTIGATION 2'); - expect(rows[2]).toHaveTextContent('DATASET 1'); - expect(rows[3]).toHaveTextContent('DATAFILE 1'); + expect(rows[0]).toHaveTextContent('DATAFILE 1'); + expect(rows[1]).toHaveTextContent('DATASET 1'); + expect(rows[2]).toHaveTextContent('INVESTIGATION 1'); + expect(rows[3]).toHaveTextContent('INVESTIGATION 2'); await user.click(nameSortLabel); diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx index 4c389d298..17963293c 100644 --- a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx +++ b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx @@ -194,9 +194,11 @@ const DownloadCartTable: React.FC = ( [t, textFilter] ); const onSort = React.useCallback( - (column: string, order: 'desc' | 'asc' | null) => { + (column: string, order: 'desc' | 'asc' | null, _, shiftDown?: boolean) => { if (order) { - setSort({ ...sort, [column]: order }); + shiftDown + ? setSort({ ...sort, [column]: order }) + : setSort({ [column]: order }); } else { const { [column]: order, ...restOfSort } = sort; setSort(restOfSort); diff --git a/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx b/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx index 9ed3db3a2..323f311c0 100644 --- a/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx @@ -188,7 +188,8 @@ describe('Admin Download Status Table', () => { downloadApiUrl: mockedSettings.downloadApiUrl, facilityName: mockedSettings.facilityName, }, - `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.userName asc, download.transport asc, download.id ASC LIMIT 0, 50` + `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.transport asc, download.id ASC LIMIT 0, 50` + // `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.userName asc, download.transport asc, download.id ASC LIMIT 0, 50` ); await user.click(accessMethodSortLabel); @@ -197,7 +198,8 @@ describe('Admin Download Status Table', () => { downloadApiUrl: mockedSettings.downloadApiUrl, facilityName: mockedSettings.facilityName, }, - `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.userName asc, download.transport desc, download.id ASC LIMIT 0, 50` + `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.transport desc, download.id ASC LIMIT 0, 50` + // `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.userName asc, download.transport desc, download.id ASC LIMIT 0, 50` ); await user.click(accessMethodSortLabel); @@ -206,7 +208,8 @@ describe('Admin Download Status Table', () => { downloadApiUrl: mockedSettings.downloadApiUrl, facilityName: mockedSettings.facilityName, }, - `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.userName asc, download.id ASC LIMIT 0, 50` + `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.id ASC LIMIT 0, 50` + // `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.userName asc, download.id ASC LIMIT 0, 50` ); }); diff --git a/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.tsx b/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.tsx index f9125908e..6752b35b6 100644 --- a/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.tsx +++ b/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.tsx @@ -370,9 +370,16 @@ const AdminDownloadStatusTable: React.FC = () => { }, ]} sort={sort} - onSort={(column: string, order: 'desc' | 'asc' | null) => { + onSort={( + column: string, + order: 'desc' | 'asc' | null, + _, + shiftDown?: boolean + ) => { if (order) { - setSort({ ...sort, [column]: order }); + shiftDown + ? setSort({ ...sort, [column]: order }) + : setSort({ [column]: order }); } else { const { [column]: order, ...restOfSort } = sort; setSort(restOfSort); diff --git a/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx b/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx index 9337fd6b4..a1bf177ba 100644 --- a/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx @@ -225,8 +225,8 @@ describe('Download Status Table', () => { // name should be in asc order rows = await screen.findAllByText(/^test-file-\d$/); expect(rows[0]).toHaveTextContent('test-file-1'); - expect(rows[1]).toHaveTextContent('test-file-3'); - expect(rows[2]).toHaveTextContent('test-file-2'); + expect(rows[1]).toHaveTextContent('test-file-2'); + expect(rows[2]).toHaveTextContent('test-file-3'); expect(rows[3]).toHaveTextContent('test-file-4'); expect(rows[4]).toHaveTextContent('test-file-5'); @@ -234,11 +234,11 @@ describe('Download Status Table', () => { // name should be in desc order rows = await screen.findAllByText(/^test-file-\d$/); - expect(rows[0]).toHaveTextContent('test-file-3'); - expect(rows[1]).toHaveTextContent('test-file-1'); - expect(rows[2]).toHaveTextContent('test-file-5'); - expect(rows[3]).toHaveTextContent('test-file-4'); - expect(rows[4]).toHaveTextContent('test-file-2'); + expect(rows[0]).toHaveTextContent('test-file-5'); + expect(rows[1]).toHaveTextContent('test-file-4'); + expect(rows[2]).toHaveTextContent('test-file-3'); + expect(rows[3]).toHaveTextContent('test-file-2'); + expect(rows[4]).toHaveTextContent('test-file-1'); }); it('should filter data when text fields are typed into', async () => { diff --git a/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.tsx b/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.tsx index 68cafe642..0c8f3c082 100644 --- a/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.tsx +++ b/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.tsx @@ -326,9 +326,16 @@ const DownloadStatusTable: React.FC = ( }, ]} sort={sort} - onSort={(column: string, order: 'desc' | 'asc' | null) => { + onSort={( + column: string, + order: 'desc' | 'asc' | null, + _, + shiftDown?: boolean + ) => { if (order) { - setSort({ ...sort, [column]: order }); + shiftDown + ? setSort({ ...sort, [column]: order }) + : setSort({ [column]: order }); } else { const { [column]: order, ...restOfSort } = sort; setSort(restOfSort); From e03740d291fd9ecea53c7f2c9b9ea1bdca1b0540 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Mon, 4 Sep 2023 17:00:36 +0100 Subject: [PATCH 05/22] Fixed sorting in card view #1541 --- .../src/card/cardView.component.test.tsx | 20 ++--- .../src/card/cardView.component.tsx | 79 ++++++++++++++++--- 2 files changed, 76 insertions(+), 23 deletions(-) diff --git a/packages/datagateway-common/src/card/cardView.component.test.tsx b/packages/datagateway-common/src/card/cardView.component.test.tsx index 1a5674810..f2912f5b5 100644 --- a/packages/datagateway-common/src/card/cardView.component.test.tsx +++ b/packages/datagateway-common/src/card/cardView.component.test.tsx @@ -227,7 +227,7 @@ describe('Card View', () => { await user.click( await screen.findByRole('button', { name: 'Sort by TITLE' }) ); - expect(onSort).toHaveBeenNthCalledWith(1, 'title', 'asc', 'push'); + expect(onSort).toHaveBeenNthCalledWith(1, 'title', 'asc', 'push', false); updatedProps = { ...updatedProps, @@ -240,7 +240,7 @@ describe('Card View', () => { name: 'Sort by TITLE, current direction ascending', }) ); - expect(onSort).toHaveBeenNthCalledWith(2, 'title', 'desc', 'push'); + expect(onSort).toHaveBeenNthCalledWith(2, 'title', 'desc', 'push', false); updatedProps = { ...updatedProps, @@ -253,7 +253,7 @@ describe('Card View', () => { name: 'Sort by TITLE, current direction descending', }) ); - expect(onSort).toHaveBeenNthCalledWith(3, 'title', null, 'push'); + expect(onSort).toHaveBeenNthCalledWith(3, 'title', null, 'push', false); }); it('default sort applied correctly', () => { @@ -272,9 +272,9 @@ describe('Card View', () => { }; render(); - expect(onSort).toHaveBeenCalledWith('title', 'asc', 'replace'); - expect(onSort).toHaveBeenCalledWith('name', 'desc', 'replace'); - expect(onSort).toHaveBeenCalledWith('test', 'asc', 'replace'); + expect(onSort).toHaveBeenCalledWith('title', 'asc', 'replace', false); + expect(onSort).toHaveBeenCalledWith('name', 'desc', 'replace', false); + expect(onSort).toHaveBeenCalledWith('test', 'asc', 'replace', false); }); it('can sort by description with label', async () => { @@ -290,7 +290,7 @@ describe('Card View', () => { await user.click( await screen.findByRole('button', { name: 'Sort by NAME' }) ); - expect(onSort).toHaveBeenCalledWith('name', 'asc', 'push'); + expect(onSort).toHaveBeenCalledWith('name', 'asc', 'push', false); }); it('can sort by description without label', async () => { @@ -306,7 +306,7 @@ describe('Card View', () => { await user.click( await screen.findByRole('button', { name: 'Sort by NAME' }) ); - expect(onSort).toHaveBeenCalledWith('name', 'asc', 'push'); + expect(onSort).toHaveBeenCalledWith('name', 'asc', 'push', false); }); it('page changed when sort applied', async () => { @@ -318,7 +318,7 @@ describe('Card View', () => { await screen.findByRole('button', { name: 'Sort by TITLE' }) ); - expect(onSort).toHaveBeenCalledWith('title', 'asc', 'push'); + expect(onSort).toHaveBeenCalledWith('title', 'asc', 'push', false); expect(onPageChange).toHaveBeenCalledWith(1); }); @@ -377,7 +377,7 @@ describe('Card View', () => { await user.click( await screen.findByRole('button', { name: 'Sort by VISITID' }) ); - expect(onSort).toHaveBeenCalledWith('visitId', 'asc', 'push'); + expect(onSort).toHaveBeenCalledWith('visitId', 'asc', 'push', false); }); it('information displays with content that has no tooltip', async () => { diff --git a/packages/datagateway-common/src/card/cardView.component.tsx b/packages/datagateway-common/src/card/cardView.component.tsx index fcbb48d44..9be1ef6d7 100644 --- a/packages/datagateway-common/src/card/cardView.component.tsx +++ b/packages/datagateway-common/src/card/cardView.component.tsx @@ -33,6 +33,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import AdvancedFilter from './advancedFilter.component'; import EntityCard, { EntityImageDetails } from './entityCard.component'; +import AddIcon from '@mui/icons-material/Add'; const SelectedChips = styled('ul')(({ theme }) => ({ display: 'inline-flex', @@ -85,7 +86,8 @@ export interface CardViewProps { onSort: ( sort: string, order: Order | null, - updateMethod: UpdateMethod + updateMethod: UpdateMethod, + shiftDown?: boolean ) => void; // Props to get title, description of the card @@ -189,6 +191,30 @@ const CardView = (props: CardViewProps): React.ReactElement => { sort, } = props; + const [shiftDown, setShiftDown] = React.useState(false); + // add event listener to listen for shift key being pressed + React.useEffect(() => { + const handleKeyDown = (event: KeyboardEvent): void => { + if (event.key === 'Shift') { + setShiftDown(true); + } + }; + + const handleKeyUp = (event: KeyboardEvent): void => { + if (event.key === 'Shift') { + setShiftDown(false); + } + }; + + document.addEventListener('keydown', handleKeyDown); + document.addEventListener('keyup', handleKeyUp); + + return (): void => { + document.removeEventListener('keydown', handleKeyDown); + document.removeEventListener('keyup', handleKeyUp); + }; + }, []); + // Results options (by default it is 10, 20 and 30). const resOptions = React.useMemo( () => @@ -233,20 +259,25 @@ const CardView = (props: CardViewProps): React.ReactElement => { //defaultSort has been provided React.useEffect(() => { if (title.defaultSort !== undefined && sort[title.dataKey] === undefined) - onSort(title.dataKey, title.defaultSort, 'replace'); + onSort(title.dataKey, title.defaultSort, 'replace', shiftDown); if ( description && description.defaultSort !== undefined && sort[description.dataKey] === undefined ) - onSort(description.dataKey, description.defaultSort, 'replace'); + onSort( + description.dataKey, + description.defaultSort, + 'replace', + shiftDown + ); if (information) { information.forEach((element: CardViewDetails) => { if ( element.defaultSort !== undefined && sort[element.dataKey] === undefined ) - onSort(element.dataKey, element.defaultSort, 'replace'); + onSort(element.dataKey, element.defaultSort, 'replace', shiftDown); }); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -597,7 +628,8 @@ const CardView = (props: CardViewProps): React.ReactElement => { onSort( s.dataKey, nextSortDirection(s.dataKey), - 'push' + 'push', + shiftDown ); if (page !== 1) { onPageChange(1); @@ -615,14 +647,35 @@ const CardView = (props: CardViewProps): React.ReactElement => { > - - {s.dataKey in sort && sort[s.dataKey]} - + {s.dataKey in sort ? ( + + {s.dataKey in sort && sort[s.dataKey]} + + ) : shiftDown ? ( + + {s.dataKey in sort && sort[s.dataKey]} + + ) : ( + + {s.dataKey in sort && sort[s.dataKey]} + + )} ))} From 374c857c726a0184b64ead8f2a2178bee404dac7 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Tue, 5 Sep 2023 13:54:27 +0100 Subject: [PATCH 06/22] changed the way shift is passed to onSort #1541 --- .../src/table/headerRenderers/dataHeader.component.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx index 9cd0e8d66..2fd5ed131 100644 --- a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx +++ b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx @@ -78,8 +78,8 @@ const DataHeader = React.memo( className={'tour-dataview-sort'} active={true} direction={currSortDirection} - onClick={() => - onSort(dataKey, nextSortDirection, 'push', shiftDown ?? false) + onClick={(event) => + onSort(dataKey, nextSortDirection, 'push', event.shiftKey) } > { - onSort(dataKey, nextSortDirection, 'push', shiftDown ?? false); + onClick={(event) => { + onSort(dataKey, nextSortDirection, 'push', event.shiftKey); setHover(false); }} onMouseEnter={() => setHover(true)} From 0586bd4c8e7071a574fa4357a3112e75052bfc3c Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Tue, 5 Sep 2023 13:55:24 +0100 Subject: [PATCH 07/22] Fix issues with download e2e tests #1541 --- .../cypress/e2e/adminDownloadStatus.cy.ts | 28 ++++++++++--------- .../cypress/e2e/downloadCart.cy.ts | 2 +- .../cypress/e2e/downloadStatus.cy.ts | 18 ++++++------ 3 files changed, 25 insertions(+), 23 deletions(-) diff --git a/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts b/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts index e59734e2f..e6bb4ccbb 100644 --- a/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts +++ b/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts @@ -43,7 +43,7 @@ describe('Admin Download Status', () => { }); }); - it('should be able to sort by all sort directions on single and multiple columns', () => { + it('should be able to sort by all sort directions on single column', () => { // remove default sort cy.contains('[role="button"]', 'Requested Date').click(); @@ -77,28 +77,30 @@ describe('Admin Download Status', () => { cy.get('@accessMethodSortButton').click(); cy.get('[aria-sort="ascending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="5"]').should( 'have.text', 'https' ); - // multiple columns + // check that the other columns are not sorted cy.contains('[role="button"]', 'Deleted').click(); - cy.contains('[role="button"]', 'Availability').click(); - cy.get('[aria-rowindex="2"] [aria-colindex="6"]').should( + cy.get('[aria-rowindex="17"] [aria-colindex="6"]').should( 'have.text', - 'Available' + 'Expired' ); - cy.get('[aria-rowindex="3"] [aria-colindex="6"]').should( + + cy.contains('[role="button"]', 'Availability').click({ shiftKey: true }); + + cy.get('[aria-rowindex="2"] [aria-colindex="6"]').should( 'have.text', - 'Expired' + 'Available' ); }); diff --git a/packages/datagateway-download/cypress/e2e/downloadCart.cy.ts b/packages/datagateway-download/cypress/e2e/downloadCart.cy.ts index 2ca7ad9e9..714257104 100644 --- a/packages/datagateway-download/cypress/e2e/downloadCart.cy.ts +++ b/packages/datagateway-download/cypress/e2e/downloadCart.cy.ts @@ -71,7 +71,7 @@ describe('Download Cart', () => { cy.contains('[role="button"]', 'Name').click(); cy.get('[aria-rowindex=1] [aria-colindex=1]').should( 'have.text', - 'INVESTIGATION 10' + 'DATASET 1' ); }); diff --git a/packages/datagateway-download/cypress/e2e/downloadStatus.cy.ts b/packages/datagateway-download/cypress/e2e/downloadStatus.cy.ts index 117ab83d7..ea5d2d8e2 100644 --- a/packages/datagateway-download/cypress/e2e/downloadStatus.cy.ts +++ b/packages/datagateway-download/cypress/e2e/downloadStatus.cy.ts @@ -69,7 +69,7 @@ describe('Download Status', () => { }); }); - it('should be able to sort by all sort directions on single and multiple columns', () => { + it('should be able to sort by all sort directions on single column', () => { // remove default sort cy.contains('[role="button"]', 'Requested Date').click(); @@ -109,12 +109,12 @@ describe('Download Status', () => { cy.get('@nameSortButton').click(); cy.get('[aria-sort="ascending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="1"]').should( 'have.text', 'test-file-1' @@ -125,13 +125,13 @@ describe('Download Status', () => { 'Available' ); - // multiple columns + // check if the sort changes when clicking on a different column cy.contains('[role="button"]', 'Access Method').click(); cy.contains('[role="button"]', 'Availability').click(); cy.get('[aria-rowindex="1"] [aria-colindex="1"]').should( 'have.text', - 'test-file-4' + 'test-file-1' ); }); From ca20c22620095f017cfc1d196c4876de39e9608a Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Tue, 5 Sep 2023 14:45:53 +0100 Subject: [PATCH 08/22] changed the way shiftDown is passed in cardview #1541 --- .../src/card/cardView.component.tsx | 15 +++++---------- .../src/table/table.component.tsx | 3 +-- .../cypress/e2e/adminDownloadStatus.cy.ts | 2 +- 3 files changed, 7 insertions(+), 13 deletions(-) diff --git a/packages/datagateway-common/src/card/cardView.component.tsx b/packages/datagateway-common/src/card/cardView.component.tsx index 9be1ef6d7..505b0f462 100644 --- a/packages/datagateway-common/src/card/cardView.component.tsx +++ b/packages/datagateway-common/src/card/cardView.component.tsx @@ -259,25 +259,20 @@ const CardView = (props: CardViewProps): React.ReactElement => { //defaultSort has been provided React.useEffect(() => { if (title.defaultSort !== undefined && sort[title.dataKey] === undefined) - onSort(title.dataKey, title.defaultSort, 'replace', shiftDown); + onSort(title.dataKey, title.defaultSort, 'replace', false); if ( description && description.defaultSort !== undefined && sort[description.dataKey] === undefined ) - onSort( - description.dataKey, - description.defaultSort, - 'replace', - shiftDown - ); + onSort(description.dataKey, description.defaultSort, 'replace', false); if (information) { information.forEach((element: CardViewDetails) => { if ( element.defaultSort !== undefined && sort[element.dataKey] === undefined ) - onSort(element.dataKey, element.defaultSort, 'replace', shiftDown); + onSort(element.dataKey, element.defaultSort, 'replace', false); }); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -624,12 +619,12 @@ const CardView = (props: CardViewProps): React.ReactElement => { { + onClick={(event) => { onSort( s.dataKey, nextSortDirection(s.dataKey), 'push', - shiftDown + event.shiftKey ); if (page !== 1) { onPageChange(1); diff --git a/packages/datagateway-common/src/table/table.component.tsx b/packages/datagateway-common/src/table/table.component.tsx index d762f492a..aa07dd089 100644 --- a/packages/datagateway-common/src/table/table.component.tsx +++ b/packages/datagateway-common/src/table/table.component.tsx @@ -123,8 +123,7 @@ interface VirtualizedTableProps { onSort: ( column: string, order: Order | null, - updateMethod: UpdateMethod, - shiftDown?: boolean + updateMethod: UpdateMethod ) => void; detailsPanel?: React.ComponentType; actions?: React.ComponentType[]; diff --git a/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts b/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts index e6bb4ccbb..03a50c026 100644 --- a/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts +++ b/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts @@ -96,7 +96,7 @@ describe('Admin Download Status', () => { 'Expired' ); - cy.contains('[role="button"]', 'Availability').click({ shiftKey: true }); + cy.contains('[role="button"]', 'Availability').click(); cy.get('[aria-rowindex="2"] [aria-colindex="6"]').should( 'have.text', From 52d0395585253c6bd6d3b87c5b67075abcf1b574 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Tue, 5 Sep 2023 14:48:19 +0100 Subject: [PATCH 09/22] fix to the single column sort test in admin download #1541 --- .../cypress/e2e/adminDownloadStatus.cy.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts b/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts index 03a50c026..0552797a6 100644 --- a/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts +++ b/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts @@ -88,14 +88,6 @@ describe('Admin Download Status', () => { 'https' ); - // check that the other columns are not sorted - cy.contains('[role="button"]', 'Deleted').click(); - - cy.get('[aria-rowindex="17"] [aria-colindex="6"]').should( - 'have.text', - 'Expired' - ); - cy.contains('[role="button"]', 'Availability').click(); cy.get('[aria-rowindex="2"] [aria-colindex="6"]').should( From 72be066ccb4807681f644b6caf3141336598bd13 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Wed, 6 Sep 2023 08:58:00 +0100 Subject: [PATCH 10/22] Fixed dataview e2e tests #1541 --- .../cypress/e2e/table/datafiles.cy.ts | 14 +++++++------- .../cypress/e2e/table/datasets.cy.ts | 12 ++++++------ .../cypress/e2e/table/dls/datafiles.cy.ts | 18 ++++++++++-------- .../cypress/e2e/table/dls/datasets.cy.ts | 16 ++++++++-------- .../cypress/e2e/table/dls/myData.cy.ts | 14 +++++++------- .../cypress/e2e/table/investigations.cy.ts | 14 +++++++------- .../e2e/table/isis/dataPublications.cy.ts | 16 ++++++++-------- .../cypress/e2e/table/isis/datafiles.cy.ts | 18 ++++++++++-------- .../cypress/e2e/table/isis/datasets.cy.ts | 14 +++++++------- .../e2e/table/isis/facilityCycles.cy.ts | 12 ++++++------ .../cypress/e2e/table/isis/instruments.cy.ts | 12 ++++++------ 11 files changed, 82 insertions(+), 78 deletions(-) diff --git a/packages/datagateway-dataview/cypress/e2e/table/datafiles.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/datafiles.cy.ts index f22a37247..b48cecb42 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/datafiles.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/datafiles.cy.ts @@ -70,12 +70,12 @@ describe('Datafiles Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains( '/five/with/question.bmp' ); @@ -83,7 +83,7 @@ describe('Datafiles Table', () => { // multiple columns cy.contains('[role="button"]', 'Name').click(); cy.wait('@datafilesOrder', { timeout: 10000 }); - cy.contains('[role="button"]', 'Modified Time').click(); + cy.contains('[role="button"]', 'Modified Time').click({ shiftKey: true }); cy.wait('@datafilesOrder', { timeout: 10000 }); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('Datafile 1071'); diff --git a/packages/datagateway-dataview/cypress/e2e/table/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/datasets.cy.ts index 2b0dd0fd6..d67f961bc 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/datasets.cy.ts @@ -55,12 +55,12 @@ describe('Datasets Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 1'); cy.contains('[role="button"]', 'Create Time').as('timeSortButton').click(); diff --git a/packages/datagateway-dataview/cypress/e2e/table/dls/datafiles.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/dls/datafiles.cy.ts index f8e316209..9dd507734 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/dls/datafiles.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/dls/datafiles.cy.ts @@ -71,12 +71,12 @@ describe('DLS - Datafiles Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains( '/time/run/drug.jpeg' ); @@ -84,9 +84,11 @@ describe('DLS - Datafiles Table', () => { // multiple columns cy.get('@timeSortButton').click(); cy.wait('@datafilesOrder', { timeout: 10000 }); - cy.contains('[role="button"]', 'Name').as('nameSortButton').click(); + cy.contains('[role="button"]', 'Name') + .as('nameSortButton') + .click({ shiftKey: true }); cy.wait('@datafilesOrder', { timeout: 10000 }); - cy.get('@nameSortButton').click(); + cy.get('@nameSortButton').click({ shiftKey: true }); cy.wait('@datafilesOrder', { timeout: 10000 }); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('Datafile 60'); diff --git a/packages/datagateway-dataview/cypress/e2e/table/dls/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/dls/datasets.cy.ts index a5f9ce928..21bd5286e 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/dls/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/dls/datasets.cy.ts @@ -78,20 +78,20 @@ describe('DLS - Datasets Table', () => { cy.get('@nameSortButton').click(); cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 1'); // multiple columns cy.get('@timeSortButton').click(); cy.wait('@datasets', { timeout: 10000 }); - cy.get('@nameSortButton').click(); + cy.get('@nameSortButton').click({ shiftKey: true }); cy.wait('@datasets', { timeout: 10000 }); - cy.get('@nameSortButton').click(); + cy.get('@nameSortButton').click({ shiftKey: true }); cy.wait('@datasets', { timeout: 10000 }); cy.get('[aria-rowcount="2"]').should('exist'); diff --git a/packages/datagateway-dataview/cypress/e2e/table/dls/myData.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/dls/myData.cy.ts index 803ddc0fa..39ff03070 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/dls/myData.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/dls/myData.cy.ts @@ -68,19 +68,19 @@ describe('DLS - MyData Table', () => { cy.get('@titleSortButton').click(); cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="2"]').contains( 'Star enter wide nearly off.' ); // multiple columns cy.get('@titleSortButton').click(); - cy.contains('[role="button"]', 'Instrument').click(); + cy.contains('[role="button"]', 'Instrument').click({ shiftKey: true }); cy.get('[aria-rowindex="1"] [aria-colindex="2"]').contains( 'Across prepare why go.' diff --git a/packages/datagateway-dataview/cypress/e2e/table/investigations.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/investigations.cy.ts index 4a046e913..81143cec9 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/investigations.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/investigations.cy.ts @@ -65,19 +65,19 @@ describe('Investigations Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains( 'Analysis reflect work or hour color maybe. Much team discussion message weight.' ); // multiple columns cy.contains('[role="button"]', 'Start Date').click(); - cy.get('@titleSortButton').click(); + cy.get('@titleSortButton').click({ shiftKey: true }); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains( 'Analysis reflect work or hour color maybe. Much team discussion message weight.' ); diff --git a/packages/datagateway-dataview/cypress/e2e/table/isis/dataPublications.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/isis/dataPublications.cy.ts index 89b934715..1df0c72f0 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/isis/dataPublications.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/isis/dataPublications.cy.ts @@ -80,20 +80,20 @@ describe('ISIS - Data Publication Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.be.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.be.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="1"]').contains( 'Article subject amount' ); // multiple columns cy.get('@dateSortButton').click(); - cy.get('@dateSortButton').click(); - cy.get('@titleSortButton').click(); + cy.get('@dateSortButton').click({ shiftKey: true }); + cy.get('@titleSortButton').click({ shiftKey: true }); cy.get('[aria-rowindex="1"] [aria-colindex="1"]').contains( 'Church child time Congress' diff --git a/packages/datagateway-dataview/cypress/e2e/table/isis/datafiles.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/isis/datafiles.cy.ts index 9a36b164d..662c768ff 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/isis/datafiles.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/isis/datafiles.cy.ts @@ -87,12 +87,12 @@ describe('ISIS - Datafiles Table', () => { cy.get('@locationSortButton').click(); cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains( '/debate/form/growth.gif' ); @@ -100,9 +100,11 @@ describe('ISIS - Datafiles Table', () => { // multiple columns cy.get('@timeSortButton').click(); cy.wait('@datafilesOrder', { timeout: 10000 }); - cy.contains('[role="button"]', 'Name').as('nameSortButton').click(); + cy.contains('[role="button"]', 'Name') + .as('nameSortButton') + .click({ shiftKey: true }); cy.wait('@datafilesOrder', { timeout: 10000 }); - cy.get('@nameSortButton').click(); + cy.get('@nameSortButton').click({ shiftKey: true }); cy.wait('@datafilesOrder', { timeout: 10000 }); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('Datafile 78'); diff --git a/packages/datagateway-dataview/cypress/e2e/table/isis/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/isis/datasets.cy.ts index bdd38ce5f..8505a30f5 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/isis/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/isis/datasets.cy.ts @@ -78,18 +78,18 @@ describe('ISIS - Datasets Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 19'); // multiple columns cy.get('@timeSortButton').click(); cy.wait('@datasetsOrder', { timeout: 10000 }); - cy.get('@nameSortButton').click(); + cy.get('@nameSortButton').click({ shiftKey: true }); cy.wait('@datasetsOrder', { timeout: 10000 }); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 19'); diff --git a/packages/datagateway-dataview/cypress/e2e/table/isis/facilityCycles.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/isis/facilityCycles.cy.ts index 9ec657116..9cafc65e3 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/isis/facilityCycles.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/isis/facilityCycles.cy.ts @@ -59,12 +59,12 @@ describe('ISIS - FacilityCycles Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="2"]').contains( '2001-04-02 00:00:00' ); diff --git a/packages/datagateway-dataview/cypress/e2e/table/isis/instruments.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/isis/instruments.cy.ts index 7ea36932d..d61dfcb93 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/isis/instruments.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/isis/instruments.cy.ts @@ -62,12 +62,12 @@ describe('ISIS - Instruments Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - 'have.css', - 'opacity', - '0' - ); + // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); + // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( + // 'have.css', + // 'opacity', + // '0' + // ); cy.get('[aria-rowindex="1"] [aria-colindex="2"]').contains( 'Stop prove field onto think suffer measure.' ); From e94c94ac6730cca590ea30bfde87194eff69ee2c Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Wed, 6 Sep 2023 10:24:29 +0100 Subject: [PATCH 11/22] Fix dataview e2e tests 2 #1541 --- packages/datagateway-dataview/cypress/e2e/card/datasets.cy.ts | 2 +- .../datagateway-dataview/cypress/e2e/card/dls/datasets.cy.ts | 2 +- .../cypress/e2e/card/investigations.cy.ts | 2 +- .../cypress/e2e/card/isis/dataPublications.cy.ts | 2 +- .../datagateway-dataview/cypress/e2e/card/isis/datasets.cy.ts | 2 +- .../cypress/e2e/card/isis/facilityCycles.cy.ts | 2 +- .../cypress/e2e/card/isis/instruments.cy.ts | 4 ++-- .../cypress/e2e/card/isis/investigations.cy.ts | 2 +- 8 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/datagateway-dataview/cypress/e2e/card/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/datasets.cy.ts index c67b35719..4678eec83 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/datasets.cy.ts @@ -56,7 +56,7 @@ describe('Datasets Cards', () => { timeout: 10000, }); - cy.get('@nameSortButton').click(); + cy.get('@nameSortButton').click({ shiftKey: true }); cy.wait('@getDatasetsOrder', { timeout: 10000, }); diff --git a/packages/datagateway-dataview/cypress/e2e/card/dls/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/dls/datasets.cy.ts index 38f99e7ab..e26ea8d3f 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/dls/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/dls/datasets.cy.ts @@ -87,7 +87,7 @@ describe('DLS - Datasets Cards', () => { timeout: 10000, }); - cy.get('@nameSortButton').click(); + cy.get('@nameSortButton').click({ shiftKey: true }); cy.wait('@getDatasetsOrder', { timeout: 10000, }); diff --git a/packages/datagateway-dataview/cypress/e2e/card/investigations.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/investigations.cy.ts index 59aa31f72..a77e6fae6 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/investigations.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/investigations.cy.ts @@ -65,7 +65,7 @@ describe('Investigations Cards', () => { // multiple fields cy.contains('[role="button"]', 'Start Date').click(); - cy.get('@titleSortButton').click(); + cy.get('@titleSortButton').click({ shiftKey: true }); cy.wait('@getInvestigationsOrder', { timeout: 10000 }); cy.contains('[aria-label="Sort by TITLE"]', 'asc').should('exist'); diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/dataPublications.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/dataPublications.cy.ts index e38c1b435..0c46cc63f 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/dataPublications.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/dataPublications.cy.ts @@ -74,7 +74,7 @@ describe('ISIS - Data Publication Cards', () => { // multiple fields cy.contains('[role="button"]', 'Title').click(); - cy.get('@dateSortButton').click(); + cy.get('@dateSortButton').click({ shiftKey: true }); cy.wait('@getDataPublicationsOrder', { timeout: 10000 }); cy.contains('[aria-label="Sort by TITLE"]', 'asc').should('exist'); diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/datasets.cy.ts index e3c0dc560..02990544a 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/datasets.cy.ts @@ -90,7 +90,7 @@ describe('ISIS - Datasets Cards', () => { timeout: 10000, }); - cy.get('@nameSortButton').click(); + cy.get('@nameSortButton').click({ shiftKey: true }); cy.wait('@getDatasetsOrder', { timeout: 10000, }); diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/facilityCycles.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/facilityCycles.cy.ts index 88695d603..939a2514e 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/facilityCycles.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/facilityCycles.cy.ts @@ -55,7 +55,7 @@ describe('ISIS - FacilityCycles Cards', () => { // multiple fields cy.get('@dateSortButton').click(); - cy.contains('[role="button"]', 'End Date').click(); + cy.contains('[role="button"]', 'End Date').click({ shiftKey: true }); cy.wait('@getFacilityCyclesOrder', { timeout: 10000 }); cy.contains('[aria-label="Sort by START DATE"]', 'asc').should('exist'); diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts index 2937c76f0..f139b43c0 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts @@ -77,13 +77,13 @@ describe('ISIS - Instruments Cards', () => { .first() .contains('Stop prove field onto think suffer measure.'); - cy.contains('[role="button"]', 'Description').click(); + cy.contains('[role="button"]', 'Description').click({ shiftKey: true }); cy.wait('@getInstrumentsOrder', { timeout: 10000 }); cy.get('[data-testid="card"]') .first() .contains('Sound low certain challenge yet sport happy.'); - cy.contains('[role="button"]', 'Type').click(); + cy.contains('[role="button"]', 'Type').click({ shiftKey: true }); cy.wait('@getInstrumentsOrder', { timeout: 10000 }); cy.contains('[aria-label="Sort by DESCRIPTION"]', 'asc').should('exist'); cy.contains('[aria-label="Sort by TYPE"]', 'asc').should('exist'); diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/investigations.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/investigations.cy.ts index 408b68aa1..448664331 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/investigations.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/investigations.cy.ts @@ -148,7 +148,7 @@ describe('ISIS - Investigations Cards', () => { // multiple fields cy.get('@dateSortButton').click(); - cy.get('@titleSortButton').click(); + cy.get('@titleSortButton').click({ shiftKey: true }); cy.wait('@getInvestigationsOrder', { timeout: 10000 }); cy.contains('[aria-label="Sort by TITLE"]', 'asc').should('exist'); From 76f26b87f9e14b8f293cbb7db464fbfa0cbafa5a Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Fri, 8 Sep 2023 11:19:32 +0100 Subject: [PATCH 12/22] Improved code coverage #1541 --- .../datagateway-common/src/api/index.test.tsx | 42 +++++++++++++++++ .../src/card/cardView.component.test.tsx | 46 +++++++++++++++++++ .../dataHeader.component.test.tsx.snap | 4 +- .../dataHeader.component.test.tsx | 17 +++++++ .../headerRenderers/dataHeader.component.tsx | 4 ++ .../src/table/table.component.test.tsx | 15 ++++++ .../downloadCartTable.component.test.tsx | 21 +++++++-- ...ownloadStatusTable.component.test.tsx.snap | 14 +++--- ...ownloadStatusTable.component.test.tsx.snap | 6 +-- ...dminDownloadStatusTable.component.test.tsx | 24 ++++++++-- .../downloadStatusTable.component.test.tsx | 28 ++++++++++- .../downloadTab.component.test.tsx.snap | 8 ++-- 12 files changed, 202 insertions(+), 27 deletions(-) diff --git a/packages/datagateway-common/src/api/index.test.tsx b/packages/datagateway-common/src/api/index.test.tsx index 01d349039..dedceba84 100644 --- a/packages/datagateway-common/src/api/index.test.tsx +++ b/packages/datagateway-common/src/api/index.test.tsx @@ -347,6 +347,7 @@ describe('generic api functions', () => { afterEach(() => { jest.restoreAllMocks(); jest.resetModules(); + window.history.pushState({}, 'Test', '/'); }); describe('useSort', () => { @@ -398,6 +399,47 @@ describe('generic api functions', () => { search: '?', }); }); + + it('returns callback that, when called without shift modifier, replaces sort with the new one', () => { + window.history.pushState( + {}, + 'Test', + '?sort=%7B%22name%22%3A%22asc%22%7D' + ); + const { result } = renderHook(() => useSort(), { + wrapper, + }); + + act(() => { + result.current('title', 'asc', 'push', false); + }); + + expect(pushSpy).toHaveBeenCalledWith({ + search: `?sort=${encodeURIComponent('{"title":"asc"}')}`, + }); + }); + + it('returns callback that, when called with shift modifier, appends new sort to the existing one', () => { + window.history.pushState( + {}, + 'Test', + '?sort=%7B%22name%22%3A%22asc%22%7D' + ); + + const { result } = renderHook(() => useSort(), { + wrapper, + }); + + act(() => { + result.current('title', 'asc', 'push', true); + }); + + console.log(history.location.search); + + expect(pushSpy).toHaveBeenCalledWith({ + search: `?sort=${encodeURIComponent('{"name":"asc","title":"asc"}')}`, + }); + }); }); describe('usePushFilter', () => { diff --git a/packages/datagateway-common/src/card/cardView.component.test.tsx b/packages/datagateway-common/src/card/cardView.component.test.tsx index f2912f5b5..023aefe7b 100644 --- a/packages/datagateway-common/src/card/cardView.component.test.tsx +++ b/packages/datagateway-common/src/card/cardView.component.test.tsx @@ -380,6 +380,52 @@ describe('Card View', () => { expect(onSort).toHaveBeenCalledWith('visitId', 'asc', 'push', false); }); + it('calls onSort with correct parameters when shift key is pressed', async () => { + const updatedProps = { + ...props, + title: { dataKey: 'title', disableSort: true }, + description: { dataKey: 'name', disableSort: true }, + information: [ + { dataKey: 'visitId' }, + { + dataKey: 'name', + label: 'Name', + content: (entity: Entity) => entity.name, + }, + ], + page: 1, + }; + render(); + + // Click with shift to sort ascending + await user.keyboard('{Shift>}'); + await user.click( + await screen.findByRole('button', { name: 'Sort by VISITID' }) + ); + await user.keyboard('{/Shift}'); + + expect(onSort).toHaveBeenCalledWith('visitId', 'asc', 'push', true); + + await user.click( + await screen.findByRole('button', { name: 'Sort by NAME' }) + ); + + expect(onSort).toHaveBeenCalledWith('name', 'asc', 'push', false); + }); + + it('displays correct icon when no sort applied', async () => { + render(); + + const cards = await screen.findAllByRole('button', { name: /Sort by/ }); + expect( + within(cards[0]).getByTestId(`ArrowDownwardIcon`) + ).toBeInTheDocument(); + + await user.keyboard('{Shift>}'); + expect(within(cards[0]).getByTestId(`AddIcon`)).toBeInTheDocument(); + await user.keyboard('{/Shift}'); + }); + it('information displays with content that has no tooltip', async () => { const updatedProps = { ...props, diff --git a/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap b/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap index 6157e8b88..5a6ab1e21 100644 --- a/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap +++ b/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap @@ -131,7 +131,7 @@ exports[`Data column header component renders correctly with sort and filter 1`] class="MuiBox-root css-0" > @@ -257,7 +257,7 @@ exports[`Data column header component renders correctly with sort but no filter class="MuiBox-root css-0" > diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.test.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.test.tsx index 6c454de5f..b357cc3eb 100644 --- a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.test.tsx +++ b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.test.tsx @@ -113,6 +113,23 @@ describe('Data column header component', () => { }); }); + describe('changes icons in the label', () => { + it('changes icon to Add when shift is pressed', async () => { + render(); + expect(screen.getByTestId('AddIcon')).toBeInTheDocument(); + }); + + it('changes icon to ArrowUpward when hovered', async () => { + render(); + expect(screen.getByTestId('SortIcon')).toBeInTheDocument(); + await user.hover(await screen.findByRole('button', { name: 'Test' })); + expect(screen.getByTestId('ArrowUpwardIcon')).toBeInTheDocument(); + + await user.unhover(await screen.findByRole('button', { name: 'Test' })); + expect(screen.getByTestId('SortIcon')).toBeInTheDocument(); + }); + }); + it.skip('calls the resizeColumn method when column resizer is dragged', async () => { // TODO: I think testing-library doesn't support dragging interaction at the moment // the drag example code here only works with ar eal browser: diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx index 2fd5ed131..b98b07593 100644 --- a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx +++ b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx @@ -103,6 +103,10 @@ const DataHeader = React.memo( IconComponent={ hover ? ArrowUpwardIcon : shiftDown ? AddIcon : SortIcon } + sx={{ + transition: 'opacity 0.5s', + opacity: hover ? 0.7 : 1, + }} > { expect(onSort).toHaveBeenCalledWith('TEST2', 'desc', 'replace', false); }); + it('calls onSort with correct parameters when shift key is pressed', async () => { + render(
); + + // Click with shift to sort ascending + await user.keyboard('{Shift>}'); + await user.click(await screen.findByRole('button', { name: 'Test 1' })); + await user.keyboard('{/Shift}'); + + expect(onSort).toHaveBeenCalledWith('TEST1', 'asc', 'push', true); + + await user.click(await screen.findByRole('button', { name: 'Test 2' })); + + expect(onSort).toHaveBeenCalledWith('TEST2', 'asc', 'push', false); + }); + it('renders select column correctly', async () => { render(
{ name: 'downloadCart.name', }); + await user.keyboard('{Shift>}'); await user.click(nameSortLabel); + await user.keyboard('{/Shift}'); rows = await screen.findAllByText(/(DATAFILE|DATASET|INVESTIGATION) \d/); // row should be sorted by type desc & name asc. - expect(rows[0]).toHaveTextContent('DATAFILE 1'); - expect(rows[1]).toHaveTextContent('DATASET 1'); - expect(rows[2]).toHaveTextContent('INVESTIGATION 1'); - expect(rows[3]).toHaveTextContent('INVESTIGATION 2'); + expect(rows[0]).toHaveTextContent('INVESTIGATION 1'); + expect(rows[1]).toHaveTextContent('INVESTIGATION 2'); + expect(rows[2]).toHaveTextContent('DATASET 1'); + expect(rows[3]).toHaveTextContent('DATAFILE 1'); + await user.keyboard('{Shift>}'); await user.click(nameSortLabel); + await user.keyboard('{/Shift}'); rows = await screen.findAllByText(/(DATAFILE|DATASET|INVESTIGATION) \d/); // row should be sorted by type desc & name desc. @@ -298,6 +302,15 @@ describe('Download cart table component', () => { expect(rows[1]).toHaveTextContent('INVESTIGATION 2'); expect(rows[2]).toHaveTextContent('DATASET 1'); expect(rows[3]).toHaveTextContent('DATAFILE 1'); + + await user.click(nameSortLabel); + + rows = await screen.findAllByText(/(DATAFILE|DATASET|INVESTIGATION) \d/); + // row should be sorted by name asc. + expect(rows[0]).toHaveTextContent('DATAFILE 1'); + expect(rows[1]).toHaveTextContent('DATASET 1'); + expect(rows[2]).toHaveTextContent('INVESTIGATION 1'); + expect(rows[3]).toHaveTextContent('INVESTIGATION 2'); }); it('should filter data when text fields are typed into', async () => { diff --git a/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap b/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap index 4003ffba4..a50fb6629 100644 --- a/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap +++ b/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap @@ -101,7 +101,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -224,7 +224,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -347,7 +347,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -470,7 +470,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -593,7 +593,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -716,7 +716,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -1019,7 +1019,7 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > diff --git a/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap b/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap index 611336f5b..6e22a5171 100644 --- a/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap +++ b/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap @@ -61,7 +61,7 @@ exports[`Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -184,7 +184,7 @@ exports[`Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -307,7 +307,7 @@ exports[`Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > diff --git a/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx b/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx index 323f311c0..e9f1cf45b 100644 --- a/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx @@ -182,6 +182,7 @@ describe('Admin Download Status Table', () => { 'downloadStatus.transport' ); + // should replace the sort by username with sort by access method await user.click(accessMethodSortLabel); expect(fetchAdminDownloads).toHaveBeenCalledWith( { @@ -189,17 +190,31 @@ describe('Admin Download Status Table', () => { facilityName: mockedSettings.facilityName, }, `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.transport asc, download.id ASC LIMIT 0, 50` - // `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.userName asc, download.transport asc, download.id ASC LIMIT 0, 50` ); + // should append sort if shift key is pressed + await user.keyboard('{Shift>}'); + await user.click(usernameSortLabel); + await user.keyboard('{/Shift}'); + + expect(fetchAdminDownloads).toHaveBeenCalledWith( + { + downloadApiUrl: mockedSettings.downloadApiUrl, + facilityName: mockedSettings.facilityName, + }, + `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.transport asc, download.userName asc, download.id ASC LIMIT 0, 50` + ); + + await user.keyboard('{Shift>}'); await user.click(accessMethodSortLabel); + await user.keyboard('{/Shift}'); + expect(fetchAdminDownloads).toHaveBeenCalledWith( { downloadApiUrl: mockedSettings.downloadApiUrl, facilityName: mockedSettings.facilityName, }, - `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.transport desc, download.id ASC LIMIT 0, 50` - // `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.userName asc, download.transport desc, download.id ASC LIMIT 0, 50` + `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.transport desc, download.userName asc, download.id ASC LIMIT 0, 50` ); await user.click(accessMethodSortLabel); @@ -208,8 +223,7 @@ describe('Admin Download Status Table', () => { downloadApiUrl: mockedSettings.downloadApiUrl, facilityName: mockedSettings.facilityName, }, - `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.id ASC LIMIT 0, 50` - // `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.userName asc, download.id ASC LIMIT 0, 50` + `WHERE download.facilityName = '${mockedSettings.facilityName}' ORDER BY download.userName asc, download.id ASC LIMIT 0, 50` ); }); diff --git a/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx b/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx index a1bf177ba..921abb9e7 100644 --- a/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx @@ -220,17 +220,31 @@ describe('Download Status Table', () => { // Get the download name sort header. const nameSortLabel = screen.getByText('downloadStatus.filename'); + await user.keyboard('{Shift>}'); await user.click(nameSortLabel); + await user.keyboard('{/Shift}'); // name should be in asc order rows = await screen.findAllByText(/^test-file-\d$/); expect(rows[0]).toHaveTextContent('test-file-1'); - expect(rows[1]).toHaveTextContent('test-file-2'); - expect(rows[2]).toHaveTextContent('test-file-3'); + expect(rows[1]).toHaveTextContent('test-file-3'); + expect(rows[2]).toHaveTextContent('test-file-2'); expect(rows[3]).toHaveTextContent('test-file-4'); expect(rows[4]).toHaveTextContent('test-file-5'); + await user.keyboard('{Shift>}'); await user.click(nameSortLabel); + await user.keyboard('{/Shift}'); + + // name should be in desc order + rows = await screen.findAllByText(/^test-file-\d$/); + expect(rows[0]).toHaveTextContent('test-file-3'); + expect(rows[1]).toHaveTextContent('test-file-1'); + expect(rows[2]).toHaveTextContent('test-file-5'); + expect(rows[3]).toHaveTextContent('test-file-4'); + expect(rows[4]).toHaveTextContent('test-file-2'); + + await user.click(accessMethodSortLabel); // name should be in desc order rows = await screen.findAllByText(/^test-file-\d$/); @@ -239,6 +253,16 @@ describe('Download Status Table', () => { expect(rows[2]).toHaveTextContent('test-file-3'); expect(rows[3]).toHaveTextContent('test-file-2'); expect(rows[4]).toHaveTextContent('test-file-1'); + + await user.click(accessMethodSortLabel); + + // access methods should be in asc order, globus < https + rows = await screen.findAllByText(/^test-file-\d$/); + expect(rows[0]).toHaveTextContent('test-file-2'); + expect(rows[1]).toHaveTextContent('test-file-4'); + expect(rows[2]).toHaveTextContent('test-file-5'); + expect(rows[3]).toHaveTextContent('test-file-1'); + expect(rows[4]).toHaveTextContent('test-file-3'); }); it('should filter data when text fields are typed into', async () => { diff --git a/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap b/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap index 0c7e868b9..9a20a22b7 100644 --- a/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap +++ b/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap @@ -122,7 +122,7 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -245,7 +245,7 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -368,7 +368,7 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -423,7 +423,7 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > From 79e4336f8c9827d5d6386b1d1f89d3b792ab9647 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Mon, 11 Sep 2023 15:39:05 +0100 Subject: [PATCH 13/22] Adjusted + added e2e tests for multiple column sorting #1541 --- .../cypress/e2e/card/datasets.cy.ts | 13 ++++- .../cypress/e2e/card/dls/datasets.cy.ts | 13 ++++- .../cypress/e2e/card/investigations.cy.ts | 10 +++- .../e2e/card/isis/dataPublications.cy.ts | 13 ++++- .../cypress/e2e/card/isis/datasets.cy.ts | 12 +++- .../e2e/card/isis/facilityCycles.cy.ts | 10 +++- .../cypress/e2e/card/isis/instruments.cy.ts | 16 +++++- .../e2e/card/isis/investigations.cy.ts | 11 +++- .../cypress/e2e/table/datafiles.cy.ts | 56 ++++++++++++++++--- .../cypress/e2e/table/datasets.cy.ts | 47 +++++++++++++--- .../cypress/e2e/table/dls/datafiles.cy.ts | 43 +++++++++++--- .../cypress/e2e/table/dls/datasets.cy.ts | 47 +++++++++++++--- .../cypress/e2e/table/dls/myData.cy.ts | 44 ++++++++++++--- .../cypress/e2e/table/investigations.cy.ts | 41 +++++++++++--- .../e2e/table/isis/dataPublications.cy.ts | 44 ++++++++++++--- .../cypress/e2e/table/isis/datafiles.cy.ts | 47 +++++++++++++--- .../cypress/e2e/table/isis/datasets.cy.ts | 45 ++++++++++++--- .../e2e/table/isis/facilityCycles.cy.ts | 48 ++++++++++++++-- .../cypress/e2e/table/isis/instruments.cy.ts | 49 ++++++++++++++-- .../cypress/e2e/adminDownloadStatus.cy.ts | 55 ++++++++++++++---- .../cypress/e2e/downloadCart.cy.ts | 10 +++- .../cypress/e2e/downloadStatus.cy.ts | 55 +++++++++++++----- 22 files changed, 616 insertions(+), 113 deletions(-) diff --git a/packages/datagateway-dataview/cypress/e2e/card/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/datasets.cy.ts index 4678eec83..ad7f41996 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/datasets.cy.ts @@ -50,7 +50,7 @@ describe('Datasets Cards', () => { cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('DATASET 1'); - // multiple fields + // multiple fields (shift click) cy.contains('[role="button"]', 'Create Time').click(); cy.wait('@getDatasetsOrder', { timeout: 10000, @@ -65,6 +65,17 @@ describe('Datasets Cards', () => { cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('DATASET 1'); + + // should replace current sort if clicked without shift + cy.get('@nameSortButton').click(); + + cy.contains('[aria-label="Sort by NAME"]', 'desc').should('exist'); + cy.contains('[role="button"]', 'desc').should('exist'); + cy.contains('[aria-label="Sort by CREATE TIME"]', 'asc').should( + 'not.exist' + ); + + cy.get('[data-testid="card"]').first().contains('DATASET 61'); }); it('should be able to filter by multiple fields', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/card/dls/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/dls/datasets.cy.ts index e26ea8d3f..f1c6f7b90 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/dls/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/dls/datasets.cy.ts @@ -81,7 +81,7 @@ describe('DLS - Datasets Cards', () => { cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('DATASET 1'); - // multiple fields + // multiple fields (shift click) cy.get('@timeSortButton').click(); cy.wait('@getDatasetsOrder', { timeout: 10000, @@ -96,6 +96,17 @@ describe('DLS - Datasets Cards', () => { cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('DATASET 1'); + + // should replace current sort if clicked without shift + cy.get('@nameSortButton').click(); + + cy.contains('[aria-label="Sort by NAME"]', 'desc').should('exist'); + cy.contains('[role="button"]', 'desc').should('exist'); + cy.contains('[aria-label="Sort by CREATE TIME"]', 'asc').should( + 'not.exist' + ); + + cy.get('[data-testid="card"]').first().contains('DATASET 61'); }); it('should be able to filter by multiple fields', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/card/investigations.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/investigations.cy.ts index a77e6fae6..2ba276b02 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/investigations.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/investigations.cy.ts @@ -63,7 +63,7 @@ describe('Investigations Cards', () => { .first() .contains('Analysis reflect work or hour color maybe.'); - // multiple fields + // multiple fields (shift click) cy.contains('[role="button"]', 'Start Date').click(); cy.get('@titleSortButton').click({ shiftKey: true }); cy.wait('@getInvestigationsOrder', { timeout: 10000 }); @@ -74,6 +74,14 @@ describe('Investigations Cards', () => { cy.get('[data-testid="card"]') .first() .contains('Analysis reflect work or hour color maybe.'); + + // should replace current sort if clicked without shift + cy.contains('[role="button"]', 'Start Date').click(); + cy.wait('@getInvestigationsOrder', { timeout: 10000 }); + + cy.contains('[aria-label="Sort by START DATE"]', 'desc').should('exist'); + cy.contains('[aria-label="Sort by TITLE"]', 'asc').should('not.exist'); + cy.get('[data-testid="card"]').first().contains('Put modern else answer.'); }); it('should be able to filter by multiple fields', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/dataPublications.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/dataPublications.cy.ts index 0c46cc63f..918aa94dc 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/dataPublications.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/dataPublications.cy.ts @@ -72,7 +72,7 @@ describe('ISIS - Data Publication Cards', () => { cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('Article'); - // multiple fields + // multiple fields (shift click) cy.contains('[role="button"]', 'Title').click(); cy.get('@dateSortButton').click({ shiftKey: true }); cy.wait('@getDataPublicationsOrder', { timeout: 10000 }); @@ -83,6 +83,17 @@ describe('ISIS - Data Publication Cards', () => { ); cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('Article'); + + // should replace current sort if clicked without shift + cy.get('@dateSortButton').click(); + cy.wait('@getDataPublicationsOrder', { timeout: 10000 }); + + cy.contains('[aria-label="Sort by PUBLICATION DATE"]', 'desc').should( + 'exist' + ); + cy.contains('[aria-label="Sort by TITLE"]', 'asc').should('not.exist'); + + cy.get('[data-testid="card"]').first().contains('Church'); }); it('should be able to filter by multiple fields', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/datasets.cy.ts index 02990544a..7e57b7ffe 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/datasets.cy.ts @@ -84,7 +84,7 @@ describe('ISIS - Datasets Cards', () => { cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('DATASET 19'); - // multiple fields + // multiple fields (shift click) cy.get('@timeSortButton').click(); cy.wait('@getDatasetsOrder', { timeout: 10000, @@ -99,6 +99,16 @@ describe('ISIS - Datasets Cards', () => { cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('DATASET 19'); + + // should replace current sort if clicked without shift + cy.get('@nameSortButton').click(); + + cy.contains('[aria-label="Sort by NAME"]', 'desc').should('exist'); + cy.contains('[aria-label="Sort by CREATE TIME"]', 'asc').should( + 'not.exist' + ); + + cy.get('[data-testid="card"]').first().contains('DATASET 79'); }); it('should be able to filter by multiple fields', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/facilityCycles.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/facilityCycles.cy.ts index 939a2514e..68533d878 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/facilityCycles.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/facilityCycles.cy.ts @@ -53,7 +53,7 @@ describe('ISIS - FacilityCycles Cards', () => { cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('2001 cycle 2'); - // multiple fields + // multiple fields (shift click) cy.get('@dateSortButton').click(); cy.contains('[role="button"]', 'End Date').click({ shiftKey: true }); cy.wait('@getFacilityCyclesOrder', { timeout: 10000 }); @@ -62,6 +62,14 @@ describe('ISIS - FacilityCycles Cards', () => { cy.contains('[aria-label="Sort by END DATE"]', 'asc').should('exist'); cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('2001 cycle 2'); + + // should replace current sort if clicked without shift + cy.get('@dateSortButton').click(); + + cy.contains('[aria-label="Sort by START DATE"]', 'desc').should('exist'); + cy.contains('[aria-label="Sort by END DATE"]', 'asc').should('not.exist'); + cy.contains('[role="button"]', 'asc').should('not.exist'); + cy.get('[data-testid="card"]').first().contains('2004 cycle 3'); }); it('should be able to filter by multiple fields', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts index f139b43c0..6641f3e68 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts @@ -77,7 +77,8 @@ describe('ISIS - Instruments Cards', () => { .first() .contains('Stop prove field onto think suffer measure.'); - cy.contains('[role="button"]', 'Description').click({ shiftKey: true }); + // multiple fields (shift click) + cy.contains('[role="button"]', 'Description').click(); cy.wait('@getInstrumentsOrder', { timeout: 10000 }); cy.get('[data-testid="card"]') .first() @@ -89,6 +90,19 @@ describe('ISIS - Instruments Cards', () => { cy.contains('[aria-label="Sort by TYPE"]', 'asc').should('exist'); cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('10'); + + // should replace current sort if clicked without shift + cy.contains('[role="button"]', 'Name').click(); + cy.wait('@getInstrumentsOrder', { timeout: 10000 }); + cy.contains('[aria-label="Sort by NAME"]', 'asc').should('exist'); + cy.contains('[aria-label="Sort by DESCRIPTION"]', 'asc').should( + 'not.exist' + ); + cy.contains('[aria-label="Sort by TYPE"]', 'asc').should('not.exist'); + cy.contains('[role="button"]', 'desc').should('not.exist'); + cy.get('[data-testid="card"]') + .first() + .contains('Eight imagine picture tough.'); }); it('should be able to filter by multiple fields', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/investigations.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/investigations.cy.ts index 448664331..0c6cd802c 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/investigations.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/investigations.cy.ts @@ -146,7 +146,7 @@ describe('ISIS - Investigations Cards', () => { cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('Stop system investment'); - // multiple fields + // multiple fields (shift click) cy.get('@dateSortButton').click(); cy.get('@titleSortButton').click({ shiftKey: true }); cy.wait('@getInvestigationsOrder', { timeout: 10000 }); @@ -155,6 +155,15 @@ describe('ISIS - Investigations Cards', () => { cy.contains('[aria-label="Sort by START DATE"]', 'asc').should('exist'); cy.contains('[role="button"]', 'desc').should('not.exist'); cy.get('[data-testid="card"]').first().contains('Stop system investment'); + + // should replace current sort if clicked without shift + cy.get('@titleSortButton').click(); + cy.wait('@getInvestigationsOrder', { timeout: 10000 }); + + cy.contains('[aria-label="Sort by TITLE"]', 'desc').should('exist'); + cy.contains('[aria-label="Sort by START DATE"]', 'asc').should('not.exist'); + cy.contains('[role="button"]', 'asc').should('not.exist'); + cy.get('[data-testid="card"]').first().contains('Stop system investment'); }); it('should be able to filter by multiple fields', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/table/datafiles.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/datafiles.cy.ts index b48cecb42..c34ce75d7 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/datafiles.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/datafiles.cy.ts @@ -70,23 +70,65 @@ describe('Datafiles Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 4); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains( '/five/with/question.bmp' ); - // multiple columns + // multiple columns (shift click) cy.contains('[role="button"]', 'Name').click(); cy.wait('@datafilesOrder', { timeout: 10000 }); cy.contains('[role="button"]', 'Modified Time').click({ shiftKey: true }); cy.wait('@datafilesOrder', { timeout: 10000 }); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('Datafile 1071'); + + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'Location').click(); + cy.get('[aria-sort="ascending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains( + '/able/leg/policy.gif' + ); + }); + + it('should change icons when sorting on a column', () => { + cy.wait( + [ + '@investigations', + '@datafilesCount', + '@datasets', + '@datafilesOrder', + '@datafilesOrder', + ], + { + timeout: 10000, + } + ); + + cy.get('[data-testid="SortIcon"]').should('have.length', 4); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Location').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Location').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Name').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 2); }); it('should be able to filter with both text & date filters on multiple columns', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/table/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/datasets.cy.ts index d67f961bc..5c30a8587 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/datasets.cy.ts @@ -55,22 +55,51 @@ describe('Datasets Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 1'); + // multiple columns (shift + click) cy.contains('[role="button"]', 'Create Time').as('timeSortButton').click(); - cy.get('@timeSortButton').click(); - cy.get('@nameSortButton').click(); - cy.get('@nameSortButton').click(); + cy.get('@timeSortButton').click({ shiftKey: true }); + cy.get('@nameSortButton').click({ shiftKey: true }); + cy.get('@nameSortButton').click({ shiftKey: true }); + + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 61'); + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'Modified Time').click(); + cy.contains('[role="button"]', 'Modified Time').click(); + cy.get('[aria-sort="descending"]').should('have.length', 1); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 61'); }); + it('should change icons when sorting on a column', () => { + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Create Time').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Create Time').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Modified Time').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 1); + }); + it('should be able to filter with both text & date filters on multiple columns', () => { // test text filter cy.get('[aria-label="Filter by Name"]').first().type('6'); diff --git a/packages/datagateway-dataview/cypress/e2e/table/dls/datafiles.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/dls/datafiles.cy.ts index 9dd507734..10cd0da45 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/dls/datafiles.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/dls/datafiles.cy.ts @@ -71,17 +71,16 @@ describe('DLS - Datafiles Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 4); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains( '/time/run/drug.jpeg' ); - // multiple columns + // multiple columns (shift click) cy.get('@timeSortButton').click(); cy.wait('@datafilesOrder', { timeout: 10000 }); cy.contains('[role="button"]', 'Name') @@ -92,6 +91,36 @@ describe('DLS - Datafiles Table', () => { cy.wait('@datafilesOrder', { timeout: 10000 }); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('Datafile 60'); + + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'Location').click(); + cy.get('[aria-sort="ascending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains( + '/analysis/unit/bank.tiff' + ); + }); + + it('should change icons when sorting on a column', () => { + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Location').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Location').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Name').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 2); }); it('should be able to filter with both text & date filters on multiple columns', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/table/dls/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/dls/datasets.cy.ts index 21bd5286e..1614f8f56 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/dls/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/dls/datasets.cy.ts @@ -1,7 +1,6 @@ describe('DLS - Datasets Table', () => { beforeEach(() => { cy.intercept('**/investigations/1').as('investigations'); - cy.intercept('**/investigations/findone?*').as('investigationsFindOne'); cy.intercept('**/datasets/count?*').as('datasetsCount'); cy.intercept('**/datasets?*').as('datasets'); cy.login(); @@ -9,7 +8,6 @@ describe('DLS - Datasets Table', () => { [ '@investigations', '@investigations', - '@investigationsFindOne', '@datasetsCount', '@datasets', '@datasets', @@ -78,15 +76,14 @@ describe('DLS - Datasets Table', () => { cy.get('@nameSortButton').click(); cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 1'); - // multiple columns + // multiple columns (shift click) cy.get('@timeSortButton').click(); cy.wait('@datasets', { timeout: 10000 }); cy.get('@nameSortButton').click({ shiftKey: true }); @@ -96,6 +93,38 @@ describe('DLS - Datasets Table', () => { cy.get('[aria-rowcount="2"]').should('exist'); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 1'); + + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'Modified Time').click(); + cy.contains('[role="button"]', 'Modified Time').click(); + cy.get('[aria-sort="descending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 61'); + }); + + it('should change icons when sorting on a column', () => { + // clear the default sort + cy.contains('[role="button"]', 'Create Time').click(); + + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Create Time').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Create Time').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Modified Time').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 1); }); it('should be able to filter with both text & date filters on multiple columns', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/table/dls/myData.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/dls/myData.cy.ts index 39ff03070..bbf38f5c9 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/dls/myData.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/dls/myData.cy.ts @@ -68,23 +68,53 @@ describe('DLS - MyData Table', () => { cy.get('@titleSortButton').click(); cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 5); + + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); cy.get('[aria-rowindex="1"] [aria-colindex="2"]').contains( 'Star enter wide nearly off.' ); - // multiple columns + // multiple columns (shift + click) cy.get('@titleSortButton').click(); cy.contains('[role="button"]', 'Instrument').click({ shiftKey: true }); cy.get('[aria-rowindex="1"] [aria-colindex="2"]').contains( 'Across prepare why go.' ); + + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'Visit').click(); + cy.get('[aria-sort="ascending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('72'); + }); + + it('should change icons when sorting on a column', () => { + // clear default sort + cy.contains('[role="button"]', 'Start Date').click(); + + cy.get('[data-testid="SortIcon"]').should('have.length', 5); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Instrument').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Instrument').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Visit').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 3); }); it('should be able to filter with role, text & date filters on multiple columns', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/table/investigations.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/investigations.cy.ts index 81143cec9..1153dea63 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/investigations.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/investigations.cy.ts @@ -65,22 +65,49 @@ describe('Investigations Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 6); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains( 'Analysis reflect work or hour color maybe. Much team discussion message weight.' ); - // multiple columns + // multiple columns (shift + click) cy.contains('[role="button"]', 'Start Date').click(); cy.get('@titleSortButton').click({ shiftKey: true }); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains( 'Analysis reflect work or hour color maybe. Much team discussion message weight.' ); + + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'Visit').click(); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains('1'); + }); + + it('should change icons when sorting on a column', () => { + cy.get('[data-testid="SortIcon"]').should('have.length', 6); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Visit').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Visit').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Title').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 4); }); it('should be able to filter with both text & date filters on multiple columns', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/table/isis/dataPublications.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/isis/dataPublications.cy.ts index d7854c857..0b0fee3ec 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/isis/dataPublications.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/isis/dataPublications.cy.ts @@ -80,17 +80,16 @@ describe('ISIS - Data Publication Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.be.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="1"]').contains( 'Article subject amount' ); - // multiple columns + // multiple columns (shift click) cy.get('@dateSortButton').click(); cy.get('@dateSortButton').click({ shiftKey: true }); cy.get('@titleSortButton').click({ shiftKey: true }); @@ -98,6 +97,37 @@ describe('ISIS - Data Publication Table', () => { cy.get('[aria-rowindex="1"] [aria-colindex="1"]').contains( 'Church child time Congress' ); + + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'Publication Date').click(); + cy.get('[aria-sort="ascending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('2010-02-24'); + }); + + it('should change icons when sorting on a column', () => { + // clear default sort + cy.contains('[role="button"]', 'Publication Date').click(); + + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'DOI').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'DOI').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Title').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 1); }); it('should be able to filter with both text & date filters on multiple columns', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/table/isis/datafiles.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/isis/datafiles.cy.ts index 662c768ff..51ae140a2 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/isis/datafiles.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/isis/datafiles.cy.ts @@ -87,17 +87,16 @@ describe('ISIS - Datafiles Table', () => { cy.get('@locationSortButton').click(); cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 4); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains( '/debate/form/growth.gif' ); - // multiple columns + // multiple columns (shift click) cy.get('@timeSortButton').click(); cy.wait('@datafilesOrder', { timeout: 10000 }); cy.contains('[role="button"]', 'Name') @@ -108,6 +107,40 @@ describe('ISIS - Datafiles Table', () => { cy.wait('@datafilesOrder', { timeout: 10000 }); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('Datafile 78'); + + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'Location').click(); + cy.wait('@datafilesOrder', { timeout: 10000 }); + cy.get('[aria-sort="ascending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains( + '/add/go/interview.png' + ); + }); + + it('should change icons when sorting on a column', () => { + // clear default sort + cy.contains('[role="button"]', 'Modified Time').click(); + + cy.get('[data-testid="SortIcon"]').should('have.length', 4); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Location').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Location').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Name').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 2); }); it('should be able to filter with both text & date filters on multiple columns', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/table/isis/datasets.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/isis/datasets.cy.ts index 8505a30f5..1b54a0383 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/isis/datasets.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/isis/datasets.cy.ts @@ -78,21 +78,52 @@ describe('ISIS - Datasets Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 19'); - // multiple columns + // multiple columns (shift click) cy.get('@timeSortButton').click(); cy.wait('@datasetsOrder', { timeout: 10000 }); cy.get('@nameSortButton').click({ shiftKey: true }); cy.wait('@datasetsOrder', { timeout: 10000 }); cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 19'); + + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'Modified Time').click(); + cy.contains('[role="button"]', 'Modified Time').click(); + cy.get('[aria-sort="descending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('DATASET 79'); + }); + + it('should change icons when sorting on a column', () => { + // clear default sort + cy.contains('[role="button"]', 'Create Time').click(); + + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Create Time').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Create Time').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Modified Time').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 1); }); it('should be able to filter with both text & date filters on multiple columns', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/table/isis/facilityCycles.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/isis/facilityCycles.cy.ts index 9cafc65e3..da858de13 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/isis/facilityCycles.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/isis/facilityCycles.cy.ts @@ -59,15 +59,51 @@ describe('ISIS - FacilityCycles Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="2"]').contains( '2001-04-02 00:00:00' ); + + // multiple columns (shift click) + cy.contains('[role="button"]', 'Start Date').click(); + cy.get('@nameSortButton').click({ shiftKey: true }); + cy.get('[aria-rowindex="1"] [aria-colindex="1"]').contains('2001 cycle 2'); + + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'End Date').click(); + cy.contains('[role="button"]', 'End Date').click(); + cy.get('[aria-sort="descending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="1"]').contains('2004 cycle 3'); + }); + + it('should change icons when sorting on a column', () => { + // clear default sort + cy.contains('[role="button"]', 'Start Date').click(); + + cy.get('[data-testid="SortIcon"]').should('have.length', 3); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Start Date').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Start Date').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'End Date').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 1); }); it('should be able to filter with both text & date filters on multiple columns', () => { diff --git a/packages/datagateway-dataview/cypress/e2e/table/isis/instruments.cy.ts b/packages/datagateway-dataview/cypress/e2e/table/isis/instruments.cy.ts index d61dfcb93..fea99b6b8 100644 --- a/packages/datagateway-dataview/cypress/e2e/table/isis/instruments.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/table/isis/instruments.cy.ts @@ -62,15 +62,52 @@ describe('ISIS - Instruments Table', () => { cy.get('[aria-sort="ascending"]').should('not.exist'); cy.get('[aria-sort="descending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 2); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="2"]').contains( 'Stop prove field onto think suffer measure.' ); + + // multiple columns (shift click) + cy.contains('[role="button"]', 'Type').click(); + cy.get('@nameSortButton').click({ shiftKey: true }); + cy.get('[aria-sort="ascending"]').should('have.length', 2); + + // should replace the previous sort when clicked without shift + cy.get('@nameSortButton').click(); + cy.get('[aria-sort="descending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('5'); + }); + + it('should change icons when sorting on a column', () => { + // clear default sort + cy.contains('[role="button"]', 'Name').click(); + cy.contains('[role="button"]', 'Name').click(); + + cy.get('[data-testid="SortIcon"]').should('have.length', 2); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Name').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Name').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Type').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.contains('[role="button"]', 'Type').trigger('mouseout'); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 1); }); it('should be able to filter with text filter on multiple columns', () => { diff --git a/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts b/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts index 0552797a6..0283ac15a 100644 --- a/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts +++ b/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts @@ -43,7 +43,7 @@ describe('Admin Download Status', () => { }); }); - it('should be able to sort by all sort directions on single column', () => { + it('should be able to sort by all sort directions on single and multiple columns', () => { // remove default sort cy.contains('[role="button"]', 'Requested Date').click(); @@ -77,23 +77,54 @@ describe('Admin Download Status', () => { cy.get('@accessMethodSortButton').click(); cy.get('[aria-sort="ascending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('[aria-sort="descending"]').should('not.exist'); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 8); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="5"]').should( 'have.text', 'https' ); - cy.contains('[role="button"]', 'Availability').click(); + // multiple columns (shift + click) + cy.contains('[role="button"]', 'Deleted').click(); + cy.contains('[role="button"]', 'Availability').click({ shiftKey: true }); + cy.get('[aria-sort="ascending"]').should('have.length', 2); - cy.get('[aria-rowindex="2"] [aria-colindex="6"]').should( - 'have.text', - 'Available' - ); + cy.get('[aria-rowindex="2"] [aria-colindex="4"]').contains('f70c22fc-c59a'); + + // should replace previous sort when clicked without shift + cy.contains('[role="button"]', 'Prepared ID').click(); + cy.get('[aria-sort="ascending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains('0024e0fd-41aa'); + }); + + it('should change icons when sorting on a column', () => { + // clear default sort + cy.contains('[role="button"]', 'Requested Date').click(); + + cy.get('[data-testid="SortIcon"]').should('have.length', 8); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'ID').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'ID').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Full Name').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 6); }); it('should be able to filter with both text & date filters on multiple columns', () => { diff --git a/packages/datagateway-download/cypress/e2e/downloadCart.cy.ts b/packages/datagateway-download/cypress/e2e/downloadCart.cy.ts index 714257104..2b4918234 100644 --- a/packages/datagateway-download/cypress/e2e/downloadCart.cy.ts +++ b/packages/datagateway-download/cypress/e2e/downloadCart.cy.ts @@ -68,10 +68,18 @@ describe('Download Cart', () => { 'investigation' ); + // multisort with shift key + cy.contains('[role="button"]', 'Name').click({ shiftKey: true }); + cy.get('[aria-rowindex=1] [aria-colindex=1]').should( + 'have.text', + 'INVESTIGATION 10' + ); + + // replace previous sory by clicking without shift key cy.contains('[role="button"]', 'Name').click(); cy.get('[aria-rowindex=1] [aria-colindex=1]').should( 'have.text', - 'DATASET 1' + 'INVESTIGATION 8' ); }); diff --git a/packages/datagateway-download/cypress/e2e/downloadStatus.cy.ts b/packages/datagateway-download/cypress/e2e/downloadStatus.cy.ts index ea5d2d8e2..606c9331f 100644 --- a/packages/datagateway-download/cypress/e2e/downloadStatus.cy.ts +++ b/packages/datagateway-download/cypress/e2e/downloadStatus.cy.ts @@ -69,7 +69,7 @@ describe('Download Status', () => { }); }); - it('should be able to sort by all sort directions on single column', () => { + it('should be able to sort by all sort directions on single and multiple columns', () => { // remove default sort cy.contains('[role="button"]', 'Requested Date').click(); @@ -109,12 +109,12 @@ describe('Download Status', () => { cy.get('@nameSortButton').click(); cy.get('[aria-sort="ascending"]').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionDesc').should('not.exist'); - // cy.get('.MuiTableSortLabel-iconDirectionAsc').should( - // 'have.css', - // 'opacity', - // '0' - // ); + cy.get('[aria-sort="descending"]').should('not.exist'); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + cy.get('[data-testid="SortIcon"]').should('have.length', 4); + cy.get('[data-testid="ArrowUpwardIcon"]').should('not.exist'); + cy.get('[aria-rowindex="1"] [aria-colindex="1"]').should( 'have.text', 'test-file-1' @@ -125,14 +125,43 @@ describe('Download Status', () => { 'Available' ); - // check if the sort changes when clicking on a different column + // multiple columns (shift + click) + cy.contains('[role="button"]', 'Download Name').click(); + cy.contains('[role="button"]', 'Availability').click({ shiftKey: true }); + cy.get('[aria-sort="ascending"]').should('have.length', 2); + + cy.get('[aria-rowindex="1"] [aria-colindex="3"]').contains('Available'); + + // should replace previous sort when clicked without shift cy.contains('[role="button"]', 'Access Method').click(); - cy.contains('[role="button"]', 'Availability').click(); + cy.get('[aria-sort="ascending"]').should('have.length', 1); + cy.get('[aria-rowindex="1"] [aria-colindex="1"]').contains('test-file-2'); + }); - cy.get('[aria-rowindex="1"] [aria-colindex="1"]').should( - 'have.text', - 'test-file-1' - ); + it('should change icons when sorting on a column', () => { + // clear default sort + cy.contains('[role="button"]', 'Requested Date').click(); + + cy.get('[data-testid="SortIcon"]').should('have.length', 4); + + // check icon when clicking on a column + cy.contains('[role="button"]', 'Download Name').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('exist'); + + // check icon when clicking on a column again + cy.contains('[role="button"]', 'Download Name').click(); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + cy.get('.MuiTableSortLabel-iconDirectionAsc').should('not.exist'); + + // check icon when hovering over a column + cy.contains('[role="button"]', 'Access Method').trigger('mouseover'); + cy.get('[data-testid="ArrowUpwardIcon"]').should('have.length', 1); + cy.get('[data-testid="ArrowDownwardIcon"]').should('have.length', 1); + + // check icons when shift is held + cy.get('.App').trigger('keydown', { key: 'Shift' }); + cy.get('[data-testid="AddIcon"]').should('have.length', 2); }); it('should be able to filter with both text & date filters on multiple columns', () => { From 77f39726e6a3a73cca54a25e1d3864f2ae1b283f Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Tue, 12 Sep 2023 08:43:15 +0100 Subject: [PATCH 14/22] fix e2e test for adminDownloadDtatus #1541 --- .../cypress/e2e/adminDownloadStatus.cy.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts b/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts index 0283ac15a..28bcadc55 100644 --- a/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts +++ b/packages/datagateway-download/cypress/e2e/adminDownloadStatus.cy.ts @@ -93,12 +93,18 @@ describe('Admin Download Status', () => { cy.contains('[role="button"]', 'Availability').click({ shiftKey: true }); cy.get('[aria-sort="ascending"]').should('have.length', 2); - cy.get('[aria-rowindex="2"] [aria-colindex="4"]').contains('f70c22fc-c59a'); + cy.get('[aria-rowindex="2"] [aria-colindex="6"]').should( + 'have.text', + 'Available' + ); + cy.get('[aria-rowindex="3"] [aria-colindex="6"]').should( + 'have.text', + 'Expired' + ); // should replace previous sort when clicked without shift cy.contains('[role="button"]', 'Prepared ID').click(); cy.get('[aria-sort="ascending"]').should('have.length', 1); - cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains('0024e0fd-41aa'); }); it('should change icons when sorting on a column', () => { From be9ef8b4b9cf9ee131902575c21ec037d0a42bd6 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Thu, 14 Sep 2023 16:34:02 +0100 Subject: [PATCH 15/22] Reduce code repetition --- .../src/card/cardView.component.tsx | 30 +++------ .../headerRenderers/dataHeader.component.tsx | 63 +++++++++---------- 2 files changed, 36 insertions(+), 57 deletions(-) diff --git a/packages/datagateway-common/src/card/cardView.component.tsx b/packages/datagateway-common/src/card/cardView.component.tsx index 505b0f462..e7dab298d 100644 --- a/packages/datagateway-common/src/card/cardView.component.tsx +++ b/packages/datagateway-common/src/card/cardView.component.tsx @@ -642,35 +642,21 @@ const CardView = (props: CardViewProps): React.ReactElement => { > - {s.dataKey in sort ? ( + { {s.dataKey in sort && sort[s.dataKey]} - ) : shiftDown ? ( - - {s.dataKey in sort && sort[s.dataKey]} - - ) : ( - - {s.dataKey in sort && sort[s.dataKey]} - - )} + } ))} diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx index e83912704..40b8b85d4 100644 --- a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx +++ b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx @@ -72,41 +72,34 @@ const DataHeader = ( } const inner = !disableSort ? ( - dataKey in sort ? ( - - onSort(dataKey, nextSortDirection, 'push', event.shiftKey) - } - > - - {label} - - - ) : ( - { - onSort(dataKey, nextSortDirection, 'push', event.shiftKey); - setHover(false); - }} - onMouseEnter={() => setHover(true)} - onMouseLeave={() => setHover(false)} - IconComponent={hover ? ArrowUpwardIcon : shiftDown ? AddIcon : SortIcon} - sx={{ - transition: 'opacity 0.5s', - opacity: hover ? 0.7 : 1, - }} - > - - {label} - - - ) + { + onSort(dataKey, nextSortDirection, 'push', event.shiftKey); + if (!(dataKey in sort)) setHover(false); + }} + {...(!(dataKey in sort) + ? { + onMouseEnter: () => setHover(true), + onMouseLeave: () => setHover(false), + IconComponent: hover + ? ArrowUpwardIcon + : shiftDown + ? AddIcon + : SortIcon, + sx: { + transition: 'opacity 0.5s', + opacity: hover ? 0.7 : 1, + }, + } + : {})} + > + + {label} + + ) : ( {label} From c9162f3a556ec8e03b709d5cfe82923df3ee751b Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Wed, 11 Oct 2023 14:49:01 +0100 Subject: [PATCH 16/22] add hover tooltips to sort indicators --- .../headerRenderers/dataHeader.component.tsx | 59 ++++++++++--------- 1 file changed, 31 insertions(+), 28 deletions(-) diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx index 40b8b85d4..748cddcbe 100644 --- a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx +++ b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx @@ -9,6 +9,7 @@ import { Divider, SxProps, } from '@mui/material'; +import { StyledTooltip } from '../../arrowtooltip.component'; import Draggable from 'react-draggable'; import SortIcon from '@mui/icons-material/Sort'; import AddIcon from '@mui/icons-material/Add'; @@ -72,34 +73,36 @@ const DataHeader = ( } const inner = !disableSort ? ( - { - onSort(dataKey, nextSortDirection, 'push', event.shiftKey); - if (!(dataKey in sort)) setHover(false); - }} - {...(!(dataKey in sort) - ? { - onMouseEnter: () => setHover(true), - onMouseLeave: () => setHover(false), - IconComponent: hover - ? ArrowUpwardIcon - : shiftDown - ? AddIcon - : SortIcon, - sx: { - transition: 'opacity 0.5s', - opacity: hover ? 0.7 : 1, - }, - } - : {})} - > - - {label} - - + + { + onSort(dataKey, nextSortDirection, 'push', event.shiftKey); + if (!(dataKey in sort)) setHover(false); + }} + {...(!(dataKey in sort) + ? { + onMouseEnter: () => setHover(true), + onMouseLeave: () => setHover(false), + IconComponent: hover + ? ArrowUpwardIcon + : shiftDown + ? AddIcon + : SortIcon, + sx: { + transition: 'opacity 0.5s', + opacity: hover ? 0.7 : 1, + }, + } + : {})} + > + + {label} + + + ) : ( {label} From 755376363536adad440fb43c55c3c4ad4de7ef9a Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Thu, 12 Oct 2023 12:47:32 +0100 Subject: [PATCH 17/22] Hopefully fixed failing tests --- .../src/table/headerRenderers/dataHeader.component.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx index 748cddcbe..ccc62f224 100644 --- a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx +++ b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx @@ -73,7 +73,10 @@ const DataHeader = ( } const inner = !disableSort ? ( - + Date: Thu, 12 Oct 2023 13:25:21 +0100 Subject: [PATCH 18/22] updated snapshots --- .../dataHeader.component.test.tsx.snap | 4 ++++ ...inDownloadStatusTable.component.test.tsx.snap | 16 ++++++++++++++++ .../downloadStatusTable.component.test.tsx.snap | 8 ++++++++ .../downloadTab.component.test.tsx.snap | 8 ++++++++ 4 files changed, 36 insertions(+) diff --git a/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap b/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap index 5a6ab1e21..fd5596d65 100644 --- a/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap +++ b/packages/datagateway-common/src/table/headerRenderers/__snapshots__/dataHeader.component.test.tsx.snap @@ -131,7 +131,9 @@ exports[`Data column header component renders correctly with sort and filter 1`] class="MuiBox-root css-0" > @@ -257,7 +259,9 @@ exports[`Data column header component renders correctly with sort but no filter class="MuiBox-root css-0" > diff --git a/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap b/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap index 566f45fa4..f0915329e 100644 --- a/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap +++ b/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap @@ -101,7 +101,9 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -224,7 +226,9 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -347,7 +351,9 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -470,7 +476,9 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -593,7 +601,9 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -716,7 +726,9 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -878,7 +890,9 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -1023,7 +1037,9 @@ exports[`Admin Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > diff --git a/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap b/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap index 30c33eb13..6801228c7 100644 --- a/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap +++ b/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap @@ -61,7 +61,9 @@ exports[`Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -184,7 +186,9 @@ exports[`Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -307,7 +311,9 @@ exports[`Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -431,7 +437,9 @@ exports[`Download Status Table should render correctly 1`] = ` class="MuiBox-root css-0" > diff --git a/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap b/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap index 9a20a22b7..fd2d892c1 100644 --- a/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap +++ b/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap @@ -122,7 +122,9 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -245,7 +247,9 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -368,7 +372,9 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > @@ -423,7 +429,9 @@ exports[`DownloadTab should render correctly 1`] = ` class="MuiBox-root css-0" > From 95cf7fc85b148f52028fc3da66afe9c96738f1c2 Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Thu, 12 Oct 2023 16:34:58 +0100 Subject: [PATCH 19/22] fix failing e2e test --- .../cypress/e2e/card/isis/instruments.cy.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts b/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts index 6641f3e68..753505c16 100644 --- a/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts +++ b/packages/datagateway-dataview/cypress/e2e/card/isis/instruments.cy.ts @@ -47,11 +47,9 @@ describe('ISIS - Instruments Cards', () => { //Revert the default sort cy.contains('[role="button"]', 'Name').as('nameSortButton').click(); cy.get('@nameSortButton').click(); - cy.wait('@getInstrumentsOrder', { timeout: 10000 }); // ascending cy.get('@nameSortButton').click(); - cy.wait('@getInstrumentsOrder', { timeout: 10000 }); cy.contains('[role="button"]', 'asc').should('exist'); cy.contains('[role="button"]', 'desc').should('not.exist'); @@ -61,7 +59,6 @@ describe('ISIS - Instruments Cards', () => { // descending cy.get('@nameSortButton').click(); - cy.wait('@getInstrumentsOrder', { timeout: 10000 }); cy.contains('[role="button"]', 'asc').should('not.exist'); cy.contains('[role="button"]', 'desc').should('exist'); @@ -79,13 +76,11 @@ describe('ISIS - Instruments Cards', () => { // multiple fields (shift click) cy.contains('[role="button"]', 'Description').click(); - cy.wait('@getInstrumentsOrder', { timeout: 10000 }); cy.get('[data-testid="card"]') .first() .contains('Sound low certain challenge yet sport happy.'); cy.contains('[role="button"]', 'Type').click({ shiftKey: true }); - cy.wait('@getInstrumentsOrder', { timeout: 10000 }); cy.contains('[aria-label="Sort by DESCRIPTION"]', 'asc').should('exist'); cy.contains('[aria-label="Sort by TYPE"]', 'asc').should('exist'); cy.contains('[role="button"]', 'desc').should('not.exist'); @@ -93,7 +88,6 @@ describe('ISIS - Instruments Cards', () => { // should replace current sort if clicked without shift cy.contains('[role="button"]', 'Name').click(); - cy.wait('@getInstrumentsOrder', { timeout: 10000 }); cy.contains('[aria-label="Sort by NAME"]', 'asc').should('exist'); cy.contains('[aria-label="Sort by DESCRIPTION"]', 'asc').should( 'not.exist' @@ -109,7 +103,6 @@ describe('ISIS - Instruments Cards', () => { //Revert the default sort cy.contains('[role="button"]', 'Name').as('nameSortButton').click(); cy.get('@nameSortButton').click(); - cy.wait('@getInstrumentsOrder', { timeout: 10000 }); cy.get('[data-testid="advanced-filters-link"]').click(); cy.get('[aria-label="Filter by Name"]').first().type('oil'); From b6bca3923a02d29342d458c04b212bef96d63411 Mon Sep 17 00:00:00 2001 From: Louise Davies Date: Thu, 12 Oct 2023 17:04:58 +0100 Subject: [PATCH 20/22] #1541 - use skipHover to avoid triggering sort tooltips in long tests The tooltips appearing slow the tests down so that they risk timing out --- .../downloadCartTable.component.test.tsx | 2 ++ ...dminDownloadStatusTable.component.test.tsx | 30 +++++++++++-------- .../downloadStatusTable.component.test.tsx | 2 ++ 3 files changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx index 151629bf0..84a46db79 100644 --- a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx @@ -242,6 +242,8 @@ describe('Download cart table component', () => { }); it('should sort data when headers are clicked', async () => { + // use skipHover to avoid triggering sort tooltips which slow the test down + user = userEvent.setup({ skipHover: true }); renderComponent(); const typeSortLabel = await screen.findByRole('button', { diff --git a/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx b/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx index e0c63ef82..304bf623a 100644 --- a/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx @@ -156,6 +156,8 @@ describe('Admin Download Status Table', () => { }); it('should send sort request on sort', async () => { + // use skipHover to avoid triggering sort tooltips which slow the test down + user = userEvent.setup({ delay: null, skipHover: true }); renderComponent(); // Table is sorted by createdAt desc by default @@ -265,6 +267,9 @@ describe('Admin Download Status Table', () => { }); it('should filter download availability properly', async () => { + // use skipHover to avoid triggering sort tooltips which slow the test down + user = userEvent.setup({ delay: null, skipHover: true }); + renderComponent(); await flushPromises(); @@ -322,12 +327,16 @@ describe('Admin Download Status Table', () => { it('sends filter request on date filter', async () => { applyDatePickerWorkaround(); + // use skipHover to avoid triggering sort tooltips which slow the test down + user = userEvent.setup({ delay: null, skipHover: true }); + renderComponent(); await flushPromises(); // Table is sorted by createdAt desc by default // To keep working test, we will remove all sorts on the table beforehand await user.click(await screen.findByText('downloadStatus.createdAt')); + await flushPromises(); // Get the Requested Data From filter input const dateFromFilterInput = screen.getByRole('textbox', { @@ -354,18 +363,15 @@ describe('Admin Download Status Table', () => { await user.type(dateToFilterInput, '2020-01-02_23:59:00'); await flushPromises(); - // have to wrap the expect in a waitFor because for some reason - // await user.type doesn't wait until the full thing is typed in before resolving - // causing fetchAdminDownloads to be called with partial values - await waitFor(() => { - expect(fetchAdminDownloads).toHaveBeenCalledWith( - { - downloadApiUrl: mockedSettings.downloadApiUrl, - facilityName: mockedSettings.facilityName, - }, - `WHERE download.facilityName = '${mockedSettings.facilityName}' AND download.createdAt BETWEEN {ts '2020-01-01 00:00:00'} AND {ts '2020-01-02 23:59:00'} ORDER BY download.id ASC LIMIT 0, 50` - ); - }); + expect(fetchAdminDownloads).toHaveBeenCalledWith( + { + downloadApiUrl: mockedSettings.downloadApiUrl, + facilityName: mockedSettings.facilityName, + }, + `WHERE download.facilityName = '${mockedSettings.facilityName}' AND download.createdAt BETWEEN {ts '2020-01-01 00:00:00'} AND {ts '2020-01-02 23:59:00'} ORDER BY download.id ASC LIMIT 0, 50` + ); + + (fetchAdminDownloads as jest.Mock).mockClear(); await user.clear(dateFromFilterInput); await user.clear(dateToFilterInput); diff --git a/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx b/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx index 2077f8dfc..5ac53338e 100644 --- a/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx @@ -188,6 +188,8 @@ describe('Download Status Table', () => { }); it('should sort data when headers are clicked', async () => { + // use skipHover to avoid triggering sort tooltips which slow the test down + user = userEvent.setup({ skipHover: true }); renderComponent(); // Table is sorted by createdAt desc by default From 7fe88112c76fb6a731e220cacdf9db250a76417b Mon Sep 17 00:00:00 2001 From: Kacper Roemer Date: Fri, 13 Oct 2023 09:13:06 +0100 Subject: [PATCH 21/22] use skipHover to fix another test #1541 --- .../downloadStatus/adminDownloadStatusTable.component.test.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx b/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx index 304bf623a..68c297fdf 100644 --- a/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadStatus/adminDownloadStatusTable.component.test.tsx @@ -231,6 +231,9 @@ describe('Admin Download Status Table', () => { describe('text filters', () => { it('should filter username properly', async () => { + // use skipHover to avoid triggering sort tooltips which slow the test down + user = userEvent.setup({ delay: null, skipHover: true }); + renderComponent(); await flushPromises(); From 848d7994cbf20710834575704c88c97c0a401252 Mon Sep 17 00:00:00 2001 From: Louise Davies Date: Fri, 13 Oct 2023 09:52:06 +0100 Subject: [PATCH 22/22] #1541 - add delay null to downloadStatusTable userEvent tests keep timing out so this might help? --- .../src/downloadStatus/downloadStatusTable.component.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx b/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx index 5ac53338e..775a4af2c 100644 --- a/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadStatus/downloadStatusTable.component.test.tsx @@ -47,7 +47,7 @@ describe('Download Status Table', () => { let user: ReturnType; beforeEach(() => { - user = userEvent.setup(); + user = userEvent.setup({ delay: null }); (downloadDeleted as jest.Mock).mockImplementation(() => Promise.resolve()); (fetchDownloads as jest.Mock).mockImplementation(() => @@ -189,7 +189,7 @@ describe('Download Status Table', () => { it('should sort data when headers are clicked', async () => { // use skipHover to avoid triggering sort tooltips which slow the test down - user = userEvent.setup({ skipHover: true }); + user = userEvent.setup({ delay: null, skipHover: true }); renderComponent(); // Table is sorted by createdAt desc by default