Merge pull request #1575 from ral-facilities/bugfix/fix-cypress-linti…

…ng-errors Improve e2e tests & fix sorting bug
ral-facilities · Aug 24, 2023 · ec7d542 · ec7d542
2 parents 6e0ba51 + 0ff8da5
commit ec7d542
Show file tree

Hide file tree

Showing 62 changed files with 2,856 additions and 5,002 deletions.
diff --git a/packages/datagateway-common/package.json b/packages/datagateway-common/package.json
@@ -43,6 +43,7 @@
     "react-router-dom": ">= 5.2.0 < 6"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "7.22.5",
     "@mui/icons-material": "5.11.0",
     "@mui/material": "5.11.0",
     "@testing-library/jest-dom": "5.16.4",
@@ -56,7 +57,6 @@
     "@types/react-virtualized": "9.21.10",
     "@typescript-eslint/eslint-plugin": "5.61.0",
     "@typescript-eslint/parser": "5.61.0",
-    "@babel/eslint-parser": "7.22.5",
     "eslint": "8.44.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-config-react-app": "7.0.0",

diff --git a/packages/datagateway-common/src/api/dataPublications.test.tsx b/packages/datagateway-common/src/api/dataPublications.test.tsx
@@ -36,7 +36,7 @@ describe('data publications api functions', () => {
     ];
     history = createMemoryHistory({
       initialEntries: [
-        '/?sort={"name":"asc"}&filters={"name":{"value":"test","type":"include"}}&page=2&results=20',
+        '/?sort={"name":"asc","title":"desc"}&filters={"name":{"value":"test","type":"include"}}&page=2&results=20',
       ],
     });
     params = new URLSearchParams();
@@ -53,7 +53,7 @@ describe('data publications api functions', () => {
         data: mockData,
       });
 
-      const { result, waitFor } = renderHook(
+      const { result, waitFor, rerender } = renderHook(
         () =>
           useDataPublicationsPaginated([
             {
@@ -74,6 +74,7 @@ describe('data publications api functions', () => {
       await waitFor(() => result.current.isSuccess);
 
       params.append('order', JSON.stringify('name asc'));
+      params.append('order', JSON.stringify('title desc'));
       params.append('order', JSON.stringify('id asc'));
       params.append(
         'where',
@@ -103,6 +104,16 @@ describe('data publications api functions', () => {
         params.toString()
       );
       expect(result.current.data).toEqual(mockData);
+
+      // test that order of sort object triggers new query
+      history.push(
+        '/?sort={"title":"desc", "name":"asc"}&filters={"name":{"value":"test","type":"include"}}&page=2&results=20'
+      );
+      rerender();
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      expect(axios.get as jest.Mock).toHaveBeenCalledTimes(2);
     });
 
     it('sends axios request to fetch paginated data publications and calls handleICATError on failure', async () => {
@@ -143,7 +154,7 @@ describe('data publications api functions', () => {
           : Promise.resolve({ data: mockData[1] })
       );
 
-      const { result, waitFor } = renderHook(
+      const { result, waitFor, rerender } = renderHook(
         () =>
           useDataPublicationsInfinite([
             {
@@ -164,6 +175,7 @@ describe('data publications api functions', () => {
       await waitFor(() => result.current.isSuccess);
 
       params.append('order', JSON.stringify('name asc'));
+      params.append('order', JSON.stringify('title desc'));
       params.append('order', JSON.stringify('id asc'));
       params.append(
         'where',
@@ -219,6 +231,16 @@ describe('data publications api functions', () => {
         mockData[0],
         mockData[1],
       ]);
+
+      // test that order of sort object triggers new query
+      history.push(
+        '/?sort={"title":"desc", "name":"asc"}&filters={"name":{"value":"test","type":"include"}}'
+      );
+      rerender();
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      expect(axios.get as jest.Mock).toHaveBeenCalledTimes(3);
     });
 
     it('sends axios request to fetch infinite data publications and calls handleICATError on failure', async () => {

diff --git a/packages/datagateway-common/src/api/dataPublications.tsx b/packages/datagateway-common/src/api/dataPublications.tsx
@@ -67,7 +67,7 @@ export const useDataPublicationsPaginated = (
     [
       string,
       {
-        sort: SortType;
+        sort: string;
         filters: FiltersType;
         page: number;
         results: number;
@@ -77,11 +77,16 @@ export const useDataPublicationsPaginated = (
   >(
     [
       'dataPublication',
-      { sort, filters, page: page ?? 1, results: results ?? 10 },
+      {
+        sort: JSON.stringify(sort), // need to stringify sort as property order is important!
+        filters,
+        page: page ?? 1,
+        results: results ?? 10,
+      },
       additionalFilters,
     ],
     (params) => {
-      const { sort, filters, page, results } = params.queryKey[1];
+      const { page, results } = params.queryKey[1];
       const startIndex = (page - 1) * results;
       const stopIndex = startIndex + results - 1;
       return fetchDataPublications(
@@ -110,15 +115,13 @@ export const useDataPublicationsInfinite = (
   const location = useLocation();
   const { filters, sort } = parseSearchToQuery(location.search);
 
-  return useInfiniteQuery<
-    DataPublication[],
-    AxiosError,
-    DataPublication[],
-    [string, { sort: SortType; filters: FiltersType }, AdditionalFilters?]
-  >(
-    ['dataPublication', { sort, filters }, additionalFilters],
+  return useInfiniteQuery(
+    [
+      'dataPublication',
+      { sort: JSON.stringify(sort), filters }, // need to stringify sort as property order is important!
+      additionalFilters,
+    ],
     (params) => {
-      const { sort, filters } = params.queryKey[1];
       const offsetParams = params.pageParam ?? { startIndex: 0, stopIndex: 49 };
       return fetchDataPublications(
         apiUrl,

diff --git a/packages/datagateway-common/src/api/datafiles.test.tsx b/packages/datagateway-common/src/api/datafiles.test.tsx
@@ -40,7 +40,7 @@ describe('datafile api functions', () => {
     ];
     history = createMemoryHistory({
       initialEntries: [
-        '/?sort={"name":"asc"}&filters={"name":{"value":"test","type":"include"}}&page=2&results=20',
+        '/?sort={"name":"asc","title":"desc"}&filters={"name":{"value":"test","type":"include"}}&page=2&results=20',
       ],
     });
     params = new URLSearchParams();
@@ -58,7 +58,7 @@ describe('datafile api functions', () => {
         data: mockData,
       });
 
-      const { result, waitFor } = renderHook(
+      const { result, waitFor, rerender } = renderHook(
         () =>
           useDatafilesPaginated([
             {
@@ -76,6 +76,7 @@ describe('datafile api functions', () => {
       await waitFor(() => result.current.isSuccess);
 
       params.append('order', JSON.stringify('name asc'));
+      params.append('order', JSON.stringify('title desc'));
       params.append('order', JSON.stringify('id asc'));
       params.append(
         'where',
@@ -102,6 +103,16 @@ describe('datafile api functions', () => {
         params.toString()
       );
       expect(result.current.data).toEqual(mockData);
+
+      // test that order of sort object triggers new query
+      history.push(
+        '/?sort={"title":"desc", "name":"asc"}&filters={"name":{"value":"test","type":"include"}}&page=2&results=20'
+      );
+      rerender();
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      expect(axios.get as jest.Mock).toHaveBeenCalledTimes(2);
     });
 
     it('sends axios request to fetch paginated datafiles and calls handleICATError on failure', async () => {
@@ -139,7 +150,7 @@ describe('datafile api functions', () => {
           : Promise.resolve({ data: mockData[1] })
       );
 
-      const { result, waitFor } = renderHook(
+      const { result, waitFor, rerender } = renderHook(
         () =>
           useDatafilesInfinite([
             {
@@ -157,6 +168,7 @@ describe('datafile api functions', () => {
       await waitFor(() => result.current.isSuccess);
 
       params.append('order', JSON.stringify('name asc'));
+      params.append('order', JSON.stringify('title desc'));
       params.append('order', JSON.stringify('id asc'));
       params.append(
         'where',
@@ -209,6 +221,16 @@ describe('datafile api functions', () => {
         mockData[0],
         mockData[1],
       ]);
+
+      // test that order of sort object triggers new query
+      history.push(
+        '/?sort={"title":"desc", "name":"asc"}&filters={"name":{"value":"test","type":"include"}}'
+      );
+      rerender();
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      expect(axios.get as jest.Mock).toHaveBeenCalledTimes(3);
     });
 
     it('sends axios request to fetch infinite datafiles and calls handleICATError on failure', async () => {

diff --git a/packages/datagateway-common/src/api/datafiles.tsx b/packages/datagateway-common/src/api/datafiles.tsx
@@ -69,7 +69,7 @@ export const useDatafilesPaginated = (
     [
       string,
       {
-        sort: SortType;
+        sort: string;
         filters: FiltersType;
         page: number;
         results: number;
@@ -79,11 +79,16 @@ export const useDatafilesPaginated = (
   >(
     [
       'datafile',
-      { sort, filters, page: page ?? 1, results: results ?? 10 },
+      {
+        sort: JSON.stringify(sort), // need to stringify sort as property order is important!
+        filters,
+        page: page ?? 1,
+        results: results ?? 10,
+      },
       additionalFilters,
     ],
     (params) => {
-      const { sort, filters, page, results } = params.queryKey[1];
+      const { page, results } = params.queryKey[1];
       const startIndex = (page - 1) * results;
       const stopIndex = startIndex + results - 1;
       return fetchDatafiles(apiUrl, { sort, filters }, additionalFilters, {
@@ -107,15 +112,9 @@ export const useDatafilesInfinite = (
   const location = useLocation();
   const { filters, sort } = parseSearchToQuery(location.search);
 
-  return useInfiniteQuery<
-    Datafile[],
-    AxiosError,
-    Datafile[],
-    [string, { sort: SortType; filters: FiltersType }, AdditionalFilters?]
-  >(
-    ['datafile', { sort, filters }, additionalFilters],
+  return useInfiniteQuery(
+    ['datafile', { sort: JSON.stringify(sort), filters }, additionalFilters], // need to stringify sort as property order is important!
     (params) => {
-      const { sort, filters } = params.queryKey[1];
       const offsetParams = params.pageParam ?? { startIndex: 0, stopIndex: 49 };
       return fetchDatafiles(
         apiUrl,

diff --git a/packages/datagateway-common/src/api/datasets.test.tsx b/packages/datagateway-common/src/api/datasets.test.tsx
@@ -45,7 +45,7 @@ describe('dataset api functions', () => {
     ];
     history = createMemoryHistory({
       initialEntries: [
-        '/?sort={"name":"asc"}&filters={"name":{"value":"test","type":"include"}}&page=2&results=20',
+        '/?sort={"name":"asc","title":"desc"}&filters={"name":{"value":"test","type":"include"}}&page=2&results=20',
       ],
     });
     params = new URLSearchParams();
@@ -126,7 +126,7 @@ describe('dataset api functions', () => {
         data: mockData,
       });
 
-      const { result, waitFor } = renderHook(
+      const { result, waitFor, rerender } = renderHook(
         () =>
           useDatasetsPaginated([
             {
@@ -144,6 +144,7 @@ describe('dataset api functions', () => {
       await waitFor(() => result.current.isSuccess);
 
       params.append('order', JSON.stringify('name asc'));
+      params.append('order', JSON.stringify('title desc'));
       params.append('order', JSON.stringify('id asc'));
       params.append(
         'where',
@@ -170,6 +171,16 @@ describe('dataset api functions', () => {
         params.toString()
       );
       expect(result.current.data).toEqual(mockData);
+
+      // test that order of sort object triggers new query
+      history.push(
+        '/?sort={"title":"desc", "name":"asc"}&filters={"name":{"value":"test","type":"include"}}&page=2&results=20'
+      );
+      rerender();
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      expect(axios.get as jest.Mock).toHaveBeenCalledTimes(2);
     });
 
     it('sends axios request to fetch paginated datasets and calls handleICATError on failure', async () => {
@@ -207,7 +218,7 @@ describe('dataset api functions', () => {
           : Promise.resolve({ data: mockData[1] })
       );
 
-      const { result, waitFor } = renderHook(
+      const { result, waitFor, rerender } = renderHook(
         () =>
           useDatasetsInfinite([
             {
@@ -225,6 +236,7 @@ describe('dataset api functions', () => {
       await waitFor(() => result.current.isSuccess);
 
       params.append('order', JSON.stringify('name asc'));
+      params.append('order', JSON.stringify('title desc'));
       params.append('order', JSON.stringify('id asc'));
       params.append(
         'where',
@@ -277,6 +289,16 @@ describe('dataset api functions', () => {
         mockData[0],
         mockData[1],
       ]);
+
+      // test that order of sort object triggers new query
+      history.push(
+        '/?sort={"title":"desc", "name":"asc"}&filters={"name":{"value":"test","type":"include"}}'
+      );
+      rerender();
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      expect(axios.get as jest.Mock).toHaveBeenCalledTimes(3);
     });
 
     it('sends axios request to fetch infinite datasets and calls handleICATError on failure', async () => {

diff --git a/packages/datagateway-common/src/api/datasets.tsx b/packages/datagateway-common/src/api/datasets.tsx
@@ -108,7 +108,7 @@ export const useDatasetsPaginated = (
     [
       string,
       {
-        sort: SortType;
+        sort: string;
         filters: FiltersType;
         page: number;
         results: number;
@@ -118,11 +118,16 @@ export const useDatasetsPaginated = (
   >(
     [
       'dataset',
-      { sort, filters, page: page ?? 1, results: results ?? 10 },
+      {
+        sort: JSON.stringify(sort), // need to stringify sort as property order is important!
+        filters,
+        page: page ?? 1,
+        results: results ?? 10,
+      },
       additionalFilters,
     ],
     (params) => {
-      const { sort, filters, page, results } = params.queryKey[1];
+      const { page, results } = params.queryKey[1];
       const startIndex = (page - 1) * results;
       const stopIndex = startIndex + results - 1;
       return fetchDatasets(apiUrl, { sort, filters }, additionalFilters, {
@@ -146,15 +151,9 @@ export const useDatasetsInfinite = (
   const location = useLocation();
   const { filters, sort } = parseSearchToQuery(location.search);
 
-  return useInfiniteQuery<
-    Dataset[],
-    AxiosError,
-    Dataset[],
-    [string, { sort: SortType; filters: FiltersType }, AdditionalFilters?]
-  >(
-    ['dataset', { sort, filters }, additionalFilters],
+  return useInfiniteQuery(
+    ['dataset', { sort: JSON.stringify(sort), filters }, additionalFilters], // need to stringify sort as property order is important!
     (params) => {
-      const { sort, filters } = params.queryKey[1];
       const offsetParams = params.pageParam ?? { startIndex: 0, stopIndex: 49 };
       return fetchDatasets(
         apiUrl,