mirror of
https://github.com/formbricks/formbricks.git
synced 2026-02-21 06:19:01 -06:00
chore: exclude TSX files from unit test coverage (#6723)
Co-authored-by: Johannes <johannes@formbricks.com>
This commit is contained in:
Matti Nannt
@@ -1,181 +0,0 @@
|
||||
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 { AddWebhookModal } from "./add-webhook-modal";
|
||||
|
||||
// Mock the Dialog components
|
||||
vi.mock("@/modules/ui/components/dialog", () => ({
|
||||
Dialog: ({
|
||||
children,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) =>
|
||||
open ? (
|
||||
<div data-testid="dialog">
|
||||
{children}
|
||||
<button data-testid="dialog-close" onClick={() => onOpenChange(false)}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
) : null,
|
||||
DialogContent: ({ children, className }: { children: React.ReactNode; className?: string }) => (
|
||||
<div data-testid="dialog-content" className={className}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
DialogHeader: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="dialog-header">{children}</div>
|
||||
),
|
||||
DialogTitle: ({ children, className }: { children: React.ReactNode; className?: string }) => (
|
||||
<h2 data-testid="dialog-title" className={className}>
|
||||
{children}
|
||||
</h2>
|
||||
),
|
||||
DialogDescription: ({ children, className }: { children: React.ReactNode; className?: string }) => (
|
||||
<p data-testid="dialog-description" className={className}>
|
||||
{children}
|
||||
</p>
|
||||
),
|
||||
DialogBody: ({ children, className }: { children: React.ReactNode; className?: string }) => (
|
||||
<div data-testid="dialog-body" className={className}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
DialogFooter: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="dialog-footer">{children}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock the child components
|
||||
vi.mock("./survey-checkbox-group", () => ({
|
||||
SurveyCheckboxGroup: ({
|
||||
surveys,
|
||||
selectedSurveys,
|
||||
selectedAllSurveys,
|
||||
onSelectAllSurveys,
|
||||
onSelectedSurveyChange,
|
||||
allowChanges,
|
||||
}: any) => (
|
||||
<div data-testid="survey-checkbox-group">
|
||||
<button onClick={onSelectAllSurveys}>Select All Surveys</button>
|
||||
{surveys.map((survey: any) => (
|
||||
<button key={survey.id} onClick={() => onSelectedSurveyChange(survey.id)}>
|
||||
{survey.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("./trigger-checkbox-group", () => ({
|
||||
TriggerCheckboxGroup: ({ selectedTriggers, onCheckboxChange, allowChanges }: any) => (
|
||||
<div data-testid="trigger-checkbox-group">
|
||||
<button onClick={() => onCheckboxChange("responseCreated")}>Response Created</button>
|
||||
<button onClick={() => onCheckboxChange("responseUpdated")}>Response Updated</button>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock actions
|
||||
vi.mock("../actions", () => ({
|
||||
createWebhookAction: vi.fn(),
|
||||
testEndpointAction: vi.fn(),
|
||||
}));
|
||||
|
||||
// Mock other dependencies
|
||||
vi.mock("next/navigation", () => ({
|
||||
useRouter: () => ({
|
||||
refresh: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@tolgee/react", () => ({
|
||||
useTranslate: () => ({
|
||||
t: (key: string) => key,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("react-hot-toast", () => ({
|
||||
default: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
describe("AddWebhookModal", () => {
|
||||
const mockProps = {
|
||||
environmentId: "env-123",
|
||||
open: true,
|
||||
surveys: [
|
||||
{ id: "survey-1", name: "Test Survey 1" },
|
||||
{ id: "survey-2", name: "Test Survey 2" },
|
||||
],
|
||||
setOpen: vi.fn(),
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test("renders dialog with correct title and description", () => {
|
||||
render(<AddWebhookModal {...mockProps} />);
|
||||
|
||||
expect(screen.getByTestId("dialog")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("dialog-content")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("dialog-title")).toHaveTextContent(
|
||||
"environments.integrations.webhooks.add_webhook"
|
||||
);
|
||||
expect(
|
||||
screen.getByText("environments.integrations.webhooks.add_webhook_description")
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("does not render when closed", () => {
|
||||
render(<AddWebhookModal {...mockProps} open={false} />);
|
||||
|
||||
expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders form fields", () => {
|
||||
render(<AddWebhookModal {...mockProps} />);
|
||||
|
||||
expect(screen.getByLabelText("common.name")).toBeInTheDocument();
|
||||
expect(screen.getByLabelText("common.url")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("trigger-checkbox-group")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("survey-checkbox-group")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders footer buttons", () => {
|
||||
render(<AddWebhookModal {...mockProps} />);
|
||||
|
||||
expect(screen.getByTestId("dialog-footer")).toBeInTheDocument();
|
||||
expect(screen.getByText("common.cancel")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole("button", { name: "environments.integrations.webhooks.add_webhook" })
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("calls setOpen when cancel button is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<AddWebhookModal {...mockProps} />);
|
||||
|
||||
await user.click(screen.getByText("common.cancel"));
|
||||
|
||||
expect(mockProps.setOpen).toHaveBeenCalledWith(false);
|
||||
});
|
||||
|
||||
test("renders webhook icon in header", () => {
|
||||
render(<AddWebhookModal {...mockProps} />);
|
||||
|
||||
expect(screen.getByTestId("dialog-header")).toBeInTheDocument();
|
||||
// The Webhook icon should be rendered within the header
|
||||
const header = screen.getByTestId("dialog-header");
|
||||
expect(header).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,239 +0,0 @@
|
||||
import { Webhook } from "@prisma/client";
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { afterEach, describe, expect, test, vi } from "vitest";
|
||||
import { TSurvey } from "@formbricks/types/surveys/types";
|
||||
import { WebhookModal } from "@/modules/integrations/webhooks/components/webhook-detail-modal";
|
||||
|
||||
// Mock the Dialog components
|
||||
vi.mock("@/modules/ui/components/dialog", () => ({
|
||||
Dialog: ({
|
||||
open,
|
||||
onOpenChange,
|
||||
children,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
children: React.ReactNode;
|
||||
}) =>
|
||||
open ? (
|
||||
<div data-testid="dialog">
|
||||
{children}
|
||||
<button data-testid="dialog-close" onClick={() => onOpenChange(false)}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
) : null,
|
||||
DialogContent: ({
|
||||
children,
|
||||
disableCloseOnOutsideClick,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
disableCloseOnOutsideClick?: boolean;
|
||||
}) => (
|
||||
<div data-testid="dialog-content" data-disable-close-on-outside-click={disableCloseOnOutsideClick}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
DialogHeader: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="dialog-header">{children}</div>
|
||||
),
|
||||
DialogTitle: ({ children }: { children: React.ReactNode }) => (
|
||||
<h2 data-testid="dialog-title">{children}</h2>
|
||||
),
|
||||
DialogDescription: ({ children }: { children: React.ReactNode }) => (
|
||||
<p data-testid="dialog-description">{children}</p>
|
||||
),
|
||||
DialogBody: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="dialog-body">{children}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock the tab components
|
||||
vi.mock("@/modules/integrations/webhooks/components/webhook-overview-tab", () => ({
|
||||
WebhookOverviewTab: ({ webhook }: { webhook: Webhook }) => (
|
||||
<div data-testid="webhook-overview-tab">Overview for {webhook.name}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/integrations/webhooks/components/webhook-settings-tab", () => ({
|
||||
WebhookSettingsTab: ({ webhook, setOpen }: { webhook: Webhook; setOpen: (v: boolean) => void }) => (
|
||||
<div data-testid="webhook-settings-tab">
|
||||
Settings for {webhook.name}
|
||||
<button onClick={() => setOpen(false)}>Close from settings</button>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock useTranslate
|
||||
vi.mock("@tolgee/react", () => ({
|
||||
useTranslate: () => ({
|
||||
t: (key: string) => {
|
||||
const translations = {
|
||||
"common.overview": "Overview",
|
||||
"common.settings": "Settings",
|
||||
"common.webhook": "Webhook",
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock lucide-react
|
||||
vi.mock("lucide-react", () => ({
|
||||
WebhookIcon: () => <span data-testid="webhook-icon">🪝</span>,
|
||||
}));
|
||||
|
||||
const mockWebhook: Webhook = {
|
||||
id: "webhook-1",
|
||||
name: "Test Webhook",
|
||||
url: "https://example.com/webhook",
|
||||
source: "user",
|
||||
triggers: [],
|
||||
surveyIds: [],
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
environmentId: "env-1",
|
||||
};
|
||||
|
||||
const mockSurveys: TSurvey[] = [];
|
||||
|
||||
describe("WebhookModal", () => {
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test("renders correctly when open", () => {
|
||||
const setOpen = vi.fn();
|
||||
render(
|
||||
<WebhookModal
|
||||
open={true}
|
||||
setOpen={setOpen}
|
||||
webhook={mockWebhook}
|
||||
surveys={mockSurveys}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId("dialog")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("dialog-title")).toHaveTextContent("Test Webhook");
|
||||
expect(screen.getByTestId("webhook-icon")).toBeInTheDocument();
|
||||
expect(screen.getByText("Overview")).toBeInTheDocument();
|
||||
expect(screen.getByText("Settings")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("webhook-overview-tab")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("does not render when closed", () => {
|
||||
const setOpen = vi.fn();
|
||||
render(
|
||||
<WebhookModal
|
||||
open={false}
|
||||
setOpen={setOpen}
|
||||
webhook={mockWebhook}
|
||||
surveys={mockSurveys}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("switches tabs correctly", async () => {
|
||||
const setOpen = vi.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<WebhookModal
|
||||
open={true}
|
||||
setOpen={setOpen}
|
||||
webhook={mockWebhook}
|
||||
surveys={mockSurveys}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
);
|
||||
|
||||
// Initially shows overview tab
|
||||
expect(screen.getByTestId("webhook-overview-tab")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("webhook-settings-tab")).not.toBeInTheDocument();
|
||||
|
||||
// Click settings tab
|
||||
const settingsTab = screen.getByText("Settings");
|
||||
await user.click(settingsTab);
|
||||
|
||||
// Now shows settings tab
|
||||
expect(screen.queryByTestId("webhook-overview-tab")).not.toBeInTheDocument();
|
||||
expect(screen.getByTestId("webhook-settings-tab")).toBeInTheDocument();
|
||||
|
||||
// Click overview tab again
|
||||
const overviewTab = screen.getByText("Overview");
|
||||
await user.click(overviewTab);
|
||||
|
||||
// Back to overview tab
|
||||
expect(screen.getByTestId("webhook-overview-tab")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("webhook-settings-tab")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("uses webhook as title when name is not provided", () => {
|
||||
const setOpen = vi.fn();
|
||||
const webhookWithoutName = { ...mockWebhook, name: "" };
|
||||
|
||||
render(
|
||||
<WebhookModal
|
||||
open={true}
|
||||
setOpen={setOpen}
|
||||
webhook={webhookWithoutName}
|
||||
surveys={mockSurveys}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId("dialog-title")).toHaveTextContent("Webhook");
|
||||
});
|
||||
|
||||
test("resets to first tab when modal is reopened", async () => {
|
||||
const setOpen = vi.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
const { rerender } = render(
|
||||
<WebhookModal
|
||||
open={true}
|
||||
setOpen={setOpen}
|
||||
webhook={mockWebhook}
|
||||
surveys={mockSurveys}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
);
|
||||
|
||||
// Switch to settings tab
|
||||
const settingsTab = screen.getByText("Settings");
|
||||
await user.click(settingsTab);
|
||||
expect(screen.getByTestId("webhook-settings-tab")).toBeInTheDocument();
|
||||
|
||||
// Close modal
|
||||
rerender(
|
||||
<WebhookModal
|
||||
open={false}
|
||||
setOpen={setOpen}
|
||||
webhook={mockWebhook}
|
||||
surveys={mockSurveys}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
);
|
||||
|
||||
// Reopen modal
|
||||
rerender(
|
||||
<WebhookModal
|
||||
open={true}
|
||||
setOpen={setOpen}
|
||||
webhook={mockWebhook}
|
||||
surveys={mockSurveys}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
);
|
||||
|
||||
// Should be back to overview tab
|
||||
expect(screen.getByTestId("webhook-overview-tab")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("webhook-settings-tab")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user