Merl 1153 faustwp block editor block controls implement checkbox cont…

…rol (#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

@@ -0,0 +1,6 @@
+---
+"@faustwp/block-editor-utils": patch
+---
+
+Feat: Add `CheckboxControl` field in `block-editor-utils`.
+

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;

packages/block-editor-utils/src/controls/index.ts

@@ -2,13 +2,15 @@ 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';
 
 registerControl('text', Text);
 registerControl('number', NumberField);
 registerControl('color', Color);
+registerControl('checkbox', Checkbox);
 registerControl('select', Select);
 registerControl('radio', Radio);
 registerControl('range', Range);

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();
+  });
+});