MAT-8048: modify abortController.signal to pass controller instead. I…

… don't know if this breaks it

src/api/useMeasureServiceApi.tsx

@@ -380,9 +380,10 @@ export class MeasureServiceApi {
     limit: number = 25,
     page: number = 0,
     searchCriteria: any,
-    signal
+    abortController: AbortController
   ): Promise<any> {
     try {
+      console.log("what are my ssearchCriteria", searchCriteria);
       const response = await axios.put<any>(
         `${this.baseUrl}/measures/searches`,
         searchCriteria,
@@ -396,7 +397,7 @@ export class MeasureServiceApi {
             limit,
             page,
           },
-          signal,
+          signal: abortController.signal,
         }
       );
       return response.data;

src/components/editMeasure/testCases/components/testCaseLanding/common/copyTestCases/CopyTestCaseDialog.test.tsx

@@ -1,12 +1,14 @@
 import CopyTestCaseDialog from "./CopyTestCaseDialog";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 import * as React from "react";
 import { Measure, MeasureSet, Model, TestCase } from "@madie/madie-models";
 import * as _ from "lodash";
 import useMeasureServiceApi, {
   MeasureServiceApi,
 } from "../../../../../../../api/useMeasureServiceApi";
 import userEvent from "@testing-library/user-event";
+import { Simulate } from "react-dom/test-utils";
+const { getByTestId } = screen;
 
 const MEASURE_OWNER = "test.user";
 
@@ -230,6 +232,108 @@ describe("Copy Test Case Dialog Component", () => {
     });
   });
 
+  it("Filter and Search, changes, fire, clear", async () => {
+    const testFn = jest.fn().mockResolvedValue(mockMeasureSearchResponse);
+    const useMeasureServiceMockResolvedMultiple = {
+      searchMeasuresByCriteria: testFn,
+    } as unknown as MeasureServiceApi;
+
+    useMeasureServiceMock.mockImplementation(() => {
+      return useMeasureServiceMockResolvedMultiple;
+    });
+    const test = new AbortController();
+    render(
+      <CopyTestCaseDialog
+        open={true}
+        onClose={() => jest.fn()}
+        onSubmit={() => jest.fn()}
+        measure={mockCurrentMeasure}
+      />
+    );
+
+    await waitFor(() => expect(testFn).toHaveBeenCalledTimes(1));
+    const table = await screen.findByTestId("measure-list-tbl");
+    const tableHeaders = table.querySelectorAll("thead th");
+    expect(tableHeaders[1]).toHaveTextContent("Measure Name");
+    expect(tableHeaders[2]).toHaveTextContent("Version");
+    expect(tableHeaders[3]).toHaveTextContent("CMS ID");
+    const tableRows = table.querySelectorAll("tbody tr");
+    expect(tableRows[0]).toHaveTextContent(
+      otherMeasuresOwnedByUser[0].measureName
+    );
+    expect(tableRows[0]).toHaveTextContent(otherMeasuresOwnedByUser[0].version);
+    expect(tableRows[0]).toHaveTextContent(
+      _.toString(otherMeasuresOwnedByUser[0].measureSet.cmsId)
+    );
+    //changes
+    const filterInput = getByTestId(
+      "filter-by-select-input"
+    ) as HTMLInputElement;
+    expect(filterInput).toBeInTheDocument();
+    expect(filterInput.value).toBe("");
+    fireEvent.change(filterInput, {
+      target: { value: "Measure" },
+    });
+    expect(filterInput.value).toBe("Measure");
+
+    // fire condition 1
+    const searchFieldInput = getByTestId("test-case-list-search-input");
+    expect(searchFieldInput.value).toBe("");
+    userEvent.type(searchFieldInput, "test{enter}");
+
+    // await waitFor(() => expect(searchFieldInput.value).toBe("test"));
+    await waitFor(() => expect(testFn).toHaveBeenCalledTimes(2));
+    expect(testFn).toHaveBeenNthCalledWith(
+      2, // Second call
+      true,
+      5,
+      0,
+      {
+        draft: true,
+        excludeByMeasureIds: ["1"],
+        model: "QDM v5.6",
+        optionalSearchProperties: ["measureName"],
+        searchField: "test",
+      },
+      test
+    );
+    // Finally, check the second call for the correct values
+    const clearIcon = getByTestId("ClearIcon");
+    userEvent.click(clearIcon);
+    await waitFor(() => expect(testFn).toHaveBeenCalledTimes(3));
+    expect(testFn).toHaveBeenNthCalledWith(
+      3,
+      true,
+      5,
+      0,
+      {
+        draft: true,
+        excludeByMeasureIds: ["1"],
+        model: "QDM v5.6",
+        optionalSearchProperties: [],
+        searchField: "",
+      },
+      test
+    );
+
+    userEvent.type(searchFieldInput, "test{enter}");
+    await waitFor(() => expect(testFn).toHaveBeenCalledTimes(4));
+    expect(testFn).toHaveBeenNthCalledWith(
+      4,
+      true,
+      5,
+      0,
+      {
+        draft: true,
+        excludeByMeasureIds: ["1"],
+        model: "QDM v5.6",
+        optionalSearchProperties: ["measureName", "version", "cmsId"],
+        searchField: "test",
+      },
+      test
+    );
+  });
+
   it("should display a text when user doesn't have any other measures from same model", async () => {
     useMeasureServiceMock.mockImplementation(() => {
       return useMeasureServiceMockResolvedWithNoMeasure;

src/components/editMeasure/testCases/components/testCaseLanding/common/copyTestCases/CopyTestCaseDialog.tsx

@@ -48,7 +48,6 @@ const filterMap = {
 const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
   const measureSearchApi = useRef(useMeasureServiceApi());
   const abortController = useRef(null);
-
   // utilities for pagination
   const [limit, setLimit] = useState(5);
   const [page, setPage] = useState(0);
@@ -62,8 +61,10 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
   const [filterBy, setFilterBy] = useState<string>("");
   const [searchField, setSearchField] = useState<string>("");
 
-  const [finalFilterBy, setFinalFilterBy] = useState<string>("");
-  const [finalSearchField, setFinalSearchField] = useState<string>("");
+  const [finalSearchAndFilterby, setFinalSearchAndFilterby] = useState({
+    finalSearchField: "",
+    finalFilterBy: "",
+  });
 
   const handleSearch = (e) => {
     setSearchField(e.target.value);
@@ -75,35 +76,25 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
   const [measureList, setMeasureList] = useState<Measure[]>([]);
   const [offset, setOffset] = useState<number>(0);
   const [loading, setLoading] = useState<boolean>(false);
-
-  console.log("filterBy", filterBy, finalFilterBy);
-  console.log("searchValue", searchField, finalSearchField);
   const fetchMeasures = useCallback(() => {
     if (!measure || !measure.model || !measure.id || !open) {
       return;
     }
     setLoading(true);
     abortController.current = new AbortController();
+    const { finalSearchField, finalFilterBy } = finalSearchAndFilterby;
     const optionalSearchProperties = [];
     if (finalFilterBy) {
       optionalSearchProperties.push(filterMap[finalFilterBy]);
     }
     // We have a condition when we first load the table where we don't want to apply the filters.
     // We want this to still fire, so we only want to append all possible filters for when "-" is selected in filters, if a searchValue is also provided
     if (!finalFilterBy && finalSearchField) {
-      console.log("trigger");
       // apply all conditions
       filterByOptions.forEach((condition) => {
         optionalSearchProperties.push(filterMap[condition]);
       });
     }
-    console.log("obj", {
-      searchField: finalSearchField,
-      model: measure.model,
-      excludeByMeasureIds: [measure.id],
-      draft: true,
-      optionalSearchProperties,
-    });
     measureSearchApi.current
       .searchMeasuresByCriteria(
         true,
@@ -116,7 +107,7 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
           draft: true,
           optionalSearchProperties,
         },
-        abortController.current.signal
+        abortController.current
       )
       .then((response) => {
         const {
@@ -141,7 +132,15 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
       });
     // usually we'd attach the filter conditions as url params, but I don't think it makes sense if it's part of a dialog.
     // may be a smarter way to do this using a non controlled component, but it's not apparent to me now
-  }, [measure, open, limit, page, finalFilterBy, finalSearchField]);
+  }, [
+    measure,
+    limit,
+    page,
+    finalSearchAndFilterby,
+    filterMap,
+    abortController,
+    open,
+  ]);
 
   useEffect(() => {
     fetchMeasures();
@@ -150,7 +149,7 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
         abortController.current.abort();
       }
     };
-  }, [fetchMeasures]);
+  }, [fetchMeasures, measure?.id]);
 
   const columns = useMemo<ColumnDef<Measure>[]>(() => {
     const columnDefs = [];
@@ -238,15 +237,17 @@ const CopyTestCaseDialog = ({ open, onClose, onSubmit, measure }) => {
   });
 
   const finalizeSearchCriteria = () => {
-    setFinalFilterBy(filterBy);
-    setFinalSearchField(searchField);
+    const finalSearchAndFilter = {
+      finalSearchField: searchField,
+      finalFilterBy: filterBy,
+    };
+    setFinalSearchAndFilterby(finalSearchAndFilter);
   };
 
   const blankSearchCriteria = () => {
     setSearchField("");
     setFilterBy("");
-    setFinalFilterBy("");
-    setFinalSearchField("");
+    setFinalSearchAndFilterby({ finalFilterBy: "", finalSearchField: "" });
   };
 
   return (