Fix #121 - React throwing a NaN warning (#122)

mderrick · Nov 1, 2017 · cfedd0a · cfedd0a
1 parent e9cb144
commit cfedd0a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/src/DefaultPlayer/Seek/Seek.js b/src/DefaultPlayer/Seek/Seek.js
@@ -27,7 +27,7 @@ export default ({ onChange, percentagePlayed, percentageBuffered, className, ari
                     onChange={onChange}
                     aria-label={ariaLabel}
                     className={styles.input}
-                    value={percentagePlayed} />
+                    value={percentagePlayed || 0} />
             </div>
         </div>
     );

diff --git a/src/DefaultPlayer/Seek/Seek.test.js b/src/DefaultPlayer/Seek/Seek.test.js
@@ -42,6 +42,15 @@ describe('Seek', () => {
             .toEqual(10);
     });
 
+    it('handles an undefined percentagePlayed value', () => {
+        component.setProps({
+            percentagePlayed: undefined
+        });
+        const rangeInput = component.find(`.${styles.input}`);
+        expect(rangeInput.prop('value'))
+            .toEqual(0);
+    });
+
     it('triggers \'onChange\' prop when the input is changed', () => {
         const spy = jest.fn();
         component.setProps({

diff --git a/src/DefaultPlayer/Volume/Volume.js b/src/DefaultPlayer/Volume/Volume.js
@@ -4,7 +4,7 @@ import VolumeOff from './../Icon/volume_off.svg';
 import VolumeUp from './../Icon/volume_up.svg';
 
 export default ({ onChange, onClick, volume, muted, className, ariaLabelMute, ariaLabelUnmute, ariaLabelVolume }) => {
-    const volumeValue = muted
+    const volumeValue = muted || !volume
         ? 0
         : +volume;
     const isSilent = muted || volume <= 0;

diff --git a/src/DefaultPlayer/Volume/Volume.test.js b/src/DefaultPlayer/Volume/Volume.test.js
@@ -46,6 +46,15 @@ describe('Volume', () => {
             .toEqual('Change volume');
     });
 
+    it('handles an undefined volume value', () => {
+        component.setProps({
+            volume: undefined
+        });
+        const rangeInput = component.find(`.${styles.input}`);
+        expect(rangeInput.prop('value'))
+            .toEqual(0);
+    });
+
     it('triggers \'onClick\' prop when the button is clicked', () => {
         const spy = jest.fn();
         component.setProps({