Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 59 additions & 1 deletion src/atoms/forms/checkbox-input.test.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,63 @@
import { CheckboxInput, CheckboxDisabledClass } from "./checkbox-input";
import faker from "faker";
import React from "react";
import { render, fireEvent, wait } from "@testing-library/react";

describe("CheckboxInput", () => {
test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/6", () => {});
test("when default props, renders checkbox", () => {
// Arrange
const expected = faker.random.words();

// Act
const { getByText } = render(
<CheckboxInput
onChange={() => {}}
label={expected}
checked={false}
/>
);

// Assert
expect(getByText(expected)).not.toBeNil();
});

test(`when disabled prop set to true, renders with ${CheckboxDisabledClass} class`, () => {
// Arrange
const expected = faker.random.words();

// Act
const { container } = render(
<CheckboxInput
onChange={() => {}}
label={expected}
checked={false}
disabled={true}
/>
);
const result = container.querySelector("." + CheckboxDisabledClass);

// Assert
expect(result).not.toBeNil();
});

test("when onChange set, calls handler upon change", async () => {
// Arrange
let isChecked = false;
const handleChange = () => (isChecked = true);
const label = faker.random.word();

// Act
const { getByLabelText } = render(
<CheckboxInput
onChange={handleChange}
label={label}
checked={isChecked}
/>
);

fireEvent.click(getByLabelText(label));

// Assert
expect(isChecked).toBeTrue();
});
});
7 changes: 3 additions & 4 deletions src/atoms/forms/checkbox-input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React from "react";
// -----------------------------------------------------------------------------------------

const ELEMENT_CLASS = "e-checkbox";
export const CheckboxDisabledClass = "-disabled";

// #endregion Constants

Expand All @@ -32,12 +33,10 @@ const CheckboxInput: React.FC<CheckboxInputProperties> = (
const { checked, disabled, label, onChange } = props;

let className = ELEMENT_CLASS;
if (disabled) {
className += " -disabled";
}
let isDisabledClassName = disabled ? CheckboxDisabledClass : "";

return (
<label className={className}>
<label className={`${className} ${isDisabledClassName}`}>
{label}
<input
checked={checked}
Expand Down