PlayPause control

Author: mderrick

__mocks__/fileTransformer.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  process(src, filename, config, options) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+  }
+};

package.json

@@ -43,9 +43,13 @@
       "json"
     ],
     "moduleNameMapper": {
-      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ico|vtt)$": "<rootDir>/__mocks__/fileMock.js",
+      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ico|vtt)$": "<rootDir>/__mocks__/fileMock.js",
       "^.+\\.css$": "identity-obj-proxy"
     },
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.(svg)$": "<rootDir>/__mocks__/fileTransformer.js"
+    },
     "testPathIgnorePatterns": [
       "<rootDir>/(build|docs|node_modules)/"
     ],

src/DefaultPlayer/PlayPause/PlayPause.css

@@ -1 +1,26 @@
 .component {}
+
+.component:hover {
+    background-color: #000;
+}
+
+.button {
+    width: 34px;
+    height: 34px;
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    cursor: pointer;
+}
+
+.button:focus {
+    outline:0;
+}
+
+.icon {
+    padding: 5px;
+}

src/DefaultPlayer/PlayPause/PlayPause.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import styles from './PlayPause.css';
+import PlayArrow from './../Icon/play_arrow.svg';
+import Pause from './../Icon/pause.svg';
 
 export default ({ togglePause, paused, className }) => {
     return (
@@ -8,11 +10,19 @@ export default ({ togglePause, paused, className }) => {
             className
         ].join(' ')}>
             <button
+                className={styles.button}
                 onClick={togglePause}
-                type="button">
-                { paused
+                aria-label={ paused
                     ? 'Play'
                     : 'Pause' }
+                type="button">
+                { paused
+                    ? <PlayArrow
+                        className={styles.icon}
+                        fill="#fff" />
+                    : <Pause
+                        className={styles.icon}
+                        fill="#fff" /> }
             </button>
         </div>
     );

src/DefaultPlayer/PlayPause/PlayPause.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import PlayPause from './PlayPause';
+import styles from './PlayPause.css';
+import PlayArrow from './../Icon/play_arrow.svg';
+import Pause from './../Icon/pause.svg';
+
+describe('PlayPause', () => {
+    let component;
+
+    beforeAll(() => {
+        component = shallow(<PlayPause />);
+    });
+
+    it('should accept a className prop and append it to the components class', () => {
+        const newClassNameString = 'a new className';
+        expect(component.prop('className'))
+            .toContain(styles.component);
+        component.setProps({
+            className: newClassNameString
+        });
+        expect(component.prop('className'))
+            .toContain(styles.component);
+        expect(component.prop('className'))
+            .toContain(newClassNameString);
+    });
+
+    it('triggers \'togglePause\' prop when the button is clicked', () => {
+        const spy = jest.fn();
+        component.setProps({
+            togglePause: spy
+        });
+        expect(spy)
+            .not.toHaveBeenCalled();
+        component.find('button').simulate('click');
+        expect(spy)
+            .toHaveBeenCalled();
+    });
+
+    describe('when paused', () => {
+        beforeAll(() => {
+            component.setProps({
+                paused: true
+            });
+        });
+
+        it('shows a play icon', () => {
+            expect(component.html())
+                .toContain(PlayArrow);
+            expect(component.html())
+                .not.toContain(Pause);
+        });
+
+        it('has correct aria-label', () => {
+            expect(component.find('button').prop('aria-label'))
+                .toEqual('Play');
+        });
+    });
+
+    describe('when playing', () => {
+        beforeAll(() => {
+            component.setProps({
+                paused: false
+            });
+        });
+
+        it('shows a pause icon', () => {
+            expect(component.html())
+                .toContain(Pause);
+            expect(component.html())
+                .not.toContain(PlayArrow);
+        });
+
+        it('has correct aria-label', () => {
+            expect(component.find('button').prop('aria-label'))
+                .toEqual('Pause');
+        });
+    });
+});