MAT-7731 Added an option to display All TestCases on List Page

package.json

@@ -63,7 +63,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.1.0",
     "jest-cli": "^27.1.0",
-    "jsonpath-plus": "^7.2.0",
+    "jsonpath-plus": "^10.1.0",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "postcss": "^8.3.6",
     "postcss-loader": "^6.1.1",

src/components/testCaseLanding/common/Hooks/UseTestCases.tsx

@@ -81,7 +81,7 @@ function UseFetchTestCases({ measureId, setErrors }) {
     visibleItems: null,
     offset: 0,
     page: 1,
-    limit: 10,
+    limit: 10 || "All",
     count: undefined,
     currentSlice: [],
     canGoNext: false,
@@ -105,7 +105,10 @@ function UseFetchTestCases({ measureId, setErrors }) {
   const filter: string = values?.filter ? values.filter.toString() : "";
   // pull info from some query url
   let searchQuery: string = values?.search ? values.search.toString() : "";
-  const curLimit = (values.limit && Number(values.limit)) || 10;
+  const curLimit =
+    values.limit === "All" && testCases?.length > 0
+      ? testCases?.length
+      : Number(values.limit) || 10;
   const curPage = (values.page && Number(values.page)) || 1;
   let navigate = useNavigate();
 
@@ -132,7 +135,7 @@ function UseFetchTestCases({ measureId, setErrors }) {
         "testCasesPageOptions",
         JSON.stringify({
           page: curPage,
-          limit: curLimit,
+          limit: (values.limit === "All" && values.limit) || curLimit,
           filter,
           search: searchQuery,
         })
@@ -184,7 +187,7 @@ function UseFetchTestCases({ measureId, setErrors }) {
           visibleItems: currentSlice.length,
           offset: start,
           page: curPage,
-          limit: curLimit,
+          limit: (values.limit === "All" && values.limit) || curLimit,
           count: Math.ceil(filteredTestCases.length / curLimit),
           currentSlice,
           handlePageChange,
@@ -204,7 +207,7 @@ function UseFetchTestCases({ measureId, setErrors }) {
           visibleItems: currentSlice.length,
           offset: start,
           page: curPage,
-          limit: curLimit,
+          limit: (values.limit === "All" && values.limit) || curLimit,
           count,
           currentSlice,
           handlePageChange,

src/components/testCaseLanding/common/Hooks/useTestCases.test.tsx

@@ -1,13 +1,13 @@
-import React from "react";
+import * as React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
-import UseFetchTestCases, {
-  customSort,
-  sortFilteredTestCases,
-} from "./UseTestCases";
-import useTestCaseServiceApi from "../../../../api/useTestCaseServiceApi";
+import UseFetchTestCases, { sortFilteredTestCases } from "./UseTestCases";
+import useTestCaseServiceApi, {
+  TestCaseServiceApi,
+} from "../../../../api/useTestCaseServiceApi";
 import { renderHook, act } from "@testing-library/react-hooks";
-import { measureStore } from "@madie/madie-util";
+import { TestCase } from "@madie/madie-models";
+import { SortingState } from "@tanstack/react-table";
 
 const mockNavigate = jest.fn();
 
@@ -55,14 +55,20 @@ const MockComponent = ({ measureId, setErrors }) => {
   );
 };
 
+jest.mock("../../../../api/useTestCaseServiceApi");
+const useTestCaseServiceMock =
+  useTestCaseServiceApi as jest.Mock<TestCaseServiceApi>;
+const mockGetTestCasesByMeasureId = jest.fn();
+const useTestCaseServiceMockResolved = {
+  getTestCasesByMeasureId: mockGetTestCasesByMeasureId,
+} as unknown as TestCaseServiceApi;
+
 describe("UseFetchTestCases", () => {
   const mockSetErrors = jest.fn();
-  const mockGetTestCasesByMeasureId = jest.fn();
-
   beforeEach(() => {
     jest.clearAllMocks();
-    useTestCaseServiceApi.mockReturnValue({
-      getTestCasesByMeasureId: mockGetTestCasesByMeasureId,
+    useTestCaseServiceMock.mockImplementation(() => {
+      return useTestCaseServiceMockResolved;
     });
   });
 
@@ -126,17 +132,39 @@ describe("UseFetchTestCases", () => {
     expect(mockNavigate).toHaveBeenCalledWith(
       expect.stringContaining("limit=20")
     );
+
+    act(() => {
+      result.current.testCasePage.handleLimitChange({
+        target: { value: "All" },
+      });
+    });
+    expect(mockNavigate).toHaveBeenCalledWith(
+      expect.stringContaining("limit=All")
+    );
   });
 
   it("should save pagination options to local storage", () => {
     const { result } = renderHook(() =>
       UseFetchTestCases({ measureId: "123", setErrors: mockSetErrors })
     );
+    const testCase1 = {
+      id: "1234",
+      title: "Test Case 1",
+      createdBy: "testuser",
+      description: "Test IPP",
+      series: "SeriesA",
+      json: `{"test":"test" BAD BAD JSON - DEFINITELY INVALID }`,
+    } as TestCase;
+    const testCase2 = {
+      id: "1234",
+      title: "Test Case 2",
+      createdBy: "testuser",
+      description: "Test IPP",
+      series: "SeriesA",
+      json: `{"test":"test" BAD BAD JSON - DEFINITELY INVALID }`,
+    } as TestCase;
     act(() => {
-      result.current.setTestCases([
-        { title: "Test Case 1" },
-        { title: "Test Case 2" },
-      ]);
+      result.current.setTestCases([testCase1, testCase2]);
     });
 
     expect(window.localStorage.getItem("testCasesPageOptions")).toContain(
@@ -248,12 +276,12 @@ describe("UseFetchTestCases", () => {
   });
   // forget it. exporting the lines this doesn't reach.
   it("should sort test cases based on sorting state", () => {
-    const testCaseList: TestCase[] = [
+    const testCaseList = [
       { title: "apple", validResource: true, lastModifiedAt: new Date() },
       { title: "banana", validResource: true, lastModifiedAt: new Date() },
       { title: "cat", validResource: true, lastModifiedAt: new Date() },
       { title: "zebra", validResource: true, lastModifiedAt: new Date() },
-    ];
+    ] as unknown as TestCase[];
 
     const sorting: SortingState = [{ id: "title", desc: false }];
     const sortedCasesAsc = sortFilteredTestCases(sorting, testCaseList);
@@ -269,10 +297,10 @@ describe("UseFetchTestCases", () => {
   });
 
   it("should return original list when no sorting is applied", () => {
-    const testCaseList: TestCase[] = [
+    const testCaseList = [
       { title: "apple", validResource: true, lastModifiedAt: new Date() },
       { title: "banana", validResource: true, lastModifiedAt: new Date() },
-    ];
+    ] as unknown as TestCase[];
 
     const sortedCases = sortFilteredTestCases([], testCaseList);
     expect(sortedCases).toEqual(testCaseList);

src/components/testCaseLanding/qdm/TestCaseList.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import "twin.macro";
 import "styled-components/macro";
-import * as _ from "lodash";
-import { uniqWith } from "lodash";
+import _ from "lodash";
 import {
   Group,
   GroupedStratificationDto,
@@ -16,11 +15,7 @@ import {
 import { useParams, useNavigate, useLocation } from "react-router-dom";
 import queryString from "query-string";
 import calculationService from "../../../api/CalculationService";
-import {
-  checkUserCanEdit,
-  measureStore,
-  useFeatureFlags,
-} from "@madie/madie-util";
+import { checkUserCanEdit, useFeatureFlags } from "@madie/madie-util";
 import CreateCodeCoverageNavTabs from "./CreateCodeCoverageNavTabs";
 import CreateNewTestCaseDialog from "../../createTestCase/CreateNewTestCaseDialog";
 import {
@@ -143,7 +138,6 @@ const TestCaseList = (props: TestCaseListProps) => {
     onToastClose,
   } = UseToast();
   const excelExportService = useRef(useExcelExportService());
-  const { updateMeasure } = measureStore;
   const calculation = useRef(calculationService());
   const qdmCalculation = useRef(qdmCalculationService());
   const [canEdit, setCanEdit] = useState<boolean>(false);
@@ -329,12 +323,12 @@ const TestCaseList = (props: TestCaseListProps) => {
       )
       .filter((result) => result.final !== "NA");
     // get a list of all unique used clauses
-    const allUniqueClauses = uniqWith(
+    const allUniqueClauses = _.uniqWith(
       allRelevantClauses,
       (c1, c2) => c1.libraryName === c2.libraryName && c1.localId === c2.localId
     ).sort((a, b) => a.localId - b.localId);
     // get a list of all unique covered clauses
-    const coveredClauses = uniqWith(
+    const coveredClauses = _.uniqWith(
       allRelevantClauses.filter((clause) => clause.final === "TRUE"),
       (c1, c2) => c1.libraryName === c2.libraryName && c1.localId === c2.localId
     );
@@ -803,7 +797,7 @@ const TestCaseList = (props: TestCaseListProps) => {
                       <Pagination
                         totalItems={totalItems}
                         visibleItems={visibleItems}
-                        limitOptions={[10, 25, 50]}
+                        limitOptions={[10, 25, 50, "All"]}
                         offset={offset}
                         handlePageChange={handlePageChange}
                         handleLimitChange={handleLimitChange}