diff --git a/packages/components/src/range-control/test/index.js b/packages/components/src/range-control/test/index.js
index 803b0dd9c92ffe..634db9bc8f82da 100644
--- a/packages/components/src/range-control/test/index.js
+++ b/packages/components/src/range-control/test/index.js
@@ -29,14 +29,17 @@ function ControlledRangeControl( props ) {
return ;
}
-describe( 'RangeControl', () => {
+describe.each( [
+ [ 'uncontrolled', RangeControl ],
+ [ 'controlled', ControlledRangeControl ],
+] )( 'RangeControl %s', ( ...modeAndComponent ) => {
+ const [ , Component ] = modeAndComponent;
+
describe( '#render()', () => {
it( 'should trigger change callback with numeric value', () => {
const onChange = jest.fn();
- const { container } = render(
-
- );
+ const { container } = render( );
const rangeInput = getRangeInput( container );
const numberInput = getNumberInput( container );
@@ -53,10 +56,7 @@ describe( 'RangeControl', () => {
it( 'should render with icons', () => {
const { container } = render(
-
+
);
const beforeIcon = container.querySelector(
@@ -73,7 +73,7 @@ describe( 'RangeControl', () => {
describe( 'validation', () => {
it( 'should not apply if new value is lower than minimum', () => {
- const { container } = render( );
+ const { container } = render( );
const rangeInput = getRangeInput( container );
const numberInput = getNumberInput( container );
@@ -85,7 +85,7 @@ describe( 'RangeControl', () => {
} );
it( 'should not apply if new value is greater than maximum', () => {
- const { container } = render( );
+ const { container } = render( );
const rangeInput = getRangeInput( container );
const numberInput = getNumberInput( container );
@@ -99,7 +99,7 @@ describe( 'RangeControl', () => {
it( 'should not call onChange if new value is invalid', () => {
const onChange = jest.fn();
const { container } = render(
-
+
);
const numberInput = getNumberInput( container );
@@ -113,7 +113,7 @@ describe( 'RangeControl', () => {
it( 'should keep invalid values in number input until loss of focus', () => {
const onChange = jest.fn();
const { container } = render(
-
+
);
const rangeInput = getRangeInput( container );
@@ -132,7 +132,7 @@ describe( 'RangeControl', () => {
it( 'should validate when provided a max or min of zero', () => {
const { container } = render(
-
+
);
const rangeInput = getRangeInput( container );
@@ -147,7 +147,7 @@ describe( 'RangeControl', () => {
it( 'should validate when min and max are negative', () => {
const { container } = render(
-
+
);
const rangeInput = getRangeInput( container );
@@ -168,11 +168,7 @@ describe( 'RangeControl', () => {
it( 'should take into account the step starting from min', () => {
const onChange = jest.fn();
const { container } = render(
-
+
);
const rangeInput = getRangeInput( container );
@@ -193,9 +189,7 @@ describe( 'RangeControl', () => {
describe( 'initialPosition / value', () => {
it( 'should render initial rendered value of 50% of min/max, if no initialPosition or value is defined', () => {
- const { container } = render(
-
- );
+ const { container } = render( );
const rangeInput = getRangeInput( container );
@@ -204,7 +198,7 @@ describe( 'RangeControl', () => {
it( 'should render initialPosition if no value is provided', () => {
const { container } = render(
-
+
);
const rangeInput = getRangeInput( container );
@@ -214,7 +208,7 @@ describe( 'RangeControl', () => {
it( 'should render value instead of initialPosition is provided', () => {
const { container } = render(
-
+
);
const rangeInput = getRangeInput( container );
@@ -225,7 +219,7 @@ describe( 'RangeControl', () => {
describe( 'input field', () => {
it( 'should render an input field by default', () => {
- const { container } = render( );
+ const { container } = render( );
const numberInput = getNumberInput( container );
@@ -234,7 +228,7 @@ describe( 'RangeControl', () => {
it( 'should not render an input field, if disabled', () => {
const { container } = render(
-
+
);
const numberInput = getNumberInput( container );
@@ -243,7 +237,7 @@ describe( 'RangeControl', () => {
} );
it( 'should render a zero value into input range and field', () => {
- const { container } = render( );
+ const { container } = render( );
const rangeInput = getRangeInput( container );
const numberInput = getNumberInput( container );
@@ -253,7 +247,7 @@ describe( 'RangeControl', () => {
} );
it( 'should update both field and range on change', () => {
- const { container } = render( );
+ const { container } = render( );
const rangeInput = getRangeInput( container );
const numberInput = getNumberInput( container );
@@ -272,7 +266,7 @@ describe( 'RangeControl', () => {
} );
it( 'should reset input values if next value is removed', () => {
- const { container } = render( );
+ const { container } = render( );
const rangeInput = getRangeInput( container );
const numberInput = getNumberInput( container );
@@ -308,8 +302,7 @@ describe( 'RangeControl', () => {
const [ , propsForReset, [ expectedValue, expectedChange ] ] = all;
const spy = jest.fn();
const { container } = render(
- {
expect( spy ).toHaveBeenCalledWith( expectedChange );
} );
- it.concurrent.each( [ RangeControl, ControlledRangeControl ] )(
- 'should reset to a 50% of min/max value, if no initialPosition or resetFallbackValue is defined',
- ( Component ) => {
- const value =
- Component === ControlledRangeControl ? 89 : undefined;
- const { container } = render(
-
- );
-
- const resetButton = getResetButton( container );
- const rangeInput = getRangeInput( container );
- const numberInput = getNumberInput( container );
-
- fireEvent.click( resetButton );
-
- expect( rangeInput.value ).toBe( '50' );
- expect( numberInput.value ).toBe( '' );
- }
- );
+ it( 'should reset to a 50% of min/max value, of no initialPosition or value is defined', () => {
+ const { container } = render(
+
+ );
+
+ const resetButton = getResetButton( container );
+ const rangeInput = getRangeInput( container );
+ const numberInput = getNumberInput( container );
+
+ fireEvent.click( resetButton );
+
+ expect( rangeInput.value ).toBe( '50' );
+ expect( numberInput.value ).toBe( '' );
+ } );
} );
} );