Skip to content

Commit 98bcd0b

Browse files
author
Said Shah
committed
Added tests for radion button
1 parent 2368707 commit 98bcd0b

File tree

2 files changed

+53
-3
lines changed

2 files changed

+53
-3
lines changed

src/atoms/forms/radio-button-input.test.tsx

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React from "react";
2-
import { render } from "@testing-library/react";
3-
import { RadioButton } from "./radio-button-input";
2+
import { render, fireEvent, wait } from "@testing-library/react";
3+
import {
4+
RadioButton,
5+
RadioButtonSelectedClassName,
6+
} from "./radio-button-input";
47
import faker from "faker";
58
import uuid from "uuid";
69

@@ -22,4 +25,50 @@ describe("RadioButton", () => {
2225
// Assert
2326
expect(getByLabelText(expected)).not.toBeNull();
2427
});
28+
29+
test(`when checked prop is true, renders check ${RadioButtonSelectedClassName} class name`, () => {
30+
// Arrange
31+
const expected = faker.random.word();
32+
33+
// Act
34+
const { container } = render(
35+
<RadioButton
36+
checked={true}
37+
id={uuid()}
38+
label={expected}
39+
name={faker.random.word()}
40+
/>
41+
);
42+
const result = container.querySelector(
43+
"." + RadioButtonSelectedClassName
44+
);
45+
46+
// Assert
47+
expect(result).not.toBeNull();
48+
});
49+
50+
test("when onClick set, calls handler upon click", async () => {
51+
// Arrange
52+
let calledTimes = 0;
53+
const handleClick = () => calledTimes++;
54+
const buttonText = "test button";
55+
56+
// Act
57+
const { getByText } = render(
58+
<RadioButton
59+
onClick={handleClick}
60+
checked={false}
61+
id={uuid()}
62+
name={faker.random.word()}
63+
label={buttonText}
64+
/>
65+
);
66+
67+
fireEvent.click(getByText(buttonText));
68+
69+
// Assert
70+
await wait(() => {
71+
expect(calledTimes).toEqual(1);
72+
});
73+
});
2574
});

src/atoms/forms/radio-button-input.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from "react";
22
import { forwardRef } from "react";
33

44
const COMPONENT_CLASS = "c-radio";
5+
export const RadioButtonSelectedClassName = "-selected";
56

67
export interface RadioButtonProps {
78
autofocus?: boolean;
@@ -41,7 +42,7 @@ const RadioButton: React.RefForwardingComponent<
4142
onCheck?.(e);
4243
const handleClick = (): void => onClick?.();
4344

44-
const cssChecked = checked ? "-selected" : "";
45+
const cssChecked = checked ? RadioButtonSelectedClassName : "";
4546

4647
return (
4748
<div className={`${COMPONENT_CLASS} ${cssChecked} ${cssClassName}`}>

0 commit comments

Comments
 (0)