major(nova-react-test-utils): rewrite EventingProvider to be Eventing…

…Interceptor (#131) * use interceptor instead of eventing * Change files * fix stories --------- Co-authored-by: Stanislaw Wilczynski <[email protected]>
microsoft · Jan 14, 2025 · 6dfd060 · 6dfd060
1 parent a8ccff2
commit 6dfd060
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 66 deletions.
diff --git a/change/@nova-examples-c53a2cfc-e80c-4b74-9fb5-7d5f0817ff39.json b/change/@nova-examples-c53a2cfc-e80c-4b74-9fb5-7d5f0817ff39.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "use interceptor instead of eventing",
+  "packageName": "@nova/examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@nova-react-test-utils-8f99fd8f-e132-4ff4-8ae4-0ef1480bd148.json b/change/@nova-react-test-utils-8f99fd8f-e132-4ff4-8ae4-0ef1480bd148.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "rewrite evetingprovider to eventinginterceptor",
+  "packageName": "@nova/react-test-utils",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/examples/src/apollo/Feedback/Feedback.stories.tsx b/packages/examples/src/apollo/Feedback/Feedback.stories.tsx
@@ -1,6 +1,6 @@
 import { graphql } from "@nova/react";
 import {
-  EventingProvider,
+  EventingInterceptor,
   getNovaDecorator,
   getNovaEnvironmentForStory,
   type WithNovaEnvironment,
@@ -82,6 +82,8 @@ export const Like: Story = {
     const container = within(context.canvasElement);
     const likeButton = await container.findByRole("button", { name: "Like" });
     await userEvent.click(likeButton);
+
+    await container.findByRole("button", { name: "Unlike" });
   },
 };
 
@@ -110,12 +112,16 @@ const FeedbackWithDeleteDialog = (
   const [open, setOpen] = React.useState(false);
   const [text, setText] = React.useState("");
   return (
-    <EventingProvider<typeof events>
+    <EventingInterceptor<typeof events>
       eventMap={{
         onDeleteFeedback: (eventWrapper) => {
           setOpen(true);
           setText(eventWrapper.event.data().feedbackText);
-          return Promise.resolve();
+          return Promise.resolve(undefined);
+        },
+        feedbackTelemetry: (eventWrapper) => {
+          console.log("Telemetry event", eventWrapper.event.data());
+          return Promise.resolve(eventWrapper);
         },
       }}
     >
@@ -125,7 +131,7 @@ const FeedbackWithDeleteDialog = (
         <button onClick={() => setOpen(false)}>Cancel</button>
         Are you sure you want to delete feedback "{text}"
       </dialog>
-    </EventingProvider>
+    </EventingInterceptor>
   );
 };
 

diff --git a/packages/examples/src/relay/Feedback/Feedback.stories.tsx b/packages/examples/src/relay/Feedback/Feedback.stories.tsx
@@ -5,7 +5,7 @@ import {
   MockPayloadGenerator as PayloadGenerator,
   type StoryObjWithoutFragmentRefs,
   type WithNovaEnvironment,
-  EventingProvider,
+  EventingInterceptor,
 } from "@nova/react-test-utils/relay";
 import type { Meta } from "@storybook/react";
 import { userEvent, waitFor, within, expect } from "@storybook/test";
@@ -104,9 +104,10 @@ export const Like: Story = {
       const operation = mock.getMostRecentOperation();
       await expect(operation).toBeDefined();
     });
-    await mock.resolveMostRecentOperation((operation) => {
+    mock.resolveMostRecentOperation((operation) => {
       return MockPayloadGenerator.generate(operation, likeResolvers);
     });
+    await container.findByRole("button", { name: "Unlike" });
   },
 };
 
@@ -135,12 +136,16 @@ const FeedbackWithDeleteDialog = (
   const [open, setOpen] = React.useState(false);
   const [text, setText] = React.useState("");
   return (
-    <EventingProvider<typeof events>
+    <EventingInterceptor<typeof events>
       eventMap={{
         onDeleteFeedback: (eventWrapper) => {
           setOpen(true);
           setText(eventWrapper.event.data().feedbackText);
-          return Promise.resolve();
+          return Promise.resolve(undefined);
+        },
+        feedbackTelemetry: (eventWrapper) => {
+          console.log("Telemetry event", eventWrapper.event.data());
+          return Promise.resolve(eventWrapper);
         },
       }}
     >
@@ -149,7 +154,7 @@ const FeedbackWithDeleteDialog = (
         <button onClick={() => setOpen(false)}>Cancel</button>
         Are you sure you want to delete feedback "{text}"
       </dialog>
-    </EventingProvider>
+    </EventingInterceptor>
   );
 };
 

diff --git a/packages/examples/src/relay/pure-relay/Feedback.stories.tsx b/packages/examples/src/relay/pure-relay/Feedback.stories.tsx
@@ -3,7 +3,7 @@ import {
   getNovaDecorator,
   getNovaEnvironmentForStory,
   type WithNovaEnvironment,
-  EventingProvider,
+  EventingInterceptor,
   getOperationName,
   getOperationType,
   type StoryObjWithoutFragmentRefs,
@@ -98,7 +98,6 @@ export const Liked: Story = {
 };
 
 const likeResolvers = {
-  Feedback: () => sampleFeedback,
   FeedbackLikeMutationResult: () => ({
     feedback: {
       ...sampleFeedback,
@@ -108,11 +107,7 @@ const likeResolvers = {
 };
 
 export const Like: Story = {
-  parameters: {
-    novaEnvironment: {
-      resolvers: likeResolvers,
-    },
-  } satisfies WithNovaEnvironment<FeedbackStoryRelayQuery, TypeMap>,
+  parameters: Primary.parameters,
   play: async (context) => {
     const container = within(context.canvasElement);
     const likeButton = await container.findByRole("button", { name: "Like" });
@@ -129,6 +124,7 @@ export const Like: Story = {
     mock.resolveMostRecentOperation((operation) => {
       return MockPayloadGenerator.generate(operation, likeResolvers);
     });
+    await container.findByRole("button", { name: "Unlike" });
   },
 };
 
@@ -203,12 +199,16 @@ const FeedbackWithDeleteDialog = (
   const [open, setOpen] = React.useState(false);
   const [text, setText] = React.useState("");
   return (
-    <EventingProvider<typeof events>
+    <EventingInterceptor<typeof events>
       eventMap={{
         onDeleteFeedback: (eventWrapper) => {
           setOpen(true);
           setText(eventWrapper.event.data().feedbackText);
-          return Promise.resolve();
+          return Promise.resolve(undefined);
+        },
+        feedbackTelemetry: (eventWrapper) => {
+          console.log("Telemetry event", eventWrapper.event.data());
+          return Promise.resolve(eventWrapper);
         },
       }}
     >
@@ -217,7 +217,7 @@ const FeedbackWithDeleteDialog = (
         <button onClick={() => setOpen(false)}>Cancel</button>
         Are you sure you want to delete feedback "{text}"
       </dialog>
-    </EventingProvider>
+    </EventingInterceptor>
   );
 };
 

diff --git a/packages/nova-react-test-utils/README.md b/packages/nova-react-test-utils/README.md
@@ -177,7 +177,7 @@ You can also see that `satisfies WithNovaEnvironment<Operation, TypeMap>` is use
 
 Additionally, `StoryObjWithoutFragmentRefs` utility type is provided which is just a small wrapper over `StoryObj` type from Storybook that makes sure that `args` don't require you to pass props that are supplied using `referenceEntries` parameter.
 
-### EventingProvider
+### EventingInterceptor
 
 This utility is meant to override default behavior for `bubble` which logs all nova events to Storybook actions tab. Instead you can granularly override the handler per event to customize your story. Check example below:
 
@@ -188,13 +188,17 @@ const FeedbackWithDeleteDialog = (
   const [open, setOpen] = React.useState(false);
   const [text, setText] = React.useState("");
   return (
-    <EventingProvider<typeof events> // this should be an events object that has definitions for all your events for good TS auto-completion
+    <EventingInterceptor<typeof events> // this should be an events object that has definitions for all your events for good TS auto-completion
       eventMap={{
         onDeleteFeedback: (eventWrapper) => {
           // custom handler for this specific event
           setOpen(true);
           setText(eventWrapper.event.data().feedbackText);
-          return Promise.resolve();
+          return Promise.resolve(undefined); // return undefined if you want to stop processing event further
+        },
+        feedbackTelemetry: (eventWrapper) => {
+          console.log("Telemetry event", eventWrapper.event.data());
+          return Promise.resolve(eventWrapper); // return eventWrapper if you want to pass event further, for default bubble to log it in actions tab
         },
       }}
     >
@@ -203,7 +207,7 @@ const FeedbackWithDeleteDialog = (
         <button onClick={() => setOpen(false)}>Cancel</button>
         Are you sure you want to delete feedback "{text}"
       </dialog>
-    </EventingProvider>
+    </EventingInterceptor>
   );
 };
 
@@ -221,7 +225,7 @@ export const WithDeleteDialog: Story = {
 };
 ```
 
-It is helpful if your event changes something on integration side of your component and you want simulate that behavior in Storybook.
+It is helpful if your event changes something on integration side of your component and you want simulate that behavior in Storybook. Implementation wise `EventingInterceptor` uses [eventing interceptor](../nova-react/README.md#intercepting-events) under the hood, so that you can always use the default handler if needed.
 
 ## FAQ
 

diff --git a/packages/nova-react-test-utils/src/apollo/index.ts b/packages/nova-react-test-utils/src/apollo/index.ts
@@ -7,7 +7,7 @@ export type {
   MockResolvers,
   DefaultMockResolvers,
 } from "../shared/storybook-nova-decorator-shared";
-export { EventingProvider } from "../shared/eventing-provider";
+export { EventingInterceptor } from "../shared/eventing-interceptor";
 export type { StoryObjWithoutFragmentRefs } from "../shared/types";
 
 export {

diff --git a/packages/nova-react-test-utils/src/relay/index.ts b/packages/nova-react-test-utils/src/relay/index.ts
@@ -7,7 +7,7 @@ export type {
   MockResolvers,
   DefaultMockResolvers,
 } from "../shared/storybook-nova-decorator-shared";
-export { EventingProvider } from "../shared/eventing-provider";
+export { EventingInterceptor } from "../shared/eventing-interceptor";
 export type { StoryObjWithoutFragmentRefs } from "../shared/types";
 
 export {

diff --git a/packages/nova-react-test-utils/src/shared/eventing-interceptor.tsx b/packages/nova-react-test-utils/src/shared/eventing-interceptor.tsx
@@ -0,0 +1,41 @@
+import { NovaEventingInterceptor } from "@nova/react";
+import type { EventWrapper, NovaEvent, Source } from "@nova/types";
+import * as React from "react";
+
+type EventCreatorMap = Record<string, (...args: any[]) => NovaEvent<unknown>>;
+type EventMap<T extends EventCreatorMap> = {
+  [Property in keyof T]?: (eventWrapper: {
+    event: ReturnType<T[Property]>;
+    source: Source;
+  }) => Promise<undefined | EventWrapper>;
+};
+
+export const EventingInterceptor = <T extends EventCreatorMap>({
+  eventMap,
+  children,
+}: {
+  eventMap: EventMap<T>;
+  children: React.ReactNode;
+}) => {
+  const interceptor = (eventWrapper: EventWrapper) => {
+    const eventType = eventWrapper.event.type;
+    const customEventHandler = eventMap[eventType];
+    if (customEventHandler) {
+      return customEventHandler(
+        // As the key was in the map we now the type is correct
+        eventWrapper as unknown as {
+          event: ReturnType<T[keyof T]>;
+          source: Source;
+        },
+      );
+    } else {
+      return Promise.resolve(eventWrapper);
+    }
+  };
+
+  return (
+    <NovaEventingInterceptor interceptor={interceptor}>
+      {children}
+    </NovaEventingInterceptor>
+  );
+};
diff --git a/packages/nova-react-test-utils/src/shared/eventing-provider.tsx b/packages/nova-react-test-utils/src/shared/eventing-provider.tsx