test: add a test for the edge case in mapping on parameter change (#44610)

* test: add a test for the edge case in mapping on parameter change

* fixup! test: add a test for the edge case in mapping on parameter change

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.tsx

@@ -87,7 +87,6 @@ export function DashCardCardParameterMapper({
   useResetParameterMapping({
     editingParameter,
     isNative,
-    isDisabled,
     dashcardId: dashcard.id,
   });
 

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.unit.spec.jsx

@@ -5,6 +5,7 @@ import {
   renderWithProviders,
   screen,
 } from "__support__/ui";
+import * as parameterActions from "metabase/dashboard/actions/parameters";
 import { getMetadata } from "metabase/selectors/metadata";
 import Question from "metabase-lib/v1/Question";
 import {
@@ -41,20 +42,20 @@ const metadata = getMetadata(state); // metabase-lib Metadata instance
 const setup = options => {
   const card = options.card ?? createMockCard();
 
-  renderWithProviders(
+  const { rerender } = renderWithProviders(
     <DashCardCardParameterMapper
       card={card}
       dashcard={createMockDashboardCard({ card })}
       question={new Question(card, metadata)}
       editingParameter={createMockParameter()}
-      isRecentlyAutoConnected={options.isRecentlyAutoConnected ?? false}
+      isRecentlyAutoConnected={false}
       mappingOptions={[]}
-      metadata={metadata}
-      setParameterMapping={jest.fn()}
       isMobile={false}
       {...options}
     />,
   );
+
+  return { rerender };
 };
 
 describe("DashCardCardParameterMapper", () => {
@@ -411,4 +412,64 @@ describe("DashCardCardParameterMapper", () => {
       expect(screen.queryByText(/Variable to map to/i)).not.toBeInTheDocument();
     });
   });
+
+  it("should reset mapping on parameter change", () => {
+    const card = createMockCard({
+      dataset_query: createMockNativeDatasetQuery({
+        dataset_query: {
+          native: createMockNativeQuery({
+            query: "SELECT * FROM ORDERS WHERE tax = {{ tax }}",
+            "template-tags": [
+              createMockTemplateTag({
+                name: "tax",
+                type: "number/=",
+              }),
+            ],
+          }),
+        },
+      }),
+    });
+
+    jest.spyOn(parameterActions, "resetParameterMapping");
+
+    const question = new Question(card, metadata);
+    const dashcard = createMockDashboardCard({ card });
+    const editingParameter = createMockParameter({ type: "number/=" });
+    const props = {
+      card,
+      question,
+      dashcard,
+      target: ["variable", ["template-tag", "tax"]],
+      editingParameter,
+      mappingOptions: [
+        {
+          name: "Tax",
+          icon: "int",
+          isForeign: false,
+          target: ["variable", ["template-tag", "tax"]],
+        },
+      ],
+      isRecentlyAutoConnected: false,
+      isMobile: false,
+    };
+
+    expect(parameterActions.resetParameterMapping).not.toHaveBeenCalled();
+
+    const { rerender } = setup(props);
+
+    rerender(
+      <DashCardCardParameterMapper
+        {...props}
+        editingParameter={{
+          ...editingParameter,
+          type: "number/!=",
+        }}
+      />,
+    );
+
+    expect(parameterActions.resetParameterMapping).toHaveBeenCalledWith(
+      editingParameter.id,
+      dashcard.id,
+    );
+  });
 });

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/hooks.ts

@@ -9,12 +9,10 @@ import type { DashCardId, Parameter } from "metabase-types/api";
 export function useResetParameterMapping({
   editingParameter,
   isNative,
-  isDisabled,
   dashcardId,
 }: {
   editingParameter: Parameter | null | undefined;
   isNative: boolean;
-  isDisabled: boolean;
   dashcardId: DashCardId;
 }) {
   const prevParameter = usePrevious(editingParameter);
@@ -25,11 +23,7 @@ export function useResetParameterMapping({
       return;
     }
 
-    if (
-      isNative &&
-      isDisabled &&
-      prevParameter.type !== editingParameter.type
-    ) {
+    if (isNative && prevParameter.type !== editingParameter.type) {
       const subType = getParameterSubType(editingParameter);
       const prevSubType = getParameterSubType(prevParameter);
 
@@ -37,12 +31,5 @@ export function useResetParameterMapping({
         dispatch(resetParameterMapping(editingParameter.id, dashcardId));
       }
     }
-  }, [
-    isNative,
-    isDisabled,
-    prevParameter,
-    editingParameter,
-    dispatch,
-    dashcardId,
-  ]);
+  }, [isNative, prevParameter, editingParameter, dispatch, dashcardId]);
 }