From ae69cfb5e5f2e1877afc34585df98398abd6ec06 Mon Sep 17 00:00:00 2001
From: Teresa Gobble <teresagobble@gmail.com>
Date: Thu, 14 Sep 2023 12:57:07 -0500
Subject: [PATCH] Merl 1153 faustwp block editor block controls implement
 checkbox control (#1573)

* Added Checkbox component

* Added Checkbox to registerControl index

* Updated unit testing

* Removed help label from control

* Create curly-toes-cross.md

* Test run of unit testing for GitHub actions
---
 .changeset/curly-toes-cross.md                |  6 ++
 .../src/controls/Checkbox.tsx                 | 21 +++++
 .../block-editor-utils/src/controls/index.ts  |  2 +
 .../tests/controls/Checkbox.test.tsx          | 78 +++++++++++++++++++
 4 files changed, 107 insertions(+)
 create mode 100644 .changeset/curly-toes-cross.md
 create mode 100644 packages/block-editor-utils/src/controls/Checkbox.tsx
 create mode 100644 packages/block-editor-utils/tests/controls/Checkbox.test.tsx

diff --git a/.changeset/curly-toes-cross.md b/.changeset/curly-toes-cross.md
new file mode 100644
index 000000000..6cc256e8f
--- /dev/null
+++ b/.changeset/curly-toes-cross.md
@@ -0,0 +1,6 @@
+---
+"@faustwp/block-editor-utils": patch
+---
+
+Feat: Add `CheckboxControl` field in `block-editor-utils`.
+
diff --git a/packages/block-editor-utils/src/controls/Checkbox.tsx b/packages/block-editor-utils/src/controls/Checkbox.tsx
new file mode 100644
index 000000000..8ca36fed5
--- /dev/null
+++ b/packages/block-editor-utils/src/controls/Checkbox.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { CheckboxControl } from '@wordpress/components';
+import { ControlProps } from '../types/index.js';
+
+function Checkbox<T extends Record<string, any>>({
+  config,
+  props,
+}: ControlProps<T>) {
+  const onChange = (newContent: boolean) => {
+    props.setAttributes({ [config.name]: newContent });
+  };
+  return (
+    <CheckboxControl
+      label={config.label}
+      checked={props.attributes[config.name]}
+      onChange={onChange}
+    />
+  );
+}
+
+export default Checkbox;
diff --git a/packages/block-editor-utils/src/controls/index.ts b/packages/block-editor-utils/src/controls/index.ts
index 6553a8aa7..403735459 100644
--- a/packages/block-editor-utils/src/controls/index.ts
+++ b/packages/block-editor-utils/src/controls/index.ts
@@ -2,6 +2,7 @@ import registerControl from '../helpers/registerControl.js';
 import Text from './Text.js';
 import NumberField from './Number.js';
 import Color from './Color.js';
+import Checkbox from './Checkbox.js';
 import Select from './Select.js';
 import Radio from './Radio.js';
 import Range from './Range.js';
@@ -9,6 +10,7 @@ import Range from './Range.js';
 registerControl('text', Text);
 registerControl('number', NumberField);
 registerControl('color', Color);
+registerControl('checkbox', Checkbox);
 registerControl('select', Select);
 registerControl('radio', Radio);
 registerControl('range', Range);
diff --git a/packages/block-editor-utils/tests/controls/Checkbox.test.tsx b/packages/block-editor-utils/tests/controls/Checkbox.test.tsx
new file mode 100644
index 000000000..1a1f18f29
--- /dev/null
+++ b/packages/block-editor-utils/tests/controls/Checkbox.test.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { screen, render, fireEvent } from '@testing-library/react';
+import Checkbox from '../../src/controls/Checkbox';
+import { Field } from '../../src/types';
+import { useState } from 'react';
+import '@testing-library/jest-dom';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+const config: Field = {
+  location: 'inspector',
+  control: 'checkbox',
+  label: 'checkboxField',
+  default: 'false',
+  name: 'checkboxField',
+  type: 'boolean',
+};
+
+// This should set the checkbox value (aka check the box)
+const props = {
+  setAttributes: jest.fn(),
+  attributes: {
+    checkboxField: '1',
+  },
+};
+
+const setup = () => {
+  const utils = render(<Checkbox config={config} props={props} />);
+  const input = screen.findAllByDisplayValue(props.attributes.checkboxField!);
+  return {
+    input,
+    ...utils,
+  };
+};
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('Checkbox', () => {
+  it('should mount', () => {
+    const { input } = setup();
+    expect(input).toBeTruthy();
+  });
+
+  it('checks that checkbox gets checked', () => {
+    render(
+      <input
+        type="checkbox"
+        aria-label="checkbox"
+      />,
+    );
+
+    const checkbox = screen.getByRole('checkbox', { name: 'checkbox' });
+    expect(checkbox).not.toBeChecked();
+    fireEvent.click(checkbox);
+    expect(checkbox).toBeChecked();
+  });
+
+  it('should have correct display value from props', () => {
+    setup();
+    expect(
+      screen.getByDisplayValue(props.attributes.checkboxField),
+    ).toBeTruthy();
+  });
+});