fix #640 - tooltip.always_visible for slider and rangeslider

src/components/RangeSlider.react.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {omit} from 'ramda';
+import {assoc, omit} from 'ramda';
 import {Range, createSliderWithTooltip} from 'rc-slider';
 
 /**
@@ -52,9 +52,7 @@ export default class RangeSlider extends Component {
              * the rc-tooltip API uses `visible`, but `always_visible is more semantic
              * assigns the new (renamed) key to the old key and deletes the old key
              */
-            tipProps = Object.assign(tooltip, {
-                visible: tooltip.always_visible,
-            });
+            tipProps = assoc('visible', tooltip.always_visible, tooltip);
             delete tipProps.always_visible;
         } else {
             tipProps = tooltip;

src/components/Slider.react.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import ReactSlider, {createSliderWithTooltip} from 'rc-slider';
 import PropTypes from 'prop-types';
-import {omit} from 'ramda';
+import {assoc, omit} from 'ramda';
 import './css/rc-slider@6.1.2.css';
 
 /**
@@ -49,12 +49,10 @@ export default class Slider extends Component {
         if (tooltip && tooltip.always_visible) {
             /**
              * clone `tooltip` but with renamed key `always_visible` -> `visible`
-             * the rc-tooltip API uses `visible`, but `always_visible is more semantic
+             * the rc-tooltip API uses `visible`, but `always_visible` is more semantic
              * assigns the new (renamed) key to the old key and deletes the old key
              */
-            tipProps = Object.assign(tooltip, {
-                visible: tooltip.always_visible,
-            });
+            tipProps = assoc('visible', tooltip.always_visible, tooltip);
             delete tipProps.always_visible;
         } else {
             tipProps = tooltip;
@@ -82,7 +80,7 @@ export default class Slider extends Component {
                             setProps({value});
                         }
                     }}
-                    tipProps={tooltip}
+                    tipProps={tipProps}
                     value={value}
                     {...omit(
                         ['className', 'setProps', 'updatemode', 'value'],

tests/integration/misc/test_persistence.py

@@ -1,39 +1,12 @@
 # -*- coding: utf-8 -*-
 import json
 from selenium.webdriver.common.keys import Keys
-from selenium.webdriver.common.action_chains import ActionChains
 
 import dash
 from dash.dependencies import Input, Output
 import dash_core_components as dcc
 import dash_html_components as html
-
-
-def click_date(dash_duo, component_selector, row, col):
-    date_picker_selector = (
-        ".CalendarMonthGrid_month__horizontal"
-        ":not(.CalendarMonthGrid_month__hidden)"
-    )
-    dash_duo.find_element(
-        " ".join([
-            component_selector,
-            date_picker_selector,
-            # nth-child is 1-based, but let's use 0-based
-            "tr:nth-child({})".format(row + 1),
-            "td:nth-child({})".format(col + 1)
-        ])
-    ).click()
-
-
-def click_at_coord_fractions(dash_duo, el, fx, fy):
-    width = el.size['width']
-    height = el.size['height']
-    (
-        ActionChains(dash_duo.driver)
-        .move_to_element_with_offset(el, width * fx, height * fy)
-        .click()
-        .perform()
-    )
+from ..utils import click_date, click_at_coord_fractions
 
 
 def test_msps001_basic_persistence(dash_duo):

tests/integration/sliders/test_sliders.py

@@ -0,0 +1,62 @@
+import dash
+from dash.dependencies import Input, Output
+import dash_html_components as html
+import dash_core_components as dcc
+
+from ..utils import click_at_coord_fractions
+
+
+def test_slsl001_always_visible_slider(dash_duo):
+    app = dash.Dash(__name__)
+    app.layout = html.Div([
+        dcc.Slider(
+            id="slider",
+            min=0,
+            max=20,
+            step=1,
+            value=5,
+            tooltip={"always_visible": True}
+        ),
+        html.Div(id="out")
+    ])
+
+    @app.callback(Output("out", "children"), [Input("slider", "value")])
+    def update_output(value):
+        return "You have selected {}".format(value)
+
+    dash_duo.start_server(app)
+    dash_duo.wait_for_text_to_equal("#out", "You have selected 5")
+
+    slider = dash_duo.find_element("#slider")
+    click_at_coord_fractions(dash_duo, slider, 0.5, 0.5)
+    dash_duo.wait_for_text_to_equal("#out", "You have selected 10")
+    click_at_coord_fractions(dash_duo, slider, 0.75, 0.5)
+    dash_duo.wait_for_text_to_equal("#out", "You have selected 15")
+
+
+def test_slsl002_always_visible_rangeslider(dash_duo):
+    app = dash.Dash(__name__)
+    app.layout = html.Div([
+        dcc.RangeSlider(
+            id="rangeslider",
+            min=0,
+            max=20,
+            step=1,
+            value=[5, 15],
+            tooltip={"always_visible": True}
+        ),
+        html.Div(id="out")
+    ])
+
+    @app.callback(Output("out", "children"), [Input("rangeslider", "value")])
+    def update_output(rng):
+        return "You have selected {}-{}".format(*rng)
+
+    dash_duo.start_server(app)
+    dash_duo.wait_for_text_to_equal("#out", "You have selected 5-15")
+
+    slider = dash_duo.find_element("#rangeslider")
+    click_at_coord_fractions(dash_duo, slider, 0.1, 0.5)
+    dash_duo.wait_for_text_to_equal("#out", "You have selected 2-15")
+    click_at_coord_fractions(dash_duo, slider, 0.5, 0.5)
+    dash_duo.wait_for_text_to_equal("#out", "You have selected 2-10")

tests/integration/utils.py

@@ -0,0 +1,28 @@
+from selenium.webdriver.common.action_chains import ActionChains
+
+
+def click_date(dash_duo, component_selector, row, col):
+    date_picker_selector = (
+        ".CalendarMonthGrid_month__horizontal"
+        ":not(.CalendarMonthGrid_month__hidden)"
+    )
+    dash_duo.find_element(
+        " ".join([
+            component_selector,
+            date_picker_selector,
+            # nth-child is 1-based, but let's use 0-based
+            "tr:nth-child({})".format(row + 1),
+            "td:nth-child({})".format(col + 1)
+        ])
+    ).click()
+
+
+def click_at_coord_fractions(dash_duo, el, fx, fy):
+    width = el.size['width']
+    height = el.size['height']
+    (
+        ActionChains(dash_duo.driver)
+        .move_to_element_with_offset(el, width * fx, height * fy)
+        .click()
+        .perform()
+    )