UnitControl: rewrite tests in TypeScript (#40697)

* Rename file extensions

* Rewrite `ControlledSyncUnits` part

* Use diff snapshot to test classnames

* Use `toBeInTheDocument`

* Type internal test state setters

* Use `testing-library` semantic queries instead of `document.querySelector`

* Tweak optional parameter for some  utilities

* Add type guard to `hasUnits`

* Fix TS errors in utils tests

* Add types to user-event wrapper function

* CHANGELOG

* Add comment about failing test

* ts-expect-error instead of ts-ignore

* Fix broken test by passing the missing `value`

* Add temporary stories to check single unit behavior

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   `UnitControl`: migrate unit tests to TypeScript ([#40697](https://github.com/WordPress/gutenberg/pull/40697)).
+
 ### Enhancements
 
 -   `InputControl`: Add `__next36pxDefaultSize` flag for larger default size ([#40622](https://github.com/WordPress/gutenberg/pull/40622)).

packages/components/src/unit-control/stories/index.tsx

@@ -109,10 +109,40 @@ TweakingTheNumberInput.args = {
 /**
  * When only one unit is available, the unit selection dropdown becomes static text.
  */
-export const WithSingleUnit: ComponentStory<
+export const WithSingleUnitControlled: ComponentStory<
 	typeof UnitControl
-> = DefaultTemplate.bind( {} );
-WithSingleUnit.args = {
+> = ( { onChange, ...args } ) => {
+	// Starting value is `undefined`
+	const [ value, setValue ] = useState< string | undefined >( undefined );
+
+	return (
+		<div style={ { maxWidth: '100px' } }>
+			<UnitControl
+				{ ...args }
+				value={ value }
+				onChange={ ( v, extra ) => {
+					setValue( v );
+					onChange?.( v, extra );
+				} }
+			/>
+		</div>
+	);
+};
+WithSingleUnitControlled.args = {
+	...Default.args,
+	units: CSS_UNITS.slice( 0, 1 ),
+};
+
+export const WithSingleUnitUncontrolled: ComponentStory<
+	typeof UnitControl
+> = ( args ) => {
+	return (
+		<div style={ { maxWidth: '100px' } }>
+			<UnitControl { ...args } />
+		</div>
+	);
+};
+WithSingleUnitUncontrolled.args = {
 	...Default.args,
 	units: CSS_UNITS.slice( 0, 1 ),
 };

packages/components/src/unit-control/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnitControl Basic rendering should render custom className 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -1,10 +1,10 @@
+  <div
+    class="components-unit-control-wrapper css-aa2xc3-Root e1bagdl33"
+  >
+    <div
+-     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
++     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
+      data-wp-c16t="true"
+      data-wp-component="Flex"
+    >
+      <div
+        class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+@@ -15,11 +15,11 @@
+        class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+      >
+        <input
+          autocomplete="off"
+          class="components-input-control__input css-gzm6eu-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+-         id="inspector-input-control-1"
++         id="inspector-input-control-2"
+          inputmode="numeric"
+          max="Infinity"
+          min="-Infinity"
+          step="1"
+          type="number"
+`;