add more tests

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": ["airbnb", "prettier"],
+  "extends": ["airbnb"],
   "globals": {
     "document": true,
     "window": true
@@ -29,4 +29,3 @@
     "react/prop-types": "off"
   }
 }
-

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "prettier.eslintIntegration": true,
+  "eslint.autoFixOnSave": true,
   "javascript.validate.enable": false,
   "editor.rulers": [
     80

docs/lib/Components/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router';
-import { Container, Row, Col, Nav, NavItem, NavLink } from 'reactstrap';
+import {
+  Container, Row, Col, Nav, NavItem, NavLink
+} from 'reactstrap';
 
 const ComponentLink = props => (
   <NavItem>

package.json

@@ -6,6 +6,7 @@
   "style": "dist/video-react.css",
   "scripts": {
     "test": "BABEL_ENV=test jest",
+    "test:watch": "BABEL_ENV=test jest --watch",
     "test:coverage": "BABEL_ENV=test jest --coverage",
     "start": "webpack-dev-server --watch",
     "build-docs": "cross-env WEBPACK_BUILD=production webpack --progress --colors",
@@ -16,20 +17,14 @@
     "create-minor": "sh ./scripts/release minor",
     "create-patch": "sh ./scripts/release patch",
     "publish-release": "npm test && sh ./scripts/publish",
-    "lint": "eslint src",
-    "format": "prettier --config .prettierrc.js --write \"src/**/*.{js,json,md}\" \"docs/**/*.{js,json,md}\" \"*.{js,json,md}\""
+    "lint": "eslint src"
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
-  "lint-staged": {
-    "**/*.{js,css,md}": [
-      "npm run format",
-      "git add"
-    ]
-  },
+  "lint-staged": "npm run lint",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/video-react/video-react.git"
@@ -108,11 +103,9 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.3.0",
     "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.13.0",
-    "eslint-plugin-standard": "^2.0.0",
     "file-loader": "^3.0.1",
     "history": "^3.0.0",
     "hls.js": "^0.6.10",
@@ -123,7 +116,6 @@
     "lint-staged": "^8.2.0",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.12.0",
-    "prettier": "^1.18.2",
     "raw-loader": "^1.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/__tests__/ClosedCaptionButton.spec.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import ClosedCaptionButton from '../components/control-bar/ClosedCaptionButton';
+import MenuButton from '../components/menu/MenuButton';
+
+const playerState = {
+  hasStarted: false,
+  textTracks: [
+    {
+      kind: 'captions',
+      label: 'English',
+      language: 'en',
+      mode: 'showing'
+    },
+    {
+      kind: 'captions',
+      label: 'Swedish',
+      language: 'sv',
+      mode: 'hidden'
+    },
+    {
+      kind: 'captions',
+      label: 'Russian',
+      language: 'ru',
+      mode: 'hidden'
+    },
+    {
+      kind: 'descriptions',
+      label: 'English',
+      language: 'en',
+      mode: 'hidden'
+    }
+  ],
+  currentTextTrack: null
+};
+
+describe('ClosedCaptionButton', () => {
+  it('should render with "MenuButton" tag', () => {
+    const wrapper = shallow(
+      <ClosedCaptionButton
+        player={playerState}
+      />
+    );
+
+    expect(wrapper.type()).toBe(MenuButton);
+  });
+
+  it('should show menu items after click', () => {
+    const wrapper = mount(
+      <ClosedCaptionButton
+        player={playerState}
+      />
+    );
+
+    expect(wrapper.find('.video-react-menu-item').length).toEqual(0);
+    expect(wrapper.find('div.video-react-closed-caption').length).toEqual(1);
+    wrapper.find('div.video-react-closed-caption').simulate('click');
+    expect(wrapper.find('.video-react-menu-item').length).toEqual(4);
+  });
+});

src/__tests__/MenuButton.spec.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import ClickableComponent from '../components/ClickableComponent';
+import MenuButton from '../components/menu/MenuButton';
+
+const items = [1, 2, 3, 4].map(i => ({
+  label: `item${i}`,
+  value: `item${i}`
+}));
+
+describe('ClosedCaptionButton', () => {
+  it('should render with "MenuButton" tag', () => {
+    const wrapper = shallow(
+      <MenuButton
+        items={items}
+        selectedIndex={0}
+      >
+        <span className="video-react-control-text">Button</span>
+      </MenuButton>
+    );
+
+    expect(wrapper.type()).toBe(ClickableComponent);
+  });
+
+  it('should show menu items after click', () => {
+    const wrapper = mount(
+      <MenuButton
+        items={items}
+        selectedIndex={0}
+      >
+        <span className="video-react-control-text">Button</span>
+      </MenuButton>
+    );
+
+    expect(wrapper.find('.video-react-menu-item').length).toEqual(0);
+    expect(wrapper.find('div.video-react-menu-button').length).toEqual(1);
+    wrapper.find('div.video-react-menu-button').simulate('click');
+    expect(wrapper.find('.video-react-menu-item').length).toEqual(4);
+  });
+});

src/__tests__/MenuItem.spec.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import MenuItem from '../components/menu/MenuItem';
+
+const items = [1, 2, 3, 4].map(i => ({
+  label: `item${i}`,
+  value: `item${i}`
+}));
+
+describe('ClosedCaptionButton', () => {
+  it('should render with "MenuButton" tag', () => {
+    const wrapper = shallow(
+      <MenuItem
+        item={items[0]}
+        index={0}
+      />
+    );
+
+    expect(wrapper.type()).toBe('li');
+  });
+
+  it('should call onSelectItem after click', () => {
+    const handleSelectItem = jest.fn();
+    const wrapper = mount(
+      <MenuItem
+        item={items[0]}
+        index={0}
+        onSelectItem={handleSelectItem}
+      />
+    );
+
+    expect(wrapper.find('.video-react-menu-item').length).toEqual(1);
+    wrapper.find('.video-react-menu-item').simulate('click');
+    expect(handleSelectItem).toHaveBeenCalled();
+  });
+});

src/actions/video.js

@@ -200,7 +200,7 @@ export function handleEndSeeking(time) {
   };
 }
 
-export function activeTextTrack(textTrack) {
+export function activateTextTrack(textTrack) {
   return {
     type: ACTIVATE_TEXT_TRACK,
     textTrack

src/components/Bezel.js

@@ -24,8 +24,8 @@ export default class Bezel extends Component {
 
   handleStateChange(state, prevState) {
     if (
-      state.count !== prevState.count &&
-      state.operation.source === 'shortcut'
+      state.count !== prevState.count
+      && state.operation.source === 'shortcut'
     ) {
       if (this.timer) {
         // previous animation is not finished
@@ -58,8 +58,8 @@ export default class Bezel extends Component {
     }
     const style = this.state.hidden
       ? {
-          display: 'none'
-        }
+        display: 'none'
+      }
       : null;
 
     return (

src/components/Player.js

@@ -114,7 +114,7 @@ export default class Player extends Component {
   getDefaultChildren(originalChildren) {
     return [
       <Video
-        ref={c => {
+        ref={(c) => {
           this.video = c;
           this.manager.video = this.video;
         }}
@@ -340,7 +340,7 @@ export default class Player extends Component {
 
   startControlsTimer() {
     let controlBarActiveTime = 3000;
-    React.Children.forEach(this.props.children, element => {
+    React.Children.forEach(this.props.children, (element) => {
       if (!React.isValidElement(element) || element.type !== ControlBar) {
         return;
       }
@@ -417,7 +417,7 @@ export default class Player extends Component {
           this.props.className
         )}
         style={this.getStyle()}
-        ref={c => {
+        ref={(c) => {
           this.manager.rootElement = c;
         }}
         role="region"

src/components/PosterImage.js

@@ -9,7 +9,9 @@ const propTypes = {
   className: PropTypes.string
 };
 
-function PosterImage({ poster, player, actions, className }) {
+function PosterImage({
+  poster, player, actions, className
+}) {
   if (!poster || player.hasStarted) {
     return null;
   }