chore: sonarqube label fixes (#6381)

This commit is contained in:
Dhruwang Jariwala
2025-08-11 23:52:21 +05:30
committed by GitHub
parent fd3fedb6ed
commit 819380d21c
9 changed files with 27 additions and 47 deletions
@@ -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