From 2fcb86f15fccb4b9b8a7593ff0fd40a55c0e6950 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 29 Jul 2019 12:39:08 +0100 Subject: [PATCH 01/27] Adds initial component Note this is copied wholescale from original PR https://github.com/WordPress/gutenberg/pull/16730 --- .../components/dimension-control/README.md | 120 +++++++++++++++ .../components/dimension-control/buttons.js | 61 ++++++++ .../src/components/dimension-control/index.js | 94 ++++++++++++ .../src/components/dimension-control/sizes.js | 54 +++++++ .../components/dimension-control/style.scss | 22 +++ .../test/__snapshots__/buttons.test.js.snap | 101 ++++++++++++ .../test/__snapshots__/index.test.js.snap | 145 ++++++++++++++++++ .../dimension-control/test/buttons.test.js | 141 +++++++++++++++++ .../dimension-control/test/index.test.js | 79 ++++++++++ 9 files changed, 817 insertions(+) create mode 100644 packages/block-editor/src/components/dimension-control/README.md create mode 100644 packages/block-editor/src/components/dimension-control/buttons.js create mode 100644 packages/block-editor/src/components/dimension-control/index.js create mode 100644 packages/block-editor/src/components/dimension-control/sizes.js create mode 100644 packages/block-editor/src/components/dimension-control/style.scss create mode 100644 packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap create mode 100644 packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap create mode 100644 packages/block-editor/src/components/dimension-control/test/buttons.test.js create mode 100644 packages/block-editor/src/components/dimension-control/test/index.test.js diff --git a/packages/block-editor/src/components/dimension-control/README.md b/packages/block-editor/src/components/dimension-control/README.md new file mode 100644 index 0000000000000..bdedb089ba395 --- /dev/null +++ b/packages/block-editor/src/components/dimension-control/README.md @@ -0,0 +1,120 @@ +DimensionControl +============================= + +`DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions. It is intended for use within the editor `InspectorControls` sidebar. + +## Usage + +In a block's `edit` implementation, render a `` component. + + +```jsx +import { registerBlockType } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; +import { + DimensionControl, +} from '@wordpress/block-editor'; + +registerBlockType( 'my-plugin/my-block', { + // ... + + attributes: { + // other attributes here + // ... + + paddingSize: { + type: 'string', + }, + }, + + edit( { attributes, setAttributes, clientId } ) { + + const { paddingSize } = attributes; + + + const updateSpacing = ( dimension, size, device = '' ) => { + setAttributes( { + [ `${ dimension }${ device }` ]: size, + } ); + }; + + const resetSpacingDimension = ( dimension, device = '' ) => { + setAttributes( { + [ `${ dimension }${ device }` ]: '', + } ); + }; + + return ( + + ); + } +} ); +``` + +_Note:_ it is recommend to partially apply the value of the Block attribute to be updated (eg: `paddingSize`, `marginSize`...etc) to your callback functions. This avoids the need to unecessarily couple the component to the Block attribute schema. + +_Note:_ by default if you do not provide an initial `currentSize` prop for the current dimension value, then no value will be selected (ie: there is no default dimension set). + +## Props + +### `title` +* **Type:** `String` +* **Default:** `undefined` +* **Required:** Yes + +The human readable title for the control. + +### `property` +* **Type:** `String` +* **Default:** `undefined` +* **Required:** Yes + +The spacing/dimension property which this UI is to control. Common examples are `padding` and `margin`. + +### `currentSize` +* **Type:** `String` +* **Default:** `''` +* **Required:** No + +The current value of the dimension the UI controls. If provided the UI with automatically highlight the control representing the current value. + +### `device` +* **Type:** `String` +* **Default:** `all` +* **Required:** No + +The device type to which this spacing applies. By default this is set to `all`. Useful when rendering multiple `DimensionControl` components for each device type supported by your Block. + +### `deviceIcon` +* **Type:** `String` +* **Default:** `desktop` +* **Required:** No + +A dashicon for the device type (see `device` above). + +### `onSpacingChange` +* **Type:** `Function` +* **Default:** `undefined` +* **Required:** Yes +* **Arguments:**: + - `size` - a string representing the selected size (eg: `medium`) + +A callback which is triggered when a spacing size value changes (is selected/clicked). + + +### `onReset` +* **Type:** `Function` +* **Default:** `undefined` +* **Required:** Yes +* **Arguments:**: + +A callback which is triggered when the "reset" UI is activated. + + diff --git a/packages/block-editor/src/components/dimension-control/buttons.js b/packages/block-editor/src/components/dimension-control/buttons.js new file mode 100644 index 0000000000000..2c95b906df91e --- /dev/null +++ b/packages/block-editor/src/components/dimension-control/buttons.js @@ -0,0 +1,61 @@ +/** + * External dependencies + */ +import { isArray, isEmpty } from 'lodash'; + +/** + * WordPress dependencies + */ +import { + Button, + ButtonGroup, + Tooltip, +} from '@wordpress/components'; + +import { + Fragment, +} from '@wordpress/element'; + +export function DimensionButtons( { id, sizes, currentSize, onChangeSpacingSize } ) { + if ( ! id ) { + return null; + } + + if ( ! sizes || ! isArray( sizes ) || isEmpty( sizes ) ) { + return null; + } + + return ( + + + + { sizes.map( function( size ) { + const isSelected = currentSize === size.slug; + + return ( + + + + ); + } ) } + + + + ); +} + +export default DimensionButtons; diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js new file mode 100644 index 0000000000000..811d9ba80fbd8 --- /dev/null +++ b/packages/block-editor/src/components/dimension-control/index.js @@ -0,0 +1,94 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + Icon, + SelectControl, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +import { withInstanceId } from '@wordpress/compose'; + +import { + Fragment, +} from '@wordpress/element'; + +/** + * Internal dependencies + */ +import sizesTable, { findSizeBySlug } from './sizes'; + +export function DimensionControl( props ) { + const { label, device = 'all', deviceIcon = 'desktop', currentSize, onSpacingChange, onReset } = props; + + /** + * Determines the size from the size slug (eg: `medium`) + * and decides whether to call the change or reset callback + * handlers + * @param {string} val the DOMEvent event.target + * @return {void} + */ + const onChangeSpacingSize = ( val ) => { + const theSize = findSizeBySlug( sizesTable, val ); + + if ( ! theSize || currentSize === theSize.slug ) { + resetSpacing(); + } else { + onSpacingChange( theSize.slug ); + } + }; + + /** + * Applies the callback to handle resetting + * a dimension spacing values + * @return {void} + */ + const resetSpacing = () => onReset(); + + /** + * Converts the sizes lookup tablet + * to a format suitable for use in the + * options prop + * @param {Array} sizes the sizes + * @return {Array} the array of options + */ + const formatSizesAsOptions = ( sizes ) => { + const options = sizes.map( ( { name, slug } ) => ( { + label: name, + value: slug, + } ) ); + + return [ { + label: __( 'Please select…' ), + value: '', + } ].concat( options ); + }; + + const selectLabel = ( + + + { label } + + ); + + return ( + + ); +} + +export default withInstanceId( DimensionControl ); diff --git a/packages/block-editor/src/components/dimension-control/sizes.js b/packages/block-editor/src/components/dimension-control/sizes.js new file mode 100644 index 0000000000000..da89d33a19fa7 --- /dev/null +++ b/packages/block-editor/src/components/dimension-control/sizes.js @@ -0,0 +1,54 @@ +/** + * Sizes + * + * defines the sizes used in dimension controls + * all hardcoded `size` values are based on the value of + * the Sass variable `$block-padding` from + * `packages/block-editor/src/components/dimension-control/sizes.js`. + */ + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Finds the correct size object from the provided sizes + * table by size slug (eg: `medium`) + * @param {Array} sizes containing objects for each size definition + * @param {string} slug a string representation of the size (eg: `medium`) + * @return {Object} the matching size definition + */ +export const findSizeBySlug = ( sizes, slug ) => sizes.find( ( size ) => slug === size.slug ); + +export default [ + { + name: __( 'None' ), + abbr: __( 'No' ), + size: 0, + slug: 'none', + }, + { + name: __( 'Small' ), + abbr: __( 'S' ), + size: 14, + slug: 'small', + }, + { + name: __( 'Medium' ), + abbr: __( 'M' ), + size: 24, + slug: 'medium', + }, + { + name: __( 'Large' ), + abbr: __( 'L' ), + size: 34, + slug: 'large', + }, { + name: __( 'Extra Large' ), + abbr: __( 'XL' ), + size: 60, + slug: 'xlarge', + }, +]; diff --git a/packages/block-editor/src/components/dimension-control/style.scss b/packages/block-editor/src/components/dimension-control/style.scss new file mode 100644 index 0000000000000..7f1481747dfe1 --- /dev/null +++ b/packages/block-editor/src/components/dimension-control/style.scss @@ -0,0 +1,22 @@ +.block-editor-dimension-control { + + .components-base-control__field { + display: flex; + align-items: center; + } + + .components-base-control__label { + display: flex; + align-items: center; + margin-right: 1em; + margin-bottom: 0; + + .dashicon { + margin-right: 0.5em; + } + } + + &.is-manual .components-base-control__label { + width: 10em; + } +} diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap new file mode 100644 index 0000000000000..55fa97f249de1 --- /dev/null +++ b/packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap @@ -0,0 +1,101 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DimensionButtons renders correctly with defaults 1`] = ` + + + + + + No + + + + + + + S + + + + + + + M + + + + + + + L + + + + + + + XL + + + + + +`; diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000000..84c89a5402f86 --- /dev/null +++ b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap @@ -0,0 +1,145 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DimensionControl rendering correctly for different properties renders correctly for "margin" property 1`] = ` + +
+ + + All + + + Reset + +
+ + +`; + +exports[`DimensionControl rendering correctly for different properties renders correctly for "padding" property 1`] = ` + +
+ + + All + + + Reset + +
+ + +`; diff --git a/packages/block-editor/src/components/dimension-control/test/buttons.test.js b/packages/block-editor/src/components/dimension-control/test/buttons.test.js new file mode 100644 index 0000000000000..116b5132ed24d --- /dev/null +++ b/packages/block-editor/src/components/dimension-control/test/buttons.test.js @@ -0,0 +1,141 @@ +/** + * External dependencies + */ +import { shallow, mount } from 'enzyme'; +import { uniqueId } from 'lodash'; + +/** + * Internal dependencies + */ +import DimensionButtons from '../buttons'; + +describe( 'DimensionButtons', () => { + const onChangeHandler = jest.fn(); + + const sizesTable = [ + { + name: 'None', + abbr: 'No', + size: 0, + slug: 'none', + }, + { + name: 'Small', + abbr: 'S', + size: 14, + slug: 'small', + }, + { + name: 'Medium', + abbr: 'M', + size: 24, + slug: 'medium', + }, + { + name: 'Large', + abbr: 'L', + size: 34, + slug: 'large', + }, { + name: 'Extra Large', + abbr: 'XL', + size: 60, + slug: 'xlarge', + }, + ]; + + afterEach( () => { + onChangeHandler.mockClear(); + } ); + + it( 'renders correctly with defaults', () => { + const wrapper = shallow( + + ); + expect( wrapper ).toMatchSnapshot(); + } ); + + describe( 'required props', () => { + it( 'does not render without a "id" prop', () => { + const wrapper = shallow( + + ); + + expect( wrapper.isEmptyRender() ).toBe( true ); + } ); + + it( 'does not render without a "sizes" prop', () => { + const wrapper = shallow( + + ); + + expect( wrapper.isEmptyRender() ).toBe( true ); + } ); + } ); + + describe( 'selected states', () => { + it( 'renders a selected button state for the matching "currentSize" prop', () => { + const size = 'medium'; + + const wrapper = mount( + + ); + + const selectedButton = wrapper.find( 'button' ).filter( '.is-primary' ); + + expect( selectedButton ).toHaveLength( 1 ); + expect( selectedButton.prop( 'value' ) ).toBe( size ); + expect( selectedButton.prop( 'aria-pressed' ) ).toBe( true ); + } ); + + it( 'does not render a selected button if no matching "currentSize" prop is provided', () => { + const wrapper = mount( + + ); + + const unpressedButtons = wrapper.find( 'button' ).filterWhere( ( button ) => { + return false === button.prop( 'aria-pressed' ); + } ); + + const pressedButtons = wrapper.find( 'button' ).filterWhere( ( button ) => { + return true === button.prop( 'aria-pressed' ); + } ); + + expect( wrapper.find( 'button' ).filter( '.is-primary' ) ).toHaveLength( 0 ); + expect( pressedButtons ).toHaveLength( 0 ); + expect( unpressedButtons ).toHaveLength( sizesTable.length ); + } ); + } ); + + describe( 'callbacks', () => { + it( 'triggers onChangeSpacingSize callback on button click', () => { + const wrapper = mount( + + ); + + wrapper.find( 'button[value="small"]' ).simulate( 'click' ); + + expect( onChangeHandler ).toHaveBeenCalledTimes( 1 ); + } ); + } ); +} ); diff --git a/packages/block-editor/src/components/dimension-control/test/index.test.js b/packages/block-editor/src/components/dimension-control/test/index.test.js new file mode 100644 index 0000000000000..ac9e4a8be8c67 --- /dev/null +++ b/packages/block-editor/src/components/dimension-control/test/index.test.js @@ -0,0 +1,79 @@ +/** + * External dependencies + */ +import { shallow, mount } from 'enzyme'; +import { uniqueId } from 'lodash'; + +/** + * Internal dependencies + */ +import { DimensionControl } from '../'; + +describe( 'DimensionControl', () => { + const onChangeHandler = jest.fn(); + const onResetHandler = jest.fn(); + + afterEach( () => { + onChangeHandler.mockClear(); + onResetHandler.mockClear(); + } ); + + describe( 'rendering correctly for different properties', () => { + it( 'renders correctly for "padding" property', () => { + const wrapper = shallow( + + ); + expect( wrapper ).toMatchSnapshot(); + } ); + + it( 'renders correctly for "margin" property', () => { + const wrapper = shallow( + + ); + expect( wrapper ).toMatchSnapshot(); + } ); + } ); + + describe( 'callbacks', () => { + it( 'should call onSpacingChange handler with correct args on size button click', () => { + const wrapper = mount( + + ); + + wrapper.find( 'button[value="small"]' ).simulate( 'click' ); + + expect( onChangeHandler ).toHaveBeenCalledTimes( 1 ); + expect( onChangeHandler ).toHaveBeenCalledWith( 'small' ); + } ); + + it( 'should call onReset handler with correct args on reset button click', () => { + const wrapper = mount( + + ); + + wrapper.find( 'button[aria-label="Reset Padding for desktop"]' ).simulate( 'click' ); + + expect( onResetHandler ).toHaveBeenCalledTimes( 1 ); + } ); + } ); +} ); From 56e067022ee0bc8466291b1dc380c4ecf4953912 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 29 Jul 2019 13:09:41 +0100 Subject: [PATCH 02/27] Remove redunant files. Refactors tests. --- .../components/dimension-control/buttons.js | 61 ----- .../src/components/dimension-control/index.js | 15 +- .../test/__snapshots__/buttons.test.js.snap | 101 ------- .../test/__snapshots__/index.test.js.snap | 253 +++++++++--------- .../dimension-control/test/buttons.test.js | 141 ---------- .../dimension-control/test/index.test.js | 60 +++-- packages/block-editor/src/style.scss | 1 + 7 files changed, 171 insertions(+), 461 deletions(-) delete mode 100644 packages/block-editor/src/components/dimension-control/buttons.js delete mode 100644 packages/block-editor/src/components/dimension-control/test/__snapshots__/buttons.test.js.snap delete mode 100644 packages/block-editor/src/components/dimension-control/test/buttons.test.js diff --git a/packages/block-editor/src/components/dimension-control/buttons.js b/packages/block-editor/src/components/dimension-control/buttons.js deleted file mode 100644 index 2c95b906df91e..0000000000000 --- a/packages/block-editor/src/components/dimension-control/buttons.js +++ /dev/null @@ -1,61 +0,0 @@ -/** - * External dependencies - */ -import { isArray, isEmpty } from 'lodash'; - -/** - * WordPress dependencies - */ -import { - Button, - ButtonGroup, - Tooltip, -} from '@wordpress/components'; - -import { - Fragment, -} from '@wordpress/element'; - -export function DimensionButtons( { id, sizes, currentSize, onChangeSpacingSize } ) { - if ( ! id ) { - return null; - } - - if ( ! sizes || ! isArray( sizes ) || isEmpty( sizes ) ) { - return null; - } - - return ( - - - - { sizes.map( function( size ) { - const isSelected = currentSize === size.slug; - - return ( - - - - ); - } ) } - - - - ); -} - -export default DimensionButtons; diff --git a/packages/block-editor/src/components/dimension-control/index.js b/packages/block-editor/src/components/dimension-control/index.js index 811d9ba80fbd8..2fab6515ab18d 100644 --- a/packages/block-editor/src/components/dimension-control/index.js +++ b/packages/block-editor/src/components/dimension-control/index.js @@ -2,6 +2,7 @@ * External dependencies */ import classnames from 'classnames'; +import { noop } from 'lodash'; /** * WordPress dependencies @@ -24,7 +25,7 @@ import { import sizesTable, { findSizeBySlug } from './sizes'; export function DimensionControl( props ) { - const { label, device = 'all', deviceIcon = 'desktop', currentSize, onSpacingChange, onReset } = props; + const { label, icon, iconLabel = 'all', currentSize, onSpacingChange = noop, onReset = noop, className = '' } = props; /** * Determines the size from the size slug (eg: `medium`) @@ -71,17 +72,19 @@ export function DimensionControl( props ) { const selectLabel = ( - + { icon && ( + + ) } { label } ); return ( - - - - - No - - - - - - - S - - - - - - - M - - - - - - - L - - - - - - - XL - - - - - -`; diff --git a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap index 84c89a5402f86..6a1f2bd0b04cc 100644 --- a/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap +++ b/packages/block-editor/src/components/dimension-control/test/__snapshots__/index.test.js.snap @@ -1,145 +1,132 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`DimensionControl rendering correctly for different properties renders correctly for "margin" property 1`] = ` - -
- + hideLabelFromVision={false} + label={ + + Padding + + } + onChange={[Function]} + options={ + Array [ + Object { + "label": "Please select…", + "value": "", + }, + Object { + "label": "None", + "value": "none", + }, + Object { + "label": "Small", + "value": "small", + }, + Object { + "label": "Medium", + "value": "medium", + }, + Object { + "label": "Large", + "value": "large", + }, + Object { + "label": "Extra Large", + "value": "xlarge", + }, + ] + } +/> +`; + +exports[`DimensionControl rendering renders with icon and custom icon label 1`] = ` + - All - - - Reset - -
- - + Margin + + } + onChange={[Function]} + options={ + Array [ + Object { + "label": "Please select…", + "value": "", + }, + Object { + "label": "None", + "value": "none", + }, + Object { + "label": "Small", + "value": "small", + }, + Object { + "label": "Medium", + "value": "medium", + }, + Object { + "label": "Large", + "value": "large", + }, + Object { + "label": "Extra Large", + "value": "xlarge", + }, + ] + } +/> `; -exports[`DimensionControl rendering correctly for different properties renders correctly for "padding" property 1`] = ` - -
- + hideLabelFromVision={false} + label={ + - All - - - Reset - -
- - + Margin + + } + onChange={[Function]} + options={ + Array [ + Object { + "label": "Please select…", + "value": "", + }, + Object { + "label": "None", + "value": "none", + }, + Object { + "label": "Small", + "value": "small", + }, + Object { + "label": "Medium", + "value": "medium", + }, + Object { + "label": "Large", + "value": "large", + }, + Object { + "label": "Extra Large", + "value": "xlarge", + }, + ] + } +/> `; diff --git a/packages/block-editor/src/components/dimension-control/test/buttons.test.js b/packages/block-editor/src/components/dimension-control/test/buttons.test.js deleted file mode 100644 index 116b5132ed24d..0000000000000 --- a/packages/block-editor/src/components/dimension-control/test/buttons.test.js +++ /dev/null @@ -1,141 +0,0 @@ -/** - * External dependencies - */ -import { shallow, mount } from 'enzyme'; -import { uniqueId } from 'lodash'; - -/** - * Internal dependencies - */ -import DimensionButtons from '../buttons'; - -describe( 'DimensionButtons', () => { - const onChangeHandler = jest.fn(); - - const sizesTable = [ - { - name: 'None', - abbr: 'No', - size: 0, - slug: 'none', - }, - { - name: 'Small', - abbr: 'S', - size: 14, - slug: 'small', - }, - { - name: 'Medium', - abbr: 'M', - size: 24, - slug: 'medium', - }, - { - name: 'Large', - abbr: 'L', - size: 34, - slug: 'large', - }, { - name: 'Extra Large', - abbr: 'XL', - size: 60, - slug: 'xlarge', - }, - ]; - - afterEach( () => { - onChangeHandler.mockClear(); - } ); - - it( 'renders correctly with defaults', () => { - const wrapper = shallow( - - ); - expect( wrapper ).toMatchSnapshot(); - } ); - - describe( 'required props', () => { - it( 'does not render without a "id" prop', () => { - const wrapper = shallow( - - ); - - expect( wrapper.isEmptyRender() ).toBe( true ); - } ); - - it( 'does not render without a "sizes" prop', () => { - const wrapper = shallow( - - ); - - expect( wrapper.isEmptyRender() ).toBe( true ); - } ); - } ); - - describe( 'selected states', () => { - it( 'renders a selected button state for the matching "currentSize" prop', () => { - const size = 'medium'; - - const wrapper = mount( - - ); - - const selectedButton = wrapper.find( 'button' ).filter( '.is-primary' ); - - expect( selectedButton ).toHaveLength( 1 ); - expect( selectedButton.prop( 'value' ) ).toBe( size ); - expect( selectedButton.prop( 'aria-pressed' ) ).toBe( true ); - } ); - - it( 'does not render a selected button if no matching "currentSize" prop is provided', () => { - const wrapper = mount( - - ); - - const unpressedButtons = wrapper.find( 'button' ).filterWhere( ( button ) => { - return false === button.prop( 'aria-pressed' ); - } ); - - const pressedButtons = wrapper.find( 'button' ).filterWhere( ( button ) => { - return true === button.prop( 'aria-pressed' ); - } ); - - expect( wrapper.find( 'button' ).filter( '.is-primary' ) ).toHaveLength( 0 ); - expect( pressedButtons ).toHaveLength( 0 ); - expect( unpressedButtons ).toHaveLength( sizesTable.length ); - } ); - } ); - - describe( 'callbacks', () => { - it( 'triggers onChangeSpacingSize callback on button click', () => { - const wrapper = mount( - - ); - - wrapper.find( 'button[value="small"]' ).simulate( 'click' ); - - expect( onChangeHandler ).toHaveBeenCalledTimes( 1 ); - } ); - } ); -} ); diff --git a/packages/block-editor/src/components/dimension-control/test/index.test.js b/packages/block-editor/src/components/dimension-control/test/index.test.js index ac9e4a8be8c67..88ce24637fcf6 100644 --- a/packages/block-editor/src/components/dimension-control/test/index.test.js +++ b/packages/block-editor/src/components/dimension-control/test/index.test.js @@ -18,24 +18,35 @@ describe( 'DimensionControl', () => { onResetHandler.mockClear(); } ); - describe( 'rendering correctly for different properties', () => { - it( 'renders correctly for "padding" property', () => { + describe( 'rendering', () => { + it( 'renders with defaults', () => { const wrapper = shallow( ); expect( wrapper ).toMatchSnapshot(); } ); - it( 'renders correctly for "margin" property', () => { + it( 'renders with icon and default icon label', () => { const wrapper = shallow( + ); + expect( wrapper ).toMatchSnapshot(); + } ); + + it( 'renders with icon and custom icon label', () => { + const wrapper = shallow( + ); expect( wrapper ).toMatchSnapshot(); @@ -43,35 +54,46 @@ describe( 'DimensionControl', () => { } ); describe( 'callbacks', () => { - it( 'should call onSpacingChange handler with correct args on size button click', () => { + it( 'should call onSpacingChange handler with correct args on size change', () => { const wrapper = mount( ); - wrapper.find( 'button[value="small"]' ).simulate( 'click' ); + wrapper.find( 'select' ).at( 0 ).simulate( 'change', { + target: { + value: 'small', + }, + } ); + + wrapper.find( 'select' ).at( 0 ).simulate( 'change', { + target: { + value: 'medium', + }, + } ); - expect( onChangeHandler ).toHaveBeenCalledTimes( 1 ); - expect( onChangeHandler ).toHaveBeenCalledWith( 'small' ); + expect( onChangeHandler ).toHaveBeenCalledTimes( 2 ); + expect( onChangeHandler.mock.calls[ 0 ][ 0 ] ).toEqual( 'small' ); + expect( onChangeHandler.mock.calls[ 1 ][ 0 ] ).toEqual( 'medium' ); } ); - it( 'should call onReset handler with correct args on reset button click', () => { + it( 'should call onReset handler with when no size is provided on change', () => { const wrapper = mount( ); - wrapper.find( 'button[aria-label="Reset Padding for desktop"]' ).simulate( 'click' ); + wrapper.find( 'select' ).at( 0 ).simulate( 'change', { + target: { + value: '', // this happens when you select the "default"