Audioplayer repeats

src/components/Audioplayer/RepeatDropdown/index.js

@@ -15,18 +15,14 @@ export default class RepeatButton extends Component {
   static propTypes = {
     surah: PropTypes.object.isRequired,
     repeat: PropTypes.shape({
-      from: PropTypes.number.isRequired,
-      to: PropTypes.number.isRequired,
+      from: PropTypes.number,
+      to: PropTypes.number,
       times: PropTypes.number
     }).isRequired,
     setRepeat: PropTypes.func.isRequired,
     current: PropTypes.number.isRequired
   };
 
-  state = {
-    nav: 1
-  };
-
   handleToggle = () => {
     const { repeat, setRepeat, current } = this.props;
 
@@ -43,8 +39,6 @@ export default class RepeatButton extends Component {
   handleNavChange = (nav) => {
     const { setRepeat, current } = this.props;
 
-    this.setState({ nav });
-
     if (nav === 1) {
       // Should set single ayah
       return setRepeat({
@@ -135,15 +129,15 @@ export default class RepeatButton extends Component {
     );
   }
 
-  renderOptions() {
+  renderNav() {
     const { repeat } = this.props;
 
     return (
       <Row className={!repeat.from && style.disabled}>
         <Col md={12}>
           <Nav
             bsStyle="pills"
-            activeKey={this.state.nav}
+            activeKey={repeat.from === repeat.to ? 1 : 2}
             onSelect={this.handleNavChange}
           >
             <NavItem eventKey={1} title="Single Ayah" className={style.pill}>
@@ -158,10 +152,51 @@ export default class RepeatButton extends Component {
     );
   }
 
-  render() {
+  renderOptions() {
+    const { repeat } = this.props;
+
+    return (
+      <Row className={!repeat.from && style.disabled}>
+        {repeat.from === repeat.to ? this.renderSingleAyah() : this.renderRangeAyahs()}
+      </Row>
+    );
+  }
+
+  renderTimes() {
     const { repeat, setRepeat } = this.props;
     const times = Array(10).join().split(',');
 
+    return (
+      <Row className={!repeat.from && style.disabled}>
+        <Col md={12} style={{paddingTop: 15}}>
+          Times: <br />
+          <FormControl
+            componentClass="select"
+            value={repeat.times}
+            onChange={(event) => setRepeat({
+              ...repeat,
+              times: parseInt(event.target.value, 10)
+            })}
+          >
+            <option value={Infinity}>
+              Loop
+            </option>
+            {
+              times.map((ayah, index) => (
+                <option key={index} value={index + 1}>
+                  {index + 1}
+                </option>
+              ))
+            }
+          </FormControl>
+        </Col>
+      </Row>
+    );
+  }
+
+  render() {
+    const { repeat } = this.props;
+
     const popover = (
       <Popover
         id="FontSizeDropdown"
@@ -180,34 +215,9 @@ export default class RepeatButton extends Component {
           </Row>
         }
       >
+        {this.renderNav()}
         {this.renderOptions()}
-        <Row className={!repeat.from && style.disabled}>
-          {this.state.nav === 1 ? this.renderSingleAyah() : this.renderRangeAyahs()}
-        </Row>
-        <Row className={!repeat.from && style.disabled}>
-          <Col md={12} style={{paddingTop: 15}}>
-            Times: <br />
-            <FormControl
-              componentClass="select"
-              value={repeat.times}
-              onChange={(event) => setRepeat({
-                ...repeat,
-                times: parseInt(event.target.value, 10)
-              })}
-            >
-              <option value={Infinity}>
-                Loop
-              </option>
-              {
-                times.map((ayah, index) => (
-                  <option key={index} value={index + 1}>
-                    {index + 1}
-                  </option>
-                ))
-              }
-            </FormControl>
-          </Col>
-        </Row>
+        {this.renderTimes()}
       </Popover>
     );
 

src/components/Audioplayer/RepeatDropdown/spec.js

@@ -3,42 +3,79 @@ import { mount } from 'enzyme';
 
 import RepeatDropdown from './index';
 
-let makeComponent, component, setRepeat;
+let makeComponent, component, overlay, setRepeat;
 const surah = {
   ayat: 10
 };
 
+makeComponent = (repeat) => {
+  setRepeat = sinon.stub();
+
+  component = mount(
+    <RepeatDropdown
+      repeat={repeat}
+      setRepeat={setRepeat}
+      current={1}
+      surah={surah}
+    />
+  );
+
+  overlay = mount(component.find('OverlayTrigger').first().props().overlay);
+}
+
 describe('<RepeatDropdown />', () => {
-  beforeEach(() => {
-    makeComponent = (repeat) => {
-      setRepeat = sinon.stub();
-
-      component = mount(
-        <RepeatDropdown
-          repeat={repeat}
-          setRepeat={setRepeat}
-          current={1}
-          surah={surah}
-        />
-      );
-    }
+  it('should not be repeating', () => {
+    makeComponent({times: Infinity});
+
+    expect(component.find('i').first().props().className).not.to.contain('repeat_');
   });
 
   it('should indicate repeating', () => {
-    makeComponent({from: 1, to: 10});
+    makeComponent({from: 1, to: 10, times: Infinity});
 
-    expect(component.find('label').first().props().className).to.contain('repeat');
+    expect(component.find('i').first().props().className).to.contain('repeat');
   });
 
-  it('should not indicate that shouldRepeat', () => {
-    makeComponent({});
+  describe('when single ayah', () => {
+    beforeEach(() => {
+      makeComponent({from: 3, to: 3, times: Infinity});
+    });
+
+    it('should have a single ayah input', () => {
+      expect(overlay.find('FormControl').length).to.eql(2); // with the times
+    });
 
-    expect(component.find('label').first().props().className).not.to.contain('repeat');
+    it('should have value of the ayah for the input', () => {
+      expect(overlay.find('FormControl').first().props().value).to.eql(3);
+    });
   });
 
-  it('should call onRepeatToggle when clicked', () => {
-    component.find('label').first().simulate('click');
+  describe('when range', () => {
+    beforeEach(() => {
+      makeComponent({from: 1, to: 3, times: Infinity});
+    });
+
+    it('should have a range ayah input', () => {
+      expect(overlay.find('FormControl').length).to.eql(3); // with the times
+    });
+
+    it('should have value of the ayah for the input', () => {
+      expect(overlay.find('FormControl').first().props().value).to.eql(1);
+      expect(overlay.find('FormControl').at(1).props().value).to.eql(3);
+    });
+  });
+
+  describe('times', () => {
+    it('should have Infinity count', () => {
+      makeComponent({from: 1, to: 3, times: Infinity});
+
+      expect(overlay.find('FormControl').last().props().value).to.eql(Infinity);
+    });
+
+    it('should have a count', () => {
+      makeComponent({from: 1, to: 3, times: 4});
 
-    expect(onRepeatToggle).to.have.been.called;
+      expect(overlay.find('FormControl').last().props().value).to.eql(4);
+    });
   });
 });