diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 8dde1486d2..7027e6d279 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -14,7 +14,8 @@ When generating test files inside the "/app/web" path, follow these rules:
- Add the original file path to the "test.coverage.include"array in the "apps/web/vite.config.mts" file. Do this only when the test file is created.
- Don't mock functions that are already mocked in the "apps/web/vitestSetup.ts" file
- When using "screen.getByText" check for the tolgee string if it is being used in the file.
-- When mocking data check if the properties added are part of the type of the object being mocked. Don't add properties that are not part of the type.
+- The types for mocked variables can be found in the "packages/types" path. Be sure that every imported type exists before using it. Don't create types that are not already in the codebase.
+- When mocking data check if the properties added are part of the type of the object being mocked. Only specify known properties, don't use properties that are not part of the type.
If it's a test for a ".tsx" file, follow these extra instructions:
diff --git a/apps/web/app/(app)/environments/[environmentId]/(contacts)/contacts/[contactId]/page.test.tsx b/apps/web/app/(app)/environments/[environmentId]/(contacts)/contacts/[contactId]/page.test.tsx
new file mode 100644
index 0000000000..65ca595b02
--- /dev/null
+++ b/apps/web/app/(app)/environments/[environmentId]/(contacts)/contacts/[contactId]/page.test.tsx
@@ -0,0 +1,34 @@
+import { SingleContactPage } from "@/modules/ee/contacts/[contactId]/page";
+import { describe, expect, test, vi } from "vitest";
+import Page from "./page";
+
+// mock constants
+vi.mock("@/lib/constants", () => ({
+ IS_FORMBRICKS_CLOUD: false,
+ ENCRYPTION_KEY: "test",
+ ENTERPRISE_LICENSE_KEY: "test",
+ GITHUB_ID: "test",
+ GITHUB_SECRET: "test",
+ GOOGLE_CLIENT_ID: "test",
+ GOOGLE_CLIENT_SECRET: "test",
+ AZUREAD_CLIENT_ID: "mock-azuread-client-id",
+ AZUREAD_CLIENT_SECRET: "mock-azure-client-secret",
+ AZUREAD_TENANT_ID: "mock-azuread-tenant-id",
+ OIDC_CLIENT_ID: "mock-oidc-client-id",
+ OIDC_CLIENT_SECRET: "mock-oidc-client-secret",
+ OIDC_ISSUER: "mock-oidc-issuer",
+ OIDC_DISPLAY_NAME: "mock-oidc-display-name",
+ OIDC_SIGNING_ALGORITHM: "mock-oidc-signing-algorithm",
+ WEBAPP_URL: "mock-webapp-url",
+ IS_PRODUCTION: true,
+ FB_LOGO_URL: "https://example.com/mock-logo.png",
+ SMTP_HOST: "mock-smtp-host",
+ SMTP_PORT: "mock-smtp-port",
+ IS_POSTHOG_CONFIGURED: true,
+}));
+
+describe("Contact Page Re-export", () => {
+ test("should re-export SingleContactPage", () => {
+ expect(Page).toBe(SingleContactPage);
+ });
+});
diff --git a/apps/web/app/(app)/environments/[environmentId]/(contacts)/contacts/page.test.tsx b/apps/web/app/(app)/environments/[environmentId]/(contacts)/contacts/page.test.tsx
new file mode 100644
index 0000000000..921bf9edf3
--- /dev/null
+++ b/apps/web/app/(app)/environments/[environmentId]/(contacts)/contacts/page.test.tsx
@@ -0,0 +1,15 @@
+import { ContactsPage } from "@/modules/ee/contacts/page";
+import { describe, expect, test, vi } from "vitest";
+import Page from "./page";
+
+// Mock the actual ContactsPage component
+vi.mock("@/modules/ee/contacts/page", () => ({
+ ContactsPage: () => Mock Contacts Page
,
+}));
+
+describe("Contacts Page Re-export", () => {
+ test("should re-export ContactsPage from the EE module", () => {
+ // Assert that the default export 'Page' is the same as the mocked 'ContactsPage'
+ expect(Page).toBe(ContactsPage);
+ });
+});
diff --git a/apps/web/app/(app)/environments/[environmentId]/(contacts)/segments/page.test.tsx b/apps/web/app/(app)/environments/[environmentId]/(contacts)/segments/page.test.tsx
new file mode 100644
index 0000000000..97a4e0ca21
--- /dev/null
+++ b/apps/web/app/(app)/environments/[environmentId]/(contacts)/segments/page.test.tsx
@@ -0,0 +1,18 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import SegmentsPageWrapper from "./page";
+
+vi.mock("@/modules/ee/contacts/segments/page", () => ({
+ SegmentsPage: vi.fn(() => SegmentsPageMock
),
+}));
+
+describe("SegmentsPageWrapper", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders the SegmentsPage component", () => {
+ render(NoCodeIcon
,
+ automatic: AutomaticIcon
,
+ code: CodeIcon
,
+ },
+}));
+
+vi.mock("@/lib/time", () => ({
+ convertDateTimeStringShort: (dateString: string) => `formatted-${dateString}`,
+}));
+
+vi.mock("@/lib/utils/helper", () => ({
+ getFormattedErrorMessage: (error: any) => `Formatted error: ${error?.message || "Unknown error"}`,
+}));
+
+vi.mock("@/lib/utils/strings", () => ({
+ capitalizeFirstLetter: (str: string) => str.charAt(0).toUpperCase() + str.slice(1),
+}));
+
+vi.mock("@/modules/survey/editor/actions", () => ({
+ createActionClassAction: vi.fn(),
+}));
+
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: ({ children, onClick, variant, ...props }: any) => (
+
+ {children}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/error-component", () => ({
+ ErrorComponent: () => ErrorComponent
,
+}));
+
+vi.mock("@/modules/ui/components/label", () => ({
+ Label: ({ children, ...props }: any) => {children} ,
+}));
+
+vi.mock("@/modules/ui/components/loading-spinner", () => ({
+ LoadingSpinner: () => LoadingSpinner
,
+}));
+
+vi.mock("../actions", () => ({
+ getActiveInactiveSurveysAction: vi.fn(),
+}));
+
+const mockActionClass = {
+ id: "action1",
+ createdAt: new Date("2023-01-01T10:00:00Z"),
+ updatedAt: new Date("2023-01-10T11:00:00Z"),
+ name: "Test Action",
+ description: "Test Description",
+ type: "noCode",
+ environmentId: "env1_dev",
+ noCodeConfig: {
+ /* ... */
+ } as any,
+} as unknown as TActionClass;
+
+const mockEnvironmentDev = {
+ id: "env1_dev",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ type: "development",
+} as unknown as TEnvironment;
+
+const mockEnvironmentProd = {
+ id: "env1_prod",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ type: "production",
+} as unknown as TEnvironment;
+
+const mockOtherEnvActionClasses: TActionClass[] = [
+ {
+ id: "action2",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ name: "Existing Action Prod",
+ type: "noCode",
+ environmentId: "env1_prod",
+ } as unknown as TActionClass,
+ {
+ id: "action3",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ name: "Existing Code Action Prod",
+ type: "code",
+ key: "existing-key",
+ environmentId: "env1_prod",
+ } as unknown as TActionClass,
+];
+
+describe("ActionActivityTab", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.mocked(getActiveInactiveSurveysAction).mockResolvedValue({
+ data: {
+ activeSurveys: ["Active Survey 1"],
+ inactiveSurveys: ["Inactive Survey 1", "Inactive Survey 2"],
+ },
+ });
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders loading state initially", () => {
+ // Don't resolve the promise immediately
+ vi.mocked(getActiveInactiveSurveysAction).mockReturnValue(new Promise(() => {}));
+ render(
+
+ Modal for {actionClass.name}
+ setOpen(false)}>Close Modal
+
+ ) : null,
+}));
+
+const mockActionClasses: TActionClass[] = [
+ { id: "1", name: "Action 1", type: "noCode", environmentId: "env1" } as TActionClass,
+ { id: "2", name: "Action 2", type: "code", environmentId: "env1" } as TActionClass,
+];
+
+const mockEnvironment: TEnvironment = {
+ id: "env1",
+ name: "Test Environment",
+ type: "development",
+} as unknown as TEnvironment;
+const mockOtherEnvironment: TEnvironment = {
+ id: "env2",
+ name: "Other Environment",
+ type: "production",
+} as unknown as TEnvironment;
+
+const mockTableHeading = Table Heading
;
+const mockActionRows = mockActionClasses.map((action) => (
+
+ {action.name} Row
+
+));
+
+describe("ActionClassesTable", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders table heading and action rows when actions exist", () => {
+ render(
+
+ {[mockTableHeading, mockActionRows]}
+
+ );
+
+ expect(screen.getByTestId("table-heading")).toBeInTheDocument();
+ expect(screen.getByTestId("action-row-1")).toBeInTheDocument();
+ expect(screen.getByTestId("action-row-2")).toBeInTheDocument();
+ expect(screen.queryByText("No actions found")).not.toBeInTheDocument();
+ });
+
+ test("renders 'No actions found' message when no actions exist", () => {
+ render(
+
+ {[mockTableHeading, []]}
+
+ );
+
+ expect(screen.getByTestId("table-heading")).toBeInTheDocument();
+ expect(screen.getByText("No actions found")).toBeInTheDocument();
+ expect(screen.queryByTestId("action-row-1")).not.toBeInTheDocument();
+ });
+
+ test("opens ActionDetailModal with correct action when a row is clicked", async () => {
+ render(
+
+ {[mockTableHeading, mockActionRows]}
+
+ );
+
+ // Modal should not be open initially
+ expect(screen.queryByTestId("action-detail-modal")).not.toBeInTheDocument();
+
+ // Find the button wrapping the first action row
+ const actionButton1 = screen.getByTitle("Action 1");
+ await userEvent.click(actionButton1);
+
+ // Modal should now be open with the correct action name
+ const modal = screen.getByTestId("action-detail-modal");
+ expect(modal).toBeInTheDocument();
+ expect(modal).toHaveTextContent("Modal for Action 1");
+
+ // Close the modal
+ await userEvent.click(screen.getByText("Close Modal"));
+ expect(screen.queryByTestId("action-detail-modal")).not.toBeInTheDocument();
+
+ // Click the second action button
+ const actionButton2 = screen.getByTitle("Action 2");
+ await userEvent.click(actionButton2);
+
+ // Modal should open for the second action
+ const modal2 = screen.getByTestId("action-detail-modal");
+ expect(modal2).toBeInTheDocument();
+ expect(modal2).toHaveTextContent("Modal for Action 2");
+ });
+});
diff --git a/apps/web/app/(app)/environments/[environmentId]/actions/components/ActionDetailModal.test.tsx b/apps/web/app/(app)/environments/[environmentId]/actions/components/ActionDetailModal.test.tsx
new file mode 100644
index 0000000000..317bfde390
--- /dev/null
+++ b/apps/web/app/(app)/environments/[environmentId]/actions/components/ActionDetailModal.test.tsx
@@ -0,0 +1,180 @@
+import { ModalWithTabs } from "@/modules/ui/components/modal-with-tabs";
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { TActionClass } from "@formbricks/types/action-classes";
+import { TEnvironment } from "@formbricks/types/environment";
+import { ActionActivityTab } from "./ActionActivityTab";
+import { ActionDetailModal } from "./ActionDetailModal";
+// Import mocked components
+import { ActionSettingsTab } from "./ActionSettingsTab";
+
+// Mock child components
+vi.mock("@/modules/ui/components/modal-with-tabs", () => ({
+ ModalWithTabs: vi.fn(({ tabs, icon, label, description, open, setOpen }) => (
+
+
{label}
+
{description}
+
{open.toString()}
+
setOpen(false)}>Close
+ {icon}
+ {tabs.map((tab) => (
+
+
{tab.title}
+ {tab.children}
+
+ ))}
+
ActionActivityTab
),
+}));
+
+vi.mock("./ActionSettingsTab", () => ({
+ ActionSettingsTab: vi.fn(() => ActionSettingsTab
),
+}));
+
+// Mock the utils file to control ACTION_TYPE_ICON_LOOKUP
+vi.mock("@/app/(app)/environments/[environmentId]/actions/utils", () => ({
+ ACTION_TYPE_ICON_LOOKUP: {
+ code: Code Icon Mock
,
+ noCode: No Code Icon Mock
,
+ // Add other types if needed by other tests or default props
+ },
+}));
+
+const mockEnvironmentId = "test-env-id";
+const mockSetOpen = vi.fn();
+
+const mockEnvironment = {
+ id: mockEnvironmentId,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ type: "production", // Use string literal as TEnvironmentType is not exported
+ appSetupCompleted: false,
+} as unknown as TEnvironment;
+
+const mockActionClass: TActionClass = {
+ id: "action-class-1",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ name: "Test Action",
+ description: "This is a test action",
+ type: "code", // Ensure this matches a key in the mocked ACTION_TYPE_ICON_LOOKUP
+ environmentId: mockEnvironmentId,
+ noCodeConfig: null,
+ key: "test-action-key",
+};
+
+const mockActionClasses: TActionClass[] = [mockActionClass];
+const mockOtherEnvActionClasses: TActionClass[] = [];
+const mockOtherEnvironment = { ...mockEnvironment, id: "other-env-id", name: "Other Environment" };
+
+const defaultProps = {
+ environmentId: mockEnvironmentId,
+ environment: mockEnvironment,
+ open: true,
+ setOpen: mockSetOpen,
+ actionClass: mockActionClass,
+ actionClasses: mockActionClasses,
+ isReadOnly: false,
+ otherEnvironment: mockOtherEnvironment,
+ otherEnvActionClasses: mockOtherEnvActionClasses,
+};
+
+describe("ActionDetailModal", () => {
+ afterEach(() => {
+ cleanup();
+ vi.clearAllMocks(); // Clear mocks after each test
+ });
+
+ test("renders ModalWithTabs with correct props", () => {
+ render(
+ {loading ? "Loading..." : children}
+
+ ),
+}));
+vi.mock("@/modules/ui/components/code-action-form", () => ({
+ CodeActionForm: ({ isReadOnly }: { isReadOnly: boolean }) => (
+
+ Code Action Form
+
+ ),
+}));
+vi.mock("@/modules/ui/components/delete-dialog", () => ({
+ DeleteDialog: ({ open, setOpen, isDeleting, onDelete }: any) =>
+ open ? (
+
+ Delete Dialog
+
+ {isDeleting ? "Deleting..." : "Confirm Delete"}
+
+ setOpen(false)}>Cancel
+
+ ) : null,
+}));
+vi.mock("@/modules/ui/components/no-code-action-form", () => ({
+ NoCodeActionForm: ({ isReadOnly }: { isReadOnly: boolean }) => (
+
+ No Code Action Form
+
+ ),
+}));
+
+// Mock icons
+vi.mock("lucide-react", () => ({
+ TrashIcon: () => Trash
,
+}));
+
+const mockSetOpen = vi.fn();
+const mockActionClasses: TActionClass[] = [
+ {
+ id: "action1",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ name: "Existing Action",
+ description: "An existing action",
+ type: "noCode",
+ environmentId: "env1",
+ noCodeConfig: { type: "click" } as TActionClassNoCodeConfig,
+ } as unknown as TActionClass,
+];
+
+const createMockActionClass = (id: string, type: TActionClassType, name: string): TActionClass =>
+ ({
+ id,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ name,
+ description: `${name} description`,
+ type,
+ environmentId: "env1",
+ ...(type === "code" && { key: `${name}-key` }),
+ ...(type === "noCode" && {
+ noCodeConfig: { type: "url", rule: "exactMatch", value: `http://${name}.com` },
+ }),
+ }) as unknown as TActionClass;
+
+describe("ActionSettingsTab", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders correctly for 'code' action type", () => {
+ const actionClass = createMockActionClass("code1", "code", "Code Action");
+ render(
+
+ CreateNewActionTab Content
+ setOpen(false)}>Close from Tab
+
+ )),
+}));
+
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: ({ children, onClick, ...props }: any) => (
+
+ {children}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/modal", () => ({
+ Modal: ({ children, open, setOpen, ...props }: any) =>
+ open ? (
+
+ {children}
+ setOpen(false)}>Close Modal
+
+ ) : null,
+}));
+
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => key,
+ }),
+}));
+
+vi.mock("lucide-react", () => ({
+ MousePointerClickIcon: () =>
,
+ PlusIcon: () =>
,
+}));
+
+const mockActionClasses: TActionClass[] = [
+ {
+ id: "action1",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ name: "Action 1",
+ description: "Description 1",
+ type: "noCode",
+ environmentId: "env1",
+ noCodeConfig: { type: "click" } as unknown as TActionClassNoCodeConfig,
+ } as unknown as TActionClass,
+];
+
+const environmentId = "env1";
+
+describe("AddActionModal", () => {
+ afterEach(() => {
+ cleanup();
+ vi.clearAllMocks();
+ });
+
+ test("renders the 'Add Action' button initially", () => {
+ render(
+ {children}
+ ),
+}));
+
+vi.mock("@/modules/ui/components/page-header", () => ({
+ PageHeader: ({ pageTitle }: { pageTitle: string }) => {pageTitle}
,
+}));
+
+describe("Loading", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders loading state correctly", () => {
+ render(ActionClassesTable Mock{children}
,
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/actions/components/ActionRowData", () => ({
+ ActionClassDataRow: ({ actionClass }) => ActionClassDataRow Mock: {actionClass.name}
,
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/actions/components/ActionTableHeading", () => ({
+ ActionTableHeading: () => ActionTableHeading Mock
,
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/actions/components/AddActionModal", () => ({
+ AddActionModal: () => AddActionModal Mock
,
+}));
+vi.mock("@/modules/ui/components/page-content-wrapper", () => ({
+ PageContentWrapper: ({ children }) => PageContentWrapper Mock{children}
,
+}));
+vi.mock("@/modules/ui/components/page-header", () => ({
+ PageHeader: ({ pageTitle, cta }) => (
+
+ PageHeader Mock: {pageTitle} {cta &&
CTA Mock
}
+
MainNavigation
,
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/components/TopControlBar", () => ({
+ TopControlBar: () => TopControlBar
,
+}));
+vi.mock("@/modules/ui/components/dev-environment-banner", () => ({
+ DevEnvironmentBanner: ({ environment }: { environment: TEnvironment }) =>
+ environment.type === "development" ? DevEnvironmentBanner
: null,
+}));
+vi.mock("@/modules/ui/components/limits-reached-banner", () => ({
+ LimitsReachedBanner: () => LimitsReachedBanner
,
+}));
+vi.mock("@/modules/ui/components/pending-downgrade-banner", () => ({
+ PendingDowngradeBanner: ({
+ isPendingDowngrade,
+ active,
+ }: {
+ isPendingDowngrade: boolean;
+ active: boolean;
+ }) =>
+ isPendingDowngrade && active ? PendingDowngradeBanner
: null,
+}));
+
+const mockUser = {
+ id: "user-1",
+ name: "Test User",
+ email: "test@example.com",
+ emailVerified: new Date(),
+ imageUrl: "",
+ twoFactorEnabled: false,
+ identityProvider: "email",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ notificationSettings: { alert: {}, weeklySummary: {} },
+} as unknown as TUser;
+
+const mockOrganization = {
+ id: "org-1",
+ name: "Test Org",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ billing: {
+ stripeCustomerId: null,
+ limits: { monthly: { responses: null } } as unknown as TOrganizationBillingPlanLimits,
+ } as unknown as TOrganizationBilling,
+} as unknown as TOrganization;
+
+const mockEnvironment: TEnvironment = {
+ id: "env-1",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ type: "production",
+ projectId: "proj-1",
+ appSetupCompleted: true,
+};
+
+const mockProject: TProject = {
+ id: "proj-1",
+ name: "Test Project",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ organizationId: "org-1",
+ environments: [mockEnvironment],
+} as unknown as TProject;
+
+const mockMembership: TMembership = {
+ organizationId: "org-1",
+ userId: "user-1",
+ accepted: true,
+ role: "owner",
+};
+
+const mockLicense = {
+ plan: "free",
+ active: false,
+ lastChecked: new Date(),
+ features: { isMultiOrgEnabled: false },
+} as any;
+
+const mockProjectPermission = {
+ userId: "user-1",
+ projectId: "proj-1",
+ role: "admin",
+} as any;
+
+const mockSession: Session = {
+ user: {
+ id: "user-1",
+ },
+ expires: new Date(Date.now() + 3600 * 1000).toISOString(),
+};
+
+describe("EnvironmentLayout", () => {
+ beforeEach(() => {
+ vi.mocked(getUser).mockResolvedValue(mockUser);
+ vi.mocked(getEnvironment).mockResolvedValue(mockEnvironment);
+ vi.mocked(getOrganizationsByUserId).mockResolvedValue([mockOrganization]);
+ vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrganization);
+ vi.mocked(getUserProjects).mockResolvedValue([mockProject]);
+ vi.mocked(getEnvironments).mockResolvedValue([mockEnvironment]);
+ vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValue(mockMembership);
+ vi.mocked(getMonthlyActiveOrganizationPeopleCount).mockResolvedValue(100);
+ vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(500);
+ vi.mocked(getEnterpriseLicense).mockResolvedValue(mockLicense);
+ vi.mocked(getOrganizationProjectsLimit).mockResolvedValue(null as any);
+ vi.mocked(getProjectPermissionByUserId).mockResolvedValue(mockProjectPermission);
+ mockIsDevelopment = false;
+ mockIsFormbricksCloud = false;
+ });
+
+ afterEach(() => {
+ cleanup();
+ vi.resetAllMocks();
+ });
+
+ test("renders correctly with default props", async () => {
+ // Ensure the default mockLicense has isPendingDowngrade: false and active: false
+ vi.mocked(getEnterpriseLicense).mockResolvedValue({
+ ...mockLicense,
+ isPendingDowngrade: false,
+ active: false,
+ });
+
+ render(
+ await EnvironmentLayout({
+ environmentId: "env-1",
+ session: mockSession,
+ children: Child Content
,
+ })
+ );
+
+ expect(screen.getByTestId("main-navigation")).toBeInTheDocument();
+ expect(screen.getByTestId("top-control-bar")).toBeInTheDocument();
+ expect(screen.getByText("Child Content")).toBeInTheDocument();
+ expect(screen.queryByTestId("dev-banner")).not.toBeInTheDocument();
+ expect(screen.queryByTestId("limits-banner")).not.toBeInTheDocument();
+ expect(screen.queryByTestId("downgrade-banner")).not.toBeInTheDocument(); // This should now pass
+ });
+
+ test("renders DevEnvironmentBanner in development environment", async () => {
+ const devEnvironment = { ...mockEnvironment, type: "development" as const };
+ vi.mocked(getEnvironment).mockResolvedValue(devEnvironment);
+ mockIsDevelopment = true;
+
+ render(
+ await EnvironmentLayout({
+ environmentId: "env-1",
+ session: mockSession,
+ children: Child Content
,
+ })
+ );
+
+ expect(screen.getByTestId("dev-banner")).toBeInTheDocument();
+ });
+
+ test("renders LimitsReachedBanner in Formbricks Cloud", async () => {
+ mockIsFormbricksCloud = true;
+
+ render(
+ await EnvironmentLayout({
+ environmentId: "env-1",
+ session: mockSession,
+ children: Child Content
,
+ })
+ );
+
+ expect(screen.getByTestId("limits-banner")).toBeInTheDocument();
+ expect(vi.mocked(getMonthlyActiveOrganizationPeopleCount)).toHaveBeenCalledWith(mockOrganization.id);
+ expect(vi.mocked(getMonthlyOrganizationResponseCount)).toHaveBeenCalledWith(mockOrganization.id);
+ });
+
+ test("renders PendingDowngradeBanner when pending downgrade", async () => {
+ // Ensure the license mock reflects the condition needed for the banner
+ const pendingLicense = { ...mockLicense, isPendingDowngrade: true, active: true };
+ vi.mocked(getEnterpriseLicense).mockResolvedValue(pendingLicense);
+
+ render(
+ await EnvironmentLayout({
+ environmentId: "env-1",
+ session: mockSession,
+ children: Child Content
,
+ })
+ );
+
+ expect(screen.getByTestId("downgrade-banner")).toBeInTheDocument();
+ });
+
+ test("throws error if user not found", async () => {
+ vi.mocked(getUser).mockResolvedValue(null);
+ await expect(EnvironmentLayout({ environmentId: "env-1", session: mockSession })).rejects.toThrow(
+ "common.user_not_found"
+ );
+ });
+
+ test("throws error if organization not found", async () => {
+ vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(null);
+ await expect(EnvironmentLayout({ environmentId: "env-1", session: mockSession })).rejects.toThrow(
+ "common.organization_not_found"
+ );
+ });
+
+ test("throws error if environment not found", async () => {
+ vi.mocked(getEnvironment).mockResolvedValue(null);
+ await expect(EnvironmentLayout({ environmentId: "env-1", session: mockSession })).rejects.toThrow(
+ "common.environment_not_found"
+ );
+ });
+
+ test("throws error if projects, environments or organizations not found", async () => {
+ vi.mocked(getUserProjects).mockResolvedValue(null as any); // Simulate one of the promises failing
+ await expect(EnvironmentLayout({ environmentId: "env-1", session: mockSession })).rejects.toThrow(
+ "environments.projects_environments_organizations_not_found"
+ );
+ });
+
+ test("throws error if member has no project permission", async () => {
+ vi.mocked(getAccessFlags).mockReturnValue({ isMember: true } as any);
+ vi.mocked(getProjectPermissionByUserId).mockResolvedValue(null);
+ await expect(EnvironmentLayout({ environmentId: "env-1", session: mockSession })).rejects.toThrow(
+ "common.project_permission_not_found"
+ );
+ });
+});
diff --git a/apps/web/app/(app)/environments/[environmentId]/components/EnvironmentStorageHandler.test.tsx b/apps/web/app/(app)/environments/[environmentId]/components/EnvironmentStorageHandler.test.tsx
new file mode 100644
index 0000000000..20fe547b83
--- /dev/null
+++ b/apps/web/app/(app)/environments/[environmentId]/components/EnvironmentStorageHandler.test.tsx
@@ -0,0 +1,33 @@
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
+import { render } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import EnvironmentStorageHandler from "./EnvironmentStorageHandler";
+
+describe("EnvironmentStorageHandler", () => {
+ test("sets environmentId in localStorage on mount", () => {
+ const setItemSpy = vi.spyOn(Storage.prototype, "setItem");
+ const testEnvironmentId = "test-env-123";
+
+ render(Create Org Modal
: null,
+}));
+vi.mock("@/modules/projects/components/project-switcher", () => ({
+ ProjectSwitcher: ({ isCollapsed }: { isCollapsed: boolean }) => (
+
+ Project Switcher
+
+ ),
+}));
+vi.mock("@/modules/ui/components/avatars", () => ({
+ ProfileAvatar: () => Avatar
,
+}));
+vi.mock("next/image", () => ({
+ // eslint-disable-next-line @next/next/no-img-element
+ default: (props: any) => = {};
+ return {
+ getItem: (key: string) => store[key] || null,
+ setItem: (key: string, value: string) => {
+ store[key] = value.toString();
+ },
+ removeItem: (key: string) => {
+ delete store[key];
+ },
+ clear: () => {
+ store = {};
+ },
+ };
+})();
+Object.defineProperty(window, "localStorage", { value: localStorageMock });
+
+// Mock data
+const mockEnvironment: TEnvironment = {
+ id: "env1",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ type: "production",
+ projectId: "proj1",
+ appSetupCompleted: true,
+};
+const mockUser = {
+ id: "user1",
+ name: "Test User",
+ email: "test@example.com",
+ imageUrl: "http://example.com/avatar.png",
+ emailVerified: new Date(),
+ twoFactorEnabled: false,
+ identityProvider: "email",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ notificationSettings: { alert: {}, weeklySummary: {} },
+ role: "project_manager",
+ objective: "other",
+} as unknown as TUser;
+
+const mockOrganization = {
+ id: "org1",
+ name: "Test Org",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ billing: { stripeCustomerId: null, plan: "free", limits: { monthly: { responses: null } } } as any,
+} as unknown as TOrganization;
+
+const mockOrganizations: TOrganization[] = [
+ mockOrganization,
+ { ...mockOrganization, id: "org2", name: "Another Org" },
+];
+const mockProject: TProject = {
+ id: "proj1",
+ name: "Test Project",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ organizationId: "org1",
+ environments: [mockEnvironment],
+ config: { channel: "website" },
+} as unknown as TProject;
+const mockProjects: TProject[] = [mockProject];
+
+const defaultProps = {
+ environment: mockEnvironment,
+ organizations: mockOrganizations,
+ user: mockUser,
+ organization: mockOrganization,
+ projects: mockProjects,
+ isMultiOrgEnabled: true,
+ isFormbricksCloud: false,
+ isDevelopment: false,
+ membershipRole: "owner" as const,
+ organizationProjectsLimit: 5,
+ isLicenseActive: true,
+};
+
+describe("MainNavigation", () => {
+ let mockRouterPush: ReturnType;
+
+ beforeEach(() => {
+ mockRouterPush = vi.fn();
+ vi.mocked(useRouter).mockReturnValue({ push: mockRouterPush } as any);
+ vi.mocked(usePathname).mockReturnValue("/environments/env1/surveys");
+ vi.mocked(getLatestStableFbReleaseAction).mockResolvedValue({ data: null }); // Default: no new version
+ localStorage.clear();
+ });
+
+ afterEach(() => {
+ cleanup();
+ vi.clearAllMocks();
+ });
+
+ test("renders expanded by default and collapses on toggle", async () => {
+ render({children} ,
+}));
+
+// Mock tooltip components
+vi.mock("@/modules/ui/components/tooltip", () => ({
+ Tooltip: ({ children }: { children: React.ReactNode }) => {children}
,
+ TooltipContent: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+ TooltipProvider: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+ TooltipTrigger: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+}));
+
+const defaultProps = {
+ href: "/test-link",
+ isActive: false,
+ isCollapsed: false,
+ children: Test Child ,
+ };
+
+ test("renders correctly when active", () => {
+ render(
+
{selectedFilter.onlyComplete.toString()}
+
{selectedFilter.filter.length}
+
{selectedOptions.questionOptions.length}
+
{selectedOptions.questionFilterOptions.length}
+
{dateRange.from?.toISOString()}
+
{dateRange.to?.toISOString()}
+
+
+ setSelectedFilter({
+ filter: [
+ {
+ questionType: { id: "q1", label: "Question 1" },
+ filterType: { filterValue: "value1", filterComboBoxValue: "option1" },
+ },
+ ],
+ onlyComplete: true,
+ })
+ }>
+ Update Filter
+
+
+ setSelectedOptions({
+ questionOptions: [{ header: "q1" } as unknown as QuestionOptions],
+ questionFilterOptions: [{ id: "qFilterOpt1" } as unknown as QuestionFilterOptions],
+ })
+ }>
+ Update Options
+
+
setDateRange({ from: mockFromDate, to: mockToday })}>Update Date Range
+
Reset State
+
+
+ );
+
+ expect(screen.getByTestId("onlyComplete").textContent).toBe("false");
+ expect(screen.getByTestId("filterLength").textContent).toBe("0");
+ expect(screen.getByTestId("questionOptionsLength").textContent).toBe("0");
+ expect(screen.getByTestId("questionFilterOptionsLength").textContent).toBe("0");
+ expect(screen.getByTestId("dateFrom").textContent).toBe("");
+ expect(screen.getByTestId("dateTo").textContent).toBe(mockToday.toISOString());
+ });
+
+ test("should update selectedFilter state", async () => {
+ render(
+
+
+ );
+
+ const updateButton = screen.getByText("Update Filter");
+ await userEvent.click(updateButton);
+
+ expect(screen.getByTestId("onlyComplete").textContent).toBe("true");
+ expect(screen.getByTestId("filterLength").textContent).toBe("1");
+ });
+
+ test("should update selectedOptions state", async () => {
+ render(
+
+
+ );
+
+ const updateButton = screen.getByText("Update Options");
+ await userEvent.click(updateButton);
+
+ expect(screen.getByTestId("questionOptionsLength").textContent).toBe("1");
+ expect(screen.getByTestId("questionFilterOptionsLength").textContent).toBe("1");
+ });
+
+ test("should update dateRange state", async () => {
+ render(
+
+
+ );
+
+ const updateButton = screen.getByText("Update Date Range");
+ await userEvent.click(updateButton);
+
+ expect(screen.getByTestId("dateFrom").textContent).toBe(mockFromDate.toISOString());
+ expect(screen.getByTestId("dateTo").textContent).toBe(mockToday.toISOString());
+ });
+
+ test("should throw error when useResponseFilter is used outside of Provider", () => {
+ // Hide console error temporarily
+ const consoleErrorMock = vi.spyOn(console, "error").mockImplementation(() => {});
+ expect(() => render(Mocked TopControlButtons
),
+}));
+
+const mockEnvironment: TEnvironment = {
+ id: "env1",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ type: "production",
+ projectId: "proj1",
+ appSetupCompleted: true,
+};
+
+const mockEnvironments: TEnvironment[] = [
+ mockEnvironment,
+ { ...mockEnvironment, id: "env2", type: "development" },
+];
+
+const mockMembershipRole: TOrganizationRole = "owner";
+const mockProjectPermission = "manage";
+
+describe("TopControlBar", () => {
+ afterEach(() => {
+ cleanup();
+ vi.clearAllMocks();
+ });
+
+ test("renders correctly and passes props to TopControlButtons", () => {
+ render(
+ EnvironmentSwitch
),
+}));
+
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: ({ children, onClick, variant, size, className, asChild, ...props }: any) => {
+ const Tag = asChild ? "div" : "button"; // Use div if asChild is true for Link mock
+ return (
+
+ {children}
+
+ );
+ },
+}));
+
+vi.mock("@/modules/ui/components/tooltip", () => ({
+ TooltipRenderer: ({ children, tooltipContent }: { children: React.ReactNode; tooltipContent: string }) => (
+ {children}
+ ),
+}));
+
+vi.mock("lucide-react", () => ({
+ BugIcon: () =>
,
+ CircleUserIcon: () =>
,
+ PlusIcon: () =>
,
+}));
+
+vi.mock("next/link", () => ({
+ default: ({ children, href, target }: { children: React.ReactNode; href: string; target?: string }) => (
+
+ {children}
+
+ ),
+}));
+
+// Mock data
+const mockEnvironmentDev: TEnvironment = {
+ id: "dev-env-id",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ type: "development",
+ projectId: "project-id",
+ appSetupCompleted: true,
+};
+
+const mockEnvironmentProd: TEnvironment = {
+ id: "prod-env-id",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ type: "production",
+ projectId: "project-id",
+ appSetupCompleted: true,
+};
+
+const mockEnvironments = [mockEnvironmentDev, mockEnvironmentProd];
+
+describe("TopControlButtons", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ // Default mocks for access flags
+ vi.mocked(getAccessFlags).mockReturnValue({
+ isOwner: false,
+ isMember: false,
+ isBilling: false,
+ } as any);
+ vi.mocked(getTeamPermissionFlags).mockReturnValue({
+ hasReadAccess: false,
+ } as any);
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ const renderComponent = (
+ membershipRole?: TOrganizationRole,
+ projectPermission: any = null,
+ isBilling = false,
+ hasReadAccess = false
+ ) => {
+ vi.mocked(getAccessFlags).mockReturnValue({
+ isMember: membershipRole === "member",
+ isBilling: isBilling,
+ isOwner: membershipRole === "owner",
+ } as any);
+ vi.mocked(getTeamPermissionFlags).mockReturnValue({
+ hasReadAccess: hasReadAccess,
+ } as any);
+
+ return render(
+ AlertTriangleIcon
,
+ CheckIcon: () => CheckIcon
,
+ RotateCcwIcon: () => RotateCcwIcon
,
+}));
+
+// Mock Button component
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: ({ children, onClick, ...props }: any) => (
+
+ {children}
+
+ ),
+}));
+
+const mockEnvironmentNotImplemented: TEnvironment = {
+ id: "env-not-implemented",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ type: "development",
+ projectId: "proj1",
+ appSetupCompleted: false, // Not implemented state
+};
+
+const mockEnvironmentRunning: TEnvironment = {
+ id: "env-running",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ type: "production",
+ projectId: "proj1",
+ appSetupCompleted: true, // Running state
+};
+
+describe("WidgetStatusIndicator", () => {
+ afterEach(() => {
+ cleanup();
+ vi.clearAllMocks();
+ });
+
+ test("renders correctly for 'notImplemented' state", () => {
+ render(