From 2842ce812a1774ad68492a834ec2912b0bc855a9 Mon Sep 17 00:00:00 2001 From: Junmin Liu Date: Wed, 19 Jun 2019 14:48:08 -0500 Subject: [PATCH] add more tests --- .eslintrc | 3 +- .vscode/settings.json | 2 +- docs/lib/Components/index.js | 4 +- package-lock.json | 18 ++---- package.json | 14 +---- src/__tests__/ClosedCaptionButton.spec.js | 60 +++++++++++++++++++ src/__tests__/MenuButton.spec.js | 40 +++++++++++++ src/__tests__/MenuItem.spec.js | 36 +++++++++++ src/actions/video.js | 2 +- src/components/Bezel.js | 8 +-- src/components/Player.js | 6 +- src/components/PosterImage.js | 4 +- src/components/Shortcut.js | 33 +++++----- src/components/Slider.js | 9 +-- src/components/Video.js | 10 ++-- .../control-bar/ClosedCaptionButton.js | 18 +++--- .../control-bar/ForwardReplayControl.js | 4 +- .../control-bar/FullscreenToggle.js | 2 +- .../control-bar/MouseTimeDisplay.js | 4 +- src/components/control-bar/PlayToggle.js | 2 +- src/components/control-bar/ProgressControl.js | 2 +- src/components/control-bar/SeekBar.js | 6 +- src/components/menu/MenuButton.js | 2 +- src/components/volume-control/VolumeBar.js | 2 +- src/reducers/index.js | 2 +- src/utils/browser.js | 7 +-- src/utils/fullscreen.js | 16 ++--- src/utils/index.js | 9 +-- webpack.config.js | 7 +-- 29 files changed, 230 insertions(+), 102 deletions(-) create mode 100644 src/__tests__/ClosedCaptionButton.spec.js create mode 100644 src/__tests__/MenuButton.spec.js create mode 100644 src/__tests__/MenuItem.spec.js diff --git a/.eslintrc b/.eslintrc index 2fcf4780..d971d1d8 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,5 @@ { - "extends": ["airbnb", "prettier"], + "extends": ["airbnb"], "globals": { "document": true, "window": true @@ -29,4 +29,3 @@ "react/prop-types": "off" } } - diff --git a/.vscode/settings.json b/.vscode/settings.json index ec48901b..198dd38e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { - "prettier.eslintIntegration": true, + "eslint.autoFixOnSave": true, "javascript.validate.enable": false, "editor.rulers": [ 80 diff --git a/docs/lib/Components/index.js b/docs/lib/Components/index.js index 882af840..42e29813 100755 --- a/docs/lib/Components/index.js +++ b/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 => ( diff --git a/package-lock.json b/package-lock.json index c4a0f3b9..dc529c05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5026,9 +5026,9 @@ } }, "eslint-config-prettier": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-4.3.0.tgz", - "integrity": "sha512-sZwhSTHVVz78+kYD3t5pCWSYEdVSBR0PXnwjDRsUs8ytIrK8PLXw+6FKp8r3Z7rx4ZszdetWlXYKOHoUrrwPlA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-5.0.0.tgz", + "integrity": "sha512-c17Aqiz5e8LEqoc/QPmYnaxQFAHTx2KlCZBPxXXjEMmNchOLnV/7j0HoPZuC+rL/tDC9bazUYOKJW9bOhftI/w==", "dev": true, "requires": { "get-stdin": "^6.0.0" @@ -5194,12 +5194,6 @@ } } }, - "eslint-plugin-standard": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-standard/-/eslint-plugin-standard-2.3.1.tgz", - "integrity": "sha1-Z2W9Km2ezce98bFFrkuzDit7hvg=", - "dev": true - }, "eslint-restricted-globals": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz", @@ -13242,9 +13236,9 @@ "dev": true }, "table": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/table/-/table-5.4.0.tgz", - "integrity": "sha512-nHFDrxmbrkU7JAFKqKbDJXfzrX2UBsWmrieXFTGxiI5e4ncg3VqsZeI4EzNmX0ncp4XNGVeoxIWJXfCIXwrsvw==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/table/-/table-5.4.1.tgz", + "integrity": "sha512-E6CK1/pZe2N75rGZQotFOdmzWQ1AILtgYbMAbAjvms0S1l5IDB47zG3nCnFGB/w+7nB3vKofbLXCH7HPBo864w==", "dev": true, "requires": { "ajv": "^6.9.1", diff --git a/package.json b/package.json index 4e850f4b..e03109df 100755 --- a/package.json +++ b/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", diff --git a/src/__tests__/ClosedCaptionButton.spec.js b/src/__tests__/ClosedCaptionButton.spec.js new file mode 100644 index 00000000..b6f9294c --- /dev/null +++ b/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( + + ); + + expect(wrapper.type()).toBe(MenuButton); + }); + + it('should show menu items after click', () => { + const wrapper = mount( + + ); + + 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); + }); +}); diff --git a/src/__tests__/MenuButton.spec.js b/src/__tests__/MenuButton.spec.js new file mode 100644 index 00000000..dc44886f --- /dev/null +++ b/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( + + Button + + ); + + expect(wrapper.type()).toBe(ClickableComponent); + }); + + it('should show menu items after click', () => { + const wrapper = mount( + + Button + + ); + + 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); + }); +}); diff --git a/src/__tests__/MenuItem.spec.js b/src/__tests__/MenuItem.spec.js new file mode 100644 index 00000000..f27bfe91 --- /dev/null +++ b/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( + + ); + + expect(wrapper.type()).toBe('li'); + }); + + it('should call onSelectItem after click', () => { + const handleSelectItem = jest.fn(); + const wrapper = mount( + + ); + + expect(wrapper.find('.video-react-menu-item').length).toEqual(1); + wrapper.find('.video-react-menu-item').simulate('click'); + expect(handleSelectItem).toHaveBeenCalled(); + }); +}); diff --git a/src/actions/video.js b/src/actions/video.js index d9596d00..d4c684af 100644 --- a/src/actions/video.js +++ b/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 diff --git a/src/components/Bezel.js b/src/components/Bezel.js index 58d5093b..ad9b8a11 100644 --- a/src/components/Bezel.js +++ b/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 ( diff --git a/src/components/Player.js b/src/components/Player.js index d40ae588..4aaa8d2f 100644 --- a/src/components/Player.js +++ b/src/components/Player.js @@ -114,7 +114,7 @@ export default class Player extends Component { getDefaultChildren(originalChildren) { return [