[LinearProgress] Fix calculating of getRelativeValue

src/LinearProgress/LinearProgress.js

@@ -4,7 +4,7 @@ import transitions from '../styles/transitions';
 function getRelativeValue(value, min, max) {
   const clampedValue = Math.min(Math.max(min, value), max);
   const rangeValue = max - min;
-  const relValue = Math.round(clampedValue / rangeValue * 10000) / 10000;
+  const relValue = Math.round((clampedValue - min) / rangeValue * 10000) / 10000;
   return relValue * 100;
 }
 

src/LinearProgress/LinearProgress.spec.js

@@ -0,0 +1,55 @@
+/* eslint-env mocha */
+import React from 'react';
+import {shallow} from 'enzyme';
+import {assert} from 'chai';
+import LinearProgress from './LinearProgress';
+import getMuiTheme from '../styles/getMuiTheme';
+
+describe('<LinearProgress />', () => {
+  const muiTheme = getMuiTheme();
+  const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});
+
+  describe('props: min', () => {
+    it('should work when min equal zero', () => {
+      const wrapper = shallowWithContext(
+        <LinearProgress
+          mode="determinate"
+          value={50}
+          min={0}
+          max={100}
+        />
+      );
+
+      assert.strictEqual(wrapper.children().props().style.width, '50%',
+        'should compute the width correctly');
+    });
+
+    it('should work when min is different to zero', () => {
+      const wrapper = shallowWithContext(
+        <LinearProgress
+          mode="determinate"
+          value={75}
+          min={50}
+          max={100}
+        />
+      );
+
+      assert.strictEqual(wrapper.children().props().style.width, '50%',
+        'should compute the width correctly');
+    });
+
+    it('should work when value equal min', () => {
+      const wrapper = shallowWithContext(
+        <LinearProgress
+          mode="determinate"
+          value={50}
+          min={50}
+          max={100}
+        />
+      );
+
+      assert.strictEqual(wrapper.children().props().style.width, '0%',
+        'should compute the width correctly');
+    });
+  });
+});