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' ); } ); } ); } );