@moontra/moonui 3.2.0 → 3.4.0

package/src/components/ui/__tests__/color-picker.test.tsx

@@ -1,365 +1,181 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+/**
+ * ColorPicker / SimpleColorPicker / GradientPicker testleri.
+ *
+ * ─── BU DOSYA NEDEN BAŞTAN YAZILDI (issue #263) ──────────────────────────────
+ * Önceki hâli var olmayan bir API'ye yazılmıştı: `color` / `onColorChange`
+ * prop'ları, `data-testid="color-display"`, `"color-area"`, `"opacity-slider"`
+ * gibi test-id'ler ve "Eyedropper", "Color Stops", "Add Stop", "Enter color..."
+ * gibi metinler. Bunların HİÇBİRİ kaynakta geçmiyordu (10/10 işaret için grep
+ * sonucu 0) — dolayısıyla 30 testin 22'si sürekli kırmızıydı ve dosya hiçbir
+ * regresyonu yakalayamıyordu.
+ *
+ * Gerçek API:
+ *   ColorPicker       { value, onChange, size, shape, showInput, showPresets,
+ *                       presets, allowOpacity, format, disableCopy, triggerMode,
+ *                       disabled, className }
+ *   SimpleColorPicker { value, onChange, colors, size, className }
+ *   GradientPicker    { value: { start, end, angle }, onChange, className }
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
 import { ColorPicker, SimpleColorPicker, GradientPicker } from '../color-picker';
 import '@testing-library/jest-dom';
 
-describe('ColorPicker Components', () => {
-  describe('ColorPicker', () => {
-    it('renders correctly with default props', () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      expect(screen.getByRole('button')).toBeInTheDocument();
-      expect(screen.getByText('#ffffff')).toBeInTheDocument();
-    });
-
-    it('displays selected color', () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ff0000" onColorChange={mockOnChange} />);
-      
-      expect(screen.getByText('#ff0000')).toBeInTheDocument();
-      const colorDisplay = screen.getByTestId('color-display');
-      expect(colorDisplay).toHaveStyle('background-color: #ff0000');
-    });
-
-    it('opens color picker when button is clicked', async () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-    });
-
-    it('calls onColorChange when color is selected', async () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        const colorArea = screen.getByTestId('color-area');
-        fireEvent.click(colorArea);
-        expect(mockOnChange).toHaveBeenCalled();
-      });
-    });
-
-    it('handles HSL color format', () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="hsl(120, 100%, 50%)" onColorChange={mockOnChange} />);
-      
-      expect(screen.getByText('hsl(120, 100%, 50%)')).toBeInTheDocument();
-    });
-
-    it('handles RGB color format', () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="rgb(255, 0, 0)" onColorChange={mockOnChange} />);
-      
-      expect(screen.getByText('rgb(255, 0, 0)')).toBeInTheDocument();
-    });
+/** ColorPicker'ı render edip Popover panelini açar. */
+function renderOpen(props: Partial<React.ComponentProps<typeof ColorPicker>> = {}) {
+  const utils = render(<ColorPicker {...props} />);
+  fireEvent.click(screen.getByRole('button', { name: 'Pick a color' }));
+  return utils;
+}
+
+/**
+ * Radix TabsTrigger seçimi `onMouseDown` üzerinden yapar — `fireEvent.click`
+ * mouseDown üretmediği için sekme DEĞİŞMEZ (ölçülerek doğrulandı).
+ */
+function activateTab(name: string) {
+  fireEvent.mouseDown(screen.getByRole('tab', { name }));
+}
+
+describe('ColorPicker', () => {
+  it('tetikleyici buton erişilebilir ad taşır ve seçili rengi gösterir', () => {
+    render(<ColorPicker value="#ff0000" />);
+
+    const trigger = screen.getByRole('button', { name: 'Pick a color' });
+    expect(trigger).toBeInTheDocument();
+    // Renk arka planda taşınır (buton içeriği sr-only metinden ibarettir).
+    expect(trigger).toHaveStyle({ backgroundColor: '#ff0000' });
+  });
 
-    it('handles alpha channel', async () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="rgba(255, 0, 0, 0.5)" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        expect(screen.getByText('Opacity')).toBeInTheDocument();
-        const opacitySlider = screen.getByTestId('opacity-slider');
-        expect(opacitySlider).toBeInTheDocument();
-      });
-    });
+  it('disabled iken tetikleyici devre dışıdır', () => {
+    render(<ColorPicker value="#ffffff" disabled />);
+    expect(screen.getByRole('button', { name: 'Pick a color' })).toBeDisabled();
+  });
 
-    it('shows eyedropper tool when available', async () => {
-      // Mock the EyeDropper API
-      Object.defineProperty(window, 'EyeDropper', {
-        value: class MockEyeDropper {
-          async open() {
-            return { sRGBHex: '#ff0000' };
-          }
-        }
-      });
+  it('özel className tetikleyiciye uygulanır', () => {
+    render(<ColorPicker value="#ffffff" className="custom-class" />);
+    expect(screen.getByRole('button', { name: 'Pick a color' })).toHaveClass('custom-class');
+  });
 
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        expect(screen.getByText('Eyedropper')).toBeInTheDocument();
-      });
-    });
+  it('tıklanınca panel açılır ve üç sekme sunar', () => {
+    renderOpen({ value: '#ffffff' });
 
-    it('handles disabled state', () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} disabled />);
-      
-      const button = screen.getByRole('button');
-      expect(button).toBeDisabled();
-    });
+    expect(screen.getByRole('tab', { name: 'Picker' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Sliders' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Input' })).toBeInTheDocument();
   });
 
-  describe('SimpleColorPicker', () => {
-    it('renders correctly with preset colors', () => {
-      const mockOnChange = jest.fn();
-      render(<SimpleColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      expect(screen.getByRole('button')).toBeInTheDocument();
-      
-      // Check for preset color buttons
-      const colorButtons = screen.getAllByRole('button');
-      expect(colorButtons.length).toBeGreaterThan(1);
-    });
+  it('Input sekmesinde hex girişi bulunur', () => {
+    renderOpen({ value: '#ff0000' });
 
-    it('displays selected color', () => {
-      const mockOnChange = jest.fn();
-      render(<SimpleColorPicker color="#ff0000" onColorChange={mockOnChange} />);
-      
-      const selectedButton = screen.getByRole('button', { pressed: true });
-      expect(selectedButton).toHaveStyle('background-color: #ff0000');
-    });
+    activateTab('Input');
+    expect(screen.getByPlaceholderText('#000000')).toBeInTheDocument();
+  });
 
-    it('calls onColorChange when preset color is clicked', () => {
-      const mockOnChange = jest.fn();
-      render(<SimpleColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const colorButtons = screen.getAllByRole('button');
-      fireEvent.click(colorButtons[1]); // Click second color button
-      
-      expect(mockOnChange).toHaveBeenCalled();
-    });
+  it('hex girişine geçerli değer yazılınca onChange tetiklenir', () => {
+    const onChange = jest.fn();
+    renderOpen({ value: '#ff0000', onChange });
 
-    it('shows custom color input', () => {
-      const mockOnChange = jest.fn();
-      render(<SimpleColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      expect(screen.getByPlaceholderText('Enter color...')).toBeInTheDocument();
+    activateTab('Input');
+    fireEvent.change(screen.getByPlaceholderText('#000000'), {
+      target: { value: '#00ff00' },
     });
 
-    it('handles custom color input', () => {
-      const mockOnChange = jest.fn();
-      render(<SimpleColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const input = screen.getByPlaceholderText('Enter color...');
-      fireEvent.change(input, { target: { value: '#ff0000' } });
-      fireEvent.blur(input);
-      
-      expect(mockOnChange).toHaveBeenCalledWith('#ff0000');
-    });
+    expect(onChange).toHaveBeenCalledWith('#00ff00');
   });
 
-  describe('GradientPicker', () => {
-    it('renders correctly with default gradient', () => {
-      const mockOnChange = jest.fn();
-      render(<GradientPicker gradient="linear-gradient(to right, #ff0000, #0000ff)" onGradientChange={mockOnChange} />);
-      
-      expect(screen.getByRole('button')).toBeInTheDocument();
-      expect(screen.getByText('linear-gradient(to right, #ff0000, #0000ff)')).toBeInTheDocument();
-    });
-
-    it('opens gradient picker when button is clicked', async () => {
-      const mockOnChange = jest.fn();
-      render(<GradientPicker gradient="linear-gradient(to right, #ff0000, #0000ff)" onGradientChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-    });
+  it('preset swatch tıklanınca o renkle onChange tetiklenir', () => {
+    const onChange = jest.fn();
+    renderOpen({ value: '#ffffff', onChange, presets: ['#ef4444', '#22c55e'] });
 
-    it('shows gradient type selector', async () => {
-      const mockOnChange = jest.fn();
-      render(<GradientPicker gradient="linear-gradient(to right, #ff0000, #0000ff)" onGradientChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        expect(screen.getByText('Linear')).toBeInTheDocument();
-        expect(screen.getByText('Radial')).toBeInTheDocument();
-      });
-    });
+    fireEvent.click(screen.getByRole('button', { name: 'Select color #22c55e' }));
+    expect(onChange).toHaveBeenCalledWith('#22c55e');
+  });
 
-    it('shows color stops', async () => {
-      const mockOnChange = jest.fn();
-      render(<GradientPicker gradient="linear-gradient(to right, #ff0000, #0000ff)" onGradientChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        expect(screen.getByText('Color Stops')).toBeInTheDocument();
-      });
-    });
+  it('preset swatch butonları erişilebilir ad taşır', () => {
+    // Regresyon: swatch'ın tek içeriği arka plan rengiydi; aria-label olmadan
+    // ekran okuyucu yalnızca "button" diyordu.
+    renderOpen({ value: '#ef4444', presets: ['#ef4444', '#22c55e'] });
+
+    expect(screen.getByRole('button', { name: 'Select color #ef4444' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    );
+    expect(screen.getByRole('button', { name: 'Select color #22c55e' })).toHaveAttribute(
+      'aria-pressed',
+      'false'
+    );
+  });
 
-    it('allows adding color stops', async () => {
-      const mockOnChange = jest.fn();
-      render(<GradientPicker gradient="linear-gradient(to right, #ff0000, #0000ff)" onGradientChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        const addButton = screen.getByText('Add Stop');
-        fireEvent.click(addButton);
-        expect(mockOnChange).toHaveBeenCalled();
-      });
-    });
+  it('showPresets=false iken preset bölümü render edilmez', () => {
+    renderOpen({ value: '#ffffff', showPresets: false, presets: ['#ef4444'] });
+    expect(screen.queryByRole('button', { name: 'Select color #ef4444' })).not.toBeInTheDocument();
+  });
+});
 
-    it('handles gradient direction change', async () => {
-      const mockOnChange = jest.fn();
-      render(<GradientPicker gradient="linear-gradient(to right, #ff0000, #0000ff)" onGradientChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        const directionSelect = screen.getByText('to right');
-        fireEvent.click(directionSelect);
-        
-        const toBottomOption = screen.getByText('to bottom');
-        fireEvent.click(toBottomOption);
-        
-        expect(mockOnChange).toHaveBeenCalled();
-      });
-    });
+describe('SimpleColorPicker', () => {
+  it('verilen renkler için birer swatch render eder', () => {
+    render(<SimpleColorPicker value="#ffffff" colors={['#ef4444', '#22c55e', '#3b82f6']} />);
+    expect(screen.getAllByRole('button')).toHaveLength(3);
   });
 
-  describe('Common functionality', () => {
-    it('handles keyboard navigation', async () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.keyDown(button, { key: 'Enter' });
-      
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-    });
+  it('swatch tıklanınca o renkle onChange tetiklenir', () => {
+    const onChange = jest.fn();
+    render(
+      <SimpleColorPicker value="#ffffff" onChange={onChange} colors={['#ef4444', '#22c55e']} />
+    );
 
-    it('closes picker when clicking outside', async () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-      
-      fireEvent.click(document.body);
-      
-      await waitFor(() => {
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-      });
-    });
+    fireEvent.click(screen.getByRole('button', { name: 'Select color #22c55e' }));
+    expect(onChange).toHaveBeenCalledWith('#22c55e');
+  });
 
-    it('handles ESC key to close picker', async () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-      
-      fireEvent.keyDown(document, { key: 'Escape' });
-      
-      await waitFor(() => {
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-      });
-    });
+  it('seçili swatch aria-pressed ile işaretlenir', () => {
+    render(<SimpleColorPicker value="#ef4444" colors={['#ef4444', '#22c55e']} />);
+
+    expect(screen.getByRole('button', { name: 'Select color #ef4444' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    );
+    expect(screen.getByRole('button', { name: 'Select color #22c55e' })).toHaveAttribute(
+      'aria-pressed',
+      'false'
+    );
+  });
 
-    it('applies custom className', () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} className="custom-class" />);
-      
-      const button = screen.getByRole('button');
-      expect(button).toHaveClass('custom-class');
-    });
+  it('onChange verilmese de tıklama hata vermez', () => {
+    render(<SimpleColorPicker value="#ffffff" colors={['#ef4444']} />);
+    expect(() =>
+      fireEvent.click(screen.getByRole('button', { name: 'Select color #ef4444' }))
+    ).not.toThrow();
   });
+});
 
-  describe('Accessibility', () => {
-    it('has proper ARIA attributes', () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      expect(button).toHaveAttribute('aria-haspopup', 'dialog');
-      expect(button).toHaveAttribute('aria-expanded', 'false');
-    });
+describe('GradientPicker', () => {
+  const gradient = { start: '#ff0000', end: '#0000ff', angle: 90 };
 
-    it('updates aria-expanded when picker is open', async () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        expect(button).toHaveAttribute('aria-expanded', 'true');
-      });
-    });
+  it('başlangıç/bitiş rengi ve açı alanlarını render eder', () => {
+    render(<GradientPicker value={gradient} />);
 
-    it('has proper labels for screen readers', () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ffffff" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      expect(button).toHaveAttribute('aria-label', 'Open color picker');
-    });
+    expect(screen.getByText('Start Color')).toBeInTheDocument();
+    expect(screen.getByText('End Color')).toBeInTheDocument();
+    expect(screen.getByText('Angle')).toBeInTheDocument();
+  });
 
-    it('provides color value to screen readers', () => {
-      const mockOnChange = jest.fn();
-      render(<ColorPicker color="#ff0000" onColorChange={mockOnChange} />);
-      
-      const button = screen.getByRole('button');
-      expect(button).toHaveAttribute('aria-describedby');
-      expect(screen.getByText('#ff0000')).toBeInTheDocument();
-    });
+  it('başlangıç ve bitiş için birer ColorPicker tetikleyicisi sunar', () => {
+    render(<GradientPicker value={gradient} />);
+    expect(screen.getAllByRole('button', { name: 'Pick a color' })).toHaveLength(2);
   });
 
-  describe('Form integration', () => {
-    it('works with form validation', () => {
-      const mockOnChange = jest.fn();
-      
-      render(
-        <form>
-          <ColorPicker color="#ffffff" onColorChange={mockOnChange} required />
-        </form>
-      );
-      
-      const button = screen.getByRole('button');
-      expect(button).toBeValid();
-    });
+  it('başlangıç rengi değişince onChange tüm gradient nesnesiyle çağrılır', () => {
+    const onChange = jest.fn();
+    render(<GradientPicker value={gradient} onChange={onChange} />);
 
-    it('handles form reset', () => {
-      const mockOnChange = jest.fn();
-      
-      render(
-        <form>
-          <ColorPicker color="#ff0000" onColorChange={mockOnChange} />
-          <button type="reset">Reset</button>
-        </form>
-      );
-      
-      const resetButton = screen.getByText('Reset');
-      fireEvent.click(resetButton);
-      
-      // Form reset should trigger appropriate behavior
-      expect(screen.getAllByRole('button')).toHaveLength(2);
-    });
+    // İlk tetikleyici "Start Color"; panelden bir preset seçilir.
+    fireEvent.click(screen.getAllByRole('button', { name: 'Pick a color' })[0]);
+    const swatch = screen.getAllByRole('button', { name: /^Select color / })[0];
+    const picked = swatch.getAttribute('aria-label')!.replace('Select color ', '');
+    fireEvent.click(swatch);
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ start: picked, end: gradient.end, angle: gradient.angle })
+    );
   });
-});
+});

package/src/components/ui/__tests__/radio-group.test.tsx

@@ -552,4 +552,64 @@ describe('RadioGroup Components', () => {
       expect(option2).toBeDisabled()
     })
   })
+
+  describe('Uncontrolled mod ve klavye focus izi', () => {
+    it('defaultValue ile uncontrolled çalışır', () => {
+      render(
+        <RadioGroup defaultValue="option2">
+          <RadioGroupItem value="option1" data-testid="r1" />
+          <RadioGroupItem value="option2" data-testid="r2" />
+        </RadioGroup>
+      )
+
+      expect(screen.getByTestId('r2')).toBeChecked()
+      expect(screen.getByTestId('r1')).not.toBeChecked()
+
+      // Tüketici onValueChange vermeden de seçim değişebilmeli.
+      fireEvent.click(screen.getByTestId('r1'))
+      expect(screen.getByTestId('r1')).toBeChecked()
+      expect(screen.getByTestId('r2')).not.toBeChecked()
+    })
+
+    it('controlled mod defaultValue tarafından ezilmez', () => {
+      render(
+        <RadioGroup value="option1" defaultValue="option2">
+          <RadioGroupItem value="option1" data-testid="r1" />
+          <RadioGroupItem value="option2" data-testid="r2" />
+        </RadioGroup>
+      )
+
+      expect(screen.getByTestId('r1')).toBeChecked()
+      expect(screen.getByTestId('r2')).not.toBeChecked()
+    })
+
+    it('uncontrolled modda onValueChange yine de çağrılır', () => {
+      const onValueChange = jest.fn()
+      render(
+        <RadioGroup defaultValue="option1" onValueChange={onValueChange}>
+          <RadioGroupItem value="option1" data-testid="r1" />
+          <RadioGroupItem value="option2" data-testid="r2" />
+        </RadioGroup>
+      )
+
+      fireEvent.click(screen.getByTestId('r2'))
+      expect(onValueChange).toHaveBeenCalledWith('option2')
+    })
+
+    it('gizli input peer sınıfını taşır — focus izi görünür label\'a taşınabilsin', () => {
+      render(
+        <RadioGroup>
+          <RadioGroupItem value="option1" data-testid="r1" />
+        </RadioGroup>
+      )
+
+      // Gerçekte odaklanan eleman sr-only input; `peer` olmadan görünür label
+      // hiçbir focus izi gösteremez (klavye kullanıcısı nerede olduğunu göremez).
+      const input = screen.getByTestId('r1')
+      expect(input).toHaveClass('peer', 'sr-only')
+
+      const label = input.parentElement?.querySelector('label')
+      expect(label?.className).toContain('peer-focus-visible:ring-2')
+    })
+  })
 })