removing material from checkbox

lib/src/checkbox/Checkbox.test.js

@@ -1,13 +1,18 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
-
+import userEvent from "@testing-library/user-event";
 import DxcCheckbox from "./Checkbox";
 
 describe("Checkbox component tests", () => {
-  test("Checkbox renders with correct text", () => {
-    const { getByText } = render(<DxcCheckbox label="Checkbox" />);
-
-    expect(getByText("Checkbox")).toBeTruthy();
+  test("Checkbox renders with correct aria-labelledby and aria-required", () => {
+    const { getByText, getByRole } = render(<DxcCheckbox label="Checkbox" />);
+    const labelId = getByText("Checkbox").getAttribute("id");
+    expect(getByRole("checkbox").getAttribute("aria-labelledby")).toBe(labelId);
+    expect(getByRole("checkbox").getAttribute("aria-required")).toBe("true");
+  });
+  test("Optional checkbox renders with correct aria-required", () => {
+    const { getByRole } = render(<DxcCheckbox label="Checkbox" optional />);
+    expect(getByRole("checkbox").getAttribute("aria-required")).toBe("false");
   });
   test("Calls correct function on click", () => {
     const onChange = jest.fn();
@@ -18,34 +23,70 @@ describe("Checkbox component tests", () => {
   });
   test("Uncontrolled checkbox", () => {
     const onChange = jest.fn();
-    const component = render(<DxcCheckbox label="Checkbox" onChange={onChange} />);
+    const component = render(<DxcCheckbox label="Checkbox" onChange={onChange} name="test" />);
     const visibleCheckbox = component.getByText("Checkbox");
     const input = component.getByRole("checkbox");
-    expect(input.checked).toBe(false);
+    const submitInput = component.container.querySelector(`input[name="test"]`);
+    expect(input.getAttribute("aria-checked")).toBe("false");
+    expect(submitInput.checked).toBe(false);
     fireEvent.click(visibleCheckbox);
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith(true);
-    expect(input.checked).toBe(true);
+    expect(input.getAttribute("aria-checked")).toBe("true");
+    expect(submitInput.checked).toBe(true);
   });
   test("Controlled checkbox", () => {
     const onChange = jest.fn();
-    const component = render(<DxcCheckbox label="Checkbox" checked={false} onChange={onChange} />);
+    const component = render(<DxcCheckbox label="Checkbox" checked={false} onChange={onChange} name="test" />);
 
     const input = component.getByRole("checkbox");
     const visibleCheckbox = component.getByText("Checkbox");
+    const submitInput = component.container.querySelector(`input[name="test"]`);
 
     fireEvent.click(visibleCheckbox);
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith(true);
-    expect(input.checked).toBe(false);
+    expect(input.getAttribute("aria-checked")).toBe("false");
+    expect(submitInput.checked).toBe(false);
   });
   test("Renders with correct initial value and initial state when it is uncontrolled", () => {
-    const { getByRole } = render(
-      <DxcCheckbox label="Default label" defaultChecked value="test-defaultChecked" />
+    const { getByRole, container } = render(
+      <DxcCheckbox label="Default label" defaultChecked value="test-defaultChecked" name="test" />
     );
+    const checkbox = getByRole("checkbox");
+    const submitInput = container.querySelector(`input[name="test"]`);
+    expect(submitInput.value).toBe("test-defaultChecked");
+    expect(checkbox.getAttribute("aria-checked")).toBe("true");
+    expect(submitInput.checked).toBe(true);
+  });
+  test("Test disable keyboard and mouse interactions", () => {
+    const onChange = jest.fn();
+    const { getByRole, getByText, container } = render(
+      <DxcCheckbox label="Checkbox" onChange={onChange} disabled name="test" />
+    );
+
     const input = getByRole("checkbox");
-    expect(input.checked).toBe(true);
-    expect(input.value).toBe("test-defaultChecked");
-    expect(input.getAttribute("aria-checked")).toBe("true");
+    const visibleCheckbox = getByText("Checkbox");
+    const submitInput = container.querySelector(`input[name="test"]`);
+
+    fireEvent.click(visibleCheckbox);
+    expect(onChange).toHaveBeenCalledTimes(0);
+    expect(input.getAttribute("aria-checked")).toBe("false");
+    expect(input.getAttribute("aria-disabled")).toBe("true");
+    expect(submitInput.checked).toBe(false);
+    userEvent.tab();
+    expect(document.activeElement === input).toBeFalsy();
+  });
+
+  test("Test keyboard interactions", () => {
+    const onChange = jest.fn();
+    const { getByRole } = render(<DxcCheckbox label="Checkbox" name="test" onChange={onChange} />);
+
+    const checkbox = getByRole("checkbox");
+
+    userEvent.tab();
+    expect(document.activeElement === checkbox).toBeTruthy();
+    fireEvent.keyDown(checkbox, { key: " ", code: "Space", keyCode: 32, charCode: 32 });
+    expect(onChange).toHaveBeenCalledWith(true);
   });
 });