+ Some really long text that will for sure overflow +
+
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
+
-
- Sort By
-
-
-
-
-
-
-
-
-
-
+ Sort By
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Test 1 +
+
+
+
+
+
+
+
+
+ + entity_card.no_description +
+
+
+
+
+
+
+
+
+
+
+
+ + Test 2 +
+
+
+
+
+
+
+
+
+ + entity_card.no_description +
+
+
+
+
+
+
+
+
+
+
+
+ + Test 3 +
+
+
+
+
+
+
+
+
+ + entity_card.no_description +
+
+
+
+
+
`;
diff --git a/packages/datagateway-common/src/card/__snapshots__/entityCard.component.test.tsx.snap b/packages/datagateway-common/src/card/__snapshots__/entityCard.component.test.tsx.snap
index ad30178ca..601da0238 100644
--- a/packages/datagateway-common/src/card/__snapshots__/entityCard.component.test.tsx.snap
+++ b/packages/datagateway-common/src/card/__snapshots__/entityCard.component.test.tsx.snap
@@ -1,100 +1,60 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Card renders correctly 1`] = `
-
-
-
-
Title
-
-
-
-
+
+
-
- entity_card.no_description
-
-
-
+
+
+
+
+
+ + entity_card.no_description +
+TEST
; + it('moreInformation displays correctly', async () => { + const moreInformation = (entity: Entity): React.ReactElement => ( +More information for {entity.name}
+ ); const updatedProps = { ...props, moreInformation: moreInformation, }; - const wrapper = createWrapper(updatedProps); - expect(wrapper.exists('[aria-label="card-more-information"]')).toBeTruthy(); + + render(TEST
+Custom {entity.title}
); const updatedProps = { ...props, title: { dataKey: 'title', content: content }, }; - const wrapper = createWrapper(updatedProps); - expect(wrapper.find('#test-title-content').at(0).text()).toEqual('TEST'); + + render(
-
-
- Test 1
-
-
-
-
+
+ Test 1
+
+
+
+
+ +
- datafiles.size
-
-
-
- 1 B
-
-
-
-
-
+ datafiles.size
+
+
+ + + 1 B + +
+
- datafiles.location
-
-
-
- /test1
-
-
-
-
+
+ datafiles.location
+
+
+
+
`;
diff --git a/packages/datagateway-common/src/detailsPanels/__snapshots__/datasetDetailsPanel.component.test.tsx.snap b/packages/datagateway-common/src/detailsPanels/__snapshots__/datasetDetailsPanel.component.test.tsx.snap
index cc0357493..32948d42d 100644
--- a/packages/datagateway-common/src/detailsPanels/__snapshots__/datasetDetailsPanel.component.test.tsx.snap
+++ b/packages/datagateway-common/src/detailsPanels/__snapshots__/datasetDetailsPanel.component.test.tsx.snap
@@ -1,36 +1,40 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dataset details panel component renders correctly 1`] = `
-+ + /test1 + +
+
-
-
- Test 1
-
-
-
-
+
+ Test 1
+
+
+
+
+ +
- datasets.description
-
-
-
-
-
-
+
+ datasets.description
+
+
+
+
`;
diff --git a/packages/datagateway-common/src/detailsPanels/__snapshots__/investigationDetailsPanel.component.test.tsx.snap b/packages/datagateway-common/src/detailsPanels/__snapshots__/investigationDetailsPanel.component.test.tsx.snap
index a7ec869f0..66b6d66e9 100644
--- a/packages/datagateway-common/src/detailsPanels/__snapshots__/investigationDetailsPanel.component.test.tsx.snap
+++ b/packages/datagateway-common/src/detailsPanels/__snapshots__/investigationDetailsPanel.component.test.tsx.snap
@@ -1,68 +1,74 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Investigation details panel component renders correctly 1`] = `
-+ +
+
-
-
- Test 1
-
-
-
-
+
+ Test 1
+
+
+
+
+ +
- investigations.details.name
-
-
-
- Test 1
-
-
-
-
-
+ investigations.details.name
+
+
+ + + Test 1 + +
+
- investigations.details.start_date
-
-
-
- 2019-06-10
-
-
-
-
-
+ investigations.details.start_date
+
+
+ + + 2019-06-10 + +
+
- investigations.details.end_date
-
-
-
- 2019-06-11
-
-
-
-
+
+ investigations.details.end_date
+
+
+
+
`;
diff --git a/packages/datagateway-common/src/detailsPanels/datafileDetailsPanel.component.test.tsx b/packages/datagateway-common/src/detailsPanels/datafileDetailsPanel.component.test.tsx
index 562d8d717..84db104da 100644
--- a/packages/datagateway-common/src/detailsPanels/datafileDetailsPanel.component.test.tsx
+++ b/packages/datagateway-common/src/detailsPanels/datafileDetailsPanel.component.test.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { shallow } from 'enzyme';
import { Datafile } from '../app.types';
import DatafileDetailsPanel from './datafileDetailsPanel.component';
+import { render } from '@testing-library/react';
describe('Datafile details panel component', () => {
let rowData: Datafile;
@@ -23,12 +23,12 @@ describe('Datafile details panel component', () => {
});
it('renders correctly', () => {
- const wrapper = shallow(
+ const { asFragment } = render(
+ + 2019-06-11 + +
+
+
+
+
+
+
+
+ + + Test 1 + +
++
+
+ datafiles.details.size
+
+
+ + + Unknown + +
+
+
+ datafiles.details.location
+
+
+ + + /test/location + +
+
@@ -205,6 +206,7 @@ exports[`Dataset details panel component should render correctly 1`] = `
exports[`Dataset details panel component should render type tab when present in the data 1`] = `
+
diff --git a/packages/datagateway-common/src/detailsPanels/dls/__snapshots__/visitDetailsPanel.component.test.tsx.snap b/packages/datagateway-common/src/detailsPanels/dls/__snapshots__/visitDetailsPanel.component.test.tsx.snap
index 5c1d2658b..bcb9b50fd 100644
--- a/packages/datagateway-common/src/detailsPanels/dls/__snapshots__/visitDetailsPanel.component.test.tsx.snap
+++ b/packages/datagateway-common/src/detailsPanels/dls/__snapshots__/visitDetailsPanel.component.test.tsx.snap
@@ -3,6 +3,7 @@
exports[`Visit details panel component should check if multiple publications result in change of title to plural version 1`] = `
`;
exports[`Data column header component renders correctly with sort but no filter 1`] = `
-
+
+
@@ -233,6 +234,7 @@ exports[`Visit details panel component should check if multiple publications res
exports[`Visit details panel component should check if multiple samples result in change of title to plural version 1`] = `
+
@@ -463,6 +465,7 @@ exports[`Visit details panel component should check if multiple samples result i
exports[`Visit details panel component should gracefully handles InvestigationUsers without Users 1`] = `
@@ -671,6 +674,7 @@ exports[`Visit details panel component should gracefully handles InvestigationUs
exports[`Visit details panel component should render correctly 1`] = `
+
@@ -849,6 +853,7 @@ exports[`Visit details panel component should render correctly 1`] = `
exports[`Visit details panel component should render user, sample and publication tabs when present in the data 1`] = `
`;
exports[`Data column header component renders correctly with sort and filter 1`] = `
-
+
+
diff --git a/packages/datagateway-common/src/detailsPanels/dls/datafileDetailsPanel.component.test.tsx b/packages/datagateway-common/src/detailsPanels/dls/datafileDetailsPanel.component.test.tsx
index db7566993..e071e156a 100644
--- a/packages/datagateway-common/src/detailsPanels/dls/datafileDetailsPanel.component.test.tsx
+++ b/packages/datagateway-common/src/detailsPanels/dls/datafileDetailsPanel.component.test.tsx
@@ -1,9 +1,9 @@
import React from 'react';
import DatafileDetailsPanel from './datafileDetailsPanel.component';
import { QueryClient, QueryClientProvider } from 'react-query';
-import { mount, ReactWrapper } from 'enzyme';
import { Datafile } from '../../app.types';
-import { useDatafileDetails } from '../../api/datafiles';
+import { useDatafileDetails } from '../../api';
+import { render, RenderResult } from '@testing-library/react';
jest.mock('../../api/datafiles');
@@ -11,8 +11,8 @@ describe('Datafile details panel component', () => {
let rowData: Datafile;
const detailsPanelResize = jest.fn();
- const createWrapper = (): ReactWrapper => {
- return mount(
+ const renderComponent = (): RenderResult =>
+ render(
{
/>
);
- };
beforeEach(() => {
rowData = {
@@ -41,22 +40,17 @@ describe('Datafile details panel component', () => {
});
it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('DatafileDetailsPanel').props()).toMatchSnapshot();
- });
-
- it('calls useDatafileDetails hook on load', () => {
- createWrapper();
- expect(useDatafileDetails).toHaveBeenCalledWith(rowData.id);
+ const { asFragment } = renderComponent();
+ expect(asFragment()).toMatchSnapshot();
});
it('calls detailsPanelResize on load', () => {
- createWrapper();
+ renderComponent();
expect(detailsPanelResize).toHaveBeenCalled();
});
it('does not call detailsPanelResize if not provided', () => {
- mount(
+ render(
diff --git a/packages/datagateway-common/src/detailsPanels/dls/datafileDetailsPanel.component.tsx b/packages/datagateway-common/src/detailsPanels/dls/datafileDetailsPanel.component.tsx
index a648923f1..d2cbb46a4 100644
--- a/packages/datagateway-common/src/detailsPanels/dls/datafileDetailsPanel.component.tsx
+++ b/packages/datagateway-common/src/detailsPanels/dls/datafileDetailsPanel.component.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { Typography, Grid, Divider, styled } from '@mui/material';
import { useTranslation } from 'react-i18next';
-import { useDatafileDetails } from '../../api/datafiles';
+import { useDatafileDetails } from '../../api';
import { Datafile, Entity } from '../../app.types';
import { formatBytes } from '../../table/cellRenderers/cellContentRenderers';
@@ -32,7 +32,11 @@ const DatafileDetailsPanel = (
}, [detailsPanelResize]);
return (
-
+
+
diff --git a/packages/datagateway-common/src/detailsPanels/dls/datasetDetailsPanel.component.tsx b/packages/datagateway-common/src/detailsPanels/dls/datasetDetailsPanel.component.tsx
index 1561d8116..765fc6405 100644
--- a/packages/datagateway-common/src/detailsPanels/dls/datasetDetailsPanel.component.tsx
+++ b/packages/datagateway-common/src/detailsPanels/dls/datasetDetailsPanel.component.tsx
@@ -88,7 +88,11 @@ const DatasetDetailsPanel = (
}, [data, selectedTab, changeTab]);
return (
-
+
+
+
{
let rowData: Investigation;
@@ -47,12 +47,12 @@ describe('Investigation details panel component', () => {
});
it('renders correctly', () => {
- const wrapper = shallow(
+ const { asFragment } = render(
+
{investigationData.title}
diff --git a/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/datafileDetailsPanel.component.test.tsx.snap b/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/datafileDetailsPanel.component.test.tsx.snap
index 3bfc9bd3d..691fb5648 100644
--- a/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/datafileDetailsPanel.component.test.tsx.snap
+++ b/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/datafileDetailsPanel.component.test.tsx.snap
@@ -3,6 +3,7 @@
exports[`Datafile details panel component should render correctly 1`] = `
`;
exports[`Text filter component useTextFilter hook returns a function which can generate a working text filter 1`] = `
-
+
+
`;
diff --git a/packages/datagateway-common/src/table/columnFilters/dateColumnFilter.component.test.tsx b/packages/datagateway-common/src/table/columnFilters/dateColumnFilter.component.test.tsx
index 258483414..6b2d55bb3 100644
--- a/packages/datagateway-common/src/table/columnFilters/dateColumnFilter.component.test.tsx
+++ b/packages/datagateway-common/src/table/columnFilters/dateColumnFilter.component.test.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
+import * as React from 'react';
import DateColumnFilter, {
CustomClearButton,
datesEqual,
@@ -14,6 +13,9 @@ import {
cleanupDatePickerWorkaround,
} from '../../setupTests';
import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
+import { render, screen } from '@testing-library/react';
+import { UserEvent } from '@testing-library/user-event/setup/setup';
+import userEvent from '@testing-library/user-event';
jest.mock('../../api');
@@ -28,7 +30,7 @@ describe('Date filter component', () => {
});
it('renders correctly', () => {
- const wrapper = shallow(
+ const { asFragment } = render(
{
onChange={jest.fn()}
/>
);
- expect(wrapper).toMatchSnapshot();
+ expect(asFragment()).toMatchSnapshot();
});
describe('datesEqual function', () => {
@@ -211,28 +213,35 @@ describe('Date filter component', () => {
describe('CustomClearButton', () => {
const onClear = jest.fn();
let props: PickersActionBarProps;
+ let user: UserEvent;
beforeEach(() => {
+ user = userEvent.setup();
props = {
onClear: onClear,
};
});
it('renders correctly', () => {
- const wrapper = shallow( {
);
// We simulate a change in the input from 'test' to 'test-again'.
- const textFilterInput = wrapper.find('input').first();
+ const textFilterInput = await screen.findByRole('textbox', {
+ name: 'Filter by test',
+ hidden: true,
+ });
- textFilterInput.instance().value = 'test-again';
- textFilterInput.simulate('change');
+ await user.clear(textFilterInput);
+ await user.type(textFilterInput, 'test-again');
jest.advanceTimersByTime(DEBOUNCE_DELAY);
@@ -51,10 +61,10 @@ describe('Text filter component', () => {
});
});
- it('calls the onChange method once when input is typed while exclude filter type is selected and calls again by debounced function after timeout', () => {
+ it('calls the onChange method once when input is typed while exclude filter type is selected and calls again by debounced function after timeout', async () => {
const onChange = jest.fn();
- const wrapper = mount(
+ render(
{
);
// We simulate a change in the input from 'test' to 'test-again'.
- const textFilterInput = wrapper.find('input').first();
+ const textFilterInput = await screen.findByRole('textbox', {
+ name: 'Filter by test',
+ hidden: true,
+ });
- textFilterInput.instance().value = 'test-again';
- textFilterInput.simulate('change');
+ await user.clear(textFilterInput);
+ await user.type(textFilterInput, 'test-again');
jest.advanceTimersByTime(DEBOUNCE_DELAY);
@@ -77,10 +90,10 @@ describe('Text filter component', () => {
});
});
- it('calls the onChange method once when include filter type is selected while there is input', () => {
+ it('calls the onChange method once when include filter type is selected while there is input', async () => {
const onChange = jest.fn();
- const wrapper = mount(
+ render(
{
);
// We simulate a change in the select from 'exclude' to 'include'.
- const textFilterSelect = wrapper.find(Select).at(0);
-
- act(() => {
- textFilterSelect.props().onChange({ target: { value: 'include' } });
- });
+ await user.click(
+ await screen.findByRole('button', {
+ name: 'include or exclude',
+ hidden: true,
+ })
+ );
+ await user.click(await screen.findByText('Include'));
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenLastCalledWith({
@@ -102,10 +117,10 @@ describe('Text filter component', () => {
});
});
- it('calls the onChange method once when exclude filter type is selected while there is input', () => {
+ it('calls the onChange method once when exclude filter type is selected while there is input', async () => {
const onChange = jest.fn();
- const wrapper = mount(
+ render(
{
);
// We simulate a change in the select from 'include' to 'exclude'.
- const textFilterSelect = wrapper.find(Select).at(0);
-
- act(() => {
- textFilterSelect.props().onChange({ target: { value: 'exclude' } });
- });
+ await user.click(
+ await screen.findByRole('button', {
+ name: 'include or exclude',
+ hidden: true,
+ })
+ );
+ await user.click(await screen.findByText('Exclude'));
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenLastCalledWith({
@@ -127,10 +144,10 @@ describe('Text filter component', () => {
});
});
- it('calls the onChange method once when input is cleared and calls again by debounced function after timeout', () => {
+ it('calls the onChange method once when input is cleared and calls again by debounced function after timeout', async () => {
const onChange = jest.fn();
- const wrapper = mount(
+ render(
{
);
// We simulate a change in the input from 'test' to ''.
- const textFilterInput = wrapper.find('input').first();
-
- textFilterInput.instance().value = '';
- textFilterInput.simulate('change');
+ await user.clear(
+ await screen.findByRole('textbox', {
+ name: 'Filter by test',
+ hidden: true,
+ })
+ );
jest.advanceTimersByTime(DEBOUNCE_DELAY);
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenLastCalledWith(null);
});
- it('does not call the onChange method when filter type is selected while input is empty', () => {
+ it('does not call the onChange method when filter type is selected while input is empty', async () => {
const onChange = jest.fn();
- const wrapper = mount(
+ render(
{
);
// We simulate a change in the select from 'exclude' to 'include'.
- const textFilterSelect = wrapper.find(Select).at(0);
-
- act(() => {
- textFilterSelect.props().onChange({ target: { value: 'include' } });
- });
+ await user.click(
+ await screen.findByRole('button', {
+ name: 'include or exclude',
+ hidden: true,
+ })
+ );
+ await user.click(await screen.findByText('Include'));
expect(onChange).toHaveBeenCalledTimes(0);
});
- it('updates the input value when the value prop changes', () => {
+ it('updates the input value when the value prop changes', async () => {
const baseProps = { label: 'test', onChange: jest.fn(), value: undefined };
- const wrapper = mount(
+
+
+
@@ -107,6 +108,7 @@ exports[`Datafile details panel component should render correctly 1`] = `
exports[`Datafile details panel component should render parameters tab when present in the data 1`] = `
`;
diff --git a/packages/datagateway-common/src/homePage/homePage.component.test.tsx b/packages/datagateway-common/src/homePage/homePage.component.test.tsx
index 07a8256a0..85c040c17 100644
--- a/packages/datagateway-common/src/homePage/homePage.component.test.tsx
+++ b/packages/datagateway-common/src/homePage/homePage.component.test.tsx
@@ -1,6 +1,7 @@
import React from 'react';
-import { shallow } from 'enzyme';
import HomePage, { HomePageProps } from './homePage.component';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
describe('Home page component', () => {
let props: HomePageProps;
@@ -20,7 +21,11 @@ describe('Home page component', () => {
});
it('homepage renders correctly', () => {
- const wrapper = shallow(
+
+ );
+ expect(asFragment()).toMatchSnapshot();
});
});
diff --git a/packages/datagateway-common/src/hooks/useSticky.test.ts b/packages/datagateway-common/src/hooks/useSticky.test.ts
new file mode 100644
index 000000000..23bac3067
--- /dev/null
+++ b/packages/datagateway-common/src/hooks/useSticky.test.ts
@@ -0,0 +1,86 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useSticky from './useSticky';
+import { fireEvent } from '@testing-library/react';
+
+describe('useSticky', () => {
+ it('returns isSticky true if the bottom of the target element is scrolled past', () => {
+ const mockGetBoundingClientRect = jest.fn();
+ const target = document.createElement('div');
+ target.getBoundingClientRect = mockGetBoundingClientRect;
+
+ // if window scrollY is greater than boundingClientRect bottom
+ // that means the element is scrolled out of view
+ global.scrollY = 100;
+ mockGetBoundingClientRect.mockReturnValue({
+ bottom: 50,
+ });
+
+ const { waitFor, result } = renderHook(() =>
+ useSticky({ current: target })
+ );
+
+ // scroll the window
+ fireEvent.scroll(window, {});
+
+ waitFor(() => {
+ expect(result.current.isSticky).toBe(true);
+ });
+ });
+
+ it('returns isSticky false if the bottom of the target element is still in view', () => {
+ const mockGetBoundingClientRect = jest.fn();
+ const target = document.createElement('div');
+ target.getBoundingClientRect = mockGetBoundingClientRect;
+
+ // if window scrollY is greater than boundingClientRect bottom
+ // that means the element is scrolled out of view
+ global.scrollY = 100;
+ mockGetBoundingClientRect.mockReturnValue({
+ bottom: 150,
+ });
+
+ const { waitFor, result } = renderHook(() =>
+ useSticky({ current: target })
+ );
+
+ // scroll the window
+ fireEvent.scroll(window, {});
+
+ waitFor(() => {
+ expect(result.current.isSticky).toBe(false);
+ });
+ });
+
+ it('returns isSticky false upon window scroll if the given react ref points to null', () => {
+ const { waitFor, result } = renderHook(() => useSticky({ current: null }));
+ // scroll the window
+ fireEvent.scroll(window, {});
+ waitFor(() => {
+ expect(result.current.isSticky).toBe(false);
+ });
+ });
+
+ it('returns isStick false upon window scroll if bottom coordinate of the target element is unavailable', () => {
+ const mockGetBoundingClientRect = jest.fn();
+ const target = document.createElement('div');
+ target.getBoundingClientRect = mockGetBoundingClientRect;
+
+ // if window scrollY is greater than boundingClientRect bottom
+ // that means the element is scrolled out of view
+ global.scrollY = 100;
+ mockGetBoundingClientRect.mockReturnValue({
+ top: 150,
+ });
+
+ const { waitFor, result } = renderHook(() =>
+ useSticky({ current: target })
+ );
+
+ // scroll the window
+ fireEvent.scroll(window, {});
+
+ waitFor(() => {
+ expect(result.current.isSticky).toBe(false);
+ });
+ });
+});
diff --git a/packages/datagateway-common/src/hooks/useSticky.ts b/packages/datagateway-common/src/hooks/useSticky.ts
new file mode 100644
index 000000000..aeb12c51f
--- /dev/null
+++ b/packages/datagateway-common/src/hooks/useSticky.ts
@@ -0,0 +1,36 @@
+import React from 'react';
+import debounce from 'lodash.debounce';
+
+function useSticky(targetElement: React.RefObject): {
+ isSticky: boolean;
+} {
+ const [isSticky, setIsSticky] = React.useState(false);
+
+ const handleScroll = React.useCallback((): void => {
+ if (
+ targetElement.current &&
+ targetElement.current.getBoundingClientRect().bottom
+ ) {
+ if (
+ window.scrollY > targetElement.current.getBoundingClientRect().bottom
+ ) {
+ setIsSticky(true);
+ } else {
+ setIsSticky(false);
+ }
+ }
+ }, [targetElement]);
+
+ React.useEffect(() => {
+ // Use lodash.debounce for handleScroll with a wait of 20ms.
+ window.addEventListener('scroll', debounce(handleScroll, 20));
+
+ return () => {
+ window.removeEventListener('scroll', () => handleScroll);
+ };
+ }, [handleScroll]);
+
+ return { isSticky };
+}
+
+export default useSticky;
diff --git a/packages/datagateway-common/src/index.tsx b/packages/datagateway-common/src/index.tsx
index aa77e92fa..3bf565712 100644
--- a/packages/datagateway-common/src/index.tsx
+++ b/packages/datagateway-common/src/index.tsx
@@ -77,6 +77,6 @@ export { default as DLSDatasetDetailsPanel } from './detailsPanels/dls/datasetDe
export { default as DLSVisitDetailsPanel } from './detailsPanels/dls/visitDetailsPanel.component';
export { default as InvestigationDetailsPanel } from './detailsPanels/investigationDetailsPanel.component';
export { default as DatasetDetailsPanel } from './detailsPanels/datasetDetailsPanel.component';
-export { default as DatafileDetailsPanel } from './detailsPanels/datasetDetailsPanel.component';
+export { default as DatafileDetailsPanel } from './detailsPanels/datafileDetailsPanel.component';
// ReactDOM.render(
+
+
+`;
exports[`Preloader component renders when the site is loading 1`] = `
-
-
-
- );
- };
+jest.mock('./hooks/useSticky', () => ({
+ __esModule: true,
+ default: jest.fn(),
+}));
- const createWrapper = (): ReactWrapper => {
- return mount(
+describe('Sticky component', () => {
+ it('renders children with fixed position and 100% width when sticky', async () => {
+ (useSticky as jest.MockedFn).mockReturnValue({
+ isSticky: true,
+ });
+ render(
);
- };
-
- const currentMock: HTMLDivElement = document.createElement('div');
- const dimensionsMock = {
- height: 0,
- width: 0,
- x: 0,
- y: 0,
- bottom: 1,
- left: 0,
- right: 0,
- top: 0,
- toJSON: jest.fn(),
- };
-
- it('eventListener added and removed with useEffect', () => {
- // Allow cleanUp to be called manually
- let cleanUp;
- const spyUseEffect = jest
- .spyOn(React, 'useEffect')
- .mockImplementation((f) => {
- cleanUp = f();
- });
- const spyAdd = jest.spyOn(window, 'addEventListener');
- const spyRemove = jest.spyOn(window, 'removeEventListener');
-
- createShallowWrapper();
- expect(spyAdd).toHaveBeenCalledTimes(1);
- expect(spyRemove).toHaveBeenCalledTimes(0);
-
- cleanUp();
- expect(spyAdd).toHaveBeenCalledTimes(1);
- expect(spyRemove).toHaveBeenCalledTimes(1);
-
- spyUseEffect.mockRestore();
- spyAdd.mockRestore();
- spyRemove.mockRestore();
- });
- it('handleScroll does nothing when target undefined', () => {
- // Allow handleScroll to be called manually
- let handleScrollMock;
- const spyUseCallback = jest
- .spyOn(React, 'useCallback')
- .mockImplementation((f) => {
- handleScrollMock = f;
- return f;
- });
+ const paper = screen.getByTestId('sticky-paper');
- // Elevation is initially 0 (not stickied)
- const wrapper = createWrapper();
- expect(wrapper.find(Paper).props().elevation).toEqual(0);
-
- // Mock scrolling beyond bottom of getBoundingClientRect
- Object.defineProperty(global.window, 'scrollY', { value: 2 });
- handleScrollMock();
- expect(wrapper.find(Paper).props().elevation).toEqual(0);
-
- spyUseCallback.mockRestore();
+ // should be elevated when sticky
+ expect(paper).toHaveStyle(
+ 'z-index: 9; position: fixed; width: 100%; top: 0'
+ );
});
- it('useSticky works correctly', () => {
- // Allow handleScroll to be called manually
- let handleScrollMock;
- const spyUseCallback = jest
- .spyOn(React, 'useCallback')
- .mockImplementation((f) => {
- handleScrollMock = f;
- return f;
- });
- const spyGetRect = jest
- .spyOn(currentMock, 'getBoundingClientRect')
- .mockImplementation(() => {
- return dimensionsMock;
- });
- const { result } = renderHook(() => useSticky({ current: currentMock }));
-
- Object.defineProperty(global.window, 'scrollY', { value: 0 });
- act(() => {
- handleScrollMock();
- });
-
- expect(result.current.isSticky).toEqual(false);
-
- Object.defineProperty(global.window, 'scrollY', { value: 2 });
- act(() => {
- handleScrollMock();
+ it('renders children normally when not sticky', () => {
+ (useSticky as jest.MockedFn).mockReturnValue({
+ isSticky: false,
});
+ render(
+
+
+
+ );
- expect(result.current.isSticky).toEqual(true);
+ const paper = screen.getByTestId('sticky-paper');
- spyUseCallback.mockRestore();
- spyGetRect.mockRestore();
+ // should not be elevated
+ expect(paper).not.toHaveStyle('position: fixed; width: 100%; top: 0');
+ expect(paper).toHaveStyle('z-index: 9');
});
-
- // Sticky functionality tested in dataview e2e breadcrumbs tests
});
diff --git a/packages/datagateway-common/src/sticky.component.tsx b/packages/datagateway-common/src/sticky.component.tsx
index f45e15167..edc8179a1 100644
--- a/packages/datagateway-common/src/sticky.component.tsx
+++ b/packages/datagateway-common/src/sticky.component.tsx
@@ -1,39 +1,7 @@
import React from 'react';
import { keyframes, Paper, styled } from '@mui/material';
-import debounce from 'lodash.debounce';
-
-export function useSticky(targetElement: React.RefObject): {
- isSticky: boolean;
-} {
- const [isSticky, setIsSticky] = React.useState(false);
-
- const handleScroll = React.useCallback((): void => {
- if (
- targetElement.current &&
- targetElement.current.getBoundingClientRect().bottom
- ) {
- if (
- window.scrollY > targetElement.current.getBoundingClientRect().bottom
- ) {
- setIsSticky(true);
- } else {
- setIsSticky(false);
- }
- }
- }, [targetElement]);
-
- React.useEffect(() => {
- // Use lodash.debounce for handleScroll with a wait of 20ms.
- window.addEventListener('scroll', debounce(handleScroll, 20));
-
- return () => {
- window.removeEventListener('scroll', () => handleScroll);
- };
- }, [handleScroll]);
-
- return { isSticky };
-}
+import useSticky from './hooks/useSticky';
const moveDown = keyframes`
from {
@@ -77,6 +45,7 @@ const Sticky = (props: { children: React.ReactNode }): React.ReactElement => {
// Wrap navbar components in Paper to allow for when
// it is sticky to stand out on the page when scrolling.
-
+
`;
exports[`Action cell component renders no actions correctly 1`] = `
-
+
+
`;
diff --git a/packages/datagateway-common/src/table/cellRenderers/__snapshots__/cellContentRenderers.test.tsx.snap b/packages/datagateway-common/src/table/cellRenderers/__snapshots__/cellContentRenderers.test.tsx.snap
deleted file mode 100644
index e4219fc3e..000000000
--- a/packages/datagateway-common/src/table/cellRenderers/__snapshots__/cellContentRenderers.test.tsx.snap
+++ /dev/null
@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Cell content renderers datasetLink renders correctly 1`] = `
-
- test
-
-`;
-
-exports[`Cell content renderers investigationLink renders correctly 1`] = `
-
- test
-
-`;
-
-exports[`Cell content renderers tableLink renders correctly 1`] = `
-
- test text
-
-`;
diff --git a/packages/datagateway-common/src/table/cellRenderers/__snapshots__/dataCell.component.test.tsx.snap b/packages/datagateway-common/src/table/cellRenderers/__snapshots__/dataCell.component.test.tsx.snap
index 41551ea48..b9f68e7f7 100644
--- a/packages/datagateway-common/src/table/cellRenderers/__snapshots__/dataCell.component.test.tsx.snap
+++ b/packages/datagateway-common/src/table/cellRenderers/__snapshots__/dataCell.component.test.tsx.snap
@@ -1,141 +1,72 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Data cell component renders correctly 1`] = `
-
-
+
+
diff --git a/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/datasetDetailsPanel.component.test.tsx.snap b/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/datasetDetailsPanel.component.test.tsx.snap
index edf6cda09..007b136c8 100644
--- a/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/datasetDetailsPanel.component.test.tsx.snap
+++ b/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/datasetDetailsPanel.component.test.tsx.snap
@@ -3,6 +3,7 @@
exports[`Dataset details panel component should render correctly 1`] = `
+
@@ -146,6 +147,7 @@ exports[`Dataset details panel component should render correctly 1`] = `
exports[`Dataset details panel component should render type tab when present in the data 1`] = `
+
diff --git a/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/instrumentDetailsPanel.component.test.tsx.snap b/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/instrumentDetailsPanel.component.test.tsx.snap
index 66b64b473..4cc2f1fd4 100644
--- a/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/instrumentDetailsPanel.component.test.tsx.snap
+++ b/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/instrumentDetailsPanel.component.test.tsx.snap
@@ -3,6 +3,7 @@
exports[`Instrument details panel component should gracefully handle InstrumentScientists without Users 1`] = `
+
@@ -158,6 +159,7 @@ exports[`Instrument details panel component should gracefully handle InstrumentS
exports[`Instrument details panel component should render correctly 1`] = `
+
@@ -283,6 +285,7 @@ exports[`Instrument details panel component should render correctly 1`] = `
exports[`Instrument details panel component should render users tab when present in the data 1`] = `
+
diff --git a/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/investigationDetailsPanel.component.test.tsx.snap b/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/investigationDetailsPanel.component.test.tsx.snap
index 8433f2906..687f63aa9 100644
--- a/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/investigationDetailsPanel.component.test.tsx.snap
+++ b/packages/datagateway-common/src/detailsPanels/isis/__snapshots__/investigationDetailsPanel.component.test.tsx.snap
@@ -3,6 +3,7 @@
exports[`Investigation details panel component should check if multiple publications result in change of title to plural version 1`] = `
-
-
-
-
-
@@ -247,6 +248,7 @@ exports[`Investigation details panel component should check if multiple publicat
exports[`Investigation details panel component should check if multiple samples result in change of title to plural version 1`] = `
+
@@ -491,6 +493,7 @@ exports[`Investigation details panel component should check if multiple samples
exports[`Investigation details panel component should gracefully handles StudyInvestigations without Studies and InvestigationUsers without Users 1`] = `
+
@@ -693,6 +696,7 @@ exports[`Investigation details panel component should gracefully handles StudyIn
exports[`Investigation details panel component should render correctly 1`] = `
+
@@ -885,6 +889,7 @@ exports[`Investigation details panel component should render correctly 1`] = `
exports[`Investigation details panel component should render user, sample and publication tabs when present in the data 1`] = `
+
diff --git a/packages/datagateway-common/src/detailsPanels/isis/datafileDetailsPanel.component.tsx b/packages/datagateway-common/src/detailsPanels/isis/datafileDetailsPanel.component.tsx
index a92fe0991..b7d74929c 100644
--- a/packages/datagateway-common/src/detailsPanels/isis/datafileDetailsPanel.component.tsx
+++ b/packages/datagateway-common/src/detailsPanels/isis/datafileDetailsPanel.component.tsx
@@ -85,7 +85,11 @@ const DatafileDetailsPanel = (
}, [selectedTab, data, changeTab]);
return (
-
+
+
+
+
+
{
- it('receives and uses the theme options', () => {
- // Create a basic theme.
- const theme = createTheme({
- palette: {
- mode: 'dark',
- },
- });
-
- const wrapper = shallow(
+ it('uses default theme before receiving theme event', () => {
+ render(
-
+ test
+
);
- // Dispatch the theme options event.
+ // value taken from https://mui.com/material-ui/customization/default-theme/
+ // (default value is #1976d2)
+ // mui converts the hex value to CSS rgb expression
+
+ expect(screen.getByTestId('box')).toHaveStyle(
+ 'background-color: rgb(25, 118, 210);'
+ );
+ });
+
+ it('uses the theme sent through the theme event', () => {
document.dispatchEvent(
new CustomEvent(MicroFrontendId, {
detail: {
type: SendThemeOptionsType,
payload: {
- theme,
+ theme: createTheme({
+ palette: {
+ primary: {
+ main: '#123456',
+ },
+ },
+ }),
},
},
})
);
- // Force update the wrapper as the state will not
- // update since the theme options are from a global variable.
- wrapper.instance().forceUpdate();
+ render(
+
+
+ test
+
+
+ );
+
+ expect(screen.getByTestId('box')).toHaveStyle(
+ 'background-color: rgb(18, 52, 86);'
+ );
+ });
- expect(wrapper.childAt(0).props()).toHaveProperty('theme');
- expect(wrapper.childAt(0).prop('theme')).toEqual(theme);
+ it('ignores non-theme events', () => {
+ document.dispatchEvent(
+ new CustomEvent(MicroFrontendId, {
+ detail: {
+ type: SendThemeOptionsType,
+ payload: {
+ theme: createTheme({
+ palette: {
+ primary: {
+ main: '#abcdef',
+ },
+ },
+ }),
+ },
+ },
+ })
+ );
+
+ document.dispatchEvent(
+ new CustomEvent(MicroFrontendId, {
+ detail: {
+ type: 'ImposterEvent',
+ payload: {
+ theme: createTheme(),
+ yellow: 'sus',
+ },
+ },
+ })
+ );
+
+ render(
+
+
+ test
+
+
+ );
+
+ // value taken from https://mui.com/material-ui/customization/default-theme/
+ // (default value is #1976d2)
+ // mui converts the hex value to CSS rgb expression
+
+ // expect the dispatched theme to be used.
+ expect(screen.getByTestId('box')).toHaveStyle(
+ 'background-color: rgb(171, 205, 239);'
+ );
});
});
diff --git a/packages/datagateway-common/src/homePage/__snapshots__/homePage.component.test.tsx.snap b/packages/datagateway-common/src/homePage/__snapshots__/homePage.component.test.tsx.snap
index b551682fe..eacddbf4e 100644
--- a/packages/datagateway-common/src/homePage/__snapshots__/homePage.component.test.tsx.snap
+++ b/packages/datagateway-common/src/homePage/__snapshots__/homePage.component.test.tsx.snap
@@ -1,54 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Home page component homepage renders correctly 1`] = `
-
-
-
-
-
-
-
- home_page.browse.title
-
-
- home_page.browse.description1
-
-
-
+ home_page.browse.title
+
+
-
-
-
+
+
-
+
+
+ Test
+
+
-
-
-
-
Data discovery
@@ -57,390 +24,233 @@ exports[`Home page component homepage renders correctly 1`] = `
access
-
-
-
-
+
-
-
+
+
+ for large-scale science facilities -
+ home_page.browse.description1 +
+DataGateway focuses on providing data discovery and data access functionality to the data. -
- home_page.browse.button
-
-
-
-
-
+
+ home_page.browse.button
+
+
+
+
-
-
-
-
-
+
+
-
-
-
-
-
- home_page.search.title
-
-
- home_page.search.description
-
-
-
- home_page.search.button
-
-
-
-
-
-
-
+ + home_page.search.title +
++ home_page.search.description +
+ +
-
-
-
-
- home_page.download.title
-
-
- home_page.download.description
-
-
-
- home_page.download.button
-
-
-
-
-
-
-
+ + home_page.download.title +
++ home_page.download.description +
+ +
-
-
- home_page.facility.title
-
-
- home_page.facility.description
-
-
-
+ home_page.facility.title
+
+
+ + home_page.facility.description +
+
- home_page.facility.button
-
-
-
+
+ home_page.facility.button
+
+
+
+
-
+
-
- Loading...
-
-
-
+
+
`;
diff --git a/packages/datagateway-common/src/preloader/preloader.component.test.tsx b/packages/datagateway-common/src/preloader/preloader.component.test.tsx
index fcad4d6a5..1a234e533 100644
--- a/packages/datagateway-common/src/preloader/preloader.component.test.tsx
+++ b/packages/datagateway-common/src/preloader/preloader.component.test.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import { render } from '@testing-library/react';
+import * as React from 'react';
import Preloader from './preloader.component';
-import { shallow } from 'enzyme';
describe('Preloader component', () => {
- it('renders when the site is loading', () => {
- const wrapper = shallow(
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ Loading...
+
++ Rendered an action using test! +
+
-
non nested property
-
-
-
-
+
+
-
-
+
`;
exports[`Data cell component renders nested cell data correctly 1`] = `
-
+
+
+
-
nested property
-
-
-
-
+
+
`;
exports[`Text filter component usePrincipalExperimenterFilter hook returns a function which can generate a working PI filter 1`] = `
-
-
-
+
`;
exports[`Data cell component renders provided cell data correctly 1`] = `
-
+
+
+
-
provided test
-
-
-
-
+
-
+
-
+
-
+
-
+
-
+
-
+ {
]}
/>
);
- expect(wrapper).toMatchSnapshot();
+ expect(asFragment()).toMatchSnapshot();
});
});
diff --git a/packages/datagateway-common/src/table/cellRenderers/cellContentRenderers.test.tsx b/packages/datagateway-common/src/table/cellRenderers/cellContentRenderers.test.tsx
index 2b4c6c16a..0035a45f9 100644
--- a/packages/datagateway-common/src/table/cellRenderers/cellContentRenderers.test.tsx
+++ b/packages/datagateway-common/src/table/cellRenderers/cellContentRenderers.test.tsx
@@ -1,15 +1,13 @@
import React from 'react';
-import { shallow } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
-import { Link } from '@mui/material';
import {
- formatBytes,
datasetLink,
- investigationLink,
- tableLink,
+ filterStudyInfoInvestigations,
+ formatBytes,
formatCountOrSize,
getStudyInfoInvestigation,
- filterStudyInfoInvestigations,
+ investigationLink,
+ tableLink,
} from './cellContentRenderers';
import type {
DateFilter,
@@ -17,6 +15,7 @@ import type {
Study,
TextFilter,
} from '../../app.types';
+import { render, screen } from '@testing-library/react';
describe('Cell content renderers', () => {
describe('formatBytes', () => {
@@ -345,28 +344,37 @@ describe('Cell content renderers', () => {
describe('datasetLink', () => {
it('renders correctly', () => {
- const wrapper = shallow(
+ render(
{datasetLink('1', 2, 'test', 'card')}
);
- expect(wrapper.find(Link)).toMatchSnapshot();
+ expect(screen.getByRole('link', { name: 'test' })).toHaveAttribute(
+ 'href',
+ '/browse/investigation/1/dataset/2/datafile?view=card'
+ );
});
});
describe('investigationLink', () => {
it('renders correctly', () => {
- const wrapper = shallow(
+ render(
{investigationLink(1, 'test', 'card')}
);
- expect(wrapper.find(Link)).toMatchSnapshot();
+ expect(screen.getByRole('link', { name: 'test' })).toHaveAttribute(
+ 'href',
+ '/browse/investigation/1/dataset?view=card'
+ );
});
});
describe('tableLink', () => {
it('renders correctly', () => {
- const wrapper = shallow(
+ render(
{tableLink('/test/url', 'test text')}
);
- expect(wrapper.find(Link)).toMatchSnapshot();
+ expect(screen.getByRole('link', { name: 'test text' })).toHaveAttribute(
+ 'href',
+ '/test/url'
+ );
});
});
});
diff --git a/packages/datagateway-common/src/table/cellRenderers/dataCell.component.test.tsx b/packages/datagateway-common/src/table/cellRenderers/dataCell.component.test.tsx
index 64c3c17e3..410f9e2f3 100644
--- a/packages/datagateway-common/src/table/cellRenderers/dataCell.component.test.tsx
+++ b/packages/datagateway-common/src/table/cellRenderers/dataCell.component.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import * as React from 'react';
import DataCell from './dataCell.component';
describe('Data cell component', () => {
@@ -10,37 +10,37 @@ describe('Data cell component', () => {
rowIndex: 1,
rowData: {
test: 'non nested property',
- nested: { test: 'nested property' },
+ nested: {
+ test: 'nested property',
+ },
},
};
- it('renders correctly', () => {
- const wrapper = shallow( {'provided test'}}
/>
);
- expect(wrapper).toMatchSnapshot();
+ expect(asFragment()).toMatchSnapshot();
});
- it('renders nested cell data correctly', () => {
- const wrapper = shallow(
+ it('renders nested cell data correctly', async () => {
+ const { asFragment } = render(
- Clear
-
-`;
-
-exports[`Date filter component DatePicker functionality useTextFilter hook returns a function which can generate a working text filter 1`] = `
-
+
+
`;
-exports[`Date filter component DateTimePicker functionality useTextFilter hook returns a function which can generate a working text filter 1`] = `
-
+
-
-
+
`;
diff --git a/packages/datagateway-common/src/table/cellRenderers/__snapshots__/expandCell.component.test.tsx.snap b/packages/datagateway-common/src/table/cellRenderers/__snapshots__/expandCell.component.test.tsx.snap
index 6265c2ecf..ab35deda1 100644
--- a/packages/datagateway-common/src/table/cellRenderers/__snapshots__/expandCell.component.test.tsx.snap
+++ b/packages/datagateway-common/src/table/cellRenderers/__snapshots__/expandCell.component.test.tsx.snap
@@ -1,36 +1,61 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Expand cell component renders correctly when expanded 1`] = `
-
+
+
+
-
+
`;
exports[`Expand cell component renders correctly when not expanded 1`] = `
-
-
+
`;
diff --git a/packages/datagateway-common/src/table/cellRenderers/__snapshots__/selectCell.component.test.tsx.snap b/packages/datagateway-common/src/table/cellRenderers/__snapshots__/selectCell.component.test.tsx.snap
index 47a33262b..15ff48788 100644
--- a/packages/datagateway-common/src/table/cellRenderers/__snapshots__/selectCell.component.test.tsx.snap
+++ b/packages/datagateway-common/src/table/cellRenderers/__snapshots__/selectCell.component.test.tsx.snap
@@ -1,219 +1,202 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Select cell component renders correctly when checked 1`] = `
-
-
-
+
+
+
+
+
-
-
+
+
`;
exports[`Select cell component renders correctly when selectedRows is undefined 1`] = `
-
-
-
+
+
+
+
-
-
+
+
`;
exports[`Select cell component renders correctly when selectedRows loading is true 1`] = `
-
-
-
+
+
+
+
-
-
+
+
`;
exports[`Select cell component renders correctly when selectedRows parentSelected is true 1`] = `
-
-
-
+
+
+
+
-
-
+
+
`;
exports[`Select cell component renders correctly when unchecked 1`] = `
-
-
-
+
+
+
+
+
-
-
+
+
`;
diff --git a/packages/datagateway-common/src/table/cellRenderers/actionCell.component.test.tsx b/packages/datagateway-common/src/table/cellRenderers/actionCell.component.test.tsx
index 014426cfc..a44943d73 100644
--- a/packages/datagateway-common/src/table/cellRenderers/actionCell.component.test.tsx
+++ b/packages/datagateway-common/src/table/cellRenderers/actionCell.component.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
+import * as React from 'react';
import ActionCell from './actionCell.component';
import { TableActionProps } from '../table.component';
@@ -13,13 +13,15 @@ describe('Action cell component', () => {
className: 'test-class',
};
- it('renders no actions correctly', () => {
- const wrapper = shallow(
-
-
+
+
+
+
- Include
-
-
+ Include
+
+
+
+
-
-
+
+
+
+
- Include
-
-
+ Include
+
+
+
+
-
-
-
+ Test
+
+
+
+ + Test +
+
+
+
+
+
+
+
-
-
-
+
-
+
+
+
+ + Test +
+ + +
+
+
+
+
+
+
-
-
-
+
-
+
+
+
+ + Test +
+ + +
-
-
-
+
+
-
-
-
+ Test
+
+
+
+
+
+
+ Test +
+
-
-
-
+
`;
exports[`Select column header component renders correctly when indeterminate 1`] = `
-
-
+
`;
exports[`Select column header component renders correctly when loading is true 1`] = `
-
-
+
`;
exports[`Select column header component renders correctly when selectedRows is undefined 1`] = `
-
-
+
`;
exports[`Select column header component renders correctly when selectedRows parentSelected is true 1`] = `
-
-
-
+
`;
exports[`Select column header component renders correctly when unchecked 1`] = `
-
-
+
`;
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 1643f83f6..96dfe5a5f 100644
--- a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.test.tsx
+++ b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.test.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { UserEvent } from '@testing-library/user-event/setup/setup';
+import * as React from 'react';
import DataHeader from './dataHeader.component';
import TextColumnFilter from '../columnFilters/textColumnFilter.component';
-import { TableSortLabel } from '@mui/material';
describe('Data column header component', () => {
+ let user: UserEvent;
const onSort = jest.fn();
const resizeColumn = jest.fn();
const dataHeaderProps = {
@@ -26,99 +28,94 @@ describe('Data column header component', () => {
-
-
+
+ Details panel using test
+
+
-
-
-page
);
- expect(wrapper.exists('.error')).toBe(true);
+ render(page
);
+
+ render(
+
+
+
+
+
+
+
+ + + Data discovery + + and + + access + +
++ for + + large-scale + + science facilities +
+
+
+
+
+
+
+
+
+
+
+ + home_page.browse.title +
++ home_page.browse.description1 +
++ + DataGateway + + focuses on providing data discovery and data access functionality to the data. +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + home_page.search.title +
++ home_page.search.description +
+ +
+
+
+
+
+
+
+
+
+ + home_page.download.title +
++ home_page.download.description +
+ +
+
+
+
+
+
+
+
+ + home_page.facility.title +
++ home_page.facility.description +
+ +
+
+
{viewStyle !== 'card' && displayFilterMessage && (
{
let state: StateType;
let history: History;
- const createTableWrapper = (
- path: string,
- loggedInAnonymously?: boolean
- ): ReactWrapper => {
- const mockStore = configureStore([thunk]);
- const client = new QueryClient();
- history.push(path);
- return mount(
-
-
-
-
-
-
- );
- };
-
- const createCardWrapper = (path: string): ReactWrapper => {
- const mockStore = configureStore([thunk]);
- const client = new QueryClient();
- history.push(path);
- return mount(
-
-
-
-
-
-
- );
- };
-
- const createLandingWrapper = (path: string): ReactWrapper => {
+ function Wrapper({ children }: { children: React.ReactNode }): JSX.Element {
const mockStore = configureStore([thunk]);
- const client = new QueryClient();
- history.push(path);
- return mount(
+ const client = new QueryClient({
+ defaultOptions: {
+ queries: { retry: false },
+ },
+ });
+ return (
-
-
+ {children}
);
- };
+ }
beforeEach(() => {
history = createMemoryHistory();
@@ -206,195 +133,572 @@ describe('PageTable', () => {
describe('Generic', () => {
it('renders PageTable correctly', () => {
- const wrapper = createTableWrapper('/');
- expect(wrapper.exists(Link)).toBe(true);
+ history.push('/');
+
+ render(
+
+
+ );
+ expect(asFragment()).toMatchSnapshot();
});
});
diff --git a/packages/datagateway-dataview/src/setupTests.ts b/packages/datagateway-dataview/src/setupTests.ts
index 223b5685c..ef0657630 100644
--- a/packages/datagateway-dataview/src/setupTests.ts
+++ b/packages/datagateway-dataview/src/setupTests.ts
@@ -3,18 +3,14 @@ import '@testing-library/jest-dom';
// Blob implementation in jsdom is not complete (https://github.com/jsdom/jsdom/issues/2555)
// blob-polyfill fills in the gap
import 'blob-polyfill';
-import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import { Action } from 'redux';
import { StateType } from './state/app.types';
import { initialState as dgDataViewInitialState } from './state/reducers/dgdataview.reducer';
import { dGCommonInitialState } from 'datagateway-common';
+import { screen, within } from '@testing-library/react';
jest.setTimeout(15000);
-// Unofficial React 17 Enzyme adapter
-Enzyme.configure({ adapter: new Adapter() });
-
function noOp(): void {
// required as work-around for enzyme/jest environment not implementing window.URL.createObjectURL method
}
@@ -74,3 +70,65 @@ export const applyDatePickerWorkaround = (): void => {
export const cleanupDatePickerWorkaround = (): void => {
delete window.matchMedia;
};
+
+/**
+ * Finds the index of the column with the given name.
+ */
+export const findColumnIndexByName = async (
+ columnName: string
+): Promise => {
+ const columnHeaders = await screen.findAllByRole('columnheader');
+ return columnHeaders.findIndex(
+ (header) => within(header).queryByText(columnName) !== null
+ );
+};
+
+/**
+ * Find the header row of the table currently rendered.
+ * This assumes that the first row is always the header row.
+ */
+export const findColumnHeaderByName = async (
+ name: string
+): Promise => {
+ const columnHeaders = await screen.findAllByRole('columnheader');
+ const header = columnHeaders.find(
+ (header) => within(header).queryByText(name) !== null
+ );
+ if (!header) {
+ throw new Error(`Cannot find column header by name: ${name}`);
+ }
+ return header;
+};
+
+/**
+ * Finds all table rows except the header row.
+ */
+export const findAllRows = async (): Promise =>
+ (await screen.findAllByRole('row')).slice(1);
+
+/**
+ * Find the table row at the given index. This assumes the first table row is always the header row.
+ *
+ * @param index The index of the table row, igoring the header row. For example, if the table has 2 rows and the first row is the header row,
+ * the actual row that contains the data is considered the first row, and has an index of 0.
+ */
+export const findRowAt = async (index: number): Promise => {
+ const rows = await screen.findAllByRole('row');
+ const row = rows[index + 1];
+ if (!row) {
+ throw new Error(`Cannot find row at index ${index}`);
+ }
+ return row;
+};
+
+export const findCellInRow = (
+ row: HTMLElement,
+ { columnIndex }: { columnIndex: number }
+): HTMLElement => {
+ const cells = within(row).getAllByRole('gridcell');
+ const cell = cells[columnIndex];
+ if (!cell) {
+ throw new Error(`Cannot find cell in row.`);
+ }
+ return cell;
+};
diff --git a/packages/datagateway-dataview/src/utils.test.tsx b/packages/datagateway-dataview/src/utils.test.tsx
index 635dc1c81..20e5e5c8e 100644
--- a/packages/datagateway-dataview/src/utils.test.tsx
+++ b/packages/datagateway-dataview/src/utils.test.tsx
@@ -1,15 +1,5 @@
-import React from 'react';
import useAfterMountEffect from './utils';
-import { mount } from 'enzyme';
-
-const TestHook = (props: {
- callback: () => void;
- triggerProp: number;
- nonTriggerProp?: number;
-}): React.ReactElement => {
- props.callback();
- return ;
-};
+import { renderHook } from '@testing-library/react-hooks';
describe('Utils', () => {
describe('useAfterMountEffect', () => {
@@ -20,38 +10,33 @@ describe('Utils', () => {
});
it('calls effect only upon prop changes, not on mount', () => {
- const wrapper = mount(
- useAfterMountEffect(mockFunction)}
- />
- );
+ const callback = jest.fn();
- expect(mockFunction).not.toHaveBeenCalled();
+ const { rerender } = renderHook(() => useAfterMountEffect(callback));
- wrapper.setProps({ triggerProp: 2 });
- expect(mockFunction).toHaveBeenCalled();
+ expect(callback).not.toHaveBeenCalled();
+
+ rerender();
+ expect(callback).toHaveBeenCalled();
});
it('respects dependency array', () => {
- let triggerProp = 1;
-
- const wrapper = mount(
- useAfterMountEffect(mockFunction, [triggerProp])}
- />
+ const callback = jest.fn();
+
+ const { rerender } = renderHook(
+ (testProp) => useAfterMountEffect(callback, [testProp]),
+ {
+ initialProps: 1,
+ }
);
- expect(mockFunction).not.toHaveBeenCalled();
+ expect(callback).not.toHaveBeenCalled();
- wrapper.setProps({ nonTriggerProp: 2 });
- expect(mockFunction).not.toHaveBeenCalled();
+ rerender(1);
+ expect(callback).not.toHaveBeenCalled();
- triggerProp = 2;
- wrapper.setProps({});
- expect(mockFunction).toHaveBeenCalled();
+ rerender(2);
+ expect(callback).toHaveBeenCalled();
});
});
});
diff --git a/packages/datagateway-dataview/src/views/card/__snapshots__/datasetCardView.component.test.tsx.snap b/packages/datagateway-dataview/src/views/card/__snapshots__/datasetCardView.component.test.tsx.snap
deleted file mode 100644
index bb82d5942..000000000
--- a/packages/datagateway-dataview/src/views/card/__snapshots__/datasetCardView.component.test.tsx.snap
+++ /dev/null
@@ -1,81 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dataset - Card View renders correctly 1`] = `
-Object {
- "buttons": Array [
- [Function],
- ],
- "data": Array [
- Object {
- "createTime": "2019-07-23",
- "id": 1,
- "modTime": "2019-07-23",
- "name": "Test 1",
- "size": 1,
- },
- ],
- "description": Object {
- "dataKey": "description",
- "filterComponent": [Function],
- "label": "datasets.details.description",
- },
- "filters": Object {},
- "information": Array [
- Object {
- "dataKey": "datafileCount",
- "disableSort": true,
- "icon": Object {
- "$$typeof": Symbol(react.memo),
- "compare": null,
- "type": Object {
- "$$typeof": Symbol(react.forward_ref),
- "render": [Function],
- },
- },
- "label": "datasets.datafile_count",
- },
- Object {
- "dataKey": "createTime",
- "filterComponent": [Function],
- "icon": Object {
- "$$typeof": Symbol(react.memo),
- "compare": null,
- "type": Object {
- "$$typeof": Symbol(react.forward_ref),
- "render": [Function],
- },
- },
- "label": "datasets.create_time",
- },
- Object {
- "dataKey": "modTime",
- "filterComponent": [Function],
- "icon": Object {
- "$$typeof": Symbol(react.memo),
- "compare": null,
- "type": Object {
- "$$typeof": Symbol(react.forward_ref),
- "render": [Function],
- },
- },
- "label": "datasets.modified_time",
- },
- ],
- "loadedCount": true,
- "loadedData": true,
- "onFilter": [Function],
- "onPageChange": [Function],
- "onResultsChange": [Function],
- "onSort": [Function],
- "page": null,
- "results": null,
- "sort": Object {},
- "title": Object {
- "content": [Function],
- "dataKey": "name",
- "filterComponent": [Function],
- "label": "datasets.name",
- },
- "totalDataCount": 1,
-}
-`;
diff --git a/packages/datagateway-dataview/src/views/card/__snapshots__/investigationCardView.component.test.tsx.snap b/packages/datagateway-dataview/src/views/card/__snapshots__/investigationCardView.component.test.tsx.snap
deleted file mode 100644
index 6cc06e810..000000000
--- a/packages/datagateway-dataview/src/views/card/__snapshots__/investigationCardView.component.test.tsx.snap
+++ /dev/null
@@ -1,137 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Investigation - Card View renders correctly 1`] = `
-Object {
- "buttons": Array [
- [Function],
- ],
- "customFilters": Array [
- Object {
- "dataKey": "type.id",
- "filterItems": Array [],
- "label": "investigations.type.id",
- "prefixLabel": true,
- },
- Object {
- "dataKey": "facility.id",
- "filterItems": Array [],
- "label": "investigations.facility.id",
- "prefixLabel": true,
- },
- ],
- "data": Array [
- Object {
- "doi": "doi 1",
- "id": 1,
- "name": "Test 1",
- "title": "Test 1",
- "visitId": "1",
- },
- ],
- "description": Object {
- "dataKey": "summary",
- "filterComponent": [Function],
- "label": "investigations.details.summary",
- },
- "filters": Object {},
- "information": Array [
- Object {
- "content": [Function],
- "dataKey": "doi",
- "filterComponent": [Function],
- "icon": Object {
- "$$typeof": Symbol(react.memo),
- "compare": null,
- "type": Object {
- "$$typeof": Symbol(react.forward_ref),
- "render": [Function],
- },
- },
- "label": "investigations.doi",
- },
- Object {
- "dataKey": "visitId",
- "filterComponent": [Function],
- "icon": Object {
- "$$typeof": Symbol(react.memo),
- "compare": null,
- "type": Object {
- "$$typeof": Symbol(react.forward_ref),
- "render": [Function],
- },
- },
- "label": "investigations.visit_id",
- },
- Object {
- "dataKey": "name",
- "disableSort": true,
- "filterComponent": [Function],
- "icon": Object {
- "$$typeof": Symbol(react.memo),
- "compare": null,
- "type": Object {
- "$$typeof": Symbol(react.forward_ref),
- "render": [Function],
- },
- },
- "label": "investigations.details.name",
- },
- Object {
- "content": [Function],
- "dataKey": "datasetCount",
- "disableSort": true,
- "icon": Object {
- "$$typeof": Symbol(react.memo),
- "compare": null,
- "type": Object {
- "$$typeof": Symbol(react.forward_ref),
- "render": [Function],
- },
- },
- "label": "investigations.dataset_count",
- },
- Object {
- "dataKey": "startDate",
- "filterComponent": [Function],
- "icon": Object {
- "$$typeof": Symbol(react.memo),
- "compare": null,
- "type": Object {
- "$$typeof": Symbol(react.forward_ref),
- "render": [Function],
- },
- },
- "label": "investigations.details.start_date",
- },
- Object {
- "dataKey": "endDate",
- "filterComponent": [Function],
- "icon": Object {
- "$$typeof": Symbol(react.memo),
- "compare": null,
- "type": Object {
- "$$typeof": Symbol(react.forward_ref),
- "render": [Function],
- },
- },
- "label": "investigations.details.end_date",
- },
- ],
- "loadedCount": true,
- "loadedData": true,
- "onFilter": [Function],
- "onPageChange": [Function],
- "onResultsChange": [Function],
- "onSort": [Function],
- "page": null,
- "results": null,
- "sort": Object {},
- "title": Object {
- "content": [Function],
- "dataKey": "title",
- "filterComponent": [Function],
- "label": "investigations.title",
- },
- "totalDataCount": 1,
-}
-`;
diff --git a/packages/datagateway-dataview/src/views/card/datasetCardView.component.test.tsx b/packages/datagateway-dataview/src/views/card/datasetCardView.component.test.tsx
index 886b748d2..ffc7bb947 100644
--- a/packages/datagateway-dataview/src/views/card/datasetCardView.component.test.tsx
+++ b/packages/datagateway-dataview/src/views/card/datasetCardView.component.test.tsx
@@ -1,27 +1,31 @@
-import { ListItemText } from '@mui/material';
import {
- AdvancedFilter,
+ type Dataset,
dGCommonInitialState,
- useDatasetsPaginated,
useDatasetCount,
- Dataset,
- AddToCartButton,
+ useDatasetsPaginated,
} from 'datagateway-common';
-import { mount, ReactWrapper } from 'enzyme';
-import React from 'react';
+import * as React from 'react';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
-import { StateType } from '../../state/app.types';
+import type { StateType } from '../../state/app.types';
import DatasetCardView from './datasetCardView.component';
import { QueryClient, QueryClientProvider } from 'react-query';
-import { createMemoryHistory, History } from 'history';
+import { createMemoryHistory, type History } from 'history';
import { initialState as dgDataViewInitialState } from '../../state/reducers/dgdataview.reducer';
import {
applyDatePickerWorkaround,
cleanupDatePickerWorkaround,
} from '../../setupTests';
+import {
+ render,
+ type RenderResult,
+ screen,
+ within,
+} from '@testing-library/react';
+import { UserEvent } from '@testing-library/user-event/setup/setup';
+import userEvent from '@testing-library/user-event';
jest.mock('datagateway-common', () => {
const originalModule = jest.requireActual('datagateway-common');
@@ -39,11 +43,11 @@ describe('Dataset - Card View', () => {
let state: StateType;
let cardData: Dataset[];
let history: History;
+ let user: UserEvent;
- const createWrapper = (): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (): RenderResult =>
+ render(
+
);
- };
beforeEach(() => {
cardData = [
{
id: 1,
name: 'Test 1',
+ description: 'Test description',
size: 1,
modTime: '2019-07-23',
createTime: '2019-07-23',
+ datafileCount: 1,
},
];
history = createMemoryHistory();
+ user = userEvent.setup();
mockStore = configureStore([thunk]);
state = JSON.parse(
@@ -89,41 +95,100 @@ describe('Dataset - Card View', () => {
jest.clearAllMocks();
});
- it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('CardView').props()).toMatchSnapshot();
- });
+ it('renders datasets as cards', async () => {
+ renderComponent();
- it('calls the correct data fetching hooks on load', () => {
- const investigationId = '1';
- createWrapper();
- expect(useDatasetCount).toHaveBeenCalledWith([
- {
- filterType: 'where',
- filterValue: JSON.stringify({
- 'investigation.id': { eq: investigationId },
- }),
- },
- ]);
- expect(useDatasetsPaginated).toHaveBeenCalledWith([
- {
- filterType: 'where',
- filterValue: JSON.stringify({
- 'investigation.id': { eq: investigationId },
- }),
- },
- ]);
+ const cards = await screen.findAllByTestId('card');
+ expect(cards).toHaveLength(1);
+
+ const card = within(cards[0]);
+
+ // check that title & description is displayed correctly
+ expect(
+ within(card.getByLabelText('card-title')).getByRole('link', {
+ name: 'Test 1',
+ })
+ ).toHaveAttribute('href', '/browse/investigation/1/dataset/1/datafile');
+ expect(
+ within(card.getByLabelText('card-description')).getByText(
+ 'Test description'
+ )
+ ).toBeInTheDocument();
+
+ // check that datafile count is displayed correctly
+ expect(
+ card.getByTestId('card-info-datasets.datafile_count')
+ ).toBeInTheDocument();
+ expect(
+ within(card.getByTestId('card-info-datasets.datafile_count')).getByTestId(
+ 'ConfirmationNumberIcon'
+ )
+ ).toBeInTheDocument();
+ expect(
+ card.getByTestId('card-info-datasets.datafile_count')
+ ).toHaveTextContent('datasets.datafile_count');
+ expect(
+ within(
+ card.getByTestId('card-info-data-datasets.datafile_count')
+ ).getByText('1')
+ ).toBeInTheDocument();
+
+ // check that datafile create time is displayed correctly
+ expect(
+ card.getByTestId('card-info-datasets.create_time')
+ ).toBeInTheDocument();
+ expect(
+ card.getByTestId('card-info-datasets.create_time')
+ ).toHaveTextContent('datasets.create_time');
+ expect(
+ within(card.getByTestId('card-info-datasets.create_time')).getByTestId(
+ 'CalendarTodayIcon'
+ )
+ ).toBeInTheDocument();
+ expect(
+ within(card.getByTestId('card-info-data-datasets.create_time')).getByText(
+ '2019-07-23'
+ )
+ ).toBeInTheDocument();
+
+ // check that datafile modified time is displayed correctly
+ expect(
+ card.getByTestId('card-info-datasets.modified_time')
+ ).toBeInTheDocument();
+ expect(
+ card.getByTestId('card-info-datasets.modified_time')
+ ).toHaveTextContent('datasets.modified_time');
+ expect(
+ within(card.getByTestId('card-info-datasets.modified_time')).getByTestId(
+ 'CalendarTodayIcon'
+ )
+ ).toBeInTheDocument();
+ expect(
+ within(
+ card.getByTestId('card-info-data-datasets.modified_time')
+ ).getByText('2019-07-23')
+ ).toBeInTheDocument();
+
+ // check that buttons are displayed correctly
+ expect(
+ card.getByRole('button', { name: 'buttons.add_to_cart' })
+ ).toBeInTheDocument();
});
- it('updates filter query params on text filter', () => {
- const wrapper = createWrapper();
+ it('updates filter query params on text filter', async () => {
+ renderComponent();
+
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'Filter by datasets.name',
+ hidden: true,
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').last().simulate('click');
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: 'test' } });
+ await user.type(filter, 'test');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
@@ -131,62 +196,54 @@ describe('Dataset - Card View', () => {
)}`
);
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
});
- it('updates filter query params on date filter', () => {
+ it('updates filter query params on date filter', async () => {
applyDatePickerWorkaround();
- const wrapper = createWrapper();
+ renderComponent();
+
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'datasets.modified_time filter to',
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').first().simulate('click');
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '2019-08-06' } });
+ await user.type(filter, '2019-08-06');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent('{"modTime":{"endDate":"2019-08-06"}}')}`
);
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
cleanupDatePickerWorkaround();
});
- it('updates sort query params on sort', () => {
- const wrapper = createWrapper();
+ it('updates sort query params on sort', async () => {
+ renderComponent();
- const button = wrapper.find(ListItemText).first();
- expect(button.text()).toEqual('datasets.name');
- button.find('div').simulate('click');
+ await user.click(
+ await screen.findByRole('button', { name: 'Sort by DATASETS.NAME' })
+ );
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"name":"asc"}')}`
);
});
- it('renders buttons correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find(AddToCartButton).exists()).toBeTruthy();
- expect(wrapper.find(AddToCartButton).text()).toEqual('buttons.add_to_cart');
- });
-
it('renders fine with incomplete data', () => {
(useDatasetCount as jest.Mock).mockReturnValue({});
(useDatasetsPaginated as jest.Mock).mockReturnValue({});
- expect(() => createWrapper()).not.toThrowError();
+ expect(() => renderComponent()).not.toThrowError();
});
});
diff --git a/packages/datagateway-dataview/src/views/card/datasetCardView.component.tsx b/packages/datagateway-dataview/src/views/card/datasetCardView.component.tsx
index 8c7f37279..71ede5e86 100644
--- a/packages/datagateway-dataview/src/views/card/datasetCardView.component.tsx
+++ b/packages/datagateway-dataview/src/views/card/datasetCardView.component.tsx
@@ -120,6 +120,7 @@ const DatasetCardView = (props: DatasetCardViewProps): React.ReactElement => {
return (
{
const originalModule = jest.requireActual('datagateway-common');
@@ -40,11 +38,11 @@ describe('DLS Datasets - Card View', () => {
let state: StateType;
let cardData: Dataset[];
let history: History;
+ let user: UserEvent;
- const createWrapper = (): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (): RenderResult =>
+ render(
+
);
- };
beforeEach(() => {
cardData = [
@@ -64,6 +61,7 @@ describe('DLS Datasets - Card View', () => {
},
];
history = createMemoryHistory();
+ user = userEvent.setup();
mockStore = configureStore([thunk]);
state = JSON.parse(
@@ -90,41 +88,20 @@ describe('DLS Datasets - Card View', () => {
jest.clearAllMocks();
});
- it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('CardView').props()).toMatchSnapshot();
- });
+ it('updates filter query params on text filter', async () => {
+ renderComponent();
- it('calls the correct data fetching hooks on load', () => {
- const investigationId = '1';
- createWrapper();
- expect(useDatasetCount).toHaveBeenCalledWith([
- {
- filterType: 'where',
- filterValue: JSON.stringify({
- 'investigation.id': { eq: investigationId },
- }),
- },
- ]);
- expect(useDatasetsPaginated).toHaveBeenCalledWith([
- {
- filterType: 'where',
- filterValue: JSON.stringify({
- 'investigation.id': { eq: investigationId },
- }),
- },
- ]);
- });
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
- it('updates filter query params on text filter', () => {
- const wrapper = createWrapper();
+ const filter = await screen.findByRole('textbox', {
+ name: 'Filter by datasets.name',
+ hidden: true,
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').last().simulate('click');
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: 'test' } });
+ await user.type(filter, 'test');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
@@ -132,34 +109,32 @@ describe('DLS Datasets - Card View', () => {
)}`
);
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
});
- it('updates filter query params on date filter', () => {
+ it('updates filter query params on date filter', async () => {
applyDatePickerWorkaround();
- const wrapper = createWrapper();
+ renderComponent();
+
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'datasets.details.end_date filter to',
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').first().simulate('click');
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '2019-08-06' } });
+ await user.type(filter, '2019-08-06');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent('{"endDate":{"endDate":"2019-08-06"}}')}`
);
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
@@ -167,48 +142,44 @@ describe('DLS Datasets - Card View', () => {
});
it('uses default sort', () => {
- const wrapper = createWrapper();
- wrapper.update();
-
+ renderComponent();
expect(history.length).toBe(1);
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"createTime":"desc"}')}`
);
});
- it('updates sort query params on sort', () => {
- const wrapper = createWrapper();
+ it('updates sort query params on sort', async () => {
+ renderComponent();
- const button = wrapper.find(ListItemText).first();
- expect(button.text()).toEqual('datasets.name');
- button.find('div').simulate('click');
+ await user.click(
+ await screen.findByRole('button', { name: 'Sort by DATASETS.NAME' })
+ );
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"name":"asc"}')}`
);
- });
+ }, 10000);
- it('displays details panel when more information is expanded', () => {
- const wrapper = createWrapper();
- expect(wrapper.find(DLSDatasetDetailsPanel).exists()).toBeFalsy();
- wrapper
- .find('[aria-label="card-more-info-expand"]')
- .last()
- .simulate('click');
-
- expect(wrapper.find(DLSDatasetDetailsPanel).exists()).toBeTruthy();
+ it('displays details panel when more information is expanded', async () => {
+ renderComponent();
+ await user.click(
+ await screen.findByRole('button', { name: 'card-more-info-expand' })
+ );
+ expect(screen.findByTestId('dataset-details-panel')).toBeTruthy();
});
- it('renders buttons correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find(AddToCartButton).exists()).toBeTruthy();
- expect(wrapper.find(AddToCartButton).text()).toEqual('buttons.add_to_cart');
+ it('renders buttons correctly', async () => {
+ renderComponent();
+ expect(
+ await screen.findByRole('button', { name: 'buttons.add_to_cart' })
+ ).toBeInTheDocument();
});
it('renders fine with incomplete data', () => {
(useDatasetCount as jest.Mock).mockReturnValueOnce({});
(useDatasetsPaginated as jest.Mock).mockReturnValueOnce({});
- expect(() => createWrapper()).not.toThrowError();
+ expect(() => renderComponent()).not.toThrowError();
});
});
diff --git a/packages/datagateway-dataview/src/views/card/dls/dlsDatasetsCardView.component.tsx b/packages/datagateway-dataview/src/views/card/dls/dlsDatasetsCardView.component.tsx
index 48491b6d2..d1b51ba15 100644
--- a/packages/datagateway-dataview/src/views/card/dls/dlsDatasetsCardView.component.tsx
+++ b/packages/datagateway-dataview/src/views/card/dls/dlsDatasetsCardView.component.tsx
@@ -149,6 +149,7 @@ const DLSDatasetsCardView = (props: DLSDatasetsCVProps): React.ReactElement => {
return (
{
const originalModule = jest.requireActual('datagateway-common');
@@ -33,11 +34,11 @@ describe('DLS Proposals - Card View', () => {
let state: StateType;
let cardData: Investigation[];
let history: History;
+ let user: UserEvent;
- const createWrapper = (): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (): RenderResult =>
+ render(
+
);
- };
beforeEach(() => {
cardData = [
@@ -57,6 +57,7 @@ describe('DLS Proposals - Card View', () => {
},
];
history = createMemoryHistory();
+ user = userEvent.setup();
mockStore = configureStore([thunk]);
state = JSON.parse(
@@ -83,39 +84,20 @@ describe('DLS Proposals - Card View', () => {
jest.clearAllMocks();
});
- it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('CardView').props()).toMatchSnapshot();
- });
+ it('updates filter query params on text filter', async () => {
+ renderComponent();
- it('calls the correct data fetching hooks on load', () => {
- createWrapper();
- expect(useInvestigationCount).toHaveBeenCalledWith([
- {
- filterType: 'distinct',
- filterValue: JSON.stringify(['name', 'title']),
- },
- ]);
- expect(useInvestigationsPaginated).toHaveBeenCalledWith(
- [
- {
- filterType: 'distinct',
- filterValue: JSON.stringify(['name', 'title']),
- },
- ],
- true
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
);
- });
- it('updates filter query params on text filter', () => {
- const wrapper = createWrapper();
+ const filter = await screen.findByRole('textbox', {
+ name: 'Filter by investigations.title',
+ hidden: true,
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').simulate('click');
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: 'test' } });
+ await user.type(filter, 'test');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
@@ -123,18 +105,13 @@ describe('DLS Proposals - Card View', () => {
)}`
);
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
});
it('uses default sort', () => {
- const wrapper = createWrapper();
- wrapper.update();
-
+ renderComponent();
expect(history.length).toBe(1);
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"title":"asc"}')}`
@@ -145,6 +122,6 @@ describe('DLS Proposals - Card View', () => {
(useInvestigationCount as jest.Mock).mockReturnValueOnce({});
(useInvestigationsPaginated as jest.Mock).mockReturnValueOnce({});
- expect(() => createWrapper()).not.toThrowError();
+ expect(() => renderComponent()).not.toThrowError();
});
});
diff --git a/packages/datagateway-dataview/src/views/card/dls/dlsProposalsCardView.component.tsx b/packages/datagateway-dataview/src/views/card/dls/dlsProposalsCardView.component.tsx
index 0b1a4a695..0a9a70377 100644
--- a/packages/datagateway-dataview/src/views/card/dls/dlsProposalsCardView.component.tsx
+++ b/packages/datagateway-dataview/src/views/card/dls/dlsProposalsCardView.component.tsx
@@ -82,6 +82,7 @@ const DLSProposalsCardView = (): React.ReactElement => {
return (
{
const originalModule = jest.requireActual('datagateway-common');
@@ -41,11 +40,11 @@ describe('DLS Visits - Card View', () => {
let state: StateType;
let cardData: Investigation[];
let history: History;
+ let user: UserEvent;
- const createWrapper = (): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (): RenderResult =>
+ render(
+
);
- };
beforeEach(() => {
cardData = [
@@ -65,6 +63,7 @@ describe('DLS Visits - Card View', () => {
},
];
history = createMemoryHistory();
+ user = userEvent.setup();
mockStore = configureStore([thunk]);
state = JSON.parse(
@@ -92,44 +91,20 @@ describe('DLS Visits - Card View', () => {
jest.clearAllMocks();
});
- it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('CardView').props()).toMatchSnapshot();
- });
+ it('updates filter query params on text filter', async () => {
+ renderComponent();
- it('calls the correct data fetching hooks on load', () => {
- const proposalName = 'test';
- createWrapper();
- expect(useInvestigationCount).toHaveBeenCalledWith([
- {
- filterType: 'where',
- filterValue: JSON.stringify({ name: { eq: proposalName } }),
- },
- ]);
- expect(useInvestigationsPaginated).toHaveBeenCalledWith([
- {
- filterType: 'where',
- filterValue: JSON.stringify({ name: { eq: proposalName } }),
- },
- {
- filterType: 'include',
- filterValue: JSON.stringify({
- investigationInstruments: 'instrument',
- }),
- },
- ]);
- expect(useInvestigationsDatasetCount).toHaveBeenCalledWith(cardData);
- });
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
- it('updates filter query params on text filter', () => {
- const wrapper = createWrapper();
+ const filter = await screen.findByRole('textbox', {
+ name: 'Filter by investigations.visit_id',
+ hidden: true,
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').last().simulate('click');
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: 'test' } });
+ await user.type(filter, 'test');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
@@ -137,34 +112,32 @@ describe('DLS Visits - Card View', () => {
)}`
);
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
});
- it('updates filter query params on date filter', () => {
+ it('updates filter query params on date filter', async () => {
applyDatePickerWorkaround();
- const wrapper = createWrapper();
+ renderComponent();
+
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'investigations.end_date filter to',
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').first().simulate('click');
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '2019-08-06' } });
+ await user.type(filter, '2019-08-06');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent('{"endDate":{"endDate":"2019-08-06"}}')}`
);
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
@@ -172,36 +145,33 @@ describe('DLS Visits - Card View', () => {
});
it('uses default sort', () => {
- const wrapper = createWrapper();
- wrapper.update();
-
+ renderComponent();
expect(history.length).toBe(1);
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"startDate":"desc"}')}`
);
});
- it('updates sort query params on sort', () => {
- const wrapper = createWrapper();
+ it('updates sort query params on sort', async () => {
+ renderComponent();
- const button = wrapper.find(ListItemText).first();
- expect(button.text()).toEqual('investigations.visit_id');
- button.find('div').simulate('click');
+ await user.click(
+ await screen.findByRole('button', {
+ name: 'Sort by INVESTIGATIONS.VISIT_ID',
+ })
+ );
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"visitId":"asc"}')}`
);
});
- it('displays details panel when more information is expanded', () => {
- const wrapper = createWrapper();
- expect(wrapper.find(DLSVisitDetailsPanel).exists()).toBeFalsy();
- wrapper
- .find('[aria-label="card-more-info-expand"]')
- .last()
- .simulate('click');
-
- expect(wrapper.find(DLSVisitDetailsPanel).exists()).toBeTruthy();
+ it('displays details panel when more information is expanded', async () => {
+ renderComponent();
+ await user.click(await screen.findByLabelText('card-more-info-expand'));
+ expect(
+ await screen.findByTestId('visit-details-panel')
+ ).toBeInTheDocument();
});
it('renders fine with incomplete data', () => {
@@ -209,6 +179,6 @@ describe('DLS Visits - Card View', () => {
(useInvestigationsPaginated as jest.Mock).mockReturnValueOnce({});
(useInvestigationsDatasetCount as jest.Mock).mockReturnValueOnce([]);
- expect(() => createWrapper()).not.toThrowError();
+ expect(() => renderComponent()).not.toThrowError();
});
});
diff --git a/packages/datagateway-dataview/src/views/card/dls/dlsVisitsCardView.component.tsx b/packages/datagateway-dataview/src/views/card/dls/dlsVisitsCardView.component.tsx
index c9ece16e7..a135c74fb 100644
--- a/packages/datagateway-dataview/src/views/card/dls/dlsVisitsCardView.component.tsx
+++ b/packages/datagateway-dataview/src/views/card/dls/dlsVisitsCardView.component.tsx
@@ -146,6 +146,7 @@ const DLSVisitsCardView = (props: DLSVisitsCVProps): React.ReactElement => {
return (
{
- const originalModule = jest.requireActual('datagateway-common');
-
- return {
- __esModule: true,
- ...originalModule,
- useInvestigationCount: jest.fn(),
- useInvestigationsPaginated: jest.fn(),
- useInvestigationsDatasetCount: jest.fn(),
- };
-});
+import {
+ render,
+ type RenderResult,
+ screen,
+ within,
+} from '@testing-library/react';
+import type { UserEvent } from '@testing-library/user-event/setup/setup';
+import userEvent from '@testing-library/user-event';
+import axios, { AxiosResponse } from 'axios';
describe('Investigation - Card View', () => {
let mockStore;
let state: StateType;
let cardData: Investigation[];
let history: History;
+ let user: UserEvent;
+ let cartItems: DownloadCartItem[];
- const createWrapper = (): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (): RenderResult =>
+ render(
+
);
- };
beforeEach(() => {
+ cartItems = [];
cardData = [
{
id: 1,
- title: 'Test 1',
- name: 'Test 1',
- visitId: '1',
+ title: 'Test title 1',
+ summary: 'Test summary',
+ name: 'Test name 1',
+ visitId: 'visit id 1',
doi: 'doi 1',
+ startDate: '2020-01-01',
+ endDate: '2020-01-02',
},
];
history = createMemoryHistory();
+ user = userEvent.setup();
mockStore = configureStore([thunk]);
state = JSON.parse(
@@ -75,15 +71,33 @@ describe('Investigation - Card View', () => {
})
);
- (useInvestigationCount as jest.Mock).mockReturnValue({
- data: 1,
- isLoading: false,
- });
- (useInvestigationsPaginated as jest.Mock).mockReturnValue({
- data: cardData,
- isLoading: false,
- });
- (useInvestigationsDatasetCount as jest.Mock).mockReturnValue({ data: 1 });
+ axios.get = jest
+ .fn()
+ .mockImplementation((url: string): Promise> => {
+ if (url.includes('/investigations/count')) {
+ return Promise.resolve({
+ data: 1,
+ });
+ }
+
+ if (url.includes('/investigations')) {
+ return Promise.resolve({
+ data: cardData,
+ });
+ }
+
+ if (url.includes('/datasets/count')) {
+ return Promise.resolve({
+ data: 1,
+ });
+ }
+
+ if (url.includes('/user/cart')) {
+ return Promise.resolve({
+ data: { cartItems },
+ });
+ }
+ });
// Prevent error logging
window.scrollTo = jest.fn();
@@ -93,27 +107,134 @@ describe('Investigation - Card View', () => {
jest.clearAllMocks();
});
- it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('CardView').props()).toMatchSnapshot();
- });
+ it('renders investigations as cards', async () => {
+ renderComponent();
+
+ const cards = await screen.findAllByTestId('card');
+ expect(cards).toHaveLength(1);
+
+ const card = within(cards[0]);
+
+ // check that title & description is displayed correctly
+ expect(
+ within(card.getByLabelText('card-title')).getByRole('link', {
+ name: 'Test title 1',
+ })
+ ).toHaveAttribute('href', '/browse/investigation/1/dataset');
+ expect(
+ within(card.getByLabelText('card-description')).getByText('Test summary')
+ ).toBeInTheDocument();
- it('calls the correct data fetching hooks on load', () => {
- createWrapper();
- expect(useInvestigationCount).toHaveBeenCalled();
- expect(useInvestigationsPaginated).toHaveBeenCalled();
- expect(useInvestigationsDatasetCount).toHaveBeenCalledWith(cardData);
+ // check that investigation doi is displayed correctly
+ expect(
+ within(card.getByTestId('card-info-investigations.doi')).getByTestId(
+ 'PublicIcon'
+ )
+ ).toBeInTheDocument();
+ expect(card.getByTestId('card-info-investigations.doi')).toHaveTextContent(
+ 'investigations.doi'
+ );
+ expect(
+ within(card.getByTestId('card-info-data-investigations.doi')).getByRole(
+ 'link',
+ { name: 'doi 1' }
+ )
+ ).toHaveAttribute('href', 'https://doi.org/doi 1');
+
+ // check that visit id is displayed correctly
+ expect(
+ card.getByTestId('card-info-investigations.visit_id')
+ ).toHaveTextContent('investigations.visit_id');
+ expect(
+ within(card.getByTestId('card-info-investigations.visit_id')).getByTestId(
+ 'FingerprintIcon'
+ )
+ ).toBeInTheDocument();
+ expect(
+ within(
+ card.getByTestId('card-info-data-investigations.visit_id')
+ ).getByText('visit id 1')
+ ).toBeInTheDocument();
+
+ // check that investigation name is displayed correctly
+ expect(
+ card.getByTestId('card-info-investigations.details.name')
+ ).toHaveTextContent('investigations.details.name');
+ expect(
+ within(
+ card.getByTestId('card-info-investigations.details.name')
+ ).getByTestId('FingerprintIcon')
+ ).toBeInTheDocument();
+ expect(
+ within(
+ card.getByTestId('card-info-data-investigations.details.name')
+ ).getByText('Test name 1')
+ ).toBeInTheDocument();
+
+ // check that investigation dataset count is displayed correctly
+ expect(
+ card.getByTestId('card-info-investigations.dataset_count')
+ ).toHaveTextContent('investigations.dataset_count');
+ expect(
+ within(
+ card.getByTestId('card-info-investigations.dataset_count')
+ ).getByTestId('ConfirmationNumberIcon')
+ ).toBeInTheDocument();
+ expect(
+ within(
+ card.getByTestId('card-info-data-investigations.dataset_count')
+ ).getByText('1')
+ ).toBeInTheDocument();
+
+ // check that investigation start date is displayed correctly
+ expect(
+ card.getByTestId('card-info-investigations.details.start_date')
+ ).toHaveTextContent('investigations.details.start_date');
+ expect(
+ within(
+ card.getByTestId('card-info-investigations.details.start_date')
+ ).getByTestId('CalendarTodayIcon')
+ ).toBeInTheDocument();
+ expect(
+ within(
+ card.getByTestId('card-info-data-investigations.details.start_date')
+ ).getByText('2020-01-01')
+ ).toBeInTheDocument();
+
+ // check that investigation start date is displayed correctly
+ expect(
+ card.getByTestId('card-info-investigations.details.end_date')
+ ).toHaveTextContent('investigations.details.end_date');
+ expect(
+ within(
+ card.getByTestId('card-info-investigations.details.end_date')
+ ).getByTestId('CalendarTodayIcon')
+ ).toBeInTheDocument();
+ expect(
+ within(
+ card.getByTestId('card-info-data-investigations.details.end_date')
+ ).getByText('2020-01-02')
+ ).toBeInTheDocument();
+
+ // check that card buttons are displayed correctly
+ expect(
+ card.getByRole('button', { name: 'buttons.add_to_cart' })
+ ).toBeInTheDocument();
});
- it('updates filter query params on text filter', () => {
- const wrapper = createWrapper();
+ it('updates filter query params on text filter', async () => {
+ renderComponent();
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').last().simulate('click');
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: 'test' } });
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'Filter by investigations.title',
+ hidden: true,
+ });
+
+ await user.type(filter, 'test');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
@@ -121,79 +242,48 @@ describe('Investigation - Card View', () => {
)}`
);
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
});
- it('updates filter query params on date filter', () => {
+ it('updates filter query params on date filter', async () => {
applyDatePickerWorkaround();
- const wrapper = createWrapper();
+ renderComponent();
+
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'investigations.details.end_date filter to',
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').first().simulate('click');
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '2019-08-06' } });
+ await user.type(filter, '2019-08-06');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent('{"endDate":{"endDate":"2019-08-06"}}')}`
);
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
cleanupDatePickerWorkaround();
});
- it('displays DOI and renders the expected Link ', () => {
- const wrapper = createWrapper();
- expect(
- wrapper.find('[data-testid="investigation-card-doi-link"]').first().text()
- ).toEqual('doi 1');
-
- expect(
- wrapper
- .find('[data-testid="investigation-card-doi-link"]')
- .first()
- .prop('href')
- ).toEqual('https://doi.org/doi 1');
- });
-
- it('updates sort query params on sort', () => {
- const wrapper = createWrapper();
+ it('updates sort query params on sort', async () => {
+ renderComponent();
- const button = wrapper.find(ListItemText).first();
- expect(button.text()).toEqual('investigations.title');
- button.find('div').simulate('click');
+ await user.click(
+ await screen.findByRole('button', {
+ name: 'Sort by INVESTIGATIONS.TITLE',
+ })
+ );
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"title":"asc"}')}`
);
});
-
- it('renders buttons correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find(AddToCartButton).exists()).toBeTruthy();
- expect(wrapper.find(AddToCartButton).text()).toEqual('buttons.add_to_cart');
- });
-
- it('renders fine with incomplete data', () => {
- (useInvestigationCount as jest.Mock).mockReturnValueOnce({});
- (useInvestigationsPaginated as jest.Mock).mockReturnValueOnce({});
- (useInvestigationsDatasetCount as jest.Mock).mockReturnValueOnce([
- { data: 0 },
- ]);
-
- expect(() => createWrapper()).not.toThrowError();
- });
});
diff --git a/packages/datagateway-dataview/src/views/card/investigationCardView.component.tsx b/packages/datagateway-dataview/src/views/card/investigationCardView.component.tsx
index 4253e89ac..a7e82e6c2 100644
--- a/packages/datagateway-dataview/src/views/card/investigationCardView.component.tsx
+++ b/packages/datagateway-dataview/src/views/card/investigationCardView.component.tsx
@@ -204,6 +204,7 @@ const InvestigationCardView = (): React.ReactElement => {
return (
{
const originalModule = jest.requireActual('datagateway-common');
@@ -41,11 +38,11 @@ describe('ISIS Datasets - Card View', () => {
let state: StateType;
let cardData: Dataset[];
let history: History;
+ let user: UserEvent;
- const createWrapper = (): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (): RenderResult =>
+ render(
+
{
);
- };
beforeEach(() => {
cardData = [
@@ -71,6 +67,7 @@ describe('ISIS Datasets - Card View', () => {
},
];
history = createMemoryHistory();
+ user = userEvent.setup();
mockStore = configureStore([thunk]);
state = JSON.parse(
@@ -97,43 +94,17 @@ describe('ISIS Datasets - Card View', () => {
jest.clearAllMocks();
});
- it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('CardView').props()).toMatchSnapshot();
- });
-
- it('calls the correct data fetching hooks on load', () => {
- const investigationId = '1';
- createWrapper();
- expect(useDatasetCount).toHaveBeenCalledWith([
- {
- filterType: 'where',
- filterValue: JSON.stringify({
- 'investigation.id': { eq: investigationId },
- }),
- },
- ]);
- expect(useDatasetsPaginated).toHaveBeenCalledWith([
- {
- filterType: 'where',
- filterValue: JSON.stringify({
- 'investigation.id': { eq: investigationId },
- }),
- },
- ]);
- });
-
- it('correct link used when NOT in studyHierarchy', () => {
- const wrapper = createWrapper();
- expect(
- wrapper.find('[aria-label="card-title"]').last().childAt(0).prop('to')
- ).toEqual('/browse/instrument/1/facilityCycle/1/investigation/1/dataset/1');
+ it('correct link used when NOT in studyHierarchy', async () => {
+ renderComponent();
+ expect(await screen.findByRole('link', { name: 'Test 1' })).toHaveAttribute(
+ 'href',
+ '/browse/instrument/1/facilityCycle/1/investigation/1/dataset/1'
+ );
});
- it('correct link used for studyHierarchy', () => {
- const store = mockStore(state);
- const wrapper = mount(
-
+ it('correct link used for studyHierarchy', async () => {
+ render(
+
{
);
- expect(
- wrapper.find('[aria-label="card-title"]').last().childAt(0).prop('to')
- ).toEqual(
+ expect(await screen.findByRole('link', { name: 'Test 1' })).toHaveAttribute(
+ 'href',
'/browseStudyHierarchy/instrument/1/study/1/investigation/1/dataset/1'
);
});
- it('updates filter query params on text filter', () => {
- const wrapper = createWrapper();
+ it('updates filter query params on text filter', async () => {
+ renderComponent();
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').last().simulate('click');
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: 'test' } });
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'Filter by datasets.name',
+ hidden: true,
+ });
+
+ await user.type(filter, 'test');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
@@ -169,34 +144,32 @@ describe('ISIS Datasets - Card View', () => {
)}`
);
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
});
- it('updates filter query params on date filter', () => {
+ it('updates filter query params on date filter', async () => {
applyDatePickerWorkaround();
- const wrapper = createWrapper();
+ renderComponent();
+
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'datasets.modified_time filter to',
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').first().simulate('click');
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '2019-08-06' } });
+ await user.type(filter, '2019-08-06');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent('{"modTime":{"endDate":"2019-08-06"}}')}`
);
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
@@ -204,47 +177,48 @@ describe('ISIS Datasets - Card View', () => {
});
it('uses default sort', () => {
- const wrapper = createWrapper();
- wrapper.update();
-
+ renderComponent();
expect(history.length).toBe(1);
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"createTime":"desc"}')}`
);
});
- it('updates sort query params on sort', () => {
- const wrapper = createWrapper();
+ it('updates sort query params on sort', async () => {
+ renderComponent();
- const button = wrapper.find(ListItemText).first();
- expect(button.text()).toEqual('datasets.name');
- button.find('div').simulate('click');
+ await user.click(
+ await screen.findByRole('button', { name: 'Sort by DATASETS.NAME' })
+ );
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"name":"asc"}')}`
);
});
- it('renders buttons correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find(AddToCartButton).exists()).toBeTruthy();
- expect(wrapper.find(AddToCartButton).text()).toEqual('buttons.add_to_cart');
-
- expect(wrapper.find(DownloadButton).exists()).toBeTruthy();
- expect(wrapper.find(DownloadButton).text()).toEqual('buttons.download');
+ it('renders buttons correctly', async () => {
+ renderComponent();
+ expect(
+ await screen.findByRole('button', { name: 'buttons.add_to_cart' })
+ ).toBeInTheDocument();
+ expect(
+ await screen.findByRole('button', { name: 'buttons.download' })
+ ).toBeInTheDocument();
});
- it('displays details panel when more information is expanded and navigates to datafiles view when tab clicked', () => {
- const wrapper = createWrapper();
- expect(wrapper.find(ISISDatasetDetailsPanel).exists()).toBeFalsy();
- wrapper
- .find('[aria-label="card-more-info-expand"]')
- .last()
- .simulate('click');
+ it('displays details panel when more information is expanded and navigates to datafiles view when tab clicked', async () => {
+ renderComponent();
+
+ await user.click(await screen.findByLabelText('card-more-info-expand'));
- expect(wrapper.find(ISISDatasetDetailsPanel).exists()).toBeTruthy();
+ expect(
+ await screen.findByTestId('isis-dataset-details-panel')
+ ).toBeInTheDocument();
+
+ await user.click(
+ await screen.findByRole('tab', { name: 'datasets.details.datafiles' })
+ );
- wrapper.find('#dataset-datafiles-tab').last().simulate('click');
expect(history.location.pathname).toBe(
'/browse/instrument/1/facilityCycle/1/investigation/1/dataset/1/datafile'
);
@@ -254,6 +228,6 @@ describe('ISIS Datasets - Card View', () => {
(useDatasetCount as jest.Mock).mockReturnValueOnce({});
(useDatasetsPaginated as jest.Mock).mockReturnValueOnce({});
- expect(() => createWrapper()).not.toThrowError();
+ expect(() => renderComponent()).not.toThrowError();
});
});
diff --git a/packages/datagateway-dataview/src/views/card/isis/isisDatasetsCardView.component.tsx b/packages/datagateway-dataview/src/views/card/isis/isisDatasetsCardView.component.tsx
index 73497a252..06af2f94a 100644
--- a/packages/datagateway-dataview/src/views/card/isis/isisDatasetsCardView.component.tsx
+++ b/packages/datagateway-dataview/src/views/card/isis/isisDatasetsCardView.component.tsx
@@ -177,6 +177,7 @@ const ISISDatasetsCardView = (
return (
{
const originalModule = jest.requireActual('datagateway-common');
@@ -39,11 +39,11 @@ describe('ISIS Facility Cycles - Card View', () => {
let cardData: FacilityCycle[];
let history: History;
let replaceSpy: jest.SpyInstance;
+ let user: UserEvent;
- const createWrapper = (): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (): RenderResult =>
+ render(
+
);
- };
beforeEach(() => {
+ user = userEvent.setup();
mockStore = configureStore([thunk]);
state = JSON.parse(
JSON.stringify({
@@ -88,29 +88,20 @@ describe('ISIS Facility Cycles - Card View', () => {
jest.clearAllMocks();
});
- it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('CardView').props()).toMatchSnapshot();
- });
+ it('updates filter query params on text filter', async () => {
+ renderComponent();
- it('calls the correct data fetching hooks on load', () => {
- const instrumentId = '1';
- createWrapper();
- expect(useFacilityCycleCount).toHaveBeenCalledWith(parseInt(instrumentId));
- expect(useFacilityCyclesPaginated).toHaveBeenCalledWith(
- parseInt(instrumentId)
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
);
- });
- it('updates filter query params on text filter', () => {
- const wrapper = createWrapper();
+ const filter = await screen.findByRole('textbox', {
+ name: 'Filter by facilitycycles.name',
+ hidden: true,
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').last().simulate('click');
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: 'test' } });
+ await user.type(filter, 'test');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
@@ -118,34 +109,32 @@ describe('ISIS Facility Cycles - Card View', () => {
)}`
);
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
});
- it('updates filter query params on date filter', () => {
+ it('updates filter query params on date filter', async () => {
applyDatePickerWorkaround();
- const wrapper = createWrapper();
+ renderComponent();
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').first().simulate('click');
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '2019-08-06' } });
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'facilitycycles.end_date filter to',
+ });
+
+ await user.type(filter, '2019-08-06');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent('{"endDate":{"endDate":"2019-08-06"}}')}`
);
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
@@ -153,21 +142,19 @@ describe('ISIS Facility Cycles - Card View', () => {
});
it('uses default sort', () => {
- const wrapper = createWrapper();
- wrapper.update();
-
+ renderComponent();
expect(history.length).toBe(1);
expect(replaceSpy).toHaveBeenCalledWith({
search: `?sort=${encodeURIComponent('{"startDate":"desc"}')}`,
});
});
- it('updates sort query params on sort', () => {
- const wrapper = createWrapper();
+ it('updates sort query params on sort', async () => {
+ renderComponent();
- const button = wrapper.find(ListItemText).first();
- expect(button.text()).toEqual('facilitycycles.name');
- button.find('div').simulate('click');
+ await user.click(
+ await screen.findByRole('button', { name: 'Sort by FACILITYCYCLES.NAME' })
+ );
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"name":"asc"}')}`
@@ -178,6 +165,6 @@ describe('ISIS Facility Cycles - Card View', () => {
(useFacilityCycleCount as jest.Mock).mockReturnValueOnce({});
(useFacilityCyclesPaginated as jest.Mock).mockReturnValueOnce({});
- expect(() => createWrapper()).not.toThrowError();
+ expect(() => renderComponent()).not.toThrowError();
});
});
diff --git a/packages/datagateway-dataview/src/views/card/isis/isisFacilityCyclesCardView.component.tsx b/packages/datagateway-dataview/src/views/card/isis/isisFacilityCyclesCardView.component.tsx
index 9cfc05aca..1d70648e6 100644
--- a/packages/datagateway-dataview/src/views/card/isis/isisFacilityCyclesCardView.component.tsx
+++ b/packages/datagateway-dataview/src/views/card/isis/isisFacilityCyclesCardView.component.tsx
@@ -92,6 +92,7 @@ const ISISFacilityCyclesCardView = (
return (
{
const originalModule = jest.requireActual('datagateway-common');
@@ -35,11 +34,11 @@ describe('ISIS Instruments - Card View', () => {
let state: StateType;
let cardData: Instrument[];
let history: History;
+ let user: UserEvent;
- const createWrapper = (): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (): RenderResult =>
+ render(
+
);
- };
beforeEach(() => {
+ user = userEvent.setup();
cardData = [
{
id: 1,
@@ -83,28 +82,17 @@ describe('ISIS Instruments - Card View', () => {
jest.clearAllMocks();
});
- it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('CardView').props()).toMatchSnapshot();
- });
-
- it('calls the correct data fetching hooks on load', () => {
- createWrapper();
- expect(useInstrumentCount).toHaveBeenCalled();
- expect(useInstrumentsPaginated).toHaveBeenCalled();
- });
-
- it('correct link used when NOT in studyHierarchy', () => {
- const wrapper = createWrapper();
- expect(
- wrapper.find('[aria-label="card-title"]').last().childAt(0).prop('to')
- ).toEqual('/browse/instrument/1/facilityCycle');
+ it('correct link used when NOT in studyHierarchy', async () => {
+ renderComponent();
+ expect(await screen.findByRole('link', { name: 'Test 1' })).toHaveAttribute(
+ 'href',
+ '/browse/instrument/1/facilityCycle'
+ );
});
- it('correct link used for studyHierarchy', () => {
- const store = mockStore(state);
- const wrapper = mount(
-
+ it('correct link used for studyHierarchy', async () => {
+ render(
+
);
- expect(
- wrapper.find('[aria-label="card-title"]').last().childAt(0).prop('to')
- ).toEqual('/browseStudyHierarchy/instrument/1/study');
+ expect(await screen.findByRole('link', { name: 'Test 1' })).toHaveAttribute(
+ 'href',
+ '/browseStudyHierarchy/instrument/1/study'
+ );
});
- it('updates filter query params on text filter', () => {
- const wrapper = createWrapper();
+ it('updates filter query params on text filter', async () => {
+ renderComponent();
+
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'Filter by instruments.name',
+ hidden: true,
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').simulate('click');
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: 'test' } });
+ await user.type(filter, 'test');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
@@ -133,51 +127,41 @@ describe('ISIS Instruments - Card View', () => {
)}`
);
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
});
it('uses default sort', () => {
- const wrapper = createWrapper();
- wrapper.update();
-
+ renderComponent();
expect(history.length).toBe(1);
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"fullName":"asc"}')}`
);
});
- it('updates sort query params on sort', () => {
- const wrapper = createWrapper();
+ it('updates sort query params on sort', async () => {
+ renderComponent();
- const button = wrapper.find(ListItemText).first();
- expect(button.text()).toEqual('instruments.name');
- button.find('div').simulate('click');
+ await user.click(
+ await screen.findByRole('button', { name: 'Sort by INSTRUMENTS.NAME' })
+ );
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"fullName":"desc"}')}`
);
});
- it('displays details panel when more information is expanded', () => {
- const wrapper = createWrapper();
- expect(wrapper.find(ISISInstrumentDetailsPanel).exists()).toBeFalsy();
- wrapper
- .find('[aria-label="card-more-info-expand"]')
- .last()
- .simulate('click');
-
- expect(wrapper.find(ISISInstrumentDetailsPanel).exists()).toBeTruthy();
+ it('displays details panel when more information is expanded', async () => {
+ renderComponent();
+ await user.click(await screen.findByLabelText('card-more-info-expand'));
+ expect(await screen.findByTestId('instrument-details-panel'));
});
it('renders fine with incomplete data', () => {
(useInstrumentCount as jest.Mock).mockReturnValueOnce({});
(useInstrumentsPaginated as jest.Mock).mockReturnValueOnce({});
- expect(() => createWrapper()).not.toThrowError();
+ expect(() => renderComponent()).not.toThrowError();
});
});
diff --git a/packages/datagateway-dataview/src/views/card/isis/isisInstrumentsCardView.component.tsx b/packages/datagateway-dataview/src/views/card/isis/isisInstrumentsCardView.component.tsx
index a55f82f72..c051d93f7 100644
--- a/packages/datagateway-dataview/src/views/card/isis/isisInstrumentsCardView.component.tsx
+++ b/packages/datagateway-dataview/src/views/card/isis/isisInstrumentsCardView.component.tsx
@@ -99,6 +99,7 @@ const ISISInstrumentsCardView = (
return (
{
- const originalModule = jest.requireActual('datagateway-common');
-
- return {
- __esModule: true,
- ...originalModule,
- useISISInvestigationCount: jest.fn(),
- useISISInvestigationsPaginated: jest.fn(),
- useInvestigationSizes: jest.fn(),
- };
-});
+import {
+ render,
+ type RenderResult,
+ screen,
+ within,
+} from '@testing-library/react';
+import type { UserEvent } from '@testing-library/user-event/setup/setup';
+import userEvent from '@testing-library/user-event';
+import axios, { type AxiosResponse } from 'axios';
describe('ISIS Investigations - Card View', () => {
let mockStore;
@@ -44,13 +30,19 @@ describe('ISIS Investigations - Card View', () => {
let cardData: Investigation[];
let history: History;
let replaceSpy: jest.SpyInstance;
+ let user: UserEvent;
- const createWrapper = (studyHierarchy = false): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (studyHierarchy = false): RenderResult =>
+ render(
+
-
+
{
);
- };
beforeEach(() => {
cardData = [
{
id: 1,
- title: 'Test 1',
+ title: 'Test title 1',
name: 'Test 1',
visitId: '1',
+ startDate: '2022-01-01',
+ endDate: '2022-01-03',
studyInvestigations: [
{ id: 1, study: { id: 1, pid: 'study pid' }, name: 'study 1' },
],
@@ -88,6 +81,7 @@ describe('ISIS Investigations - Card View', () => {
];
history = createMemoryHistory();
replaceSpy = jest.spyOn(history, 'replace');
+ user = userEvent.setup();
mockStore = configureStore([thunk]);
state = JSON.parse(
@@ -97,15 +91,46 @@ describe('ISIS Investigations - Card View', () => {
})
);
- (useISISInvestigationCount as jest.Mock).mockReturnValue({
- data: 1,
- isLoading: false,
- });
- (useISISInvestigationsPaginated as jest.Mock).mockReturnValue({
- data: cardData,
- isLoading: false,
- });
- (useInvestigationSizes as jest.Mock).mockReturnValue([{ data: 1 }]);
+ axios.get = jest
+ .fn()
+ .mockImplementation((url: string): Promise> => {
+ if (
+ /\/instruments\/1\/facilitycycles\/1\/investigations\/count$/.test(
+ url
+ )
+ ) {
+ // isis investigation count query
+ return Promise.resolve({
+ data: 1,
+ });
+ }
+
+ if (/\/investigations\/count$/.test(url)) {
+ // investigation count query
+ return Promise.resolve({
+ data: 1,
+ });
+ }
+
+ if (/\/investigations$/.test(url)) {
+ // investigations query
+ return Promise.resolve({
+ data: cardData,
+ });
+ }
+
+ if (/\/user\/getSize$/.test(url)) {
+ // investigation size query
+ return Promise.resolve({
+ data: 123,
+ });
+ }
+
+ return Promise.reject({
+ response: { status: 403 },
+ message: `Endpoint not mocked: ${url}`,
+ });
+ });
// Prevent error logging
window.scrollTo = jest.fn();
@@ -115,53 +140,123 @@ describe('ISIS Investigations - Card View', () => {
jest.clearAllMocks();
});
- it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('CardView').props()).toMatchSnapshot();
- });
+ it('renders investigations as cards', async () => {
+ renderComponent();
- it('calls required query, filter and sort functions on page load', () => {
- const instrumentId = '1';
- const instrumentChildId = '1';
- const studyHierarchy = false;
- createWrapper();
- expect(useISISInvestigationCount).toHaveBeenCalledWith(
- parseInt(instrumentId),
- parseInt(instrumentChildId),
- studyHierarchy
- );
- expect(useISISInvestigationsPaginated).toHaveBeenCalledWith(
- parseInt(instrumentId),
- parseInt(instrumentChildId),
- studyHierarchy
+ const allCards = await screen.findAllByTestId('card');
+ expect(allCards).toHaveLength(1);
+
+ const firstCard = within(allCards[0]);
+ expect(
+ firstCard.getByRole('link', { name: 'Test title 1' })
+ ).toBeInTheDocument();
+ expect(firstCard.getByText('investigations.name:')).toBeInTheDocument();
+ expect(firstCard.getByText('Test 1')).toBeInTheDocument();
+ expect(firstCard.getByText('investigations.doi:')).toBeInTheDocument();
+ expect(firstCard.getByRole('link', { name: 'study pid' })).toHaveAttribute(
+ 'href',
+ 'https://doi.org/study pid'
);
- expect(useInvestigationSizes).toHaveBeenCalledWith(cardData);
+ expect(
+ firstCard.getByText('investigations.details.size:')
+ ).toBeInTheDocument();
+ expect(firstCard.getByText('123 B')).toBeInTheDocument();
+ expect(
+ firstCard.getByText('investigations.principal_investigators:')
+ ).toBeInTheDocument();
+ expect(firstCard.getByText('Test PI')).toBeInTheDocument();
+ expect(
+ firstCard.getByText('investigations.details.start_date:')
+ ).toBeInTheDocument();
+ expect(firstCard.getByText('2022-01-01')).toBeInTheDocument();
+ expect(
+ firstCard.getByText('investigations.details.end_date:')
+ ).toBeInTheDocument();
+ expect(firstCard.getByText('2022-01-03')).toBeInTheDocument();
});
- it('correct link used when NOT in studyHierarchy', () => {
- const wrapper = createWrapper();
- expect(
- wrapper.find('[aria-label="card-title"]').last().childAt(0).prop('to')
- ).toEqual('/browse/instrument/1/facilityCycle/1/investigation/1');
+ it('renders no card if no investigation is returned', async () => {
+ axios.get = jest
+ .fn()
+ .mockImplementation((url: string): Promise> => {
+ if (
+ /\/instruments\/1\/facilitycycles\/1\/investigations\/count$/.test(
+ url
+ )
+ ) {
+ // isis investigation count query
+ return Promise.resolve({
+ data: 0,
+ });
+ }
+
+ if (/\/investigations\/count$/.test(url)) {
+ // investigation count query
+ return Promise.resolve({
+ data: 0,
+ });
+ }
+
+ if (/\/investigations$/.test(url)) {
+ // investigations query
+ return Promise.resolve({
+ data: [],
+ });
+ }
+
+ if (/\/user\/getSize$/.test(url)) {
+ // investigation size query
+ return Promise.resolve({
+ data: 123,
+ });
+ }
+
+ return Promise.reject({
+ response: { status: 403 },
+ message: `Endpoint not mocked: ${url}`,
+ });
+ });
+
+ renderComponent();
+ await flushPromises();
+
+ expect(screen.queryAllByTestId('card')).toHaveLength(0);
});
- it('correct link used for studyHierarchy', () => {
- const wrapper = createWrapper(true);
+ it('correct link used when NOT in studyHierarchy', async () => {
+ renderComponent();
+ expect(
+ await screen.findByRole('link', { name: 'Test title 1' })
+ ).toHaveAttribute(
+ 'href',
+ '/browse/instrument/1/facilityCycle/1/investigation/1'
+ );
+ });
+ it('correct link used for studyHierarchy', async () => {
+ renderComponent(true);
expect(
- wrapper.find('[aria-label="card-title"]').last().childAt(0).prop('to')
- ).toEqual('/browseStudyHierarchy/instrument/1/study/1/investigation/1');
+ await screen.findByRole('link', { name: 'Test title 1' })
+ ).toHaveAttribute(
+ 'href',
+ '/browseStudyHierarchy/instrument/1/study/1/investigation/1'
+ );
});
- it('updates filter query params on text filter', () => {
- const wrapper = createWrapper();
+ it('updates filter query params on text filter', async () => {
+ renderComponent();
+
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'Filter by investigations.title',
+ hidden: true,
+ });
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').last().simulate('click');
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: 'test' } });
+ await user.type(filter, 'test');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
@@ -169,121 +264,93 @@ describe('ISIS Investigations - Card View', () => {
)}`
);
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
});
- it('updates filter query params on date filter', () => {
+ it('updates filter query params on date filter', async () => {
applyDatePickerWorkaround();
- const wrapper = createWrapper();
+ renderComponent();
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').first().simulate('click');
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '2019-08-06' } });
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'investigations.details.end_date filter to',
+ });
+
+ await user.type(filter, '2019-08-06');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent('{"endDate":{"endDate":"2019-08-06"}}')}`
);
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
expect(history.location.search).toBe('?');
cleanupDatePickerWorkaround();
});
- it('displays DOI and renders the expected Link ', () => {
- const wrapper = createWrapper();
- expect(
- wrapper
- .find('[data-testid="isis-investigations-card-doi-link"]')
- .first()
- .text()
- ).toEqual('study pid');
-
+ it('displays DOI and renders the expected Link ', async () => {
+ renderComponent();
expect(
- wrapper
- .find('[data-testid="isis-investigations-card-doi-link"]')
- .first()
- .prop('href')
- ).toEqual('https://doi.org/study pid');
+ await screen.findByRole('link', { name: 'study pid' })
+ ).toHaveAttribute('href', 'https://doi.org/study pid');
});
- it('displays the correct user as the PI ', () => {
- const wrapper = createWrapper();
-
- expect(
- wrapper
- .find(
- '[data-testid="card-info-data-investigations.principal_investigators"]'
- )
- .text()
- ).toEqual('Test PI');
+ it('displays the correct user as the PI ', async () => {
+ renderComponent();
+ expect(await screen.findByText('Test PI')).toBeInTheDocument();
});
it('uses default sort', () => {
- const wrapper = createWrapper();
- wrapper.update();
-
+ renderComponent();
expect(history.length).toBe(1);
expect(replaceSpy).toHaveBeenCalledWith({
search: `?sort=${encodeURIComponent('{"startDate":"desc"}')}`,
});
});
- it('updates sort query params on sort', () => {
- const wrapper = createWrapper();
-
- const button = wrapper.find(ListItemText).first();
- expect(button.text()).toEqual('investigations.title');
- button.find('div').simulate('click');
-
+ it('updates sort query params on sort', async () => {
+ renderComponent();
+ await user.click(
+ await screen.findByRole('button', {
+ name: 'Sort by INVESTIGATIONS.TITLE',
+ })
+ );
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"title":"asc"}')}`
);
});
- it('renders buttons correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find(AddToCartButton).exists()).toBeTruthy();
- expect(wrapper.find(AddToCartButton).text()).toEqual('buttons.add_to_cart');
-
- expect(wrapper.find(DownloadButton).exists()).toBeTruthy();
- expect(wrapper.find(DownloadButton).text()).toEqual('buttons.download');
+ it('renders buttons correctly', async () => {
+ renderComponent();
+ expect(
+ await screen.findByRole('button', { name: 'buttons.add_to_cart' })
+ ).toBeInTheDocument();
+ expect(
+ await screen.findByRole('button', { name: 'buttons.download' })
+ ).toBeInTheDocument();
});
- it('displays details panel when more information is expanded and navigates to datasets view when tab clicked', () => {
- const wrapper = createWrapper();
- expect(wrapper.find(ISISInvestigationDetailsPanel).exists()).toBeFalsy();
- wrapper
- .find('[aria-label="card-more-info-expand"]')
- .last()
- .simulate('click');
-
- expect(wrapper.find(ISISInvestigationDetailsPanel).exists()).toBeTruthy();
-
- wrapper.find('#investigation-datasets-tab').last().simulate('click');
+ it('displays details panel when more information is expanded and navigates to datasets view when tab clicked', async () => {
+ renderComponent();
+ await user.click(await screen.findByLabelText('card-more-info-expand'));
+ expect(
+ await screen.findByTestId('isis-investigation-details-panel')
+ ).toBeTruthy();
+ await user.click(
+ await screen.findByRole('tab', {
+ name: 'investigations.details.datasets',
+ })
+ );
expect(history.location.pathname).toBe(
'/browse/instrument/1/facilityCycle/1/investigation/1/dataset'
);
});
-
- it('renders fine with incomplete data', () => {
- (useISISInvestigationCount as jest.Mock).mockReturnValueOnce({});
- (useISISInvestigationsPaginated as jest.Mock).mockReturnValueOnce({});
- (useInvestigationSizes as jest.Mock).mockReturnValueOnce([{ data: 0 }]);
-
- expect(() => createWrapper()).not.toThrowError();
- });
});
diff --git a/packages/datagateway-dataview/src/views/card/isis/isisInvestigationsCardView.component.tsx b/packages/datagateway-dataview/src/views/card/isis/isisInvestigationsCardView.component.tsx
index 086536de7..76d29ff7a 100644
--- a/packages/datagateway-dataview/src/views/card/isis/isisInvestigationsCardView.component.tsx
+++ b/packages/datagateway-dataview/src/views/card/isis/isisInvestigationsCardView.component.tsx
@@ -224,6 +224,7 @@ const ISISInvestigationsCardView = (
return (
{
- const originalModule = jest.requireActual('datagateway-common');
-
- return {
- __esModule: true,
- ...originalModule,
- useStudyCount: jest.fn(),
- useStudiesPaginated: jest.fn(),
- };
-});
+import {
+ render,
+ type RenderResult,
+ screen,
+ within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import axios, { AxiosResponse } from 'axios';
describe('ISIS Studies - Card View', () => {
let mockStore;
@@ -44,10 +28,9 @@ describe('ISIS Studies - Card View', () => {
let cardData: Study[];
let history: History;
- const createWrapper = (): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (): RenderResult =>
+ render(
+
);
- };
beforeEach(() => {
cardData = [
@@ -73,6 +55,8 @@ describe('ISIS Studies - Card View', () => {
title: 'investigation title',
name: 'investigation name',
visitId: 'IPim0',
+ startDate: '1999-01-01',
+ endDate: '1999-01-02',
},
},
],
@@ -88,14 +72,21 @@ describe('ISIS Studies - Card View', () => {
})
);
- (useStudyCount as jest.Mock).mockReturnValue({
- data: 1,
- isLoading: false,
- });
- (useStudiesPaginated as jest.Mock).mockReturnValue({
- data: cardData,
- isLoading: false,
- });
+ axios.get = jest
+ .fn()
+ .mockImplementation((url: string): Promise> => {
+ switch (url) {
+ case '/studies':
+ return Promise.resolve({
+ data: cardData,
+ });
+
+ case '/studies/count':
+ return Promise.resolve({
+ data: 1,
+ });
+ }
+ });
// Prevent error logging
window.scrollTo = jest.fn();
@@ -105,78 +96,31 @@ describe('ISIS Studies - Card View', () => {
jest.clearAllMocks();
});
- it('renders correctly', () => {
- const wrapper = createWrapper();
- expect(wrapper.find('CardView').props()).toMatchSnapshot();
- });
+ it('renders correctly', async () => {
+ renderComponent();
- it('calls the correct data fetching hooks on load', () => {
- const instrumentId = '1';
- createWrapper();
- expect(useStudyCount).toHaveBeenCalledWith([
- {
- filterType: 'where',
- filterValue: JSON.stringify({
- 'studyInvestigations.investigation.investigationInstruments.instrument.id':
- {
- eq: instrumentId,
- },
- }),
- },
- {
- filterType: 'where',
- filterValue: JSON.stringify({
- 'studyInvestigations.investigation.releaseDate': {
- lt: '2021-10-27 00:00:00',
- },
- }),
- },
- ]);
- expect(useStudiesPaginated).toHaveBeenCalledWith([
- {
- filterType: 'where',
- filterValue: JSON.stringify({
- 'studyInvestigations.investigation.investigationInstruments.instrument.id':
- {
- eq: instrumentId,
- },
- }),
- },
- {
- filterType: 'where',
- filterValue: JSON.stringify({
- 'studyInvestigations.investigation.releaseDate': {
- lt: '2021-10-27 00:00:00',
- },
- }),
- },
- {
- filterType: 'include',
- filterValue: JSON.stringify({
- studyInvestigations: 'investigation',
- }),
- },
- ]);
- });
+ const cards = await screen.findAllByTestId('card');
+ expect(cards).toHaveLength(1);
- it('displays Experiment DOI (PID) and renders the expected Link ', () => {
- const wrapper = createWrapper();
- expect(
- wrapper.find('[data-testid="landing-study-card-pid-link"]').first().text()
- ).toEqual('doi');
-
- expect(
- wrapper
- .find('[data-testid="landing-study-card-pid-link"]')
- .first()
- .prop('href')
- ).toEqual('https://doi.org/doi');
+ const card = cards[0];
+ // card title should be rendered as link to study
+ expect(within(card).getByRole('link', { name: 'Test 1' })).toHaveAttribute(
+ 'href',
+ '/browseStudyHierarchy/instrument/1/study/1'
+ );
+ expect(within(card).getByLabelText('card-description')).toHaveTextContent(
+ 'investigation title'
+ );
+ expect(within(card).getByRole('link', { name: 'doi' })).toHaveAttribute(
+ 'href',
+ 'https://doi.org/doi'
+ );
+ expect(within(card).getByText('1999-01-01')).toBeInTheDocument();
+ expect(within(card).getByText('1999-01-02')).toBeInTheDocument();
});
it('uses default sort', () => {
- const wrapper = createWrapper();
- wrapper.update();
-
+ renderComponent();
expect(history.length).toBe(1);
expect(history.location.search).toBe(
`?sort=${encodeURIComponent(
@@ -185,71 +129,84 @@ describe('ISIS Studies - Card View', () => {
);
});
- it('updates filter query params on text filter', () => {
- const wrapper = createWrapper();
+ it('updates filter query params on text filter', async () => {
+ jest.useFakeTimers();
+ const user = userEvent.setup({
+ advanceTimers: jest.advanceTimersByTime,
+ });
+
+ renderComponent();
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').last().simulate('click');
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: 'test' } });
+ // click on button to show advanced filters
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filter = await screen.findByRole('textbox', {
+ name: 'Filter by studies.name',
+ hidden: true,
+ });
+
+ await user.type(filter, 'tes');
+ jest.runAllTimers();
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
- '{"name":{"value":"test","type":"include"}}'
+ '{"name":{"value":"tes","type":"include"}}'
)}`
);
- advancedFilter
- .find('input')
- .first()
- .simulate('change', { target: { value: '' } });
+ await user.clear(filter);
+ jest.runAllTimers();
expect(history.location.search).toBe('?');
+
+ jest.useRealTimers();
});
- it('updates filter query params on date filter', () => {
+ it('updates filter query params on date filter', async () => {
+ const user = userEvent.setup();
applyDatePickerWorkaround();
- const wrapper = createWrapper();
+ renderComponent();
- const advancedFilter = wrapper.find(AdvancedFilter);
- advancedFilter.find('button').first().simulate('click');
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '2019-08-06' } });
+ // open advanced filter
+ await user.click(
+ await screen.findByRole('button', { name: 'advanced_filters.show' })
+ );
+
+ const filterInput = screen.getByRole('textbox', {
+ name: 'studies.end_date filter to',
+ });
+ await user.type(filterInput, '2019-08-06');
expect(history.location.search).toBe(
`?filters=${encodeURIComponent(
'{"studyInvestigations.investigation.endDate":{"endDate":"2019-08-06"}}'
)}`
);
- advancedFilter
- .find('input')
- .last()
- .simulate('change', { target: { value: '' } });
-
+ await user.clear(filterInput);
expect(history.location.search).toBe('?');
cleanupDatePickerWorkaround();
});
- it('updates sort query params on sort', () => {
- const wrapper = createWrapper();
+ it('updates sort query params on sort', async () => {
+ const user = userEvent.setup();
- const button = wrapper.find(ListItemText).first();
- expect(button.text()).toEqual('studies.name');
- button.find('div').simulate('click');
+ renderComponent();
+
+ await user.click(
+ await screen.findByRole('button', { name: 'Sort by STUDIES.NAME' })
+ );
expect(history.location.search).toBe(
`?sort=${encodeURIComponent('{"name":"asc"}')}`
);
});
- it('displays information from investigation when investigation present', () => {
+ it('displays information from investigation when investigation present', async () => {
cardData = [
{
...cardData[0],
@@ -271,40 +228,13 @@ describe('ISIS Studies - Card View', () => {
],
},
];
- (useStudiesPaginated as jest.Mock).mockReturnValue({
- data: cardData,
- });
-
- const wrapper = createWrapper();
-
- expect(
- wrapper.find('[aria-label="card-description"]').last().text()
- ).toEqual('Test investigation');
- });
-
- it('renders fine with incomplete data', () => {
- (useStudyCount as jest.Mock).mockReturnValueOnce({});
- (useStudiesPaginated as jest.Mock).mockReturnValueOnce({});
- expect(() => createWrapper()).not.toThrowError();
+ renderComponent();
- cardData = [
- {
- ...cardData[0],
- studyInvestigations: [
- {
- id: 2,
- study: {
- ...cardData[0],
- },
- },
- ],
- },
- ];
- (useStudiesPaginated as jest.Mock).mockReturnValue({
- data: cardData,
- });
+ const card = (await screen.findAllByTestId('card'))[0];
- expect(() => createWrapper()).not.toThrowError();
+ expect(within(card).getByLabelText('card-description')).toHaveTextContent(
+ 'Test investigation'
+ );
});
});
diff --git a/packages/datagateway-dataview/src/views/card/isis/isisStudiesCardView.component.tsx b/packages/datagateway-dataview/src/views/card/isis/isisStudiesCardView.component.tsx
index c28133219..53229497f 100644
--- a/packages/datagateway-dataview/src/views/card/isis/isisStudiesCardView.component.tsx
+++ b/packages/datagateway-dataview/src/views/card/isis/isisStudiesCardView.component.tsx
@@ -191,6 +191,7 @@ const ISISStudiesCardView = (props: ISISStudiesCVProps): React.ReactElement => {
return (
{
let queryClient;
+ let user: UserEvent;
const props = {
doi: 'test',
@@ -18,15 +25,15 @@ describe('Citation formatter component tests', () => {
startDate: '2019-04-03',
};
- const createWrapper = (props): ReactWrapper => {
- return mount(
+ const renderComponent = (componentProps): RenderResult =>
+ render(
-
);
- };
beforeEach(() => {
+ user = userEvent.setup();
queryClient = new QueryClient({
defaultOptions: {
queries: {
@@ -41,130 +48,77 @@ describe('Citation formatter component tests', () => {
});
it('renders correctly', async () => {
- const wrapper = createWrapper(props);
- await act(async () => flushPromises());
- wrapper.update();
+ renderComponent(props);
expect(
- wrapper.find('[data-testid="citation-formatter-title"]').first().text()
- ).toEqual('studies.details.citation_formatter.label');
- expect(
- wrapper.find('[data-testid="citation-formatter-details"]').first().text()
- ).toEqual(
- 'studies.details.citation_formatter.details studies.details.citation_formatter.details_select_format'
- );
+ await screen.findByText('studies.details.citation_formatter.label')
+ ).toBeInTheDocument();
expect(
- wrapper
- .find(
- '[aria-label="studies.details.citation_formatter.select_arialabel"]'
- )
- .first()
- .prop('defaultValue')
- ).toEqual('default');
+ await screen.findByText(
+ 'studies.details.citation_formatter.details studies.details.citation_formatter.details_select_format'
+ )
+ ).toBeInTheDocument();
expect(
- wrapper
- .find(
- '[aria-label="studies.details.citation_formatter.select_arialabel"]'
- )
- .first()
- .text()
- ).toEqual('studies.details.citation_formatter.default_format');
+ await screen.findByText(
+ 'studies.details.citation_formatter.default_format'
+ )
+ ).toBeInTheDocument();
expect(
- wrapper.find('[data-testid="citation-formatter-citation"]').first().text()
- ).toEqual(
- 'John Smith; 2019: title, doi_constants.publisher.name, https://doi.org/test'
- );
+ await screen.findByText(
+ 'John Smith; 2019: title, doi_constants.publisher.name, https://doi.org/test'
+ )
+ ).toBeInTheDocument();
expect(
- wrapper.find('#citation-formatter-copy-citation').first().prop('disabled')
- ).toEqual(false);
+ await screen.findByRole('button', {
+ name: 'studies.details.citation_formatter.copy_citation_arialabel',
+ })
+ ).toBeEnabled();
});
it('renders correctly without a doi', async () => {
const newProps = { ...props, doi: undefined };
- const wrapper = createWrapper(newProps);
- await act(async () => flushPromises());
- wrapper.update();
+ renderComponent(newProps);
expect(
- wrapper.find('[data-testid="citation-formatter-title"]').first().text()
- ).toEqual('studies.details.citation_formatter.label');
+ await screen.findByText('studies.details.citation_formatter.label')
+ ).toBeInTheDocument();
expect(
- wrapper.find('[data-testid="citation-formatter-details"]').first().text()
- ).toEqual('studies.details.citation_formatter.details');
+ await screen.findByText('studies.details.citation_formatter.details')
+ ).toBeInTheDocument();
expect(
- wrapper
- .find(
- '[aria-label="studies.details.citation_formatter.select_arialabel"]'
- )
- .exists()
- ).toEqual(false);
+ screen.queryByLabelText(
+ 'studies.details.citation_formatter.select_arialabel'
+ )
+ ).toBeNull();
expect(
- wrapper.find('[data-testid="citation-formatter-citation"]').first().text()
- ).toEqual('John Smith; 2019: title, doi_constants.publisher.name');
+ await screen.findByText(
+ 'John Smith; 2019: title, doi_constants.publisher.name'
+ )
+ ).toBeInTheDocument();
expect(
- wrapper.find('#citation-formatter-copy-citation').first().prop('disabled')
- ).toEqual(false);
- });
-
- it('formats citation on load', async () => {
- const wrapper = createWrapper(props);
- await act(async () => flushPromises());
- wrapper.update();
-
- expect(
- wrapper
- .find(
- '[aria-label="studies.details.citation_formatter.select_arialabel"]'
- )
- .first()
- .prop('defaultValue')
- ).toEqual('default');
-
- expect(
- wrapper.find('[data-testid="citation-formatter-citation"]').first().text()
- ).toEqual(
- 'John Smith; 2019: title, doi_constants.publisher.name, https://doi.org/test'
- );
- expect(
- wrapper.find('#citation-formatter-copy-citation').first().prop('disabled')
- ).toEqual(false);
- });
-
- it('formats citation on load without a doi', async () => {
- const newProps = { ...props, doi: undefined };
- const wrapper = createWrapper(newProps);
- await act(async () => flushPromises());
- wrapper.update();
-
- expect(
- wrapper
- .find(
- '[aria-label="studies.details.citation_formatter.select_arialabel"]'
- )
- .exists()
- ).toBeFalsy();
-
- expect(
- wrapper.find('[data-testid="citation-formatter-citation"]').first().text()
- ).toEqual('John Smith; 2019: title, doi_constants.publisher.name');
- expect(
- wrapper.find('#citation-formatter-copy-citation').first().prop('disabled')
- ).toEqual(false);
+ await screen.findByRole('button', {
+ name: 'studies.details.citation_formatter.copy_citation_arialabel',
+ })
+ ).toBeEnabled();
});
it('sends axios request to fetch a formatted citation when a format is selected', async () => {
- const wrapper = createWrapper(props);
-
(axios.get as jest.Mock).mockResolvedValue({
data: 'This is a test',
});
- wrapper
- .find('input')
- .first()
- .simulate('change', { target: { value: 'format2' } });
- await act(async () => flushPromises());
- wrapper.update();
+ renderComponent(props);
+
+ // click on the format dropdown
+ await user.click(
+ within(
+ await screen.findByLabelText(
+ 'studies.details.citation_formatter.select_arialabel'
+ )
+ ).getByRole('button')
+ );
+ // then select the format2 option
+ await user.click(await screen.findByRole('option', { name: 'format2' }));
const params = new URLSearchParams({
style: 'format2',
@@ -181,42 +135,40 @@ describe('Citation formatter component tests', () => {
params.toString()
);
+ expect(await screen.findByText('This is a test')).toBeInTheDocument();
expect(
- wrapper.find('[data-testid="citation-formatter-citation"]').first().text()
- ).toEqual('This is a test');
- expect(
- wrapper.find('#citation-formatter-copy-citation').first().prop('disabled')
- ).toEqual(false);
+ await screen.findByRole('button', {
+ name: 'studies.details.citation_formatter.copy_citation_arialabel',
+ })
+ ).toBeEnabled();
});
it('copies data citation to clipboard', async () => {
- const wrapper = createWrapper(props);
- await act(async () => flushPromises());
- wrapper.update();
+ renderComponent(props);
// Mock the clipboard object
- const testWriteText = jest.fn();
- Object.assign(navigator, {
- clipboard: {
- writeText: testWriteText,
- },
- });
+ const testWriteText = jest.spyOn(navigator.clipboard, 'writeText');
expect(
- wrapper.find('[data-testid="citation-formatter-citation"]').first().text()
- ).toEqual(
- 'John Smith; 2019: title, doi_constants.publisher.name, https://doi.org/test'
- );
+ await screen.findByText(
+ 'John Smith; 2019: title, doi_constants.publisher.name, https://doi.org/test'
+ )
+ ).toBeInTheDocument();
- wrapper.find('#citation-formatter-copy-citation').last().simulate('click');
+ await user.click(
+ await screen.findByRole('button', {
+ name: 'studies.details.citation_formatter.copy_citation_arialabel',
+ })
+ );
expect(testWriteText).toHaveBeenCalledWith(
'John Smith; 2019: title, doi_constants.publisher.name, https://doi.org/test'
);
-
expect(
- wrapper.find('#citation-formatter-copied-citation').first().text()
- ).toEqual('studies.details.citation_formatter.copied_citation');
+ await screen.findByRole('button', {
+ name: 'studies.details.citation_formatter.copied_citation',
+ })
+ ).toBeInTheDocument();
});
it('displays error message when axios request to fetch a formatted citation fails', async () => {
@@ -226,13 +178,18 @@ describe('Citation formatter component tests', () => {
message: 'error',
});
- const wrapper = createWrapper(props);
- wrapper
- .find('input')
- .first()
- .simulate('change', { target: { value: 'format2' } });
- await act(async () => flushPromises());
- wrapper.update();
+ renderComponent(props);
+
+ // click on the format dropdown
+ await user.click(
+ within(
+ await screen.findByLabelText(
+ 'studies.details.citation_formatter.select_arialabel'
+ )
+ ).getByRole('button')
+ );
+ // then select the format2 option
+ await user.click(await screen.findByRole('option', { name: 'format2' }));
const params = new URLSearchParams({
style: 'format2',
@@ -250,35 +207,41 @@ describe('Citation formatter component tests', () => {
);
expect(
- wrapper.find('#citation-formatter-error-message').first().text()
- ).toEqual('studies.details.citation_formatter.error');
-
+ await screen.findByText('studies.details.citation_formatter.error')
+ ).toBeInTheDocument();
expect(
- wrapper.find('#citation-formatter-copy-citation').first().prop('disabled')
- ).toEqual(true);
+ await screen.findByRole('button', {
+ name: 'studies.details.citation_formatter.copy_citation_arialabel',
+ })
+ ).toBeDisabled();
});
it('displays loading spinner while waiting for a response from DataCite', async () => {
- (axios.get as jest.Mock).mockRejectedValueOnce({
- message: 'error',
- });
+ let reject: () => void;
+ (axios.get as jest.Mock).mockReturnValueOnce(
+ new Promise((_, _reject) => {
+ reject = _reject;
+ })
+ );
- const wrapper = createWrapper(props);
- wrapper
- .find('input')
- .first()
- .simulate('change', { target: { value: 'format2' } });
- wrapper.update();
+ renderComponent(props);
- expect(
- wrapper.find('[data-testid="loading-spinner"]').exists()
- ).toBeTruthy();
+ // click on the format dropdown
+ await user.click(
+ within(
+ await screen.findByLabelText(
+ 'studies.details.citation_formatter.select_arialabel'
+ )
+ ).getByRole('button')
+ );
+ // then select the format2 option
+ await user.click(await screen.findByRole('option', { name: 'format2' }));
- await act(async () => flushPromises());
- wrapper.update();
+ expect(await screen.findByRole('progressbar')).toBeInTheDocument();
- expect(
- wrapper.find('[data-testid="loading-spinner"]').exists()
- ).toBeFalsy();
+ reject();
+ await waitFor(() => {
+ expect(screen.queryByRole('progressbar')).toBeNull();
+ });
});
});
diff --git a/packages/datagateway-dataview/src/views/landing/isis/__snapshots__/isisStudyLanding.component.test.tsx.snap b/packages/datagateway-dataview/src/views/landing/isis/__snapshots__/isisStudyLanding.component.test.tsx.snap
deleted file mode 100644
index 7d5129da4..000000000
--- a/packages/datagateway-dataview/src/views/landing/isis/__snapshots__/isisStudyLanding.component.test.tsx.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ISIS Study Landing page renders structured data correctly 1`] = `
-
-
-
-`;
diff --git a/packages/datagateway-dataview/src/views/landing/isis/isisBranding.component.tsx b/packages/datagateway-dataview/src/views/landing/isis/isisBranding.component.tsx
index 7905fb5e1..f37705cca 100644
--- a/packages/datagateway-dataview/src/views/landing/isis/isisBranding.component.tsx
+++ b/packages/datagateway-dataview/src/views/landing/isis/isisBranding.component.tsx
@@ -42,7 +42,7 @@ const Branding = (props: { pluginHost: string }): React.ReactElement => {
diff --git a/packages/datagateway-dataview/src/views/landing/isis/isisDatasetLanding.component.test.tsx b/packages/datagateway-dataview/src/views/landing/isis/isisDatasetLanding.component.test.tsx
index 6883f3839..7f325d9fc 100644
--- a/packages/datagateway-dataview/src/views/landing/isis/isisDatasetLanding.component.test.tsx
+++ b/packages/datagateway-dataview/src/views/landing/isis/isisDatasetLanding.component.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
import ISISDatasetLanding from './isisDatasetLanding.component';
import { initialState as dgDataViewInitialState } from '../../../state/reducers/dgdataview.reducer';
import configureStore from 'redux-mock-store';
@@ -11,11 +11,12 @@ import {
} from 'datagateway-common';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
-import { Typography } from '@mui/material';
-import { mount, ReactWrapper } from 'enzyme';
import { createMemoryHistory, History } from 'history';
-import { QueryClientProvider, QueryClient } from 'react-query';
+import { QueryClient, QueryClientProvider } from 'react-query';
import { Router } from 'react-router-dom';
+import { render, type RenderResult, screen } from '@testing-library/react';
+import { UserEvent } from '@testing-library/user-event/setup/setup';
+import userEvent from '@testing-library/user-event';
jest.mock('datagateway-common', () => {
const originalModule = jest.requireActual('datagateway-common');
@@ -32,11 +33,11 @@ describe('ISIS Dataset Landing page', () => {
const mockStore = configureStore([thunk]);
let state: StateType;
let history: History;
+ let user: UserEvent;
- const createWrapper = (studyHierarchy = false): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (studyHierarchy = false): RenderResult =>
+ render(
+
{
);
- };
const initialData: Dataset = {
id: 87,
@@ -68,6 +68,7 @@ describe('ISIS Dataset Landing page', () => {
description: 'The first type',
},
};
+
beforeEach(() => {
state = JSON.parse(
JSON.stringify({
@@ -76,6 +77,7 @@ describe('ISIS Dataset Landing page', () => {
})
);
history = createMemoryHistory();
+ user = userEvent.setup();
(useDatasetDetails as jest.Mock).mockReturnValue({
data: initialData,
@@ -89,71 +91,83 @@ describe('ISIS Dataset Landing page', () => {
jest.clearAllMocks();
});
- it('calls the correct data fetching hooks', () => {
- createWrapper();
+ describe('links to the correct url in the datafiles tab', () => {
+ it('for facility cycle hierarchy and normal view', async () => {
+ renderComponent();
- expect(useDatasetDetails).toHaveBeenCalledWith(87);
- expect(useDatasetSizes).toHaveBeenCalledWith(initialData);
- });
+ await user.click(
+ await screen.findByRole('tab', { name: 'datasets.details.datafiles' })
+ );
+
+ expect(history.location.pathname).toBe(
+ '/browse/instrument/4/facilityCycle/5/investigation/1/dataset/87/datafile'
+ );
+ });
- it('links to the correct url in the datafiles tab for both hierarchies and both views', () => {
- const facilityCycleWrapper = createWrapper();
+ it('for facility cycle hierarchy and cards view', async () => {
+ history.replace('/?view=card');
+ renderComponent();
- facilityCycleWrapper
- .find('#dataset-datafiles-tab')
- .last()
- .simulate('click');
+ await user.click(
+ await screen.findByRole('tab', { name: 'datasets.details.datafiles' })
+ );
- expect(history.location.pathname).toBe(
- '/browse/instrument/4/facilityCycle/5/investigation/1/dataset/87/datafile'
- );
+ expect(history.location.pathname).toBe(
+ '/browse/instrument/4/facilityCycle/5/investigation/1/dataset/87/datafile'
+ );
+ expect(history.location.search).toBe('?view=card');
+ });
- history.replace('/?view=card');
- const studyWrapper = createWrapper(true);
+ it('for study hierarchy and normal view', async () => {
+ renderComponent(true);
- studyWrapper.find('#dataset-datafiles-tab').last().simulate('click');
+ await user.click(
+ await screen.findByRole('tab', { name: 'datasets.details.datafiles' })
+ );
- expect(history.location.pathname).toBe(
- '/browseStudyHierarchy/instrument/4/study/5/investigation/1/dataset/87/datafile'
- );
- expect(history.location.search).toBe('?view=card');
+ expect(history.location.pathname).toBe(
+ '/browseStudyHierarchy/instrument/4/study/5/investigation/1/dataset/87/datafile'
+ );
+ });
+
+ it('for study hierarchy and cards view', async () => {
+ history.replace('/?view=card');
+ renderComponent(true);
+
+ await user.click(
+ await screen.findByRole('tab', { name: 'datasets.details.datafiles' })
+ );
+
+ expect(history.location.pathname).toBe(
+ '/browseStudyHierarchy/instrument/4/study/5/investigation/1/dataset/87/datafile'
+ );
+ expect(history.location.search).toBe('?view=card');
+ });
});
- it('displays DOI and renders the expected Link ', () => {
- const wrapper = createWrapper();
-
- expect(
- wrapper
- .find('[data-testid="isis-dataset-landing-doi-link"]')
- .first()
- .text()
- ).toEqual('doi 1');
-
- expect(
- wrapper
- .find('[data-testid="isis-dataset-landing-doi-link"]')
- .first()
- .prop('href')
- ).toEqual('https://doi.org/doi 1');
+ it('displays DOI and renders the expected Link ', async () => {
+ renderComponent();
+ expect(await screen.findByRole('link', { name: 'doi 1' })).toHaveAttribute(
+ 'href',
+ 'https://doi.org/doi 1'
+ );
});
it('useDatasetSizes queries not sent if no data returned from useDatasetDetails', () => {
(useDatasetDetails as jest.Mock).mockReturnValue({
data: undefined,
});
- createWrapper();
+ renderComponent();
expect(useDatasetSizes).toHaveBeenCalledWith(undefined);
});
- it('incomplete datasets render correctly', () => {
+ it('incomplete datasets render correctly', async () => {
initialData.complete = false;
(useDatasetDetails as jest.Mock).mockReturnValue({
data: initialData,
});
- const wrapper = createWrapper();
+ renderComponent();
- expect(wrapper.find(Typography).last().text()).toEqual(
- 'datasets.incomplete'
- );
+ expect(await screen.findByText('datasets.incomplete')).toBeInTheDocument();
});
});
diff --git a/packages/datagateway-dataview/src/views/landing/isis/isisDatasetLanding.component.tsx b/packages/datagateway-dataview/src/views/landing/isis/isisDatasetLanding.component.tsx
index 0ac5af5b5..f8497c8c8 100644
--- a/packages/datagateway-dataview/src/views/landing/isis/isisDatasetLanding.component.tsx
+++ b/packages/datagateway-dataview/src/views/landing/isis/isisDatasetLanding.component.tsx
@@ -135,7 +135,7 @@ const LandingPage = (props: LandingPageProps): React.ReactElement => {
];
return (
-
+
+ const renderComponent = (studyHierarchy = false): RenderResult =>
+ render(
+
{
);
- };
const initialData = [
{
id: 1,
- title: 'Test 1',
+ title: 'Test title 1',
name: 'Test 1',
summary: 'foo bar',
- visitId: '1',
+ visitId: 'visit id 1',
doi: 'doi 1',
size: 1,
+ facility: {
+ name: 'LILS',
+ },
investigationInstruments: [
{
id: 1,
@@ -173,12 +180,14 @@ describe('ISIS Investigation Landing page', () => {
})
);
history = createMemoryHistory();
+ user = userEvent.setup();
(useInvestigation as jest.Mock).mockReturnValue({
data: initialData,
});
(useInvestigationSizes as jest.Mock).mockReturnValue([
{
+ isSuccess: true,
data: 1,
},
]);
@@ -188,239 +197,382 @@ describe('ISIS Investigation Landing page', () => {
jest.clearAllMocks();
});
- it('calls the correct data fetching hooks', () => {
- createWrapper();
+ it('renders landing for investigation correctly', () => {
+ renderComponent();
- expect(useInvestigation).toHaveBeenCalledWith(1, [
- {
- filterType: 'include',
- filterValue: JSON.stringify([
- {
- investigationUsers: 'user',
- },
- 'samples',
- 'publications',
- 'datasets',
- {
- studyInvestigations: 'study',
- },
- {
- investigationInstruments: 'instrument',
- },
- ]),
- },
- ]);
- expect(useInvestigationSizes).toHaveBeenCalledWith(initialData);
- });
+ // branding should be visible
+ expect(screen.getByRole('img', { name: 'STFC Logo' })).toBeInTheDocument();
+ expect(
+ screen.getByText('doi_constants.branding.title')
+ ).toBeInTheDocument();
+ expect(screen.getByText('doi_constants.branding.body')).toBeInTheDocument();
- it('links to the correct url in the datafiles tab for both hierarchies and both views', () => {
- const facilityCycleWrapper = createWrapper();
+ // investigation details should be visible
+ expect(screen.getByText('Test title 1')).toBeInTheDocument();
+ expect(screen.getByText('foo bar')).toBeInTheDocument();
- facilityCycleWrapper
- .find('#investigation-datasets-tab')
- .last()
- .simulate('click');
+ // publisher section should be visible
+ expect(screen.getByText('studies.details.publisher')).toBeInTheDocument();
+ expect(
+ screen.getByText('doi_constants.publisher.name')
+ ).toBeInTheDocument();
+
+ // investigation samples should be hidden (initial data does not have samples)
+ expect(
+ screen.queryByText('investigations.details.samples.label')
+ ).toBeNull();
+ expect(
+ screen.queryByText('investigations.details.samples.no_samples')
+ ).toBeNull();
+ expect(
+ screen.queryAllByLabelText(/landing-investigation-sample-\d+$/)
+ ).toHaveLength(0);
+
+ // publication section should be hidden (initial data does not have publications)
+ expect(
+ screen.queryByText('investigations.details.publications.label')
+ ).toBeNull();
+ expect(
+ screen.queryByText('investigations.details.publications.no_publications')
+ ).toBeNull();
+ expect(
+ screen.queryAllByLabelText(/landing-investigation-reference-\d+$/)
+ ).toHaveLength(0);
- expect(history.location.pathname).toBe(
- '/browse/instrument/4/facilityCycle/5/investigation/1/dataset'
+ // short format information should be visible
+ expect(screen.getByText('investigations.visit_id:')).toBeInTheDocument();
+ expect(screen.getByText('visit id 1')).toBeInTheDocument();
+ expect(screen.getByText('investigations.doi:')).toBeInTheDocument();
+ expect(screen.getByRole('link', { name: 'doi 1' })).toHaveAttribute(
+ 'href',
+ 'https://doi.org/doi 1'
+ );
+ expect(screen.getByText('investigations.parent_doi:')).toBeInTheDocument();
+ expect(screen.getByRole('link', { name: 'study pid' })).toHaveAttribute(
+ 'href',
+ 'https://doi.org/study pid'
+ );
+ expect(screen.getByText('investigations.name:')).toBeInTheDocument();
+ expect(screen.getByText('Test 1')).toBeInTheDocument();
+ expect(screen.getByText('investigations.size:')).toBeInTheDocument();
+ expect(screen.getByText('1 B')).toBeInTheDocument();
+ expect(
+ screen.getByText('investigations.details.facility:')
+ ).toBeInTheDocument();
+ expect(screen.getByText('LILS')).toBeInTheDocument();
+ expect(screen.getByText('investigations.instrument:')).toBeInTheDocument();
+ expect(screen.getByText('LARMOR')).toBeInTheDocument();
+ expect(screen.getByText('studies.details.format:')).toBeInTheDocument();
+ expect(
+ screen.getByRole('link', { name: 'doi_constants.distribution.format' })
+ ).toHaveAttribute(
+ 'href',
+ 'https://www.isis.stfc.ac.uk/Pages/ISIS-Raw-File-Format.aspx'
+ );
+ expect(screen.queryByText('investigations.release_date:')).toBeNull();
+ expect(screen.getByText('investigations.start_date:')).toBeInTheDocument();
+ expect(screen.getByText('2019-06-10')).toBeInTheDocument();
+ expect(screen.getByText('investigations.end_date:')).toBeInTheDocument();
+ expect(screen.getByText('2019-06-11')).toBeInTheDocument();
+
+ const actionButtonContainer = screen.getByTestId(
+ 'investigation-landing-action-container'
);
- history.replace('/?view=card');
- const studyWrapper = createWrapper(true);
+ // actions should be visible
+ expect(actionButtonContainer).toBeInTheDocument();
+ expect(
+ within(actionButtonContainer).getByRole('button', {
+ name: 'buttons.add_to_cart',
+ })
+ ).toBeInTheDocument();
+ });
- studyWrapper.find('#investigation-datasets-tab').last().simulate('click');
+ describe('renders datasets for the investigation correctly', () => {
+ it('for facility cycle hierarchy and normal view', () => {
+ renderComponent();
+
+ expect(
+ screen.getByRole('link', { name: 'datasets.dataset: dataset 1' })
+ ).toHaveAttribute(
+ 'href',
+ '/browse/instrument/4/facilityCycle/5/investigation/1/dataset/1'
+ );
+ expect(screen.getByText('datasets.doi:')).toBeInTheDocument();
+ expect(
+ screen.getByRole('link', { name: 'landing-study-doi-link' })
+ ).toHaveAttribute('href', 'https://doi.org/dataset doi');
+
+ // actions for datasets should be visible
+ const actionContainer = screen.getByTestId(
+ 'investigation-landing-dataset-0-action-container'
+ );
+ expect(actionContainer).toBeInTheDocument();
+ expect(
+ within(actionContainer).getByRole('button', {
+ name: 'buttons.add_to_cart',
+ })
+ ).toBeInTheDocument();
+ });
- expect(history.location.pathname).toBe(
- '/browseStudyHierarchy/instrument/4/study/5/investigation/1/dataset'
- );
- expect(history.location.search).toBe('?view=card');
+ it('for facility cycle hierarchy and card view', () => {
+ history.replace('/?view=card');
+
+ renderComponent();
+
+ expect(
+ screen.getByRole('link', { name: 'datasets.dataset: dataset 1' })
+ ).toHaveAttribute(
+ 'href',
+ '/browse/instrument/4/facilityCycle/5/investigation/1/dataset/1?view=card'
+ );
+ expect(screen.getByText('datasets.doi:')).toBeInTheDocument();
+ expect(
+ screen.getByRole('link', { name: 'landing-study-doi-link' })
+ ).toHaveAttribute('href', 'https://doi.org/dataset doi');
+
+ // actions for datasets should be visible
+ const actionContainer = screen.getByTestId(
+ 'investigation-landing-dataset-0-action-container'
+ );
+ expect(actionContainer).toBeInTheDocument();
+ expect(
+ within(actionContainer).getByRole('button', {
+ name: 'buttons.add_to_cart',
+ })
+ ).toBeInTheDocument();
+ });
+
+ it('for study hierarchy and normal view', () => {
+ renderComponent(true);
+
+ expect(
+ screen.getByRole('link', { name: 'datasets.dataset: dataset 1' })
+ ).toHaveAttribute(
+ 'href',
+ '/browseStudyHierarchy/instrument/4/study/5/investigation/1/dataset/1'
+ );
+ expect(screen.getByText('datasets.doi:')).toBeInTheDocument();
+ expect(
+ screen.getByRole('link', { name: 'landing-study-doi-link' })
+ ).toHaveAttribute('href', 'https://doi.org/dataset doi');
+
+ // actions for datasets should be visible
+ const actionContainer = screen.getByTestId(
+ 'investigation-landing-dataset-0-action-container'
+ );
+ expect(actionContainer).toBeInTheDocument();
+ expect(
+ within(actionContainer).getByRole('button', {
+ name: 'buttons.add_to_cart',
+ })
+ ).toBeInTheDocument();
+ });
+
+ it('for study hierarchy and card view', () => {
+ history.push('/?view=card');
+
+ renderComponent(true);
+
+ expect(
+ screen.getByRole('link', { name: 'datasets.dataset: dataset 1' })
+ ).toHaveAttribute(
+ 'href',
+ '/browseStudyHierarchy/instrument/4/study/5/investigation/1/dataset/1?view=card'
+ );
+ expect(screen.getByText('datasets.doi:')).toBeInTheDocument();
+ expect(
+ screen.getByRole('link', { name: 'landing-study-doi-link' })
+ ).toHaveAttribute('href', 'https://doi.org/dataset doi');
+
+ // actions for datasets should be visible
+ const actionContainer = screen.getByTestId(
+ 'investigation-landing-dataset-0-action-container'
+ );
+ expect(actionContainer).toBeInTheDocument();
+ expect(
+ within(actionContainer).getByRole('button', {
+ name: 'buttons.add_to_cart',
+ })
+ ).toBeInTheDocument();
+ });
});
- it('users displayed correctly', () => {
- let wrapper = createWrapper();
+ describe('links to the correct url in the datafiles tab', () => {
+ it('for facility cycle hierarchy and normal view', async () => {
+ renderComponent();
- expect(
- wrapper.find('[aria-label="landing-investigation-users-label"]')
- ).toHaveLength(0);
- expect(
- wrapper.find('[aria-label="landing-investigation-user-0"]')
- ).toHaveLength(0);
+ await user.click(
+ await screen.findByRole('tab', {
+ name: 'investigations.details.datasets',
+ })
+ );
+
+ expect(history.location.pathname).toBe(
+ '/browse/instrument/4/facilityCycle/5/investigation/1/dataset'
+ );
+ });
+ it('for facility cycle hierarchy and cards view', async () => {
+ history.replace('/?view=card');
+ renderComponent();
+
+ await user.click(
+ await screen.findByRole('tab', {
+ name: 'investigations.details.datasets',
+ })
+ );
+
+ expect(history.location.pathname).toBe(
+ '/browse/instrument/4/facilityCycle/5/investigation/1/dataset'
+ );
+ expect(history.location.search).toBe('?view=card');
+ });
+
+ it('for study hierarchy and normal view', async () => {
+ history.replace('/?view=card');
+ renderComponent(true);
+
+ await user.click(
+ await screen.findByRole('tab', {
+ name: 'investigations.details.datasets',
+ })
+ );
+
+ expect(history.location.pathname).toBe(
+ '/browseStudyHierarchy/instrument/4/study/5/investigation/1/dataset'
+ );
+ });
+
+ it('for study hierarchy and cards view', async () => {
+ history.replace('/?view=card');
+ renderComponent(true);
+
+ await user.click(
+ await screen.findByRole('tab', {
+ name: 'investigations.details.datasets',
+ })
+ );
+
+ expect(history.location.pathname).toBe(
+ '/browseStudyHierarchy/instrument/4/study/5/investigation/1/dataset'
+ );
+ expect(history.location.search).toBe('?view=card');
+ });
+ });
+
+ it('users displayed correctly', async () => {
(useInvestigation as jest.Mock).mockReturnValue({
data: [{ ...initialData[0], investigationUsers: investigationUser }],
});
- wrapper = createWrapper();
+ renderComponent();
expect(
- wrapper.find('[aria-label="landing-investigation-users-label"]')
- ).toHaveLength(4);
- expect(
- wrapper.find('[aria-label="landing-investigation-user-0"]').first().text()
- ).toEqual('Principal Investigator: John Smith');
+ await screen.findByLabelText('landing-investigation-user-0')
+ ).toHaveTextContent('Principal Investigator: John Smith');
expect(
- wrapper.find('[aria-label="landing-investigation-user-1"]').first().text()
- ).toEqual('Local Contact: Jane Smith');
+ await screen.findByLabelText('landing-investigation-user-1')
+ ).toHaveTextContent('Local Contact: Jane Smith');
expect(
- wrapper.find('[aria-label="landing-investigation-user-2"]').first().text()
- ).toEqual('Experimenter: Jesse Smith');
- expect(
- wrapper.find('[aria-label="landing-investigation-user-3"]')
- ).toHaveLength(0);
+ await screen.findByLabelText('landing-investigation-user-2')
+ ).toHaveTextContent('Experimenter: Jesse Smith');
});
- it('renders text "No samples" when no data is present', () => {
- let wrapper = createWrapper();
+ it('renders text "No samples" when no data is present', async () => {
(useInvestigation as jest.Mock).mockReturnValue({
data: [{ ...initialData[0], samples: noSamples }],
});
- wrapper = createWrapper();
+ renderComponent();
expect(
- wrapper
- .find('[data-testid="investigation-details-panel-no-samples"]')
- .exists()
- ).toBeTruthy();
+ await screen.findByText('investigations.details.samples.no_samples')
+ ).toBeInTheDocument();
});
- it('renders text "No publications" when no data is present', () => {
- let wrapper = createWrapper();
+ it('renders text "No publications" when no data is present', async () => {
(useInvestigation as jest.Mock).mockReturnValue({
data: [{ ...initialData[0], publications: noPublication }],
});
- wrapper = createWrapper();
+ renderComponent();
expect(
- wrapper
- .find('[data-testid="investigation-details-panel-no-publications"]')
- .exists()
- ).toBeTruthy();
+ await screen.findByText(
+ 'investigations.details.publications.no_publications'
+ )
+ ).toBeInTheDocument();
});
- it('publications displayed correctly', () => {
- let wrapper = createWrapper();
-
- expect(
- wrapper.find('[aria-label="landing-investigation-publications-label"]')
- ).toHaveLength(0);
- expect(
- wrapper.find('[aria-label="landing-investigation-publication-0"]')
- ).toHaveLength(0);
-
+ it('publications displayed correctly', async () => {
(useInvestigation as jest.Mock).mockReturnValue({
data: [{ ...initialData[0], publications: publication }],
});
- wrapper = createWrapper();
+ renderComponent();
expect(
- wrapper.find('[aria-label="landing-investigation-publications-label"]')
- ).toHaveLength(4);
- expect(
- wrapper
- .find('[aria-label="landing-investigation-reference-0"]')
- .first()
- .text()
- ).toEqual('Journal, Author, Date, DOI');
+ await screen.findByText('Journal, Author, Date, DOI')
+ ).toBeInTheDocument();
});
- it('samples displayed correctly', () => {
- let wrapper = createWrapper();
-
- expect(
- wrapper.find('[aria-label="landing-investigation-samples-label"]')
- ).toHaveLength(0);
- expect(
- wrapper.find('[aria-label="landing-investigation-sample-0"]')
- ).toHaveLength(0);
-
+ it('samples displayed correctly', async () => {
(useInvestigation as jest.Mock).mockReturnValue({
data: [{ ...initialData[0], samples: sample }],
});
- wrapper = createWrapper();
+ renderComponent();
- expect(
- wrapper.find('[aria-label="landing-investigation-samples-label"]')
- ).toHaveLength(4);
- expect(
- wrapper
- .find('[aria-label="landing-investigation-sample-0"]')
- .first()
- .text()
- ).toEqual('Sample');
+ expect(await screen.findByText('Sample')).toBeInTheDocument();
});
it('displays citation correctly when study missing', async () => {
(useInvestigation as jest.Mock).mockReturnValue({
data: [{ ...initialData[0], studyInvestigations: undefined }],
});
- const wrapper = createWrapper();
- await act(async () => flushPromises());
- wrapper.update();
+ renderComponent();
+
expect(
- wrapper.find('[data-testid="citation-formatter-citation"]').first().text()
- ).toEqual(
- '2019: Test 1, doi_constants.publisher.name, https://doi.org/doi 1'
- );
+ await screen.findByText(
+ '2019: Test title 1, doi_constants.publisher.name, https://doi.org/doi 1'
+ )
+ ).toBeInTheDocument();
});
it('displays citation correctly with one user', async () => {
(useInvestigation as jest.Mock).mockReturnValue({
data: [{ ...initialData[0], investigationUsers: [investigationUser[0]] }],
});
- const wrapper = createWrapper();
- await act(async () => flushPromises());
- wrapper.update();
+ renderComponent();
+
expect(
- wrapper.find('[data-testid="citation-formatter-citation"]').first().text()
- ).toEqual(
- 'John Smith; 2019: Test 1, doi_constants.publisher.name, https://doi.org/doi 1'
- );
+ await screen.findByText(
+ 'John Smith; 2019: Test title 1, doi_constants.publisher.name, https://doi.org/doi 1'
+ )
+ ).toBeInTheDocument();
});
it('displays citation correctly with multiple users', async () => {
(useInvestigation as jest.Mock).mockReturnValue({
data: [{ ...initialData[0], investigationUsers: investigationUser }],
});
- const wrapper = createWrapper();
- await act(async () => flushPromises());
- wrapper.update();
- expect(
- wrapper.find('[data-testid="citation-formatter-citation"]').first().text()
- ).toEqual(
- 'John Smith et al; 2019: Test 1, doi_constants.publisher.name, https://doi.org/doi 1'
- );
- });
+ renderComponent();
- it('displays DOI and renders the expected Link ', () => {
- const wrapper = createWrapper();
expect(
- wrapper
- .find('[data-testid="isis-investigation-landing-doi-link"]')
- .first()
- .text()
- ).toEqual('doi 1');
-
- expect(
- wrapper
- .find('[data-testid="isis-investigation-landing-doi-link"]')
- .first()
- .prop('href')
- ).toEqual('https://doi.org/doi 1');
+ await screen.findByText(
+ 'John Smith et al; 2019: Test title 1, doi_constants.publisher.name, https://doi.org/doi 1'
+ )
+ ).toBeInTheDocument();
});
- it('displays Experiment DOI (PID) and renders the expected Link ', () => {
- const wrapper = createWrapper();
- expect(
- wrapper
- .find('[data-testid="isis-investigations-landing-parent-doi-link"]')
- .first()
- .text()
- ).toEqual('study pid');
+ it('displays DOI and renders the expected Link ', async () => {
+ renderComponent();
+ expect(await screen.findByRole('link', { name: 'doi 1' })).toHaveAttribute(
+ 'href',
+ 'https://doi.org/doi 1'
+ );
+ });
+ it('displays Experiment DOI (PID) and renders the expected Link ', async () => {
+ renderComponent();
expect(
- wrapper
- .find('[data-testid="isis-investigations-landing-parent-doi-link"]')
- .first()
- .prop('href')
- ).toEqual('https://doi.org/study pid');
+ await screen.findByRole('link', { name: 'study pid' })
+ ).toHaveAttribute('href', 'https://doi.org/study pid');
});
});
diff --git a/packages/datagateway-dataview/src/views/landing/isis/isisInvestigationLanding.component.tsx b/packages/datagateway-dataview/src/views/landing/isis/isisInvestigationLanding.component.tsx
index 820f73df7..7b574ba26 100644
--- a/packages/datagateway-dataview/src/views/landing/isis/isisInvestigationLanding.component.tsx
+++ b/packages/datagateway-dataview/src/views/landing/isis/isisInvestigationLanding.component.tsx
@@ -284,7 +284,10 @@ const LandingPage = (props: LandingPageProps): React.ReactElement => {
];
return (
-
+
+
{
)
)}
-
+
{
const originalModule = jest.requireActual('datagateway-common');
@@ -27,11 +27,11 @@ describe('ISIS Study Landing page', () => {
const mockStore = configureStore([thunk]);
let state: StateType;
let history: History;
+ let user: UserEvent;
- const createWrapper = (): ReactWrapper => {
- const store = mockStore(state);
- return mount(
-
+ const renderComponent = (): RenderResult =>
+ render(
+
);
- };
const investigationUser = [
{
@@ -136,6 +135,7 @@ describe('ISIS Study Landing page', () => {
);
history = createMemoryHistory();
+ user = userEvent.setup();
(useStudy as jest.Mock).mockReturnValue({
data: initialData,
@@ -146,42 +146,35 @@ describe('ISIS Study Landing page', () => {
jest.clearAllMocks();
});
- it('calls the correct data fetching hooks', () => {
- createWrapper();
-
- expect(useStudy).toHaveBeenCalledWith(5);
- });
-
- it('links to the correct url in the datafiles tab for both hierarchies and both views', () => {
- let wrapper = createWrapper();
+ describe('links to the correct url in the datafiles tab', () => {
+ it('in normal view', async () => {
+ renderComponent();
- wrapper.find('#study-investigations-tab').last().simulate('click');
+ await user.click(
+ screen.getByRole('tab', { name: 'studies.details.investigations' })
+ );
- expect(history.location.pathname).toBe(
- '/browseStudyHierarchy/instrument/4/study/5/investigation'
- );
+ expect(history.location.pathname).toBe(
+ '/browseStudyHierarchy/instrument/4/study/5/investigation'
+ );
+ });
- history.replace('/?view=card');
- wrapper = createWrapper();
+ it('in cards view', async () => {
+ history.replace('/?view=card');
+ renderComponent();
- wrapper.find('#study-investigations-tab').last().simulate('click');
+ await user.click(
+ screen.getByRole('tab', { name: 'studies.details.investigations' })
+ );
- expect(history.location.pathname).toBe(
- '/browseStudyHierarchy/instrument/4/study/5/investigation'
- );
- expect(history.location.search).toBe('?view=card');
+ expect(history.location.pathname).toBe(
+ '/browseStudyHierarchy/instrument/4/study/5/investigation'
+ );
+ expect(history.location.search).toBe('?view=card');
+ });
});
- it('single user displayed correctly', () => {
- let wrapper = createWrapper();
-
- expect(
- wrapper.find('[data-testid="landing-study-users-label"]')
- ).toHaveLength(0);
- expect(wrapper.find('[data-testid="landing-study-user-0"]')).toHaveLength(
- 0
- );
-
+ it('single user displayed correctly', async () => {
(useStudy as jest.Mock).mockReturnValue({
data: [
{
@@ -197,14 +190,11 @@ describe('ISIS Study Landing page', () => {
},
],
});
- wrapper = createWrapper();
+ renderComponent();
- expect(
- wrapper.find('[data-testid="landing-study-users-label"]')
- ).toHaveLength(4);
- expect(
- wrapper.find('[data-testid="landing-study-user-0"]').first().text()
- ).toEqual('Principal Investigator: John Smith');
+ expect(await screen.findByTestId('landing-study-user-0')).toHaveTextContent(
+ 'Principal Investigator: John Smith'
+ );
});
it('multiple users displayed correctly', async () => {
@@ -223,63 +213,25 @@ describe('ISIS Study Landing page', () => {
},
],
});
- const wrapper = createWrapper();
- await act(async () => flushPromises());
- wrapper.update();
-
- expect(
- wrapper.find('[data-testid="landing-study-users-label"]')
- ).toHaveLength(4);
- expect(
- wrapper.find('[data-testid="landing-study-user-0"]').first().text()
- ).toEqual('Principal Investigator: John Smith');
- expect(
- wrapper.find('[data-testid="landing-study-user-1"]').first().text()
- ).toEqual('Local Contact: Jane Smith');
- expect(
- wrapper.find('[data-testid="landing-study-user-2"]').first().text()
- ).toEqual('Experimenter: Jesse Smith');
- expect(
- wrapper.find('[data-testid="landing-investigation-user-3"]')
- ).toHaveLength(0);
+ renderComponent();
- expect(
- wrapper.find('[data-testid="citation-formatter-citation"]').first().text()
- ).toEqual(
- 'John Smith et al; 2019: Title 1, doi_constants.publisher.name, https://doi.org/study pid'
+ expect(await screen.findByTestId('landing-study-user-0')).toHaveTextContent(
+ 'Principal Investigator: John Smith'
+ );
+ expect(await screen.findByTestId('landing-study-user-1')).toHaveTextContent(
+ 'Local Contact: Jane Smith'
+ );
+ expect(await screen.findByTestId('landing-study-user-2')).toHaveTextContent(
+ 'Experimenter: Jesse Smith'
);
- });
-
- it('displays DOI and renders the expected link', () => {
- (useStudy as jest.Mock).mockReturnValue({
- data: [
- {
- ...initialData[0],
- studyInvestigations: [
- {
- investigation: {
- ...investigation,
- investigationUsers: investigationUser,
- },
- },
- ],
- },
- ],
- });
- const wrapper = createWrapper();
- expect(
- wrapper
- .find('[data-testid="landing-study-doi-link"]')
- .first()
- .prop('href')
- ).toEqual('https://doi.org/doi 1');
-
expect(
- wrapper.find('[data-testid="landing-study-doi-link"]').first().text()
- ).toEqual('doi 1');
+ await screen.findByText(
+ 'John Smith et al; 2019: Title 1, doi_constants.publisher.name, https://doi.org/study pid'
+ )
+ ).toBeInTheDocument();
});
- it('displays Experiment DOI (PID) and renders the expected link', () => {
+ it('displays DOI and renders the expected link', async () => {
(useStudy as jest.Mock).mockReturnValue({
data: [
{
@@ -295,29 +247,15 @@ describe('ISIS Study Landing page', () => {
},
],
});
- const wrapper = createWrapper();
- expect(
- wrapper
- .find('[data-testid="landing-study-pid-link"]')
- .first()
- .prop('href')
- ).toEqual('https://doi.org/study pid');
+ renderComponent();
- expect(
- wrapper.find('[data-testid="landing-study-pid-link"]').first().text()
- ).toEqual('study pid');
+ expect(await screen.findByRole('link', { name: 'doi 1' })).toHaveAttribute(
+ 'href',
+ 'https://doi.org/doi 1'
+ );
});
- it.skip('renders structured data correctly', () => {
- // mock getElementByTagNameSpy so we can snapshot mockElement
- const docFragment = document.createDocumentFragment();
- const mockElement = document.createElement('head');
- docFragment.appendChild(mockElement);
- const mockHTMLCollection = docFragment.children;
- jest
- .spyOn(document, 'getElementsByTagName')
- .mockReturnValue(mockHTMLCollection);
-
+ it('displays Experiment DOI (PID) and renders the expected link', async () => {
(useStudy as jest.Mock).mockReturnValue({
data: [
{
@@ -333,8 +271,10 @@ describe('ISIS Study Landing page', () => {
},
],
});
- createWrapper();
+ renderComponent();
- expect(mockElement).toMatchSnapshot();
+ expect(
+ await screen.findByRole('link', { name: 'study pid' })
+ ).toHaveAttribute('href', 'https://doi.org/study pid');
});
});
diff --git a/packages/datagateway-dataview/src/views/landing/isis/isisStudyLanding.component.tsx b/packages/datagateway-dataview/src/views/landing/isis/isisStudyLanding.component.tsx
index dfccab55d..f772b0fd0 100644
--- a/packages/datagateway-dataview/src/views/landing/isis/isisStudyLanding.component.tsx
+++ b/packages/datagateway-dataview/src/views/landing/isis/isisStudyLanding.component.tsx
@@ -335,7 +335,7 @@ const LandingPage = (props: LandingPageProps): React.ReactElement => {
];
return (
-
+
+ const renderComponent = (): RenderResult =>
+ render(
+
);
- };
beforeEach(() => {
+ user = userEvent.setup();
state = JSON.parse(
JSON.stringify({
dgdataview: dgDataViewInitialState,
@@ -88,7 +89,7 @@ describe('Role Selector', () => {
});
it('fetches roles when rendered and displays them in dropdown', async () => {
- const wrapper = createWrapper();
+ renderComponent();
const params = new URLSearchParams();
params.append('distinct', JSON.stringify('role'));
@@ -108,44 +109,36 @@ describe('Role Selector', () => {
expect((axios.get as jest.Mock).mock.calls[0][1].params.toString()).toBe(
params.toString()
);
- wrapper
- .find('#role-selector')
- .find('[role="button"]')
- .last()
- .simulate('mousedown', { button: 0 });
- // Flush promises and update the wrapper.
- await flushPromises();
- wrapper.update();
+ await user.click(
+ await screen.findByRole('button', { name: 'my_data_table.role_selector' })
+ );
- expect(wrapper.find('[role="listbox"] li[role="option"]').length).toBe(3);
expect(
- wrapper.find('[role="listbox"] li[role="option"]').at(0).text()
- ).toBe('my_data_table.all_roles');
+ await screen.findByRole('option', { name: 'my_data_table.all_roles' })
+ ).toBeInTheDocument();
expect(
- wrapper.find('[role="listbox"] li[role="option"]').at(1).text()
- ).toBe(mockData[0].role.toLowerCase());
+ await screen.findByRole('option', {
+ name: mockData[0].role.toLowerCase(),
+ })
+ ).toBeInTheDocument();
expect(
- wrapper.find('[role="listbox"] li[role="option"]').at(2).text()
- ).toBe(mockData[1].role);
+ await screen.findByRole('option', { name: mockData[1].role })
+ ).toBeInTheDocument();
});
it('updates filters when role is selected', async () => {
- const wrapper = createWrapper();
-
- // Flush promises and update the wrapper.
- await flushPromises();
- wrapper.update();
-
- const selectInput = wrapper.find('input').first();
- selectInput.simulate('change', { target: { value: 'PI' } });
-
- selectInput.simulate('change', { target: { value: '' } });
+ renderComponent();
- expect(mockPushFilters).toHaveBeenCalledWith(
- 'investigationUsers.role',
- null
+ await user.click(
+ await screen.findByRole('button', { name: 'my_data_table.role_selector' })
);
+ await user.click(await screen.findByRole('option', { name: 'pi' }));
+
+ expect(mockPushFilters).toHaveBeenCalledWith('investigationUsers.role', {
+ value: 'PI',
+ type: 'include',
+ });
});
it('parses current role from query params correctly', async () => {
@@ -158,15 +151,8 @@ describe('Role Selector', () => {
},
});
- const wrapper = createWrapper();
-
- // before roles have been loaded, it should be set to "" as a default
- expect(wrapper.find('input').prop('value')).toBe('');
-
- // Flush promises and update the wrapper.
- await flushPromises();
- wrapper.update();
+ renderComponent();
- expect(wrapper.find('input').prop('value')).toBe('experimenter');
+ expect(await screen.findByText('experimenter')).toBeInTheDocument();
});
});
diff --git a/packages/datagateway-dataview/src/views/roleSelector.component.tsx b/packages/datagateway-dataview/src/views/roleSelector.component.tsx
index 43ad49e10..d6a22979d 100644
--- a/packages/datagateway-dataview/src/views/roleSelector.component.tsx
+++ b/packages/datagateway-dataview/src/views/roleSelector.component.tsx
@@ -97,8 +97,11 @@ const RoleSelector: React.FC = () => {
variant="standard"
sx={{ margin: 1, minWidth: '100px' }}
>
- {t('my_data_table.role_selector')}
+
+ {t('my_data_table.role_selector')}
+
+
-
- searchBox.limited_results_message {maxNumResults:{tabs:{datasetTab:false,datafileTab:false,investigationTab:false},selectAllSetting:true,settingsLoaded:false,sideLayout:false,searchableEntities:[investigation,dataset,datafile],maxNumResults:300}}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
+
+
`;
diff --git a/packages/datagateway-search/src/__snapshots__/searchPageContainer.component.test.tsx.snap b/packages/datagateway-search/src/__snapshots__/searchPageContainer.component.test.tsx.snap
deleted file mode 100644
index c2ceec09e..000000000
--- a/packages/datagateway-search/src/__snapshots__/searchPageContainer.component.test.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SearchPageContainer - Tests renders searchPageContainer correctly 1`] = `
-
+
+
+
+
+