From 4665c18b4e34c832ed2264d91ade6ec919db2b92 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Mar 2022 19:22:00 +0100 Subject: [PATCH 1/9] Add Storybook example --- .../src/unit-control/stories/index.js | 50 ++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js index 9603a05e3941a1..e22d41697dadcf 100644 --- a/packages/components/src/unit-control/stories/index.js +++ b/packages/components/src/unit-control/stories/index.js @@ -13,7 +13,7 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import UnitControl from '../'; -import { CSS_UNITS } from '../utils'; +import { CSS_UNITS, parseUnit } from '../utils'; export default { title: 'Components (Experimental)/UnitControl', @@ -125,3 +125,51 @@ export function WithCustomUnits() { ); } + +export const Controlled = () => { + const [ state, setState ] = useState( { valueA: '', valueB: '' } ); + + // Keep the unit sync'd between the two `UnitControl` instances. + const onUnitControlChange = ( fieldName, newValue ) => { + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const [ quantity, newUnit ] = parseUnit( newValue ); + + if ( ! Number.isFinite( quantity ) ) { + return; + } + + const nextState = { ...state, [ fieldName ]: newValue }; + + Object.entries( state ).forEach( ( [ stateProp, stateValue ] ) => { + const [ stateQuantity, stateUnit ] = parseUnit( stateValue ); + + if ( stateProp !== fieldName && stateUnit !== newUnit ) { + nextState[ stateProp ] = `${ stateQuantity }${ newUnit }`; + } + } ); + + setState( nextState ); + }; + + const style = { + display: 'inline-block', + maxWidth: '200px', + }; + + return ( + <> + onUnitControlChange( 'valueA', v ) } + style={ style } + /> + onUnitControlChange( 'valueB', v ) } + style={ style } + /> + + ); +}; From 36a28c722c38f66609f9e92a4c2c85c088b6d9a3 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Mar 2022 19:22:37 +0100 Subject: [PATCH 2/9] Fix UnitControl s controlled unit state --- packages/components/src/unit-control/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 8a7a165b25ef97..abb116ccc329ac 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -13,7 +13,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { forwardRef, useMemo, useRef } from '@wordpress/element'; +import { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { ENTER } from '@wordpress/keycodes'; @@ -70,6 +70,10 @@ function UnitControl( } ); + useEffect( () => { + setUnit( initialUnit ); + }, [ initialUnit ] ); + // Stores parsed value for hand-off in state reducer. const refParsedValue = useRef< string | null >( null ); From 2c2200e827f35ac31b5b7bba39784cb329788ef3 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Mar 2022 23:06:14 +0100 Subject: [PATCH 3/9] Add `@testing-library/user-event` to dev dependencies --- package-lock.json | 99 ++++++++++++++++++++++++++--------------------- package.json | 1 + 2 files changed, 55 insertions(+), 45 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3b9fc16747f34c..33eb494a31db5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14546,6 +14546,15 @@ } } }, + "@testing-library/user-event": { + "version": "13.5.0", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz", + "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.12.5" + } + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -20398,6 +20407,15 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "dev": true, + "requires": { + "follow-redirects": "^1.10.0" + } + }, "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", @@ -21449,7 +21467,8 @@ "follow-redirects": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", - "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" + "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==", + "dev": true }, "forever-agent": { "version": "0.6.1", @@ -21784,7 +21803,8 @@ "immediate": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", - "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=" + "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=", + "dev": true }, "inflight": { "version": "1.0.6", @@ -22036,6 +22056,35 @@ "verror": "1.10.0" } }, + "jszip": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.6.0.tgz", + "integrity": "sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==", + "dev": true, + "requires": { + "lie": "~3.3.0", + "pako": "~1.0.2", + "readable-stream": "~2.3.6", + "set-immediate-shim": "~1.0.1" + }, + "dependencies": { + "readable-stream": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", + "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", + "dev": true, + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + } + } + }, "keypather": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/keypather/-/keypather-1.10.2.tgz", @@ -22108,6 +22157,7 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", + "dev": true, "requires": { "immediate": "~3.0.5" } @@ -23458,7 +23508,8 @@ "set-immediate-shim": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz", - "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=" + "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=", + "dev": true }, "setprototypeof": { "version": "1.1.1", @@ -25281,15 +25332,6 @@ "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==", "dev": true }, - "axios": { - "version": "0.26.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz", - "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==", - "dev": true, - "requires": { - "follow-redirects": "^1.14.8" - } - }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -36587,12 +36629,6 @@ "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz", "integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==" }, - "immediate": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", - "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=", - "dev": true - }, "immer": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", @@ -41417,18 +41453,6 @@ } } }, - "jszip": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.7.1.tgz", - "integrity": "sha512-ghL0tz1XG9ZEmRMcEN2vt7xabrDdqHHeykgARpmZ0BiIctWxM47Vt63ZO2dnp4QYt/xJVLLy5Zv1l/xRdh2byg==", - "dev": true, - "requires": { - "lie": "~3.3.0", - "pako": "~1.0.2", - "readable-stream": "~2.3.6", - "set-immediate-shim": "~1.0.1" - } - }, "junk": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz", @@ -41567,15 +41591,6 @@ "type-check": "~0.3.2" } }, - "lie": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", - "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", - "dev": true, - "requires": { - "immediate": "~3.0.5" - } - }, "lilconfig": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz", @@ -52035,12 +52050,6 @@ "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" }, - "set-immediate-shim": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz", - "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=", - "dev": true - }, "set-value": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz", diff --git a/package.json b/package.json index 740a36fd0db8f7..fe209d8223821e 100755 --- a/package.json +++ b/package.json @@ -108,6 +108,7 @@ "@storybook/manager-webpack5": "6.4.9", "@storybook/react": "6.4.9", "@testing-library/jest-dom": "5.16.1", + "@testing-library/user-event": "13.5.0", "@testing-library/react": "11.2.2", "@testing-library/react-native": "9.0.0", "@types/classnames": "2.3.1", From 296c9f18c6c11b3298e4c6ced36d2e1835e65817 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Mar 2022 23:06:41 +0100 Subject: [PATCH 4/9] Add unit test --- .../components/src/unit-control/test/index.js | 72 ++++++++++++++++++- 1 file changed, 71 insertions(+), 1 deletion(-) diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js index 2efee9ea337590..46e7d86be98a9d 100644 --- a/packages/components/src/unit-control/test/index.js +++ b/packages/components/src/unit-control/test/index.js @@ -1,17 +1,20 @@ /** * External dependencies */ -import { render, fireEvent } from '@testing-library/react'; +import { render, fireEvent, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; /** * WordPress dependencies */ import { UP, DOWN, ENTER, ESCAPE } from '@wordpress/keycodes'; +import { useState } from '@wordpress/element'; /** * Internal dependencies */ import UnitControl from '../'; +import { parseUnit } from '../utils'; const getComponent = () => document.body.querySelector( '.components-unit-control' ); @@ -25,6 +28,47 @@ const getUnitLabel = () => const fireKeyDown = ( data ) => fireEvent.keyDown( document.activeElement || document.body, data ); +const ControlledSyncUnits = () => { + const [ state, setState ] = useState( { valueA: '', valueB: '' } ); + + // Keep the unit sync'd between the two `UnitControl` instances. + const onUnitControlChange = ( fieldName, newValue ) => { + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const [ quantity, newUnit ] = parseUnit( newValue ); + + if ( ! Number.isFinite( quantity ) ) { + return; + } + + const nextState = { ...state, [ fieldName ]: newValue }; + + Object.entries( state ).forEach( ( [ stateProp, stateValue ] ) => { + const [ stateQuantity, stateUnit ] = parseUnit( stateValue ); + + if ( stateProp !== fieldName && stateUnit !== newUnit ) { + nextState[ stateProp ] = `${ stateQuantity }${ newUnit }`; + } + } ); + + setState( nextState ); + }; + + return ( + <> + onUnitControlChange( 'valueA', v ) } + /> + onUnitControlChange( 'valueB', v ) } + /> + + ); +}; + describe( 'UnitControl', () => { describe( 'Basic rendering', () => { it( 'should render', () => { @@ -266,6 +310,32 @@ describe( 'UnitControl', () => { expect( state ).toBe( '62%' ); } ); + + it( 'should update unit value when a new raw value is passed', () => { + render( ); + + const [ inputA, inputB ] = screen.getAllByRole( 'spinbutton' ); + const [ selectA, selectB ] = screen.getAllByRole( 'combobox' ); + const [ remOptionA ] = screen.getAllByRole( 'option', { + name: 'rem', + } ); + const [ , vwOptionB ] = screen.getAllByRole( 'option', { + name: 'vw', + } ); + + userEvent.type( inputA, '55' ); + userEvent.type( inputB, '14' ); + + userEvent.selectOptions( selectA, remOptionA ); + + expect( selectA ).toHaveValue( 'rem' ); + expect( selectB ).toHaveValue( 'rem' ); + + userEvent.selectOptions( selectB, vwOptionB ); + + expect( selectA ).toHaveValue( 'vw' ); + expect( selectB ).toHaveValue( 'vw' ); + } ); } ); describe( 'Unit Parser', () => { From df1183c5ac330a5fa6fe142c049597a918ff6aad Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 1 Mar 2022 23:32:50 +0100 Subject: [PATCH 5/9] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 6e95c817109bbe..578aa54debafec 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,7 @@ - Normalize `font-family` on `Button`, `ColorPalette`, `ComoboboxControl`, `DateTimePicker`, `FormTokenField`, `InputControl`, `SelectControl`, and `ToggleGroupControl` ([#38969](https://github.com/WordPress/gutenberg/pull/38969)). - Fix input value selection of `InputControl`-based controls in Firefox and Safari with axial constraint of drag gesture ([#38968](https://github.com/WordPress/gutenberg/pull/38968)). +- Fix `UnitControl`'s behavior around updating the unit when a new `value` is passed (i.e. in controlled mode). ([#39148](https://github.com/WordPress/gutenberg/pull/39148)). ## 19.5.0 (2022-02-23) From 19a870a45c69d2862cfced721e4812050a21a5fa Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 2 Mar 2022 09:52:46 +0100 Subject: [PATCH 6/9] Fix package.json dependency alphabetical order --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fe209d8223821e..3383d4d712466c 100755 --- a/package.json +++ b/package.json @@ -108,9 +108,9 @@ "@storybook/manager-webpack5": "6.4.9", "@storybook/react": "6.4.9", "@testing-library/jest-dom": "5.16.1", - "@testing-library/user-event": "13.5.0", "@testing-library/react": "11.2.2", "@testing-library/react-native": "9.0.0", + "@testing-library/user-event": "13.5.0", "@types/classnames": "2.3.1", "@types/eslint": "7.28.0", "@types/estree": "0.0.50", From 6de14aa20f4d846efa4265d0894aaa0fd6c24977 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 2 Mar 2022 11:17:53 +0100 Subject: [PATCH 7/9] Revert "Add `@testing-library/user-event` to dev dependencies" This reverts commit 2c2200e827f35ac31b5b7bba39784cb329788ef3. --- package-lock.json | 99 +++++++++++++++++++++-------------------------- package.json | 1 - 2 files changed, 45 insertions(+), 55 deletions(-) diff --git a/package-lock.json b/package-lock.json index 33eb494a31db5d..3b9fc16747f34c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14546,15 +14546,6 @@ } } }, - "@testing-library/user-event": { - "version": "13.5.0", - "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz", - "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==", - "dev": true, - "requires": { - "@babel/runtime": "^7.12.5" - } - }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -20407,15 +20398,6 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, - "axios": { - "version": "0.21.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", - "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", - "dev": true, - "requires": { - "follow-redirects": "^1.10.0" - } - }, "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", @@ -21467,8 +21449,7 @@ "follow-redirects": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", - "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==", - "dev": true + "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" }, "forever-agent": { "version": "0.6.1", @@ -21803,8 +21784,7 @@ "immediate": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", - "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=", - "dev": true + "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=" }, "inflight": { "version": "1.0.6", @@ -22056,35 +22036,6 @@ "verror": "1.10.0" } }, - "jszip": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.6.0.tgz", - "integrity": "sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==", - "dev": true, - "requires": { - "lie": "~3.3.0", - "pako": "~1.0.2", - "readable-stream": "~2.3.6", - "set-immediate-shim": "~1.0.1" - }, - "dependencies": { - "readable-stream": { - "version": "2.3.7", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", - "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==", - "dev": true, - "requires": { - "core-util-is": "~1.0.0", - "inherits": "~2.0.3", - "isarray": "~1.0.0", - "process-nextick-args": "~2.0.0", - "safe-buffer": "~5.1.1", - "string_decoder": "~1.1.1", - "util-deprecate": "~1.0.1" - } - } - } - }, "keypather": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/keypather/-/keypather-1.10.2.tgz", @@ -22157,7 +22108,6 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", - "dev": true, "requires": { "immediate": "~3.0.5" } @@ -23508,8 +23458,7 @@ "set-immediate-shim": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz", - "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=", - "dev": true + "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=" }, "setprototypeof": { "version": "1.1.1", @@ -25332,6 +25281,15 @@ "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==", "dev": true }, + "axios": { + "version": "0.26.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz", + "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==", + "dev": true, + "requires": { + "follow-redirects": "^1.14.8" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -36629,6 +36587,12 @@ "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz", "integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==" }, + "immediate": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", + "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=", + "dev": true + }, "immer": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", @@ -41453,6 +41417,18 @@ } } }, + "jszip": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.7.1.tgz", + "integrity": "sha512-ghL0tz1XG9ZEmRMcEN2vt7xabrDdqHHeykgARpmZ0BiIctWxM47Vt63ZO2dnp4QYt/xJVLLy5Zv1l/xRdh2byg==", + "dev": true, + "requires": { + "lie": "~3.3.0", + "pako": "~1.0.2", + "readable-stream": "~2.3.6", + "set-immediate-shim": "~1.0.1" + } + }, "junk": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz", @@ -41591,6 +41567,15 @@ "type-check": "~0.3.2" } }, + "lie": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", + "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", + "dev": true, + "requires": { + "immediate": "~3.0.5" + } + }, "lilconfig": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz", @@ -52050,6 +52035,12 @@ "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" }, + "set-immediate-shim": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz", + "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=", + "dev": true + }, "set-value": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz", diff --git a/package.json b/package.json index 3383d4d712466c..740a36fd0db8f7 100755 --- a/package.json +++ b/package.json @@ -110,7 +110,6 @@ "@testing-library/jest-dom": "5.16.1", "@testing-library/react": "11.2.2", "@testing-library/react-native": "9.0.0", - "@testing-library/user-event": "13.5.0", "@types/classnames": "2.3.1", "@types/eslint": "7.28.0", "@types/estree": "0.0.50", From 3ddee8fb6d11fe58c57711beccfdd4e547dba64a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 2 Mar 2022 11:18:44 +0100 Subject: [PATCH 8/9] Rewrite unit tests without `user-event` --- .../components/src/unit-control/test/index.js | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js index 46e7d86be98a9d..fef9814e6a2d5c 100644 --- a/packages/components/src/unit-control/test/index.js +++ b/packages/components/src/unit-control/test/index.js @@ -2,7 +2,6 @@ * External dependencies */ import { render, fireEvent, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; /** * WordPress dependencies @@ -316,22 +315,21 @@ describe( 'UnitControl', () => { const [ inputA, inputB ] = screen.getAllByRole( 'spinbutton' ); const [ selectA, selectB ] = screen.getAllByRole( 'combobox' ); - const [ remOptionA ] = screen.getAllByRole( 'option', { - name: 'rem', - } ); - const [ , vwOptionB ] = screen.getAllByRole( 'option', { - name: 'vw', - } ); - userEvent.type( inputA, '55' ); - userEvent.type( inputB, '14' ); + inputA.focus(); + fireEvent.change( inputA, { target: { value: '55' } } ); + + inputB.focus(); + fireEvent.change( inputB, { target: { value: '14' } } ); - userEvent.selectOptions( selectA, remOptionA ); + selectA.focus(); + fireEvent.change( selectA, { target: { value: 'rem' } } ); expect( selectA ).toHaveValue( 'rem' ); expect( selectB ).toHaveValue( 'rem' ); - userEvent.selectOptions( selectB, vwOptionB ); + selectB.focus(); + fireEvent.change( selectB, { target: { value: 'vw' } } ); expect( selectA ).toHaveValue( 'vw' ); expect( selectB ).toHaveValue( 'vw' ); From 38a9c2d17c706047ca0da840240f12710dc401ec Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 2 Mar 2022 11:29:53 +0100 Subject: [PATCH 9/9] Remove temporary Storybook example --- .../src/unit-control/stories/index.js | 50 +------------------ 1 file changed, 1 insertion(+), 49 deletions(-) diff --git a/packages/components/src/unit-control/stories/index.js b/packages/components/src/unit-control/stories/index.js index e22d41697dadcf..9603a05e3941a1 100644 --- a/packages/components/src/unit-control/stories/index.js +++ b/packages/components/src/unit-control/stories/index.js @@ -13,7 +13,7 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import UnitControl from '../'; -import { CSS_UNITS, parseUnit } from '../utils'; +import { CSS_UNITS } from '../utils'; export default { title: 'Components (Experimental)/UnitControl', @@ -125,51 +125,3 @@ export function WithCustomUnits() { ); } - -export const Controlled = () => { - const [ state, setState ] = useState( { valueA: '', valueB: '' } ); - - // Keep the unit sync'd between the two `UnitControl` instances. - const onUnitControlChange = ( fieldName, newValue ) => { - // eslint-disable-next-line @wordpress/no-unused-vars-before-return - const [ quantity, newUnit ] = parseUnit( newValue ); - - if ( ! Number.isFinite( quantity ) ) { - return; - } - - const nextState = { ...state, [ fieldName ]: newValue }; - - Object.entries( state ).forEach( ( [ stateProp, stateValue ] ) => { - const [ stateQuantity, stateUnit ] = parseUnit( stateValue ); - - if ( stateProp !== fieldName && stateUnit !== newUnit ) { - nextState[ stateProp ] = `${ stateQuantity }${ newUnit }`; - } - } ); - - setState( nextState ); - }; - - const style = { - display: 'inline-block', - maxWidth: '200px', - }; - - return ( - <> - onUnitControlChange( 'valueA', v ) } - style={ style } - /> - onUnitControlChange( 'valueB', v ) } - style={ style } - /> - - ); -};