Merge remote-tracking branch 'upstream/main'

Author: bdtren

.github/workflows/ReactNativeSlider-CI.yml

@@ -69,7 +69,7 @@ jobs:
           key: ${{ hashFiles('./package/package.json') }}
 
       - name: Run unit tests
-        run: cd package && npx jest src
+        run: cd package && npx jest --coverage --verbose
 
 
   verify-example-sources:

example-web/package-lock.json

@@ -232,4 +232,19 @@ export const examples: Props[] = [
       );
     },
   },
+  // Check the fix for the issue #743
+  {
+    title: 'With step numbers',
+    render() {
+      return (
+        <SliderExample
+          minimumValue={1}
+          maximumValue={5}
+          step={1}
+          renderStepNumber={true}
+          style={[styles.slider, { height: 70 }]}
+        />
+      );
+    },
+  },
 ];

example-web/src/Examples.tsx

@@ -1356,7 +1356,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-slider (5.1.1):
+  - react-native-slider (5.1.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1371,7 +1371,7 @@ PODS:
     - React-hermes
     - React-ImageManager
     - React-jsi
-    - react-native-slider/common (= 5.1.1)
+    - react-native-slider/common (= 5.1.2)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-renderercss
@@ -1381,7 +1381,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-slider/common (5.1.1):
+  - react-native-slider/common (5.1.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1997,7 +1997,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: c3f4b608e4a59dd2f6a416ef4d47a14400194468
   React-microtasksnativemodule: 054f34e9b82f02bd40f09cebd4083828b5b2beb6
   react-native-pager-view: f238ed7fb53458bd03366944a33686f067c83e9a
-  react-native-slider: 5d7e61470399d2bfb0c9682a8d8ea10214e7eda1
+  react-native-slider: 4f5bd3b637b60c7ba1e05dc120b85d48be8fccee
   React-NativeModulesApple: 2c4377e139522c3d73f5df582e4f051a838ff25e
   React-oscompat: ef5df1c734f19b8003e149317d041b8ce1f7d29c
   React-perflogger: 9a151e0b4c933c9205fd648c246506a83f31395d

example/ios/Podfile.lock

@@ -361,4 +361,7 @@ MigrationBackup/
 .ionide/
 
 # Fody - auto-generated XML schema
-FodyWeavers.xsd
+FodyWeavers.xsd
+
+# Jest coverage reports
+coverage/

example/package-lock.json

@@ -0,0 +1,80 @@
+import React from 'react';
+import {fireEvent, render} from '@testing-library/react-native';
+import Slider from '../src/Slider';
+
+describe('Slider', () => {
+  it('Calls the given onValueChange when native event is emitted', () => {
+    const onValueChange = jest.fn();
+    const {getByTestId} = render(
+      <Slider testID="slider" onValueChange={onValueChange} />,
+    );
+    const slider = getByTestId('slider');
+    fireEvent(slider, 'change', {nativeEvent: {value: 2}});
+    expect(onValueChange).toHaveBeenCalledWith(2);
+  });
+
+  it('Handles provided events when sliding starts is emitted', () => {
+    const onSlidingStart = jest.fn();
+    const {getByTestId} = render(
+      <Slider testID="slider" onSlidingStart={onSlidingStart} />,
+    );
+    const slider = getByTestId('slider');
+
+    fireEvent(slider, 'onRNCSliderSlidingStart', {nativeEvent: {value: 2}});
+    expect(onSlidingStart).toHaveBeenCalledWith(2);
+  });
+
+  it('Handles provided events when sliding end is emitted', () => {
+    const onSlidingComplete = jest.fn();
+    const {getByTestId} = render(
+      <Slider testID="slider" onSlidingComplete={onSlidingComplete} />,
+    );
+    const slider = getByTestId('slider');
+
+    fireEvent(slider, 'onRNCSliderSlidingComplete', {nativeEvent: {value: 2}});
+    expect(onSlidingComplete).toHaveBeenCalledWith(2);
+  });
+
+  it('Calls the accessibility handler when accessibility action is triggered', () => {
+    const mockedAccessibilityHandler = jest.fn();
+    const {getByTestId} = render(
+      <Slider
+        testID="slider"
+        onAccessibilityAction={mockedAccessibilityHandler}
+      />,
+    );
+    const slider = getByTestId('slider');
+
+    fireEvent(slider, 'onRNCSliderAccessibilityAction', {
+      actionName: 'mocked-action',
+    });
+    expect(mockedAccessibilityHandler).toHaveBeenCalledWith({
+      actionName: 'mocked-action',
+    });
+  });
+
+  it('Emitts a warning in the dev console if lower and upper limits are switched', () => {
+    const mockedWarn = jest.fn();
+    console.warn = mockedWarn;
+    render(<Slider testID="slider" lowerLimit={10} upperLimit={2} />);
+    expect(mockedWarn).toHaveBeenCalled();
+  });
+
+  it('Provides the onLayout with the measured width', () => {
+    const {getByTestId} = render(<Slider testID="slider" />);
+    const slider = getByTestId('slider');
+    fireEvent(slider, 'onLayout', {nativeEvent: {layout: {width: 200}}});
+    expect(slider).toHaveStyle({width: 200});
+  });
+
+  it('Prevents the gesture control from being released externally', () => {
+    const mockedRelease = jest.fn();
+    jest.mock('../src/index', () => ({
+      ...jest.requireActual('../src/index'),
+      onResponderRelease: mockedRelease,
+    }));
+    const {getByTestId} = render(<Slider testID="slider" />);
+    fireEvent(getByTestId('slider'), 'onResponderTerminationRequest');
+    expect(mockedRelease).not.toHaveBeenCalled();
+  });
+});

package/.gitignore

@@ -0,0 +1,12 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {StepNumber} from '../../src/components/StepNumber';
+
+describe('StepNumber', () => {
+  it('Displays number of step according to given index', () => {
+    const {getByText} = render(
+      <StepNumber i={0} index={0} style={undefined} />,
+    );
+    expect(getByText('0')).toBeDefined();
+  });
+});

package/__test__/Slider.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {StepsIndicator} from '../../src/components/StepsIndicator';
+import {constants} from '../../src/utils/constants';
+import {Platform} from 'react-native';
+import {styles} from '../../src/utils/styles';
+
+const defaultOptions = [0, 1, 2, 3, 4, 5];
+const longerOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+describe('StepsIndicator', () => {
+  it('Renders every step provided in options', () => {
+    const {getByText} = render(
+      <StepsIndicator
+        options={defaultOptions}
+        sliderWidth={20}
+        currentValue={0}
+        renderStepNumber
+      />,
+    );
+    for (const step of defaultOptions) {
+      expect(getByText(step.toString())).toBeDefined();
+    }
+  });
+
+  it('Applies the big font size to the lower number of steps', () => {
+    const {getByTestId} = render(
+      <StepsIndicator
+        options={defaultOptions}
+        sliderWidth={20}
+        currentValue={0}
+        renderStepNumber
+      />,
+    );
+    expect(getByTestId('0th-step')).toHaveStyle({
+      fontSize: constants.STEP_NUMBER_TEXT_FONT_BIG,
+    });
+  });
+
+  it('Applies the small font size to the number of steps higher than 9', () => {
+    const {getByTestId} = render(
+      <StepsIndicator
+        options={longerOptions}
+        sliderWidth={20}
+        currentValue={0}
+        renderStepNumber
+      />,
+    );
+    expect(getByTestId('0th-step')).toHaveStyle({
+      fontSize: constants.STEP_NUMBER_TEXT_FONT_SMALL,
+    });
+  });
+
+  it('Applies platform-dependent styles for web', () => {
+    Platform.OS = 'web';
+    const {getByTestId} = render(
+      <StepsIndicator
+        options={longerOptions}
+        sliderWidth={20}
+        currentValue={0}
+        renderStepNumber
+      />,
+    );
+    expect(getByTestId('StepsIndicator-Container')).toHaveStyle(
+      styles.stepsIndicator,
+    );
+  });
+
+  it('Reverts given options when isLTR is set', () => {
+    const {getByTestId} = render(
+      <StepsIndicator
+        options={defaultOptions}
+        sliderWidth={20}
+        currentValue={0}
+        renderStepNumber
+        isLTR
+      />,
+    );
+    expect(getByTestId('0th-step')).toHaveTextContent('5');
+    expect(getByTestId('2th-step')).toHaveTextContent('3');
+  });
+
+  it('Does not display any step numbers if prop is not set', () => {
+    const {queryByTestId} = render(
+      <StepsIndicator
+        options={defaultOptions}
+        sliderWidth={20}
+        currentValue={0}
+      />,
+    );
+    expect(queryByTestId('0th-step')).toBeFalsy();
+  });
+});

package/__test__/components/StepNumber.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {MarkerProps, SliderTrackMark} from '../../src/components/TrackMark';
+import {View} from 'react-native';
+
+const MockedStepMarker = ({}: MarkerProps) => (
+  <View testID="mockedStepMarker" />
+);
+
+const MockedThumbImage = 1;
+
+describe('TrackMark', () => {
+  it('Renders the StepMarker if custom component is given', () => {
+    const {getByTestId} = render(
+      <SliderTrackMark
+        StepMarker={MockedStepMarker}
+        isTrue={false}
+        index={0}
+        currentValue={0}
+        min={0}
+        max={0}
+      />,
+    );
+    expect(getByTestId('mockedStepMarker')).toBeDefined();
+  });
+
+  it('Renders the StepMarker with thumbImage if provided', () => {
+    const {getByTestId} = render(
+      <SliderTrackMark
+        thumbImage={MockedThumbImage}
+        StepMarker={MockedStepMarker}
+        isTrue={true}
+        index={0}
+        currentValue={0}
+        min={0}
+        max={0}
+      />,
+    );
+    expect(getByTestId('sliderTrackMark-thumbImage')).toBeDefined();
+  });
+});