unit tests

src/components/Audioplayer/RepeatButton/spec.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import RepeatButton from './index';
+
+let makeComponent, component, onRepeatToggle;
+
+describe('<RepeatButton />', () => {
+  beforeEach(() => {
+    makeComponent = (shouldRepeat) => {
+      onRepeatToggle = sinon.stub();
+
+      component = mount(
+        <RepeatButton shouldRepeat={shouldRepeat} onRepeatToggle={onRepeatToggle} />
+      );
+    }
+  });
+
+  it('should indicate that shouldRepeat', () => {
+    makeComponent(true);
+
+    expect(component.find('label').first().props().className).to.contain('repeat');
+  });
+
+  it('should not indicate that shouldRepeat', () => {
+    makeComponent(false);
+
+    expect(component.find('label').first().props().className).not.to.contain('repeat');
+  });
+
+  it('should call onRepeatToggle when clicked', () => {
+    component.find('label').first().simulate('click');
+
+    expect(onRepeatToggle).to.have.been.called;
+  });
+});

src/components/Audioplayer/ScrollButton/spec.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ScrollButton from './index';
+
+let makeComponent, component, onScrollToggle;
+
+describe('<ScrollButton />', () => {
+  beforeEach(() => {
+    makeComponent = (shouldScroll) => {
+      onScrollToggle = sinon.stub();
+
+      component = mount(
+        <ScrollButton shouldScroll={shouldScroll} onScrollToggle={onScrollToggle} />
+      );
+    }
+  });
+
+  it('should indicate that shouldScroll', () => {
+    makeComponent(true);
+
+    expect(component.find('label').first().props().className).to.contain('scroll');
+  });
+
+  it('should not indicate that shouldScroll', () => {
+    makeComponent(false);
+
+    expect(component.find('label').first().props().className).not.to.contain('scroll');
+  });
+
+  it('should call onScrollToggle when clicked', () => {
+    component.find('label').first().simulate('click');
+
+    expect(onScrollToggle).to.have.been.called;
+  });
+});

src/components/Audioplayer/Segments/index.js

@@ -8,13 +8,7 @@ export default class Segments extends Component {
     audio: PropTypes.object,
     segments: PropTypes.object.isRequired,
     currentAyah: PropTypes.string,
-    currentWord: PropTypes.string,
-    currentTime: PropTypes.number,
-    onSetCurrentWord: PropTypes.func.isRequired
-  };
-
-  static defaultProps = {
-    currentWord: null
+    currentTime: PropTypes.number
   };
 
   shouldComponentUpdate(nextProps) {
@@ -30,6 +24,8 @@ export default class Segments extends Component {
     const style = [];
     let currentWord = null;
 
+    if (!Object.keys(segments).length) return <noscript />;
+
     Object.keys(segments.words).forEach(wordIndex => {
       const word = segments.words[wordIndex];
 

src/components/Audioplayer/Segments/spec.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Helmet from 'react-helmet';
+
+import Segments from './index';
+
+let makeComponent, component;
+
+describe('<Segments />', () => {
+  describe('when are an empty object', () => {
+    beforeEach(() => {
+      component = mount(
+        <Segments segments={{}} />
+      );
+    });
+
+    it('should not have add any styles', () => {
+      expect(component.props()).to.eql({segments: {}});
+    });
+
+    it('should return noscript', () => {
+      expect(component.find('noscript').length).to.eql(1);
+    });
+  });
+
+  describe('when current time within words', () => {
+    beforeEach(() => {
+      component = mount(
+        <Segments
+          segments={{words: {0: {startTime: 0, endTime: 1}, 1: {startTime: 1, endTime: 2}}}}
+          currentTime={1.5}
+          currentAyah="1:1"
+        />
+      );
+    });
+
+    it('should not contain noscript', () => {
+      expect(component.find('noscript').length).to.eql(0);
+    });
+
+    it('should render Helmet', () => {
+      expect(component.find(Helmet).length).to.eql(1);
+    });
+
+    it('should have style for the second word', () => {
+      expect(component.find(Helmet).first().props().style[0].cssText).to.contain('#word-1-1-1');
+    });
+  });
+
+  describe('when current time is outside words', () => {
+    beforeEach(() => {
+      component = mount(
+        <Segments
+          segments={{words: {0: {startTime: 0, endTime: 1}, 1: {startTime: 2, endTime: 3}}}}
+          currentTime={1.5}
+          currentAyah="1:1"
+        />
+      );
+    });
+
+    it('should not contain noscript', () => {
+      expect(component.find('noscript').length).to.eql(0);
+    });
+
+    it('should render Helmet', () => {
+      expect(component.find(Helmet).length).to.eql(1);
+    });
+
+    it('should not have style words', () => {
+      expect(component.find(Helmet).first().props().style).to.have.lengthOf(0);
+    });
+  });
+});

src/components/Audioplayer/Track/index.js

@@ -9,6 +9,7 @@ export default class Track extends Component {
   };
 
   handleClick = (event) => {
+    console.log(this.refs.container.getBoundingClientRect());
     const { onTrackChange } = this.props;
 
     const fraction = (

src/components/Audioplayer/Track/spec.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Track from './index';
+
+let component, onTrackChange;
+
+describe('<Track />', () => {
+  beforeEach(() => {
+    onTrackChange = sinon.stub();
+    component = mount(
+      <Track progress={50} onTrackChange={onTrackChange} />
+    );
+  });
+
+  it('should show the progress to be 50%', () => {
+    expect(component.children().first().props().style.width).to.eql('50%');
+  });
+
+  it('should return click progress', () => {
+    component.simulate('click', {nativeEvent: {offsetX: 1}});
+
+    expect(onTrackChange).to.have.been.called;
+    expect(onTrackChange).to.have.been.calledWith(Infinity); // because the bounding box is 0!
+  });
+});

src/components/Audioplayer/index.js

@@ -11,9 +11,7 @@ import {
   toggleRepeat,
   toggleScroll,
   buildOnClient,
-  update,
-  setCurrentFile,
-  setCurrentWord
+  update
 } from '../../redux/modules/audioplayer';
 
 // Components
@@ -34,7 +32,6 @@ const style = require('./style.scss');
     segments: state.audioplayer.segments[ownProps.surah.id],
     currentFile: state.audioplayer.currentFile,
     currentAyah: state.audioplayer.currentAyah,
-    currentWord: state.audioplayer.currentWord,
     surahId: state.audioplayer.surahId,
     isSupported: state.audioplayer.isSupported,
     isPlaying: state.audioplayer.isPlaying,
@@ -52,10 +49,8 @@ const style = require('./style.scss');
     previous,
     toggleRepeat,
     toggleScroll,
-    setCurrentWord,
     buildOnClient,
-    update,
-    setCurrentFile
+    update
   }
 )
 export default class Audioplayer extends Component {
@@ -66,20 +61,17 @@ export default class Audioplayer extends Component {
     segments: PropTypes.object,
     files: PropTypes.object,
     currentAyah: PropTypes.string,
-    currentWord: PropTypes.string,
     buildOnClient: PropTypes.func.isRequired,
     isLoadedOnClient: PropTypes.bool.isRequired,
     isSupported: PropTypes.bool.isRequired,
-    shouldRepeat: PropTypes.bool.isRequired,
-    shouldScroll: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    setCurrentWord: PropTypes.func.isRequired,
-    setCurrentFile: PropTypes.func.isRequired,
     start: PropTypes.func.isRequired,
     stop: PropTypes.func.isRequired,
     next: PropTypes.func.isRequired,
     previous: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
+    shouldRepeat: PropTypes.bool.isRequired,
+    shouldScroll: PropTypes.bool.isRequired,
     toggleRepeat: PropTypes.func.isRequired,
     toggleScroll: PropTypes.func.isRequired,
     isPlaying: PropTypes.bool,
@@ -366,9 +358,7 @@ export default class Audioplayer extends Component {
       segments,
       isLoading,
       currentAyah,
-      currentWord,
       currentTime,
-      setCurrentWord, // eslint-disable-line no-shadow
       isSupported,
       duration,
       isLoadedOnClient,
@@ -426,8 +416,6 @@ export default class Audioplayer extends Component {
               audio={currentFile}
               segments={segments[currentAyah]}
               currentAyah={currentAyah}
-              currentWord={currentWord}
-              onSetCurrentWord={setCurrentWord}
               currentTime={currentTime}
             /> : null}
         </div>

src/components/Ayah/spec.js

@@ -17,7 +17,7 @@ describe('<Ayah />', () => {
   });
 
   it('should have correct ayah number', () => {
-    expect(wrapper.find('.label').text()).to.eql(ayah.ayahKey)
+    expect(wrapper.find('.label').text()).to.eql(ayah.ayahKey);
   });
 
   it('should contain translations', () => {