@@ -22,6 +22,7 @@ const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate})
className={classNames(styles.slider, 'no-drag')} // Class used on parent Draggable to prevent drags
max={max}
min={min}
+ step={isDiscrete ? 1 : 0.01}
type="range"
value={value}
onChange={onSliderUpdate}
@@ -33,6 +34,7 @@ const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate})
SliderMonitor.propTypes = {
categoryColor: PropTypes.string.isRequired,
+ isDiscrete: PropTypes.bool,
label: PropTypes.string.isRequired,
max: PropTypes.number,
min: PropTypes.number,
@@ -44,6 +46,7 @@ SliderMonitor.propTypes = {
};
SliderMonitor.defaultProps = {
+ isDiscrete: true,
min: 0,
max: 100
};
diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx
index b35a04bb9..dfcdd3aa4 100644
--- a/src/containers/monitor.jsx
+++ b/src/containers/monitor.jsx
@@ -169,6 +169,7 @@ class Monitor extends React.Component {
{...monitorProps}
draggable={this.props.draggable}
height={this.props.height}
+ isDiscrete={this.props.isDiscrete}
max={this.props.max}
min={this.props.min}
mode={this.props.mode}
@@ -192,6 +193,7 @@ Monitor.propTypes = {
height: PropTypes.number,
id: PropTypes.string.isRequired,
intl: intlShape,
+ isDiscrete: PropTypes.bool,
max: PropTypes.number,
min: PropTypes.number,
mode: PropTypes.oneOf(['default', 'slider', 'large', 'list']),
diff --git a/test/unit/components/monitor-list.test.jsx b/test/unit/components/monitor-list.test.jsx
new file mode 100644
index 000000000..fa955546e
--- /dev/null
+++ b/test/unit/components/monitor-list.test.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
+import MonitorList from '../../../src/components/monitor-list/monitor-list.jsx';
+import {OrderedMap} from 'immutable';
+import configureStore from 'redux-mock-store';
+import {Provider} from 'react-redux';
+
+describe('MonitorListComponent', () => {
+ const store = configureStore()({scratchGui: {
+ monitorLayout: {
+ monitors: {},
+ savedMonitorPositions: {}
+ },
+ vm: {
+ runtime: {
+ requestUpdateMonitor: () => {},
+ getLabelForOpcode: () => ''
+ }
+ }
+ }});
+ const draggable = false;
+ const onMonitorChange = jest.fn();
+ const stageSize = {
+ width: 100,
+ height: 100,
+ widthDefault: 100,
+ heightDefault: 100
+ };
+
+ let monitors = OrderedMap({});
+
+ // Wrap this in a function so it gets test specific states and can be reused.
+ const getComponent = function () {
+ return (
+
+
+
+ );
+ };
+
+ test('it renders the correct step size for discrete sliders', () => {
+ monitors = OrderedMap({
+ id1: {
+ visible: true,
+ mode: 'slider',
+ isDiscrete: true
+ }
+ });
+ const wrapper = mountWithIntl(getComponent());
+ const input = wrapper.find('input');
+ expect(input.props().step).toBe(1);
+ });
+
+ test('it renders the correct step size for non-discrete sliders', () => {
+ monitors = OrderedMap({
+ id1: {
+ visible: true,
+ mode: 'slider',
+ isDiscrete: false
+ }
+ });
+ const wrapper = mountWithIntl(getComponent());
+ const input = wrapper.find('input');
+ expect(input.props().step).toBe(0.01);
+ });
+});