tests added for aria-label and aria-labelledby

src/SelectableBox/tests/SelectableBoxSet.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 
 import { Form } from '../..';
 import SelectableBox from '..';
@@ -37,8 +38,9 @@ describe('<SelectableBox.Set />', () => {
       const tree = renderer.create((<SelectableRadioSet name="testName" />)).toJSON();
       expect(tree).toMatchSnapshot();
     });
-    it('renders with props', () => {
-      // TODO: use react-testing-library to make assertion
+    it('forwards props', () => {
+      render((<SelectableRadioSet name="testName" data-testid="test-radio-set-name" />));
+      expect(screen.getByTestId('test-radio-set-name')).toBeTruthy();
     });
     it('correct render when type prop is changed', () => {
       const setWrapper = mount(<SelectableRadioSet name="set" />);
@@ -87,5 +89,21 @@ describe('<SelectableBox.Set />', () => {
       const selectableBoxSet = wrapper.find(Form.RadioSet);
       expect(selectableBoxSet.hasClass(`pgn__selectable_box-set--${columns}`)).toBe(true);
     });
+    it('renders with an aria-label attribute', () => {
+      render((<SelectableRadioSet name="testName" aria-label="test-radio-set-label" />));
+      expect(screen.getByLabelText('test-radio-set-label')).toBeTruthy();
+    });
+    it('renders with an aria-labelledby attribute', () => {
+      render((
+        <>
+          <h2 id="test-radio-set-label">Radio Set Label text</h2>
+          <SelectableRadioSet
+            name="testName"
+            aria-labelledby="test-radio-set-label"
+          />
+        </>
+      ));
+      expect(screen.getByLabelText('Radio Set Label text')).toBeTruthy();
+    });
   });
 });