From 591f818d59f97044b874a711f12b7c02b6f87d36 Mon Sep 17 00:00:00 2001 From: Louise Davies Date: Thu, 6 Jul 2023 12:47:08 +0100 Subject: [PATCH] #1291 - add tests for mint cart button also improve downloadTab tests --- .../downloadCartTable.component.test.tsx | 132 +++- .../downloadTab.component.test.tsx.snap | 582 ------------------ .../downloadTab.component.test.tsx | 86 ++- 3 files changed, 170 insertions(+), 630 deletions(-) delete mode 100644 packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx index fa22a6f42..b5f3ef5e1 100644 --- a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx +++ b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx @@ -4,23 +4,31 @@ import { RenderResult, screen, waitFor, + within, } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import type { UserEvent } from '@testing-library/user-event/dist/types/setup'; import { fetchDownloadCart } from 'datagateway-common'; -import { createMemoryHistory } from 'history'; +import { createMemoryHistory, MemoryHistory } from 'history'; import * as React from 'react'; -import { QueryClient, QueryClientProvider } from 'react-query'; +import { QueryClient, QueryClientProvider, setLogger } from 'react-query'; import { Router } from 'react-router-dom'; import { DownloadSettingsContext } from '../ConfigProvider'; import { mockCartItems, mockedSettings } from '../testData'; import { getDatafileCount, getSize, + isCartMintable, removeAllDownloadCartItems, removeFromCart, } from '../downloadApi'; import DownloadCartTable from './downloadCartTable.component'; +import { createTheme } from '@mui/material'; + +setLogger({ + log: console.log, + warn: console.warn, + error: jest.fn(), +}); jest.mock('datagateway-common', () => { const originalModule = jest.requireActual('datagateway-common'); @@ -42,6 +50,7 @@ jest.mock('../downloadApi', () => { getDatafileCount: jest.fn(), getIsTwoLevel: jest.fn().mockResolvedValue(true), removeFromCart: jest.fn(), + isCartMintable: jest.fn(), }; }); @@ -54,20 +63,25 @@ const createTestQueryClient = (): QueryClient => }, }); -const renderComponent = (): RenderResult => - render( - - - - - - - - ); +const renderComponent = (): RenderResult & { history: MemoryHistory } => { + const history = createMemoryHistory(); + return { + history: history, + ...render( + + + + + + + + ), + }; +}; describe('Download cart table component', () => { let holder, queryClient; - let user: UserEvent; + let user: ReturnType; const resetDOM = (): void => { if (holder) document.body.removeChild(holder); @@ -104,6 +118,9 @@ describe('Download cart table component', () => { ( getDatafileCount as jest.MockedFunction ).mockResolvedValue(7); + ( + isCartMintable as jest.MockedFunction + ).mockResolvedValue(true); }); afterEach(() => { @@ -430,4 +447,91 @@ describe('Download cart table component', () => { }) ).toBeTruthy(); }); + + it('should go to DOI generation form when Generate DOI button is clicked', async () => { + const { history } = renderComponent(); + + await user.click( + screen.getByRole('link', { name: 'downloadCart.generate_DOI' }) + ); + + expect(history.location).toMatchObject({ + pathname: '/download/mint', + state: { fromCart: true }, + }); + }); + + it('should disable Generate DOI button when mintability is loading', async () => { + ( + isCartMintable as jest.MockedFunction + ).mockImplementation( + () => + new Promise((_) => { + // do nothing, simulating pending promise to test loading state + }) + ); + const { history } = renderComponent(); + + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const generateDOIButton = screen + .getByRole('link', { name: 'downloadCart.generate_DOI' }) + .closest('span')!; + + await user.hover(generateDOIButton); + + expect( + await screen.findByText('downloadCart.mintability_loading') + ).toBeInTheDocument(); + + await user.click(generateDOIButton); + + expect(history.location).not.toMatchObject({ + pathname: '/download/mint', + state: { fromCart: true }, + }); + }); + + it('should disable Generate DOI button when cart is not mintable', async () => { + ( + isCartMintable as jest.MockedFunction + ).mockRejectedValue({ + response: { + data: { detail: 'Not allowed to mint the following items: [2,4]' }, + status: 403, + }, + }); + const { history } = renderComponent(); + + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const generateDOIButton = screen + .getByRole('link', { name: 'downloadCart.generate_DOI' }) + .closest('span')!; + + await user.hover(generateDOIButton); + + expect( + await screen.findByText('downloadCart.not_mintable') + ).toBeInTheDocument(); + + const tableRows = within( + screen.getByRole('rowgroup', { name: 'grid' }) + ).getAllByRole('row'); + const muiErrorColor = createTheme().palette.error.main; + expect(tableRows[1]).toHaveStyle(`background-color: ${muiErrorColor}`); + expect(tableRows[1]).toHaveStyle(`background-color: ${muiErrorColor}`); + expect(tableRows[0]).not.toHaveStyle(`background-color: ${muiErrorColor}`); + expect(tableRows[2]).not.toHaveStyle(`background-color: ${muiErrorColor}`); + + await user.click(generateDOIButton); + + expect(history.location).not.toMatchObject({ + pathname: '/download/mint', + state: { fromCart: true }, + }); + + await user.unhover(generateDOIButton); + for (const row of tableRows) { + expect(row).not.toHaveStyle(`background-color: ${muiErrorColor}`); + } + }); }); 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 deleted file mode 100644 index f9d584d78..000000000 --- a/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap +++ /dev/null @@ -1,582 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DownloadTab should render correctly 1`] = ` - -
-
-
-
- - -
- -
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
- -

- downloadCart.name -

- - -
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -

- downloadCart.type -

- - -
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -

- downloadCart.size -

- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -

- downloadCart.fileCount -

- - -
-
-
-
-
-
-
-
-
-
- Actions -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - downloadCart.number_of_files: 0 / 5000 - -
-
-
-
-
- - downloadCart.total_size: 0 B / 1 TB - -
-
-
-
-
- -
-
- -
-
-
-
-
-
-
- - -`; diff --git a/packages/datagateway-download/src/downloadTab/downloadTab.component.test.tsx b/packages/datagateway-download/src/downloadTab/downloadTab.component.test.tsx index 3948c60ff..569911e1e 100644 --- a/packages/datagateway-download/src/downloadTab/downloadTab.component.test.tsx +++ b/packages/datagateway-download/src/downloadTab/downloadTab.component.test.tsx @@ -1,7 +1,6 @@ -import type { RenderResult } from '@testing-library/react'; -import { render, screen, waitFor } from '@testing-library/react'; +import { RenderResult } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { UserEvent } from '@testing-library/user-event/dist/types/setup'; import { fetchDownloadCart } from 'datagateway-common'; import { createMemoryHistory } from 'history'; import * as React from 'react'; @@ -16,6 +15,7 @@ import { getSize, removeAllDownloadCartItems, removeFromCart, + isCartMintable, } from '../downloadApi'; import { mockCartItems, mockDownloadItems, mockedSettings } from '../testData'; import DownloadTabs from './downloadTab.component'; @@ -33,7 +33,7 @@ jest.mock('../downloadApi'); describe('DownloadTab', () => { let history; let holder; - let user: UserEvent; + let user: ReturnType; beforeEach(() => { history = createMemoryHistory(); @@ -55,7 +55,7 @@ describe('DownloadTab', () => { removeAllDownloadCartItems as jest.MockedFunction< typeof removeAllDownloadCartItems > - ).mockResolvedValue(null); + ).mockResolvedValue(); ( removeFromCart as jest.MockedFunction ).mockImplementation((entityType, entityIds) => { @@ -68,6 +68,9 @@ describe('DownloadTab', () => { ( getDatafileCount as jest.MockedFunction ).mockResolvedValue(7); + ( + isCartMintable as jest.MockedFunction + ).mockResolvedValue(true); }); const renderComponent = (): RenderResult => { @@ -83,11 +86,6 @@ describe('DownloadTab', () => { ); }; - it('should render correctly', () => { - const { asFragment } = renderComponent(); - expect(asFragment()).toMatchSnapshot(); - }); - it('shows the appropriate table when clicking between tabs', async () => { renderComponent(); @@ -95,34 +93,54 @@ describe('DownloadTab', () => { await user.click(await screen.findByText('downloadTab.downloads_tab')); - await waitFor(async () => { - expect( - await screen.findByLabelText( - 'downloadTab.download_cart_panel_arialabel' - ) - ).not.toBeVisible(); - expect( - await screen.findByLabelText( - 'downloadTab.download_status_panel_arialabel' - ) - ).toBeVisible(); - }); + expect( + await screen.findByLabelText('downloadTab.download_cart_panel_arialabel') + ).not.toBeVisible(); + expect( + await screen.findByLabelText( + 'downloadTab.download_status_panel_arialabel' + ) + ).toBeVisible(); // Return back to the cart tab. await user.click(await screen.findByText('downloadTab.cart_tab')); - await waitFor(async () => { - expect( - await screen.findByLabelText( - 'downloadTab.download_cart_panel_arialabel' - ) - ).toBeVisible(); - expect( - await screen.findByLabelText( - 'downloadTab.download_status_panel_arialabel' - ) - ).not.toBeVisible(); - }); + expect( + await screen.findByLabelText('downloadTab.download_cart_panel_arialabel') + ).toBeVisible(); + expect( + await screen.findByLabelText( + 'downloadTab.download_status_panel_arialabel' + ) + ).not.toBeVisible(); + }); + + it('refreshes downloads when the refresh button is clicked', async () => { + renderComponent(); + + ( + fetchDownloads as jest.MockedFunction + ).mockImplementation( + () => + new Promise((_) => { + // do nothing, simulating pending promise + // to test refreshing state + }) + ); + + // go to downloads tab + + await user.click(await screen.findByText('downloadTab.downloads_tab')); + + await user.click( + screen.getByRole('button', { + name: 'downloadTab.refresh_download_status_arialabel', + }) + ); + + expect( + await screen.findByText('downloadTab.refreshing_downloads') + ).toBeInTheDocument(); }); });