mirror of
https://github.com/formbricks/formbricks.git
synced 2026-04-25 20:01:53 -05:00
chore: sonarqube label fixes (#6381)
This commit is contained in:
committed by
GitHub
parent
fd3fedb6ed
commit
819380d21c
@@ -98,7 +98,7 @@ export function LocalizedEditor({
|
||||
{value && selectedLanguageCode !== "default" && value.default ? (
|
||||
<div className="mt-1 flex text-xs text-gray-500">
|
||||
<strong>{t("environments.project.languages.translate")}:</strong>
|
||||
<label
|
||||
<span
|
||||
className="fb-htmlbody ml-1" // styles are in global.css
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(
|
||||
|
||||
@@ -482,22 +482,14 @@ describe("WhenToSendCard Component Tests", () => {
|
||||
projectPermission={null}
|
||||
/>
|
||||
);
|
||||
const delayInput = screen.getByLabelText(
|
||||
/environments\.surveys\.edit\.wait.*environments\.surveys\.edit\.seconds_before_showing_the_survey/i
|
||||
);
|
||||
await userEvent.clear(delayInput);
|
||||
await userEvent.type(delayInput, "15");
|
||||
fireEvent.change(delayInput, { target: { value: "15" } }); // Ensure change event fires
|
||||
const delayInput = screen.getByDisplayValue("5");
|
||||
fireEvent.change(delayInput, { target: { value: "15" } });
|
||||
expect(setLocalSurvey).toHaveBeenCalledWith(expect.objectContaining({ delay: 15 }));
|
||||
|
||||
// Test invalid input
|
||||
await userEvent.clear(delayInput);
|
||||
await userEvent.type(delayInput, "abc");
|
||||
fireEvent.change(delayInput, { target: { value: "abc" } });
|
||||
expect(setLocalSurvey).toHaveBeenCalledWith(expect.objectContaining({ delay: 0 }));
|
||||
|
||||
await userEvent.clear(delayInput);
|
||||
await userEvent.type(delayInput, "0");
|
||||
fireEvent.change(delayInput, { target: { value: "0" } });
|
||||
expect(setLocalSurvey).toHaveBeenCalledWith(expect.objectContaining({ delay: 0 }));
|
||||
});
|
||||
|
||||
@@ -242,9 +242,7 @@ export const WhenToSendCard = ({
|
||||
"environments.surveys.edit.wait_a_few_seconds_after_the_trigger_before_showing_the_survey"
|
||||
)}
|
||||
childBorder={true}>
|
||||
<label
|
||||
htmlFor="triggerDelay"
|
||||
className="flex w-full cursor-pointer items-center rounded-lg border bg-slate-50 p-4">
|
||||
<div className="flex w-full cursor-pointer items-center rounded-lg border bg-slate-50 p-4">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-700">
|
||||
{t("environments.surveys.edit.wait")}
|
||||
@@ -259,7 +257,7 @@ export const WhenToSendCard = ({
|
||||
{t("environments.surveys.edit.seconds_before_showing_the_survey")}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</AdvancedOptionToggle>
|
||||
<AdvancedOptionToggle
|
||||
htmlId="autoClose"
|
||||
|
||||
@@ -372,11 +372,11 @@ export function FileInput({
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
|
||||
/>
|
||||
</svg>
|
||||
<label
|
||||
<span
|
||||
className="fb-text-placeholder fb-mt-2 fb-text-sm dark:fb-text-slate-400"
|
||||
id={`${uniqueHtmlFor}-label`}>
|
||||
Click or drag to upload files.
|
||||
</label>
|
||||
</span>
|
||||
<input
|
||||
type="file"
|
||||
id={uniqueHtmlFor}
|
||||
|
||||
@@ -12,21 +12,18 @@ vi.mock("isomorphic-dompurify", () => ({
|
||||
}));
|
||||
|
||||
describe("HtmlBody", () => {
|
||||
const defaultProps = {
|
||||
questionId: "test-id" as const,
|
||||
};
|
||||
const defaultProps = {};
|
||||
|
||||
test("renders sanitized HTML content", async () => {
|
||||
const htmlString = "<p>Test content</p>";
|
||||
const { container } = render(<HtmlBody {...defaultProps} htmlString={htmlString} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const label = container.querySelector("label");
|
||||
expect(label).toBeInTheDocument();
|
||||
expect(label).toHaveAttribute("for", "test-id");
|
||||
expect(label).toHaveClass("fb-htmlbody", "fb-break-words");
|
||||
expect(label).toHaveAttribute("dir", "auto");
|
||||
expect(label?.innerHTML).toBe(htmlString);
|
||||
const span = container.querySelector("span");
|
||||
expect(span).toBeInTheDocument();
|
||||
expect(span).toHaveClass("fb-htmlbody", "fb-break-words");
|
||||
expect(span).toHaveAttribute("dir", "auto");
|
||||
expect(span?.innerHTML).toBe(htmlString);
|
||||
});
|
||||
|
||||
expect(DOMPurify.sanitize).toHaveBeenCalledWith(htmlString, { ADD_ATTR: ["target"] });
|
||||
@@ -57,9 +54,9 @@ describe("HtmlBody", () => {
|
||||
const { container } = render(<HtmlBody {...defaultProps} htmlString={complexHtml} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const label = container.querySelector("label");
|
||||
expect(label).toBeInTheDocument();
|
||||
expect(label?.innerHTML).toBe(complexHtml);
|
||||
const span = container.querySelector("span");
|
||||
expect(span).toBeInTheDocument();
|
||||
expect(span?.innerHTML).toBe(complexHtml);
|
||||
});
|
||||
|
||||
expect(DOMPurify.sanitize).toHaveBeenCalledWith(complexHtml, { ADD_ATTR: ["target"] });
|
||||
@@ -70,16 +67,16 @@ describe("HtmlBody", () => {
|
||||
const { container, rerender } = render(<HtmlBody {...defaultProps} htmlString={initialHtml} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const label = container.querySelector("label");
|
||||
expect(label?.innerHTML).toBe(initialHtml);
|
||||
const span = container.querySelector("span");
|
||||
expect(span?.innerHTML).toBe(initialHtml);
|
||||
});
|
||||
|
||||
const updatedHtml = "<p>Updated content</p>";
|
||||
rerender(<HtmlBody {...defaultProps} htmlString={updatedHtml} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const label = container.querySelector("label");
|
||||
expect(label?.innerHTML).toBe(updatedHtml);
|
||||
const span = container.querySelector("span");
|
||||
expect(span?.innerHTML).toBe(updatedHtml);
|
||||
});
|
||||
|
||||
expect(DOMPurify.sanitize).toHaveBeenCalledWith(updatedHtml, { ADD_ATTR: ["target"] });
|
||||
@@ -90,8 +87,8 @@ describe("HtmlBody", () => {
|
||||
const { container } = render(<HtmlBody {...defaultProps} htmlString={htmlString} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const label = container.querySelector("label");
|
||||
expect(label).toHaveClass("fb-htmlbody", "fb-break-words");
|
||||
const span = container.querySelector("span");
|
||||
expect(span).toHaveClass("fb-htmlbody", "fb-break-words");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import DOMPurify from "isomorphic-dompurify";
|
||||
import { useEffect, useState } from "react";
|
||||
import { type TSurveyQuestionId } from "@formbricks/types/surveys/types";
|
||||
|
||||
interface HtmlBodyProps {
|
||||
htmlString?: string;
|
||||
questionId: TSurveyQuestionId;
|
||||
readonly htmlString?: string;
|
||||
}
|
||||
|
||||
export function HtmlBody({ htmlString, questionId }: HtmlBodyProps) {
|
||||
export function HtmlBody({ htmlString }: HtmlBodyProps) {
|
||||
const [safeHtml, setSafeHtml] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
@@ -21,8 +19,7 @@ export function HtmlBody({ htmlString, questionId }: HtmlBodyProps) {
|
||||
if (safeHtml === `<p class="fb-editor-paragraph"><br></p>`) return null;
|
||||
|
||||
return (
|
||||
<label
|
||||
htmlFor={questionId}
|
||||
<span
|
||||
className={cn("fb-htmlbody fb-break-words")} // styles are in global.css
|
||||
dangerouslySetInnerHTML={{ __html: safeHtml }}
|
||||
dir="auto"
|
||||
|
||||
@@ -145,7 +145,6 @@ export function WelcomeCard({
|
||||
/>
|
||||
<HtmlBody
|
||||
htmlString={replaceRecallInfo(getLocalizedValue(html, languageCode), responseData, variablesData)}
|
||||
questionId="welcomeCard"
|
||||
/>
|
||||
<div className="fb-mt-4 fb-flex fb-gap-4 fb-pt-4">
|
||||
<SubmitButton
|
||||
|
||||
@@ -73,10 +73,7 @@ export function ConsentQuestion({
|
||||
questionId={question.id}
|
||||
required={question.required}
|
||||
/>
|
||||
<HtmlBody
|
||||
htmlString={getLocalizedValue(question.html, languageCode) || ""}
|
||||
questionId={question.id}
|
||||
/>
|
||||
<HtmlBody htmlString={getLocalizedValue(question.html, languageCode) || ""} />
|
||||
<label
|
||||
ref={consentRef}
|
||||
dir="auto"
|
||||
|
||||
@@ -59,7 +59,7 @@ export function CTAQuestion({
|
||||
questionId={question.id}
|
||||
required={question.required}
|
||||
/>
|
||||
<HtmlBody htmlString={getLocalizedValue(question.html, languageCode)} questionId={question.id} />
|
||||
<HtmlBody htmlString={getLocalizedValue(question.html, languageCode)} />
|
||||
<div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
|
||||
<div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-start">
|
||||
<SubmitButton
|
||||
|
||||
Reference in New Issue
Block a user