diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx
index d08abd747c3703..3ce741867d0dbc 100644
--- a/packages/components/src/range-control/test/index.tsx
+++ b/packages/components/src/range-control/test/index.tsx
@@ -297,26 +297,38 @@ describe( 'RangeControl', () => {
} );
} );
- describe.only( 'reset', () => {
- // TODO: behaviour to be tested, in controlled mode:
- // - when `resetFallbackValue` is provided, the value is ultimately set to
- // `resetFallbackValue`; `onChange()` is called with `resetFallbackValue`.
- // - when `initialPosition` is provided, the value is ultimately set to
- // `initialPosition`; `onChange()` is called with `undefined`.
- // - when neither `resetFallbackValue` nor `initialPosition` are provided,
- // the input values is cleared; `onChange()` is called with `undefined`.
- // - in any case, when the current value is the same as the reset value
- // (ie. the value that would be assigned when clicking the reset button),
- // the reset button should be disabled;
-
- it( 'should reset to a custom fallback value, defined by a parent component', () => {
+ describe( 'reset', () => {
+ it( 'should clear the input value when clicking the reset button', () => {
+ const spy = jest.fn();
+ render( );
+
+ const resetButton = getResetButton();
+ const rangeInput = getRangeInput();
+ const numberInput = getNumberInput();
+
+ fireChangeEvent( numberInput, '14' );
+
+ expect( rangeInput.value ).toBe( '14' );
+ expect( numberInput.value ).toBe( '14' );
+ expect( spy ).toHaveBeenCalledWith( 14 );
+
+ fireEvent.click( resetButton );
+
+ // range input resets to min + (max-min)/2
+ expect( rangeInput.value ).toBe( '50' );
+ expect( numberInput.value ).toBe( '' );
+ expect( spy ).toHaveBeenCalledWith( undefined );
+
+ expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
+ } );
+
+ it( 'should reset to the `initialPosition` value when clicking the reset button', () => {
const spy = jest.fn();
render(
);
@@ -324,23 +336,29 @@ describe( 'RangeControl', () => {
const rangeInput = getRangeInput();
const numberInput = getNumberInput();
+ fireChangeEvent( numberInput, '14' );
+
+ expect( rangeInput.value ).toBe( '14' );
+ expect( numberInput.value ).toBe( '14' );
+ expect( spy ).toHaveBeenCalledWith( 14 );
+
fireEvent.click( resetButton );
- expect( rangeInput.value ).toBe( '33' );
- expect( numberInput.value ).toBe( '33' );
- expect( spy ).toHaveBeenCalledWith( 33 );
+ expect( rangeInput.value ).toBe( '23' );
+ expect( numberInput.value ).toBe( '23' );
+ expect( spy ).toHaveBeenCalledWith( undefined );
expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
} );
- it( 'should reset to a 50% of min/max value, of no initialPosition or value is defined', () => {
+ it( 'should reset to the `resetFallbackValue` value when clicking the reset button', () => {
+ const spy = jest.fn();
render(
);
@@ -350,8 +368,11 @@ describe( 'RangeControl', () => {
fireEvent.click( resetButton );
- expect( rangeInput.value ).toBe( '50' );
- expect( numberInput.value ).toBe( '' );
+ expect( rangeInput.value ).toBe( '33' );
+ expect( numberInput.value ).toBe( '33' );
+ expect( spy ).toHaveBeenCalledWith( 33 );
+
+ expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
} );
} );
} );