mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2025-12-30 18:30:32 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

Updated tests

Browse Source
This commit is contained in:
Jakob Schott
2025-05-19 22:44:33 +02:00
parent dc0cc5e526
commit a8a8cf6c88
2 changed files with 47 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/surveys/src/components/general/render-survey.test.tsx
View File

@@ -23,10 +23,26 @@ vi.mock("./survey", () => ({
},
}));
// Mock ResizeObserver
let resizeCallback: Function | undefined;
const ResizeObserverMock = vi.fn((callback) => {
resizeCallback = callback;
return {
observe: vi.fn(),
unobserve: vi.fn(),
disconnect: vi.fn(),
};
});
global.ResizeObserver = ResizeObserverMock as any;
describe("RenderSurvey", () => {
beforeEach(() => {
surveySpy.mockClear();
vi.useFakeTimers();
// Reset styles on documentElement before each test
document.documentElement.style.removeProperty("--fb-survey-card-max-height");
document.documentElement.style.removeProperty("--fb-survey-card-min-height");
resizeCallback = undefined; // Reset callback for each test
});
afterEach(() => {
@@ -155,12 +171,14 @@ describe("RenderSurvey", () => {
mode: "modal",
} as any;
const { container } = render(<RenderSurvey {...propsForLinkSurvey} />);
const surveyContainerWrapper = container.querySelector('[data-testid="container"]');
expect(surveyContainerWrapper).toHaveStyle({
"--fb-survey-card-max-height": "56dvh",
"--fb-survey-card-min-height": "0dvh",
});
render(<RenderSurvey {...propsForLinkSurvey} />);
// Manually trigger the ResizeObserver callback if it was captured
if (resizeCallback) {
resizeCallback();
}
expect(document.documentElement.style.getPropertyValue("--fb-survey-card-max-height")).toBe("56dvh");
expect(document.documentElement.style.getPropertyValue("--fb-survey-card-min-height")).toBe("0");
});
test("should apply correct styles for app (non-link) surveys", () => {
@@ -175,11 +193,13 @@ describe("RenderSurvey", () => {
mode: "modal",
} as any;
const { container } = render(<RenderSurvey {...propsForAppSurvey} />);
const surveyContainerWrapper = container.querySelector('[data-testid="container"]');
expect(surveyContainerWrapper).toHaveStyle({
"--fb-survey-card-max-height": "25dvh",
"--fb-survey-card-min-height": "25dvh",
});
render(<RenderSurvey {...propsForAppSurvey} />);
// Manually trigger the ResizeObserver callback if it was captured
if (resizeCallback) {
resizeCallback();
}
expect(document.documentElement.style.getPropertyValue("--fb-survey-card-max-height")).toBe("40dvh");
expect(document.documentElement.style.getPropertyValue("--fb-survey-card-min-height")).toBe("40dvh");
});
});

38
packages/surveys/src/components/general/render-survey.tsx
View File

@@ -5,38 +5,30 @@ import { Survey } from "./survey";
export function RenderSurvey(props: Readonly<SurveyContainerProps>) {
const [isOpen, setIsOpen] = useState(true);
const [isDesktop, setIsDesktop] = useState(false);
// Check viewport width on mount and resize
useEffect(() => {
const checkViewportWidth = () => {
setIsDesktop(window.innerWidth > 768);
};
checkViewportWidth();
window.addEventListener("resize", checkViewportWidth);
return () => {
window.removeEventListener("resize", checkViewportWidth);
};
}, []);
// Determine styles based on survey type
useEffect(() => {
const root = document.documentElement;
if (props.survey.type === "link") {
root.style.setProperty("--fb-survey-card-max-height", isDesktop ? "56dvh" : "60dvh");
root.style.setProperty("--fb-survey-card-min-height", isDesktop ? "0" : "42dvh");
} else {
root.style.setProperty("--fb-survey-card-max-height", "40dvh");
root.style.setProperty("--fb-survey-card-min-height", "40dvh");
}
const resizeObserver = new ResizeObserver(() => {
const isDesktop = window.innerWidth > 768;
if (props.survey.type === "link") {
root.style.setProperty("--fb-survey-card-max-height", isDesktop ? "56dvh" : "60dvh");
root.style.setProperty("--fb-survey-card-min-height", isDesktop ? "0" : "42dvh");
} else {
root.style.setProperty("--fb-survey-card-max-height", "40dvh");
root.style.setProperty("--fb-survey-card-min-height", "40dvh");
}
});
resizeObserver.observe(document.body);
// Clean up when component unmounts
return () => {
resizeObserver.disconnect();
root.style.removeProperty("--fb-survey-card-max-height");
root.style.removeProperty("--fb-survey-card-min-height");
};
}, [props.survey.type, isDesktop]);
}, [props.survey.type]);
const close = () => {
setIsOpen(false);