fix: changed unnecessary map to forEach (#5490)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/surveySummary.ts

@@ -409,7 +409,7 @@ export const getQuestionSummary = async (
           }
         });
 
-        Object.entries(choiceCountMap).map(([label, count]) => {
+        Object.entries(choiceCountMap).forEach(([label, count]) => {
           values.push({
             value: label,
             count,
@@ -508,7 +508,7 @@ export const getQuestionSummary = async (
           }
         });
 
-        Object.entries(choiceCountMap).map(([label, count]) => {
+        Object.entries(choiceCountMap).forEach(([label, count]) => {
           values.push({
             rating: parseInt(label),
             count,

apps/web/lib/survey/service.ts

@@ -428,7 +428,7 @@ export const updateSurvey = async (updatedSurvey: TSurvey): Promise<TSurvey> =>
           });
 
           segmentCache.revalidate({ id: updatedSegment.id, environmentId: updatedSegment.environmentId });
-          updatedSegment.surveys.map((survey) => surveyCache.revalidate({ id: survey.id }));
+          updatedSegment.surveys.forEach((survey) => surveyCache.revalidate({ id: survey.id }));
         } catch (error) {
           logger.error(error, "Error updating survey");
           throw new Error("Error updating survey");
@@ -865,7 +865,7 @@ export const loadNewSegmentInSurvey = async (surveyId: string, newSegmentId: str
       });
 
       segmentCache.revalidate({ id: currentSurveySegment.id });
-      segment.surveys.map((survey) => surveyCache.revalidate({ id: survey.id }));
+      segment.surveys.forEach((survey) => surveyCache.revalidate({ id: survey.id }));
       surveyCache.revalidate({ environmentId: segment.environmentId });
     }
 

apps/web/modules/survey/list/components/copy-survey-form.tsx

@@ -40,8 +40,8 @@ export const CopySurveyForm = ({ defaultProjects, survey, onCancel, setOpen }: I
     const filteredData = data.projects.filter((project) => project.environments.length > 0);
 
     try {
-      filteredData.map(async (project) => {
-        project.environments.map(async (environment) => {
+      filteredData.forEach(async (project) => {
+        project.environments.forEach(async (environment) => {
           await copySurveyToOtherEnvironmentAction({
             environmentId: survey.environmentId,
             surveyId: survey.id,
@@ -98,11 +98,11 @@ export const CopySurveyForm = ({ defaultProjects, survey, onCancel, setOpen }: I
                                             field.onChange([...field.value, environment.id]);
                                           }
                                         }}
-                                        className="mr-2 h-4 w-4 appearance-none border-slate-300 checked:border-transparent checked:bg-slate-500 checked:after:bg-slate-500 checked:hover:bg-slate-500 focus:ring-2 focus:ring-slate-500 focus:ring-opacity-50"
+                                        className="focus:ring-opacity-50 mr-2 h-4 w-4 appearance-none border-slate-300 checked:border-transparent checked:bg-slate-500 checked:after:bg-slate-500 checked:hover:bg-slate-500 focus:ring-2 focus:ring-slate-500"
                                         id={environment.id}
                                       />
                                       <Label htmlFor={environment.id}>
-                                        <p className="text-sm font-medium capitalize text-slate-900">
+                                        <p className="text-sm font-medium text-slate-900 capitalize">
                                           {environment.type}
                                         </p>
                                       </Label>
@@ -121,8 +121,8 @@ export const CopySurveyForm = ({ defaultProjects, survey, onCancel, setOpen }: I
             );
           })}
         </div>
-        <div className="fixed bottom-0 left-0 right-0 z-10 flex w-full justify-end space-x-2 bg-white">
-          <div className="flex w-full justify-end pb-4 pr-4">
+        <div className="fixed right-0 bottom-0 left-0 z-10 flex w-full justify-end space-x-2 bg-white">
+          <div className="flex w-full justify-end pr-4 pb-4">
             <Button type="button" onClick={onCancel} variant="ghost">
               {t("common.cancel")}
             </Button>

apps/web/modules/survey/list/components/tests/copy-survey-form.test.tsx

@@ -0,0 +1,188 @@
+import { copySurveyToOtherEnvironmentAction } from "@/modules/survey/list/actions";
+import { TUserProject } from "@/modules/survey/list/types/projects";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import toast from "react-hot-toast";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { CopySurveyForm } from "../copy-survey-form";
+
+// Mock dependencies
+vi.mock("@/modules/survey/list/actions", () => ({
+  copySurveyToOtherEnvironmentAction: vi.fn().mockResolvedValue({}),
+}));
+
+vi.mock("react-hot-toast", () => ({
+  default: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+// Mock the Checkbox component to properly handle form changes
+vi.mock("@/modules/ui/components/checkbox", () => ({
+  Checkbox: ({ id, onCheckedChange, ...props }: any) => (
+    <input
+      type="checkbox"
+      id={id}
+      data-testid={id}
+      name={props.name}
+      className="focus:ring-opacity-50 mr-2 h-4 w-4 appearance-none border-slate-300 checked:border-transparent checked:bg-slate-500 checked:after:bg-slate-500 checked:hover:bg-slate-500 focus:ring-2 focus:ring-slate-500"
+      onChange={() => {
+        // Call onCheckedChange with true to simulate checkbox selection
+        onCheckedChange(true);
+      }}
+      {...props}
+    />
+  ),
+}));
+
+vi.mock("@/modules/ui/components/button", () => ({
+  Button: ({ children, onClick, type, variant, ...rest }: any) => (
+    <button
+      data-testid={`button-${type || "button"}`}
+      onClick={onClick}
+      type={type || "button"}
+      data-variant={variant}
+      {...rest}>
+      {children}
+    </button>
+  ),
+}));
+
+// Mock data
+const mockSurvey = {
+  id: "survey-1",
+  name: "mockSurvey",
+  type: "link",
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  environmentId: "env-1",
+  status: "draft",
+  singleUse: null,
+  responseCount: 0,
+  creator: null,
+} as any;
+
+const mockProjects = [
+  {
+    id: "project-1",
+    name: "Project 1",
+    environments: [
+      { id: "env-1", type: "development" },
+      { id: "env-2", type: "production" },
+    ],
+  },
+  {
+    id: "project-2",
+    name: "Project 2",
+    environments: [
+      { id: "env-3", type: "development" },
+      { id: "env-4", type: "production" },
+    ],
+  },
+] satisfies TUserProject[];
+
+describe("CopySurveyForm", () => {
+  const mockSetOpen = vi.fn();
+  const mockOnCancel = vi.fn();
+  const user = userEvent.setup();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(copySurveyToOtherEnvironmentAction).mockResolvedValue({});
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders the form with correct project and environment options", () => {
+    render(
+      <CopySurveyForm
+        defaultProjects={mockProjects}
+        survey={mockSurvey}
+        onCancel={mockOnCancel}
+        setOpen={mockSetOpen}
+      />
+    );
+
+    // Check if project names are rendered
+    expect(screen.getByText("Project 1")).toBeInTheDocument();
+    expect(screen.getByText("Project 2")).toBeInTheDocument();
+
+    // Check if environment types are rendered
+    expect(screen.getAllByText("development").length).toBe(2);
+    expect(screen.getAllByText("production").length).toBe(2);
+
+    // Check if checkboxes are rendered for each environment
+    expect(screen.getByTestId("env-1")).toBeInTheDocument();
+    expect(screen.getByTestId("env-2")).toBeInTheDocument();
+    expect(screen.getByTestId("env-3")).toBeInTheDocument();
+    expect(screen.getByTestId("env-4")).toBeInTheDocument();
+  });
+
+  test("calls onCancel when cancel button is clicked", async () => {
+    render(
+      <CopySurveyForm
+        defaultProjects={mockProjects}
+        survey={mockSurvey}
+        onCancel={mockOnCancel}
+        setOpen={mockSetOpen}
+      />
+    );
+
+    const cancelButton = screen.getByText("common.cancel");
+    await user.click(cancelButton);
+
+    expect(mockOnCancel).toHaveBeenCalledTimes(1);
+  });
+
+  test("toggles environment selection when checkbox is clicked", async () => {
+    render(
+      <CopySurveyForm
+        defaultProjects={mockProjects}
+        survey={mockSurvey}
+        onCancel={mockOnCancel}
+        setOpen={mockSetOpen}
+      />
+    );
+
+    // Select multiple environments
+    await user.click(screen.getByTestId("env-2"));
+    await user.click(screen.getByTestId("env-3"));
+
+    // Submit the form
+    await user.click(screen.getByTestId("button-submit"));
+
+    // Success toast should be called because of how the component is implemented
+    expect(toast.success).toHaveBeenCalled();
+  });
+
+  test("submits form with selected environments", async () => {
+    render(
+      <CopySurveyForm
+        defaultProjects={mockProjects}
+        survey={mockSurvey}
+        onCancel={mockOnCancel}
+        setOpen={mockSetOpen}
+      />
+    );
+
+    // Select environments
+    await user.click(screen.getByTestId("env-2"));
+    await user.click(screen.getByTestId("env-4"));
+
+    // Submit the form
+    await user.click(screen.getByTestId("button-submit"));
+
+    // Success toast should be called because of how the component is implemented
+    expect(toast.success).toHaveBeenCalled();
+    expect(mockSetOpen).toHaveBeenCalled();
+  });
+});

apps/web/vite.config.mts

@@ -114,6 +114,7 @@ export default defineConfig({
         "modules/survey/editor/components/end-screen-form.tsx",
         "modules/survey/editor/components/matrix-question-form.tsx",
         "lib/utils/billing.ts",
+        "modules/survey/list/components/copy-survey-form.tsx",
         "lib/crypto.ts",
         "lib/surveyLogic/utils.ts",
         "lib/utils/billing.ts",
@@ -164,6 +165,7 @@ export default defineConfig({
         "**/openapi.ts", // Exclude openapi configuration files
         "**/openapi-document.ts", // Exclude openapi document files
         "modules/**/types/**", // Exclude types
+        "**/stories.tsx" // Exclude story files
       ],
     },
   },