From 30f712664acdcfcf6ee8e9c486167d5bda4b3e35 Mon Sep 17 00:00:00 2001 From: Sam Glendenning Date: Mon, 28 Mar 2022 16:00:29 +0100 Subject: [PATCH 1/3] Remove all button disables once pressed #1177 Once pressed, the remove all button is disabled and displays an indeterminate loading spinner until the request completes. --- .../downloadCartTable.component.test.tsx | 31 +++++++++++++++++++ .../downloadCartTable.component.tsx | 15 +++++++-- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx index b49e29d33..cdb7e38c5 100644 --- a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx @@ -245,6 +245,37 @@ describe('Download cart table component', () => { expect(wrapper.exists('[data-testid="no-selections-message"]')).toBe(true); }); + it('disables remove all button while request is processing', async () => { + (removeAllDownloadCartItems as jest.Mock).mockImplementation(() => { + return new Promise((resolve) => setTimeout(resolve, 2000)); + }); + + const wrapper = createWrapper(); + + await act(async () => { + await flushPromises(); + wrapper.update(); + await flushPromises(); + wrapper.update(); + }); + + await act(async () => { + wrapper.find('button#removeAllButton').simulate('click'); + await flushPromises(); + wrapper.update(); + }); + expect( + wrapper.find('button#removeAllButton').prop('disabled') + ).toBeTruthy(); + + setTimeout(() => { + wrapper.update(); + expect(wrapper.exists('[data-testid="no-selections-message"]')).toBe( + true + ); + }, 2001); + }); + it("removes an item when said item's remove button is clicked", async () => { const wrapper = createWrapper(); diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx index b3fcd77a4..473352c52 100644 --- a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx +++ b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx @@ -20,6 +20,7 @@ import { makeStyles, Theme, Link, + CircularProgress, } from '@material-ui/core'; import { RemoveCircle } from '@material-ui/icons'; import { @@ -66,6 +67,7 @@ const DownloadCartTable: React.FC = ( const [dataLoaded, setDataLoaded] = React.useState(false); const [sizesLoaded, setSizesLoaded] = React.useState(true); const [sizesFinished, setSizesFinished] = React.useState(true); + const [removingAll, setRemovingAll] = React.useState(false); const fileCountMax = settings.fileCountMax; const totalSizeMax = settings.totalSizeMax; @@ -416,17 +418,24 @@ const DownloadCartTable: React.FC = ( style={{ marginRight: '1em' }} > + {/* Request to remove all selections is in progress. To prevent excessive requests, disable button during request */} From b9f861e5a52387d152eba7031ee03314a3db8c0c Mon Sep 17 00:00:00 2001 From: Sam Glendenning Date: Mon, 28 Mar 2022 17:26:09 +0100 Subject: [PATCH 2/3] Minor improvement to remove all unit test #1177 Having to use real timers to simulate a hanging request still but the code is a little cleaner --- .../downloadCartTable.component.test.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx index cdb7e38c5..0384e7449 100644 --- a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx @@ -245,7 +245,7 @@ describe('Download cart table component', () => { expect(wrapper.exists('[data-testid="no-selections-message"]')).toBe(true); }); - it('disables remove all button while request is processing', async () => { + it.only('disables remove all button while request is processing', async () => { (removeAllDownloadCartItems as jest.Mock).mockImplementation(() => { return new Promise((resolve) => setTimeout(resolve, 2000)); }); @@ -268,12 +268,12 @@ describe('Download cart table component', () => { wrapper.find('button#removeAllButton').prop('disabled') ).toBeTruthy(); - setTimeout(() => { + await act(async () => { + await new Promise((r) => setTimeout(r, 2001)); wrapper.update(); - expect(wrapper.exists('[data-testid="no-selections-message"]')).toBe( - true - ); - }, 2001); + }); + + expect(wrapper.exists('[data-testid="no-selections-message"]')).toBe(true); }); it("removes an item when said item's remove button is clicked", async () => { From 9fd64e9ea8b4b36a41c91d71ca77bb07286a9ca0 Mon Sep 17 00:00:00 2001 From: Sam Glendenning Date: Tue, 29 Mar 2022 10:40:00 +0100 Subject: [PATCH 3/3] Removing .only --- .../src/downloadCart/downloadCartTable.component.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx index 0384e7449..601d58660 100644 --- a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx @@ -245,7 +245,7 @@ describe('Download cart table component', () => { expect(wrapper.exists('[data-testid="no-selections-message"]')).toBe(true); }); - it.only('disables remove all button while request is processing', async () => { + it('disables remove all button while request is processing', async () => { (removeAllDownloadCartItems as jest.Mock).mockImplementation(() => { return new Promise((resolve) => setTimeout(resolve, 2000)); });