Add ability to mock react-query errors

code-asher · code-asher · commit a04365393a12 · 2024-08-23T15:41:17.000-08:00
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -7,7 +7,7 @@ import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { DecoratorHelpers } from "@storybook/addon-themes";
 import { withRouter } from "storybook-addon-remix-react-router";
 import { StrictMode } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { parseQueryArgs, QueryClient, QueryClientProvider } from "react-query";
 import { HelmetProvider } from "react-helmet-async";
 import themes from "theme";
 import "theme/globalFonts";
@@ -93,7 +93,18 @@ function withQuery(Story, { parameters }) {
 
   if (parameters.queries) {
     parameters.queries.forEach((query) => {
-      queryClient.setQueryData(query.key, query.data);
+      if (query.data instanceof Error) {
+        // This is copied from setQueryData() but sets the error.
+        const cache = queryClient.getQueryCache();
+        const parsedOptions = parseQueryArgs(query.key)
+        const defaultedOptions = queryClient.defaultQueryOptions(parsedOptions)
+        const cachedQuery = cache.build(queryClient, defaultedOptions);
+        // Set manual data so react-query will not try to refetch.
+        cachedQuery.setData(undefined, { manual: true });
+        cachedQuery.setState({ error: query.data });
+      } else {
+        queryClient.setQueryData(query.key, query.data);
+      }
     });
   }
 
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.stories.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.stories.tsx
@@ -51,10 +51,9 @@ export const LoadingGroup: Story = {
 	},
 };
 
-// Will show a 404 because the query is not mocked.
 export const GroupError: Story = {
 	parameters: {
-		queries: [permissionsQuery({})],
+		queries: [groupQuery(new Error("test group error")), permissionsQuery({})],
 	},
 };
 
@@ -86,12 +85,12 @@ export const EveryoneGroup: Story = {
 	},
 };
 
-// Will show a 404 because the query is not mocked.
 export const MembersError: Story = {
 	parameters: {
 		queries: [
 			groupQuery(MockGroup),
 			permissionsQuery({ canUpdateGroup: true }),
+			membersQuery(new Error("test members error")),
 		],
 	},
 	play: async ({ canvasElement }) => {
