+ className="ph-no-capture my-1 font-normal capitalize text-slate-700"> {rowValueInSelectedLanguage}:{processResponseData(responseData[rowValueInSelectedLanguage])}
); @@ -161,7 +161,7 @@ export const RenderResponse: React.FC
+ {children}
+
+ ),
+}));
+
+vi.mock("../button", () => ({
+ Button: ({ children, onClick, className, size, "aria-label": ariaLabel }: any) => (
+
+ ),
+}));
+
+describe("IconBar", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders nothing when actions array is empty", () => {
+ const { container } = render(Icon 1
;
+ const MockIcon2 = () => Icon 2
;
+
+ const actions = [
+ {
+ icon: MockIcon1,
+ tooltip: "Action 1",
+ onClick: vi.fn(),
+ isVisible: true,
+ },
+ {
+ icon: MockIcon2,
+ tooltip: "Action 2",
+ onClick: vi.fn(),
+ isVisible: false,
+ },
+ ];
+
+ render(Icon 1
;
+ const MockIcon2 = () => Icon 2
;
+
+ const actions = [
+ {
+ icon: MockIcon1,
+ tooltip: "Action 1",
+ onClick: vi.fn(),
+ isVisible: true,
+ },
+ {
+ icon: MockIcon2,
+ tooltip: "Action 2",
+ onClick: vi.fn(),
+ isVisible: true,
+ },
+ ];
+
+ render(Icon
;
+ const handleClick = vi.fn();
+
+ const actions = [
+ {
+ icon: MockIcon,
+ tooltip: "Action",
+ onClick: handleClick,
+ isVisible: true,
+ },
+ ];
+
+ render(Icon
;
+
+ const actions = [
+ {
+ icon: MockIcon,
+ tooltip: "Test Tooltip",
+ onClick: vi.fn(),
+ isVisible: true,
+ },
+ ];
+
+ render(Icon
;
+
+ const actions = [
+ {
+ icon: MockIcon,
+ tooltip: "Test Tooltip",
+ onClick: vi.fn(),
+ isVisible: true,
+ },
+ ];
+
+ render(
+ {children}
+
+ ),
+ CommandInput: ({ placeholder, className }: any) => (
+
+ ),
+ CommandList: ({ children, className }: any) => (
+
+ {children}
+
+ ),
+ CommandEmpty: ({ children, className }: any) => (
+
+ {children}
+
+ ),
+ CommandGroup: ({ children, heading }: any) => (
+
+ {children}
+
+ ),
+ CommandItem: ({ children, onSelect, className }: any) => (
+
+ {children}
+
+ ),
+ CommandSeparator: ({ className }: any) => , +})); + +vi.mock("@/modules/ui/components/popover", () => ({ + Popover: ({ children, open, onOpenChange }: any) => ( +
+ {children}
+
+
+ ),
+ PopoverTrigger: ({ children, asChild }: any) => (
+
+ {children}
+
+ ),
+ PopoverContent: ({ children, className }: any) => (
+
+ {children}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/input", () => ({
+ Input: ({ id, className, value, onChange, ...props }: any) => (
+
+ ),
+}));
+
+vi.mock("next/image", () => ({
+ default: ({ src, alt, width, height, className }: any) => (
+ Icon
;
+ render(Loader
),
+ UsersIcon: vi.fn(() => Users
),
+ };
+});
+
+// Mock react-hot-toast
+vi.mock("react-hot-toast", () => ({
+ default: {
+ error: vi.fn(),
+ success: vi.fn(),
+ },
+}));
+
+describe("LoadSegmentModal", () => {
+ const mockDate = new Date("2023-01-01T12:00:00Z");
+
+ const mockCurrentSegment: TSegment = {
+ id: "current-segment-id",
+ title: "Current Segment",
+ description: "Current segment description",
+ isPrivate: false,
+ filters: [],
+ environmentId: "env-1",
+ surveys: ["survey-1"],
+ createdAt: mockDate,
+ updatedAt: mockDate,
+ };
+
+ const mockSegments: TSegment[] = [
+ {
+ id: "segment-1",
+ title: "Segment 1",
+ description: "Test segment 1",
+ isPrivate: false,
+ filters: [],
+ environmentId: "env-1",
+ surveys: ["survey-1"],
+ createdAt: new Date("2023-01-02T12:00:00Z"),
+ updatedAt: new Date("2023-01-05T12:00:00Z"),
+ },
+ {
+ id: "segment-2",
+ title: "Segment 2",
+ description: "Test segment 2",
+ isPrivate: false,
+ filters: [],
+ environmentId: "env-1",
+ surveys: ["survey-1"],
+ createdAt: new Date("2023-02-02T12:00:00Z"),
+ updatedAt: new Date("2023-02-05T12:00:00Z"),
+ },
+ {
+ id: "segment-3",
+ title: "Segment 3 (Private)",
+ description: "This is private",
+ isPrivate: true,
+ filters: [],
+ environmentId: "env-1",
+ surveys: ["survey-1"],
+ createdAt: mockDate,
+ updatedAt: mockDate,
+ },
+ ];
+
+ const mockSurveyId = "survey-1";
+ const mockSetOpen = vi.fn();
+ const mockSetSegment = vi.fn();
+ const mockSetIsSegmentEditorOpen = vi.fn();
+ const mockOnSegmentLoad = vi.fn();
+
+ const defaultProps = {
+ open: true,
+ setOpen: mockSetOpen,
+ surveyId: mockSurveyId,
+ currentSegment: mockCurrentSegment,
+ segments: mockSegments,
+ setSegment: mockSetSegment,
+ setIsSegmentEditorOpen: mockSetIsSegmentEditorOpen,
+ onSegmentLoad: mockOnSegmentLoad,
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders empty state when no segments are available", () => {
+ render(Test Content
,
+ };
+
+ afterEach(() => {
+ cleanup();
+ vi.resetAllMocks();
+ });
+
+ test("renders with color background", () => {
+ render(
+ {children}
+
+
+ ) : null
+ ),
+}));
+
+describe("ModalWithTabs", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const mockTabs = [
+ {
+ title: "Tab 1",
+ children: Content for Tab 1
,
+ },
+ {
+ title: "Tab 2",
+ children: Content for Tab 2
,
+ },
+ {
+ title: "Tab 3",
+ children: Content for Tab 3
,
+ },
+ ];
+
+ const defaultProps = {
+ open: true,
+ setOpen: vi.fn(),
+ tabs: mockTabs,
+ label: "Test Label",
+ description: "Test Description",
+ };
+
+ test("renders modal with tabs when open", () => {
+ render(Icon
;
+ render(
+ {open && children}
+
+
+ ),
+ Portal: ({ children }: any) => {children}
,
+ Overlay: ({ className, ...props }: any) => (
+
+ ),
+ Content: ({ className, children, ...props }: any) => (
+
+ {children}
+
+ ),
+ Close: ({ className, children }: any) => (
+
+ ),
+ DialogTitle: ({ children }: any) => {children}
,
+ DialogDescription: () => ,
+ };
+});
+
+describe("Modal", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders nothing when open is false", () => {
+ render(
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+
+ {children}
+
+ )),
+ { Input: CommandInput }
+ );
+
+ return { Command };
+});
+
+// Mock the Badge component
+vi.mock("@/modules/ui/components/multi-select/badge", () => ({
+ Badge: ({ children, className }: any) => (
+
+ {children}
+
+ ),
+}));
+
+// Mock the Command components
+vi.mock("@/modules/ui/components/command", () => ({
+ Command: ({ children, className, onKeyDown }: any) => (
+
+ {children}
+
+ ),
+ CommandGroup: ({ children, className }: any) => (
+
+ {children}
+
+ ),
+ CommandItem: ({ children, className, onSelect, onMouseDown }: any) => (
+ onSelect?.()}
+ onMouseDown={onMouseDown}>
+ {children}
+
+ ),
+ CommandList: ({ children }: any) => {children}
,
+}));
+
+describe("MultiSelect", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const options = [
+ { value: "apple", label: "Apple" },
+ { value: "banana", label: "Banana" },
+ { value: "orange", label: "Orange" },
+ ];
+
+ test("renders with default props", () => {
+ render(
+
+ );
+ },
+}));
+
+// Mock the Input component
+vi.mock("@/modules/ui/components/input", () => ({
+ Input: ({ disabled, placeholder, onChange, value, isInvalid }: any) => (
+ onChange && onChange(e)}
+ data-invalid={isInvalid}
+ />
+ ),
+}));
+
+// Mock the form components
+vi.mock("@/modules/ui/components/form", () => ({
+ FormControl: ({ children }: { children: React.ReactNode }) => {title}
+
+ {isChecked && {children}
}
+ {children}
,
+ FormField: ({ render, name }: any) =>
+ render({
+ field: {
+ value: undefined,
+ onChange: vi.fn(),
+ name,
+ },
+ fieldState: { error: null },
+ }),
+ FormItem: ({ children }: { children: React.ReactNode }) => {children}
,
+}));
+
+// Mock the tolgee translation
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => key,
+ }),
+}));
+
+// Helper component for the form
+const TestWrapper = ({ cssSelector, disabled = false }: { cssSelector?: string; disabled?: boolean }) => {
+ const form = useForm
+
+ );
+ },
+}));
+
+// Mock the Input component
+vi.mock("@/modules/ui/components/input", () => ({
+ Input: ({ disabled, placeholder, onChange, value, isInvalid }: any) => (
+ onChange && onChange(e)}
+ data-invalid={isInvalid}
+ />
+ ),
+}));
+
+// Mock the form components
+vi.mock("@/modules/ui/components/form", () => ({
+ FormControl: ({ children }: { children: React.ReactNode }) => {title}
+
+ {isChecked && {children}
}
+ {children}
,
+ FormField: ({ render, name }: any) =>
+ render({
+ field: {
+ value: undefined,
+ onChange: vi.fn(),
+ name,
+ },
+ fieldState: { error: null },
+ }),
+ FormItem: ({ children }: { children: React.ReactNode }) => {children}
,
+}));
+
+// Mock the tolgee translation
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => key,
+ }),
+}));
+
+// Helper component for the form
+const TestWrapper = ({ innerHtml, disabled = false }: { innerHtml?: string; disabled?: boolean }) => {
+ const form = useForm
+ {options.map((option: any) => (
+
+ ))}
+
+ ),
+}));
+
+// Mock the Input component
+vi.mock("@/modules/ui/components/input", () => ({
+ Input: ({
+ className,
+ type,
+ disabled,
+ placeholder,
+ onChange,
+ value,
+ isInvalid,
+ name,
+ autoComplete,
+ ...rest
+ }: any) => (
+ onChange && onChange(e)}
+ data-invalid={isInvalid}
+ autoComplete={autoComplete}
+ {...rest}
+ />
+ ),
+}));
+
+// Mock the Button component - Fixed to use correct data-testid values
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: ({ children, variant, size, onClick, disabled, className, type }: any) => (
+
+ ),
+}));
+
+// Mock the Select component
+vi.mock("@/modules/ui/components/select", () => ({
+ Select: ({ children, onValueChange, value, name, disabled }: any) => (
+
+ {children}
+
+ ),
+ SelectContent: ({ children }: any) => {children}
,
+ SelectItem: ({ children, value }: any) => (
+
+ {children}
+
+ ),
+ SelectTrigger: ({ children, className }: any) => (
+
+ {children}
+
+ ),
+ SelectValue: ({ placeholder }: any) => {placeholder}
,
+}));
+
+// Mock the Label component
+vi.mock("@/modules/ui/components/label", () => ({
+ Label: ({ children, className }: any) => (
+
+ ),
+}));
+
+// Mock icons
+vi.mock("lucide-react", () => ({
+ PlusIcon: () => ,
+ TrashIcon: () => ,
+}));
+
+// Mock the form components
+vi.mock("@/modules/ui/components/form", () => ({
+ FormControl: ({ children }: { children: React.ReactNode }) => {children}
,
+ FormField: ({ render, control, name }: any) =>
+ render({
+ field: {
+ onChange: vi.fn(),
+ value: (() => {
+ if (name === "noCodeConfig.urlFilters") {
+ return control?._formValues?.noCodeConfig?.urlFilters || [];
+ }
+ if (name?.startsWith("noCodeConfig.urlFilters.")) {
+ const parts = name.split(".");
+ const index = parseInt(parts[2]);
+ const property = parts[3];
+ return control?._formValues?.noCodeConfig?.urlFilters?.[index]?.[property] || "";
+ }
+ return "";
+ })(),
+ name,
+ },
+ fieldState: { error: null },
+ }),
+ FormItem: ({ children, className }: any) => {children}
,
+}));
+
+// Mock the tolgee translation
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => key,
+ }),
+}));
+
+// Helper component for the form
+const TestWrapper = ({
+ urlFilters = [] as {
+ rule: "startsWith" | "exactMatch" | "contains" | "endsWith" | "notMatch" | "notContains";
+ value: string;
+ }[],
+ isReadOnly = false,
+}) => {
+ const form = useForm
+
({
+ Alert: ({ children }: { children: React.ReactNode }) => ({
+ defaultValues: {
+ name: "Test Action",
+ description: "Test Description",
+ noCodeConfig,
+ },
+ });
+
+ return
+
+ );
+
+ expect(screen.getByTestId("child-element")).toBeInTheDocument();
+ expect(screen.getByText("Child content")).toBeInTheDocument();
+ });
+});
diff --git a/apps/web/modules/ui/components/options-switch/index.test.tsx b/apps/web/modules/ui/components/options-switch/index.test.tsx
new file mode 100644
index 0000000000..313f8db482
--- /dev/null
+++ b/apps/web/modules/ui/components/options-switch/index.test.tsx
@@ -0,0 +1,92 @@
+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 { OptionsSwitch } from "./index";
+
+describe("OptionsSwitch", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const mockOptions = [
+ { value: "option1", label: "Option 1" },
+ { value: "option2", label: "Option 2" },
+ { value: "option3", label: "Option 3", disabled: true },
+ ];
+
+ test("renders all options correctly", () => {
+ render( {}} />);
+
+ expect(screen.getByText("Option 1")).toBeInTheDocument();
+ expect(screen.getByText("Option 2")).toBeInTheDocument();
+ expect(screen.getByText("Option 3")).toBeInTheDocument();
+ });
+
+ test("highlights the current option", () => {
+ render( {}} />);
+
+ // Check that the highlight div exists
+ const highlight = document.querySelector(".absolute.bottom-1.top-1.rounded-md.bg-slate-100");
+ expect(highlight).toBeInTheDocument();
+ });
+
+ test("calls handleOptionChange with option value when clicked", async () => {
+ const handleOptionChange = vi.fn();
+ const user = userEvent.setup();
+
+ render(
+ {}} />
+ );
+
+ expect(screen.getByTestId("icon-option1")).toBeInTheDocument();
+ });
+
+ test("updates highlight position when current option changes", () => {
+ const { rerender } = render(
+ {}} />
+ );
+
+ // Re-render with different current option
+ rerender( {}} />);
+
+ // The highlight style should be updated through useEffect
+ // We can verify the component doesn't crash on re-render
+ expect(screen.getByText("Option 2")).toBeInTheDocument();
+ });
+});
diff --git a/apps/web/modules/ui/components/otp-input/index.test.tsx b/apps/web/modules/ui/components/otp-input/index.test.tsx
new file mode 100644
index 0000000000..f087bd058a
--- /dev/null
+++ b/apps/web/modules/ui/components/otp-input/index.test.tsx
@@ -0,0 +1,119 @@
+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 { OTPInput } from "./index";
+
+describe("OTPInput", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders correct number of input fields", () => {
+ const onChange = vi.fn();
+ render(
+
+ );
+
+ expect(getByText("Test Content")).toBeInTheDocument();
+ });
+
+ test("applies default classes", () => {
+ const { container } = render(
+
+
+ );
+
+ const wrapper = container.firstChild as HTMLElement;
+ expect(wrapper).toHaveClass("h-full");
+ expect(wrapper).toHaveClass("space-y-6");
+ expect(wrapper).toHaveClass("p-6");
+ });
+
+ test("applies additional className when provided", () => {
+ const { container } = render(
+
+
+ );
+
+ const wrapper = container.firstChild as HTMLElement;
+ expect(wrapper).toHaveClass("h-full");
+ expect(wrapper).toHaveClass("space-y-6");
+ expect(wrapper).toHaveClass("p-6");
+ expect(wrapper).toHaveClass("bg-gray-100");
+ expect(wrapper).toHaveClass("rounded-lg");
+ });
+});
diff --git a/apps/web/modules/ui/components/page-header/index.test.tsx b/apps/web/modules/ui/components/page-header/index.test.tsx
new file mode 100644
index 0000000000..a5dc2a1248
--- /dev/null
+++ b/apps/web/modules/ui/components/page-header/index.test.tsx
@@ -0,0 +1,58 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import { PageHeader } from "./index";
+
+describe("PageHeader", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders page title correctly", () => {
+ render(Add User} />);
+
+ expect(screen.getByText("Users")).toBeInTheDocument();
+ expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+ expect(screen.getByText("Add User")).toBeInTheDocument();
+ });
+
+ test("renders children correctly", () => {
+ render(
+
+
+ );
+
+ expect(screen.getByText("Settings")).toBeInTheDocument();
+ expect(screen.getByTestId("child-element")).toBeInTheDocument();
+ expect(screen.getByText("Additional content")).toBeInTheDocument();
+ });
+
+ test("renders with both CTA and children", () => {
+ render(
+ New Product}>
+
+ );
+
+ expect(screen.getByText("Products")).toBeInTheDocument();
+ expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+ expect(screen.getByText("New Product")).toBeInTheDocument();
+ expect(screen.getByTestId("child-element")).toBeInTheDocument();
+ expect(screen.getByText("Product filters")).toBeInTheDocument();
+ });
+
+ test("has border-b class", () => {
+ const { container } = render(
+ ),
+}));
+
+describe("PictureSelectionResponse", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const mockChoices = [
+ {
+ id: "choice1",
+ imageUrl: "https://example.com/image1.jpg",
+ },
+ {
+ id: "choice2",
+ imageUrl: "https://example.com/image2.jpg",
+ },
+ {
+ id: "choice3",
+ imageUrl: "https://example.com/image3.jpg",
+ },
+ ];
+
+ test("renders images for selected choices", () => {
+ const { container } = render(
+
+ Open Popover
+ Popover Content
+
+ );
+
+ // Trigger should be visible
+ const trigger = screen.getByText("Open Popover");
+ expect(trigger).toBeInTheDocument();
+
+ // Content should not be visible initially
+ expect(screen.queryByText("Popover Content")).not.toBeInTheDocument();
+
+ // Click the trigger to open the popover
+ await user.click(trigger);
+
+ // Content should now be visible inside the Portal
+ const portal = screen.getByTestId("portal");
+ expect(portal).toBeInTheDocument();
+ expect(portal).toHaveTextContent("Popover Content");
+ });
+
+ test("passes align and sideOffset props to popover content", async () => {
+ const user = userEvent.setup();
+
+ render(
+
+ Open Popover
+
+ Popover Content
+
+
+ );
+
+ // Click the trigger to open the popover
+ await user.click(screen.getByText("Open Popover"));
+
+ // Content should have the align and sideOffset props
+ const content = screen.getByTestId("portal").firstChild as HTMLElement;
+
+ // These attributes are handled by RadixUI internally, so we can't directly test the DOM
+ // but we can verify the component doesn't crash when these props are provided
+ expect(content).toBeInTheDocument();
+ expect(content).toHaveTextContent("Popover Content");
+ });
+
+ test("forwards ref to popover content", async () => {
+ const user = userEvent.setup();
+ const ref = vi.fn();
+
+ render(
+
+ Open Popover
+ Popover Content
+
+ );
+
+ // Click the trigger to open the popover
+ await user.click(screen.getByText("Open Popover"));
+
+ // Ref should have been called - this test is mostly to ensure the component supports refs
+ expect(screen.getByTestId("portal")).toBeInTheDocument();
+ });
+
+ test("closes when clicking outside", async () => {
+ const user = userEvent.setup();
+
+ render(
+ <>
+
+ Open Popover
+ Popover Content
+
+
+ );
+
+ // Open the popover
+ await user.click(screen.getByText("Open Popover"));
+ expect(screen.getByTestId("portal")).toBeInTheDocument();
+
+ // Click outside
+ await user.click(screen.getByTestId("outside-element"));
+
+ // This test is more about ensuring the component has the default behavior of closing on outside click
+ // The actual closing is handled by RadixUI, so we can't directly test it without more complex mocking
+ });
+});
diff --git a/apps/web/modules/ui/components/preview-survey/components/tab-option.test.tsx b/apps/web/modules/ui/components/preview-survey/components/tab-option.test.tsx
new file mode 100644
index 0000000000..f53db2b9a1
--- /dev/null
+++ b/apps/web/modules/ui/components/preview-survey/components/tab-option.test.tsx
@@ -0,0 +1,61 @@
+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 { TabOption } from "./tab-option";
+
+describe("TabOption", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders with active state", () => {
+ render(Icon} onClick={() => {}} />);
+
+ const tabElement = screen.getByTestId("test-icon").parentElement;
+ expect(tabElement).toBeInTheDocument();
+ expect(tabElement).toHaveClass("rounded-full");
+ expect(tabElement).toHaveClass("bg-slate-200");
+ expect(screen.getByTestId("test-icon")).toBeInTheDocument();
+ });
+
+ test("renders with inactive state", () => {
+ render(Icon} onClick={() => {}} />);
+
+ const tabElement = screen.getByTestId("test-icon").parentElement;
+ expect(tabElement).toBeInTheDocument();
+ expect(tabElement).not.toHaveClass("rounded-full");
+ expect(tabElement).not.toHaveClass("bg-slate-200");
+ expect(screen.getByTestId("test-icon")).toBeInTheDocument();
+ });
+
+ test("calls onClick handler when clicked", async () => {
+ const handleClick = vi.fn();
+ const user = userEvent.setup();
+
+ render(
+ Icon} onClick={handleClick} />
+ );
+
+ const tabElement = screen.getByTestId("test-icon").parentElement;
+ await user.click(tabElement!);
+ expect(handleClick).toHaveBeenCalledTimes(1);
+ });
+
+ test("renders children (icon) properly", () => {
+ render(
+
+ Nested Icon
+
+ }
+ onClick={() => {}}
+ />
+ );
+
+ expect(screen.getByTestId("complex-icon")).toBeInTheDocument();
+ expect(screen.getByText("Nested Icon")).toBeInTheDocument();
+ });
+});
diff --git a/apps/web/modules/ui/components/preview-survey/index.test.tsx b/apps/web/modules/ui/components/preview-survey/index.test.tsx
new file mode 100644
index 0000000000..7491c95546
--- /dev/null
+++ b/apps/web/modules/ui/components/preview-survey/index.test.tsx
@@ -0,0 +1,356 @@
+import { SurveyType } from "@prisma/client";
+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 { PreviewSurvey } from "./index";
+
+// Mock dependent components
+vi.mock("@/modules/ui/components/client-logo", () => ({
+ ClientLogo: ({ environmentId, projectLogo, previewSurvey }: any) => (
+
{children}
,
+ AlertTitle: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+ AlertDescription: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+}));
+
+// Mock the form components
+vi.mock("@/modules/ui/components/form", () => ({
+ FormControl: ({ children }: { children: React.ReactNode }) => {children}
,
+ FormField: ({ render, control }: any) =>
+ render({
+ field: {
+ value: control?._formValues?.noCodeConfig?.type || "",
+ onChange: vi.fn(),
+ },
+ }),
+ FormItem: ({ children }: { children: React.ReactNode }) => {children}
,
+ FormError: () => null,
+}));
+
+// Mock the TabToggle component
+vi.mock("@/modules/ui/components/tab-toggle", () => ({
+ TabToggle: ({ options, onChange, defaultSelected, id, disabled }: any) => (
+
+ {options.map((option: any) => (
+
+ ))}
+
+ ),
+}));
+
+// Mock the Label component
+vi.mock("@/modules/ui/components/label", () => ({
+ Label: ({ children, className }: any) => (
+
+ ),
+}));
+
+// Mock child components
+vi.mock("./components/css-selector", () => ({
+ CssSelector: ({ form, disabled }: any) => (
+
+ CSS Selector
+
+ ),
+}));
+
+vi.mock("./components/inner-html-selector", () => ({
+ InnerHtmlSelector: ({ form, disabled }: any) => (
+
+ Inner HTML Selector
+
+ ),
+}));
+
+vi.mock("./components/page-url-selector", () => ({
+ PageUrlSelector: ({ form, isReadOnly }: any) => (
+
+ Page URL Selector
+
+ ),
+}));
+
+// Mock the tolgee translation
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => key,
+ }),
+}));
+
+// Helper component for the form
+const TestWrapper = ({
+ noCodeConfig = { type: "click" },
+ isReadOnly = false,
+}: {
+ noCodeConfig?: { type: "click" | "pageView" | "exitIntent" | "fiftyPercentScroll" };
+ isReadOnly?: boolean;
+}) => {
+ const form = useFormLoading Spinner
,
+}));
+
+describe("OptionCard", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders with small size correctly", () => {
+ render(Child content
+ Test Content
+ Test Content
+ Test Content
+ Additional content
+ Product filters
+ {children}
,
+ };
+});
+
+describe("Popover", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders the popover with trigger and content", async () => {
+ const user = userEvent.setup();
+
+ render(
+ Outside
+
+ {projectLogo ? "Custom Logo" : "Default Logo"}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/media-background", () => ({
+ MediaBackground: ({ children, surveyType, styling, isMobilePreview, isEditorView }: any) => (
+
+ {children}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/reset-progress-button", () => ({
+ ResetProgressButton: ({ onClick }: any) => (
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/survey", () => ({
+ SurveyInline: ({
+ survey,
+ isBrandingEnabled,
+ isPreviewMode,
+ getSetQuestionId,
+ onClose,
+ onFinished,
+ languageCode,
+ }: any) => {
+ // Store the setQuestionId function to be used in tests
+ if (getSetQuestionId) {
+ getSetQuestionId((val: string) => {
+ // Just a simple implementation for testing
+ });
+ }
+
+ return (
+
+
+
+
+ );
+ },
+}));
+
+vi.mock("./components/modal", () => ({
+ Modal: ({ children, isOpen, placement, darkOverlay, clickOutsideClose, previewMode }: any) =>
+ isOpen ? (
+
+ {children}
+
+ ) : null,
+}));
+
+vi.mock("./components/tab-option", () => ({
+ TabOption: ({ active, onClick, icon }: any) => (
+
+ ),
+}));
+
+// Mock framer-motion to avoid animation issues in tests
+vi.mock("framer-motion", () => ({
+ motion: {
+ div: ({ children, ...props }: any) => {children}
,
+ },
+ Variants: vi.fn(),
+}));
+
+// Mock the icon components
+vi.mock("lucide-react", () => ({
+ ExpandIcon: () => Expand,
+ ShrinkIcon: () => Shrink,
+ MonitorIcon: () => Monitor,
+ SmartphoneIcon: () => Smartphone,
+}));
+
+// Mock the tolgee translation
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => key,
+ }),
+}));
+
+describe("PreviewSurvey", () => {
+ afterEach(() => {
+ cleanup();
+ vi.restoreAllMocks();
+ });
+
+ const mockProject = {
+ id: "project-1",
+ name: "Test Project",
+ placement: "bottomRight",
+ darkOverlay: false,
+ clickOutsideClose: true,
+ styling: {
+ roundness: 8,
+ allowStyleOverwrite: false,
+ cardBackgroundColor: {
+ light: "#FFFFFF",
+ },
+ highlightBorderColor: {
+ light: "",
+ },
+ isLogoHidden: false,
+ },
+ inAppSurveyBranding: true,
+ linkSurveyBranding: true,
+ logo: null,
+ } as any;
+
+ const mockEnvironment = {
+ id: "env-1",
+ appSetupCompleted: true,
+ } as any;
+
+ const mockSurvey = {
+ id: "survey-1",
+ name: "Test Survey",
+ type: "app" as SurveyType,
+ welcomeCard: {
+ enabled: true,
+ },
+ questions: [
+ { id: "q1", headline: "Question 1" },
+ { id: "q2", headline: "Question 2" },
+ ],
+ endings: [],
+ styling: {
+ overwriteThemeStyling: false,
+ roundness: 8,
+ cardBackgroundColor: {
+ light: "#FFFFFF",
+ },
+ highlightBorderColor: {
+ light: "",
+ },
+ isLogoHidden: false,
+ },
+ recaptcha: {
+ enabled: false,
+ },
+ } as any;
+
+ test("renders desktop preview mode by default", () => {
+ render(
+ +
Preview
-
+
) : (
-
+
{!styling.isLogoHidden && (
}
isEditorView>
-
+
{!styling.isLogoHidden && (
{}}
+ locale={"en-US"}
+ />
+ );
+
+ // Check table headers
+ expect(screen.getByText("environments.surveys.edit.address_fields")).toBeInTheDocument();
+ expect(screen.getByText("common.show")).toBeInTheDocument();
+ expect(screen.getByText("environments.surveys.edit.required")).toBeInTheDocument();
+ expect(screen.getByText("common.label")).toBeInTheDocument();
+
+ // Check field labels
+ expect(screen.getByText("Street")).toBeInTheDocument();
+ expect(screen.getByText("City")).toBeInTheDocument();
+
+ // Check switches are rendered with correct state
+ const streetShowSwitch = screen.getAllByTestId("switch-on")[0];
+ const streetRequiredSwitch = screen.getAllByTestId("switch-on")[1];
+ const cityShowSwitch = screen.getAllByTestId("switch-on")[2];
+ const cityRequiredSwitch = screen.getByTestId("switch-off");
+
+ expect(streetShowSwitch).toBeInTheDocument();
+ expect(streetRequiredSwitch).toBeInTheDocument();
+ expect(cityShowSwitch).toBeInTheDocument();
+ expect(cityRequiredSwitch).toBeInTheDocument();
+
+ // Check inputs are rendered
+ expect(screen.getByTestId("input-street.placeholder")).toBeInTheDocument();
+ expect(screen.getByTestId("input-city.placeholder")).toBeInTheDocument();
+ });
+
+ test("renders contact fields correctly", () => {
+ const updateQuestionMock = vi.fn();
+
+ render(
+ {}}
+ locale={"en-US"}
+ />
+ );
+
+ expect(screen.getByText("environments.surveys.edit.contact_fields")).toBeInTheDocument();
+ });
+
+ test("handles show toggle", async () => {
+ const updateQuestionMock = vi.fn();
+ const user = userEvent.setup();
+
+ render(
+ {}}
+ locale={"en-US"}
+ />
+ );
+
+ // Toggle the city show switch
+ const cityShowSwitch = screen.getAllByTestId("switch-on")[2];
+ await user.click(cityShowSwitch);
+
+ // Check that updateQuestion was called with correct parameters
+ expect(updateQuestionMock).toHaveBeenCalledWith(0, {
+ city: {
+ show: false,
+ required: false,
+ placeholder: { default: "Enter your city" },
+ },
+ });
+ });
+
+ test("handles required toggle", async () => {
+ const updateQuestionMock = vi.fn();
+ const user = userEvent.setup();
+
+ render(
+ {}}
+ locale={"en-US"}
+ />
+ );
+
+ // Toggle the city required switch
+ const cityRequiredSwitch = screen.getByTestId("switch-off");
+ await user.click(cityRequiredSwitch);
+
+ // Check that updateQuestion was called with correct parameters
+ expect(updateQuestionMock).toHaveBeenCalledWith(0, {
+ city: {
+ show: true,
+ required: true,
+ placeholder: { default: "Enter your city" },
+ },
+ });
+ });
+
+ test("disables show toggle when it's the last visible field", async () => {
+ const fieldsWithOnlyOneVisible = [
+ {
+ id: "street",
+ show: true,
+ required: false,
+ label: "Street",
+ placeholder: { default: "Enter your street" },
+ },
+ {
+ id: "city",
+ show: false,
+ required: false,
+ label: "City",
+ placeholder: { default: "Enter your city" },
+ },
+ ];
+
+ render(
+ {}}
+ selectedLanguageCode="default"
+ setSelectedLanguageCode={() => {}}
+ locale={"en-US"}
+ />
+ );
+
+ // The street show toggle should be disabled
+ const streetShowSwitch = screen.getByTestId("switch-on");
+ expect(streetShowSwitch).toHaveAttribute("data-disabled", "true");
+ expect(streetShowSwitch).toBeDisabled();
+ });
+
+ test("disables required toggle when field is not shown", async () => {
+ const fieldsWithHiddenField = [
+ {
+ id: "street",
+ show: true,
+ required: false,
+ label: "Street",
+ placeholder: { default: "Enter your street" },
+ },
+ {
+ id: "city",
+ show: false,
+ required: false,
+ label: "City",
+ placeholder: { default: "Enter your city" },
+ },
+ ];
+
+ render(
+ {}}
+ selectedLanguageCode="default"
+ setSelectedLanguageCode={() => {}}
+ locale={"en-US"}
+ />
+ );
+
+ // The city required toggle should be disabled
+ const requiredSwitches = screen.getAllByTestId("switch-off");
+ const cityRequiredSwitch = requiredSwitches[requiredSwitches.length - 1]; // Last one should be city's required switch
+ expect(cityRequiredSwitch).toHaveAttribute("data-disabled", "true");
+ expect(cityRequiredSwitch).toBeDisabled();
+ });
+});
diff --git a/apps/web/modules/ui/components/radio-group/index.test.tsx b/apps/web/modules/ui/components/radio-group/index.test.tsx
new file mode 100644
index 0000000000..679dd9408f
--- /dev/null
+++ b/apps/web/modules/ui/components/radio-group/index.test.tsx
@@ -0,0 +1,134 @@
+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 { RadioGroup, RadioGroupItem } from "./index";
+
+describe("RadioGroup", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders radio group with items", () => {
+ render(
+
+
+ );
+
+ expect(screen.getByText("Option 1")).toBeInTheDocument();
+ expect(screen.getByText("Option 2")).toBeInTheDocument();
+ expect(screen.getByLabelText("Option 1")).toBeInTheDocument();
+ expect(screen.getByLabelText("Option 2")).toBeInTheDocument();
+ });
+
+ test("selects default value", () => {
+ render(
+
+
+ );
+
+ const option1 = screen.getByLabelText("Option 1");
+ const option2 = screen.getByLabelText("Option 2");
+
+ expect(option1).toBeChecked();
+ expect(option2).not.toBeChecked();
+ });
+
+ test("changes selection when clicking on a different option", async () => {
+ const user = userEvent.setup();
+ const handleValueChange = vi.fn();
+
+ render(
+
+
+ );
+
+ const option2 = screen.getByLabelText("Option 2");
+ await user.click(option2);
+
+ expect(handleValueChange).toHaveBeenCalledWith("option2");
+ });
+
+ test("renders disabled radio items", async () => {
+ const user = userEvent.setup();
+ const handleValueChange = vi.fn();
+
+ render(
+
+
+ );
+
+ const option2 = screen.getByLabelText("Option 2 (Disabled)");
+ expect(option2).toBeDisabled();
+
+ await user.click(option2);
+ expect(handleValueChange).not.toHaveBeenCalled();
+ });
+
+ test("applies custom className to RadioGroup", () => {
+ render(
+
+
+ );
+
+ const radioGroup = screen.getByRole("radiogroup");
+ expect(radioGroup).toHaveClass("custom-class");
+ expect(radioGroup).toHaveClass("grid");
+ expect(radioGroup).toHaveClass("gap-x-3");
+ });
+
+ test("applies custom className to RadioGroupItem", () => {
+ render(
+
+
+ );
+
+ const radioItem = screen.getByLabelText("Option 1");
+ expect(radioItem).toHaveClass("custom-item-class");
+ expect(radioItem).toHaveClass("h-4");
+ expect(radioItem).toHaveClass("w-4");
+ expect(radioItem).toHaveClass("rounded-full");
+ expect(radioItem).toHaveClass("border");
+ expect(radioItem).toHaveClass("border-slate-300");
+ });
+});
diff --git a/apps/web/modules/ui/components/ranking-response/index.test.tsx b/apps/web/modules/ui/components/ranking-response/index.test.tsx
new file mode 100644
index 0000000000..2da2a20943
--- /dev/null
+++ b/apps/web/modules/ui/components/ranking-response/index.test.tsx
@@ -0,0 +1,82 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import { RankingResponse } from "./index";
+
+describe("RankingResponse", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders ranked items correctly", () => {
+ const rankedItems = ["Apple", "Banana", "Cherry"];
+
+ render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{value.map(
diff --git a/apps/web/modules/ui/components/rating-response/index.test.tsx b/apps/web/modules/ui/components/rating-response/index.test.tsx
new file mode 100644
index 0000000000..ecea358b82
--- /dev/null
+++ b/apps/web/modules/ui/components/rating-response/index.test.tsx
@@ -0,0 +1,71 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { RatingResponse } from "./index";
+
+// Mock the RatingSmiley component
+vi.mock("@/modules/analysis/components/RatingSmiley", () => ({
+ RatingSmiley: ({ active, idx, range, addColors }: any) => (
+ {}} />);
+
+ expect(screen.getByRole("button")).toBeInTheDocument();
+ expect(screen.getByText("Restart")).toBeInTheDocument();
+ expect(screen.getByTestId("repeat-icon")).toBeInTheDocument();
+ });
+
+ test("button has correct styling", () => {
+ render( {}} />);
+
+ const button = screen.getByRole("button");
+ expect(button).toHaveClass("h-fit");
+ expect(button).toHaveClass("bg-white");
+ expect(button).toHaveClass("text-slate-500");
+ expect(button).toHaveClass("px-2");
+ expect(button).toHaveClass("py-0");
+ });
+
+ test("calls onClick handler when clicked", async () => {
+ const handleClick = vi.fn();
+ const user = userEvent.setup();
+
+ render(((resolve) => {
+ setTimeout(() => resolve({ id: "newSegment" }), 100);
+ });
+
+ const loadingProps = {
+ ...mockProps,
+ segment: {
+ ...mockProps.segment,
+ id: "temp",
+ },
+ onCreateSegment: vi.fn().mockReturnValue(delayedPromise),
+ };
+
+ render( {}} />);
+
+ expect(screen.getByPlaceholderText("Search by survey name")).toBeInTheDocument();
+ expect(screen.getByTestId("search-icon")).toBeInTheDocument();
+ });
+
+ test("renders with custom placeholder", () => {
+ render( {}} placeholder="Custom placeholder" />);
+
+ expect(screen.getByPlaceholderText("Custom placeholder")).toBeInTheDocument();
+ });
+
+ test("displays the provided value", () => {
+ render( {}} />);
+
+ const input = screen.getByPlaceholderText("Search by survey name") as HTMLInputElement;
+ expect(input.value).toBe("test query");
+ });
+
+ test("applies custom className", () => {
+ const { container } = render( {}} className="custom-class" />);
+
+ const searchBarContainer = container.firstChild as HTMLElement;
+ expect(searchBarContainer).toHaveClass("custom-class");
+ expect(searchBarContainer).toHaveClass("flex");
+ expect(searchBarContainer).toHaveClass("h-8");
+ });
+});
diff --git a/apps/web/modules/ui/components/secondary-navigation/index.test.tsx b/apps/web/modules/ui/components/secondary-navigation/index.test.tsx
new file mode 100644
index 0000000000..f48ea19074
--- /dev/null
+++ b/apps/web/modules/ui/components/secondary-navigation/index.test.tsx
@@ -0,0 +1,67 @@
+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 { SecondaryNavigation } from "./index";
+
+// Mock next/link
+vi.mock("next/link", () => ({
+ __esModule: true,
+ default: ({ children, href, onClick }: any) => (
+
+ {children}
+
+ ),
+}));
+
+describe("SecondaryNavigation", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const mockNavigation = [
+ { id: "tab1", label: "Tab 1", href: "/tab1" },
+ { id: "tab2", label: "Tab 2", href: "/tab2" },
+ { id: "tab3", label: "Tab 3", onClick: vi.fn() },
+ { id: "tab4", label: "Hidden Tab", href: "/tab4", hidden: true },
+ ];
+
+ test("renders navigation items correctly", () => {
+ render(
+
+ );
+
+ const skeletonElement = container.firstChild as HTMLElement;
+ expect(skeletonElement).toBeInTheDocument();
+ expect(skeletonElement.textContent).toBe("Content");
+ });
+});
diff --git a/apps/web/modules/ui/components/slider/index.test.tsx b/apps/web/modules/ui/components/slider/index.test.tsx
new file mode 100644
index 0000000000..163ab8b37c
--- /dev/null
+++ b/apps/web/modules/ui/components/slider/index.test.tsx
@@ -0,0 +1,97 @@
+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 { Slider } from "./index";
+
+// Mock Radix UI Slider components
+vi.mock("@radix-ui/react-slider", () => ({
+ Root: ({ className, defaultValue, value, onValueChange, disabled, ...props }: any) => (
+ Lead paragraph );
+ const pElement = container.querySelector("p");
+
+ expect(pElement).toBeInTheDocument();
+ expect(pElement).toHaveTextContent("Lead paragraph");
+ expect(pElement?.className).toContain("text-xl");
+ expect(pElement?.className).toContain("text-slate-800");
+ });
+
+ test("renders P correctly", () => {
+ const { container } = render(Large text );
+ const divElement = container.querySelector("div");
+
+ expect(divElement).toBeInTheDocument();
+ expect(divElement).toHaveTextContent("Large text");
+ expect(divElement?.className).toContain("text-lg");
+ expect(divElement?.className).toContain("font-semibold");
+ });
+
+ test("renders Small correctly", () => {
+ const { container } = render(Small text);
+ const pElement = container.querySelector("p");
+
+ expect(pElement).toBeInTheDocument();
+ expect(pElement).toHaveTextContent("Small text");
+ expect(pElement?.className).toContain("text-sm");
+ expect(pElement?.className).toContain("font-medium");
+ });
+
+ test("renders Muted correctly", () => {
+ const { container } = render(Muted text );
+ const spanElement = container.querySelector("span");
+
+ expect(spanElement).toBeInTheDocument();
+ expect(spanElement).toHaveTextContent("Muted text");
+ expect(spanElement?.className).toContain("text-sm");
+ expect(spanElement?.className).toContain("text-muted-foreground");
+ });
+
+ test("renders InlineCode correctly", () => {
+ const { container } = render(code );
+ const codeElement = container.querySelector("code");
+
+ expect(codeElement).toBeInTheDocument();
+ expect(codeElement).toHaveTextContent("code");
+ expect(codeElement?.className).toContain("font-mono");
+ expect(codeElement?.className).toContain("text-sm");
+ expect(codeElement?.className).toContain("font-semibold");
+ });
+
+ test("renders List correctly", () => {
+ const { container } = render(
+ ;
+
export type TSurveyQuestionChoice = z.infer;
// Logic types
diff --git a/sonar-project.properties b/sonar-project.properties
index e4bde865b0..96b0b03ebe 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -21,5 +21,5 @@ sonar.scm.exclusions.disabled=false
sonar.sourceEncoding=UTF-8
# Coverage
-sonar.coverage.exclusions=**/*.test.*,**/*.spec.*,**/*.mdx,**/*.config.mts,**/*.config.ts,**/constants.ts,**/route.ts,**/types/**,**/types.ts,**/stories.*,**/*.mock.*,**/mocks/**,**/__mocks__/**,**/openapi.ts,**/openapi-document.ts,**/instrumentation.ts,scripts/merge-client-endpoints.ts,**/playwright/**,**/Dockerfile,**/*.config.cjs,**/*.css,**/templates.ts,**/actions.ts,apps/web/modules/ui/components/icons/*,**/*.json,apps/web/vitestSetup.ts,apps/web/tailwind.config.js,apps/web/postcss.config.js,apps/web/next.config.mjs,apps/web/scripts/**,packages/js-core/vitest.setup.ts,**/*.mjs,apps/web/modules/auth/lib/mock-data.ts,apps/web/modules/analysis/components/SingleResponseCard/components/Smileys.tsx,packages/surveys/src/components/general/smileys.tsx,**/cache.ts,apps/web/app/**/billing-confirmation/**,apps/web/modules/ee/billing/**,apps/web/modules/ee/multi-language-surveys/**,apps/web/modules/email/**,apps/web/modules/integrations/**,apps/web/modules/setup/**/intro/**,apps/web/modules/setup/**/signup/**,apps/web/modules/setup/**/layout.tsx,apps/web/modules/survey/follow-ups/**,apps/web/app/share/**,apps/web/lib/shortUrl/**,apps/web/modules/ee/contacts/[contactId]/**,apps/web/modules/ee/contacts/components/**,apps/web/modules/ee/two-factor-auth/**,apps/web/lib/posthogServer.ts,apps/web/lib/slack/**,apps/web/lib/notion/**,apps/web/lib/googleSheet/**,apps/web/app/api/google-sheet/**,apps/web/app/api/billing/**,apps/web/lib/airtable/**,apps/web/app/api/v1/integrations/**,apps/web/lib/env.ts,**/instrumentation-node.ts,**/cache/**
-sonar.cpd.exclusions=**/*.test.*,**/*.spec.*,**/*.mdx,**/*.config.mts,**/*.config.ts,**/constants.ts,**/route.ts,**/types/**,**/types.ts,**/stories.*,**/*.mock.*,**/mocks/**,**/__mocks__/**,**/openapi.ts,**/openapi-document.ts,**/instrumentation.ts,scripts/merge-client-endpoints.ts,**/playwright/**,**/Dockerfile,**/*.config.cjs,**/*.css,**/templates.ts,**/actions.ts,apps/web/modules/ui/components/icons/*,**/*.json,apps/web/vitestSetup.ts,apps/web/tailwind.config.js,apps/web/postcss.config.js,apps/web/next.config.mjs,apps/web/scripts/**,packages/js-core/vitest.setup.ts,**/*.mjs,apps/web/modules/auth/lib/mock-data.ts,apps/web/modules/analysis/components/SingleResponseCard/components/Smileys.tsx,packages/surveys/src/components/general/smileys.tsx,**/cache.ts,apps/web/app/**/billing-confirmation/**,apps/web/modules/ee/billing/**,apps/web/modules/ee/multi-language-surveys/**,apps/web/modules/email/**,apps/web/modules/integrations/**,apps/web/modules/setup/**/intro/**,apps/web/modules/setup/**/signup/**,apps/web/modules/setup/**/layout.tsx,apps/web/modules/survey/follow-ups/**,apps/web/app/share/**,apps/web/lib/shortUrl/**,apps/web/modules/ee/contacts/[contactId]/**,apps/web/modules/ee/contacts/components/**,apps/web/modules/ee/two-factor-auth/**,apps/web/lib/posthogServer.ts,apps/web/lib/slack/**,apps/web/lib/notion/**,apps/web/lib/googleSheet/**,apps/web/app/api/google-sheet/**,apps/web/app/api/billing/**,apps/web/lib/airtable/**,apps/web/app/api/v1/integrations/**,apps/web/lib/env.ts,**/instrumentation-node.ts,**/cache/**
\ No newline at end of file
+sonar.coverage.exclusions=**/*.test.*,**/*.spec.*,**/*.mdx,**/*.config.mts,**/*.config.ts,**/constants.ts,**/route.ts,**/types/**,**/types.ts,**/stories.*,**/*.mock.*,**/mocks/**,**/__mocks__/**,**/openapi.ts,**/openapi-document.ts,**/instrumentation.ts,scripts/merge-client-endpoints.ts,**/playwright/**,**/Dockerfile,**/*.config.cjs,**/*.css,**/templates.ts,**/actions.ts,apps/web/modules/ui/components/icons/*,**/*.json,apps/web/vitestSetup.ts,apps/web/tailwind.config.js,apps/web/postcss.config.js,apps/web/next.config.mjs,apps/web/scripts/**,packages/js-core/vitest.setup.ts,**/*.mjs,apps/web/modules/auth/lib/mock-data.ts,apps/web/modules/analysis/components/SingleResponseCard/components/Smileys.tsx,packages/surveys/src/components/general/smileys.tsx,**/cache.ts,apps/web/app/**/billing-confirmation/**,apps/web/modules/ee/billing/**,apps/web/modules/ee/multi-language-surveys/**,apps/web/modules/email/**,apps/web/modules/integrations/**,apps/web/modules/setup/**/intro/**,apps/web/modules/setup/**/signup/**,apps/web/modules/setup/**/layout.tsx,apps/web/modules/survey/follow-ups/**,apps/web/app/share/**,apps/web/lib/shortUrl/**,apps/web/modules/ee/contacts/[contactId]/**,apps/web/modules/ee/contacts/components/**,apps/web/modules/ee/two-factor-auth/**,apps/web/lib/posthogServer.ts,apps/web/lib/slack/**,apps/web/lib/notion/**,apps/web/lib/googleSheet/**,apps/web/app/api/google-sheet/**,apps/web/app/api/billing/**,apps/web/lib/airtable/**,apps/web/app/api/v1/integrations/**,apps/web/lib/env.ts,**/instrumentation-node.ts,**/cache/**,apps/web/modules/ui/components/icons/**
+sonar.cpd.exclusions=**/*.test.*,**/*.spec.*,**/*.mdx,**/*.config.mts,**/*.config.ts,**/constants.ts,**/route.ts,**/types/**,**/types.ts,**/stories.*,**/*.mock.*,**/mocks/**,**/__mocks__/**,**/openapi.ts,**/openapi-document.ts,**/instrumentation.ts,scripts/merge-client-endpoints.ts,**/playwright/**,**/Dockerfile,**/*.config.cjs,**/*.css,**/templates.ts,**/actions.ts,apps/web/modules/ui/components/icons/*,**/*.json,apps/web/vitestSetup.ts,apps/web/tailwind.config.js,apps/web/postcss.config.js,apps/web/next.config.mjs,apps/web/scripts/**,packages/js-core/vitest.setup.ts,**/*.mjs,apps/web/modules/auth/lib/mock-data.ts,apps/web/modules/analysis/components/SingleResponseCard/components/Smileys.tsx,packages/surveys/src/components/general/smileys.tsx,**/cache.ts,apps/web/app/**/billing-confirmation/**,apps/web/modules/ee/billing/**,apps/web/modules/ee/multi-language-surveys/**,apps/web/modules/email/**,apps/web/modules/integrations/**,apps/web/modules/setup/**/intro/**,apps/web/modules/setup/**/signup/**,apps/web/modules/setup/**/layout.tsx,apps/web/modules/survey/follow-ups/**,apps/web/app/share/**,apps/web/lib/shortUrl/**,apps/web/modules/ee/contacts/[contactId]/**,apps/web/modules/ee/contacts/components/**,apps/web/modules/ee/two-factor-auth/**,apps/web/lib/posthogServer.ts,apps/web/lib/slack/**,apps/web/lib/notion/**,apps/web/lib/googleSheet/**,apps/web/app/api/google-sheet/**,apps/web/app/api/billing/**,apps/web/lib/airtable/**,apps/web/app/api/v1/integrations/**,apps/web/lib/env.ts,**/instrumentation-node.ts,**/cache/**,apps/web/modules/ui/components/icons/**
\ No newline at end of file
+ Smiley Rating
+
+ ),
+}));
+
+describe("RatingResponse", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders null when answer is not a number", () => {
+ const { container } = render(
+
+ {children}
+
+ );
+ },
+}));
+
+// Mock Button component
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: ({ children, variant, onClick, type, loading }) => (
+
+ ),
+}));
+
+// Mock Input component
+vi.mock("@/modules/ui/components/input", () => ({
+ Input: (props) => ,
+}));
+
+// Mock the useTranslate hook
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key) => {
+ const translations = {
+ "environments.segments.save_as_new_segment": "Save as New Segment",
+ "environments.segments.save_your_filters_as_a_segment_to_use_it_in_other_surveys":
+ "Save your filters as a segment to use it in other surveys",
+ "common.name": "Name",
+ "environments.segments.ex_power_users": "Ex: Power Users",
+ "common.description": "Description",
+ "environments.segments.most_active_users_in_the_last_30_days":
+ "Most active users in the last 30 days",
+ "common.cancel": "Cancel",
+ "common.save": "Save",
+ "environments.segments.segment_created_successfully": "Segment created successfully",
+ "environments.segments.segment_updated_successfully": "Segment updated successfully",
+ };
+ return translations[key] || key;
+ },
+ }),
+}));
+
+describe("SaveAsNewSegmentModal", () => {
+ afterEach(() => {
+ cleanup();
+ vi.clearAllMocks();
+ });
+
+ const mockProps = {
+ open: true,
+ setOpen: vi.fn(),
+ localSurvey: {
+ id: "survey1",
+ environmentId: "env1",
+ } as any,
+ segment: {
+ id: "segment1",
+ isPrivate: false,
+ filters: [{ id: "filter1" }],
+ } as any,
+ setSegment: vi.fn(),
+ setIsSegmentEditorOpen: vi.fn(),
+ onCreateSegment: vi.fn().mockResolvedValue({ id: "newSegment" }),
+ onUpdateSegment: vi.fn().mockResolvedValue({ id: "updatedSegment" }),
+ };
+
+ test("renders the modal when open is true", () => {
+ render({children}
+ ),
+ };
+});
+
+describe("Select", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders the select trigger correctly", () => {
+ render(
+
+ );
+
+ const trigger = screen.getByText("Select an option");
+ expect(trigger).toBeInTheDocument();
+ expect(trigger.closest("button")).toHaveClass("border-slate-300");
+ expect(screen.getByRole("combobox")).toBeInTheDocument();
+ });
+
+ test("renders select trigger without arrow when hideArrow is true", () => {
+ render(
+
+ );
+
+ const chevronIcon = document.querySelector(".opacity-50");
+ expect(chevronIcon).not.toBeInTheDocument();
+ });
+
+ test("renders select trigger with arrow by default", () => {
+ render(
+
+ );
+
+ const chevronIcon = document.querySelector(".opacity-50");
+ expect(chevronIcon).toBeInTheDocument();
+ });
+
+ test("applies custom className to select trigger", () => {
+ render(
+
+ );
+
+ const trigger = screen.getByRole("combobox");
+ expect(trigger).toHaveClass("custom-class");
+ });
+});
diff --git a/apps/web/modules/ui/components/settings-id/index.test.tsx b/apps/web/modules/ui/components/settings-id/index.test.tsx
new file mode 100644
index 0000000000..4fdfc9e0c5
--- /dev/null
+++ b/apps/web/modules/ui/components/settings-id/index.test.tsx
@@ -0,0 +1,35 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import { SettingsId } from "./index";
+
+describe("SettingsId", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders the title and id correctly", () => {
+ render(
+
+
+ ),
+ SelectContent: ({ children }: any) => {children}
+ {children}
,
+ SelectItem: ({ children, value }: any) => (
+ document.dispatchEvent(new CustomEvent("select-item", { detail: value }))}>
+ {children}
+
+ ),
+ SelectTrigger: ({ children }: any) => {children}
,
+ SelectValue: ({ placeholder }: any) => {placeholder}
,
+}));
+
+// Mock tolgee
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => (key === "environments.surveys.edit.select_ordering" ? "Select ordering" : key),
+ }),
+}));
+
+describe("ShuffleOptionSelect", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const shuffleOptionsTypes = {
+ none: { id: "none", label: "Don't shuffle", show: true },
+ all: { id: "all", label: "Shuffle all options", show: true },
+ exceptLast: { id: "exceptLast", label: "Shuffle all except last option", show: true },
+ };
+
+ const mockUpdateQuestion = vi.fn();
+
+ test("renders with default value", () => {
+ render(
+
+ {children}
+
+ ),
+}));
+
+describe("SkeletonLoader", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders summary skeleton loader correctly", () => {
+ render(Content
+ {
+ if (!disabled && onValueChange) {
+ // Simulate slider change on click (simplified for testing)
+ const newValue = value ? [value[0] + 10] : [50];
+ onValueChange(newValue);
+ }
+ }}
+ {...props}
+ />
+ ),
+ Track: ({ className, children }: any) => (
+
+
+ );
+
+ expect(screen.getByTestId("test-child")).toBeInTheDocument();
+ expect(screen.getByText("Test Content")).toBeInTheDocument();
+ });
+
+ test("renders with 'simple' arrangement", () => {
+ const { container } = render(
+
+
+ );
+
+ // Should have only one div with specific classes for "none" layout
+ const mainContainer = container.firstChild as HTMLElement;
+ expect(mainContainer).toHaveClass("flex");
+ expect(mainContainer).toHaveClass("flex-col");
+ expect(mainContainer).toHaveClass("items-center");
+ expect(mainContainer).toHaveClass("justify-center");
+ expect(mainContainer).toHaveClass("rounded-xl");
+ expect(mainContainer).toHaveClass("border");
+ expect(mainContainer).toHaveClass("border-slate-200");
+
+ // Should not have shadow cards
+ const allDivs = container.querySelectorAll("div");
+ expect(allDivs.length).toBe(2); // Main container + child div
+ });
+
+ test("renders with 'casual' arrangement", () => {
+ const { container } = render(
+
+
+ );
+
+ // Should have a group container
+ const groupContainer = container.firstChild as HTMLElement;
+ expect(groupContainer).toHaveClass("group");
+ expect(groupContainer).toHaveClass("relative");
+
+ // Should have shadow cards
+ const allDivs = container.querySelectorAll("div");
+ expect(allDivs.length).toBe(5); // Group + 2 shadow cards + content container + child div
+
+ // Check for shadow cards with rotation
+ const shadowCards = container.querySelectorAll(".absolute");
+ expect(shadowCards.length).toBe(2);
+ expect(shadowCards[0]).toHaveClass("-rotate-6");
+ expect(shadowCards[1]).toHaveClass("-rotate-3");
+ });
+
+ test("renders with 'straight' arrangement", () => {
+ const { container } = render(
+
+
+ );
+
+ // Should have a group container
+ const groupContainer = container.firstChild as HTMLElement;
+ expect(groupContainer).toHaveClass("group");
+ expect(groupContainer).toHaveClass("relative");
+
+ // Should have shadow cards
+ const allDivs = container.querySelectorAll("div");
+ expect(allDivs.length).toBe(5); // Group + 2 shadow cards + content container + child div
+
+ // Check for shadow cards with translation
+ const shadowCards = container.querySelectorAll(".absolute");
+ expect(shadowCards.length).toBe(2);
+ expect(shadowCards[0]).toHaveClass("-translate-y-8");
+ expect(shadowCards[1]).toHaveClass("-translate-y-4");
+ });
+
+ test("falls back to 'simple' arrangement for unknown type", () => {
+ // @ts-ignore - Testing with invalid input
+ const { container } = render(
+
+
+ );
+
+ // Should have the same structure as "none"
+ const mainContainer = container.firstChild as HTMLElement;
+ expect(mainContainer).toHaveClass("flex");
+ expect(mainContainer).toHaveClass("flex-col");
+
+ const allDivs = container.querySelectorAll("div");
+ expect(allDivs.length).toBe(2); // Main container + child div
+ });
+});
diff --git a/apps/web/modules/ui/components/styling-tabs/index.test.tsx b/apps/web/modules/ui/components/styling-tabs/index.test.tsx
new file mode 100644
index 0000000000..4f4aa6214d
--- /dev/null
+++ b/apps/web/modules/ui/components/styling-tabs/index.test.tsx
@@ -0,0 +1,109 @@
+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 { StylingTabs } from "./index";
+
+describe("StylingTabs", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const mockOptions = [
+ { value: "option1", label: "Option 1" },
+ { value: "option2", label: "Option 2" },
+ { value: "option3", label: "Option 3" },
+ ];
+
+ test("renders with all options", () => {
+ render( {}} />);
+
+ expect(screen.getByText("Option 1")).toBeInTheDocument();
+ expect(screen.getByText("Option 2")).toBeInTheDocument();
+ expect(screen.getByText("Option 3")).toBeInTheDocument();
+ });
+
+ test("selects default option when provided", () => {
+ render(
+ {}} />
+ );
+
+ const option2Input = screen.getByLabelText("Option 2");
+ expect(option2Input).toBeChecked();
+ });
+
+ test("calls onChange handler when option is selected", async () => {
+ const handleChange = vi.fn();
+ const user = userEvent.setup();
+
+ render( {}}
+ label="Test Label"
+ subLabel="Test Sublabel"
+ />
+ );
+
+ expect(screen.getByText("Test Label")).toBeInTheDocument();
+ expect(screen.getByText("Test Sublabel")).toBeInTheDocument();
+ });
+
+ test("renders with custom className", () => {
+ const { container } = render(
+ {}} className="custom-class" />
+ );
+
+ const radioGroup = container.querySelector('[role="radiogroup"]');
+ expect(radioGroup).toHaveClass("custom-class");
+ });
+
+ test("renders with custom tabsContainerClassName", () => {
+ const { container } = render(
+ {}}
+ tabsContainerClassName="custom-tabs-class"
+ />
+ );
+
+ const tabsContainer = container.querySelector(".overflow-hidden.rounded-md.border");
+ expect(tabsContainer).toHaveClass("custom-tabs-class");
+ });
+
+ test("renders options with icons when provided", () => {
+ const optionsWithIcons = [
+ { value: "option1", label: "Option 1", icon: Icon 1 },
+ { value: "option2", label: "Option 2", icon: Icon 2 },
+ ];
+
+ render( {}} />);
+
+ expect(screen.getByTestId("icon1")).toBeInTheDocument();
+ expect(screen.getByTestId("icon2")).toBeInTheDocument();
+ });
+
+ test("applies selected styling to active option", async () => {
+ const user = userEvent.setup();
+
+ render( {}} />);
+
+ const option1Label = screen.getByText("Option 1").closest("label");
+ const option2Label = screen.getByText("Option 2").closest("label");
+
+ await user.click(screen.getByText("Option 2"));
+
+ expect(option1Label).not.toHaveClass("bg-slate-100");
+ expect(option2Label).toHaveClass("bg-slate-100");
+ });
+});
diff --git a/apps/web/modules/ui/components/survey-status-indicator/index.test.tsx b/apps/web/modules/ui/components/survey-status-indicator/index.test.tsx
new file mode 100644
index 0000000000..4ce385f8fd
--- /dev/null
+++ b/apps/web/modules/ui/components/survey-status-indicator/index.test.tsx
@@ -0,0 +1,169 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { SurveyStatusIndicator } from "./index";
+
+// Mock the tooltip component
+vi.mock("@/modules/ui/components/tooltip", () => ({
+ Tooltip: ({ children }: { children: React.ReactNode }) => = {
+ "common.gathering_responses": "Gathering responses",
+ "common.survey_scheduled": "Survey scheduled",
+ "common.survey_paused": "Survey paused",
+ "common.survey_completed": "Survey completed",
+ };
+ return translations[key] || key;
+ },
+ }),
+}));
+
+describe("SurveyStatusIndicator", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders inProgress status correctly without tooltip", () => {
+ const { container } = render( {}} />);
+
+ expect(screen.getByTestId("icon1")).toBeInTheDocument();
+ expect(screen.getByTestId("icon2")).toBeInTheDocument();
+ });
+
+ test("applies custom className", () => {
+ const { container } = render(
+ {}} className="custom-class" />
+ );
+
+ const tabContainer = container.firstChild as HTMLElement;
+ expect(tabContainer).toHaveClass("custom-class");
+ });
+
+ test("applies activeTabClassName to active tab", () => {
+ render(
+ {}}
+ activeTabClassName="custom-active-class"
+ />
+ );
+
+ const activeTab = screen.getByText("Tab One").closest("button");
+ expect(activeTab).toHaveClass("custom-active-class");
+ });
+
+ test("renders in disabled state", async () => {
+ const handleSetActiveId = vi.fn();
+ const user = userEvent.setup();
+
+ render(
+ {}} tabStyle="button" disabled={false} />
+ );
+
+ const navContainer = screen.getByRole("navigation");
+ expect(navContainer).not.toHaveClass("cursor-not-allowed");
+ expect(navContainer).not.toHaveClass("opacity-50");
+ });
+});
diff --git a/apps/web/modules/ui/components/tab-toggle/index.test.tsx b/apps/web/modules/ui/components/tab-toggle/index.test.tsx
new file mode 100644
index 0000000000..b3a28d307b
--- /dev/null
+++ b/apps/web/modules/ui/components/tab-toggle/index.test.tsx
@@ -0,0 +1,121 @@
+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 { TabToggle } from "./index";
+
+describe("TabToggle", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const mockOptions = [
+ { value: "option1", label: "Option 1" },
+ { value: "option2", label: "Option 2" },
+ { value: "option3", label: "Option 3" },
+ ];
+
+ test("renders all options correctly", () => {
+ render( {}} />);
+
+ expect(screen.getByLabelText("Option 1")).toBeInTheDocument();
+ expect(screen.getByLabelText("Option 2")).toBeInTheDocument();
+ expect(screen.getByLabelText("Option 3")).toBeInTheDocument();
+ });
+
+ test("selects default option when provided", () => {
+ render( {}} />);
+
+ const option1Radio = screen.getByLabelText("Option 1") as HTMLInputElement;
+ const option2Radio = screen.getByLabelText("Option 2") as HTMLInputElement;
+ const option3Radio = screen.getByLabelText("Option 3") as HTMLInputElement;
+
+ expect(option1Radio.checked).toBe(false);
+ expect(option2Radio.checked).toBe(true);
+ expect(option3Radio.checked).toBe(false);
+ });
+
+ test("calls onChange handler when option is selected", async () => {
+ const handleChange = vi.fn();
+ const user = userEvent.setup();
+
+ render( {}} />);
+
+ expect(screen.getByText("Option 1")).toBeInTheDocument();
+ expect(screen.getByText("Option 2")).toBeInTheDocument();
+ expect(screen.getByText("Option 3")).toBeInTheDocument();
+ });
+
+ test("applies correct styling to selected option", async () => {
+ const user = userEvent.setup();
+
+ render( {}} />);
+
+ const option2Label = screen.getByText("Option 2").closest("label");
+ expect(option2Label).not.toHaveClass("bg-white");
+
+ await user.click(screen.getByLabelText("Option 2"));
+
+ expect(option2Label).toHaveClass("bg-white");
+ });
+
+ test("renders in disabled state", () => {
+ render( {}} disabled={true} />);
+
+ const option1Radio = screen.getByLabelText("Option 1") as HTMLInputElement;
+ const option2Radio = screen.getByLabelText("Option 2") as HTMLInputElement;
+ const option3Radio = screen.getByLabelText("Option 3") as HTMLInputElement;
+
+ expect(option1Radio).toBeDisabled();
+ expect(option2Radio).toBeDisabled();
+ expect(option3Radio).toBeDisabled();
+
+ const labels = screen.getAllByRole("radio").map((radio) => radio.closest("label"));
+ labels.forEach((label) => {
+ expect(label).toHaveClass("cursor-not-allowed");
+ expect(label).toHaveClass("opacity-50");
+ });
+ });
+
+ test("doesn't call onChange when disabled", async () => {
+ const handleChange = vi.fn();
+ const user = userEvent.setup();
+
+ render( {}} />);
+
+ const option1Radio = screen.getByLabelText("One") as HTMLInputElement;
+ const option2Radio = screen.getByLabelText("Two") as HTMLInputElement;
+
+ expect(option1Radio.checked).toBe(true);
+ expect(option2Radio.checked).toBe(false);
+ });
+
+ test("sets correct aria attributes", () => {
+ render( {}} />);
+
+ const radioGroup = screen.getByRole("radiogroup");
+ expect(radioGroup).toHaveAttribute("aria-labelledby", "test-id-toggle-label");
+ });
+});
diff --git a/apps/web/modules/ui/components/table/index.test.tsx b/apps/web/modules/ui/components/table/index.test.tsx
new file mode 100644
index 0000000000..35c5e09396
--- /dev/null
+++ b/apps/web/modules/ui/components/table/index.test.tsx
@@ -0,0 +1,202 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "./index";
+
+describe("Table", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders table correctly", () => {
+ render(
);
+
+ const table = screen.getByTestId("test-table");
+ expect(table).toBeInTheDocument();
+ expect(table.tagName).toBe("TABLE");
+ expect(table).toHaveClass("w-full");
+ expect(table).toHaveClass("caption-bottom");
+ expect(table).toHaveClass("text-sm");
+ });
+
+ test("applies custom className to Table", () => {
+ render(
);
+
+ const table = screen.getByTestId("test-table");
+ expect(table).toHaveClass("custom-class");
+ expect(table).toHaveClass("w-full");
+ });
+
+ test("renders TableHeader correctly", () => {
+ render(
+
+
+ );
+
+ const header = screen.getByTestId("test-header");
+ expect(header).toBeInTheDocument();
+ expect(header.tagName).toBe("THEAD");
+ expect(header).toHaveClass("pointer-events-none");
+ expect(header).toHaveClass("text-slate-800");
+ });
+
+ test("renders TableBody correctly", () => {
+ render(
+
+
+ );
+
+ const body = screen.getByTestId("test-body");
+ expect(body).toBeInTheDocument();
+ expect(body.tagName).toBe("TBODY");
+ });
+
+ test("renders TableFooter correctly", () => {
+ render(
+
+
+ );
+
+ const footer = screen.getByTestId("test-footer");
+ expect(footer).toBeInTheDocument();
+ expect(footer.tagName).toBe("TFOOT");
+ expect(footer).toHaveClass("border-t");
+ });
+
+ test("renders TableRow correctly", () => {
+ render(
+
+
+ );
+
+ const row = screen.getByTestId("test-row");
+ expect(row).toBeInTheDocument();
+ expect(row.tagName).toBe("TR");
+ expect(row).toHaveClass("border-b");
+ expect(row).toHaveClass("bg-white");
+ expect(row).toHaveClass("hover:bg-slate-100");
+ });
+
+ test("renders TableHead correctly", () => {
+ render(
+
+
+ );
+
+ const head = screen.getByTestId("test-head");
+ expect(head).toBeInTheDocument();
+ expect(head.tagName).toBe("TH");
+ expect(head).toHaveClass("h-12");
+ expect(head).toHaveClass("px-4");
+ expect(head).toHaveClass("text-left");
+ expect(head).toHaveClass("align-middle");
+ });
+
+ test("renders TableCell correctly", () => {
+ render(
+
+
+ );
+
+ const cell = screen.getByTestId("test-cell");
+ expect(cell).toBeInTheDocument();
+ expect(cell.tagName).toBe("TD");
+ expect(cell).toHaveClass("p-4");
+ expect(cell).toHaveClass("align-middle");
+ });
+
+ test("renders TableCaption correctly", () => {
+ render(
+
+
+ );
+
+ const caption = screen.getByTestId("test-caption");
+ expect(caption).toBeInTheDocument();
+ expect(caption.tagName).toBe("CAPTION");
+ expect(caption).toHaveClass("mt-4");
+ expect(caption).toHaveClass("text-sm");
+ expect(caption.textContent).toBe("Caption");
+ });
+
+ test("renders full table structure correctly", () => {
+ render(
+
+
+ );
+
+ const table = screen.getByTestId("full-table");
+ expect(table).toBeInTheDocument();
+
+ expect(screen.getByText("A list of users")).toBeInTheDocument();
+ expect(screen.getByText("Name")).toBeInTheDocument();
+ expect(screen.getByText("Email")).toBeInTheDocument();
+ expect(screen.getByText("John Doe")).toBeInTheDocument();
+ expect(screen.getByText("john@example.com")).toBeInTheDocument();
+ expect(screen.getByText("Jane Smith")).toBeInTheDocument();
+ expect(screen.getByText("jane@example.com")).toBeInTheDocument();
+ expect(screen.getByText("Total: 2 users")).toBeInTheDocument();
+ });
+});
diff --git a/apps/web/modules/ui/components/tag/index.test.tsx b/apps/web/modules/ui/components/tag/index.test.tsx
new file mode 100644
index 0000000000..0fcb4d4fb3
--- /dev/null
+++ b/apps/web/modules/ui/components/tag/index.test.tsx
@@ -0,0 +1,40 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import { Tag } from "./index";
+
+describe("Tag", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders tag with correct name", () => {
+ render( {}} />);
+
+ expect(screen.getByText("Test Tag")).toBeInTheDocument();
+ });
+
+ test("applies highlight class when highlight prop is true", () => {
+ const { container } = render(
+ {}} highlight={true} />
+ );
+
+ const tagElement = container.firstChild as HTMLElement;
+ expect(tagElement).toHaveClass("animate-shake");
+ });
+
+ test("does not apply highlight class when highlight prop is false", () => {
+ const { container } = render(
+ {}} highlight={false} />
+ );
+
+ const tagElement = container.firstChild as HTMLElement;
+ expect(tagElement).not.toHaveClass("animate-shake");
+ });
+
+ test("does not render delete icon when allowDelete is false", () => {
+ render( {}} allowDelete={false} />);
+
+ expect(screen.queryByRole("img", { hidden: true })).not.toBeInTheDocument();
+ });
+});
diff --git a/apps/web/modules/ui/components/tags-combobox/index.test.tsx b/apps/web/modules/ui/components/tags-combobox/index.test.tsx
new file mode 100644
index 0000000000..91261e7dd4
--- /dev/null
+++ b/apps/web/modules/ui/components/tags-combobox/index.test.tsx
@@ -0,0 +1,184 @@
+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 { TagsCombobox } from "./index";
+
+// Mock components
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: ({ children, onClick, size }: any) => (
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/command", () => ({
+ Command: ({ children, filter }: any) => (
+ = {
+ "environments.project.tags.add_tag": "Add tag",
+ "environments.project.tags.search_tags": "Search tags",
+ "environments.project.tags.add": "Add",
+ };
+ return translations[key] || key;
+ },
+ }),
+}));
+
+describe("TagsCombobox", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const mockTags = [
+ { label: "Tag1", value: "tag1" },
+ { label: "Tag2", value: "tag2" },
+ { label: "Tag3", value: "tag3" },
+ ];
+
+ const mockCurrentTags = [{ label: "Tag1", value: "tag1" }];
+
+ const mockProps = {
+ tags: mockTags,
+ currentTags: mockCurrentTags,
+ addTag: vi.fn(),
+ createTag: vi.fn(),
+ searchValue: "",
+ setSearchValue: vi.fn(),
+ open: false,
+ setOpen: vi.fn(),
+ };
+
+ test("renders with default props", () => {
+ render( = {
+ "environments.surveys.edit.audience": "Audience",
+ "environments.surveys.edit.targeted": "Targeted",
+ "environments.surveys.edit.everyone": "Everyone",
+ "environments.surveys.edit.only_people_who_match_your_targeting_can_be_surveyed":
+ "Only people who match your targeting can be surveyed",
+ "environments.surveys.edit.without_a_filter_all_of_your_users_can_be_surveyed":
+ "Without a filter all of your users can be surveyed",
+ };
+ return translations[key] || key;
+ },
+ }),
+}));
+
+describe("TargetingIndicator", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders correctly with null segment", () => {
+ render( = {
+ "common.link_survey": "Link Survey",
+ "common.app_survey": "App Survey",
+ };
+ return translations[key] || key;
+ },
+ }),
+}));
+
+describe("ThemeStylingPreviewSurvey", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const mockSurvey: TSurvey = {
+ id: "survey1",
+ name: "Test Survey",
+ type: "link",
+ environmentId: "env1",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ status: "draft",
+ languages: {},
+ projectOverwrites: {
+ placement: "bottomRight",
+ darkOverlay: true,
+ clickOutsideClose: true,
+ },
+ } as TSurvey;
+
+ const mockProject = {
+ id: "project1",
+ name: "Test Project",
+ placement: "center",
+ darkOverlay: false,
+ clickOutsideClose: false,
+ inAppSurveyBranding: true,
+ linkSurveyBranding: true,
+ logo: { url: "http://example.com/logo.png" },
+ styling: {
+ roundness: 8,
+ cardBackgroundColor: { light: "#ffffff" },
+ isLogoHidden: false,
+ },
+ } as any;
+
+ test("renders correctly with link survey type", () => {
+ const setPreviewType = vi.fn();
+
+ render(
+
+
+ Hover me
+ Tooltip content
+
+
+ );
+
+ expect(screen.getByTestId("tooltip-provider")).toBeInTheDocument();
+ expect(screen.getByTestId("tooltip-root")).toBeInTheDocument();
+ expect(screen.getByTestId("tooltip-trigger")).toBeInTheDocument();
+ expect(screen.getByTestId("tooltip-content")).toBeInTheDocument();
+
+ expect(screen.getByText("Hover me")).toBeInTheDocument();
+ expect(screen.getByText("Tooltip content")).toBeInTheDocument();
+ });
+
+ test("applies correct default classes to TooltipContent", () => {
+ render(
+
+
+ Hover me
+ Tooltip content
+
+
+ );
+
+ const contentElement = screen.getByTestId("tooltip-content");
+ expect(contentElement).toHaveClass("animate-in");
+ expect(contentElement).toHaveClass("fade-in-50");
+ expect(contentElement).toHaveClass("z-50");
+ expect(contentElement).toHaveClass("rounded-md");
+ expect(contentElement).toHaveClass("border");
+ expect(contentElement).toHaveClass("border-slate-100");
+ expect(contentElement).toHaveClass("bg-white");
+ });
+
+ test("applies custom classes to TooltipContent", () => {
+ render(
+
+
+ Hover me
+ Tooltip content
+
+
+ );
+
+ const contentElement = screen.getByTestId("tooltip-content");
+ expect(contentElement).toHaveClass("custom-class");
+ });
+
+ test("accepts custom sideOffset prop", () => {
+ render(
+
+
+ Hover me
+ Tooltip content
+
+
+ );
+
+ const contentElement = screen.getByTestId("tooltip-content");
+ expect(contentElement).toHaveAttribute("data-side-offset", "10");
+ });
+
+ test("uses default sideOffset when not provided", () => {
+ render(
+
+
+ Hover me
+ Tooltip content
+
+
+ );
+
+ const contentElement = screen.getByTestId("tooltip-content");
+ expect(contentElement).toHaveAttribute("data-side-offset", "4");
+ });
+
+ test("sets asChild prop on trigger", () => {
+ render(
+
+
+
+
+
+ Tooltip content
+
+
+ );
+
+ const triggerElement = screen.getByTestId("tooltip-trigger");
+ expect(triggerElement).toHaveAttribute("data-as-child", "true");
+ });
+});
+
+describe("TooltipRenderer", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders tooltip with content", () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("Trigger")).toBeInTheDocument();
+ expect(screen.getByTestId("tooltip-content")).toBeInTheDocument();
+ expect(screen.getByTestId("tooltip-content")).toHaveTextContent("Tooltip text");
+ expect(screen.getByTestId("tooltip-content")).toHaveClass("test-class");
+ });
+
+ test("applies triggerClass to the trigger wrapper", () => {
+ render(
+
+
+
+ );
+
+ const trigger = screen.getByTestId("tooltip-trigger").firstChild;
+ expect(trigger).toHaveClass("trigger-class");
+ });
+
+ test("doesn't render tooltip when shouldRender is false", () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("Trigger")).toBeInTheDocument();
+ expect(screen.queryByTestId("tooltip-provider")).not.toBeInTheDocument();
+ expect(screen.queryByTestId("tooltip-content")).not.toBeInTheDocument();
+ });
+
+ test("renders tooltip with React node as content", () => {
+ render(
+
+ Complex tooltip content
+
+ }>
+
+
+ );
+
+ const tooltipContent = screen.getByTestId("tooltip-content");
+ expect(tooltipContent).toBeInTheDocument();
+ expect(tooltipContent.innerHTML).toContain("Complex tooltip ");
+ expect(tooltipContent.innerHTML).toContain("content");
+ });
+});
diff --git a/apps/web/modules/ui/components/typography/index.test.tsx b/apps/web/modules/ui/components/typography/index.test.tsx
new file mode 100644
index 0000000000..25cabf8f79
--- /dev/null
+++ b/apps/web/modules/ui/components/typography/index.test.tsx
@@ -0,0 +1,158 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "vitest";
+import { H1, H2, H3, H4, InlineCode, Large, Lead, List, Muted, P, Quote, Small } from "./index";
+
+describe("Typography Components", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders H1 correctly", () => {
+ const { container } = render(
+ {children}
+
+ ),
+ Range: ({ className }: any) => ,
+ Thumb: ({ className }: any) => ,
+}));
+
+describe("Slider", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders with default props", () => {
+ render(Test Content
+ Test Content
+ Test Content
+ Test Content
+ Test Content
+ {children}
,
+ TooltipContent: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+ TooltipProvider: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+ TooltipTrigger: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+}));
+
+// Mock the lucide-react icons
+vi.mock("lucide-react", () => ({
+ CheckIcon: () => ,
+ ClockIcon: () => ,
+ PauseIcon: () => ,
+ PencilIcon: () => ,
+}));
+
+// Mock tolgee
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => {
+ const translations: Record
+ {children}
+
+ ),
+ CommandGroup: ({ children }: any) => {children}
,
+ CommandInput: ({ placeholder, value, onValueChange, onKeyDown }: any) => (
+ onValueChange(e.target.value)}
+ onKeyDown={onKeyDown}
+ />
+ ),
+ CommandItem: ({ children, value, onSelect, className }: any) => (
+ onSelect(value)} className={className}>
+ {children}
+
+ ),
+ CommandList: ({ children }: any) => {children}
,
+}));
+
+vi.mock("@/modules/ui/components/popover", () => ({
+ Popover: ({ children, open }: any) => (
+
+ {children}
+
+ ),
+ PopoverContent: ({ children, className }: any) => (
+
+ {children}
+
+ ),
+ PopoverTrigger: ({ children, asChild }: any) => (
+
+ {children}
+
+ ),
+}));
+
+// Mock tolgee
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => {
+ const translations: Record
+ {projectLogo?.url ? "Logo" : "No Logo"}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/media-background", () => ({
+ MediaBackground: ({ children, isEditorView }: any) => (
+
+ {children}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/preview-survey/components/modal", () => ({
+ Modal: ({ children, isOpen, placement, darkOverlay, clickOutsideClose, previewMode }: any) => (
+
+ {children}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/reset-progress-button", () => ({
+ ResetProgressButton: ({ onClick }: any) => (
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/survey", () => ({
+ SurveyInline: ({ survey, isPreviewMode, isBrandingEnabled, languageCode }: any) => (
+
+ Survey Content
+
+ ),
+}));
+
+// Mock framer-motion
+vi.mock("framer-motion", async () => {
+ const actual = await vi.importActual("framer-motion");
+ return {
+ ...actual,
+ motion: {
+ div: ({ children, className, animate }: any) => (
+
+ {children}
+
+ ),
+ },
+ };
+});
+
+// Mock tolgee
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => {
+ const translations: Record
+ Mock Toaster
+
+ ),
+}));
+
+describe("ToasterClient", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders the Toaster component", () => {
+ const { getByTestId } = render(
+ {children}
+
+ ),
+ Provider: ({ children, ...props }: any) => (
+
+ {children}
+
+ ),
+ Trigger: ({ children, asChild, ...props }: any) => (
+
+ {children}
+
+ ),
+ Content: ({ children, sideOffset, className, ...props }: any) => (
+
+ {children}
+
+ ),
+ Tooltip: ({ children, ...props }: any) => (
+
+ {children}
+
+ ),
+}));
+
+describe("Tooltip", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders basic tooltip components", () => {
+ render(
+ Heading 1
); + const h1Element = container.querySelector("h1"); + + expect(h1Element).toBeInTheDocument(); + expect(h1Element).toHaveTextContent("Heading 1"); + expect(h1Element?.className).toContain("text-4xl"); + expect(h1Element?.className).toContain("font-bold"); + expect(h1Element?.className).toContain("tracking-tight"); + expect(h1Element?.className).toContain("text-slate-800"); + }); + + test("renders H2 correctly", () => { + const { container } = render(Heading 2
); + const h2Element = container.querySelector("h2"); + + expect(h2Element).toBeInTheDocument(); + expect(h2Element).toHaveTextContent("Heading 2"); + expect(h2Element?.className).toContain("text-3xl"); + expect(h2Element?.className).toContain("font-semibold"); + expect(h2Element?.className).toContain("border-b"); + expect(h2Element?.className).toContain("text-slate-800"); + }); + + test("renders H3 correctly", () => { + const { container } = render(Heading 3
); + const h3Element = container.querySelector("h3"); + + expect(h3Element).toBeInTheDocument(); + expect(h3Element).toHaveTextContent("Heading 3"); + expect(h3Element?.className).toContain("text-2xl"); + expect(h3Element?.className).toContain("font-semibold"); + expect(h3Element?.className).toContain("text-slate-800"); + }); + + test("renders H4 correctly", () => { + const { container } = render(Heading 4
); + const h4Element = container.querySelector("h4"); + + expect(h4Element).toBeInTheDocument(); + expect(h4Element).toHaveTextContent("Heading 4"); + expect(h4Element?.className).toContain("text-xl"); + expect(h4Element?.className).toContain("font-semibold"); + expect(h4Element?.className).toContain("text-slate-800"); + }); + + test("renders Lead correctly", () => { + const { container } = render(Standard paragraph
); + const pElement = container.querySelector("p"); + + expect(pElement).toBeInTheDocument(); + expect(pElement).toHaveTextContent("Standard paragraph"); + expect(pElement?.className).toContain("leading-7"); + }); + + test("renders Large correctly", () => { + const { container } = render(-
+
Quoted text); + const blockquoteElement = container.querySelector("blockquote"); + + expect(blockquoteElement).toBeInTheDocument(); + expect(blockquoteElement).toHaveTextContent("Quoted text"); + expect(blockquoteElement?.className).toContain("border-l-2"); + expect(blockquoteElement?.className).toContain("italic"); + }); + + test("applies custom className to components", () => { + const { container } = render(