dev(storybook): added extra Search stories

FormidableLabs · Sep 12, 2023 · 704f4d0 · 704f4d0
1 parent fdb315a
commit 704f4d0
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 3 deletions.
diff --git a/packages/nextjs/.storybook/decorators/TestHarness.tsx b/packages/nextjs/.storybook/decorators/TestHarness.tsx
@@ -9,9 +9,9 @@ declare module "../types" {
 }
 
 export const TestHarnessDecorator: Decorator = (Story, ctx) => {
-  const parameters = ctx.parameters as TypedParameters;
+  const { motionConfig } = ctx.parameters as TypedParameters;
   return (
-    <MotionConfig {...parameters.motionConfig}>
+    <MotionConfig {...motionConfig}>
       <Story />
     </MotionConfig>
   );

diff --git a/packages/nextjs/components/Search.stories.tsx b/packages/nextjs/components/Search.stories.tsx
@@ -41,6 +41,70 @@ export const WithSearchTerm: Story = {
   },
 };
 
+export const WithSearchTerm_Test_FilteredResults: Story = {
+  name: "With Search Term / Test / Filtered Results",
+  async play(ctx) {
+    // eslint-disable-next-line storybook/context-in-play-function
+    await WithSearchTerm.play!(ctx);
+
+    const { canvasElement, step } = ctx;
+    const ui = wrap(canvasElement);
+
+    await step("type 'plain'", async () => {
+      await userEvent.type(ui.searchbox, " plain");
+    });
+
+    await step("there should be one result", async () => {
+      await waitFor(() => {
+        expect(ui.results).toHaveLength(1);
+        expect(ui.results[0]).toHaveTextContent("Plain Baguette");
+      });
+    });
+  },
+};
+export const WithSearchTerm_Test_NoResults: Story = {
+  name: "With Search Term / Test / No Results",
+  async play(ctx) {
+    // eslint-disable-next-line storybook/context-in-play-function
+    await WithSearchTerm.play!(ctx);
+
+    const { canvasElement, step } = ctx;
+    const ui = wrap(canvasElement);
+
+    await step("update text to 'cake'", async () => {
+      await userEvent.clear(ui.searchbox);
+      await userEvent.type(ui.searchbox, "cake");
+    });
+
+    await step("there should be no results", async () => {
+      await waitFor(() => {
+        expect(ui.results).toHaveLength(1);
+        expect(ui.results[0]).toHaveTextContent("No Products Found");
+      });
+    });
+  },
+};
+export const WithSearchTerm_Test_Cleared: Story = {
+  name: "With Search Term / Test / Cleared",
+  async play(ctx) {
+    // eslint-disable-next-line storybook/context-in-play-function
+    await WithSearchTerm.play!(ctx);
+
+    const { canvasElement, step } = ctx;
+    const ui = wrap(canvasElement);
+
+    await step("clear all text", async () => {
+      await userEvent.clear(ui.searchbox);
+    });
+
+    await step("there should be no preview box", async () => {
+      await waitFor(() => {
+        expect(ui.resultsBox).not.toBeInTheDocument();
+      });
+    });
+  },
+};
+
 /** Encapsulate all UI elements for easier testing */
 function wrap(canvasElement: HTMLElement) {
   const container = within(canvasElement);
@@ -49,7 +113,7 @@ function wrap(canvasElement: HTMLElement) {
       return container.getByRole("searchbox");
     },
     get resultsBox() {
-      return container.getByRole("listbox");
+      return container.queryByRole("listbox");
     },
     get results() {
       return container.queryAllByRole("listitem");