radio tests

Author: GoldGroove06

src/components/ui/RadioCards/tests/RadioCards.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import RadioCards from '../RadioCards';
+
+describe('RadioCards', () => {
+ const options = [
+ { id: 'config-1', value: '8-core CPU', label: '8-core CPU' },
+ { id: 'config-2', value: '16-core CPU', label: '16-core CPU' },
+ { id: 'config-3', value: '32-core CPU', label: '32-core CPU' }
+ ];
+
+ function renderRadioCards(props = {}) {
+ return render(
+ <RadioCards.Root name="test-group" {...props}>
+ {options.map((option) => (
+ <RadioCards.Item key={option.id} value={option.value} data-testid={`radio-item-${option.value}`}>
+ {option.label}
+ </RadioCards.Item>
+ ))}
+ </RadioCards.Root>
+ );
+ }
+
+ it('renders all radio items with correct labels', () => {
+ renderRadioCards();
+ options.forEach((option) => {
+ expect(screen.getByText(option.label)).toBeInTheDocument();
+ });
+ });
+
+ it('selects an item when clicked and only one is selected at a time', () => {
+ renderRadioCards();
+ const first = screen.getByTestId('radio-item-8-core CPU');
+ const second = screen.getByTestId('radio-item-16-core CPU');
+ const third = screen.getByTestId('radio-item-32-core CPU');
+
+ // Initially none selected
+ expect(first).toHaveAttribute('aria-checked', 'false');
+ expect(second).toHaveAttribute('aria-checked', 'false');
+ expect(third).toHaveAttribute('aria-checked', 'false');
+
+ // Click first
+ fireEvent.click(first);
+ expect(first).toHaveAttribute('aria-checked', 'true');
+ expect(second).toHaveAttribute('aria-checked', 'false');
+ expect(third).toHaveAttribute('aria-checked', 'false');
+
+ // Click second
+ fireEvent.click(second);
+ expect(first).toHaveAttribute('aria-checked', 'false');
+ expect(second).toHaveAttribute('aria-checked', 'true');
+ expect(third).toHaveAttribute('aria-checked', 'false');
+ });
+
+ it('supports defaultValue prop', () => {
+ renderRadioCards({ defaultValue: '16-core CPU' });
+ const second = screen.getByTestId('radio-item-16-core CPU');
+ expect(second).toHaveAttribute('aria-checked', 'true');
+ });
+
+ it('calls onValueChange when selection changes', () => {
+ const handleChange = jest.fn();
+ renderRadioCards({ onValueChange: handleChange });
+ const third = screen.getByTestId('radio-item-32-core CPU');
+ fireEvent.click(third);
+ expect(handleChange).toHaveBeenCalledWith('32-core CPU');
+ });
+
+ it('applies disabled prop to all items', () => {
+ renderRadioCards({ disabled: true });
+ options.forEach((option) => {
+ const item = screen.getByTestId(`radio-item-${option.value}`);
+ expect(item).toHaveAttribute('aria-disabled', 'true');
+ });
+ });
+
+ it('applies custom className to root', () => {
+ const { container } = renderRadioCards({ className: 'custom-root' });
+ expect(container.firstChild).toHaveClass('custom-root');
+ });
+});

src/components/ui/RadioGroup/fragments/RadioGroupLabel.tsx

@@ -11,7 +11,7 @@ export type RadioGroupLabelProps = {
 
 const RadioGroupLabel = ({ className = '', asChild = false, children, ...props }: RadioGroupLabelProps) => {
  const { rootClass } = React.useContext(RadioGroupContext);
- return <Primitive.label {...props} className={clsx(`${rootClass}-label`, rootClass, className)} asChild={asChild}> {children} </Primitive.label>;
+ return <Primitive.label {...props} className={clsx(`${rootClass}-label`, className)} asChild={asChild}> {children} </Primitive.label>;
 };
 
 export default RadioGroupLabel;

src/components/ui/RadioGroup/fragments/RadioGroupRoot.tsx

@@ -20,15 +20,15 @@ type RadioGroupRootProps = {
 
 } & RadioGroupPrimitiveProps.Root;
 
-const RadioGroupRoot = ({ children, className = '', customRootClass = '', variant = '', size = '', color = '', ...props }: RadioGroupRootProps) => {
+const RadioGroupRoot = ({ children, className = '', customRootClass = '', variant, size, color = '', ...props }: RadioGroupRootProps) => {
  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
  const dataAttributes = useCreateDataAttribute('radio-group', { variant, size });
 
  const accentAttributes = useCreateDataAccentColorAttribute(color);
  const composedAttributes = useComposeAttributes(dataAttributes(), accentAttributes());
 
  return <RadioGroupContext.Provider value={{ rootClass }}>
- <RadioGroupPrimitive.Root className={clsx(`${rootClass}-root`, rootClass, className)} {...composedAttributes} {...props}> {children} </RadioGroupPrimitive.Root>
+ <RadioGroupPrimitive.Root className={clsx(`${rootClass}-root`, className)} {...composedAttributes()} {...props}> {children} </RadioGroupPrimitive.Root>
  </RadioGroupContext.Provider>;
 };
 

src/components/ui/RadioGroup/tests/RadioGroup.test.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import RadioGroup from '../RadioGroup';
+
+// Helper for the story pattern
+const options = [
+ { id: 'html', value: 'html', label: 'HTML' },
+ { id: 'css', value: 'css', label: 'CSS' },
+ { id: 'javascript', value: 'javascript', label: 'JavaScript' }
+];
+
+// Explicitly type props to allow all RadioGroupRoot props, but make children optional
+function StoryRadioGroup(props: Omit<React.ComponentProps<typeof RadioGroup.Root>, 'children'> & { children?: React.ReactNode }) {
+ return (
+ <RadioGroup.Root {...props}>
+ {props.children ??
+ options.map((option) => (
+ <RadioGroup.Label key={option.id} data-testid={`label-${option.value}`}>
+ <RadioGroup.Item value={option.value} data-testid={`item-${option.value}`}>
+ <RadioGroup.Indicator data-testid={`indicator-${option.value}`} />
+ </RadioGroup.Item>
+ {option.label}
+ </RadioGroup.Label>
+ ))}
+ </RadioGroup.Root>
+ );
+}
+
+describe('RadioGroup (fragments)', () => {
+ it('renders without crashing (story pattern)', () => {
+ render(<StoryRadioGroup />);
+ options.forEach(opt => {
+ expect(screen.getByText(opt.label)).toBeInTheDocument();
+ expect(screen.getByTestId(`item-${opt.value}`)).toBeInTheDocument();
+ });
+ });
+
+ it('selects the correct radio on click (uncontrolled)', () => {
+ render(<StoryRadioGroup defaultValue="css" name="test-group" />);
+ const itemHtml = screen.getByTestId('item-html');
+ const itemCss = screen.getByTestId('item-css');
+ const itemJs = screen.getByTestId('item-javascript');
+ // Only CSS is selected initially
+ expect(itemHtml).toHaveAttribute('aria-checked', 'false');
+ expect(itemCss).toHaveAttribute('aria-checked', 'true');
+ expect(itemJs).toHaveAttribute('aria-checked', 'false');
+ // Click HTML
+ fireEvent.click(itemHtml);
+ expect(itemHtml).toHaveAttribute('aria-checked', 'true');
+ expect(itemCss).toHaveAttribute('aria-checked', 'false');
+ expect(itemJs).toHaveAttribute('aria-checked', 'false');
+ });
+
+ it('shows indicator only for selected item', () => {
+ render(<StoryRadioGroup defaultValue="javascript" />);
+ options.forEach(opt => {
+ const indicator = screen.queryByTestId(`indicator-${opt.value}`);
+ if (opt.value === 'javascript') {
+ expect(indicator).toBeInTheDocument();
+ // Optionally: expect(indicator).not.toBeEmptyDOMElement();
+ } else {
+ expect(indicator).not.toBeInTheDocument();
+ }
+ });
+ });
+
+ it('renders label text and associates with item', () => {
+ render(<StoryRadioGroup />);
+ options.forEach(opt => {
+ const label = screen.getByTestId(`label-${opt.value}`);
+ expect(label).toHaveTextContent(opt.label);
+ // The item is a button inside the label
+ const item = screen.getByTestId(`item-${opt.value}`);
+ expect(label).toContainElement(item);
+ });
+ });
+
+ it('passes custom className, variant, size, color to root', () => {
+ render(
+ <RadioGroup.Root className="custom-class" data-testid="radio-group" variant="filled" size="lg" color="primary">
+ <RadioGroup.Item value="a">A</RadioGroup.Item>
+ </RadioGroup.Root>
+ );
+ const group = screen.getByTestId('radio-group');
+ console.log('group:', group);
+ // Data attributes for variant/size/color
+ expect(group.getAttribute('data-radio-group-variant')).toBe('filled');
+ expect(group.getAttribute('data-radio-group-size')).toBe('lg');
+ expect(group.getAttribute('data-rad-ui-accent-color')).toBe('primary');
+ });
+
+ it('warns on direct usage of RadioGroup', () => {
+ const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+ render(<RadioGroup />);
+ expect(spy).toHaveBeenCalledWith(
+ 'Direct usage of RadioGroup is not supported. Please use RadioGroup.Root and RadioGroup.Item instead.'
+ );
+ spy.mockRestore();
+ });
+});