mirror of
https://github.com/formbricks/formbricks.git
synced 2025-12-30 10:19:51 -06:00
chore: add tests to survey editor components (#5557)
Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>
This commit is contained in:
victorvhs017
5
.github/copilot-instructions.md
vendored
5
.github/copilot-instructions.md
vendored
@@ -2,6 +2,7 @@
|
||||
|
||||
When generating test files inside the "/app/web" path, follow these rules:
|
||||
|
||||
- You are an experienced senior software engineer
|
||||
- Use vitest
|
||||
- Ensure 100% code coverage
|
||||
- Add as few comments as possible
|
||||
@@ -13,6 +14,7 @@ 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.
|
||||
|
||||
If it's a test for a ".tsx" file, follow these extra instructions:
|
||||
|
||||
@@ -22,6 +24,7 @@ afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
- the "afterEach" function should only have "cleanup()" inside it and should be adde to the "vitest" imports
|
||||
- The "afterEach" function should only have the "cleanup()" line inside it and should be adde to the "vitest" imports.
|
||||
- For click events, import userEvent from "@testing-library/user-event"
|
||||
- Mock other components that can make the text more complex and but at the same time mocking it wouldn't make the test flaky. It's ok to leave basic and simple components.
|
||||
- You don't need to mock @tolgee/react
|
||||
@@ -0,0 +1,195 @@
|
||||
import { AddActionModal } from "@/modules/survey/editor/components/add-action-modal";
|
||||
import { CreateNewActionTab } from "@/modules/survey/editor/components/create-new-action-tab";
|
||||
import { SavedActionsTab } from "@/modules/survey/editor/components/saved-actions-tab";
|
||||
import { ModalWithTabs } from "@/modules/ui/components/modal-with-tabs";
|
||||
import { ActionClass } from "@prisma/client";
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, test, vi } from "vitest";
|
||||
import { TSurvey } from "@formbricks/types/surveys/types";
|
||||
|
||||
// Mock child components
|
||||
vi.mock("@/modules/survey/editor/components/create-new-action-tab", () => ({
|
||||
CreateNewActionTab: vi.fn(() => <div>CreateNewActionTab Mock</div>),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/survey/editor/components/saved-actions-tab", () => ({
|
||||
SavedActionsTab: vi.fn(() => <div>SavedActionsTab Mock</div>),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/ui/components/modal-with-tabs", () => ({
|
||||
ModalWithTabs: vi.fn(
|
||||
({ label, description, open, setOpen, tabs, size, closeOnOutsideClick, restrictOverflow }) => (
|
||||
<div data-testid="modal-with-tabs">
|
||||
<h1>{label}</h1>
|
||||
<p>{description}</p>
|
||||
<div>Open: {open.toString()}</div>
|
||||
<button onClick={() => setOpen(false)}>Close</button>
|
||||
<div>Size: {size}</div>
|
||||
<div>Close on outside click: {closeOnOutsideClick.toString()}</div>
|
||||
<div>Restrict overflow: {restrictOverflow.toString()}</div>
|
||||
{tabs.map((tab) => (
|
||||
<div key={tab.title}>
|
||||
<h2>{tab.title}</h2>
|
||||
<div>{tab.children}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock useTranslate hook
|
||||
vi.mock("@tolgee/react", () => ({
|
||||
useTranslate: () => ({
|
||||
t: (key: string) => {
|
||||
const translations = {
|
||||
"environments.surveys.edit.select_saved_action": "Select Saved Action",
|
||||
"environments.surveys.edit.capture_new_action": "Capture New Action",
|
||||
"common.add_action": "Add Action",
|
||||
"environments.surveys.edit.capture_a_new_action_to_trigger_a_survey_on": "Capture a new action...",
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
const mockSetOpen = vi.fn();
|
||||
const mockSetActionClasses = vi.fn();
|
||||
const mockSetLocalSurvey = vi.fn();
|
||||
|
||||
const mockActionClasses: ActionClass[] = [
|
||||
// Add mock action classes if needed for SavedActionsTab testing
|
||||
];
|
||||
|
||||
const mockSurvey: TSurvey = {
|
||||
id: "survey1",
|
||||
name: "Test Survey",
|
||||
type: "app",
|
||||
environmentId: "env1",
|
||||
status: "draft",
|
||||
questions: [],
|
||||
triggers: [],
|
||||
recontactDays: null,
|
||||
displayOption: "displayOnce",
|
||||
autoClose: null,
|
||||
delay: 0,
|
||||
autoComplete: null,
|
||||
surveyClosedMessage: null,
|
||||
singleUse: null,
|
||||
styling: null,
|
||||
languages: [],
|
||||
variables: [],
|
||||
welcomeCard: { enabled: false } as unknown as TSurvey["welcomeCard"],
|
||||
endings: [],
|
||||
hiddenFields: { enabled: false },
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
pin: null,
|
||||
resultShareKey: null,
|
||||
displayPercentage: null,
|
||||
segment: null,
|
||||
closeOnDate: null,
|
||||
createdBy: null,
|
||||
} as unknown as TSurvey;
|
||||
|
||||
const defaultProps = {
|
||||
open: true,
|
||||
setOpen: mockSetOpen,
|
||||
environmentId: "env1",
|
||||
actionClasses: mockActionClasses,
|
||||
setActionClasses: mockSetActionClasses,
|
||||
isReadOnly: false,
|
||||
localSurvey: mockSurvey,
|
||||
setLocalSurvey: mockSetLocalSurvey,
|
||||
};
|
||||
|
||||
const ModalWithTabsMock = vi.mocked(ModalWithTabs);
|
||||
const SavedActionsTabMock = vi.mocked(SavedActionsTab);
|
||||
const CreateNewActionTabMock = vi.mocked(CreateNewActionTab);
|
||||
|
||||
describe("AddActionModal", () => {
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks(); // Clear mocks after each test
|
||||
});
|
||||
|
||||
test("renders correctly when open", () => {
|
||||
render(<AddActionModal {...defaultProps} />);
|
||||
expect(screen.getByTestId("modal-with-tabs")).toBeInTheDocument();
|
||||
// Check for translated text
|
||||
expect(screen.getByText("Add Action")).toBeInTheDocument();
|
||||
expect(screen.getByText("Capture a new action...")).toBeInTheDocument();
|
||||
expect(screen.getByText("Select Saved Action")).toBeInTheDocument(); // Check translated tab title
|
||||
expect(screen.getByText("Capture New Action")).toBeInTheDocument(); // Check translated tab title
|
||||
expect(screen.getByText("SavedActionsTab Mock")).toBeInTheDocument();
|
||||
expect(screen.getByText("CreateNewActionTab Mock")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("passes correct props to ModalWithTabs", () => {
|
||||
render(<AddActionModal {...defaultProps} />);
|
||||
expect(ModalWithTabsMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
// Check for translated props
|
||||
label: "Add Action",
|
||||
description: "Capture a new action...",
|
||||
open: true,
|
||||
setOpen: mockSetOpen,
|
||||
tabs: expect.any(Array),
|
||||
size: "md",
|
||||
closeOnOutsideClick: false,
|
||||
restrictOverflow: true,
|
||||
}),
|
||||
undefined
|
||||
);
|
||||
expect(ModalWithTabsMock.mock.calls[0][0].tabs).toHaveLength(2);
|
||||
// Check for translated tab titles in the tabs array
|
||||
expect(ModalWithTabsMock.mock.calls[0][0].tabs[0].title).toBe("Select Saved Action");
|
||||
expect(ModalWithTabsMock.mock.calls[0][0].tabs[1].title).toBe("Capture New Action");
|
||||
});
|
||||
|
||||
test("passes correct props to SavedActionsTab", () => {
|
||||
render(<AddActionModal {...defaultProps} />);
|
||||
expect(SavedActionsTabMock).toHaveBeenCalledWith(
|
||||
{
|
||||
actionClasses: mockActionClasses,
|
||||
localSurvey: mockSurvey,
|
||||
setLocalSurvey: mockSetLocalSurvey,
|
||||
setOpen: mockSetOpen,
|
||||
},
|
||||
undefined
|
||||
);
|
||||
});
|
||||
|
||||
test("passes correct props to CreateNewActionTab", () => {
|
||||
render(<AddActionModal {...defaultProps} />);
|
||||
expect(CreateNewActionTabMock).toHaveBeenCalledWith(
|
||||
{
|
||||
actionClasses: mockActionClasses,
|
||||
setActionClasses: mockSetActionClasses,
|
||||
setOpen: mockSetOpen,
|
||||
isReadOnly: false,
|
||||
setLocalSurvey: mockSetLocalSurvey,
|
||||
environmentId: "env1",
|
||||
},
|
||||
undefined
|
||||
);
|
||||
});
|
||||
|
||||
test("does not render when open is false", () => {
|
||||
render(<AddActionModal {...defaultProps} open={false} />);
|
||||
// Check the full props object passed to the mock, ensuring 'open' is false
|
||||
expect(ModalWithTabsMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
label: "Add Action", // Expect translated label even when closed
|
||||
description: "Capture a new action...", // Expect translated description
|
||||
open: false, // Check that open is false
|
||||
setOpen: mockSetOpen,
|
||||
tabs: expect.any(Array),
|
||||
size: "md",
|
||||
closeOnOutsideClick: false,
|
||||
restrictOverflow: true,
|
||||
}),
|
||||
undefined
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,103 @@
|
||||
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 { AddEndingCardButton } from "./add-ending-card-button";
|
||||
|
||||
const mockAddEndingCard = vi.fn();
|
||||
const mockSetLocalSurvey = vi.fn(); // Although not used in the button click, it's a prop
|
||||
|
||||
const mockSurvey: TSurvey = {
|
||||
id: "survey1",
|
||||
name: "Test Survey",
|
||||
type: "app",
|
||||
environmentId: "env1",
|
||||
status: "draft",
|
||||
questions: [],
|
||||
triggers: [],
|
||||
recontactDays: null,
|
||||
displayOption: "displayOnce",
|
||||
autoClose: null,
|
||||
delay: 0,
|
||||
autoComplete: null,
|
||||
surveyClosedMessage: null,
|
||||
singleUse: null,
|
||||
languages: [],
|
||||
styling: null,
|
||||
variables: [],
|
||||
welcomeCard: { enabled: false } as unknown as TSurvey["welcomeCard"],
|
||||
endings: [], // Start with an empty endings array
|
||||
hiddenFields: { enabled: false },
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
createdBy: null,
|
||||
segment: null,
|
||||
resultShareKey: null,
|
||||
displayPercentage: null,
|
||||
closeOnDate: null,
|
||||
runOnDate: null,
|
||||
} as unknown as TSurvey;
|
||||
|
||||
describe("AddEndingCardButton", () => {
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks(); // Clear mocks after each test
|
||||
});
|
||||
|
||||
test("renders the button correctly", () => {
|
||||
render(
|
||||
<AddEndingCardButton
|
||||
localSurvey={mockSurvey}
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
addEndingCard={mockAddEndingCard}
|
||||
/>
|
||||
);
|
||||
|
||||
// Check for the Tolgee translated text
|
||||
expect(screen.getByText("environments.surveys.edit.add_ending")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("calls addEndingCard with the correct index when clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const surveyWithEndings = { ...mockSurvey, endings: [{}, {}] } as unknown as TSurvey; // Survey with 2 endings
|
||||
|
||||
render(
|
||||
<AddEndingCardButton
|
||||
localSurvey={surveyWithEndings}
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
addEndingCard={mockAddEndingCard}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByText("environments.surveys.edit.add_ending").closest("div.group");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
if (button) {
|
||||
await user.click(button);
|
||||
// Should be called with the current length of the endings array
|
||||
expect(mockAddEndingCard).toHaveBeenCalledTimes(1);
|
||||
expect(mockAddEndingCard).toHaveBeenCalledWith(2);
|
||||
}
|
||||
});
|
||||
|
||||
test("calls addEndingCard with index 0 when no endings exist", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<AddEndingCardButton
|
||||
localSurvey={mockSurvey} // Survey with 0 endings
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
addEndingCard={mockAddEndingCard}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByText("environments.surveys.edit.add_ending").closest("div.group");
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
if (button) {
|
||||
await user.click(button);
|
||||
// Should be called with index 0
|
||||
expect(mockAddEndingCard).toHaveBeenCalledTimes(1);
|
||||
expect(mockAddEndingCard).toHaveBeenCalledWith(0);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,159 @@
|
||||
import { AddQuestionButton } from "@/modules/survey/editor/components/add-question-button";
|
||||
import {
|
||||
TQuestion,
|
||||
getCXQuestionTypes,
|
||||
getQuestionDefaults,
|
||||
getQuestionTypes,
|
||||
} from "@/modules/survey/lib/questions";
|
||||
import { createId } from "@paralleldrive/cuid2";
|
||||
import { Project } from "@prisma/client";
|
||||
// Import React for the mock
|
||||
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock("@/lib/cn", () => ({
|
||||
cn: (...args: any[]) => args.filter(Boolean).join(" "),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/survey/lib/questions", () => ({
|
||||
getCXQuestionTypes: vi.fn(),
|
||||
getQuestionDefaults: vi.fn(),
|
||||
getQuestionTypes: vi.fn(),
|
||||
universalQuestionPresets: { presetKey: "presetValue" },
|
||||
}));
|
||||
|
||||
vi.mock("@formkit/auto-animate/react", () => ({
|
||||
useAutoAnimate: vi.fn(() => [vi.fn()]),
|
||||
}));
|
||||
|
||||
vi.mock("@paralleldrive/cuid2", () => ({
|
||||
createId: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("@radix-ui/react-collapsible", async () => {
|
||||
const original = await vi.importActual("@radix-ui/react-collapsible");
|
||||
return {
|
||||
...original,
|
||||
Root: ({ children, open, onOpenChange }: any) => (
|
||||
<div data-state={open ? "open" : "closed"} onClick={onOpenChange}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
CollapsibleTrigger: ({ children, asChild }: any) => (asChild ? children : <button>{children}</button>),
|
||||
CollapsibleContent: ({ children }: any) => <div>{children}</div>,
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("lucide-react", () => ({
|
||||
PlusIcon: () => <div>PlusIcon</div>,
|
||||
}));
|
||||
|
||||
const mockProject = { id: "test-project-id" } as Project;
|
||||
const mockAddQuestion = vi.fn();
|
||||
const mockQuestionType1 = {
|
||||
id: "type1",
|
||||
label: "Type 1",
|
||||
description: "Desc 1",
|
||||
icon: () => <div>Icon1</div>,
|
||||
} as TQuestion;
|
||||
const mockQuestionType2 = {
|
||||
id: "type2",
|
||||
label: "Type 2",
|
||||
description: "Desc 2",
|
||||
icon: () => <div>Icon2</div>,
|
||||
} as TQuestion;
|
||||
const mockCXQuestionType = {
|
||||
id: "cxType",
|
||||
label: "CX Type",
|
||||
description: "CX Desc",
|
||||
icon: () => <div>CXIcon</div>,
|
||||
} as TQuestion;
|
||||
|
||||
describe("AddQuestionButton", () => {
|
||||
beforeEach(() => {
|
||||
vi.mocked(getQuestionTypes).mockReturnValue([mockQuestionType1, mockQuestionType2]);
|
||||
vi.mocked(getCXQuestionTypes).mockReturnValue([mockCXQuestionType]);
|
||||
vi.mocked(getQuestionDefaults).mockReturnValue({ defaultKey: "defaultValue" } as any);
|
||||
vi.mocked(createId).mockReturnValue("test-cuid");
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
test("opens and shows question types on click", async () => {
|
||||
render(<AddQuestionButton addQuestion={mockAddQuestion} project={mockProject} isCxMode={false} />);
|
||||
const trigger = screen.getByText("environments.surveys.edit.add_question").closest("div")?.parentElement;
|
||||
expect(trigger).toBeInTheDocument();
|
||||
if (trigger) {
|
||||
await userEvent.click(trigger);
|
||||
}
|
||||
expect(screen.getByText(mockQuestionType1.label)).toBeInTheDocument();
|
||||
expect(screen.getByText(mockQuestionType2.label)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("calls getQuestionTypes when isCxMode is false", () => {
|
||||
render(<AddQuestionButton addQuestion={mockAddQuestion} project={mockProject} isCxMode={false} />);
|
||||
expect(getQuestionTypes).toHaveBeenCalled();
|
||||
expect(getCXQuestionTypes).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("calls getCXQuestionTypes when isCxMode is true", async () => {
|
||||
render(<AddQuestionButton addQuestion={mockAddQuestion} project={mockProject} isCxMode={true} />);
|
||||
const trigger = screen.getByText("environments.surveys.edit.add_question").closest("div")?.parentElement;
|
||||
expect(trigger).toBeInTheDocument();
|
||||
if (trigger) {
|
||||
await userEvent.click(trigger);
|
||||
}
|
||||
expect(getCXQuestionTypes).toHaveBeenCalled();
|
||||
expect(getQuestionTypes).not.toHaveBeenCalled();
|
||||
expect(screen.getByText(mockCXQuestionType.label)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("shows description on hover", async () => {
|
||||
render(<AddQuestionButton addQuestion={mockAddQuestion} project={mockProject} isCxMode={false} />);
|
||||
const trigger = screen.getByText("environments.surveys.edit.add_question").closest("div")?.parentElement;
|
||||
expect(trigger).toBeInTheDocument();
|
||||
if (trigger) {
|
||||
await userEvent.click(trigger); // Open the collapsible
|
||||
}
|
||||
const questionButton = screen.getByText(mockQuestionType1.label).closest("button");
|
||||
expect(questionButton).toBeInTheDocument();
|
||||
if (questionButton) {
|
||||
fireEvent.mouseEnter(questionButton);
|
||||
// Description might be visually hidden/styled based on opacity, check if it's in the DOM
|
||||
expect(screen.getByText(mockQuestionType1.description)).toBeInTheDocument();
|
||||
fireEvent.mouseLeave(questionButton);
|
||||
}
|
||||
});
|
||||
|
||||
test("closes the collapsible after adding a question", async () => {
|
||||
render(<AddQuestionButton addQuestion={mockAddQuestion} project={mockProject} isCxMode={false} />);
|
||||
const rootElement = screen.getByText("environments.surveys.edit.add_question").closest("[data-state]");
|
||||
expect(rootElement).toHaveAttribute("data-state", "closed");
|
||||
|
||||
// Open
|
||||
const trigger = screen.getByText("environments.surveys.edit.add_question").closest("div")?.parentElement;
|
||||
expect(trigger).toBeInTheDocument();
|
||||
if (trigger) {
|
||||
await userEvent.click(trigger);
|
||||
}
|
||||
expect(rootElement).toHaveAttribute("data-state", "open");
|
||||
|
||||
// Click a question type
|
||||
const questionButton = screen.getByText(mockQuestionType1.label).closest("button");
|
||||
expect(questionButton).toBeInTheDocument();
|
||||
if (questionButton) {
|
||||
await userEvent.click(questionButton);
|
||||
}
|
||||
|
||||
// Check if it closed (state should change back to closed)
|
||||
// Note: The mock implementation might not perfectly replicate Radix's state management on click inside content
|
||||
// We verified addQuestion is called, which includes setOpen(false)
|
||||
expect(mockAddQuestion).toHaveBeenCalled();
|
||||
// We can't directly test setOpen(false) state change easily with this mock structure,
|
||||
// but we know the onClick handler calls it.
|
||||
});
|
||||
});
|
||||
@@ -16,7 +16,6 @@ interface AddressQuestionFormProps {
|
||||
question: TSurveyAddressQuestion;
|
||||
questionIdx: number;
|
||||
updateQuestion: (questionIdx: number, updatedAttributes: Partial<TSurveyAddressQuestion>) => void;
|
||||
lastQuestion: boolean;
|
||||
isInvalid: boolean;
|
||||
selectedLanguageCode: string;
|
||||
setSelectedLanguageCode: (language: string) => void;
|
||||
|
||||
@@ -0,0 +1,412 @@
|
||||
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, TSurveyQuestion, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
|
||||
import { AdvancedSettings } from "./advanced-settings";
|
||||
|
||||
// Mock the child components
|
||||
vi.mock("@/modules/survey/editor/components/conditional-logic", () => ({
|
||||
ConditionalLogic: ({ question, questionIdx, localSurvey, updateQuestion }: any) => (
|
||||
<div data-testid="conditional-logic">
|
||||
<span data-testid="conditional-logic-question-id">{question.id}</span>
|
||||
<span data-testid="conditional-logic-question-type">{question.type}</span>
|
||||
<span data-testid="conditional-logic-question-idx">{questionIdx}</span>
|
||||
<span data-testid="conditional-logic-survey-id">{localSurvey.id}</span>
|
||||
<span data-testid="conditional-logic-logic-conditions">
|
||||
{question.logic && JSON.stringify(question.logic)}
|
||||
</span>
|
||||
<span data-testid="conditional-logic-survey-questions">
|
||||
{JSON.stringify(localSurvey.questions.map((q) => q.id))}
|
||||
</span>
|
||||
<button
|
||||
data-testid="conditional-logic-update-button"
|
||||
onClick={() => updateQuestion(questionIdx, { test: "value" })}>
|
||||
Update
|
||||
</button>
|
||||
{question.logic && question.logic.length > 0 ? (
|
||||
<button
|
||||
data-testid="remove-logic-button"
|
||||
onClick={() => {
|
||||
updateQuestion(questionIdx, { logic: [] });
|
||||
}}>
|
||||
Remove All Logic
|
||||
</button>
|
||||
) : (
|
||||
<span data-testid="no-logic-message">No logic conditions</span>
|
||||
)}
|
||||
{question.logic?.map((logicItem: any, index: number) => (
|
||||
<div key={logicItem.id} data-testid={`logic-item-${index}`}>
|
||||
Referenced Question ID: {logicItem.conditions.conditions[0].leftOperand.value}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/survey/editor/components/update-question-id", () => ({
|
||||
UpdateQuestionId: ({ question, questionIdx, localSurvey, updateQuestion }: any) => (
|
||||
<div data-testid="update-question-id">
|
||||
<span data-testid="update-question-id-question-id">{question.id}</span>
|
||||
<span data-testid="update-question-id-question-type">{question.type}</span>
|
||||
<span data-testid="update-question-id-question-idx">{questionIdx}</span>
|
||||
<span data-testid="update-question-id-survey-id">{localSurvey.id}</span>
|
||||
<button
|
||||
data-testid="update-question-id-update-button"
|
||||
onClick={() => updateQuestion(questionIdx, { id: "new-id" })}>
|
||||
Update
|
||||
</button>
|
||||
<input
|
||||
data-testid="question-id-input"
|
||||
defaultValue={question.id}
|
||||
onChange={(e) => updateQuestion(questionIdx, { id: e.target.value })}
|
||||
/>
|
||||
<button
|
||||
data-testid="save-question-id"
|
||||
onClick={() => updateQuestion(questionIdx, { id: "q2-updated" })}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
describe("AdvancedSettings", () => {
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
test("should render ConditionalLogic and UpdateQuestionId components when provided with valid props", () => {
|
||||
// Arrange
|
||||
const mockQuestion = {
|
||||
id: "q1",
|
||||
type: TSurveyQuestionTypeEnum.OpenText,
|
||||
headline: { default: "Test Question" },
|
||||
} as unknown as TSurveyQuestion;
|
||||
|
||||
const mockSurvey = {
|
||||
id: "survey1",
|
||||
name: "Test Survey",
|
||||
questions: [mockQuestion],
|
||||
welcomeCard: {
|
||||
enabled: false,
|
||||
headline: { default: "Welcome" },
|
||||
html: { default: "" },
|
||||
} as unknown as TSurvey["welcomeCard"],
|
||||
hiddenFields: {
|
||||
enabled: false,
|
||||
fieldIds: [],
|
||||
},
|
||||
status: "draft",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
} as unknown as TSurvey;
|
||||
|
||||
const mockUpdateQuestion = vi.fn();
|
||||
const questionIdx = 0;
|
||||
|
||||
// Act
|
||||
render(
|
||||
<AdvancedSettings
|
||||
question={mockQuestion}
|
||||
questionIdx={questionIdx}
|
||||
localSurvey={mockSurvey}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
/>
|
||||
);
|
||||
|
||||
// Assert
|
||||
// Check if both components are rendered
|
||||
expect(screen.getByTestId("conditional-logic")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("update-question-id")).toBeInTheDocument();
|
||||
|
||||
// Check if props are correctly passed to ConditionalLogic
|
||||
expect(screen.getByTestId("conditional-logic-question-id")).toHaveTextContent("q1");
|
||||
expect(screen.getByTestId("conditional-logic-question-idx")).toHaveTextContent("0");
|
||||
expect(screen.getByTestId("conditional-logic-survey-id")).toHaveTextContent("survey1");
|
||||
|
||||
// Check if props are correctly passed to UpdateQuestionId
|
||||
expect(screen.getByTestId("update-question-id-question-id")).toHaveTextContent("q1");
|
||||
expect(screen.getByTestId("update-question-id-question-idx")).toHaveTextContent("0");
|
||||
expect(screen.getByTestId("update-question-id-survey-id")).toHaveTextContent("survey1");
|
||||
|
||||
// Verify that updateQuestion function is passed and can be called
|
||||
const conditionalLogicUpdateButton = screen.getByTestId("conditional-logic-update-button");
|
||||
conditionalLogicUpdateButton.click();
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledWith(0, { test: "value" });
|
||||
|
||||
const updateQuestionIdUpdateButton = screen.getByTestId("update-question-id-update-button");
|
||||
updateQuestionIdUpdateButton.click();
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledTimes(2);
|
||||
expect(mockUpdateQuestion).toHaveBeenLastCalledWith(0, { id: "new-id" });
|
||||
});
|
||||
|
||||
test("should pass the correct props to ConditionalLogic and UpdateQuestionId components", () => {
|
||||
// Arrange
|
||||
const mockQuestion: TSurveyQuestion = {
|
||||
id: "question-123",
|
||||
type: TSurveyQuestionTypeEnum.OpenText,
|
||||
headline: { default: "Test Question" },
|
||||
} as unknown as TSurveyQuestion;
|
||||
|
||||
const mockSurvey = {
|
||||
id: "survey-456",
|
||||
name: "Test Survey",
|
||||
questions: [mockQuestion],
|
||||
welcomeCard: {
|
||||
enabled: false,
|
||||
headline: { default: "Welcome" },
|
||||
html: { default: "" },
|
||||
} as unknown as TSurvey["welcomeCard"],
|
||||
hiddenFields: {
|
||||
enabled: false,
|
||||
fieldIds: [],
|
||||
},
|
||||
status: "draft",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
} as unknown as TSurvey;
|
||||
|
||||
const mockUpdateQuestion = vi.fn();
|
||||
const questionIdx = 2; // Using a non-zero index to ensure it's passed correctly
|
||||
|
||||
// Act
|
||||
render(
|
||||
<AdvancedSettings
|
||||
question={mockQuestion}
|
||||
questionIdx={questionIdx}
|
||||
localSurvey={mockSurvey}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
/>
|
||||
);
|
||||
|
||||
// Assert
|
||||
// Check if both components are rendered
|
||||
expect(screen.getByTestId("conditional-logic")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("update-question-id")).toBeInTheDocument();
|
||||
|
||||
// Check if props are correctly passed to ConditionalLogic
|
||||
expect(screen.getByTestId("conditional-logic-question-id")).toHaveTextContent("question-123");
|
||||
expect(screen.getByTestId("conditional-logic-question-idx")).toHaveTextContent("2");
|
||||
expect(screen.getByTestId("conditional-logic-survey-id")).toHaveTextContent("survey-456");
|
||||
|
||||
// Check if props are correctly passed to UpdateQuestionId
|
||||
expect(screen.getByTestId("update-question-id-question-id")).toHaveTextContent("question-123");
|
||||
expect(screen.getByTestId("update-question-id-question-idx")).toHaveTextContent("2");
|
||||
expect(screen.getByTestId("update-question-id-survey-id")).toHaveTextContent("survey-456");
|
||||
|
||||
// Verify that updateQuestion function is passed and can be called from ConditionalLogic
|
||||
const conditionalLogicUpdateButton = screen.getByTestId("conditional-logic-update-button");
|
||||
conditionalLogicUpdateButton.click();
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledWith(2, { test: "value" });
|
||||
|
||||
// Verify that updateQuestion function is passed and can be called from UpdateQuestionId
|
||||
const updateQuestionIdUpdateButton = screen.getByTestId("update-question-id-update-button");
|
||||
updateQuestionIdUpdateButton.click();
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledWith(2, { id: "new-id" });
|
||||
|
||||
// Verify the function was called exactly twice
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
test("should render correctly when dynamically rendered after being initially hidden", async () => {
|
||||
// Arrange
|
||||
const mockQuestion: TSurveyQuestion = {
|
||||
id: "q1",
|
||||
type: TSurveyQuestionTypeEnum.OpenText,
|
||||
headline: { default: "Test Question" },
|
||||
} as unknown as TSurveyQuestion;
|
||||
|
||||
const mockSurvey = {
|
||||
id: "survey1",
|
||||
name: "Test Survey",
|
||||
questions: [mockQuestion],
|
||||
welcomeCard: {
|
||||
enabled: false,
|
||||
headline: { default: "Welcome" },
|
||||
html: { default: "" },
|
||||
} as unknown as TSurvey["welcomeCard"],
|
||||
hiddenFields: {
|
||||
enabled: false,
|
||||
fieldIds: [],
|
||||
},
|
||||
status: "draft",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
} as unknown as TSurvey;
|
||||
|
||||
const mockUpdateQuestion = vi.fn();
|
||||
const questionIdx = 0;
|
||||
|
||||
// Act
|
||||
const { rerender } = render(
|
||||
<div>
|
||||
{/* Simulate AdvancedSettings being initially hidden */}
|
||||
{false && ( // NOSONAR typescript:1125 typescript:6638 // This is a simulation of a condition
|
||||
<AdvancedSettings
|
||||
question={mockQuestion}
|
||||
questionIdx={questionIdx}
|
||||
localSurvey={mockSurvey}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
// Simulate AdvancedSettings being dynamically rendered
|
||||
rerender(
|
||||
<div>
|
||||
<AdvancedSettings
|
||||
question={mockQuestion}
|
||||
questionIdx={questionIdx}
|
||||
localSurvey={mockSurvey}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Assert
|
||||
// Check if both components are rendered
|
||||
expect(screen.getByTestId("conditional-logic")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("update-question-id")).toBeInTheDocument();
|
||||
|
||||
// Check if props are correctly passed to ConditionalLogic
|
||||
expect(screen.getByTestId("conditional-logic-question-id")).toHaveTextContent("q1");
|
||||
expect(screen.getByTestId("conditional-logic-question-idx")).toHaveTextContent("0");
|
||||
expect(screen.getByTestId("conditional-logic-survey-id")).toHaveTextContent("survey1");
|
||||
|
||||
// Check if props are correctly passed to UpdateQuestionId
|
||||
expect(screen.getByTestId("update-question-id-question-id")).toHaveTextContent("q1");
|
||||
expect(screen.getByTestId("update-question-id-question-idx")).toHaveTextContent("0");
|
||||
expect(screen.getByTestId("update-question-id-survey-id")).toHaveTextContent("survey1");
|
||||
|
||||
// Verify that updateQuestion function is passed and can be called
|
||||
const conditionalLogicUpdateButton = screen.getByTestId("conditional-logic-update-button");
|
||||
await userEvent.click(conditionalLogicUpdateButton);
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledWith(0, { test: "value" });
|
||||
|
||||
const updateQuestionIdUpdateButton = screen.getByTestId("update-question-id-update-button");
|
||||
await userEvent.click(updateQuestionIdUpdateButton);
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledTimes(2);
|
||||
expect(mockUpdateQuestion).toHaveBeenLastCalledWith(0, { id: "new-id" });
|
||||
});
|
||||
|
||||
test("should update conditional logic when question ID is changed", async () => {
|
||||
// Arrange
|
||||
const mockQuestion1 = {
|
||||
id: "q1",
|
||||
type: TSurveyQuestionTypeEnum.OpenText,
|
||||
headline: { default: "Question 1" },
|
||||
logic: [
|
||||
{
|
||||
id: "logic1",
|
||||
conditions: {
|
||||
id: "cond1",
|
||||
connector: "and",
|
||||
conditions: [
|
||||
{
|
||||
id: "subcond1",
|
||||
leftOperand: { value: "q2", type: "question" },
|
||||
operator: "equals",
|
||||
},
|
||||
],
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
id: "action1",
|
||||
objective: "jumpToQuestion",
|
||||
target: "q3",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
} as unknown as TSurveyQuestion;
|
||||
|
||||
const mockQuestion2 = {
|
||||
id: "q2",
|
||||
type: TSurveyQuestionTypeEnum.OpenText,
|
||||
headline: { default: "Question 2" },
|
||||
} as unknown as TSurveyQuestion;
|
||||
|
||||
const mockSurvey = {
|
||||
id: "survey1",
|
||||
name: "Test Survey",
|
||||
questions: [mockQuestion1, mockQuestion2],
|
||||
welcomeCard: {
|
||||
enabled: false,
|
||||
headline: { default: "Welcome" },
|
||||
html: { default: "" },
|
||||
} as unknown as TSurvey["welcomeCard"],
|
||||
endings: [],
|
||||
hiddenFields: { enabled: false, fieldIds: [] },
|
||||
status: "draft",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
} as unknown as TSurvey;
|
||||
|
||||
// Create a mock function that simulates updating the question ID and updating any logic that references it
|
||||
const mockUpdateQuestion = vi.fn((questionIdx, updatedAttributes) => {
|
||||
// If we're updating a question ID
|
||||
if (updatedAttributes.id) {
|
||||
const oldId = mockSurvey.questions[questionIdx].id;
|
||||
const newId = updatedAttributes.id;
|
||||
|
||||
// Update the question ID
|
||||
mockSurvey.questions[questionIdx] = {
|
||||
...mockSurvey.questions[questionIdx],
|
||||
...updatedAttributes,
|
||||
};
|
||||
|
||||
// Update any logic that references this question ID
|
||||
mockSurvey.questions.forEach((q) => {
|
||||
if (q.logic) {
|
||||
q.logic.forEach((logicItem) => {
|
||||
// NOSONAR typescript:S2004 // This is ok for testing
|
||||
logicItem.conditions.conditions.forEach((condition) => {
|
||||
// Check if it's a TSingleCondition (not a TConditionGroup)
|
||||
if ("leftOperand" in condition) {
|
||||
if (condition.leftOperand.type === "question" && condition.leftOperand.value === oldId) {
|
||||
condition.leftOperand.value = newId;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Act
|
||||
render(
|
||||
<AdvancedSettings
|
||||
question={mockQuestion2}
|
||||
questionIdx={1}
|
||||
localSurvey={mockSurvey}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
/>
|
||||
);
|
||||
|
||||
// Assert
|
||||
// Check if both components are rendered
|
||||
expect(screen.getByTestId("conditional-logic")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("update-question-id")).toBeInTheDocument();
|
||||
|
||||
// Check if props are correctly passed to ConditionalLogic
|
||||
expect(screen.getByTestId("conditional-logic-question-id")).toHaveTextContent("q2");
|
||||
expect(screen.getByTestId("conditional-logic-question-idx")).toHaveTextContent("1");
|
||||
expect(screen.getByTestId("conditional-logic-survey-id")).toHaveTextContent("survey1");
|
||||
|
||||
// Check if props are correctly passed to UpdateQuestionId
|
||||
expect(screen.getByTestId("update-question-id-question-id")).toHaveTextContent("q2");
|
||||
expect(screen.getByTestId("update-question-id-question-idx")).toHaveTextContent("1");
|
||||
expect(screen.getByTestId("update-question-id-survey-id")).toHaveTextContent("survey1");
|
||||
|
||||
// Verify that updateQuestion function is passed and can be called
|
||||
const conditionalLogicUpdateButton = screen.getByTestId("conditional-logic-update-button");
|
||||
await userEvent.click(conditionalLogicUpdateButton);
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledWith(1, { test: "value" });
|
||||
|
||||
const updateQuestionIdUpdateButton = screen.getByTestId("update-question-id-update-button");
|
||||
await userEvent.click(updateQuestionIdUpdateButton);
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledTimes(2);
|
||||
expect(mockUpdateQuestion).toHaveBeenLastCalledWith(1, { id: "new-id" });
|
||||
});
|
||||
});
|
||||
@@ -88,7 +88,7 @@ export const AnimatedSurveyBg = ({ handleBgChange, background }: AnimatedSurveyB
|
||||
<source src={`${key}`} type="video/mp4" />
|
||||
</video>
|
||||
<input
|
||||
className="absolute right-2 top-2 h-4 w-4 rounded-sm bg-white"
|
||||
className="absolute top-2 right-2 h-4 w-4 rounded-sm bg-white"
|
||||
type="checkbox"
|
||||
checked={animation === value}
|
||||
onChange={() => handleBg(value)}
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { afterEach, describe, expect, test, vi } from "vitest";
|
||||
import { ColorSurveyBg } from "./color-survey-bg";
|
||||
|
||||
// Mock the ColorPicker component
|
||||
vi.mock("@/modules/ui/components/color-picker", () => ({
|
||||
ColorPicker: ({ color, onChange }: { color: string; onChange?: (color: string) => void }) => (
|
||||
<div data-testid="color-picker" data-color={color}>
|
||||
Mocked ColorPicker
|
||||
{onChange && (
|
||||
<button data-testid="color-picker-change" onClick={() => onChange("#ABCDEF")}>
|
||||
Change Color
|
||||
</button>
|
||||
)}
|
||||
{onChange && (
|
||||
<button data-testid="simulate-color-change" onClick={() => onChange("invalid-color")}>
|
||||
Change Invalid Color
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
describe("ColorSurveyBg", () => {
|
||||
const mockHandleBgChange = vi.fn();
|
||||
const mockColors = ["#FF0000", "#00FF00", "#0000FF"];
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test("initializes color state with provided background prop", () => {
|
||||
const testBackground = "#123456";
|
||||
|
||||
render(
|
||||
<ColorSurveyBg handleBgChange={mockHandleBgChange} colors={mockColors} background={testBackground} />
|
||||
);
|
||||
|
||||
// Check if ColorPicker received the correct color prop
|
||||
const colorPicker = screen.getByTestId("color-picker");
|
||||
expect(colorPicker).toHaveAttribute("data-color", testBackground);
|
||||
});
|
||||
|
||||
test("initializes color state with default #FFFFFF when background prop is not provided", () => {
|
||||
render(
|
||||
<ColorSurveyBg
|
||||
handleBgChange={mockHandleBgChange}
|
||||
colors={mockColors}
|
||||
background={undefined as unknown as string}
|
||||
/>
|
||||
);
|
||||
|
||||
// Check if ColorPicker received the default color
|
||||
const colorPicker = screen.getByTestId("color-picker");
|
||||
expect(colorPicker).toHaveAttribute("data-color", "#FFFFFF");
|
||||
});
|
||||
|
||||
test("should update color state and call handleBgChange when a color is selected from ColorPicker", async () => {
|
||||
const user = userEvent.setup();
|
||||
const initialBackground = "#123456";
|
||||
|
||||
render(
|
||||
<ColorSurveyBg handleBgChange={mockHandleBgChange} colors={mockColors} background={initialBackground} />
|
||||
);
|
||||
|
||||
// Verify initial state
|
||||
const colorPicker = screen.getByTestId("color-picker");
|
||||
expect(colorPicker).toHaveAttribute("data-color", initialBackground);
|
||||
|
||||
// Simulate color change from ColorPicker
|
||||
const changeButton = screen.getByTestId("color-picker-change");
|
||||
await user.click(changeButton);
|
||||
|
||||
// Verify handleBgChange was called with the new color and 'color' type
|
||||
expect(mockHandleBgChange).toHaveBeenCalledWith("#ABCDEF", "color");
|
||||
|
||||
// Verify color state was updated (ColorPicker should receive the new color)
|
||||
expect(colorPicker).toHaveAttribute("data-color", "#ABCDEF");
|
||||
});
|
||||
|
||||
test("applies border style to the currently selected color box", () => {
|
||||
const selectedColor = "#00FF00"; // Second color in the mockColors array
|
||||
|
||||
const { container } = render(
|
||||
<ColorSurveyBg handleBgChange={mockHandleBgChange} colors={mockColors} background={selectedColor} />
|
||||
);
|
||||
|
||||
// Get all color boxes using CSS selector
|
||||
const colorBoxes = container.querySelectorAll(".h-16.w-16.cursor-pointer");
|
||||
expect(colorBoxes).toHaveLength(mockColors.length);
|
||||
|
||||
// Find the selected color box (should be the second one)
|
||||
const selectedColorBox = colorBoxes[1];
|
||||
|
||||
// Check that the selected color box has the border classes
|
||||
expect(selectedColorBox.className).toContain("border-4");
|
||||
expect(selectedColorBox.className).toContain("border-slate-500");
|
||||
|
||||
// Check that other color boxes don't have these classes
|
||||
expect(colorBoxes[0].className).not.toContain("border-4");
|
||||
expect(colorBoxes[0].className).not.toContain("border-slate-500");
|
||||
expect(colorBoxes[2].className).not.toContain("border-4");
|
||||
expect(colorBoxes[2].className).not.toContain("border-slate-500");
|
||||
});
|
||||
|
||||
test("renders all color boxes provided in the colors prop", () => {
|
||||
const testBackground = "#FF0000";
|
||||
|
||||
const { container } = render(
|
||||
<ColorSurveyBg handleBgChange={mockHandleBgChange} colors={mockColors} background={testBackground} />
|
||||
);
|
||||
|
||||
// Check if all color boxes are rendered using class selectors
|
||||
const colorBoxes = container.querySelectorAll(".h-16.w-16.cursor-pointer.rounded-lg");
|
||||
expect(colorBoxes).toHaveLength(mockColors.length);
|
||||
|
||||
// Verify each color box has the correct background color
|
||||
mockColors.forEach((color, index) => {
|
||||
expect(colorBoxes[index]).toHaveStyle({ backgroundColor: color });
|
||||
});
|
||||
|
||||
// Check that the selected color has the special border styling
|
||||
const selectedColorBox = colorBoxes[0]; // First color (#FF0000) should be selected
|
||||
expect(selectedColorBox.className).toContain("border-4 border-slate-500");
|
||||
|
||||
// Check that non-selected colors don't have the special border styling
|
||||
const nonSelectedColorBoxes = Array.from(colorBoxes).slice(1);
|
||||
nonSelectedColorBoxes.forEach((box) => {
|
||||
expect(box.className).not.toContain("border-4 border-slate-500");
|
||||
});
|
||||
});
|
||||
|
||||
test("renders without crashing when an invalid color format is provided", () => {
|
||||
const invalidColor = "invalid-color";
|
||||
const invalidColorsMock = ["#FF0000", "#00FF00", "invalid-color"];
|
||||
|
||||
const { container } = render(
|
||||
<ColorSurveyBg
|
||||
handleBgChange={mockHandleBgChange}
|
||||
colors={invalidColorsMock}
|
||||
background={invalidColor}
|
||||
/>
|
||||
);
|
||||
|
||||
// Check if component renders without crashing
|
||||
expect(screen.getByTestId("color-picker")).toBeInTheDocument();
|
||||
|
||||
// Check if ColorPicker received the invalid color
|
||||
expect(screen.getByTestId("color-picker")).toHaveAttribute("data-color", invalidColor);
|
||||
|
||||
// Check if the color boxes render
|
||||
const colorBoxes = container.querySelectorAll(".h-16.w-16.cursor-pointer");
|
||||
expect(colorBoxes.length).toBe(3);
|
||||
});
|
||||
|
||||
test("passes invalid color to handleBgChange when selected through ColorPicker", async () => {
|
||||
const user = userEvent.setup();
|
||||
const invalidColorsMock = ["#FF0000", "#00FF00", "invalid-color"];
|
||||
|
||||
render(
|
||||
<ColorSurveyBg handleBgChange={mockHandleBgChange} colors={invalidColorsMock} background="#FFFFFF" />
|
||||
);
|
||||
|
||||
// Simulate color change in ColorPicker with invalid color
|
||||
await user.click(screen.getByTestId("simulate-color-change"));
|
||||
|
||||
// Verify handleBgChange was called with the invalid color
|
||||
expect(mockHandleBgChange).toHaveBeenCalledWith("invalid-color", "color");
|
||||
});
|
||||
|
||||
test("passes invalid color to handleBgChange when clicking a color box with invalid color", async () => {
|
||||
const user = userEvent.setup();
|
||||
const invalidColorsMock = ["#FF0000", "#00FF00", "invalid-color"];
|
||||
|
||||
const { container } = render(
|
||||
<ColorSurveyBg handleBgChange={mockHandleBgChange} colors={invalidColorsMock} background="#FFFFFF" />
|
||||
);
|
||||
|
||||
// Find all color boxes
|
||||
const colorBoxes = container.querySelectorAll(".h-16.w-16.cursor-pointer");
|
||||
|
||||
// The third box corresponds to our invalid color (from invalidColorsMock)
|
||||
const invalidColorBox = colorBoxes[2];
|
||||
expect(invalidColorBox).toBeInTheDocument();
|
||||
|
||||
// Click the invalid color box
|
||||
await user.click(invalidColorBox);
|
||||
|
||||
// Verify handleBgChange was called with the invalid color
|
||||
expect(mockHandleBgChange).toHaveBeenCalledWith("invalid-color", "color");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,400 @@
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { afterEach, describe, expect, test, vi } from "vitest";
|
||||
import { TLanguage } from "@formbricks/types/project";
|
||||
import {
|
||||
TSurvey,
|
||||
TSurveyDateQuestion,
|
||||
TSurveyLanguage,
|
||||
TSurveyQuestionTypeEnum,
|
||||
} from "@formbricks/types/surveys/types";
|
||||
import { DateQuestionForm } from "./date-question-form";
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock("@formkit/auto-animate/react", () => ({
|
||||
useAutoAnimate: () => [null],
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/survey/components/question-form-input", () => ({
|
||||
QuestionFormInput: ({ id, value, label, locale, selectedLanguageCode }: any) => (
|
||||
<div
|
||||
data-testid={`question-form-input-${id}`}
|
||||
data-value={value?.default}
|
||||
data-label={label}
|
||||
data-locale={locale}
|
||||
data-language={selectedLanguageCode}>
|
||||
{label}: {value?.[selectedLanguageCode] ?? value?.default}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/ui/components/button", () => ({
|
||||
Button: ({ children, onClick, className, size, variant, type }: any) => (
|
||||
<button
|
||||
data-testid="add-description-button"
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
data-size={size}
|
||||
data-variant={variant}
|
||||
type={type}>
|
||||
{children}
|
||||
</button>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/ui/components/label", () => ({
|
||||
Label: ({ children, htmlFor }: any) => (
|
||||
<label data-testid={`label-${htmlFor}`} htmlFor={htmlFor}>
|
||||
{children}
|
||||
</label>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/ui/components/options-switch", () => ({
|
||||
OptionsSwitch: ({ options, currentOption, handleOptionChange }: any) => (
|
||||
<div data-testid="options-switch" data-current-option={currentOption}>
|
||||
{options.map((option: any) => (
|
||||
<button
|
||||
key={option.value}
|
||||
data-testid={`option-${option.value}`}
|
||||
onClick={() => handleOptionChange(option.value)}>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("lucide-react", () => ({
|
||||
PlusIcon: () => <div data-testid="plus-icon">PlusIcon</div>,
|
||||
}));
|
||||
|
||||
// Mock with implementation to track calls and arguments
|
||||
const extractLanguageCodesMock = vi.fn().mockReturnValue(["default", "en", "fr"]);
|
||||
const createI18nStringMock = vi.fn().mockImplementation((text, _) => ({
|
||||
default: text,
|
||||
en: "",
|
||||
fr: "",
|
||||
}));
|
||||
|
||||
vi.mock("@/lib/i18n/utils", () => ({
|
||||
extractLanguageCodes: (languages: any) => extractLanguageCodesMock(languages),
|
||||
createI18nString: (text: string, languages: string[]) => createI18nStringMock(text, languages),
|
||||
}));
|
||||
|
||||
describe("DateQuestionForm", () => {
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
const mockQuestion: TSurveyDateQuestion = {
|
||||
id: "q1",
|
||||
type: TSurveyQuestionTypeEnum.Date,
|
||||
headline: {
|
||||
default: "Select a date",
|
||||
en: "Select a date",
|
||||
fr: "Sélectionnez une date",
|
||||
},
|
||||
required: true,
|
||||
format: "M-d-y",
|
||||
// Note: subheader is intentionally undefined for this test
|
||||
};
|
||||
|
||||
const mockLocalSurvey = {
|
||||
id: "survey1",
|
||||
environmentId: "env1",
|
||||
name: "Test Survey",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
status: "draft",
|
||||
questions: [mockQuestion],
|
||||
welcomeCard: {
|
||||
enabled: true,
|
||||
headline: { default: "Welcome" },
|
||||
html: { default: "" },
|
||||
} as unknown as TSurvey["welcomeCard"],
|
||||
hiddenFields: {
|
||||
enabled: false,
|
||||
},
|
||||
languages: [
|
||||
{
|
||||
default: true,
|
||||
language: {
|
||||
code: "en",
|
||||
} as unknown as TLanguage,
|
||||
} as TSurveyLanguage,
|
||||
{
|
||||
default: false,
|
||||
language: {
|
||||
code: "fr",
|
||||
} as unknown as TLanguage,
|
||||
} as TSurveyLanguage,
|
||||
],
|
||||
endings: [],
|
||||
} as unknown as TSurvey;
|
||||
|
||||
const mockUpdateQuestion = vi.fn();
|
||||
const mockSetSelectedLanguageCode = vi.fn();
|
||||
|
||||
test("should render the headline input field with the correct label and value", () => {
|
||||
render(
|
||||
<DateQuestionForm
|
||||
localSurvey={mockLocalSurvey}
|
||||
question={mockQuestion}
|
||||
questionIdx={0}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
selectedLanguageCode="default"
|
||||
setSelectedLanguageCode={mockSetSelectedLanguageCode}
|
||||
isInvalid={false}
|
||||
locale="en-US"
|
||||
/>
|
||||
);
|
||||
|
||||
// Check if the headline input field is rendered with the correct label and value
|
||||
const headlineInput = screen.getByTestId("question-form-input-headline");
|
||||
expect(headlineInput).toBeInTheDocument();
|
||||
expect(headlineInput).toHaveAttribute("data-label", "environments.surveys.edit.question*");
|
||||
expect(headlineInput).toHaveAttribute("data-value", "Select a date");
|
||||
});
|
||||
|
||||
test("should display the 'Add Description' button when the question object has an undefined subheader property", async () => {
|
||||
// Reset mocks to ensure clean state
|
||||
mockUpdateQuestion.mockReset();
|
||||
|
||||
// Set up mocks for this specific test
|
||||
extractLanguageCodesMock.mockReturnValueOnce(["default", "en", "fr"]);
|
||||
createI18nStringMock.mockReturnValueOnce({
|
||||
default: "",
|
||||
en: "",
|
||||
fr: "",
|
||||
});
|
||||
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<DateQuestionForm
|
||||
localSurvey={mockLocalSurvey}
|
||||
question={mockQuestion}
|
||||
questionIdx={0}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
selectedLanguageCode="default"
|
||||
setSelectedLanguageCode={mockSetSelectedLanguageCode}
|
||||
isInvalid={false}
|
||||
locale="en-US"
|
||||
/>
|
||||
);
|
||||
|
||||
// Check if the 'Add Description' button is rendered
|
||||
const addDescriptionButton = screen.getByTestId("add-description-button");
|
||||
expect(addDescriptionButton).toBeInTheDocument();
|
||||
expect(addDescriptionButton).toHaveTextContent("environments.surveys.edit.add_description");
|
||||
|
||||
// Check if the button has the correct properties
|
||||
expect(addDescriptionButton).toHaveAttribute("data-size", "sm");
|
||||
expect(addDescriptionButton).toHaveAttribute("data-variant", "secondary");
|
||||
expect(addDescriptionButton).toHaveAttribute("type", "button");
|
||||
|
||||
// Check if the PlusIcon is rendered inside the button
|
||||
const plusIcon = screen.getByTestId("plus-icon");
|
||||
expect(plusIcon).toBeInTheDocument();
|
||||
|
||||
// Click the button and verify that updateQuestion is called with the correct parameters
|
||||
await user.click(addDescriptionButton);
|
||||
|
||||
// Verify the mock was called correctly
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledTimes(1);
|
||||
// Use a more flexible assertion that doesn't rely on exact structure matching
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledWith(
|
||||
0,
|
||||
expect.objectContaining({
|
||||
subheader: expect.anything(),
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
test("should handle empty language configuration when adding a subheader", async () => {
|
||||
// Create a survey with empty languages array
|
||||
const mockLocalSurveyWithEmptyLanguages = {
|
||||
id: "survey1",
|
||||
environmentId: "env1",
|
||||
name: "Test Survey",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
status: "draft",
|
||||
questions: [mockQuestion],
|
||||
welcomeCard: {
|
||||
enabled: true,
|
||||
headline: { default: "Welcome" },
|
||||
html: { default: "" },
|
||||
} as unknown as TSurvey["welcomeCard"],
|
||||
hiddenFields: {
|
||||
enabled: false,
|
||||
},
|
||||
languages: [], // Empty languages array
|
||||
endings: [],
|
||||
} as unknown as TSurvey;
|
||||
|
||||
// Set up the mock to return an empty array when extractLanguageCodes is called with empty languages
|
||||
extractLanguageCodesMock.mockReturnValueOnce([]);
|
||||
|
||||
// Set up createI18nString mock to return an empty i18n object
|
||||
createI18nStringMock.mockReturnValueOnce({ default: "" });
|
||||
|
||||
render(
|
||||
<DateQuestionForm
|
||||
localSurvey={mockLocalSurveyWithEmptyLanguages}
|
||||
question={mockQuestion}
|
||||
questionIdx={0}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
selectedLanguageCode="default"
|
||||
setSelectedLanguageCode={mockSetSelectedLanguageCode}
|
||||
isInvalid={false}
|
||||
locale="en-US"
|
||||
/>
|
||||
);
|
||||
|
||||
// Verify the "Add Description" button is rendered since subheader is undefined
|
||||
const addDescriptionButton = screen.getByTestId("add-description-button");
|
||||
expect(addDescriptionButton).toBeInTheDocument();
|
||||
expect(addDescriptionButton).toHaveTextContent("environments.surveys.edit.add_description");
|
||||
|
||||
// Click the "Add Description" button
|
||||
const user = userEvent.setup();
|
||||
await user.click(addDescriptionButton);
|
||||
|
||||
// Verify extractLanguageCodes was called with the empty languages array
|
||||
expect(extractLanguageCodesMock).toHaveBeenCalledWith([]);
|
||||
|
||||
// Verify createI18nString was called with empty string and empty array
|
||||
expect(createI18nStringMock).toHaveBeenCalledWith("", []);
|
||||
|
||||
// Verify updateQuestion was called with the correct parameters
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledWith(0, {
|
||||
subheader: { default: "" },
|
||||
});
|
||||
});
|
||||
|
||||
test("should handle malformed language configuration when adding a subheader", async () => {
|
||||
// Create a survey with malformed languages array (missing required properties)
|
||||
const mockLocalSurveyWithMalformedLanguages: TSurvey = {
|
||||
id: "survey1",
|
||||
environmentId: "env1",
|
||||
name: "Test Survey",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
status: "draft",
|
||||
questions: [mockQuestion],
|
||||
welcomeCard: {
|
||||
enabled: true,
|
||||
headline: { default: "Welcome" },
|
||||
html: { default: "" },
|
||||
} as unknown as TSurvey["welcomeCard"],
|
||||
hiddenFields: {
|
||||
enabled: false,
|
||||
},
|
||||
// @ts-ignore - Intentionally malformed for testing
|
||||
languages: [{ default: true }], // Missing language object
|
||||
endings: [],
|
||||
};
|
||||
|
||||
// Set up the mock to return a fallback array when extractLanguageCodes is called with malformed languages
|
||||
extractLanguageCodesMock.mockReturnValueOnce(["default"]);
|
||||
|
||||
// Set up createI18nString mock to return an i18n object with default language
|
||||
createI18nStringMock.mockReturnValueOnce({ default: "" });
|
||||
|
||||
render(
|
||||
<DateQuestionForm
|
||||
localSurvey={mockLocalSurveyWithMalformedLanguages}
|
||||
question={mockQuestion}
|
||||
questionIdx={0}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
selectedLanguageCode="default"
|
||||
setSelectedLanguageCode={mockSetSelectedLanguageCode}
|
||||
isInvalid={false}
|
||||
locale="en-US"
|
||||
/>
|
||||
);
|
||||
|
||||
// Verify the "Add Description" button is rendered
|
||||
const addDescriptionButton = screen.getByTestId("add-description-button");
|
||||
expect(addDescriptionButton).toBeInTheDocument();
|
||||
|
||||
// Click the "Add Description" button
|
||||
const user = userEvent.setup();
|
||||
await user.click(addDescriptionButton);
|
||||
|
||||
// Verify extractLanguageCodes was called with the malformed languages array
|
||||
expect(extractLanguageCodesMock).toHaveBeenCalledWith([{ default: true }]);
|
||||
|
||||
// Verify createI18nString was called with empty string and the extracted language codes
|
||||
expect(createI18nStringMock).toHaveBeenCalledWith("", ["default"]);
|
||||
|
||||
// Verify updateQuestion was called with the correct parameters
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledWith(0, {
|
||||
subheader: { default: "" },
|
||||
});
|
||||
});
|
||||
|
||||
test("should handle null language configuration when adding a subheader", async () => {
|
||||
// Create a survey with null languages property
|
||||
const mockLocalSurveyWithNullLanguages: TSurvey = {
|
||||
id: "survey1",
|
||||
environmentId: "env1",
|
||||
name: "Test Survey",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
status: "draft",
|
||||
questions: [mockQuestion],
|
||||
welcomeCard: {
|
||||
enabled: true,
|
||||
headline: { default: "Welcome" },
|
||||
html: { default: "" },
|
||||
} as unknown as TSurvey["welcomeCard"],
|
||||
hiddenFields: {
|
||||
enabled: false,
|
||||
},
|
||||
// @ts-ignore - Intentionally set to null for testing
|
||||
languages: null,
|
||||
endings: [],
|
||||
};
|
||||
|
||||
// Set up the mock to return an empty array when extractLanguageCodes is called with null
|
||||
extractLanguageCodesMock.mockReturnValueOnce([]);
|
||||
|
||||
// Set up createI18nString mock to return an empty i18n object
|
||||
createI18nStringMock.mockReturnValueOnce({ default: "" });
|
||||
|
||||
render(
|
||||
<DateQuestionForm
|
||||
localSurvey={mockLocalSurveyWithNullLanguages}
|
||||
question={mockQuestion}
|
||||
questionIdx={0}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
selectedLanguageCode="default"
|
||||
setSelectedLanguageCode={mockSetSelectedLanguageCode}
|
||||
isInvalid={false}
|
||||
locale="en-US"
|
||||
/>
|
||||
);
|
||||
|
||||
// Verify the "Add Description" button is rendered
|
||||
const addDescriptionButton = screen.getByTestId("add-description-button");
|
||||
expect(addDescriptionButton).toBeInTheDocument();
|
||||
|
||||
// Click the "Add Description" button
|
||||
const user = userEvent.setup();
|
||||
await user.click(addDescriptionButton);
|
||||
|
||||
// Verify extractLanguageCodes was called with null
|
||||
expect(extractLanguageCodesMock).toHaveBeenCalledWith(null);
|
||||
|
||||
// Verify createI18nString was called with empty string and empty array
|
||||
expect(createI18nStringMock).toHaveBeenCalledWith("", []);
|
||||
|
||||
// Verify updateQuestion was called with the correct parameters
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledWith(0, {
|
||||
subheader: { default: "" },
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -17,7 +17,6 @@ interface IDateQuestionFormProps {
|
||||
question: TSurveyDateQuestion;
|
||||
questionIdx: number;
|
||||
updateQuestion: (questionIdx: number, updatedAttributes: Partial<TSurveyDateQuestion>) => void;
|
||||
lastQuestion: boolean;
|
||||
selectedLanguageCode: string;
|
||||
setSelectedLanguageCode: (language: string) => void;
|
||||
isInvalid: boolean;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { createI18nString } from "@/lib/i18n/utils";
|
||||
import { render } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { beforeEach, describe, expect, test, vi } from "vitest";
|
||||
import { TSurvey, TSurveyEndScreenCard, TSurveyLanguage } from "@formbricks/types/surveys/types";
|
||||
import { TUserLocale } from "@formbricks/types/user";
|
||||
import { EndScreenForm } from "./end-screen-form";
|
||||
@@ -114,7 +114,7 @@ describe("EndScreenForm", () => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("renders add description button when subheader is undefined", async () => {
|
||||
test("renders add description button when subheader is undefined", async () => {
|
||||
const propsWithoutSubheader = {
|
||||
...defaultProps,
|
||||
endingCard: {
|
||||
@@ -141,7 +141,7 @@ describe("EndScreenForm", () => {
|
||||
}
|
||||
});
|
||||
|
||||
it("renders subheader input when subheader is defined", () => {
|
||||
test("renders subheader input when subheader is defined", () => {
|
||||
const propsWithSubheader = {
|
||||
...defaultProps,
|
||||
endingCard: {
|
||||
@@ -157,7 +157,7 @@ describe("EndScreenForm", () => {
|
||||
expect(subheaderLabel).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("toggles CTA button visibility", async () => {
|
||||
test("toggles CTA button visibility", async () => {
|
||||
const { container } = render(<EndScreenForm {...defaultProps} />);
|
||||
|
||||
// Use ID selector instead of role to get the specific switch we need
|
||||
@@ -181,7 +181,7 @@ describe("EndScreenForm", () => {
|
||||
}
|
||||
});
|
||||
|
||||
it("shows CTA options when enabled", async () => {
|
||||
test("shows CTA options when enabled", async () => {
|
||||
const propsWithCTA = {
|
||||
...defaultProps,
|
||||
endingCard: {
|
||||
@@ -202,7 +202,7 @@ describe("EndScreenForm", () => {
|
||||
expect(buttonLinkField).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("updates buttonLink when input changes", async () => {
|
||||
test("updates buttonLink when input changes", async () => {
|
||||
const propsWithCTA = {
|
||||
...defaultProps,
|
||||
endingCard: {
|
||||
@@ -226,7 +226,7 @@ describe("EndScreenForm", () => {
|
||||
}
|
||||
});
|
||||
|
||||
it("handles focus on buttonLink input when onAddFallback is triggered", async () => {
|
||||
test("handles focus on buttonLink input when onAddFallback is triggered", async () => {
|
||||
const propsWithCTA = {
|
||||
...defaultProps,
|
||||
endingCard: {
|
||||
@@ -252,7 +252,7 @@ describe("EndScreenForm", () => {
|
||||
}
|
||||
});
|
||||
|
||||
it("initializes with showEndingCardCTA true when buttonLabel or buttonLink exists", () => {
|
||||
test("initializes with showEndingCardCTA true when buttonLabel or buttonLink exists", () => {
|
||||
const propsWithCTA = {
|
||||
...defaultProps,
|
||||
endingCard: {
|
||||
|
||||
@@ -0,0 +1,312 @@
|
||||
import { createI18nString } from "@/lib/i18n/utils";
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
|
||||
import { TSurveyFileUploadQuestion, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
|
||||
import { FileUploadQuestionForm } from "./file-upload-question-form";
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock("@/modules/utils/hooks/useGetBillingInfo", () => ({
|
||||
useGetBillingInfo: () => ({
|
||||
billingInfo: { plan: "free" },
|
||||
error: null,
|
||||
isLoading: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@formkit/auto-animate/react", () => ({
|
||||
useAutoAnimate: () => [null],
|
||||
}));
|
||||
|
||||
vi.mock("react-hot-toast", () => ({
|
||||
toast: {
|
||||
error: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock QuestionFormInput component to verify it receives correct props
|
||||
vi.mock("@/modules/survey/components/question-form-input", () => ({
|
||||
QuestionFormInput: ({
|
||||
id,
|
||||
value,
|
||||
label,
|
||||
localSurvey,
|
||||
questionIdx,
|
||||
updateQuestion,
|
||||
selectedLanguageCode,
|
||||
setSelectedLanguageCode,
|
||||
isInvalid,
|
||||
locale,
|
||||
}: any) => (
|
||||
<div data-testid="question-form-input">
|
||||
<label htmlFor={id}>{label}</label>
|
||||
<input
|
||||
data-testid={`input-${id}`}
|
||||
id={id}
|
||||
value={value?.default ?? ""}
|
||||
aria-invalid={isInvalid ? "true" : "false"}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock UI components
|
||||
vi.mock("@/modules/ui/components/advanced-option-toggle", () => ({
|
||||
AdvancedOptionToggle: ({ children, isChecked, title, description, htmlId, onToggle }: any) => (
|
||||
<div
|
||||
data-testid={htmlId ? `advanced-option-${htmlId}` : "advanced-option-toggle"}
|
||||
data-checked={isChecked}>
|
||||
<div data-testid="toggle-title">{title}</div>
|
||||
<div data-testid="toggle-description">{description}</div>
|
||||
{htmlId && (
|
||||
<button data-testid={`toggle-${htmlId}`} onClick={() => onToggle?.(!isChecked)}>
|
||||
{title}
|
||||
</button>
|
||||
)}
|
||||
{isChecked && (htmlId ? <div data-testid={`toggle-content-${htmlId}`}>{children}</div> : children)}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/ui/components/button", () => ({
|
||||
Button: ({ children, onClick, size, variant, type }: any) => (
|
||||
<button data-testid="button" data-size={size} data-variant={variant} data-type={type} onClick={onClick}>
|
||||
{children}
|
||||
</button>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/modules/ui/components/input", () => ({
|
||||
Input: ({ id, value, onChange, placeholder, className, type }: any) => (
|
||||
<input
|
||||
data-testid={id ?? "input"}
|
||||
id={id}
|
||||
value={value ?? ""}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
className={className}
|
||||
type={type}
|
||||
/>
|
||||
),
|
||||
}));
|
||||
|
||||
describe("FileUploadQuestionForm", () => {
|
||||
const mockUpdateQuestion = vi.fn();
|
||||
const mockSetSelectedLanguageCode = vi.fn();
|
||||
|
||||
// Create mock data
|
||||
const mockQuestion: TSurveyFileUploadQuestion = {
|
||||
id: "question_1",
|
||||
type: TSurveyQuestionTypeEnum.FileUpload,
|
||||
headline: createI18nString("Upload your file", ["en", "fr"]),
|
||||
required: true,
|
||||
allowMultipleFiles: false,
|
||||
allowedFileExtensions: ["pdf", "jpg"],
|
||||
};
|
||||
|
||||
const mockSurvey = {
|
||||
id: "survey_123",
|
||||
environmentId: "env_123",
|
||||
questions: [mockQuestion],
|
||||
languages: [
|
||||
{
|
||||
id: "lan_123",
|
||||
default: true,
|
||||
enabled: true,
|
||||
language: {
|
||||
id: "en",
|
||||
code: "en",
|
||||
name: "English",
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
alias: null,
|
||||
projectId: "project_123",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
test("renders the headline input field with the correct label and value", () => {
|
||||
render(
|
||||
<FileUploadQuestionForm
|
||||
localSurvey={mockSurvey as any}
|
||||
question={mockQuestion}
|
||||
questionIdx={0}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
selectedLanguageCode="en"
|
||||
setSelectedLanguageCode={mockSetSelectedLanguageCode}
|
||||
isInvalid={false}
|
||||
isFormbricksCloud={false}
|
||||
locale="en-US"
|
||||
project={{} as any}
|
||||
/>
|
||||
);
|
||||
|
||||
// Check if QuestionFormInput is rendered with correct props
|
||||
const questionFormInput = screen.getByTestId("question-form-input");
|
||||
expect(questionFormInput).toBeInTheDocument();
|
||||
|
||||
// Check if the label is rendered correctly
|
||||
const label = screen.getByText("environments.surveys.edit.question*");
|
||||
expect(label).toBeInTheDocument();
|
||||
|
||||
// Check if the input field is rendered with the correct value
|
||||
const input = screen.getByTestId("input-headline");
|
||||
expect(input).toBeInTheDocument();
|
||||
expect(input).toHaveValue("Upload your file");
|
||||
});
|
||||
|
||||
test("handles file extensions with uppercase characters and leading dots", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<FileUploadQuestionForm
|
||||
localSurvey={mockSurvey as any}
|
||||
question={mockQuestion} // Starts with ["pdf", "jpg"]
|
||||
questionIdx={0}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
selectedLanguageCode="en"
|
||||
setSelectedLanguageCode={mockSetSelectedLanguageCode}
|
||||
isInvalid={false}
|
||||
isFormbricksCloud={false}
|
||||
locale="en-US"
|
||||
project={{} as any}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find the input field for adding extensions
|
||||
const extensionInput = screen.getByTestId("input");
|
||||
|
||||
// Test with uppercase extension "PDF" -> should be added as "pdf"
|
||||
await user.type(extensionInput, "PDF");
|
||||
|
||||
// Find and click the "Allow file type" button
|
||||
const buttons = screen.getAllByTestId("button");
|
||||
const addButton = buttons.find(
|
||||
(button) => button.textContent === "environments.surveys.edit.allow_file_type"
|
||||
);
|
||||
expect(addButton).toBeTruthy();
|
||||
await user.click(addButton!);
|
||||
|
||||
// Verify updateQuestion was NOT called because "pdf" (lowercase of "PDF") already exists
|
||||
expect(mockUpdateQuestion).not.toHaveBeenCalled();
|
||||
// Verify toast error for duplicate
|
||||
expect(toast.error).toHaveBeenCalledWith("environments.surveys.edit.this_extension_is_already_added");
|
||||
|
||||
// Clear mocks for next step
|
||||
vi.mocked(mockUpdateQuestion).mockClear();
|
||||
vi.mocked(toast.error).mockClear();
|
||||
|
||||
// Test with a leading dot and uppercase ".PNG" -> should be added as "png"
|
||||
await user.clear(extensionInput);
|
||||
await user.type(extensionInput, ".PNG");
|
||||
await user.click(addButton!);
|
||||
|
||||
// Verify updateQuestion was called with the new extension added (dot removed, lowercase)
|
||||
expect(mockUpdateQuestion).toHaveBeenCalledWith(0, {
|
||||
allowedFileExtensions: ["pdf", "jpg", "png"], // Should add "png"
|
||||
});
|
||||
// Verify no error toast was shown
|
||||
expect(toast.error).not.toHaveBeenCalled();
|
||||
|
||||
// Clear mocks for next step
|
||||
vi.mocked(mockUpdateQuestion).mockClear();
|
||||
vi.mocked(toast.error).mockClear();
|
||||
|
||||
// Test adding an existing extension (lowercase) "jpg"
|
||||
await user.clear(extensionInput);
|
||||
await user.type(extensionInput, "jpg");
|
||||
await user.click(addButton!);
|
||||
|
||||
// Verify updateQuestion was NOT called again because "jpg" already exists
|
||||
expect(mockUpdateQuestion).not.toHaveBeenCalled();
|
||||
|
||||
// Verify that the error toast WAS shown for the duplicate
|
||||
expect(toast.error).toHaveBeenCalledWith("environments.surveys.edit.this_extension_is_already_added");
|
||||
});
|
||||
|
||||
test("shows an error toast when trying to add an empty extension", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<FileUploadQuestionForm
|
||||
localSurvey={mockSurvey as any}
|
||||
question={mockQuestion} // Starts with ["pdf", "jpg"]
|
||||
questionIdx={0}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
selectedLanguageCode="en"
|
||||
setSelectedLanguageCode={mockSetSelectedLanguageCode}
|
||||
isInvalid={false}
|
||||
isFormbricksCloud={false}
|
||||
locale="en-US"
|
||||
project={{} as any}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find the input field for adding extensions
|
||||
const extensionInput = screen.getByTestId("input");
|
||||
expect(extensionInput).toHaveValue(""); // Ensure it's initially empty
|
||||
|
||||
// Find and click the "Allow file type" button
|
||||
const buttons = screen.getAllByTestId("button");
|
||||
const addButton = buttons.find(
|
||||
(button) => button.textContent === "environments.surveys.edit.allow_file_type"
|
||||
);
|
||||
expect(addButton).toBeTruthy();
|
||||
await user.click(addButton!);
|
||||
|
||||
// Verify updateQuestion was NOT called
|
||||
expect(mockUpdateQuestion).not.toHaveBeenCalled();
|
||||
|
||||
// Verify that the error toast WAS shown for the empty input
|
||||
expect(toast.error).toHaveBeenCalledWith("environments.surveys.edit.please_enter_a_file_extension");
|
||||
});
|
||||
|
||||
test("shows an error toast when trying to add an unsupported file extension", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<FileUploadQuestionForm
|
||||
localSurvey={mockSurvey as any}
|
||||
question={mockQuestion} // Starts with ["pdf", "jpg"]
|
||||
questionIdx={0}
|
||||
updateQuestion={mockUpdateQuestion}
|
||||
selectedLanguageCode="en"
|
||||
setSelectedLanguageCode={mockSetSelectedLanguageCode}
|
||||
isInvalid={false}
|
||||
isFormbricksCloud={false}
|
||||
locale="en-US"
|
||||
project={{} as any}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find the input field for adding extensions
|
||||
const extensionInput = screen.getByTestId("input");
|
||||
|
||||
// Type an unsupported extension
|
||||
await user.type(extensionInput, "exe");
|
||||
|
||||
// Find and click the "Allow file type" button
|
||||
const buttons = screen.getAllByTestId("button");
|
||||
const addButton = buttons.find(
|
||||
(button) => button.textContent === "environments.surveys.edit.allow_file_type"
|
||||
);
|
||||
expect(addButton).toBeTruthy();
|
||||
await user.click(addButton!);
|
||||
|
||||
// Verify updateQuestion was NOT called
|
||||
expect(mockUpdateQuestion).not.toHaveBeenCalled();
|
||||
|
||||
// Verify that the error toast WAS shown for the unsupported type
|
||||
expect(toast.error).toHaveBeenCalledWith("environments.surveys.edit.this_file_type_is_not_supported");
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { extractLanguageCodes } from "@/lib/i18n/utils";
|
||||
import { createI18nString } from "@/lib/i18n/utils";
|
||||
import { createI18nString, extractLanguageCodes } from "@/lib/i18n/utils";
|
||||
import { QuestionFormInput } from "@/modules/survey/components/question-form-input";
|
||||
import { AdvancedOptionToggle } from "@/modules/ui/components/advanced-option-toggle";
|
||||
import { Button } from "@/modules/ui/components/button";
|
||||
@@ -24,7 +23,6 @@ interface FileUploadFormProps {
|
||||
question: TSurveyFileUploadQuestion;
|
||||
questionIdx: number;
|
||||
updateQuestion: (questionIdx: number, updatedAttributes: Partial<TSurveyFileUploadQuestion>) => void;
|
||||
lastQuestion: boolean;
|
||||
selectedLanguageCode: string;
|
||||
setSelectedLanguageCode: (languageCode: string) => void;
|
||||
isInvalid: boolean;
|
||||
@@ -62,37 +60,39 @@ export const FileUploadQuestionForm = ({
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
let modifiedExtension = extension.trim() as TAllowedFileExtension;
|
||||
let rawExtension = extension.trim();
|
||||
|
||||
// Remove the dot at the start if it exists
|
||||
if (modifiedExtension.startsWith(".")) {
|
||||
modifiedExtension = modifiedExtension.substring(1) as TAllowedFileExtension;
|
||||
if (rawExtension.startsWith(".")) {
|
||||
rawExtension = rawExtension.substring(1);
|
||||
}
|
||||
|
||||
if (!modifiedExtension) {
|
||||
if (!rawExtension) {
|
||||
toast.error(t("environments.surveys.edit.please_enter_a_file_extension"));
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert to lowercase before validation and adding
|
||||
const modifiedExtension = rawExtension.toLowerCase() as TAllowedFileExtension;
|
||||
|
||||
const parsedExtensionResult = ZAllowedFileExtension.safeParse(modifiedExtension);
|
||||
|
||||
if (!parsedExtensionResult.success) {
|
||||
// This error should now be less likely unless the extension itself is invalid (e.g., "exe")
|
||||
toast.error(t("environments.surveys.edit.this_file_type_is_not_supported"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (question.allowedFileExtensions) {
|
||||
if (!question.allowedFileExtensions.includes(modifiedExtension as TAllowedFileExtension)) {
|
||||
updateQuestion(questionIdx, {
|
||||
allowedFileExtensions: [...question.allowedFileExtensions, modifiedExtension],
|
||||
});
|
||||
setExtension("");
|
||||
} else {
|
||||
toast.error(t("environments.surveys.edit.this_extension_is_already_added"));
|
||||
}
|
||||
const currentExtensions = question.allowedFileExtensions || [];
|
||||
|
||||
// Check if the lowercase extension already exists
|
||||
if (!currentExtensions.includes(modifiedExtension)) {
|
||||
updateQuestion(questionIdx, {
|
||||
allowedFileExtensions: [...currentExtensions, modifiedExtension],
|
||||
});
|
||||
setExtension(""); // Clear the input field
|
||||
} else {
|
||||
updateQuestion(questionIdx, { allowedFileExtensions: [modifiedExtension] });
|
||||
setExtension("");
|
||||
toast.error(t("environments.surveys.edit.this_extension_is_already_added"));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -101,7 +101,10 @@ export const FileUploadQuestionForm = ({
|
||||
if (question.allowedFileExtensions) {
|
||||
const updatedExtensions = [...question?.allowedFileExtensions];
|
||||
updatedExtensions.splice(index, 1);
|
||||
updateQuestion(questionIdx, { allowedFileExtensions: updatedExtensions });
|
||||
// Ensure array is set to undefined if empty, matching toggle behavior
|
||||
updateQuestion(questionIdx, {
|
||||
allowedFileExtensions: updatedExtensions.length > 0 ? updatedExtensions : undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -246,18 +249,19 @@ export const FileUploadQuestionForm = ({
|
||||
customContainerClass="p-0">
|
||||
<div className="p-4">
|
||||
<div className="flex flex-row flex-wrap gap-2">
|
||||
{question.allowedFileExtensions &&
|
||||
question.allowedFileExtensions.map((item, index) => (
|
||||
<div className="mb-2 flex h-8 items-center space-x-2 rounded-full bg-slate-200 px-2">
|
||||
<p className="text-sm text-slate-800">{item}</p>
|
||||
<Button
|
||||
className="inline-flex px-0"
|
||||
variant="ghost"
|
||||
onClick={(e) => removeExtension(e, index)}>
|
||||
<XCircleIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
{question.allowedFileExtensions?.map((item, index) => (
|
||||
<div
|
||||
key={item}
|
||||
className="mb-2 flex h-8 items-center space-x-2 rounded-full bg-slate-200 px-2">
|
||||
<p className="text-sm text-slate-800">{item}</p>
|
||||
<Button
|
||||
className="inline-flex px-0"
|
||||
variant="ghost"
|
||||
onClick={(e) => removeExtension(e, index)}>
|
||||
<XCircleIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Input
|
||||
|
||||
@@ -0,0 +1,424 @@
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { FormProvider, UseFormReturn, useForm } from "react-hook-form";
|
||||
import { afterEach, describe, expect, test, vi } from "vitest";
|
||||
import { TProjectStyling } from "@formbricks/types/project";
|
||||
import { TSurveyStyling } from "@formbricks/types/surveys/types";
|
||||
import { FormStylingSettings } from "./form-styling-settings";
|
||||
|
||||
// Mock window.matchMedia - required for useAutoAnimate
|
||||
Object.defineProperty(window, "matchMedia", {
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation((query) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
})),
|
||||
});
|
||||
|
||||
// Mock @formkit/auto-animate - simplify implementation to avoid matchMedia issues
|
||||
vi.mock("@formkit/auto-animate/react", () => ({
|
||||
useAutoAnimate: () => [null],
|
||||
}));
|
||||
|
||||
// Mock constants
|
||||
vi.mock("@/lib/constants", () => ({
|
||||
IS_FORMBRICKS_CLOUD: false,
|
||||
ENCRYPTION_KEY: "test",
|
||||
}));
|
||||
|
||||
// Mock mixColor function
|
||||
vi.mock("@/lib/utils/colors", () => ({
|
||||
//@ts-ignore // Ignore TypeScript error for the mock
|
||||
mixColor: (color1: string, color2: string, weight: number) => "#123456",
|
||||
}));
|
||||
|
||||
describe("FormStylingSettings Component", () => {
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
test("should render collapsible content when open is true", () => {
|
||||
// Create a form with useForm hook and provide default values
|
||||
const FormWithProvider = () => {
|
||||
const methods = useForm({
|
||||
defaultValues: {
|
||||
brandColor: { light: "#ff0000" },
|
||||
background: { bg: "#ffffff", bgType: "color" },
|
||||
highlightBorderColor: { light: "#aaaaaa" },
|
||||
questionColor: { light: "#000000" },
|
||||
inputColor: { light: "#ffffff" },
|
||||
inputBorderColor: { light: "#cccccc" },
|
||||
cardBackgroundColor: { light: "#ffffff" },
|
||||
cardBorderColor: { light: "#eeeeee" },
|
||||
cardShadowColor: { light: "#dddddd" },
|
||||
},
|
||||
}) as UseFormReturn<TProjectStyling | TSurveyStyling>;
|
||||
|
||||
const defaultProps = {
|
||||
open: true,
|
||||
setOpen: vi.fn(),
|
||||
isSettingsPage: false,
|
||||
disabled: false,
|
||||
form: methods,
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<FormStylingSettings {...defaultProps} />
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
render(<FormWithProvider />);
|
||||
|
||||
// Check that the component renders the header
|
||||
expect(screen.getByText("environments.surveys.edit.form_styling")).toBeInTheDocument();
|
||||
|
||||
// Check for elements that should only be visible when the collapsible is open
|
||||
expect(screen.getByText("environments.surveys.edit.brand_color")).toBeInTheDocument();
|
||||
expect(screen.getByText("environments.surveys.edit.question_color")).toBeInTheDocument();
|
||||
expect(screen.getByText("environments.surveys.edit.input_color")).toBeInTheDocument();
|
||||
expect(screen.getByText("environments.surveys.edit.input_border_color")).toBeInTheDocument();
|
||||
|
||||
// Check for the suggest colors button which should be visible when open
|
||||
expect(screen.getByText("environments.surveys.edit.suggest_colors")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should disable collapsible trigger when disabled is true", async () => {
|
||||
const user = userEvent.setup();
|
||||
const setOpenMock = vi.fn();
|
||||
|
||||
// Create a form with useForm hook and provide default values
|
||||
const FormWithProvider = () => {
|
||||
const methods = useForm({
|
||||
defaultValues: {
|
||||
brandColor: { light: "#ff0000" },
|
||||
background: { bg: "#ffffff", bgType: "color" },
|
||||
highlightBorderColor: { light: "#aaaaaa" },
|
||||
questionColor: { light: "#000000" },
|
||||
inputColor: { light: "#ffffff" },
|
||||
inputBorderColor: { light: "#cccccc" },
|
||||
cardBackgroundColor: { light: "#ffffff" },
|
||||
cardBorderColor: { light: "#eeeeee" },
|
||||
cardShadowColor: { light: "#dddddd" },
|
||||
},
|
||||
}) as UseFormReturn<TProjectStyling | TSurveyStyling>;
|
||||
|
||||
const props = {
|
||||
open: false,
|
||||
setOpen: setOpenMock,
|
||||
isSettingsPage: false,
|
||||
disabled: true, // Set disabled to true for this test
|
||||
form: methods,
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<FormStylingSettings {...props} />
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const { container } = render(<FormWithProvider />);
|
||||
|
||||
// Find the collapsible trigger element
|
||||
const triggerElement = container.querySelector('[class*="cursor-not-allowed opacity-60"]');
|
||||
expect(triggerElement).toBeInTheDocument();
|
||||
|
||||
// Verify that the trigger has the disabled attribute
|
||||
const collapsibleTrigger = container.querySelector('[disabled=""]');
|
||||
expect(collapsibleTrigger).toBeInTheDocument();
|
||||
|
||||
// Check that the correct CSS classes are applied for the disabled state
|
||||
expect(triggerElement).toHaveClass("cursor-not-allowed");
|
||||
expect(triggerElement).toHaveClass("opacity-60");
|
||||
expect(triggerElement).toHaveClass("hover:bg-white");
|
||||
|
||||
// Try to click the trigger and verify that setOpen is not called
|
||||
if (triggerElement) {
|
||||
await user.click(triggerElement);
|
||||
expect(setOpenMock).not.toHaveBeenCalled();
|
||||
}
|
||||
|
||||
// Verify the component still renders the main content
|
||||
expect(screen.getByText("environments.surveys.edit.form_styling")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("environments.surveys.edit.style_the_question_texts_descriptions_and_input_fields")
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should call setOpen with updated state when collapsible trigger is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const setOpenMock = vi.fn();
|
||||
|
||||
// Create a form with useForm hook and provide default values
|
||||
const FormWithProvider = () => {
|
||||
const methods = useForm({
|
||||
defaultValues: {
|
||||
brandColor: { light: "#ff0000" },
|
||||
background: { bg: "#ffffff", bgType: "color" },
|
||||
highlightBorderColor: { light: "#aaaaaa" },
|
||||
questionColor: { light: "#000000" },
|
||||
inputColor: { light: "#ffffff" },
|
||||
inputBorderColor: { light: "#cccccc" },
|
||||
cardBackgroundColor: { light: "#ffffff" },
|
||||
cardBorderColor: { light: "#eeeeee" },
|
||||
cardShadowColor: { light: "#dddddd" },
|
||||
},
|
||||
}) as UseFormReturn<TProjectStyling | TSurveyStyling>;
|
||||
|
||||
const props = {
|
||||
open: false, // Start with closed state
|
||||
setOpen: setOpenMock,
|
||||
isSettingsPage: false,
|
||||
disabled: false,
|
||||
form: methods,
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<FormStylingSettings {...props} />
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
render(<FormWithProvider />);
|
||||
|
||||
// Find the collapsible trigger element
|
||||
const triggerElement = screen.getByText("environments.surveys.edit.form_styling").closest("div");
|
||||
expect(triggerElement).toBeInTheDocument();
|
||||
|
||||
// Click the trigger element
|
||||
await user.click(triggerElement!);
|
||||
|
||||
// Verify that setOpen was called with true (to open the collapsible)
|
||||
expect(setOpenMock).toHaveBeenCalledWith(true);
|
||||
|
||||
// Test closing the collapsible
|
||||
// First, we need to re-render with open=true
|
||||
cleanup();
|
||||
|
||||
const FormWithProviderOpen = () => {
|
||||
const methods = useForm({
|
||||
defaultValues: {
|
||||
brandColor: { light: "#ff0000" },
|
||||
background: { bg: "#ffffff", bgType: "color" },
|
||||
highlightBorderColor: { light: "#aaaaaa" },
|
||||
questionColor: { light: "#000000" },
|
||||
inputColor: { light: "#ffffff" },
|
||||
inputBorderColor: { light: "#cccccc" },
|
||||
cardBackgroundColor: { light: "#ffffff" },
|
||||
cardBorderColor: { light: "#eeeeee" },
|
||||
cardShadowColor: { light: "#dddddd" },
|
||||
},
|
||||
}) as UseFormReturn<TProjectStyling | TSurveyStyling>;
|
||||
|
||||
const props = {
|
||||
open: true, // Start with open state
|
||||
setOpen: setOpenMock,
|
||||
isSettingsPage: false,
|
||||
disabled: false,
|
||||
form: methods,
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<FormStylingSettings {...props} />
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
render(<FormWithProviderOpen />);
|
||||
|
||||
// Reset mock to clear previous calls
|
||||
setOpenMock.mockReset();
|
||||
|
||||
// Find and click the trigger element again
|
||||
const openTriggerElement = screen.getByText("environments.surveys.edit.form_styling").closest("div");
|
||||
await user.click(openTriggerElement!);
|
||||
|
||||
// Verify that setOpen was called with false (to close the collapsible)
|
||||
expect(setOpenMock).toHaveBeenCalledWith(false);
|
||||
});
|
||||
|
||||
test("should render correct text and descriptions using useTranslate", () => {
|
||||
// Create a form with useForm hook and provide default values
|
||||
const FormWithProvider = () => {
|
||||
// NOSONAR // No need to check this mock
|
||||
const methods = useForm({
|
||||
defaultValues: {
|
||||
brandColor: { light: "#ff0000" },
|
||||
background: { bg: "#ffffff", bgType: "color" },
|
||||
highlightBorderColor: { light: "#aaaaaa" },
|
||||
questionColor: { light: "#000000" },
|
||||
inputColor: { light: "#ffffff" },
|
||||
inputBorderColor: { light: "#cccccc" },
|
||||
cardBackgroundColor: { light: "#ffffff" },
|
||||
cardBorderColor: { light: "#eeeeee" },
|
||||
cardShadowColor: { light: "#dddddd" },
|
||||
},
|
||||
}) as UseFormReturn<TProjectStyling | TSurveyStyling>;
|
||||
|
||||
const defaultProps = {
|
||||
open: true,
|
||||
setOpen: vi.fn(),
|
||||
isSettingsPage: false,
|
||||
disabled: false,
|
||||
form: methods,
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<FormStylingSettings {...defaultProps} />
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
render(<FormWithProvider />);
|
||||
|
||||
// Check that the component renders the header text correctly
|
||||
expect(screen.getByText("environments.surveys.edit.form_styling")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("environments.surveys.edit.style_the_question_texts_descriptions_and_input_fields")
|
||||
).toBeInTheDocument();
|
||||
|
||||
// Check for form field labels and descriptions
|
||||
expect(screen.getByText("environments.surveys.edit.brand_color")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("environments.surveys.edit.change_the_brand_color_of_the_survey")
|
||||
).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText("environments.surveys.edit.question_color")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("environments.surveys.edit.change_the_question_color_of_the_survey")
|
||||
).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText("environments.surveys.edit.input_color")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("environments.surveys.edit.change_the_background_color_of_the_input_fields")
|
||||
).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText("environments.surveys.edit.input_border_color")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("environments.surveys.edit.change_the_border_color_of_the_input_fields")
|
||||
).toBeInTheDocument();
|
||||
|
||||
// Check for the suggest colors button text
|
||||
expect(screen.getByText("environments.surveys.edit.suggest_colors")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should render different text based on isSettingsPage prop", () => {
|
||||
// Create a form with useForm hook and provide default values
|
||||
const FormWithProvider = ({ isSettingsPage = true }) => {
|
||||
const methods = useForm({
|
||||
defaultValues: {
|
||||
brandColor: { light: "#ff0000" },
|
||||
background: { bg: "#ffffff", bgType: "color" },
|
||||
highlightBorderColor: { light: "#aaaaaa" },
|
||||
},
|
||||
}) as UseFormReturn<TProjectStyling | TSurveyStyling>;
|
||||
|
||||
const props = {
|
||||
open: true,
|
||||
setOpen: vi.fn(),
|
||||
isSettingsPage,
|
||||
disabled: false,
|
||||
form: methods,
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<FormStylingSettings {...props} />
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
render(<FormWithProvider isSettingsPage={true} />);
|
||||
|
||||
// Check that the text has the correct CSS classes when isSettingsPage is true
|
||||
const headerTextWithSettingsPage = screen.getByText("environments.surveys.edit.form_styling");
|
||||
expect(headerTextWithSettingsPage).toHaveClass("text-sm");
|
||||
|
||||
const descriptionTextWithSettingsPage = screen.getByText(
|
||||
"environments.surveys.edit.style_the_question_texts_descriptions_and_input_fields"
|
||||
);
|
||||
expect(descriptionTextWithSettingsPage).toHaveClass("text-xs");
|
||||
|
||||
// Re-render with isSettingsPage as false
|
||||
cleanup();
|
||||
render(<FormWithProvider isSettingsPage={false} />);
|
||||
|
||||
// Check that the text has the correct CSS classes when isSettingsPage is false
|
||||
const headerTextWithoutSettingsPage = screen.getByText("environments.surveys.edit.form_styling");
|
||||
expect(headerTextWithoutSettingsPage).toHaveClass("text-base");
|
||||
|
||||
const descriptionTextWithoutSettingsPage = screen.getByText(
|
||||
"environments.surveys.edit.style_the_question_texts_descriptions_and_input_fields"
|
||||
);
|
||||
expect(descriptionTextWithoutSettingsPage).toHaveClass("text-sm");
|
||||
|
||||
// Verify the CheckIcon is shown only when isSettingsPage is false
|
||||
const checkIcon = document.querySelector(".h-7.w-7.rounded-full.border.border-green-300");
|
||||
expect(checkIcon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("should maintain open state but prevent toggling when disabled while open", async () => {
|
||||
const user = userEvent.setup();
|
||||
const setOpenMock = vi.fn();
|
||||
|
||||
// Create a component wrapper that allows us to change props
|
||||
const TestComponent = ({ disabled = false }) => {
|
||||
const methods = useForm({
|
||||
defaultValues: {
|
||||
brandColor: { light: "#ff0000" },
|
||||
background: { bg: "#ffffff", bgType: "color" },
|
||||
highlightBorderColor: { light: "#aaaaaa" },
|
||||
questionColor: { light: "#000000" },
|
||||
inputColor: { light: "#ffffff" },
|
||||
inputBorderColor: { light: "#cccccc" },
|
||||
cardBackgroundColor: { light: "#ffffff" },
|
||||
cardBorderColor: { light: "#eeeeee" },
|
||||
cardShadowColor: { light: "#dddddd" },
|
||||
},
|
||||
}) as UseFormReturn<TProjectStyling | TSurveyStyling>;
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<FormStylingSettings open={true} setOpen={setOpenMock} disabled={disabled} form={methods} />
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
// First render with enabled state
|
||||
const { rerender } = render(<TestComponent disabled={false} />);
|
||||
|
||||
// Verify component is open by checking for content that should be visible when open
|
||||
expect(screen.getByText("environments.surveys.edit.brand_color")).toBeInTheDocument();
|
||||
expect(screen.getByText("environments.surveys.edit.suggest_colors")).toBeInTheDocument();
|
||||
|
||||
// Re-render with disabled state (simulating component becoming disabled while open)
|
||||
rerender(<TestComponent disabled={true} />);
|
||||
|
||||
// Get the collapsible trigger element
|
||||
const triggerElement = screen.getByText("environments.surveys.edit.form_styling").closest("div");
|
||||
expect(triggerElement).toBeInTheDocument();
|
||||
|
||||
// Attempt to click the trigger to close the collapsible
|
||||
if (triggerElement) {
|
||||
await user.click(triggerElement);
|
||||
}
|
||||
|
||||
// Verify the component is still open
|
||||
expect(screen.getByText("environments.surveys.edit.brand_color")).toBeInTheDocument();
|
||||
expect(screen.getByText("environments.surveys.edit.suggest_colors")).toBeInTheDocument();
|
||||
|
||||
// Verify setOpen was not called, confirming the toggle was prevented
|
||||
expect(setOpenMock).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,447 @@
|
||||
import { getDefaultEndingCard } from "@/app/lib/survey-builder";
|
||||
import { Environment } 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 { TLanguage } from "@formbricks/types/project";
|
||||
import { TSegment } from "@formbricks/types/segment";
|
||||
import { TSurvey, TSurveyLanguage } from "@formbricks/types/surveys/types";
|
||||
import { HowToSendCard } from "./how-to-send-card";
|
||||
|
||||
// Mock constants
|
||||
vi.mock("@/lib/constants", () => ({
|
||||
IS_FORMBRICKS_CLOUD: false,
|
||||
ENCRYPTION_KEY: "test",
|
||||
ENTERPRISE_LICENSE_KEY: "test",
|
||||
}));
|
||||
|
||||
// Mock auto-animate
|
||||
vi.mock("@formkit/auto-animate/react", () => ({
|
||||
useAutoAnimate: () => [null],
|
||||
}));
|
||||
|
||||
// Mock getDefaultEndingCard
|
||||
vi.mock("@/app/lib/survey-builder", () => ({
|
||||
getDefaultEndingCard: vi.fn(() => ({
|
||||
id: "test-id",
|
||||
type: "endScreen",
|
||||
headline: "Test Headline",
|
||||
subheader: "Test Subheader",
|
||||
buttonLabel: "Test Button",
|
||||
buttonLink: "https://formbricks.com",
|
||||
})),
|
||||
}));
|
||||
|
||||
describe("HowToSendCard", () => {
|
||||
const mockSetLocalSurvey = vi.fn();
|
||||
|
||||
const mockSurvey: Partial<TSurvey> = {
|
||||
id: "survey-123",
|
||||
type: "app",
|
||||
name: "Test Survey",
|
||||
languages: [
|
||||
{
|
||||
language: { code: "en" } as unknown as TLanguage,
|
||||
} as unknown as TSurveyLanguage,
|
||||
],
|
||||
endings: [],
|
||||
};
|
||||
|
||||
const mockEnvironment: Pick<Environment, "id" | "appSetupCompleted"> = {
|
||||
id: "env-123",
|
||||
appSetupCompleted: true,
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
test("initializes appSetupCompleted state to true when environment.appSetupCompleted is true", async () => {
|
||||
// Create environment with appSetupCompleted set to true
|
||||
const mockEnvironment: Pick<Environment, "id" | "appSetupCompleted"> = {
|
||||
id: "env-123",
|
||||
appSetupCompleted: true,
|
||||
};
|
||||
|
||||
render(
|
||||
<HowToSendCard
|
||||
localSurvey={mockSurvey as TSurvey}
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
environment={mockEnvironment}
|
||||
/>
|
||||
);
|
||||
|
||||
// Open the collapsible to see the content
|
||||
const trigger = screen.getByText("common.survey_type");
|
||||
await userEvent.click(trigger);
|
||||
|
||||
// When appSetupCompleted is true, the alert should not be shown for the "app" option
|
||||
const appOption = screen.getByText("common.website_app_survey");
|
||||
expect(appOption).toBeInTheDocument();
|
||||
|
||||
// The alert should not be present since appSetupCompleted is true
|
||||
const alertElement = screen.queryByText("environments.surveys.edit.formbricks_sdk_is_not_connected");
|
||||
expect(alertElement).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("initializes appSetupCompleted state to false when environment.appSetupCompleted is false", async () => {
|
||||
// Create environment with appSetupCompleted set to false
|
||||
const mockEnvironment: Pick<Environment, "id" | "appSetupCompleted"> = {
|
||||
id: "env-123",
|
||||
appSetupCompleted: false,
|
||||
};
|
||||
|
||||
render(
|
||||
<HowToSendCard
|
||||
localSurvey={mockSurvey as TSurvey}
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
environment={mockEnvironment}
|
||||
/>
|
||||
);
|
||||
|
||||
// Open the collapsible to see the content
|
||||
const trigger = screen.getByText("common.survey_type");
|
||||
await userEvent.click(trigger);
|
||||
|
||||
// When appSetupCompleted is false, the alert should be shown for the "app" option
|
||||
const appOption = screen.getByText("common.website_app_survey");
|
||||
expect(appOption).toBeInTheDocument();
|
||||
|
||||
// The alert should be present since appSetupCompleted is false
|
||||
const alertElement = screen.getByText("environments.surveys.edit.formbricks_sdk_is_not_connected");
|
||||
expect(alertElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("removes temporary segment when survey type is changed from 'app' to another type", async () => {
|
||||
// Create a temporary segment
|
||||
const tempSegment: TSegment = {
|
||||
id: "temp",
|
||||
isPrivate: true,
|
||||
title: "survey-123",
|
||||
environmentId: "env-123",
|
||||
surveys: ["survey-123"],
|
||||
filters: [],
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
description: "",
|
||||
};
|
||||
|
||||
// Create a mock survey with type 'app' and the temporary segment
|
||||
const mockSurveyWithSegment: Partial<TSurvey> = {
|
||||
id: "survey-123",
|
||||
type: "app",
|
||||
name: "Test Survey",
|
||||
languages: [
|
||||
{
|
||||
language: { code: "en" } as unknown as TLanguage,
|
||||
} as unknown as TSurveyLanguage,
|
||||
],
|
||||
endings: [],
|
||||
segment: tempSegment,
|
||||
};
|
||||
|
||||
render(
|
||||
<HowToSendCard
|
||||
localSurvey={mockSurveyWithSegment as TSurvey}
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
environment={mockEnvironment}
|
||||
/>
|
||||
);
|
||||
|
||||
// Open the collapsible to see the content
|
||||
const trigger = screen.getByText("common.survey_type");
|
||||
await userEvent.click(trigger);
|
||||
|
||||
// Find and click the 'link' radio button by finding its label first
|
||||
const linkLabel = screen.getByText("common.link_survey").closest("label");
|
||||
await userEvent.click(linkLabel!);
|
||||
|
||||
// Verify that setLocalSurvey was called with a function that sets segment to null
|
||||
// We need to find the specific call that handles segment removal
|
||||
let segmentRemovalCalled = false;
|
||||
|
||||
for (const call of mockSetLocalSurvey.mock.calls) {
|
||||
const setLocalSurveyFn = call[0];
|
||||
if (typeof setLocalSurveyFn === "function") {
|
||||
const result = setLocalSurveyFn(mockSurveyWithSegment as TSurvey);
|
||||
// If this call handles segment removal, the result should have segment set to null
|
||||
if (result.segment === null) {
|
||||
segmentRemovalCalled = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
expect(segmentRemovalCalled).toBe(true);
|
||||
});
|
||||
|
||||
test("allows changing survey type when survey status is 'draft'", async () => {
|
||||
// Create a survey with 'draft' status
|
||||
const draftSurvey: Partial<TSurvey> = {
|
||||
id: "survey-123",
|
||||
type: "link", // Current type is 'link'
|
||||
name: "Test Survey",
|
||||
languages: [
|
||||
{
|
||||
language: { code: "en" } as unknown as TLanguage,
|
||||
} as unknown as TSurveyLanguage,
|
||||
],
|
||||
endings: [],
|
||||
status: "draft", // Survey is in draft mode
|
||||
};
|
||||
|
||||
render(
|
||||
<HowToSendCard
|
||||
localSurvey={draftSurvey as TSurvey}
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
environment={mockEnvironment as Environment}
|
||||
/>
|
||||
);
|
||||
|
||||
// Open the collapsible to see the content
|
||||
const trigger = screen.getByText("common.survey_type");
|
||||
await userEvent.click(trigger);
|
||||
|
||||
// Try to change the survey type from 'link' to 'app'
|
||||
const appOption = screen.getByRole("radio", {
|
||||
name: "common.website_app_survey environments.surveys.edit.app_survey_description",
|
||||
});
|
||||
await userEvent.click(appOption);
|
||||
|
||||
// Verify that setLocalSurvey was called, indicating the type change was allowed
|
||||
expect(mockSetLocalSurvey).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("currently allows changing survey type when survey status is 'inProgress'", async () => {
|
||||
// Create a survey with 'inProgress' status
|
||||
const inProgressSurvey: Partial<TSurvey> = {
|
||||
id: "survey-123",
|
||||
type: "link", // Current type is 'link'
|
||||
name: "Test Survey",
|
||||
languages: [
|
||||
{
|
||||
language: { code: "en" } as unknown as TLanguage,
|
||||
} as unknown as TSurveyLanguage,
|
||||
],
|
||||
endings: [],
|
||||
status: "inProgress", // Survey is already published and in progress
|
||||
};
|
||||
|
||||
render(
|
||||
<HowToSendCard
|
||||
localSurvey={inProgressSurvey as TSurvey}
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
environment={mockEnvironment as Environment}
|
||||
/>
|
||||
);
|
||||
|
||||
// Open the collapsible to see the content
|
||||
const trigger = screen.getByText("common.survey_type");
|
||||
await userEvent.click(trigger);
|
||||
|
||||
// Try to change the survey type from 'link' to 'app'
|
||||
const appOption = screen.getByRole("radio", {
|
||||
name: "common.website_app_survey environments.surveys.edit.app_survey_description",
|
||||
});
|
||||
await userEvent.click(appOption);
|
||||
|
||||
// Verify that setLocalSurvey was called, indicating the type change was allowed
|
||||
// Note: This is the current behavior, but ideally it should be prevented for published surveys
|
||||
expect(mockSetLocalSurvey).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("adds default ending cards for all configured languages when switching to 'link' type in a multilingual survey", async () => {
|
||||
// Create a multilingual survey with no endings
|
||||
const multilingualSurvey: Partial<TSurvey> = {
|
||||
id: "survey-123",
|
||||
type: "app", // Starting with app type
|
||||
name: "Multilingual Test Survey",
|
||||
languages: [
|
||||
{
|
||||
language: { code: "en" } as unknown as TLanguage,
|
||||
} as unknown as TSurveyLanguage,
|
||||
{
|
||||
language: { code: "fr" } as unknown as TLanguage,
|
||||
} as unknown as TSurveyLanguage,
|
||||
{
|
||||
language: { code: "de" } as unknown as TLanguage,
|
||||
} as unknown as TSurveyLanguage,
|
||||
{
|
||||
language: { code: "es" } as unknown as TLanguage,
|
||||
} as unknown as TSurveyLanguage,
|
||||
],
|
||||
endings: [], // No endings initially
|
||||
};
|
||||
|
||||
render(
|
||||
<HowToSendCard
|
||||
localSurvey={multilingualSurvey as TSurvey}
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
environment={mockEnvironment}
|
||||
/>
|
||||
);
|
||||
|
||||
// Open the collapsible to see the content
|
||||
const trigger = screen.getByText("common.survey_type");
|
||||
await userEvent.click(trigger);
|
||||
|
||||
// Find and click the "link" option to change the survey type
|
||||
const linkRadioButton = screen.getByRole("radio", { name: /common.link_survey/ });
|
||||
await userEvent.click(linkRadioButton);
|
||||
|
||||
// Verify getDefaultEndingCard was called with the correct languages
|
||||
expect(getDefaultEndingCard).toHaveBeenCalledWith(multilingualSurvey.languages, expect.any(Function));
|
||||
|
||||
// Verify setLocalSurvey was called with updated survey containing the new ending
|
||||
expect(mockSetLocalSurvey).toHaveBeenCalled();
|
||||
|
||||
// Get the callback function passed to setLocalSurvey
|
||||
const setLocalSurveyCallback = mockSetLocalSurvey.mock.calls[0][0];
|
||||
|
||||
// Create a mock previous survey to pass to the callback
|
||||
const prevSurvey = { ...multilingualSurvey };
|
||||
|
||||
// Call the callback with the mock previous survey
|
||||
const updatedSurvey = setLocalSurveyCallback(prevSurvey as TSurvey);
|
||||
|
||||
// Verify the updated survey has the correct type and endings
|
||||
expect(updatedSurvey.type).toBe("link");
|
||||
expect(updatedSurvey.endings).toHaveLength(1);
|
||||
expect(updatedSurvey.endings[0]).toEqual({
|
||||
id: "test-id",
|
||||
type: "endScreen",
|
||||
headline: "Test Headline",
|
||||
subheader: "Test Subheader",
|
||||
buttonLabel: "Test Button",
|
||||
buttonLink: "https://formbricks.com",
|
||||
});
|
||||
|
||||
// Verify that segment is null if it was a temporary segment
|
||||
if (prevSurvey.segment?.id === "temp") {
|
||||
expect(updatedSurvey.segment).toBeNull();
|
||||
}
|
||||
});
|
||||
|
||||
test("setSurveyType does not create a temporary segment when environment.id is null", async () => {
|
||||
// Create a survey with link type
|
||||
const linkSurvey: Partial<TSurvey> = {
|
||||
id: "survey-123",
|
||||
type: "link",
|
||||
name: "Test Survey",
|
||||
languages: [
|
||||
{
|
||||
language: { code: "en" } as unknown as TLanguage,
|
||||
} as unknown as TSurveyLanguage,
|
||||
],
|
||||
endings: [],
|
||||
};
|
||||
|
||||
// Create environment with null id
|
||||
const nullIdEnvironment: Partial<Environment> = {
|
||||
id: null as unknown as string, // Simulate null environment id
|
||||
appSetupCompleted: true,
|
||||
};
|
||||
|
||||
// Mock the component with the specific props
|
||||
render(
|
||||
<HowToSendCard
|
||||
localSurvey={linkSurvey as TSurvey}
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
environment={nullIdEnvironment as Environment}
|
||||
/>
|
||||
);
|
||||
|
||||
// Reset the mock to ensure we only capture calls from this test
|
||||
mockSetLocalSurvey.mockClear();
|
||||
|
||||
// Open the collapsible to see the content
|
||||
const trigger = screen.getByText("common.survey_type");
|
||||
await userEvent.click(trigger);
|
||||
|
||||
// Find and click the app option to change survey type
|
||||
const appOption = screen.getByRole("radio", {
|
||||
name: "common.website_app_survey environments.surveys.edit.app_survey_description",
|
||||
});
|
||||
|
||||
// Click the app option - this should trigger the type change
|
||||
await userEvent.click(appOption);
|
||||
|
||||
// Verify setLocalSurvey was called at least once
|
||||
expect(mockSetLocalSurvey).toHaveBeenCalled();
|
||||
|
||||
// Get the callback function passed to setLocalSurvey
|
||||
const setLocalSurveyCallback = mockSetLocalSurvey.mock.calls[0][0];
|
||||
|
||||
// Create a mock previous survey state
|
||||
const prevSurvey = { ...linkSurvey } as TSurvey;
|
||||
|
||||
// Execute the callback to see what it returns
|
||||
const result = setLocalSurveyCallback(prevSurvey);
|
||||
|
||||
// Verify the type was updated but no segment was created
|
||||
expect(result.type).toBe("app");
|
||||
expect(result.segment).toBeUndefined();
|
||||
});
|
||||
|
||||
test("setSurveyType does not create a temporary segment when environment.id is undefined", async () => {
|
||||
// Create a survey with link type
|
||||
const linkSurvey: Partial<TSurvey> = {
|
||||
id: "survey-123",
|
||||
type: "link",
|
||||
name: "Test Survey",
|
||||
languages: [
|
||||
{
|
||||
language: { code: "en" } as unknown as TLanguage,
|
||||
} as unknown as TSurveyLanguage,
|
||||
],
|
||||
endings: [],
|
||||
};
|
||||
|
||||
// Create environment with undefined id
|
||||
const undefinedIdEnvironment: Partial<Environment> = {
|
||||
id: undefined as unknown as string, // Simulate undefined environment id
|
||||
appSetupCompleted: true,
|
||||
};
|
||||
|
||||
// Mock the component with the specific props
|
||||
render(
|
||||
<HowToSendCard
|
||||
localSurvey={linkSurvey as TSurvey}
|
||||
setLocalSurvey={mockSetLocalSurvey}
|
||||
environment={undefinedIdEnvironment as Environment}
|
||||
/>
|
||||
);
|
||||
|
||||
// Reset the mock to ensure we only capture calls from this test
|
||||
mockSetLocalSurvey.mockClear();
|
||||
|
||||
// Open the collapsible to see the content
|
||||
const trigger = screen.getByText("common.survey_type");
|
||||
await userEvent.click(trigger);
|
||||
|
||||
// Find and click the app option to change survey type
|
||||
const appOption = screen.getByRole("radio", {
|
||||
name: "common.website_app_survey environments.surveys.edit.app_survey_description",
|
||||
});
|
||||
|
||||
// Click the app option - this should trigger the type change
|
||||
await userEvent.click(appOption);
|
||||
|
||||
// Verify setLocalSurvey was called at least once
|
||||
expect(mockSetLocalSurvey).toHaveBeenCalled();
|
||||
|
||||
// Get the callback function passed to setLocalSurvey
|
||||
const setLocalSurveyCallback = mockSetLocalSurvey.mock.calls[0][0];
|
||||
|
||||
// Create a mock previous survey state
|
||||
const prevSurvey = { ...linkSurvey } as TSurvey;
|
||||
|
||||
// Execute the callback to see what it returns
|
||||
const result = setLocalSurveyCallback(prevSurvey);
|
||||
|
||||
// Verify the type was updated but no segment was created
|
||||
expect(result.type).toBe("app");
|
||||
expect(result.segment).toBeUndefined();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,225 @@
|
||||
import { UploadImageSurveyBg } from "@/modules/survey/editor/components/image-survey-bg";
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, test, vi } from "vitest";
|
||||
|
||||
// Create a ref to store the props passed to FileInput
|
||||
const mockFileInputProps: any = { current: null };
|
||||
|
||||
// Mock the module with inline implementation
|
||||
vi.mock("@/modules/ui/components/file-input", () => ({
|
||||
FileInput: (props) => {
|
||||
// Store the props for later assertions
|
||||
mockFileInputProps.current = props;
|
||||
return <div data-testid="file-input-mock">FileInputMock</div>;
|
||||
},
|
||||
}));
|
||||
|
||||
describe("UploadImageSurveyBg", () => {
|
||||
const mockEnvironmentId = "env-123";
|
||||
const mockHandleBgChange = vi.fn();
|
||||
const mockBackground = "https://example.com/image.jpg";
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
mockFileInputProps.current = null;
|
||||
});
|
||||
|
||||
test("renders FileInput with correct props", () => {
|
||||
render(
|
||||
<UploadImageSurveyBg
|
||||
environmentId={mockEnvironmentId}
|
||||
handleBgChange={mockHandleBgChange}
|
||||
background={mockBackground}
|
||||
/>
|
||||
);
|
||||
|
||||
// Verify FileInput was rendered
|
||||
expect(screen.getByTestId("file-input-mock")).toBeInTheDocument();
|
||||
|
||||
// Verify FileInput was called with the correct props
|
||||
expect(mockFileInputProps.current).toMatchObject({
|
||||
id: "survey-bg-file-input",
|
||||
allowedFileExtensions: ["png", "jpeg", "jpg", "webp", "heic"],
|
||||
environmentId: mockEnvironmentId,
|
||||
fileUrl: mockBackground,
|
||||
maxSizeInMB: 2,
|
||||
});
|
||||
});
|
||||
|
||||
test("calls handleBgChange when a file is uploaded", () => {
|
||||
render(
|
||||
<UploadImageSurveyBg
|
||||
environmentId={mockEnvironmentId}
|
||||
handleBgChange={mockHandleBgChange}
|
||||
background={mockBackground}
|
||||
/>
|
||||
);
|
||||
|
||||
// Get the onFileUpload function from the props passed to FileInput
|
||||
const onFileUpload = mockFileInputProps.current?.onFileUpload;
|
||||
|
||||
// Call it with a mock URL array
|
||||
const mockUrl = "https://example.com/new-image.jpg";
|
||||
onFileUpload([mockUrl]);
|
||||
|
||||
// Verify handleBgChange was called with the correct arguments
|
||||
expect(mockHandleBgChange).toHaveBeenCalledWith(mockUrl, "upload");
|
||||
});
|
||||
|
||||
test("calls handleBgChange with empty string when no file is uploaded", () => {
|
||||
render(
|
||||
<UploadImageSurveyBg
|
||||
environmentId={mockEnvironmentId}
|
||||
handleBgChange={mockHandleBgChange}
|
||||
background={mockBackground}
|
||||
/>
|
||||
);
|
||||
|
||||
// Get the onFileUpload function from the props passed to FileInput
|
||||
const onFileUpload = mockFileInputProps.current?.onFileUpload;
|
||||
|
||||
// Call it with an empty array
|
||||
onFileUpload([]);
|
||||
|
||||
// Verify handleBgChange was called with empty string
|
||||
expect(mockHandleBgChange).toHaveBeenCalledWith("", "upload");
|
||||
});
|
||||
|
||||
test("passes the background prop to FileInput as fileUrl", () => {
|
||||
render(
|
||||
<UploadImageSurveyBg
|
||||
environmentId={mockEnvironmentId}
|
||||
handleBgChange={mockHandleBgChange}
|
||||
background={mockBackground}
|
||||
/>
|
||||
);
|
||||
|
||||
// Verify FileInput was rendered
|
||||
expect(screen.getByTestId("file-input-mock")).toBeInTheDocument();
|
||||
|
||||
// Verify that the background prop was passed to FileInput as fileUrl
|
||||
expect(mockFileInputProps.current).toHaveProperty("fileUrl", mockBackground);
|
||||
});
|
||||
|
||||
test("calls handleBgChange with the first URL and 'upload' as background type when a valid file is uploaded", () => {
|
||||
render(
|
||||
<UploadImageSurveyBg
|
||||
environmentId={mockEnvironmentId}
|
||||
handleBgChange={mockHandleBgChange}
|
||||
background={mockBackground}
|
||||
/>
|
||||
);
|
||||
|
||||
// Verify FileInput was rendered
|
||||
expect(screen.getByTestId("file-input-mock")).toBeInTheDocument();
|
||||
|
||||
// Get the onFileUpload function from the props passed to FileInput
|
||||
const onFileUpload = mockFileInputProps.current?.onFileUpload;
|
||||
|
||||
// Call it with a mock URL array containing multiple URLs
|
||||
const mockUrls = ["https://example.com/uploaded-image1.jpg", "https://example.com/uploaded-image2.jpg"];
|
||||
onFileUpload(mockUrls);
|
||||
|
||||
// Verify handleBgChange was called with the first URL and 'upload' as background type
|
||||
expect(mockHandleBgChange).toHaveBeenCalledTimes(1);
|
||||
expect(mockHandleBgChange).toHaveBeenCalledWith(mockUrls[0], "upload");
|
||||
});
|
||||
|
||||
test("only uses the first URL when multiple files are uploaded simultaneously", () => {
|
||||
render(
|
||||
<UploadImageSurveyBg
|
||||
environmentId={mockEnvironmentId}
|
||||
handleBgChange={mockHandleBgChange}
|
||||
background={mockBackground}
|
||||
/>
|
||||
);
|
||||
|
||||
// Verify FileInput was rendered
|
||||
expect(screen.getByTestId("file-input-mock")).toBeInTheDocument();
|
||||
|
||||
// Get the onFileUpload function from the props passed to FileInput
|
||||
const onFileUpload = mockFileInputProps.current?.onFileUpload;
|
||||
|
||||
// Call it with an array containing multiple URLs
|
||||
const mockUrls = [
|
||||
"https://example.com/image1.jpg",
|
||||
"https://example.com/image2.jpg",
|
||||
"https://example.com/image3.jpg",
|
||||
];
|
||||
onFileUpload(mockUrls);
|
||||
|
||||
// Verify handleBgChange was called with only the first URL and "upload"
|
||||
expect(mockHandleBgChange).toHaveBeenCalledTimes(1);
|
||||
expect(mockHandleBgChange).toHaveBeenCalledWith(mockUrls[0], "upload");
|
||||
|
||||
// Verify handleBgChange was NOT called with any other URLs
|
||||
expect(mockHandleBgChange).not.toHaveBeenCalledWith(mockUrls[1], "upload");
|
||||
expect(mockHandleBgChange).not.toHaveBeenCalledWith(mockUrls[2], "upload");
|
||||
});
|
||||
|
||||
test("prevents upload and doesn't call handleBgChange when file has unsupported extension", () => {
|
||||
render(
|
||||
<UploadImageSurveyBg
|
||||
environmentId={mockEnvironmentId}
|
||||
handleBgChange={mockHandleBgChange}
|
||||
background={mockBackground}
|
||||
/>
|
||||
);
|
||||
|
||||
// Verify FileInput was rendered with correct allowed extensions
|
||||
expect(screen.getByTestId("file-input-mock")).toBeInTheDocument();
|
||||
expect(mockFileInputProps.current?.allowedFileExtensions).toEqual(["png", "jpeg", "jpg", "webp", "heic"]);
|
||||
|
||||
// Get the onFileUpload function from the props passed to FileInput
|
||||
const onFileUpload = mockFileInputProps.current?.onFileUpload;
|
||||
|
||||
// In a real scenario, FileInput would validate the file extension and not call onFileUpload
|
||||
// with invalid files. Here we're simulating that validation has already happened and
|
||||
// onFileUpload is not called with any URLs (empty array) when validation fails.
|
||||
onFileUpload([]);
|
||||
|
||||
// Verify handleBgChange was called with empty string, indicating no valid file was uploaded
|
||||
expect(mockHandleBgChange).toHaveBeenCalledWith("", "upload");
|
||||
|
||||
// Reset the mock to verify it's not called again
|
||||
mockHandleBgChange.mockReset();
|
||||
|
||||
// Verify that if onFileUpload is not called at all (which would happen if validation
|
||||
// completely prevents the callback), handleBgChange would not be called
|
||||
expect(mockHandleBgChange).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("should not call handleBgChange when a file exceeding 2MB size limit is uploaded", () => {
|
||||
render(
|
||||
<UploadImageSurveyBg
|
||||
environmentId={mockEnvironmentId}
|
||||
handleBgChange={mockHandleBgChange}
|
||||
background={mockBackground}
|
||||
/>
|
||||
);
|
||||
|
||||
// Verify FileInput was rendered with correct maxSizeInMB prop
|
||||
expect(screen.getByTestId("file-input-mock")).toBeInTheDocument();
|
||||
expect(mockFileInputProps.current?.maxSizeInMB).toBe(2);
|
||||
|
||||
// Get the onFileUpload function from the props passed to FileInput
|
||||
const onFileUpload = mockFileInputProps.current?.onFileUpload;
|
||||
|
||||
// In a real scenario, the FileInput component would validate the file size
|
||||
// and not include oversized files in the array passed to onFileUpload
|
||||
// So we simulate this by calling onFileUpload with an empty array
|
||||
onFileUpload([]);
|
||||
|
||||
// Verify handleBgChange was called with empty string, indicating no valid file was uploaded
|
||||
expect(mockHandleBgChange).toHaveBeenCalledWith("", "upload");
|
||||
|
||||
// Reset the mock to verify it's not called again
|
||||
mockHandleBgChange.mockReset();
|
||||
|
||||
// Now simulate that no callback happens at all when validation fails completely
|
||||
// (this is an alternative way the FileInput might behave)
|
||||
// In this case, we just verify that handleBgChange is not called again
|
||||
expect(mockHandleBgChange).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -366,7 +366,6 @@ export const QuestionCard = ({
|
||||
question={question}
|
||||
questionIdx={questionIdx}
|
||||
updateQuestion={updateQuestion}
|
||||
lastQuestion={lastQuestion}
|
||||
selectedLanguageCode={selectedLanguageCode}
|
||||
setSelectedLanguageCode={setSelectedLanguageCode}
|
||||
isInvalid={isInvalid}
|
||||
@@ -391,7 +390,6 @@ export const QuestionCard = ({
|
||||
question={question}
|
||||
questionIdx={questionIdx}
|
||||
updateQuestion={updateQuestion}
|
||||
lastQuestion={lastQuestion}
|
||||
selectedLanguageCode={selectedLanguageCode}
|
||||
setSelectedLanguageCode={setSelectedLanguageCode}
|
||||
isInvalid={isInvalid}
|
||||
@@ -428,7 +426,6 @@ export const QuestionCard = ({
|
||||
question={question}
|
||||
questionIdx={questionIdx}
|
||||
updateQuestion={updateQuestion}
|
||||
lastQuestion={lastQuestion}
|
||||
selectedLanguageCode={selectedLanguageCode}
|
||||
setSelectedLanguageCode={setSelectedLanguageCode}
|
||||
isInvalid={isInvalid}
|
||||
|
||||
@@ -120,6 +120,16 @@ export default defineConfig({
|
||||
"survey/editor/lib/utils.tsx",
|
||||
"modules/ui/components/card/index.tsx",
|
||||
"modules/ui/components/card/index.tsx",
|
||||
"modules/survey/editor/lib/utils.tsx",
|
||||
"modules/survey/editor/components/add-action-modal.tsx",
|
||||
"modules/survey/editor/components/add-ending-card-button.tsx",
|
||||
"modules/survey/editor/components/add-question-button.tsx",
|
||||
"modules/survey/editor/components/advanced-settings.tsx",
|
||||
"modules/survey/editor/components/color-survey-bg.tsx",
|
||||
"modules/survey/editor/components/date-question-form.tsx",
|
||||
"modules/survey/editor/components/file-upload-question-form.tsx",
|
||||
"modules/survey/editor/components/how-to-send-card.tsx",
|
||||
"modules/survey/editor/components/image-survey-bg.tsx",
|
||||
],
|
||||
exclude: [
|
||||
"**/.next/**",
|
||||
|
||||
Reference in New Issue
Block a user