From 777cc2a71268cffc8972b2369195ec17dee926b8 Mon Sep 17 00:00:00 2001 From: Lukas Heiligenbrunner Date: Sun, 25 Oct 2020 18:48:23 +0000 Subject: [PATCH] reformattings no redirect on tagclick on homepage no multiple add of same tag possible --- .gitlab-ci.yml | 3 +- api/src/VideoParser.php | 44 ++++++------ api/src/handlers/RequestBase.php | 20 +++--- api/src/handlers/Tags.php | 40 ++++++----- api/src/handlers/Video.php | 7 +- deb/OpenMediaCenter/DEBIAN/postinst | 3 + package.json | 8 +-- src/App.js | 50 ++++++------- src/App.module.css | 2 +- src/App.test.js | 36 +++++----- src/GlobalInfos.js | 4 +- src/GlobalInfos.test.js | 4 +- src/elements/AddTagPopup/AddTagPopup.js | 22 +++--- src/elements/AddTagPopup/AddTagPopup.test.js | 20 +++--- src/elements/InfoHeaderItem/InfoHeaderItem.js | 10 +-- .../InfoHeaderItem/InfoHeaderItem.test.js | 18 ++--- src/elements/NewTagPopup/NewTagPopup.js | 12 ++-- src/elements/NewTagPopup/NewTagPopup.test.js | 12 ++-- src/elements/PageTitle/PageTitle.js | 6 +- src/elements/PageTitle/PageTitle.test.js | 10 +-- src/elements/Preview/Preview.js | 12 ++-- src/elements/Preview/Previw.test.js | 14 ++-- src/elements/SideBar/SideBar.js | 6 +- src/elements/SideBar/SideBar.test.js | 14 ++-- src/elements/Tag/Tag.js | 6 +- src/elements/Tag/Tag.test.js | 16 ++--- src/elements/VideoContainer/VideoContainer.js | 12 ++-- .../VideoContainer/VideoContainer.test.js | 8 +-- src/pages/CategoryPage/CategoryPage.js | 36 +++++----- src/pages/CategoryPage/CategoryPage.test.js | 34 ++++----- src/pages/HomePage/HomePage.js | 48 +++++++------ src/pages/HomePage/HomePage.test.js | 52 +++++++++++--- src/pages/Player/Player.js | 72 ++++++++++--------- src/pages/Player/Player.test.js | 38 +++++----- src/pages/RandomPage/RandomPage.js | 14 ++-- src/pages/RandomPage/RandomPage.test.js | 14 ++-- src/pages/SettingsPage/GeneralSettings.js | 38 +++++----- .../SettingsPage/GeneralSettings.test.js | 56 +++++++-------- src/pages/SettingsPage/MovieSettings.js | 28 ++++---- src/pages/SettingsPage/MovieSettings.test.js | 28 ++++---- src/pages/SettingsPage/SettingsPage.js | 26 +++---- src/pages/SettingsPage/SettingsPage.test.js | 32 ++++----- src/setupTests.js | 6 +- 43 files changed, 493 insertions(+), 448 deletions(-) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index cb0771f..a70a722 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -1,4 +1,4 @@ -image: node:latest +image: node:14 stages: - prepare @@ -21,7 +21,6 @@ prepare: stage: prepare script: - npm install --progress=false - - npm update --progress=false build: stage: build diff --git a/api/src/VideoParser.php b/api/src/VideoParser.php index bbc51a8..df172c5 100644 --- a/api/src/VideoParser.php +++ b/api/src/VideoParser.php @@ -212,6 +212,28 @@ class VideoParser { } } + /** + * get all videoinfos of a video file + * + * @param $video string name including extension + * @return object all infos as object + */ + private function _get_video_attributes(string $video) { + $command = "mediainfo \"../$this->videopath$video\" --Output=JSON"; + $output = shell_exec($command); + return json_decode($output); + } + + /** + * write a line to the output log file + * + * @param string $message message to write + */ + public function writeLog(string $message) { + file_put_contents("/tmp/output.log", $message, FILE_APPEND); + flush(); + } + /** * insert the corresponding videosize tag to a specific videoid * @param $width int video width @@ -246,28 +268,6 @@ class VideoParser { } } - /** - * get all videoinfos of a video file - * - * @param $video string name including extension - * @return object all infos as object - */ - private function _get_video_attributes(string $video) { - $command = "mediainfo \"../$this->videopath$video\" --Output=JSON"; - $output = shell_exec($command); - return json_decode($output); - } - - /** - * write a line to the output log file - * - * @param string $message message to write - */ - public function writeLog(string $message) { - file_put_contents("/tmp/output.log", $message, FILE_APPEND); - flush(); - } - /** * ckecks if tag exists -- if not creates it * @param string $tagname the name of the tag diff --git a/api/src/handlers/RequestBase.php b/api/src/handlers/RequestBase.php index 7eef649..92542a0 100644 --- a/api/src/handlers/RequestBase.php +++ b/api/src/handlers/RequestBase.php @@ -1,5 +1,5 @@ getFromDB(); } - private function getFromDB(){ - /** - * returns all available tags from database - */ - $this->addActionHandler("getAllTags", function () { - $query = "SELECT tag_name,tag_id from tags"; - $result = $this->conn->query($query); - - $rows = array(); - while ($r = mysqli_fetch_assoc($result)) { - array_push($rows, $r); - } - $this->commitMessage(json_encode($rows)); - }); - } - - private function addToDB(){ + private function addToDB() { /** * creates a new tag * query requirements: * * tagname -- name of the new tag */ $this->addActionHandler("createTag", function () { - $query = "INSERT INTO tags (tag_name) VALUES ('" . $_POST['tagname'] . "')"; + // skip tag create if already existing + $query = "INSERT IGNORE INTO tags (tag_name) VALUES ('" . $_POST['tagname'] . "')"; if ($this->conn->query($query) === TRUE) { $this->commitMessage('{"result":"success"}'); @@ -54,7 +39,8 @@ class Tags extends RequestBase { $movieid = $_POST['movieid']; $tagid = $_POST['id']; - $query = "INSERT INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')"; + // skip tag add if already assigned + $query = "INSERT IGNORE INTO video_tags(tag_id, video_id) VALUES ('$tagid','$movieid')"; if ($this->conn->query($query) === TRUE) { $this->commitMessage('{"result":"success"}'); @@ -63,4 +49,20 @@ class Tags extends RequestBase { } }); } + + private function getFromDB() { + /** + * returns all available tags from database + */ + $this->addActionHandler("getAllTags", function () { + $query = "SELECT tag_name,tag_id from tags"; + $result = $this->conn->query($query); + + $rows = array(); + while ($r = mysqli_fetch_assoc($result)) { + array_push($rows, $r); + } + $this->commitMessage(json_encode($rows)); + }); + } } diff --git a/api/src/handlers/Video.php b/api/src/handlers/Video.php index bfb2247..fdee534 100755 --- a/api/src/handlers/Video.php +++ b/api/src/handlers/Video.php @@ -1,5 +1,5 @@ videopath . $row["movie_name"] . ".mp4"); - $arr["likes"] = (int) $row["likes"]; + $arr["likes"] = (int)$row["likes"]; $arr["quality"] = $row["quality"]; $arr["length"] = $row["length"]; diff --git a/deb/OpenMediaCenter/DEBIAN/postinst b/deb/OpenMediaCenter/DEBIAN/postinst index add629c..d1cb982 100755 --- a/deb/OpenMediaCenter/DEBIAN/postinst +++ b/deb/OpenMediaCenter/DEBIAN/postinst @@ -30,3 +30,6 @@ chown -R www-data:www-data /var/www/openmediacenter # restart services systemctl restart nginx + +# trigger a movie reindex +php /var/www/openmediacenter/extractvideopreviews.php diff --git a/package.json b/package.json index f64d7cd..5548084 100644 --- a/package.json +++ b/package.json @@ -10,14 +10,14 @@ "bootstrap": "^4.5.3", "plyr-react": "^2.2.0", "react": "^16.14.0", - "react-bootstrap": "^1.3.0", + "react-bootstrap": "^1.4.0", "react-dom": "^16.14.0", - "react-scripts": "^3.4.3" + "react-scripts": "^3.4.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test --reporters=jest-junit --reporters=default --ci --silent", + "test": "react-scripts test --reporters=jest-junit --reporters=default", "coverage": "react-scripts test --coverage --watchAll=false", "eject": "react-scripts eject" }, @@ -31,7 +31,7 @@ "text-summary" ] }, - "proxy": "http://192.168.0.42", + "proxy": "http://192.168.0.42:8080", "homepage": "/", "eslintConfig": { "extends": "react-app" diff --git a/src/App.js b/src/App.js index 17e3546..3409221 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,14 @@ import React from 'react'; -import HomePage from "./pages/HomePage/HomePage"; -import RandomPage from "./pages/RandomPage/RandomPage"; -import GlobalInfos from "./GlobalInfos"; +import HomePage from './pages/HomePage/HomePage'; +import RandomPage from './pages/RandomPage/RandomPage'; +import GlobalInfos from './GlobalInfos'; // include bootstraps css import 'bootstrap/dist/css/bootstrap.min.css'; -import style from './App.module.css' +import style from './App.module.css'; -import SettingsPage from "./pages/SettingsPage/SettingsPage"; -import CategoryPage from "./pages/CategoryPage/CategoryPage"; +import SettingsPage from './pages/SettingsPage/SettingsPage'; +import CategoryPage from './pages/CategoryPage/CategoryPage'; /** * The main App handles the main tabs and which content to show @@ -19,10 +19,10 @@ class App extends React.Component { constructor(props, context) { super(props, context); this.state = { - page: "default", + page: 'default', generalSettingsLoaded: false, passwordsupport: null, - mediacentername: "OpenMediaCenter" + mediacentername: 'OpenMediaCenter' }; // bind this to the method for being able to call methods such as this.setstate @@ -67,24 +67,24 @@ class App extends React.Component { */ MainBody() { let page; - if (this.state.page === "default") { + if (this.state.page === 'default') { page = ; this.mypage = page; - } else if (this.state.page === "random") { + } else if (this.state.page === 'random') { page = ; this.mypage = page; - } else if (this.state.page === "settings") { + } else if (this.state.page === 'settings') { page = ; this.mypage = page; - } else if (this.state.page === "categories") { + } else if (this.state.page === 'categories') { page = ; this.mypage = page; - } else if (this.state.page === "video") { + } else if (this.state.page === 'video') { // show videoelement if neccessary page = this.newElement; console.log(page); - } else if (this.state.page === "lastpage") { + } else if (this.state.page === 'lastpage') { // return back to last page page = this.mypage; } else { @@ -102,20 +102,20 @@ class App extends React.Component {
{this.state.mediacentername}
-
this.setState({page: "default"})}>Home +
this.setState({page: 'default'})}>Home
-
this.setState({page: "random"})}>Random Video +
this.setState({page: 'random'})}>Random Video
-
this.setState({page: "categories"})}>Categories +
this.setState({page: 'categories'})}>Categories
-
this.setState({page: "settings"})}>Settings +
this.setState({page: 'settings'})}>Settings
- {this.state.generalSettingsLoaded ? this.MainBody() : "loading"} + {this.state.generalSettingsLoaded ? this.MainBody() : 'loading'}
); } @@ -127,7 +127,7 @@ class App extends React.Component { this.newElement = element; this.setState({ - page: "video" + page: 'video' }); } @@ -136,7 +136,7 @@ class App extends React.Component { */ returnToLastElement() { this.setState({ - page: "lastpage" + page: 'lastpage' }); } } diff --git a/src/App.module.css b/src/App.module.css index 10a8a7e..8cab3cd 100644 --- a/src/App.module.css +++ b/src/App.module.css @@ -37,8 +37,8 @@ } .navcontainer { - border-width: 0 0 2px 0; border-style: dotted; + border-width: 0 0 2px 0; padding-bottom: 40px; padding-top: 20px; diff --git a/src/App.test.js b/src/App.test.js index cc12113..777f678 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,6 +1,6 @@ import React from 'react'; import App from './App'; -import {shallow} from 'enzyme' +import {shallow} from 'enzyme'; describe('', function () { it('renders without crashing ', function () { @@ -24,7 +24,7 @@ describe('', function () { wrapper.instance().changeRootElement(
); - expect(wrapper.find("#testit")).toHaveLength(1); + expect(wrapper.find('#testit')).toHaveLength(1); }); it('test hide video again', function () { @@ -33,61 +33,61 @@ describe('', function () { wrapper.instance().changeRootElement(
); - expect(wrapper.find("#testit")).toHaveLength(1); + expect(wrapper.find('#testit')).toHaveLength(1); wrapper.instance().returnToLastElement(); - expect(wrapper.find("HomePage")).toHaveLength(1); + expect(wrapper.find('HomePage')).toHaveLength(1); }); it('test fallback to last loaded page', function () { const wrapper = shallow(); wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed - wrapper.find(".navitem").findWhere(t => t.text() === "Random Video" && t.type() === "div").simulate("click"); + wrapper.find('.navitem').findWhere(t => t.text() === 'Random Video' && t.type() === 'div').simulate('click'); wrapper.instance().changeRootElement(
); - expect(wrapper.find("#testit")).toHaveLength(1); + expect(wrapper.find('#testit')).toHaveLength(1); wrapper.instance().returnToLastElement(); - expect(wrapper.find("RandomPage")).toHaveLength(1); + expect(wrapper.find('RandomPage')).toHaveLength(1); }); it('test home click', function () { const wrapper = shallow(); wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed - wrapper.setState({page: "wrongvalue"}); - expect(wrapper.find("HomePage")).toHaveLength(0); - wrapper.find(".navitem").findWhere(t => t.text() === "Home" && t.type() === "div").simulate("click"); - expect(wrapper.find("HomePage")).toHaveLength(1); + wrapper.setState({page: 'wrongvalue'}); + expect(wrapper.find('HomePage')).toHaveLength(0); + wrapper.find('.navitem').findWhere(t => t.text() === 'Home' && t.type() === 'div').simulate('click'); + expect(wrapper.find('HomePage')).toHaveLength(1); }); it('test category click', function () { const wrapper = shallow(); wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed - expect(wrapper.find("CategoryPage")).toHaveLength(0); - wrapper.find(".navitem").findWhere(t => t.text() === "Categories" && t.type() === "div").simulate("click"); - expect(wrapper.find("CategoryPage")).toHaveLength(1); + expect(wrapper.find('CategoryPage')).toHaveLength(0); + wrapper.find('.navitem').findWhere(t => t.text() === 'Categories' && t.type() === 'div').simulate('click'); + expect(wrapper.find('CategoryPage')).toHaveLength(1); }); it('test settings click', function () { const wrapper = shallow(); wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed - expect(wrapper.find("SettingsPage")).toHaveLength(0); - wrapper.find(".navitem").findWhere(t => t.text() === "Settings" && t.type() === "div").simulate("click"); - expect(wrapper.find("SettingsPage")).toHaveLength(1); + expect(wrapper.find('SettingsPage')).toHaveLength(0); + wrapper.find('.navitem').findWhere(t => t.text() === 'Settings' && t.type() === 'div').simulate('click'); + expect(wrapper.find('SettingsPage')).toHaveLength(1); }); it('test initial fetch from api', done => { global.fetch = global.prepareFetchApi({ generalSettingsLoaded: true, passwordsupport: true, - mediacentername: "testname" + mediacentername: 'testname' }); const wrapper = shallow(); diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js index 5c45ac4..0ef18ff 100644 --- a/src/GlobalInfos.js +++ b/src/GlobalInfos.js @@ -1,5 +1,5 @@ -import darktheme from "./AppDarkTheme.module.css"; -import lighttheme from "./AppLightTheme.module.css"; +import darktheme from './AppDarkTheme.module.css'; +import lighttheme from './AppLightTheme.module.css'; /** * This class is available for all components in project diff --git a/src/GlobalInfos.test.js b/src/GlobalInfos.test.js index c87cf85..f7f5303 100644 --- a/src/GlobalInfos.test.js +++ b/src/GlobalInfos.test.js @@ -1,5 +1,5 @@ -import React from "react"; -import GlobalInfos from "./GlobalInfos"; +import React from 'react'; +import GlobalInfos from './GlobalInfos'; describe('', function () { it('always same instance ', function () { diff --git a/src/elements/AddTagPopup/AddTagPopup.js b/src/elements/AddTagPopup/AddTagPopup.js index eeb928b..1d165e6 100644 --- a/src/elements/AddTagPopup/AddTagPopup.js +++ b/src/elements/AddTagPopup/AddTagPopup.js @@ -1,9 +1,9 @@ -import React from "react"; +import React from 'react'; import ReactDom from 'react-dom'; -import style from './AddTagPopup.module.css' -import Tag from "../Tag/Tag"; -import {Line} from "../PageTitle/PageTitle"; -import GlobalInfos from "../../GlobalInfos"; +import style from './AddTagPopup.module.css'; +import Tag from '../Tag/Tag'; +import {Line} from '../PageTitle/PageTitle'; +import GlobalInfos from '../../GlobalInfos'; /** * component creates overlay to add a new tag to a video @@ -84,7 +84,7 @@ class AddTagPopup extends React.Component { */ keypress(event) { // hide if escape is pressed - if (event.key === "Escape") { + if (event.key === 'Escape') { this.props.onHide(); } } @@ -95,7 +95,7 @@ class AddTagPopup extends React.Component { * @param tagname tag name to add */ addTag(tagid, tagname) { - console.log(this.props) + console.log(this.props); const updateRequest = new FormData(); updateRequest.append('action', 'addTag'); updateRequest.append('id', tagid); @@ -104,8 +104,8 @@ class AddTagPopup extends React.Component { fetch('/api/tags.php', {method: 'POST', body: updateRequest}) .then((response) => response.json() .then((result) => { - if (result.result !== "success") { - console.log("error occured while writing to db -- todo error handling"); + if (result.result !== 'success') { + console.log('error occured while writing to db -- todo error handling'); console.log(result.result); } else { this.props.submit(tagid, tagname); @@ -142,8 +142,8 @@ class AddTagPopup extends React.Component { xOld = e.clientX; yOld = e.clientY; // set the element's new position: - elmnt.style.top = (elmnt.offsetTop - dy) + "px"; - elmnt.style.left = (elmnt.offsetLeft - dx) + "px"; + elmnt.style.top = (elmnt.offsetTop - dy) + 'px'; + elmnt.style.left = (elmnt.offsetLeft - dx) + 'px'; } function closeDragElement() { diff --git a/src/elements/AddTagPopup/AddTagPopup.test.js b/src/elements/AddTagPopup/AddTagPopup.test.js index 5adb711..d1fce94 100644 --- a/src/elements/AddTagPopup/AddTagPopup.test.js +++ b/src/elements/AddTagPopup/AddTagPopup.test.js @@ -1,9 +1,9 @@ -import React from "react"; +import React from 'react'; -import {shallow} from 'enzyme' -import "@testing-library/jest-dom" +import {shallow} from 'enzyme'; +import '@testing-library/jest-dom'; -import AddTagPopup from "./AddTagPopup"; +import AddTagPopup from './AddTagPopup'; describe('', function () { it('renders without crashing ', function () { @@ -14,10 +14,10 @@ describe('', function () { it('test tag insertion', function () { const wrapper = shallow(); wrapper.setState({ - items: [{tag_id: 1, tag_name: 'test'}, {tag_id: 2, tag_name: "ee"}] + items: [{tag_id: 1, tag_name: 'test'}, {tag_id: 2, tag_name: 'ee'}] }, () => { expect(wrapper.find('Tag')).toHaveLength(2); - expect(wrapper.find('Tag').first().dive().text()).toBe("test"); + expect(wrapper.find('Tag').first().dive().text()).toBe('test'); }); }); @@ -36,13 +36,13 @@ describe('', function () { it('test addtag', done => { const wrapper = shallow(); - global.fetch = prepareFetchApi({result: "success"}); + global.fetch = prepareFetchApi({result: 'success'}); wrapper.setProps({ submit: jest.fn(() => {}), onHide: jest.fn() }, () => { - wrapper.instance().addTag(1, "test"); + wrapper.instance().addTag(1, 'test'); expect(global.fetch).toHaveBeenCalledTimes(1); }); @@ -59,13 +59,13 @@ describe('', function () { it('test failing addTag', done => { const wrapper = shallow(); - global.fetch = prepareFetchApi({result: "fail"}); + global.fetch = prepareFetchApi({result: 'fail'}); wrapper.setProps({ submit: jest.fn(() => {}), onHide: jest.fn() }, () => { - wrapper.instance().addTag(1, "test"); + wrapper.instance().addTag(1, 'test'); expect(global.fetch).toHaveBeenCalledTimes(1); }); diff --git a/src/elements/InfoHeaderItem/InfoHeaderItem.js b/src/elements/InfoHeaderItem/InfoHeaderItem.js index 00a95db..b8a65d3 100644 --- a/src/elements/InfoHeaderItem/InfoHeaderItem.js +++ b/src/elements/InfoHeaderItem/InfoHeaderItem.js @@ -1,7 +1,7 @@ -import React from "react"; +import React from 'react'; import style from './InfoHeaderItem.module.css'; -import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; -import {Spinner} from "react-bootstrap"; +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import {Spinner} from 'react-bootstrap'; /** * a component to display one of the short quickinfo tiles on dashboard @@ -15,8 +15,8 @@ class InfoHeaderItem extends React.Component { }} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>
{this.props.text !== null && this.props.text !== undefined ? diff --git a/src/elements/InfoHeaderItem/InfoHeaderItem.test.js b/src/elements/InfoHeaderItem/InfoHeaderItem.test.js index e20a581..10b80dc 100644 --- a/src/elements/InfoHeaderItem/InfoHeaderItem.test.js +++ b/src/elements/InfoHeaderItem/InfoHeaderItem.test.js @@ -1,6 +1,6 @@ -import {shallow} from "enzyme"; -import React from "react"; -import InfoHeaderItem from "./InfoHeaderItem"; +import {shallow} from 'enzyme'; +import React from 'react'; +import InfoHeaderItem from './InfoHeaderItem'; describe('', function () { it('renders without crashing ', function () { @@ -10,34 +10,34 @@ describe('', function () { it('renders correct text', function () { const wrapper = shallow(); - expect(wrapper.find(".maintext").text()).toBe("mytext"); + expect(wrapper.find('.maintext').text()).toBe('mytext'); }); it('renders correct subtext', function () { const wrapper = shallow(); - expect(wrapper.find(".subtext").text()).toBe("testtext"); + expect(wrapper.find('.subtext').text()).toBe('testtext'); }); it('test no subtext if no text defined', function () { const wrapper = shallow(); - expect(wrapper.find(".subtext")).toHaveLength(0); + expect(wrapper.find('.subtext')).toHaveLength(0); }); it('test custom click handler', function () { const func = jest.fn(); const wrapper = shallow( func()}/>); expect(func).toBeCalledTimes(0); - wrapper.simulate("click"); + wrapper.simulate('click'); expect(func).toBeCalledTimes(1); }); it('test insertion of loading spinner', function () { const wrapper = shallow(); - expect(wrapper.find("Spinner").length).toBe(1); + expect(wrapper.find('Spinner').length).toBe(1); }); it('test loading spinner if undefined', function () { const wrapper = shallow(); - expect(wrapper.find("Spinner").length).toBe(1); + expect(wrapper.find('Spinner').length).toBe(1); }); }); diff --git a/src/elements/NewTagPopup/NewTagPopup.js b/src/elements/NewTagPopup/NewTagPopup.js index 481cfe1..8f4d142 100644 --- a/src/elements/NewTagPopup/NewTagPopup.js +++ b/src/elements/NewTagPopup/NewTagPopup.js @@ -1,6 +1,6 @@ -import React from "react"; -import Modal from 'react-bootstrap/Modal' -import {Form} from "react-bootstrap"; +import React from 'react'; +import Modal from 'react-bootstrap/Modal'; +import {Form} from 'react-bootstrap'; /** * creates modal overlay to define a new Tag @@ -30,7 +30,7 @@ class NewTagPopup extends React.Component { Tag Name: { - this.value = v.target.value + this.value = v.target.value; }}/> This Tag will automatically show up on category page. @@ -59,8 +59,8 @@ class NewTagPopup extends React.Component { fetch('/api/tags.php', {method: 'POST', body: updateRequest}) .then((response) => response.json()) .then((result) => { - if (result.result !== "success") { - console.log("error occured while writing to db -- todo error handling"); + if (result.result !== 'success') { + console.log('error occured while writing to db -- todo error handling'); console.log(result.result); } this.props.onHide(); diff --git a/src/elements/NewTagPopup/NewTagPopup.test.js b/src/elements/NewTagPopup/NewTagPopup.test.js index fad4707..e2cabb2 100644 --- a/src/elements/NewTagPopup/NewTagPopup.test.js +++ b/src/elements/NewTagPopup/NewTagPopup.test.js @@ -1,8 +1,8 @@ -import React from "react"; +import React from 'react'; -import {shallow} from 'enzyme' -import "@testing-library/jest-dom" -import NewTagPopup from "./NewTagPopup"; +import {shallow} from 'enzyme'; +import '@testing-library/jest-dom'; +import NewTagPopup from './NewTagPopup'; describe('', function () { it('renders without crashing ', function () { @@ -14,7 +14,7 @@ describe('', function () { const mockSuccessResponse = {}; const mockJsonPromise = Promise.resolve(mockSuccessResponse); const mockFetchPromise = Promise.resolve({ - json: () => mockJsonPromise, + json: () => mockJsonPromise }); global.fetch = jest.fn().mockImplementation(() => mockFetchPromise); @@ -23,7 +23,7 @@ describe('', function () { const wrapper = shallow(); wrapper.setProps({ onHide: () => { - func() + func(); } }); diff --git a/src/elements/PageTitle/PageTitle.js b/src/elements/PageTitle/PageTitle.js index df3096a..a65f893 100644 --- a/src/elements/PageTitle/PageTitle.js +++ b/src/elements/PageTitle/PageTitle.js @@ -1,6 +1,6 @@ -import React from "react"; -import style from "./PageTitle.module.css" -import GlobalInfos from "../../GlobalInfos"; +import React from 'react'; +import style from './PageTitle.module.css'; +import GlobalInfos from '../../GlobalInfos'; /** * Component for generating PageTitle with bottom Line diff --git a/src/elements/PageTitle/PageTitle.test.js b/src/elements/PageTitle/PageTitle.test.js index 6ed16c2..5b2e22c 100644 --- a/src/elements/PageTitle/PageTitle.test.js +++ b/src/elements/PageTitle/PageTitle.test.js @@ -1,7 +1,7 @@ import React from 'react'; -import {shallow} from 'enzyme' +import {shallow} from 'enzyme'; -import PageTitle from "./PageTitle"; +import PageTitle from './PageTitle'; describe('', function () { it('renders without crashing ', function () { @@ -13,19 +13,19 @@ describe('', function () { const wrapper = shallow(heyimachild); const children = wrapper.children(); - expect(children.at(children.length - 2).text()).toBe("heyimachild"); + expect(children.at(children.length - 2).text()).toBe('heyimachild'); }); it('renders pagetitle prop', function () { const wrapper = shallow(); - expect(wrapper.find(".pageheader").text()).toBe("testtitle"); + expect(wrapper.find('.pageheader').text()).toBe('testtitle'); }); it('renders subtitle prop', function () { const wrapper = shallow(); - expect(wrapper.find(".pageheadersubtitle").text()).toBe("testsubtitle"); + expect(wrapper.find('.pageheadersubtitle').text()).toBe('testsubtitle'); }); }); diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js index 066d819..2e7dd9e 100644 --- a/src/elements/Preview/Preview.js +++ b/src/elements/Preview/Preview.js @@ -1,8 +1,8 @@ -import React from "react"; -import style from "./Preview.module.css"; -import Player from "../../pages/Player/Player"; -import {Spinner} from "react-bootstrap"; -import GlobalInfos from "../../GlobalInfos"; +import React from 'react'; +import style from './Preview.module.css'; +import Player from '../../pages/Player/Player'; +import {Spinner} from 'react-bootstrap'; +import GlobalInfos from '../../GlobalInfos'; /** * Component for single preview tile @@ -62,7 +62,7 @@ class Preview extends React.Component { * handle the click event of a tile */ itemClick() { - console.log("item clicked!" + this.state.name); + console.log('item clicked!' + this.state.name); this.props.viewbinding.changeRootElement( ', function () { it('renders without crashing ', function () { @@ -23,7 +23,7 @@ describe('', function () { wrapper.setProps({ viewbinding: { changeRootElement: () => { - func() + func(); } } }); @@ -38,7 +38,7 @@ describe('', function () { const mockSuccessResponse = 'testsrc'; const mockJsonPromise = Promise.resolve(mockSuccessResponse); const mockFetchPromise = Promise.resolve({ - text: () => mockJsonPromise, + text: () => mockJsonPromise }); global.fetch = jest.fn().mockImplementation(() => mockFetchPromise); @@ -49,7 +49,7 @@ describe('', function () { process.nextTick(() => { // received picture should be rendered into wrapper - expect(wrapper.find(".previewimage").props().src).not.toBeNull(); + expect(wrapper.find('.previewimage').props().src).not.toBeNull(); global.fetch.mockClear(); done(); @@ -61,7 +61,7 @@ describe('', function () { const wrapper = shallow(); // expect load animation to be visible - expect(wrapper.find(".loadAnimation")).toHaveLength(1); + expect(wrapper.find('.loadAnimation')).toHaveLength(1); }); }); @@ -84,7 +84,7 @@ describe('', function () { const wrapper = shallow(); wrapper.setProps({ categorybinding: () => { - func() + func(); } }); diff --git a/src/elements/SideBar/SideBar.js b/src/elements/SideBar/SideBar.js index f1c331d..8f13fd3 100644 --- a/src/elements/SideBar/SideBar.js +++ b/src/elements/SideBar/SideBar.js @@ -1,6 +1,6 @@ -import React from "react"; -import style from "./SideBar.module.css" -import GlobalInfos from "../../GlobalInfos"; +import React from 'react'; +import style from './SideBar.module.css'; +import GlobalInfos from '../../GlobalInfos'; /** * component for sidebar-info diff --git a/src/elements/SideBar/SideBar.test.js b/src/elements/SideBar/SideBar.test.js index ad3b3f8..8d9e13f 100644 --- a/src/elements/SideBar/SideBar.test.js +++ b/src/elements/SideBar/SideBar.test.js @@ -1,8 +1,8 @@ -import React from "react"; -import SideBar, {SideBarItem, SideBarTitle} from "./SideBar"; +import React from 'react'; +import SideBar, {SideBarItem, SideBarTitle} from './SideBar'; -import "@testing-library/jest-dom" -import {shallow} from "enzyme"; +import '@testing-library/jest-dom'; +import {shallow} from 'enzyme'; describe('', function () { it('renders without crashing ', function () { @@ -12,16 +12,16 @@ describe('', function () { it('renders childs correctly', function () { const wrapper = shallow(test); - expect(wrapper.children().text()).toBe("test"); + expect(wrapper.children().text()).toBe('test'); }); it('sidebar Item renders without crashing', function () { const wrapper = shallow(Test); - expect(wrapper.children().text()).toBe("Test"); + expect(wrapper.children().text()).toBe('Test'); }); it('renderes sidebartitle correctly', function () { const wrapper = shallow(Test); - expect(wrapper.children().text()).toBe("Test"); + expect(wrapper.children().text()).toBe('Test'); }); }); diff --git a/src/elements/Tag/Tag.js b/src/elements/Tag/Tag.js index 330b981..f77abeb 100644 --- a/src/elements/Tag/Tag.js +++ b/src/elements/Tag/Tag.js @@ -1,7 +1,7 @@ -import React from "react"; +import React from 'react'; -import styles from "./Tag.module.css" -import CategoryPage from "../../pages/CategoryPage/CategoryPage"; +import styles from './Tag.module.css'; +import CategoryPage from '../../pages/CategoryPage/CategoryPage'; /** * A Component representing a single Category tag diff --git a/src/elements/Tag/Tag.test.js b/src/elements/Tag/Tag.test.js index 7d9ec59..b440921 100644 --- a/src/elements/Tag/Tag.test.js +++ b/src/elements/Tag/Tag.test.js @@ -1,8 +1,8 @@ -import React from "react"; -import Tag from './Tag' +import React from 'react'; +import Tag from './Tag'; -import "@testing-library/jest-dom" -import {shallow} from 'enzyme' +import '@testing-library/jest-dom'; +import {shallow} from 'enzyme'; describe('', function () { it('renders without crashing ', function () { @@ -12,7 +12,7 @@ describe('', function () { it('renders childs correctly', function () { const wrapper = shallow(test); - expect(wrapper.children().text()).toBe("test"); + expect(wrapper.children().text()).toBe('test'); }); it('click event triggered and setvideo callback called', function () { @@ -27,7 +27,7 @@ describe('', function () { expect(func).toBeCalledTimes(0); - wrapper.simulate("click"); + wrapper.simulate('click'); expect(func).toBeCalledTimes(1); }); @@ -36,11 +36,11 @@ describe('', function () { const func = jest.fn(); const wrapper = shallow( {func()}}>test); + onclick={() => {func();}}>test); expect(func).toBeCalledTimes(0); - wrapper.simulate("click"); + wrapper.simulate('click'); expect(func).toBeCalledTimes(1); }); diff --git a/src/elements/VideoContainer/VideoContainer.js b/src/elements/VideoContainer/VideoContainer.js index 73d9459..75ae8d9 100644 --- a/src/elements/VideoContainer/VideoContainer.js +++ b/src/elements/VideoContainer/VideoContainer.js @@ -1,6 +1,6 @@ -import React from "react"; -import Preview from "../Preview/Preview"; -import style from "./VideoContainer.module.css" +import React from 'react'; +import Preview from '../Preview/Preview'; +import style from './VideoContainer.module.css'; /** * A videocontainer storing lots of Preview elements @@ -39,7 +39,7 @@ class VideoContainer extends React.Component { ))} {/*todo css for no items to show*/} {this.state.loadeditems.length === 0 ? - "no items to show!" : null} + 'no items to show!' : null} {this.props.children}
); @@ -56,7 +56,7 @@ class VideoContainer extends React.Component { * @param nr number of previews to load */ loadPreviewBlock(nr) { - console.log("loadpreviewblock called ...") + console.log('loadpreviewblock called ...'); let ret = []; for (let i = 0; i < nr; i++) { // only add if not end @@ -84,7 +84,7 @@ class VideoContainer extends React.Component { if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) { this.loadPreviewBlock(8); } - } + }; } export default VideoContainer; diff --git a/src/elements/VideoContainer/VideoContainer.test.js b/src/elements/VideoContainer/VideoContainer.test.js index 642e2e8..3a76654 100644 --- a/src/elements/VideoContainer/VideoContainer.test.js +++ b/src/elements/VideoContainer/VideoContainer.test.js @@ -1,6 +1,6 @@ -import {shallow} from "enzyme"; -import React from "react"; -import VideoContainer from "./VideoContainer"; +import {shallow} from 'enzyme'; +import React from 'react'; +import VideoContainer from './VideoContainer'; describe('', function () { it('renders without crashing ', function () { @@ -25,6 +25,6 @@ describe('', function () { it('no items available', () => { const wrapper = shallow(); expect(wrapper.find('Preview')).toHaveLength(0); - expect(wrapper.find(".maincontent").text()).toBe("no items to show!"); + expect(wrapper.find('.maincontent').text()).toBe('no items to show!'); }); }); diff --git a/src/pages/CategoryPage/CategoryPage.js b/src/pages/CategoryPage/CategoryPage.js index b89b143..0371a50 100644 --- a/src/pages/CategoryPage/CategoryPage.js +++ b/src/pages/CategoryPage/CategoryPage.js @@ -1,12 +1,12 @@ -import React from "react"; -import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar"; -import Tag from "../../elements/Tag/Tag"; -import videocontainerstyle from "../../elements/VideoContainer/VideoContainer.module.css" +import React from 'react'; +import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar'; +import Tag from '../../elements/Tag/Tag'; +import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css'; -import {TagPreview} from "../../elements/Preview/Preview"; -import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup"; -import PageTitle, {Line} from "../../elements/PageTitle/PageTitle"; -import VideoContainer from "../../elements/VideoContainer/VideoContainer"; +import {TagPreview} from '../../elements/Preview/Preview'; +import NewTagPopup from '../../elements/NewTagPopup/NewTagPopup'; +import PageTitle, {Line} from '../../elements/PageTitle/PageTitle'; +import VideoContainer from '../../elements/VideoContainer/VideoContainer'; /** * Component for Category Page @@ -40,33 +40,33 @@ class CategoryPage extends React.Component { <> + subtitle={!this.state.selected ? this.state.loadedtags.length + ' different Tags' : this.state.selected}/> Default Tags: { - this.loadTag(e.props.category) + this.loadTag(e.props.category); } }}>All { - this.loadTag(e.props.category) + this.loadTag(e.props.category); } }}>FullHd { - this.loadTag(e.props.category) + this.loadTag(e.props.category); } }}>LowQuality { - this.loadTag(e.props.category) + this.loadTag(e.props.category); } }}>HD @@ -98,7 +98,7 @@ class CategoryPage extends React.Component { viewbinding={this.props.viewbinding} categorybinding={this.loadTag}/> )) : - "loading"} + 'loading'}
} @@ -133,7 +133,7 @@ class CategoryPage extends React.Component { updateRequest.append('action', 'getMovies'); updateRequest.append('tag', tag); - console.log("fetching data"); + console.log('fetching data'); // fetch all videos available fetch('/api/video.php', {method: 'POST', body: updateRequest}) @@ -144,7 +144,7 @@ class CategoryPage extends React.Component { this.setState({selected: tag}); })) .catch(() => { - console.log("no connection to backend"); + console.log('no connection to backend'); }); } @@ -170,7 +170,7 @@ class CategoryPage extends React.Component { this.setState({loadedtags: result}); })) .catch(() => { - console.log("no connection to backend"); + console.log('no connection to backend'); }); } } diff --git a/src/pages/CategoryPage/CategoryPage.test.js b/src/pages/CategoryPage/CategoryPage.test.js index fdafef3..83ec8e4 100644 --- a/src/pages/CategoryPage/CategoryPage.test.js +++ b/src/pages/CategoryPage/CategoryPage.test.js @@ -1,6 +1,6 @@ -import {mount, shallow} from "enzyme"; -import React from "react"; -import CategoryPage from "./CategoryPage"; +import {mount, shallow} from 'enzyme'; +import React from 'react'; +import CategoryPage from './CategoryPage'; describe('', function () { it('renders without crashing ', function () { @@ -9,7 +9,7 @@ describe('', function () { }); it('test tag fetch call', done => { - global.fetch = global.prepareFetchApi(["first", "second"]); + global.fetch = global.prepareFetchApi(['first', 'second']); const wrapper = shallow(); @@ -38,7 +38,7 @@ describe('', function () { process.nextTick(() => { //callback to close window should have called - expect(message).toBe("no connection to backend"); + expect(message).toBe('no connection to backend'); global.fetch.mockClear(); done(); @@ -48,14 +48,14 @@ describe('', function () { it('test new tag popup', function () { const wrapper = mount(); - expect(wrapper.find("NewTagPopup")).toHaveLength(0); + expect(wrapper.find('NewTagPopup')).toHaveLength(0); wrapper.find('[data-testid="btnaddtag"]').simulate('click'); // newtagpopup should be showing now - expect(wrapper.find("NewTagPopup")).toHaveLength(1); + expect(wrapper.find('NewTagPopup')).toHaveLength(1); // click close button in modal - wrapper.find(".modal-header").find("button").simulate("click"); - expect(wrapper.find("NewTagPopup")).toHaveLength(0); + wrapper.find('.modal-header').find('button').simulate('click'); + expect(wrapper.find('NewTagPopup')).toHaveLength(0); }); it('test setpage callback', done => { @@ -66,17 +66,17 @@ describe('', function () { wrapper.setState({ loadedtags: [ { - tag_name: "testname", + tag_name: 'testname', tag_id: 42 } ] }); - wrapper.find("TagPreview").find("div").first().simulate("click"); + wrapper.find('TagPreview').find('div').first().simulate('click'); process.nextTick(() => { // expect callback to have loaded correct tag - expect(wrapper.state().selected).toBe("testname"); + expect(wrapper.state().selected).toBe('testname'); global.fetch.mockClear(); done(); @@ -87,10 +87,10 @@ describe('', function () { const wrapper = shallow(); wrapper.setState({ - selected: "test" + selected: 'test' }); expect(wrapper.state().selected).not.toBeNull(); - wrapper.find('[data-testid="backbtn"]').simulate("click"); + wrapper.find('[data-testid="backbtn"]').simulate('click'); expect(wrapper.state().selected).toBeNull(); }); @@ -112,9 +112,9 @@ describe('', function () { console.log(wrapper.debug()); expect(func).toBeCalledTimes(0); - wrapper.find("SideBar").find("Tag").forEach(e => { - e.simulate("click"); - }) + wrapper.find('SideBar').find('Tag').forEach(e => { + e.simulate('click'); + }); expect(func).toBeCalledTimes(4); diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js index 4192613..c9fddbd 100644 --- a/src/pages/HomePage/HomePage.js +++ b/src/pages/HomePage/HomePage.js @@ -1,17 +1,17 @@ -import React from "react"; -import SideBar, {SideBarItem, SideBarTitle} from "../../elements/SideBar/SideBar"; -import Tag from "../../elements/Tag/Tag"; -import VideoContainer from "../../elements/VideoContainer/VideoContainer"; +import React from 'react'; +import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar'; +import Tag from '../../elements/Tag/Tag'; +import VideoContainer from '../../elements/VideoContainer/VideoContainer'; -import style from "./HomePage.module.css" -import PageTitle, {Line} from "../../elements/PageTitle/PageTitle"; +import style from './HomePage.module.css'; +import PageTitle, {Line} from '../../elements/PageTitle/PageTitle'; /** * The home page component showing on the initial pageload */ class HomePage extends React.Component { /** keyword variable needed temporary store search keyword */ - keyword = ""; + keyword = ''; constructor(props, context) { super(props, context); @@ -24,7 +24,7 @@ class HomePage extends React.Component { sdvideonr: null, tagnr: null }, - tag: "All", + subtitle: 'All Videos', data: [], selectionnr: 0 }; @@ -32,7 +32,7 @@ class HomePage extends React.Component { componentDidMount() { // initial get of all videos - this.fetchVideoData("all"); + this.fetchVideoData('All'); this.fetchStartData(); } @@ -47,7 +47,7 @@ class HomePage extends React.Component { updateRequest.append('action', 'getMovies'); updateRequest.append('tag', tag); - console.log("fetching data"); + console.log('fetching data from' + tag); // fetch all videos available fetch('/api/video.php', {method: 'POST', body: updateRequest}) @@ -58,11 +58,12 @@ class HomePage extends React.Component { }); this.setState({ data: result, - selectionnr: result.length + selectionnr: result.length, + tag: tag + ' Videos' }); })) .catch(() => { - console.log("no connection to backend"); + console.log('no connection to backend'); }); } @@ -88,7 +89,7 @@ class HomePage extends React.Component { }); })) .catch(() => { - console.log("no connection to backend"); + console.log('no connection to backend'); }); } @@ -98,7 +99,7 @@ class HomePage extends React.Component { * @param keyword The keyword to search for */ searchVideos(keyword) { - console.log("search called"); + console.log('search called'); const updateRequest = new FormData(); updateRequest.append('action', 'getSearchKeyWord'); @@ -113,11 +114,12 @@ class HomePage extends React.Component { }); this.setState({ data: result, - selectionnr: result.length + selectionnr: result.length, + tag: 'Search result: ' + keyword }); })) .catch(() => { - console.log("no connection to backend"); + console.log('no connection to backend'); }); } @@ -126,15 +128,15 @@ class HomePage extends React.Component { <> -
{ + subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}> + { e.preventDefault(); this.searchVideos(this.keyword); }}> { - this.keyword = e.target.value + this.keyword = e.target.value; }}/>
@@ -149,10 +151,10 @@ class HomePage extends React.Component { {this.state.sideinfo.tagnr} different Tags! Default Tags: - All - FullHd - LowQuality - HD + this.fetchVideoData('All')}>All + this.fetchVideoData('FullHd')}>FullHd + this.fetchVideoData('LowQuality')}>LowQuality + this.fetchVideoData('HD')}>HD {this.state.data.length !== 0 ? ', function () { it('renders without crashing ', function () { @@ -12,7 +12,7 @@ describe('', function () { it('test data insertion', function () { const wrapper = shallow(); - expect(wrapper.find("VideoContainer")).toHaveLength(0); + expect(wrapper.find('VideoContainer')).toHaveLength(0); wrapper.setState({ data: [ @@ -21,20 +21,20 @@ describe('', function () { }); // there shoud be loaded the Videocontainer element into dom after fetching videos correctly - expect(wrapper.find("VideoContainer")).toHaveLength(1); + expect(wrapper.find('VideoContainer')).toHaveLength(1); }); it('test title and nr insertions', function () { const wrapper = shallow(); - expect(wrapper.find("PageTitle").props().subtitle).toBe("All Videos - 0"); + expect(wrapper.find('PageTitle').props().subtitle).toBe('All Videos - 0'); wrapper.setState({ - tag: "testtag", + subtitle: 'testsubtitle', selectionnr: 42 }); - expect(wrapper.find("PageTitle").props().subtitle).toBe("testtag Videos - 42"); + expect(wrapper.find('PageTitle').props().subtitle).toBe('testsubtitle - 42'); }); it('test search field', done => { @@ -43,7 +43,7 @@ describe('', function () { const wrapper = shallow(); wrapper.find('[data-testid="searchtextfield"]').simulate('change', {target: {value: 'testvalue'}}); - wrapper.find('[data-testid="searchbtnsubmit"]').simulate("click"); + wrapper.find('[data-testid="searchbtnsubmit"]').simulate('click'); process.nextTick(() => { // state to be set correctly with response @@ -60,7 +60,7 @@ describe('', function () { const wrapper = shallow(); const fakeEvent = {preventDefault: () => console.log('preventDefault')}; - wrapper.find(".searchform").simulate('submit', fakeEvent); + wrapper.find('.searchform').simulate('submit', fakeEvent); expect(wrapper.state().selectionnr).toBe(0); @@ -92,4 +92,34 @@ describe('', function () { done(); }); }); + + it('test tag click', done => { + global.fetch = prepareFetchApi(['test1', 'test2']); + + const wrapper = shallow(); + + const tags = wrapper.find('SideBar').dive().find('Tag'); + let i = 0; + + function testBtn(e) { + e.dive().simulate('click'); + + process.nextTick(() => { + process.nextTick(() => { + // state to be set correctly with response + console.log('see ifits same'); + expect(wrapper.state()).toMatchObject({data: ['test1', 'test2']}); + wrapper.state.data = []; + i++; + if (i >= tags.length) { + done(); + } else { + testBtn(tags.at(i)); + } + }); + }); + } + + testBtn(tags.first()); + }); }); diff --git a/src/pages/Player/Player.js b/src/pages/Player/Player.js index d8186a3..187bfad 100644 --- a/src/pages/Player/Player.js +++ b/src/pages/Player/Player.js @@ -1,11 +1,11 @@ -import React from "react"; -import style from "./Player.module.css" +import React from 'react'; +import style from './Player.module.css'; import {PlyrComponent} from 'plyr-react'; -import SideBar, {SideBarItem, SideBarTitle} from "../../elements/SideBar/SideBar"; -import Tag from "../../elements/Tag/Tag"; -import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup"; -import PageTitle, {Line} from "../../elements/PageTitle/PageTitle"; +import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar'; +import Tag from '../../elements/Tag/Tag'; +import AddTagPopup from '../../elements/AddTagPopup/AddTagPopup'; +import PageTitle, {Line} from '../../elements/PageTitle/PageTitle'; /** @@ -26,7 +26,7 @@ class Player extends React.Component { 'settings', // Settings menu 'airplay', // Airplay (currently Safari only) 'download', // Show a download button with a link to either the current source or a custom URL you specify in your options - 'fullscreen', // Toggle fullscreen + 'fullscreen' // Toggle fullscreen ] }; @@ -66,28 +66,36 @@ class Player extends React.Component { fetch('/api/tags.php', {method: 'POST', body: updateRequest}) .then((response) => response.json() .then((result) => { - if (result.result !== "success") { - console.error("error occured while writing to db -- todo error handling"); + if (result.result !== 'success') { + console.error('error occured while writing to db -- todo error handling'); console.error(result.result); } else { - // update tags if successful - let array = [...this.state.suggesttag]; // make a separate copy of the array - const index = array.map(function (e) { - return e.tag_id; - }).indexOf(tag_id); + // check if tag has already been added + const tagindwx = this.state.tags.map(function (e) { + return e.tag_name; + }).indexOf(tag_name); - // check if tag is available in quickadds - if (index !== -1) { - array.splice(index, 1); + // only add tag if it isn't already there + if (tagindwx === -1) { + // update tags if successful + let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState) + const quickaddindex = this.state.suggesttag.map(function (e) { + return e.tag_id; + }).indexOf(tag_id); - this.setState({ - tags: [...this.state.tags, {tag_name: tag_name}], - suggesttag: array - }); - } else { - this.setState({ - tags: [...this.state.tags, {tag_name: tag_name}] - }); + // check if tag is available in quickadds + if (quickaddindex !== -1) { + array.splice(quickaddindex, 1); + + this.setState({ + tags: [...this.state.tags, {tag_name: tag_name}], + suggesttag: array + }); + } else { + this.setState({ + tags: [...this.state.tags, {tag_name: tag_name}] + }); + } } } })); @@ -170,7 +178,7 @@ class Player extends React.Component { - +
@@ -200,7 +208,7 @@ class Player extends React.Component { { src: result.movie_url, type: 'video/mp4', - size: 1080, + size: 1080 } ], poster: result.thumbnail @@ -229,11 +237,11 @@ class Player extends React.Component { fetch('/api/video.php', {method: 'POST', body: updateRequest}) .then((response) => response.json() .then((result) => { - if (result.result === "success") { + if (result.result === 'success') { // likes +1 --> avoid reload of all data - this.setState({likes: this.state.likes + 1}) + this.setState({likes: this.state.likes + 1}); } else { - console.error("an error occured while liking"); + console.error('an error occured while liking'); console.error(result); } })); @@ -258,11 +266,11 @@ class Player extends React.Component { fetch('/api/video.php', {method: 'POST', body: updateRequest}) .then((response) => response.json() .then((result) => { - if (result.result === "success") { + if (result.result === 'success') { // return to last element if successful this.props.viewbinding.returnToLastElement(); } else { - console.error("an error occured while liking"); + console.error('an error occured while liking'); console.error(result); } })); diff --git a/src/pages/Player/Player.test.js b/src/pages/Player/Player.test.js index eac9e4e..a0d18ab 100644 --- a/src/pages/Player/Player.test.js +++ b/src/pages/Player/Player.test.js @@ -1,6 +1,6 @@ -import {shallow} from "enzyme"; -import React from "react"; -import Player from "./Player"; +import {shallow} from 'enzyme'; +import React from 'react'; +import Player from './Player'; describe('', function () { it('renders without crashing ', function () { @@ -16,11 +16,11 @@ describe('', function () { { src: '/tstvid.mp4', type: 'video/mp4', - size: 1080, + size: 1080 } ] }); - expect(wrapper.find("r")).toHaveLength(1); + expect(wrapper.find('r')).toHaveLength(1); }); function simulateLikeButtonClick() { @@ -28,7 +28,7 @@ describe('', function () { // initial fetch for getting movie data expect(global.fetch).toHaveBeenCalledTimes(1); - wrapper.find('.videoactions').find("button").first().simulate('click'); + wrapper.find('.videoactions').find('button').first().simulate('click'); // fetch for liking expect(global.fetch).toHaveBeenCalledTimes(2); @@ -69,20 +69,20 @@ describe('', function () { it('show tag popup', function () { const wrapper = shallow(); - expect(wrapper.find("AddTagPopup")).toHaveLength(0); + expect(wrapper.find('AddTagPopup')).toHaveLength(0); // todo dynamic button find without index - wrapper.find('.videoactions').find("button").at(1).simulate('click'); + wrapper.find('.videoactions').find('button').at(1).simulate('click'); // addtagpopup should be showing now - expect(wrapper.find("AddTagPopup")).toHaveLength(1); + expect(wrapper.find('AddTagPopup')).toHaveLength(1); }); it('test delete button', done => { const wrapper = shallow(); - global.fetch = prepareFetchApi({result: "success"}); + global.fetch = prepareFetchApi({result: 'success'}); - wrapper.find('.videoactions').find("button").at(2).simulate('click'); + wrapper.find('.videoactions').find('button').at(2).simulate('click'); process.nextTick(() => { // refetch is called so fetch called 3 times @@ -101,7 +101,7 @@ describe('', function () { wrapper.setProps({ viewbinding: { returnToLastElement: () => { - func() + func(); } } }); @@ -115,7 +115,7 @@ describe('', function () { it('inserts Tags correctly', function () { const wrapper = shallow(); - expect(wrapper.find("Tag")).toHaveLength(0); + expect(wrapper.find('Tag')).toHaveLength(0); wrapper.setState({ tags: [ @@ -124,7 +124,7 @@ describe('', function () { ] }); - expect(wrapper.find("Tag")).toHaveLength(2); + expect(wrapper.find('Tag')).toHaveLength(2); }); it('inserts tag quickadd correctly', function () { @@ -137,7 +137,7 @@ describe('', function () { global.fetch = prepareFetchApi({result: 'success'}); // render tag subcomponent - const tag = wrapper.find("Tag").first().dive(); + const tag = wrapper.find('Tag').first().dive(); tag.simulate('click'); process.nextTick(() => { @@ -155,7 +155,7 @@ describe('', function () { global.console.error = jest.fn(); // render tag subcomponent - const tag = wrapper.find("Tag").first().dive(); + const tag = wrapper.find('Tag').first().dive(); tag.simulate('click'); process.nextTick(() => { @@ -169,15 +169,15 @@ describe('', function () { function generatetag() { const wrapper = shallow(); - expect(wrapper.find("Tag")).toHaveLength(0); + expect(wrapper.find('Tag')).toHaveLength(0); wrapper.setState({ suggesttag: [ - {tag_name: 'first', tag_id: 1}, + {tag_name: 'first', tag_id: 1} ] }); - expect(wrapper.find("Tag")).toHaveLength(1); + expect(wrapper.find('Tag')).toHaveLength(1); return wrapper; } diff --git a/src/pages/RandomPage/RandomPage.js b/src/pages/RandomPage/RandomPage.js index 8613629..0502817 100644 --- a/src/pages/RandomPage/RandomPage.js +++ b/src/pages/RandomPage/RandomPage.js @@ -1,9 +1,9 @@ -import React from "react"; -import style from "./RandomPage.module.css" -import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar"; -import Tag from "../../elements/Tag/Tag"; -import PageTitle from "../../elements/PageTitle/PageTitle"; -import VideoContainer from "../../elements/VideoContainer/VideoContainer"; +import React from 'react'; +import style from './RandomPage.module.css'; +import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar'; +import Tag from '../../elements/Tag/Tag'; +import PageTitle from '../../elements/PageTitle/PageTitle'; +import VideoContainer from '../../elements/VideoContainer/VideoContainer'; /** * Randompage shuffles random viedeopreviews and provides a shuffle btn @@ -81,7 +81,7 @@ class RandomPage extends React.Component { }); })) .catch(() => { - console.log("no connection to backend"); + console.log('no connection to backend'); }); } } diff --git a/src/pages/RandomPage/RandomPage.test.js b/src/pages/RandomPage/RandomPage.test.js index afb8c61..a2d6ea4 100644 --- a/src/pages/RandomPage/RandomPage.test.js +++ b/src/pages/RandomPage/RandomPage.test.js @@ -1,6 +1,6 @@ -import {shallow} from "enzyme"; -import React from "react"; -import RandomPage from "./RandomPage"; +import {shallow} from 'enzyme'; +import React from 'react'; +import RandomPage from './RandomPage'; describe('', function () { it('renders without crashing ', function () { @@ -28,7 +28,7 @@ describe('', function () { ] }); - wrapper.find(".btnshuffle").simulate("click"); + wrapper.find('.btnshuffle').simulate('click'); expect(global.fetch).toBeCalledTimes(2); }); @@ -38,11 +38,11 @@ describe('', function () { wrapper.setState({ tags: [ - {tag_name: "test1"}, - {tag_name: "test2"} + {tag_name: 'test1'}, + {tag_name: 'test2'} ] }); - expect(wrapper.find("Tag")).toHaveLength(2); + expect(wrapper.find('Tag')).toHaveLength(2); }); }); diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js index a3d8e90..2ab51b7 100644 --- a/src/pages/SettingsPage/GeneralSettings.js +++ b/src/pages/SettingsPage/GeneralSettings.js @@ -1,10 +1,10 @@ -import React from "react"; -import {Button, Col, Form} from "react-bootstrap"; -import style from "./GeneralSettings.module.css" -import GlobalInfos from "../../GlobalInfos"; -import InfoHeaderItem from "../../elements/InfoHeaderItem/InfoHeaderItem"; -import {faArchive, faBalanceScaleLeft, faRulerVertical} from "@fortawesome/free-solid-svg-icons"; -import {faAddressCard} from "@fortawesome/free-regular-svg-icons"; +import React from 'react'; +import {Button, Col, Form} from 'react-bootstrap'; +import style from './GeneralSettings.module.css'; +import GlobalInfos from '../../GlobalInfos'; +import InfoHeaderItem from '../../elements/InfoHeaderItem/InfoHeaderItem'; +import {faArchive, faBalanceScaleLeft, faRulerVertical} from '@fortawesome/free-solid-svg-icons'; +import {faAddressCard} from '@fortawesome/free-regular-svg-icons'; /** * Component for Generalsettings tag on Settingspage @@ -18,10 +18,10 @@ class GeneralSettings extends React.Component { passwordsupport: false, tmdbsupport: null, - videopath: "", - tvshowpath: "", - mediacentername: "", - password: "", + videopath: '', + tvshowpath: '', + mediacentername: '', + password: '', videonr: null, dbsize: null, @@ -44,7 +44,7 @@ class GeneralSettings extends React.Component { subtext='Videos in Gravity' icon={faArchive}/> { - this.setState({passwordsupport: !this.state.passwordsupport}) + this.setState({passwordsupport: !this.state.passwordsupport}); }} /> @@ -102,7 +102,7 @@ class GeneralSettings extends React.Component { label='Enable TMDB video grabbing support' checked={this.state.tmdbsupport} onChange={() => { - this.setState({tmdbsupport: !this.state.tmdbsupport}) + this.setState({tmdbsupport: !this.state.tmdbsupport}); }} /> @@ -168,21 +168,21 @@ class GeneralSettings extends React.Component { const updateRequest = new FormData(); updateRequest.append('action', 'saveGeneralSettings'); - updateRequest.append('password', this.state.passwordsupport ? this.state.password : "-1"); + updateRequest.append('password', this.state.passwordsupport ? this.state.password : '-1'); updateRequest.append('videopath', this.state.videopath); updateRequest.append('tvshowpath', this.state.tvshowpath); updateRequest.append('mediacentername', this.state.mediacentername); - updateRequest.append("tmdbsupport", this.state.tmdbsupport); - updateRequest.append("darkmodeenabled", GlobalInfos.isDarkTheme().toString()); + updateRequest.append('tmdbsupport', this.state.tmdbsupport); + updateRequest.append('darkmodeenabled', GlobalInfos.isDarkTheme().toString()); fetch('/api/settings.php', {method: 'POST', body: updateRequest}) .then((response) => response.json() .then((result) => { if (result.success) { - console.log("successfully saved settings"); + console.log('successfully saved settings'); // todo 2020-07-10: popup success } else { - console.log("failed to save settings"); + console.log('failed to save settings'); // todo 2020-07-10: popup error } })); diff --git a/src/pages/SettingsPage/GeneralSettings.test.js b/src/pages/SettingsPage/GeneralSettings.test.js index 1a66177..0d7a0f4 100644 --- a/src/pages/SettingsPage/GeneralSettings.test.js +++ b/src/pages/SettingsPage/GeneralSettings.test.js @@ -1,7 +1,7 @@ -import {shallow} from "enzyme"; -import React from "react"; -import GeneralSettings from "./GeneralSettings"; -import GlobalInfos from "../../GlobalInfos"; +import {shallow} from 'enzyme'; +import React from 'react'; +import GeneralSettings from './GeneralSettings'; +import GlobalInfos from '../../GlobalInfos'; describe('', function () { it('renders without crashing ', function () { @@ -12,10 +12,10 @@ describe('', function () { it('test password hide/show switchbutton', function () { const wrapper = shallow(); - expect(wrapper.find("[data-testid='passwordfield']")).toHaveLength(0); - wrapper.find("FormCheck").findWhere(it => it.props().label === "Enable Password support").simulate("change"); + expect(wrapper.find('[data-testid=\'passwordfield\']')).toHaveLength(0); + wrapper.find('FormCheck').findWhere(it => it.props().label === 'Enable Password support').simulate('change'); - expect(wrapper.find("[data-testid='passwordfield']")).toHaveLength(1); + expect(wrapper.find('[data-testid=\'passwordfield\']')).toHaveLength(1); }); it('test theme switchbutton', function () { @@ -23,7 +23,7 @@ describe('', function () { GlobalInfos.enableDarkTheme(false); expect(GlobalInfos.isDarkTheme()).toBe(false); - wrapper.find("[data-testid='darktheme-switch']").simulate("change"); + wrapper.find('[data-testid=\'darktheme-switch\']').simulate('change'); expect(GlobalInfos.isDarkTheme()).toBe(true); }); @@ -34,7 +34,7 @@ describe('', function () { expect(global.fetch).toBeCalledTimes(0); const fakeEvent = {preventDefault: () => console.log('preventDefault')}; - wrapper.find("[data-testid='mainformsettings']").simulate("submit", fakeEvent); + wrapper.find('[data-testid=\'mainformsettings\']').simulate('submit', fakeEvent); expect(global.fetch).toBeCalledTimes(1); process.nextTick(() => { @@ -52,7 +52,7 @@ describe('', function () { expect(global.fetch).toBeCalledTimes(0); const fakeEvent = {preventDefault: () => console.log('preventDefault')}; - wrapper.find("[data-testid='mainformsettings']").simulate("submit", fakeEvent); + wrapper.find('[data-testid=\'mainformsettings\']').simulate('submit', fakeEvent); expect(global.fetch).toBeCalledTimes(1); process.nextTick(() => { @@ -66,39 +66,39 @@ describe('', function () { it('test videopath change event', function () { const wrapper = shallow(); - expect(wrapper.state().videopath).not.toBe("test"); + expect(wrapper.state().videopath).not.toBe('test'); - const event = {target: {name: "pollName", value: "test"}}; - wrapper.find("[data-testid='videpathform']").find("FormControl").simulate("change", event); - expect(wrapper.state().videopath).toBe("test"); + const event = {target: {name: 'pollName', value: 'test'}}; + wrapper.find('[data-testid=\'videpathform\']').find('FormControl').simulate('change', event); + expect(wrapper.state().videopath).toBe('test'); }); it('test tvshowpath change event', function () { const wrapper = shallow(); - const event = {target: {name: "pollName", value: "test"}}; - expect(wrapper.state().tvshowpath).not.toBe("test"); - wrapper.find("[data-testid='tvshowpath']").find("FormControl").simulate("change", event); - expect(wrapper.state().tvshowpath).toBe("test"); + const event = {target: {name: 'pollName', value: 'test'}}; + expect(wrapper.state().tvshowpath).not.toBe('test'); + wrapper.find('[data-testid=\'tvshowpath\']').find('FormControl').simulate('change', event); + expect(wrapper.state().tvshowpath).toBe('test'); }); it('test mediacentername-form change event', function () { const wrapper = shallow(); - const event = {target: {name: "pollName", value: "test"}}; - expect(wrapper.state().mediacentername).not.toBe("test"); - wrapper.find("[data-testid='nameform']").find("FormControl").simulate("change", event); - expect(wrapper.state().mediacentername).toBe("test"); + const event = {target: {name: 'pollName', value: 'test'}}; + expect(wrapper.state().mediacentername).not.toBe('test'); + wrapper.find('[data-testid=\'nameform\']').find('FormControl').simulate('change', event); + expect(wrapper.state().mediacentername).toBe('test'); }); it('test password-form change event', function () { const wrapper = shallow(); wrapper.setState({passwordsupport: true}); - const event = {target: {name: "pollName", value: "test"}}; - expect(wrapper.state().password).not.toBe("test"); - wrapper.find("[data-testid='passwordfield']").find("FormControl").simulate("change", event); - expect(wrapper.state().password).toBe("test"); + const event = {target: {name: 'pollName', value: 'test'}}; + expect(wrapper.state().password).not.toBe('test'); + wrapper.find('[data-testid=\'passwordfield\']').find('FormControl').simulate('change', event); + expect(wrapper.state().password).toBe('test'); }); it('test tmdbsupport change event', function () { @@ -106,12 +106,12 @@ describe('', function () { wrapper.setState({tmdbsupport: true}); expect(wrapper.state().tmdbsupport).toBe(true); - wrapper.find("[data-testid='tmdb-switch']").simulate("change"); + wrapper.find('[data-testid=\'tmdb-switch\']').simulate('change'); expect(wrapper.state().tmdbsupport).toBe(false); }); it('test insertion of 4 infoheaderitems', function () { const wrapper = shallow(); - expect(wrapper.find("InfoHeaderItem").length).toBe(4); + expect(wrapper.find('InfoHeaderItem').length).toBe(4); }); }); diff --git a/src/pages/SettingsPage/MovieSettings.js b/src/pages/SettingsPage/MovieSettings.js index 5a314fe..cf6c9fc 100644 --- a/src/pages/SettingsPage/MovieSettings.js +++ b/src/pages/SettingsPage/MovieSettings.js @@ -1,5 +1,5 @@ -import React from "react"; -import style from "./MovieSettings.module.css" +import React from 'react'; +import style from './MovieSettings.module.css'; /** * Component for MovieSettings on Settingspage @@ -28,10 +28,10 @@ class MovieSettings extends React.Component { <>
{this.state.text.map(m => (
{m}
@@ -49,23 +49,23 @@ class MovieSettings extends React.Component { this.setState({startbtnDisabled: true}); - console.log("starting"); + console.log('starting'); const request = new FormData(); - request.append("action", "startReindex"); + request.append('action', 'startReindex'); // fetch all videos available fetch('/api/settings.php', {method: 'POST', body: request}) .then((response) => response.json() .then((result) => { console.log(result); if (result.success) { - console.log("started successfully"); + console.log('started successfully'); } else { - console.log("error, reindex already running"); + console.log('error, reindex already running'); this.setState({startbtnDisabled: true}); } })) .catch(() => { - console.log("no connection to backend"); + console.log('no connection to backend'); }); if (this.myinterval) { clearInterval(this.myinterval); @@ -78,7 +78,7 @@ class MovieSettings extends React.Component { */ updateStatus = () => { const request = new FormData(); - request.append("action", "getStatusMessage"); + request.append('action', 'getStatusMessage'); fetch('/api/settings.php', {method: 'POST', body: request}) .then((response) => response.json() @@ -88,7 +88,7 @@ class MovieSettings extends React.Component { // todo 2020-07-4: scroll to bottom of div here this.setState({ // insert a string for each line - text: [...result.message.split("\n"), + text: [...result.message.split('\n'), ...this.state.text] }); } else { @@ -99,7 +99,7 @@ class MovieSettings extends React.Component { } })) .catch(() => { - console.log("no connection to backend"); + console.log('no connection to backend'); }); }; @@ -108,7 +108,7 @@ class MovieSettings extends React.Component { */ cleanupGravity() { const request = new FormData(); - request.append("action", "cleanupGravity"); + request.append('action', 'cleanupGravity'); fetch('/api/settings.php', {method: 'POST', body: request}) .then((response) => response.text() @@ -118,7 +118,7 @@ class MovieSettings extends React.Component { }); })) .catch(() => { - console.log("no connection to backend"); + console.log('no connection to backend'); }); } } diff --git a/src/pages/SettingsPage/MovieSettings.test.js b/src/pages/SettingsPage/MovieSettings.test.js index 0a4e9f4..f7bc706 100644 --- a/src/pages/SettingsPage/MovieSettings.test.js +++ b/src/pages/SettingsPage/MovieSettings.test.js @@ -1,6 +1,6 @@ -import {shallow} from "enzyme"; -import React from "react"; -import MovieSettings from "./MovieSettings"; +import {shallow} from 'enzyme'; +import React from 'react'; +import MovieSettings from './MovieSettings'; describe('', function () { it('renders without crashing ', function () { @@ -13,19 +13,19 @@ describe('', function () { wrapper.setState({ text: [ - "firstline", - "secline" + 'firstline', + 'secline' ] }); - expect(wrapper.find(".indextextarea").find(".textarea-element")).toHaveLength(2); + expect(wrapper.find('.indextextarea').find('.textarea-element')).toHaveLength(2); }); it('test simulate reindex', function () { global.fetch = global.prepareFetchApi({success: true}); const wrapper = shallow(); - wrapper.find("button").findWhere(e => e.text() === "Reindex Movie" && e.type() === "button").simulate("click"); + wrapper.find('button').findWhere(e => e.text() === 'Reindex Movie' && e.type() === 'button').simulate('click'); // initial send of reindex request to server expect(global.fetch).toBeCalledTimes(1); @@ -35,7 +35,7 @@ describe('', function () { global.fetch = global.prepareFetchApi({success: false}); const wrapper = shallow(); - wrapper.find("button").findWhere(e => e.text() === "Reindex Movie" && e.type() === "button").simulate("click"); + wrapper.find('button').findWhere(e => e.text() === 'Reindex Movie' && e.type() === 'button').simulate('click'); // initial send of reindex request to server expect(global.fetch).toBeCalledTimes(1); @@ -52,7 +52,7 @@ describe('', function () { it('content available received and in state', done => { global.fetch = global.prepareFetchApi({ contentAvailable: true, - message: "firstline\nsecondline" + message: 'firstline\nsecondline' }); const wrapper = shallow(); wrapper.instance().updateStatus(); @@ -60,8 +60,8 @@ describe('', function () { process.nextTick(() => { expect(wrapper.state()).toMatchObject({ text: [ - "firstline", - "secondline" + 'firstline', + 'secondline' ] }); @@ -70,7 +70,7 @@ describe('', function () { }); }); - it('test reindex with no content available', done=> { + it('test reindex with no content available', done => { global.fetch = global.prepareFetchApi({ contentAvailable: false }); @@ -93,11 +93,11 @@ describe('', function () { }); it('test simulate gravity cleanup', done => { - global.fetch = global.prepareFetchApi("mmi"); + global.fetch = global.prepareFetchApi('mmi'); const wrapper = shallow(); wrapper.instance().setState = jest.fn(), - wrapper.find("button").findWhere(e => e.text() === "Cleanup Gravity" && e.type() === "button").simulate("click"); + wrapper.find('button').findWhere(e => e.text() === 'Cleanup Gravity' && e.type() === 'button').simulate('click'); // initial send of reindex request to server expect(global.fetch).toBeCalledTimes(1); diff --git a/src/pages/SettingsPage/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js index 75f404b..130f3fa 100644 --- a/src/pages/SettingsPage/SettingsPage.js +++ b/src/pages/SettingsPage/SettingsPage.js @@ -1,8 +1,8 @@ -import React from "react"; -import MovieSettings from "./MovieSettings"; -import GeneralSettings from "./GeneralSettings"; -import style from "./SettingsPage.module.css" -import GlobalInfos from "../../GlobalInfos"; +import React from 'react'; +import MovieSettings from './MovieSettings'; +import GeneralSettings from './GeneralSettings'; +import style from './SettingsPage.module.css'; +import GlobalInfos from '../../GlobalInfos'; /** * The Settingspage handles all kinds of settings for the mediacenter @@ -13,7 +13,7 @@ class SettingsPage extends React.Component { super(props, context); this.state = { - currentpage: "general" + currentpage: 'general' }; } @@ -23,14 +23,14 @@ class SettingsPage extends React.Component { */ getContent() { switch (this.state.currentpage) { - case "general": + case 'general': return ; - case "movies": + case 'movies': return ; - case "tv": + case 'tv': return ; // todo this page default: - return "unknown button clicked"; + return 'unknown button clicked'; } } @@ -40,13 +40,13 @@ class SettingsPage extends React.Component {
Settings
-
this.setState({currentpage: "general"})} +
this.setState({currentpage: 'general'})} className={style.SettingSidebarElement}>General
-
this.setState({currentpage: "movies"})} +
this.setState({currentpage: 'movies'})} className={style.SettingSidebarElement}>Movies
-
this.setState({currentpage: "tv"})} +
this.setState({currentpage: 'tv'})} className={style.SettingSidebarElement}>TV Shows
diff --git a/src/pages/SettingsPage/SettingsPage.test.js b/src/pages/SettingsPage/SettingsPage.test.js index 8a45deb..4c26bd8 100644 --- a/src/pages/SettingsPage/SettingsPage.test.js +++ b/src/pages/SettingsPage/SettingsPage.test.js @@ -1,6 +1,6 @@ -import {shallow} from "enzyme"; -import React from "react"; -import SettingsPage from "./SettingsPage"; +import {shallow} from 'enzyme'; +import React from 'react'; +import SettingsPage from './SettingsPage'; describe('', function () { it('renders without crashing ', function () { @@ -11,30 +11,30 @@ describe('', function () { it('simulate topic clicka', function () { const wrapper = shallow(); - simulateSideBarClick("General", wrapper); - expect(wrapper.state().currentpage).toBe("general"); - expect(wrapper.find(".SettingsContent").find("GeneralSettings")).toHaveLength(1); + simulateSideBarClick('General', wrapper); + expect(wrapper.state().currentpage).toBe('general'); + expect(wrapper.find('.SettingsContent').find('GeneralSettings')).toHaveLength(1); - simulateSideBarClick("Movies", wrapper); - expect(wrapper.state().currentpage).toBe("movies"); - expect(wrapper.find(".SettingsContent").find("MovieSettings")).toHaveLength(1); + simulateSideBarClick('Movies', wrapper); + expect(wrapper.state().currentpage).toBe('movies'); + expect(wrapper.find('.SettingsContent').find('MovieSettings')).toHaveLength(1); - simulateSideBarClick("TV Shows", wrapper); - expect(wrapper.state().currentpage).toBe("tv"); - expect(wrapper.find(".SettingsContent").find("span")).toHaveLength(1); + simulateSideBarClick('TV Shows', wrapper); + expect(wrapper.state().currentpage).toBe('tv'); + expect(wrapper.find('.SettingsContent').find('span')).toHaveLength(1); }); function simulateSideBarClick(name, wrapper) { - wrapper.find(".SettingSidebarElement").findWhere(it => + wrapper.find('.SettingSidebarElement').findWhere(it => it.text() === name && - it.type() === "div").simulate("click"); + it.type() === 'div').simulate('click'); } it('simulate unknown topic', function () { const wrapper = shallow(); - wrapper.setState({currentpage: "unknown"}); + wrapper.setState({currentpage: 'unknown'}); - expect(wrapper.find(".SettingsContent").text()).toBe("unknown button clicked"); + expect(wrapper.find('.SettingsContent').text()).toBe('unknown button clicked'); }); }); diff --git a/src/setupTests.js b/src/setupTests.js index ed58c8b..80a5a3b 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -21,13 +21,13 @@ global.prepareFetchApi = (response) => { text: () => mockJsonPromise }); return (jest.fn().mockImplementation(() => mockFetchPromise)); -} +}; /** * prepares a failing virtual fetch api call * @returns {jest.Mock} a jest moch function simulating a failing fetch call */ global.prepareFailingFetchApi = () => { - const mockFetchPromise = Promise.reject("myreason"); + const mockFetchPromise = Promise.reject('myreason'); return (jest.fn().mockImplementation(() => mockFetchPromise)); -} +};