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
WordPress · May 3, 2022 · 1326a46 · 1326a46
1 parent 58a43c0
commit 1326a46
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 86 deletions.
diff --git a/packages/components/CHANGELOG.md b/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)).

diff --git a/packages/components/src/unit-control/stories/index.tsx b/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 ),
 };

diff --git a/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap b/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"
+`;