frontend phase 13

client/src/components/RatingInput/RatingInput.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '../../theme';
+import RatingInput, { RatingInputProps } from './RatingInput';
+
+function renderRating(props: Partial<RatingInputProps> = {}) {
+  const onChange = jest.fn();
+  const utils = render(
+    <ThemeProvider>
+      <RatingInput value={0} onChange={onChange} {...props} />
+    </ThemeProvider>,
+  );
+  return { ...utils, onChange };
+}
+
+describe('<RatingInput/> component', () => {
+  it('renders max stars and exposes the current value', () => {
+    const { container } = renderRating({ value: 3 });
+    expect(container.querySelector('[data-rating="3"]')).toBeInTheDocument();
+    expect(container.querySelectorAll('[data-star]')).toHaveLength(5);
+  });
+
+  it('calls onChange with the clicked star value', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderRating({ value: 0 });
+    await user.click(screen.getByRole('radio', { name: '4' }));
+    expect(onChange).toHaveBeenCalledWith(4);
+  });
+
+  it('reflects the chosen value on the matching star', () => {
+    renderRating({ value: 2 });
+    expect(screen.getByRole('radio', { name: '2' })).toHaveAttribute('aria-checked', 'true');
+    expect(screen.getByRole('radio', { name: '3' })).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('is a non-interactive display with no radios when readOnly', () => {
+    const { container, onChange } = renderRating({ value: 5, readOnly: true });
+    expect(container.querySelector('[data-rating="5"]')).toBeInTheDocument();
+    expect(container.querySelectorAll('[data-star]')).toHaveLength(0);
+    expect(screen.queryByRole('radio')).not.toBeInTheDocument();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});