feat(Radio): Add snapshots and solve storybook issues DEV-136

src/components/Radio/Radio.stories.tsx

@@ -8,7 +8,12 @@ export default {
   component: Radio,
 } as Meta
 
-const Template: Story<RadioProps> = (props) => <Radio {...props} />
+const Template: Story<RadioProps> = (props) => (
+  <>
+    <Radio {...props} />
+    <Radio {...props} />
+  </>
+)
 
 // Each story then reuses that template
 export const Example = Template.bind({})

src/components/RadioGroup/RadioGroup.stories.tsx

@@ -24,6 +24,8 @@ const Template: Story<RadioGroupProps> = (props: RadioGroupProps) => (
 export const Example = Template.bind({})
 
 Example.args = {
+  name: "inputGroup",
+  value: "value 1",
   onChange: action("chosen"),
   children: mockedChildrenOptions,
 }

src/components/RadioGroup/RadioGroup.test.tsx

@@ -0,0 +1,36 @@
+import { render } from "../../tests/utils"
+import Radio from "../Radio/Radio"
+import { axe } from "jest-axe"
+
+describe("Radio Group", () => {
+  test("renders correctly", async () => {
+    const onChange = jest.fn()
+    const { getByLabelText } = render(
+      <Radio.Group
+        name="RADIO_NAME"
+        value="RADIO_GROUP_VALUE"
+        onChange={onChange}
+      >
+        <Radio value="value 1" label="OPTION_Y" />
+        <Radio value="value 2" label="OPTION_X" />
+      </Radio.Group>
+    )
+
+    expect(getByLabelText("OPTION_Y")).toBeInTheDocument()
+  })
+
+  test("passes a11y check", async () => {
+    // Arrange
+    const onChange = jest.fn()
+    const { container } = render(
+      <Radio.Group name="inputGroup" value="SOME_VALUE" onChange={onChange}>
+        <Radio value="value 1" label="Option Y" />
+        <Radio value="value 2" label="Option X" />
+      </Radio.Group>
+    )
+    const results = await axe(container)
+
+    // Assert
+    expect(results).toHaveNoViolations()
+  })
+})

src/components/index.ts

@@ -51,6 +51,9 @@ export type { PaperProps } from "./Paper/Paper"
 export { default as Popover } from "./Popover/Popover"
 export type { PopoverProps } from "./Popover/Popover"
 
+export { default as Radio } from "./Radio/Radio"
+export type { RadioProps } from "./Radio/Radio"
+
 export { default as Selector } from "./Selector/Selector"
 export type { SelectorProps } from "./Selector/Selector"