Merge master into production

.babelrc

@@ -7,11 +7,6 @@
     "transform-react-display-name"
   ],
   "env": {
-    "test": {
-      "plugins": [
-        "rewire"
-      ]
-    },
     "development": {
       "plugins": [
         "typecheck"

.eslintrc

@@ -50,6 +50,8 @@
     "webpackIsomorphicTools": true,
     ga: true,
     Raven: true,
-    mixpanel: true
+    mixpanel: true,
+    "expect": true,
+    "browser": true
   }
 }

package.json

@@ -3,13 +3,18 @@
   "version": "1.0.0",
   "private": false,
   "scripts": {
-    "test": "./node_modules/karma/bin/karma start",
+    "test": "npm run test:dev:unit",
     "test:ci:unit": "./node_modules/karma/bin/karma start --browsers PhantomJS --single-run; npm run test:ci:lint",
-    "test:ci:functional": "node ./nightwatch.js -c ./nightwatch.json -e production",
+    "test:ci:functional": "BROWSER=phantomjs bash tests/functional/test.sh start-ci",
+    "posttest:ci:functional": "bash tests/functional/test.sh stop",
+    "test:ci:unit": "karma start --browsers PhantomJS --single-run; npm run test:ci:lint",
+    "test:dev:unit": "karma start",
     "test:ci:lint": "eslint ./src/**/*.js",
     "test:dev:unit": "./node_modules/karma/bin/karma start",
-    "test:dev:functional": "node ./nightwatch.js -c ./nightwatch.json",
+    "test:dev:functional": "BROWSER=chrome bash tests/functional/test.sh start",
+    "posttest:dev:functional": "bash tests/functional/test.sh stop",
     "test:dev:lint": "eslint ./src/scripts/**/*.js",
+    "test:stylelint": "stylelint './src/**/*.scss' --config webpack/.stylelintrc",
     "dev": "node webpack/dev-server.js & PORT=8000 node start.js",
     "start": "NODE_PATH=\"./src\" node ./start",
     "build": "node ./node_modules/webpack/bin/webpack.js --config webpack/prod.config.js",
@@ -134,11 +139,12 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.6.0",
     "mocha": "^2.2.5",
-    "nightwatch": "^0.8.6",
     "nodemon": "^1.7.1",
     "path": "^0.11.14",
+    "phantomjs": "^1.9.20",
     "phantomjs-polyfill": "0.0.1",
     "piping": "^0.3.0",
+    "pre-commit": "^1.1.3",
     "react-addons-test-utils": "^0.14.7",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
@@ -149,11 +155,14 @@
     "selenium-server": "^2.48.2",
     "sinon": "^1.15.3",
     "sinon-chai": "^2.8.0",
+    "stylelint-webpack-plugin": "^0.2.0",
+    "wdio-mocha-framework": "^0.3.7",
+    "wdio-spec-reporter": "0.0.3",
+    "webdriverio": "4.2.1",
     "webpack-dev-server": "^1.6.5"
   },
   "pre-commit": [
-    "lint",
-    "validate",
-    "test"
+    "test:dev:lint",
+    "test:stylelint"
   ]
 }

src/components/Ayah/index.js

@@ -20,6 +20,7 @@ export default class Ayah extends Component {
     ayah: PropTypes.object.isRequired,
     match: PropTypes.array,
     isSearch: PropTypes.bool,
+    isPlaying: PropTypes.bool,
     tooltip: PropTypes.string,
     currentWord: PropTypes.any, // gets passed in an integer, null by default
     onWordClick: PropTypes.func,
@@ -46,11 +47,14 @@ export default class Ayah extends Component {
   }
 
   handlePlay(ayah) {
-    const {stop, setAyah, start} = this.props.actions;
+    const {isPlaying, actions} = this.props;
+    const {pause, setAyah, play} = actions;
 
-    stop();
+    if (isPlaying) {
+      pause();
+    }
     setAyah(ayah);
-    start();
+    play();
   }
 
   renderTranslations() {

src/components/Ayah/style.scss

@@ -91,7 +91,7 @@
 
   b{
     float: right;
-    border-color:: transparent;
+    border-color: transparent;
     border-width: 0px 0px 1px 0px;
     border-style: solid;
     &.active {

src/config.js

@@ -79,7 +79,7 @@ module.exports = Object.assign({
       ],
       style: [
         {cssText: `@font-face {font-family: 'bismillah';
-          src: url('http://quran-1f14.kxcdn.com/fonts/ttf/bismillah.ttf') format('truetype')}
+          src: url('//quran-1f14.kxcdn.com/fonts/ttf/bismillah.ttf') format('truetype')}
           .bismillah{font-family: 'bismillah'; font-size: 36px !important; color: #000; padding: 25px 0px;}` // eslint-disable-line max-len
         }
       ]

src/containers/Surah/Title/index.js

@@ -13,7 +13,6 @@ const zeroPad = (num, places) => {
 
 const Title = ({ surah }) => {
   const title = require(`../../../../static/images/titles/${zeroPad(surah.id, 3)}.svg`); // eslint-disable-line global-require,max-len
-
   return (
     <div className={`row ${styles.container}`}>
       <div className="col-md-3 col-xs-1 surah-title">
@@ -23,7 +22,7 @@ const Title = ({ surah }) => {
           alt="Ornament left"
         />
         {
-          surah.id >= 1 &&
+          surah.id > 1 &&
             <Link
               data-metrics-event-name="Title:PreviousSurah"
               className="navbar-text previous-chapter"
@@ -56,7 +55,7 @@ const Title = ({ surah }) => {
       </div>
       <div className="col-md-3 col-xs-1 surah-title text-right">
         {
-          surah.id <= 114 &&
+          surah.id < 114 &&
             <Link
               data-metrics-event-name="Title:NextSurah"
               className="navbar-text next-chapter"

src/containers/Surah/Title/spec.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+
+import Title from './index';
+import getSurahs from '../../../../tests/fixtures/getSurahs.js';
+
+let wrapper;
+let surah = {
+  "id": 1,
+  "name": {
+    "arabic": "الفاتحة",
+    "simple": "Al-Fatihah",
+    "complex": "Al-Fātiĥah",
+    "english": "The Opener"
+  }
+};
+
+
+describe('<Title />', () => {
+
+  it('should render', () => {
+    wrapper = renderComponent(surah);
+    expect(wrapper).to.be.ok;
+  });
+
+  it('should not show previous surah if on the first surah', () => {
+    wrapper = renderComponent(surah);
+
+    const previous = wrapper.find('.previous-chapter').length;
+    const next = wrapper.find('.next-chapter').length;
+
+    expect(previous).to.equal(0);
+    expect(next).to.equal(1);
+  });
+
+  it('should not show next surah if on the last surah', () => {
+    surah.id = 114;
+    wrapper = renderComponent(surah);
+
+    const previous = wrapper.find('.previous-chapter').length;
+    const next = wrapper.find('.next-chapter').length;
+
+    expect(previous).to.equal(1);
+    expect(next).to.equal(0);
+  });
+
+  it('should show both next and previous if surah is neither last or first', () => {
+    surah.id = 14;
+    wrapper = renderComponent(surah);
+
+    const previous = wrapper.find('.previous-chapter').length;
+    const next = wrapper.find('.next-chapter').length;
+
+    expect(previous).to.equal(1);
+    expect(next).to.equal(1);
+  });
+});
+
+function renderComponent(data) {
+  return shallow(<Title surah={data}/>);
+}

src/containers/Surah/index.js

@@ -64,7 +64,8 @@ class Surah extends Component {
     options: PropTypes.object.isRequired,
     params: PropTypes.object.isRequired,
     ayahs: PropTypes.object.isRequired,
-    isStarted: PropTypes.bool
+    isStarted: PropTypes.bool,
+    isPlaying: PropTypes.bool
   };
 
   state = {
@@ -280,14 +281,15 @@ class Surah extends Component {
   }
 
   renderAyahs() {
-    const { ayahs, actions, options } = this.props; // eslint-disable-line no-shadow
+    const { ayahs, actions, options, isPlaying } = this.props; // eslint-disable-line no-shadow
 
     return Object.values(ayahs).map(ayah => (
       <Ayah
         ayah={ayah}
         tooltip={options.tooltip}
         onWordClick={actions.audio.setCurrentWord}
         actions={actions.audio}
+        isPlaying={isPlaying}
         key={`${ayah.surahId}-${ayah.ayahNum}-ayah`}
       />
     ));
@@ -467,12 +469,12 @@ function mapStateToProps(state, ownProps) {
   const surah: Object = state.surahs.entities[surahId];
   const ayahs: Object = state.ayahs.entities[surahId];
   const ayahIds = new Set(Object.keys(ayahs).map(key => parseInt(key.split(':')[1], 10)));
-
   return {
     surah,
     ayahs,
     ayahIds,
     isStarted: state.audioplayer.isStarted,
+    isPlaying: state.audioplayer.isPlaying,
     currentWord: state.ayahs.currentWord,
     isEndOfSurah: ayahIds.size === surah.ayat,
     surahs: state.surahs.entities,

src/styles/fonts/_fonts.scss

@@ -1,4 +1,3 @@
-//@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Montserrat);
 @font-face{
   font-family: 'Montserrat';
   src: url('./static/fonts/montserrat/Montserrat-Regular.otf');

src/styles/main.scss

@@ -1,6 +1,4 @@
-//@import 'bootstrap';
 $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
-//@import '~bootstrap-sass/assets/stylesheets/bootstrap';
 
 @import 'mixins/center';
 @import 'components/SurahNav';
@@ -44,38 +42,6 @@ a:hover{
       display: none;
     }
   }
-  .right-side{
-    padding-top: 190px;
-    width: 83.33333333%;
-    float: right;
-    display: block;
-    position: relative;
-    background-color: #fff;
-    transition: width 0.5s;
-    min-height: 100vh;
-    z-index: 9999;
-
-    .navbar-brand{
-      display: none;
-    }
-
-    @media (max-width: $screen-sm-max) {
-      width: 100%;
-      padding-top: 150px;
-
-      .navbar-brand{
-        display: block;
-      }
-    }
-
-    &.active{
-      width: 99%;
-
-      .navbar{
-        width: 99; // This is almost like `noop` to get the css working
-      }
-    }
-  }
 }
 
 .form-control:focus{

src/styles/partials/_navbar-brand.scss

@@ -18,7 +18,6 @@
   }
   img {
     display: inline !important;
-    height: 100%;
     &.logo{
       height: 80%;
       vertical-align: top;