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>({ + config, + props, +}: ControlProps) { + const onChange = (newContent: boolean) => { + props.setAttributes({ [config.name]: newContent }); + }; + return ( + + ); +} + +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(); + 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( + , + ); + + 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(); + }); +});