formbricks · Dhruwang · May 8, 2025 · May 5, 2025 · May 7, 2025 · May 7, 2025
diff --git a/...web/modules/ee/whitelabel/email-customization/components/email-customization-settings.tsx b/...web/modules/ee/whitelabel/email-customization/components/email-customization-settings.tsx
@@ -193,7 +193,7 @@ export const EmailCustomizationSettings = ({
             <div className="mb-10">
               <Small>{t("environments.settings.general.logo_in_email_header")}</Small>
 
-              <div className="mt-2 mb-6 flex items-center gap-4">
+              <div className="mb-6 mt-2 flex items-center gap-4">
                 {logoUrl && (
                   <div className="flex flex-col gap-2">
                     <div className="flex w-max items-center justify-center rounded-lg border border-slate-200 px-4 py-2">
@@ -256,7 +256,7 @@ export const EmailCustomizationSettings = ({
                 </Button>
               </div>
             </div>
-            <div className="shadow-card-xl min-h-52 w-[446px] rounded-t-lg border border-slate-100 px-10 pt-10 pb-4">
+            <div className="shadow-card-xl min-h-52 w-[446px] rounded-t-lg border border-slate-100 px-10 pb-4 pt-10">
               <Image
                 data-testid="email-customization-preview-image"
                 src={logoUrl || fbLogoUrl}
@@ -284,7 +284,7 @@ export const EmailCustomizationSettings = ({
         )}
 
         {hasWhiteLabelPermission && isReadOnly && (
-          <Alert variant="warning" className="mt-4 mb-6">
+          <Alert variant="warning" className="mb-6 mt-4">
             <AlertDescription>
               {t("common.only_owners_managers_and_manage_access_members_can_perform_this_action")}
             </AlertDescription>

diff --git a/apps/web/modules/survey/editor/components/recontact-options-card.tsx b/apps/web/modules/survey/editor/components/recontact-options-card.tsx
@@ -121,7 +121,7 @@ export const RecontactOptionsCard = ({
         className="h-full w-full cursor-pointer rounded-lg hover:bg-slate-50"
         id="recontactOptionsCardTrigger">
         <div className="inline-flex px-4 py-4">
-          <div className="flex items-center pr-5 pl-2">
+          <div className="flex items-center pl-2 pr-5">
             <CheckIcon
               strokeWidth={3}
               className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
@@ -256,7 +256,7 @@ export const RecontactOptionsCard = ({
                       id="inputDays"
                       value={inputDays === 0 ? 1 : inputDays}
                       >
-                      className="mr-2 ml-2 inline w-16 bg-white text-center text-sm"
+                      className="ml-2 mr-2 inline w-16 bg-white text-center text-sm"
                     />
                     {t("environments.surveys.edit.days_before_showing_this_survey_again")}.
                   </p>

diff --git a/apps/web/modules/survey/editor/components/saved-actions-tab.tsx b/apps/web/modules/survey/editor/components/saved-actions-tab.tsx
@@ -64,7 +64,7 @@ export const SavedActionsTab = ({
           (actions, i) =>
             actions.length > 0 && (
               <div key={i} className="me-4">
-                <h2 className="mt-4 mb-2 font-semibold">
+                <h2 className="mb-2 mt-4 font-semibold">
                   {i === 0 ? t("common.no_code") : t("common.code")}
                 </h2>
                 <div className="flex flex-col gap-2">

diff --git a/apps/web/modules/survey/editor/components/unsplash-images.tsx b/apps/web/modules/survey/editor/components/unsplash-images.tsx
@@ -232,6 +232,7 @@ export const ImageFromUnsplashSurveyBg = ({ handleBgChange }: ImageFromUnsplashS
             variant="secondary"
             className="col-span-3 mt-3 flex items-center justify-center"
             type="button"
+            data-testid="unsplash-select-button"
             >
             {t("common.load_more")}
           </Button>

diff --git a/apps/web/modules/ui/components/additional-integration-settings/index.test.tsx b/apps/web/modules/ui/components/additional-integration-settings/index.test.tsx
@@ -0,0 +1,111 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { AdditionalIntegrationSettings } from "./index";
+
+describe("AdditionalIntegrationSettings", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders all checkboxes correctly", () => {
+    const mockProps = {
+      includeVariables: false,
+      includeHiddenFields: false,
+      includeMetadata: false,
+      includeCreatedAt: false,
+      setIncludeVariables: vi.fn(),
+      setIncludeHiddenFields: vi.fn(),
+      setIncludeMetadata: vi.fn(),
+      setIncludeCreatedAt: vi.fn(),
+    };
+
+    render(<AdditionalIntegrationSettings {...mockProps} />);
+
+    expect(screen.getByText("environments.integrations.additional_settings")).toBeInTheDocument();
+    expect(screen.getByText("environments.integrations.include_created_at")).toBeInTheDocument();
+    expect(screen.getByText("environments.integrations.include_variables")).toBeInTheDocument();
+    expect(screen.getByText("environments.integrations.include_hidden_fields")).toBeInTheDocument();
+    expect(screen.getByText("environments.integrations.include_metadata")).toBeInTheDocument();
+  });
+
+  test("checkboxes have correct initial state", () => {
+    const mockProps = {
+      includeVariables: true,
+      includeHiddenFields: false,
+      includeMetadata: true,
+      includeCreatedAt: false,
+      setIncludeVariables: vi.fn(),
+      setIncludeHiddenFields: vi.fn(),
+      setIncludeMetadata: vi.fn(),
+      setIncludeCreatedAt: vi.fn(),
+    };
+
+    render(<AdditionalIntegrationSettings {...mockProps} />);
+
+    const checkboxes = screen.getAllByRole("checkbox");
+    expect(checkboxes).toHaveLength(4);
+
+    // Check that the checkboxes have correct initial checked state
+    expect(checkboxes[0]).not.toBeChecked(); // includeCreatedAt
+    expect(checkboxes[1]).toBeChecked(); // includeVariables
+    expect(checkboxes[2]).not.toBeChecked(); // includeHiddenFields
+    expect(checkboxes[3]).toBeChecked(); // includeMetadata
+  });
+
+  test("calls the appropriate setter function when checkbox is clicked", async () => {
+    const mockProps = {
+      includeVariables: false,
+      includeHiddenFields: false,
+      includeMetadata: false,
+      includeCreatedAt: false,
+      setIncludeVariables: vi.fn(),
+      setIncludeHiddenFields: vi.fn(),
+      setIncludeMetadata: vi.fn(),
+      setIncludeCreatedAt: vi.fn(),
+    };
+
+    render(<AdditionalIntegrationSettings {...mockProps} />);
+
+    const user = userEvent.setup();
+
+    // Click on each checkbox and verify the setter is called with correct value
+    const checkboxes = screen.getAllByRole("checkbox");
+
+    await user.click(checkboxes[0]); // includeCreatedAt
+    expect(mockProps.setIncludeCreatedAt).toHaveBeenCalledWith(true);
+
+    await user.click(checkboxes[1]); // includeVariables
+    expect(mockProps.setIncludeVariables).toHaveBeenCalledWith(true);
+
+    await user.click(checkboxes[2]); // includeHiddenFields
+    expect(mockProps.setIncludeHiddenFields).toHaveBeenCalledWith(true);
+
+    await user.click(checkboxes[3]); // includeMetadata
+    expect(mockProps.setIncludeMetadata).toHaveBeenCalledWith(true);
+  });
+
+  test("toggling checkboxes switches boolean values correctly", async () => {
+    const mockProps = {
+      includeVariables: true,
+      includeHiddenFields: false,
+      includeMetadata: true,
+      includeCreatedAt: false,
+      setIncludeVariables: vi.fn(),
+      setIncludeHiddenFields: vi.fn(),
+      setIncludeMetadata: vi.fn(),
+ 
6851
     setIncludeCreatedAt: vi.fn(),
+    };
+
+    render(<AdditionalIntegrationSettings {...mockProps} />);
+
+    const user = userEvent.setup();
+    const checkboxes = screen.getAllByRole("checkbox");
+
+    await user.click(checkboxes[1]); // includeVariables (true -> false)
+    expect(mockProps.setIncludeVariables).toHaveBeenCalledWith(false);
+
+    await user.click(checkboxes[2]); // includeHiddenFields (false -> true)
+    expect(mockProps.setIncludeHiddenFields).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/apps/web/modules/ui/components/advanced-option-toggle/index.test.tsx b/apps/web/modules/ui/components/advanced-option-toggle/index.test.tsx
@@ -0,0 +1,125 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { AdvancedOptionToggle } from "./index";
+
+describe("AdvancedOptionToggle Component", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders basic component with required props", () => {
+    const >
+    render(
+      <AdvancedOptionToggle
+        isChecked={false}
+        >
+        htmlId="test-toggle"
+        title="Test Title"
+        description="Test Description"
+      />
+    );
+
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+    expect(screen.getByText("Test Description")).toBeInTheDocument();
+    expect(screen.getByRole("switch")).toBeInTheDocument();
+    expect(screen.getByRole("switch")).not.toBeChecked();
+  });
+
+  test("calls onToggle when switch is clicked", async () => {
+    const >
+    render(
+      <AdvancedOptionToggle
+        isChecked={false}
+        >
+        htmlId="test-toggle"
+        title="Test Title"
+        description="Test Description"
+      />
+    );
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("switch"));
+
+    expect(onToggle).toHaveBeenCalledTimes(1);
+    expect(onToggle).toHaveBeenCalledWith(true);
+  });
+
+  test("renders children when isChecked is true", () => {
+    render(
+      <AdvancedOptionToggle
+        isChecked={true}
+        >
+        htmlId="test-toggle"
+        title="Test Title"
+        description="Test Description">
+        <div data-testid="child-content">Child Content</div>
+      </AdvancedOptionToggle>
+    );
+
+    expect(screen.getByTestId("child-content")).toBeInTheDocument();
+    expect(screen.getByText("Child Content")).toBeInTheDocument();
+  });
+
+  test("does not render children when isChecked is false", () => {
+    render(
+      <AdvancedOptionToggle
+        isChecked={false}
+        >
+        htmlId="test-toggle"
+        title="Test Title"
+        description="Test Description">
+        <div data-testid="child-content">Child Content</div>
+      </AdvancedOptionToggle>
+    );
+
+    expect(screen.queryByTestId("child-content")).not.toBeInTheDocument();
+  });
+
+  test("applies childBorder class when childBorder prop is true", () => {
+    render(
+      <AdvancedOptionToggle
+        isChecked={true}
+        >
+        htmlId="test-toggle"
+        title="Test Title"
+        description="Test Description"
+        childBorder={true}>
+        <div data-testid="child-content">Child Content</div>
+      </AdvancedOptionToggle>
+    );
+
+    const childContainer = screen.getByTestId("child-content").parentElement;
+    expect(childContainer).toHaveClass("border");
+  });
+
+  test("disables the switch when disabled prop is true", () => {
+    render(
+      <AdvancedOptionToggle
+        isChecked={false}
+        >
+        htmlId="test-toggle"
+        title="Test Title"
+        description="Test Description"
+        disabled={true}
+      />
+    );
+
+    expect(screen.getByRole("switch")).toBeDisabled();
+  });
+
+  test("switch is checked when isChecked prop is true", () => {
+    render(
+      <AdvancedOptionToggle
+        isChecked={true}
+        >
+        htmlId="test-toggle"
+        title="Test Title"
+        description="Test Description"
+      />
+    );
+
+    expect(screen.getByRole("switch")).toBeChecked();
+  });
+});