Skip to content

Commit

Permalink
#1445 - Upgrade React to 18 and change render function
Browse files Browse the repository at this point in the history 
- also, upgrade other libraries to support react 18
and fix anything that broke immediately
  • Loading branch information
@louise-davies
louise-davies committed Apr 5, 2023
1 parent 1154804 commit fc97d6c
Show file tree
Hide file tree
Showing 37 changed files with 831 additions and 901 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"husky": "8.0.1"
},
"resolutions": {
"@types/react": "17.0.39",
"@types/react": "18.0.33",
"@types/react-dom": "18.0.11",
"@typescript-eslint/eslint-plugin": "5.49.0",
"@typescript-eslint/parser": "5.49.0"
},
Expand Down
19 changes: 9 additions & 10 deletions packages/datagateway-common/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@
"@mui/x-date-pickers": "5.0.9",
"@types/lodash.debounce": "4.0.6",
"axios": "0.27.2",
"connected-react-router": "6.9.1",
"connected-react-router": "6.9.3",
"date-fns": "2.29.1",
"hex-to-rgba": "2.0.1",
"history": "4.10.1",
"i18next": "22.0.3",
"lodash.debounce": "4.0.8",
"loglevel": "1.8.0",
"prettier": "2.8.0",
"react-draggable": "4.4.3",
"react-draggable": "4.4.5",
"react-i18next": "12.1.1",
"react-query": "3.39.2",
"react-redux": "8.0.4",
Expand All @@ -38,20 +38,19 @@
"peerDependencies": {
"@mui/icons-material": ">= 5.5.0 < 6",
"@mui/material": ">= 5.5.0 < 6",
"react": ">= 17.0.2 < 18",
"react-dom": ">= 17.0.2 < 18",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": ">= 5.2.0 < 6"
},
"devDependencies": {
"@mui/icons-material": "5.11.0",
"@mui/material": "5.11.0",
"@testing-library/jest-dom": "5.16.4",
"@testing-library/react": "12.1.3",
"@testing-library/react-hooks": "8.0.1",
"@testing-library/react": "14.0.0",
"@testing-library/user-event": "14.4.1",
"@types/jest": "29.4.0",
"@types/node": "18.11.9",
"@types/react": "17.0.39",
"@types/react": "18.0.33",
"@types/react-router-dom": "5.3.3",
"@types/react-virtualized": "9.21.10",
"@typescript-eslint/eslint-plugin": "5.49.0",
Expand All @@ -63,9 +62,9 @@
"eslint-plugin-cypress": "2.12.1",
"eslint-plugin-prettier": "4.2.1",
"lint-staged": "13.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-router-dom": "5.3.4",
"react-test-renderer": "17.0.2"
},
"scripts": {
Expand Down
44 changes: 21 additions & 23 deletions packages/datagateway-common/src/api/cart.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { renderHook } from '@testing-library/react-hooks';
import { renderHook, waitFor } from '@testing-library/react';
import axios from 'axios';
import { useCart, useAddToCart, useRemoveFromCart } from '.';
import { DownloadCart } from '../app.types';
Expand Down Expand Up @@ -46,11 +46,11 @@ describe('Cart api functions', () => {
data: mockData,
});

const { result, waitFor } = renderHook(() => useCart(), {
const { result } = renderHook(() => useCart(), {
wrapper: createReactQueryWrapper(),
});

await waitFor(() => result.current.isSuccess);
await waitFor(() => expect(result.current.isSuccess).toBe(true));

expect(axios.get).toHaveBeenCalledWith(
'https://example.com/topcat/user/cart/TEST',
Expand Down Expand Up @@ -79,11 +79,11 @@ describe('Cart api functions', () => {
message: 'Test error message',
});

const { result, waitFor } = renderHook(() => useCart(), {
const { result } = renderHook(() => useCart(), {
wrapper: createReactQueryWrapper(),
});

await waitFor(() => result.current.isError);
await waitFor(() => expect(result.current.isError).toBe(true));

expect(handleICATError).toHaveBeenCalledWith({
message: 'Test error message',
Expand All @@ -97,7 +97,7 @@ describe('Cart api functions', () => {
data: mockData,
});

const { result, waitFor } = renderHook(() => useAddToCart('dataset'), {
const { result } = renderHook(() => useAddToCart('dataset'), {
wrapper: createReactQueryWrapper(),
});

Expand All @@ -106,7 +106,7 @@ describe('Cart api functions', () => {

result.current.mutate([1, 2]);

await waitFor(() => result.current.isSuccess);
await waitFor(() => expect(result.current.isSuccess).toBe(true));

const params = new URLSearchParams();
params.append('sessionId', '');
Expand All @@ -129,7 +129,7 @@ describe('Cart api functions', () => {
message: 'Test error message',
});

const { result, waitFor } = renderHook(() => useAddToCart('dataset'), {
const { result } = renderHook(() => useAddToCart('dataset'), {
wrapper: createReactQueryWrapper(),
});

Expand All @@ -138,7 +138,9 @@ describe('Cart api functions', () => {

result.current.mutate([1, 2]);

await waitFor(() => result.current.isError, { timeout: 2000 });
await waitFor(() => expect(result.current.isError).toBe(true), {
timeout: 2000,
});

expect(result.current.failureCount).toBe(2);
expect(handleICATError).toHaveBeenCalledTimes(1);
Expand All @@ -154,19 +156,16 @@ describe('Cart api functions', () => {
data: mockData,
});

const { result, waitFor } = renderHook(
() => useRemoveFromCart('dataset'),
{
wrapper: createReactQueryWrapper(),
}
);
const { result } = renderHook(() => useRemoveFromCart('dataset'), {
wrapper: createReactQueryWrapper(),
});

expect(axios.get).not.toHaveBeenCalled();
expect(result.current.isIdle).toBe(true);

result.current.mutate([1, 2]);

await waitFor(() => result.current.isSuccess);
await waitFor(() => expect(result.current.isSuccess).toBe(true));

const params = new URLSearchParams();
params.append('sessionId', '');
Expand All @@ -191,19 +190,18 @@ describe('Cart api functions', () => {
message: 'Test error message',
});

const { result, waitFor } = renderHook(
() => useRemoveFromCart('dataset'),
{
wrapper: createReactQueryWrapper(),
}
);
const { result } = renderHook(() => useRemoveFromCart('dataset'), {
wrapper: createReactQueryWrapper(),
});

expect(axios.post).not.toHaveBeenCalled();
expect(result.current.isIdle).toBe(true);

result.current.mutate([1, 2]);

await waitFor(() => result.current.isError, { timeout: 2000 });
await waitFor(() => expect(result.current.isError).toBe(true), {
timeout: 2000,
});

expect(result.current.failureCount).toBe(2);
expect(handleICATError).toHaveBeenCalledTimes(1);
Expand Down
52 changes: 25 additions & 27 deletions packages/datagateway-common/src/api/datafiles.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Datafile } from '../app.types';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook, waitFor } from '@testing-library/react';
import { createMemoryHistory, History } from 'history';
import axios from 'axios';
import handleICATError from '../handleICATError';
Expand Down Expand Up @@ -58,7 +58,7 @@ describe('datafile api functions', () => {
data: mockData,
});

const { result, waitFor } = renderHook(
const { result } = renderHook(
() =>
useDatafilesPaginated([
{
Expand All @@ -73,7 +73,7 @@ describe('datafile api functions', () => {
}
);

await waitFor(() => result.current.isSuccess);
await waitFor(() => expect(result.current.isSuccess).toBe(true));

params.append('order', JSON.stringify('name asc'));
params.append('order', JSON.stringify('id asc'));
Expand Down Expand Up @@ -108,11 +108,11 @@ describe('datafile api functions', () => {
(axios.get as jest.Mock).mockRejectedValue({
message: 'Test error',
});
const { result, waitFor } = renderHook(() => useDatafilesPaginated(), {
const { result } = renderHook(() => useDatafilesPaginated(), {
wrapper: createReactQueryWrapper(),
});

await waitFor(() => result.current.isError);
await waitFor(() => expect(result.current.isError).toBe(true));

params.append('order', JSON.stringify('id asc'));
params.append('skip', JSON.stringify(0));
Expand All @@ -139,7 +139,7 @@ describe('datafile api functions', () => {
: Promise.resolve({ data: mockData[1] })
);

const { result, waitFor } = renderHook(
const { result } = renderHook(
() =>
useDatafilesInfinite([
{
Expand All @@ -154,7 +154,7 @@ describe('datafile api functions', () => {
}
);

await waitFor(() => result.current.isSuccess);
await waitFor(() => expect(result.current.isSuccess).toBe(true));

params.append('order', JSON.stringify('name asc'));
params.append('order', JSON.stringify('id asc'));
Expand Down Expand Up @@ -188,9 +188,7 @@ describe('datafile api functions', () => {
pageParam: { startIndex: 50, stopIndex: 74 },
});

await waitFor(() => result.current.isFetching);

await waitFor(() => !result.current.isFetching);
await waitFor(() => expect(result.current.isFetching).toBe(false));

expect(axios.get).toHaveBeenNthCalledWith(
2,
Expand All @@ -215,11 +213,11 @@ describe('datafile api functions', () => {
(axios.get as jest.Mock).mockRejectedValue({
message: 'Test error',
});
const { result, waitFor } = renderHook(() => useDatafilesInfinite(), {
const { result } = renderHook(() => useDatafilesInfinite(), {
wrapper: createReactQueryWrapper(),
});

await waitFor(() => result.current.isError);
await waitFor(() => expect(result.current.isError).toBe(true));

params.append('order', JSON.stringify('id asc'));
params.append('skip', JSON.stringify(0));
Expand All @@ -244,7 +242,7 @@ describe('datafile api functions', () => {
data: mockData.length,
});

const { result, waitFor } = renderHook(
const { result } = renderHook(
() =>
useDatafileCount([
{
Expand All @@ -257,7 +255,7 @@ describe('datafile api functions', () => {
}
);

await waitFor(() => result.current.isSuccess);
await waitFor(() => expect(result.current.isSuccess).toBe(true));

params.append(
'where',
Expand All @@ -284,7 +282,7 @@ describe('datafile api functions', () => {
data: mockData.length,
});

const { result, waitFor } = renderHook(
const { result } = renderHook(
() =>
useDatafileCount(
[
Expand All @@ -303,7 +301,7 @@ describe('datafile api functions', () => {
}
);

await waitFor(() => result.current.isSuccess);
await waitFor(() => expect(result.current.isSuccess).toBe(true));

params.append(
'where',
Expand All @@ -329,11 +327,11 @@ describe('datafile api functions', () => {
(axios.get as jest.Mock).mockRejectedValue({
message: 'Test error',
});
const { result, waitFor } = renderHook(() => useDatafileCount(), {
const { result } = renderHook(() => useDatafileCount(), {
wrapper: createReactQueryWrapper(),
});

await waitFor(() => result.current.isError);
await waitFor(() => expect(result.current.isError).toBe(true));

expect(axios.get).toHaveBeenCalledWith(
'https://example.com/api/datafiles/count',
Expand All @@ -354,11 +352,11 @@ describe('datafile api functions', () => {
data: [mockData[0]],
});

const { result, waitFor } = renderHook(() => useDatafileDetails(1), {
const { result } = renderHook(() => useDatafileDetails(1), {
wrapper: createReactQueryWrapper(),
});

await waitFor(() => result.current.isSuccess);
await waitFor(() => expect(result.current.isSuccess).toBe(true));

params.append(
'where',
Expand All @@ -383,11 +381,11 @@ describe('datafile api functions', () => {
(axios.get as jest.Mock).mockRejectedValue({
message: 'Test error',
});
const { result, waitFor } = renderHook(() => useDatafileDetails(1), {
const { result } = renderHook(() => useDatafileDetails(1), {
wrapper: createReactQueryWrapper(),
});

await waitFor(() => result.current.isError);
await waitFor(() => expect(result.current.isError).toBe(true));

expect(handleICATError).toHaveBeenCalledWith({ message: 'Test error' });
});
Expand All @@ -408,7 +406,7 @@ describe('datafile api functions', () => {
} as unknown as Blob)
);

const { result, waitFor } = renderHook(
const { result } = renderHook(
() =>
useDatafileContent({
datafileId: 1,
Expand All @@ -417,7 +415,7 @@ describe('datafile api functions', () => {
{ wrapper: createReactQueryWrapper() }
);

await waitFor(() => result.current.isSuccess);
await waitFor(() => expect(result.current.isSuccess).toBe(true));

expect(axios.get).toHaveBeenCalledWith(
`https://example.com/ids/getData`,
Expand Down Expand Up @@ -449,7 +447,7 @@ describe('datafile api functions', () => {
);
const downloadProgressCb = jest.fn();

const { waitFor } = renderHook(
renderHook(
() =>
useDatafileContent({
datafileId: 1,
Expand All @@ -468,7 +466,7 @@ describe('datafile api functions', () => {
message: 'Test error',
});

const { result, waitFor } = renderHook(
const { result } = renderHook(
() =>
useDatafileContent({
datafileId: 1,
Expand All @@ -477,7 +475,7 @@ describe('datafile api functions', () => {
{ wrapper: createReactQueryWrapper() }
);

await waitFor(() => result.current.isError);
await waitFor(() => expect(result.current.isError).toBe(true));

expect(handleICATError).toHaveBeenCalledWith({ message: 'Test error' });
});
Expand Down
Loading

0 comments on commit fc97d6c

Please sign in to comment.