Alamiami/adds test id to radio group

src/radio-group/__tests__/radio-group.test.tsx

@@ -104,10 +104,14 @@ describe('items', () => {
   test('does not trigger change handler if disabled', () => {
     const onChange = jest.fn();
     const { wrapper } = renderRadioGroup(
-      <RadioGroup value={null} items={[defaultItems[0], { ...defaultItems[1], disabled: true }]} onChange={onChange} />
+      <RadioGroup
+        value={null}
+        items={[defaultItems[0], { ...defaultItems[1], disabled: true, testId: 'disabled-button' }]}
+        onChange={onChange}
+      />
     );
 
-    act(() => wrapper.findButtons()[1].findLabel().click());
+    act(() => wrapper.findButtonByTestId('disabled-button')!.findLabel().click());
     expect(onChange).not.toHaveBeenCalled();
   });
 
@@ -159,29 +163,53 @@ describe('items', () => {
   });
 
   test('displays the proper label', () => {
-    const { wrapper } = renderRadioGroup(<RadioGroup value={null} items={[{ value: '1', label: 'Please select' }]} />);
+    const { wrapper } = renderRadioGroup(
+      <RadioGroup value={null} items={[{ value: '1', label: 'Please select', testId: 'test-button' }]} />
+    );
 
-    expect(wrapper.findButtons()[0].findLabel().getElement()).toHaveTextContent('Please select');
+    expect(wrapper.findButtonByTestId('test-button')!.findLabel().getElement()).toHaveTextContent('Please select');
   });
 
   test('displays no label text when label is empty', () => {
-    const { wrapper } = renderRadioGroup(<RadioGroup value={null} items={[{ value: '1', label: '' }]} />);
-    expect(wrapper.findButtons()[0].findLabel().getElement()).toHaveTextContent('');
+    const { wrapper } = renderRadioGroup(
+      <RadioGroup value={null} items={[{ value: '1', label: '', testId: 'test-button' }]} />
+    );
+    expect(wrapper.findButtonByTestId('test-button')!.findLabel().getElement()).toHaveTextContent('');
   });
 
   test('displays the description', () => {
     const { wrapper } = renderRadioGroup(
       <RadioGroup
         value={null}
-        items={[{ value: '1', label: 'Please select', description: 'Radio description test' }]}
+        items={[{ value: '1', label: 'Please select', description: 'Radio description test', testId: 'test-button' }]}
       />
     );
-    expect(wrapper.findButtons()[0].findDescription()!.getElement()).toHaveTextContent('Radio description test');
+    expect(wrapper.findButtonByTestId('test-button')!.findDescription()!.getElement()).toHaveTextContent(
+      'Radio description test'
+    );
   });
 
   test('does not display description when it is not defined', () => {
-    const { wrapper } = renderRadioGroup(<RadioGroup value={null} items={[{ value: '1', label: 'Please select' }]} />);
-    expect(wrapper.findButtons()[0].findDescription()).toBeNull();
+    const { wrapper } = renderRadioGroup(
+      <RadioGroup value={null} items={[{ value: '1', label: 'Please select', testId: 'test-button' }]} />
+    );
+    expect(wrapper.findButtonByTestId('test-button')!.findDescription()).toBeNull();
+  });
+
+  test('adds test id to items when specified', () => {
+    const { wrapper } = renderRadioGroup(
+      <RadioGroup
+        value={null}
+        items={[
+          { value: '1', label: 'Item 1', testId: 'item-1' },
+          { value: '2', label: 'Item 2', testId: 'item-2' },
+          { value: '3', label: 'Item 3', testId: 'item-3' },
+        ]}
+      />
+    );
+
+    const buttonTestIds = wrapper.findButtons().map(button => button.getElement()!.getAttribute('data-testid'));
+    expect(buttonTestIds).toEqual(['item-1', 'item-2', 'item-3']);
   });
 });
 
@@ -289,14 +317,14 @@ describe('value', () => {
         <RadioGroup
           value="val2"
           items={[
-            { value: 'val1', label: 'Option one', controlId: 'control-id-1' },
-            { value: 'val2', label: 'Option two', controlId: 'control-id-2' },
+            { value: 'val1', label: 'Option one', controlId: 'control-id-1', testId: 'radio-button-1' },
+            { value: 'val2', label: 'Option two', controlId: 'control-id-2', testId: 'radio-button-2' },
           ]}
         />
       );
 
-      check(wrapper.findButtons()[0], 'control-id-1');
-      check(wrapper.findButtons()[1], 'control-id-2');
+      check(wrapper.findButtonByTestId('radio-button-1')!, 'control-id-1');
+      check(wrapper.findButtonByTestId('radio-button-2')!, 'control-id-2');
     });
 
     test('generates a own unique ids for setting up label relations when controlId is not set', () => {
@@ -320,16 +348,16 @@ describe('value', () => {
         <RadioGroup
           value="val2"
           items={[
-            { value: 'val1', label: 'Option one', controlId: id1 },
-            { value: 'val2', label: 'Option two' },
+            { value: 'val1', label: 'Option one', controlId: id1, testId: 'option-1' },
+            { value: 'val2', label: 'Option two', testId: 'option-2' },
           ]}
         />
       );
 
-      const button2 = wrapper.findButtons()[1];
+      const button2 = wrapper.findButtonByTestId('option-2')!;
       const id2 = button2.findNativeInput().getElement().id;
 
-      check(wrapper.findButtons()[0], id1);
+      check(wrapper.findButtonByTestId('option-1')!, id1);
       check(button2, id2);
       expect(id1).not.toBe(id2);
     });

src/radio-group/interfaces.ts

@@ -69,6 +69,7 @@ export namespace RadioGroupProps {
   export interface RadioButtonDefinition {
     value: string;
     label: React.ReactNode;
+    testId?: string;
     description?: React.ReactNode;
     disabled?: boolean;
     controlId?: string;

src/radio-group/internal.tsx

@@ -67,6 +67,7 @@ const InternalRadioGroup = React.forwardRef(
               onChange={onChange}
               controlId={item.controlId}
               readOnly={readOnly}
+              testId={item.testId}
               {...getAnalyticsMetadataAttribute(
                 !item.disabled && !readOnly
                   ? {

src/radio-group/radio-button.tsx

@@ -34,6 +34,7 @@ export default React.forwardRef(function RadioButton(
     onChange,
     readOnly,
     className,
+    testId,
     ...rest
   }: RadioButtonProps,
   ref: React.Ref<HTMLInputElement>
@@ -54,6 +55,7 @@ export default React.forwardRef(function RadioButton(
       disabled={disabled}
       readOnly={readOnly}
       controlId={controlId}
+      data-testid={testId}
       {...copyAnalyticsMetadataAttribute(rest)}
       nativeControl={nativeControlProps => (
         <input

src/test-utils/dom/radio-group/index.ts

@@ -14,6 +14,15 @@ export default class RadioGroupWrapper extends ComponentWrapper {
     return this.findAllByClassName(styles.radio).map(r => new RadioButtonWrapper(r.getElement()));
   }
 
+  /**
+   * Returns the radio button by the specified test id.
+   *
+   * @param testId assigned via data-test id attribute.
+   */
+  findButtonByTestId(testId: string): RadioButtonWrapper | null {
+    return this.findComponent(`.${styles.radio}[data-testid="${testId}"]`, RadioButtonWrapper);
+  }
+
   findInputByValue(value: string): ElementWrapper<HTMLInputElement> | null {
     const safeValue = escapeSelector(value);
     return this.find(`input[value="${safeValue}"]`);