chore: add tests for StarRating component

Author: bartstc

src/features/marketing/rating/components/ProductRating.stories.tsx

@@ -5,7 +5,7 @@ import { getMarketingProductHandler } from "@/test-lib/handlers/get-marketing-pr
 import { ProductRating } from "./ProductRating";
 
 const meta = {
-  title: "modules/Marketing/ProductRating",
+  title: "modules/Marketing/Rating/ProductRating",
   component: ProductRating,
   parameters: {
     layout: "centered",

src/features/marketing/rating/components/StarRating.stories.tsx

@@ -1,9 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HttpResponse } from "msw";
+import { userEvent, screen, expect } from "storybook/test";
+
+import { patchRateProductHandler } from "@/test-lib/handlers/patch-rate-product-handler";
+import { withAuth } from "@/test-lib/storybook/with-auth";
+import { withoutAuth } from "@/test-lib/storybook/without-auth";
 
 import { StarRating } from "./StarRating";
 
 const meta = {
-  title: "modules/Marketing/StarRating",
+  title: "modules/Marketing/Rating/StarRating",
   component: StarRating,
   parameters: {
     layout: "centered",
@@ -13,9 +19,76 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const defaultArgs = { rating: 3.7, productId: "1" };
+
 export const Default: Story = {
-  args: {
-    rating: 3.7,
-    productId: "1",
+  args: defaultArgs,
+};
+
+export const SubmitRating: Story = {
+  args: defaultArgs,
+  decorators: [withAuth],
+  parameters: {
+    msw: { handlers: [patchRateProductHandler()] },
+  },
+  play: async ({ canvasElement, step }) => {
+    await step("Hover over the 4th star", async () => {
+      const stars = canvasElement.querySelectorAll("svg");
+      await userEvent.hover(stars[3]);
+    });
+
+    await step("Click the 4th star to submit rating", async () => {
+      const stars = canvasElement.querySelectorAll("svg");
+      await userEvent.click(stars[3]);
+    });
+
+    await step("Success notification is shown", async () => {
+      await expect(
+        await screen.findByText("Thank you! Your rating has been submitted.")
+      ).toBeInTheDocument();
+    });
+  },
+};
+
+export const SubmitRatingFailure: Story = {
+  args: defaultArgs,
+  decorators: [withAuth],
+  parameters: {
+    msw: {
+      handlers: [
+        patchRateProductHandler(() => HttpResponse.json({}, { status: 500 })),
+      ],
+    },
+  },
+  play: async ({ canvasElement, step }) => {
+    await step("Click the 3rd star", async () => {
+      const stars = canvasElement.querySelectorAll("svg");
+      await userEvent.click(stars[2]);
+    });
+
+    await step("Error notification is shown", async () => {
+      await expect(
+        await screen.findByText(
+          "Something went wrong with submitting your rating. Please try again or contact us."
+        )
+      ).toBeInTheDocument();
+    });
+  },
+};
+
+export const RatingWhileUnauthenticated: Story = {
+  args: defaultArgs,
+  decorators: [withoutAuth],
+  play: async ({ canvasElement, step }) => {
+    await step("Click a star while not logged in", async () => {
+      const stars = canvasElement.querySelectorAll("svg");
+      await userEvent.click(stars[2]);
+    });
+
+    await step("Not-authenticated notification is shown", async () => {
+      await expect(
+        await screen.findByText("You have to log in to rate the product")
+      ).toBeInTheDocument();
+    });
   },
 };

src/test-lib/handlers/patch-rate-product-handler.ts

@@ -0,0 +1,12 @@
+import { http, HttpResponse } from "msw";
+
+import { host } from "@/lib/http";
+
+import type { PatchResolver } from "./resolvers";
+
+export const patchRateProductHandler = (resolver?: PatchResolver) =>
+  http.patch(`${host}/marketing/products/:productId/rate`, (req) => {
+    if (resolver) return resolver(req);
+
+    return HttpResponse.json({ id: "1", rating: { rate: 4, count: 100 } });
+  });

src/test-lib/handlers/resolvers.ts

@@ -4,3 +4,4 @@ export type GetResolver = Parameters<typeof http.get>[1];
 export type DeleteResolver = Parameters<typeof http.delete>[1];
 export type PutResolver = Parameters<typeof http.put>[1];
 export type PostResolver = Parameters<typeof http.post>[1];
+export type PatchResolver = Parameters<typeof http.patch>[1];