feat: implement OptionsInput component for handling select field options

2026-08-08 14:33:49 +03:30
parent 3862a91fd1
commit 35181cd715
2 changed files with 126 additions and 10 deletions
@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithProviders } from '../test/utils';
+import FieldSchemaEditor from './FieldSchemaEditor';
+import type { TreatmentFormField } from '../types';
+
+const selectField = (options?: TreatmentFormField['options']): TreatmentFormField => ({
+  key: 'spot',
+  label: 'اسپات',
+  type: 'select',
+  required: false,
+  sort_order: 0,
+  options,
+});
+
+/** والدِ کنترل‌شده — همان قراردادی که مودال نوع منبع دارد. */
+function Harness({ initial, onEmit }: {
+  initial: TreatmentFormField[];
+  onEmit?: (fields: TreatmentFormField[]) => void;
+}) {
+  const [value, setValue] = useState(initial);
+  return (
+    <FieldSchemaEditor
+      value={value}
+      onChange={(next) => { setValue(next); onEmit?.(next); }}
+    />
+  );
+}
+
+const optionsInput = () =>
+  screen.getByPlaceholderText('7, 8, 9, 10, 12, 14, 16, 18') as HTMLInputElement;
+
+describe('FieldSchemaEditor — ورودی گزینه‌های فیلد select', () => {
+  it('کاما در فیلد باقی می‌ماند و پاک نمی‌شود', () => {
+    renderWithProviders(<Harness initial={[selectField(['7'])]} />);
+
+    fireEvent.change(optionsInput(), { target: { value: '7,' } });
+
+    expect(optionsInput().value).toBe('7,');
+  });
+
+  it('فاصلهٔ بعد از کاما حفظ می‌شود و گزینهٔ بعدی تایپ‌شدنی است', () => {
+    const onEmit = vi.fn();
+    renderWithProviders(<Harness initial={[selectField(['7'])]} onEmit={onEmit} />);
+
+    fireEvent.change(optionsInput(), { target: { value: '7, ' } });
+    expect(optionsInput().value).toBe('7, ');
+
+    fireEvent.change(optionsInput(), { target: { value: '7, 8' } });
+    expect(optionsInput().value).toBe('7, 8');
+    expect(onEmit).toHaveBeenLastCalledWith([expect.objectContaining({ options: ['7', '8'] })]);
+  });
+
+  it('کامای فارسی هم جداکننده است', () => {
+    const onEmit = vi.fn();
+    renderWithProviders(<Harness initial={[selectField([])]} onEmit={onEmit} />);
+
+    fireEvent.change(optionsInput(), { target: { value: 'کم، زیاد' } });
+
+    expect(onEmit).toHaveBeenLastCalledWith([expect.objectContaining({ options: ['کم', 'زیاد'] })]);
+  });
+
+  it('مقدار اولیه از آرایه ساخته می‌شود', () => {
+    renderWithProviders(<Harness initial={[selectField(['7', '8', '9'])]} />);
+
+    expect(optionsInput().value).toBe('7, 8, 9');
+  });
+
+  it('گزینهٔ خالی به بک‌اند فرستاده نمی‌شود', () => {
+    const onEmit = vi.fn();
+    renderWithProviders(<Harness initial={[selectField([])]} onEmit={onEmit} />);
+
+    fireEvent.change(optionsInput(), { target: { value: '7,,  ,8,' } });
+
+    expect(onEmit).toHaveBeenLastCalledWith([expect.objectContaining({ options: ['7', '8'] })]);
+  });
+});