Merge pull request #418 from quran/master

Merge master into production

Author: ahmedre

.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
   }
 }

nightwatch.js

@@ -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"
   ]
 }

nightwatch.json

@@ -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() {

package.json

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

src/components/Ayah/index.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/components/Ayah/style.scss

@@ -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/config.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}/>);
+}