Browse Source

feat: enable multi-select support for dropdown components and update related tests

master
mortezaei 4 days ago
parent
commit
c9ee7a7d37
  1. 2
      src/components/Componentes/question-answer-storage.tsx
  2. 72
      src/components/Componentes/question-answer.test.tsx
  3. 13
      src/components/Componentes/ui-config.test.tsx

2
src/components/Componentes/question-answer-storage.tsx

@ -132,7 +132,7 @@ function createQuestionField(
let option_id: string | string[] | undefined;
if (question.options && Array.isArray(question.options)) {
if (question.type === "checkbox" && Array.isArray(value)) {
if (Array.isArray(value)) {
option_id = value;
} else {
const selectedOpt = question.options.find((opt) => opt.id === value);

72
src/components/Componentes/question-answer.test.tsx

@ -90,6 +90,33 @@ function TestComponent({ slug }: { slug: string }) {
Set Checkbox
</button>
<button
data-testid="set-multi-dropdown"
onClick={() =>
setAnswerValue(
{
id: "q_multi_drop",
type: "dropdown",
title: "Q Multi Drop",
order: 3,
required: true,
baseRequired: true,
isVisible: true,
description: "",
tooltip: "",
extras: { placeHolder: "", options: [], range: [1, 10] },
options: [
{ id: "opt_d1", value: "D1", label: "Option D1", order: 1 },
{ id: "opt_d2", value: "D2", label: "Option D2", order: 2 },
],
},
["opt_d1", "opt_d2"],
)
}
>
Set Multi Dropdown
</button>
<button data-testid="save" onClick={() => flushAnswers()}>
Save
</button>
@ -214,6 +241,51 @@ describe("Question Answer & Schema Integration", () => {
});
});
it("should send array of option_ids for multi-select dropdown", async () => {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
});
render(
<QueryClientProvider client={queryClient}>
<QuestionAnswersProvider
slug="test_slug"
questions={[
{
id: "q_multi_drop",
type: "dropdown",
title: "Q Multi Drop",
order: 3,
required: true,
baseRequired: true,
isVisible: true,
description: "",
tooltip: "",
extras: { placeHolder: "", options: [], range: [1, 10] },
options: [
{ id: "opt_d1", value: "D1", label: "Option D1", order: 1 },
{ id: "opt_d2", value: "D2", label: "Option D2", order: 2 },
],
},
]}
>
<TestComponent slug="test_slug" />
</QuestionAnswersProvider>
</QueryClientProvider>,
);
fireEvent.click(screen.getByTestId("set-multi-dropdown"));
fireEvent.click(screen.getByTestId("save"));
await waitFor(() => {
expect(capturedPayload).not.toBeNull();
const field = capturedPayload.fields.find(
(f: any) => f.key === "q_multi_drop",
);
expect(field.option_id).toEqual(["opt_d1", "opt_d2"]);
});
});
it("batches all dirty answers into one mutation", async () => {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },

13
src/components/Componentes/ui-config.test.tsx

@ -93,9 +93,8 @@ describe("UI Config based behavior", () => {
ui_config: { enable_geoip: true },
} as any;
const { getStoredUserGeoRegion, setStoredUserGeoRegion } = await import(
"@/lib/geo-region"
);
const { setStoredUserGeoRegion } = await import("@/lib/geo-region");
const { marriageQueryKeys } = await import("@/hooks/marriage/query-keys");
setStoredUserGeoRegion({
city: "Tehran",
country: "Iran",
@ -103,10 +102,16 @@ describe("UI Config based behavior", () => {
phoneCode: "+98",
});
queryClient.setQueryData(marriageQueryKeys.sectionData("test-geoip"), {
status: "success",
data: [],
version: 1,
});
render(
<QueryClientProvider client={queryClient}>
<QuestionAnswersProvider
slug="test"
slug="test-geoip"
questions={[qWithGeo]}
initialAnswers={{}}
initialFields={[]}

Loading…
Cancel
Save