Merge pull request #15249 from overleaf/rd-odc-radio

Radio buttons for Onboarding Data Collection

GitOrigin-RevId: 8c4d1e965f3263b4c8a41c129c5c3d6e3ef10986

services/web/test/frontend/shared/components/radio-chip.test.tsx

@@ -0,0 +1,57 @@
+import { expect } from 'chai'
+import { render, screen } from '@testing-library/react'
+import RadioChip from '@/shared/components/radio-chip'
+
+describe('<RadioChip />', function () {
+  const defaultProps = {
+    name: 'test',
+    label: 'Test',
+    value: 'testValue',
+    onChange: () => {},
+  }
+
+  describe('component renders and with label', function () {
+    it('renders and label is provided', function () {
+      render(<RadioChip {...defaultProps} />)
+      screen.getByText('Test')
+    })
+  })
+
+  describe('props', function () {
+    it('should be checked when the checked prop is provided', function () {
+      render(<RadioChip {...defaultProps} checked />)
+      const radioChip = screen.getByRole('radio') as HTMLInputElement
+      expect(radioChip.checked).to.equal(true)
+    })
+
+    it('should be disabled when the disabled prop is provided', function () {
+      render(<RadioChip {...defaultProps} disabled />)
+      const radioChip = screen.getByRole('radio') as HTMLInputElement
+      expect(radioChip.disabled).to.equal(true)
+    })
+
+    it('should have the required attribute when the required prop is provided', function () {
+      render(<RadioChip {...defaultProps} required />)
+      const radioChip = screen.getByRole('radio') as HTMLInputElement
+      expect(radioChip.required).to.equal(true)
+    })
+
+    it('should use the provided name prop', function () {
+      render(<RadioChip {...defaultProps} name="testName" />)
+      const radioChip = screen.getByRole('radio') as HTMLInputElement
+      expect(radioChip.name).to.equal('testName')
+    })
+
+    it('should use the provided value prop', function () {
+      render(<RadioChip {...defaultProps} />)
+      const radioChip = screen.getByRole('radio') as HTMLInputElement
+      expect(radioChip.value).to.equal('testValue')
+    })
+
+    it('should have the data-disabled attribute when the disabled prop is provided', function () {
+      render(<RadioChip {...defaultProps} disabled />)
+      const label = screen.getByText('Test')?.closest('label')
+      expect(label?.getAttribute('data-disabled')).to.equal('true')
+    })
+  })
+})