fix: add missing tests and update the slider color

Author: stelselim

packages/pluggableWidgets/range-slider-native/src/RangeSlider.tsx

@@ -27,7 +27,7 @@ export function RangeSlider(props: Props): ReactElement {
 
     const onValueChange = useCallback(
         (values: number[]): void => {
-            if (values[0] === null || values[0] === undefined || values[1] === null || values[1] === undefined) {
+            if (values[0] == null || values[1] == null) {
                 return;
             }
             props.lowerValueAttribute.setValue(new Big(values[0]));
@@ -39,10 +39,8 @@ export function RangeSlider(props: Props): ReactElement {
     const onSlidingComplete = useCallback(
         (values: number[]): void => {
             if (
-                values[0] === null ||
-                values[0] === undefined ||
-                values[1] === null ||
-                values[1] === undefined ||
+                values[0] == null ||
+                values[1] == null ||
                 (lastLowerValue.current === values[0] && lastUpperValue.current === values[1])
             ) {
                 return;

packages/pluggableWidgets/range-slider-native/src/__tests__/RangeSlider.spec.tsx

@@ -181,6 +181,47 @@ describe("RangeSlider", () => {
         expect(onChangeAction.execute).not.toHaveBeenCalled();
     });
 
+    it("renders with the width of the parent view", () => {
+        const component = render(
+            <RangeSlider
+                {...defaultProps}
+                style={[
+                    {
+                        container: { width: 100 },
+                        track: {},
+                        trackDisabled: {},
+                        minimumTrack: {},
+                        minimumTrackDisabled: {},
+                        maximumTrack: {},
+                        maximumTrackDisabled: {},
+                        thumb: {},
+                        thumbActive: {},
+                        thumbDisabled: {},
+                        validationMessage: {}
+                    }
+                ]}
+            />
+        );
+        const container = component.getByTestId("range-slider-test");
+        expect(container.props.style).toEqual(expect.objectContaining({ width: 100 }));
+    });
+
+    it("changes the lower value when swiping", () => {
+        const onChangeAction = actionValue();
+        const component = render(<RangeSlider {...defaultProps} onChange={onChangeAction} />);
+        const slider = component.getByTestId("mocked-slider");
+
+        fireEvent(slider, "onValueChange", [120, 210]);
+
+        expect(onChangeAction.execute).not.toHaveBeenCalled();
+
+        fireEvent(slider, "onSlidingComplete", [120, 210]);
+
+        expect(defaultProps.lowerValueAttribute.setValue).toHaveBeenCalledWith(new Big(120));
+        expect(defaultProps.upperValueAttribute.setValue).toHaveBeenCalledWith(new Big(210));
+        expect(onChangeAction.execute).toHaveBeenCalledTimes(1);
+    });
+
     it("applies custom styles", () => {
         const component = render(
             <RangeSlider

packages/pluggableWidgets/range-slider-native/src/__tests__/__snapshots__/RangeSlider.spec.tsx.snap

@@ -19,7 +19,7 @@ exports[`RangeSlider applies custom styles: with custom styles 1`] = `
     maximumValue={280}
     minimumTrackStyle={
       {
-        "backgroundColor": "rgb(0,122,255)",
+        "backgroundColor": "rgb(30, 76, 231)",
       }
     }
     minimumValue={0}
@@ -76,7 +76,7 @@ exports[`RangeSlider renders 1`] = `
     maximumValue={280}
     minimumTrackStyle={
       {
-        "backgroundColor": "rgb(0,122,255)",
+        "backgroundColor": "rgb(30, 76, 231)",
       }
     }
     minimumValue={0}

packages/pluggableWidgets/range-slider-native/src/ui/Styles.ts

@@ -15,7 +15,7 @@ export interface RangeSliderStyle extends Style {
     validationMessage: TextStyle;
 }
 
-const blue = "rgb(0,122,255)";
+const blue = "rgb(30, 76, 231)";
 
 const trackBase: ViewStyle = {
     height: 4,

packages/pluggableWidgets/slider-native/src/__tests__/__snapshots__/Slider.spec.tsx.snap

@@ -19,7 +19,7 @@ exports[`Slider applies custom styles: with custom styles 1`] = `
     maximumValue={280}
     minimumTrackStyle={
       {
-        "backgroundColor": "rgb(0,122,255)",
+        "backgroundColor": "rgb(30, 76, 231)",
       }
     }
     minimumValue={0}
@@ -71,7 +71,7 @@ exports[`Slider renders 1`] = `
     maximumValue={280}
     minimumTrackStyle={
       {
-        "backgroundColor": "rgb(0,122,255)",
+        "backgroundColor": "rgb(30, 76, 231)",
       }
     }
     minimumValue={0}

packages/pluggableWidgets/slider-native/src/ui/Styles.ts

@@ -14,7 +14,7 @@ export interface SliderStyle extends Style {
     validationMessage: TextStyle;
 }
 
-const blue = "rgb(0,122,255)";
+const blue = "rgb(30, 76, 231)";
 
 const trackBase: ViewStyle = {
     height: 4,