Send dev harness event when it is a stubbed action

gadget-inc · Sep 11, 2024 · bf8f5bb · bf8f5bb
1 parent 4a605de
commit bf8f5bb
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 4 deletions.
diff --git a/packages/api-client-core/src/GadgetFunctions.ts b/packages/api-client-core/src/GadgetFunctions.ts
@@ -136,6 +136,21 @@ export interface ActionFunctionMetadata<OptionsT, VariablesT, SelectionT, Schema
   hasCreateOrUpdateEffect?: boolean;
 }
 
+export type StubbedActionReason = "MissingApiTrigger";
+
+export interface StubbedActionFunctionMetadata {
+  type: "stubbedAction";
+  functionName: string;
+  operationName?: string;
+  errorMessage: string;
+  modelApiIdentifier?: string;
+  variables: VariablesOptions;
+  reason: StubbedActionReason;
+  dataPath: string;
+}
+
+export type StubbedActionFunction<OptionsT> = StubbedActionFunctionMetadata & ActionWithNoIdAndNoVariables<OptionsT>;
+
 export type ActionFunction<OptionsT, VariablesT, SelectionT, SchemaT, DefaultsT> = ActionFunctionMetadata<
   OptionsT,
   VariablesT,

diff --git a/packages/react/spec/useAction.spec.tsx b/packages/react/spec/useAction.spec.tsx
@@ -805,4 +805,38 @@ describe("useAction", () => {
 
     expect(result.current[0]).toBe(beforeObject);
   });
+
+  test("sends a stubbedActionError event when the action is stubbed", () => {
+    let eventDispatched: CustomEvent | undefined;
+
+    globalThis.addEventListener("gadget:devharness:stubbedActionError", (event) => {
+      eventDispatched = event as CustomEvent;
+    });
+
+    const { result, rerender } = renderHook(
+      () =>
+        useAction({
+          // @ts-expect-error intentionally passing the wrong type
+          type: "stubbedAction",
+          reason: "MissingApiTrigger",
+          dataPath: "fakePath",
+          functionName: "fakeFunction",
+          modelApiIdentifier: "fakeModel",
+          variables: {},
+        }),
+      {
+        wrapper: MockClientWrapper(relatedProductsApi),
+      }
+    );
+
+    expect(eventDispatched).toBeTruthy();
+    expect(eventDispatched!.detail).toEqual({
+      reason: "MissingApiTrigger",
+      action: {
+        actionApiIdentifier: "fakeFunction",
+        dataPath: "fakePath",
+        modelApiIdentifier: "fakeModel",
+      },
+    });
+  });
 });
diff --git a/packages/react/spec/useGlobalAction.spec.ts b/packages/react/spec/useGlobalAction.spec.ts
@@ -255,4 +255,36 @@ describe("useGlobalAction", () => {
 
     expect(result.current[0]).toBe(beforeObject);
   });
+
+  test("sends a stubbedActionError event when the action is stubbed", () => {
+    let eventDispatched: CustomEvent | undefined;
+
+    globalThis.addEventListener("gadget:devharness:stubbedActionError", (event) => {
+      eventDispatched = event as CustomEvent;
+    });
+
+    const { result, rerender } = renderHook(
+      () =>
+        useGlobalAction({
+          // @ts-expect-error intentionally passing the wrong type
+          type: "stubbedAction",
+          reason: "MissingApiTrigger",
+          dataPath: "fakePath",
+          functionName: "fakeFunction",
+          variables: {},
+        }),
+      {
+        wrapper: MockClientWrapper(bulkExampleApi),
+      }
+    );
+
+    expect(eventDispatched).toBeTruthy();
+    expect(eventDispatched!.detail).toEqual({
+      reason: "MissingApiTrigger",
+      action: {
+        actionApiIdentifier: "fakeFunction",
+        dataPath: "fakePath",
+      },
+    });
+  });
 });
diff --git a/packages/react/src/useAction.ts b/packages/react/src/useAction.ts
@@ -1,4 +1,11 @@
-import type { ActionFunction, DefaultSelection, GadgetRecord, LimitToKnownKeys, Select } from "@gadgetinc/api-client-core";
+import type {
+  ActionFunction,
+  DefaultSelection,
+  GadgetRecord,
+  LimitToKnownKeys,
+  Select,
+  StubbedActionFunction,
+} from "@gadgetinc/api-client-core";
 import {
   actionOperation,
   capitalizeIdentifier,
@@ -7,7 +14,7 @@ import {
   hydrateRecord,
   namespaceDataPath,
 } from "@gadgetinc/api-client-core";
-import { useCallback, useContext, useMemo } from "react";
+import { useCallback, useContext, useEffect, useMemo } from "react";
 import type { AnyVariables, OperationContext, UseMutationState } from "urql";
 import { GadgetUrqlClientContext } from "./GadgetProvider.js";
 import { useGadgetMutation } from "./useGadgetMutation.js";
@@ -62,6 +69,28 @@ export const useAction = <
 > => {
   if (!useContext(GadgetUrqlClientContext)) throw new Error(noProviderErrorMessage);
 
+  useEffect(() => {
+    if (action.type === ("stubbedAction" as string)) {
+      const stubbedAction = action as unknown as StubbedActionFunction<GivenOptions>;
+      if (!("reason" in stubbedAction) || !("dataPath" in stubbedAction)) {
+        // Don't dispatch an event if the generated client has not yet been updated with the updated parameters
+        return;
+      }
+
+      const event = new CustomEvent("gadget:devharness:stubbedActionError", {
+        detail: {
+          reason: stubbedAction.reason,
+          action: {
+            actionApiIdentifier: stubbedAction.functionName,
+            modelApiIdentifier: stubbedAction.modelApiIdentifier,
+            dataPath: stubbedAction.dataPath,
+          },
+        },
+      });
+      globalThis.dispatchEvent(event);
+    }
+  }, []);
+
   const memoizedOptions = useStructuralMemo(options);
   const plan = useMemo(() => {
     return actionOperation(

diff --git a/packages/react/src/useGlobalAction.ts b/packages/react/src/useGlobalAction.ts
@@ -1,6 +1,6 @@
-import type { GlobalActionFunction } from "@gadgetinc/api-client-core";
+import type { GlobalActionFunction, StubbedActionFunction } from "@gadgetinc/api-client-core";
 import { get, globalActionOperation, namespaceDataPath } from "@gadgetinc/api-client-core";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import type { OperationContext, UseMutationState } from "urql";
 import { useGadgetMutation } from "./useGadgetMutation.js";
 import type { ActionHookResult } from "./utils.js";
@@ -30,6 +30,27 @@ import { ErrorWrapper } from "./utils.js";
 export const useGlobalAction = <F extends GlobalActionFunction<any>>(
   action: F
 ): ActionHookResult<any, Exclude<F["variablesType"], null | undefined>> => {
+  useEffect(() => {
+    if (action.type === ("stubbedAction" as string)) {
+      const stubbedAction = action as unknown as StubbedActionFunction<any>;
+      if (!("reason" in stubbedAction) || !("dataPath" in stubbedAction)) {
+        // Don't dispatch an event if the generated client has not yet been updated with the updated parameters
+        return;
+      }
+
+      const event = new CustomEvent("gadget:devharness:stubbedActionError", {
+        detail: {
+          reason: stubbedAction.reason,
+          action: {
+            actionApiIdentifier: stubbedAction.functionName,
+            dataPath: stubbedAction.dataPath,
+          },
+        },
+      });
+      globalThis.dispatchEvent(event);
+    }
+  }, []);
+
   const plan = useMemo(() => {
     return globalActionOperation(action.operationName, action.variables, action.namespace);
   }, [action]);