lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

reformattings

Browse Source 
no redirect on tagclick on homepage
no multiple add of same tag possible
This commit is contained in:
Lukas Heiligenbrunner
2020-10-25 18:48:23 +00:00
parent 812c45cb13
commit 777cc2a712
43 changed files with 493 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/App.js
View File

@@ -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 = <HomePage viewbinding={this.constructViewBinding()}/>;
this.mypage = page;
} else if (this.state.page === "random") {
} else if (this.state.page === 'random') {
page = <RandomPage viewbinding={this.constructViewBinding()}/>;
this.mypage = page;
} else if (this.state.page === "settings") {
} else if (this.state.page === 'settings') {
page = <SettingsPage/>;
this.mypage = page;
} else if (this.state.page === "categories") {
} else if (this.state.page === 'categories') {
page = <CategoryPage viewbinding={this.constructViewBinding()}/>;
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 {
<div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
<div className={style.navbrand}>{this.state.mediacentername}</div>
<div className={[style.navitem, themeStyle.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "default"})}>Home
<div className={[style.navitem, themeStyle.navitem, this.state.page === 'default' ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: 'default'})}>Home
</div>
<div className={[style.navitem, themeStyle.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "random"})}>Random Video
<div className={[style.navitem, themeStyle.navitem, this.state.page === 'random' ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: 'random'})}>Random Video
</div>
<div className={[style.navitem, themeStyle.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "categories"})}>Categories
<div className={[style.navitem, themeStyle.navitem, this.state.page === 'categories' ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: 'categories'})}>Categories
</div>
<div className={[style.navitem, themeStyle.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "settings"})}>Settings
<div className={[style.navitem, themeStyle.navitem, this.state.page === 'settings' ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: 'settings'})}>Settings
</div>
</div>
{this.state.generalSettingsLoaded ? this.MainBody() : "loading"}
{this.state.generalSettingsLoaded ? this.MainBody() : 'loading'}
</div>
);
}
@@ -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'
});
}
}

2
src/App.module.css
View File

@@ -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;

36
src/App.test.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import App from './App';
import {shallow} from 'enzyme'
import {shallow} from 'enzyme';
describe('<App/>', function () {
it('renders without crashing ', function () {
@@ -24,7 +24,7 @@ describe('<App/>', function () {
wrapper.instance().changeRootElement(<div id='testit'/>);
expect(wrapper.find("#testit")).toHaveLength(1);
expect(wrapper.find('#testit')).toHaveLength(1);
});
it('test hide video again', function () {
@@ -33,61 +33,61 @@ describe('<App/>', function () {
wrapper.instance().changeRootElement(<div id='testit'/>);
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(<App/>);
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(<div id='testit'/>);
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(<App/>);
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(<App/>);
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(<App/>);
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(<App/>);

4
src/GlobalInfos.js
View File

@@ -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

4
src/GlobalInfos.test.js
View File

@@ -1,5 +1,5 @@
import React from "react";
import GlobalInfos from "./GlobalInfos";
import React from 'react';
import GlobalInfos from './GlobalInfos';
describe('<GlobalInfos/>', function () {
it('always same instance ', function () {

22
src/elements/AddTagPopup/AddTagPopup.js
View File

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

20
src/elements/AddTagPopup/AddTagPopup.test.js
View File

@@ -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('<AddTagPopup/>', function () {
it('renders without crashing ', function () {
@@ -14,10 +14,10 @@ describe('<AddTagPopup/>', function () {
it('test tag insertion', function () {
const wrapper = shallow(<AddTagPopup/>);
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('<AddTagPopup/>', function () {
it('test addtag', done => {
const wrapper = shallow(<AddTagPopup/>);
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('<AddTagPopup/>', function () {
it('test failing addTag', done => {
const wrapper = shallow(<AddTagPopup/>);
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);
});

10
src/elements/InfoHeaderItem/InfoHeaderItem.js
View File

@@ -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}}>
<div className={style.icon}>
<FontAwesomeIcon style={{
verticalAlign: "middle",
lineHeight: "130px"
verticalAlign: 'middle',
lineHeight: '130px'
}} icon={this.props.icon} size='5x'/>
</div>
{this.props.text !== null && this.props.text !== undefined ?

18
src/elements/InfoHeaderItem/InfoHeaderItem.test.js
View File

@@ -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('<InfoHeaderItem/>', function () {
it('renders without crashing ', function () {
@@ -10,34 +10,34 @@ describe('<InfoHeaderItem/>', function () {
it('renders correct text', function () {
const wrapper = shallow(<InfoHeaderItem text='mytext'/>);
expect(wrapper.find(".maintext").text()).toBe("mytext");
expect(wrapper.find('.maintext').text()).toBe('mytext');
});
it('renders correct subtext', function () {
const wrapper = shallow(<InfoHeaderItem text='mimi' subtext='testtext'/>);
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(<InfoHeaderItem subtext='testi'/>);
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(<InfoHeaderItem onClick={() => 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(<InfoHeaderItem text={null}/>);
expect(wrapper.find("Spinner").length).toBe(1);
expect(wrapper.find('Spinner').length).toBe(1);
});
it('test loading spinner if undefined', function () {
const wrapper = shallow(<InfoHeaderItem/>);
expect(wrapper.find("Spinner").length).toBe(1);
expect(wrapper.find('Spinner').length).toBe(1);
});
});

12
src/elements/NewTagPopup/NewTagPopup.js
View File

@@ -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 {
<Form.Group>
<Form.Label>Tag Name:</Form.Label>
<Form.Control id='namefield' type='text' placeholder='Enter Tag name' onChange={(v) => {
this.value = v.target.value
this.value = v.target.value;
}}/>
<Form.Text className='text-muted'>
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();

12
src/elements/NewTagPopup/NewTagPopup.test.js
View File

@@ -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('<NewTagPopup/>', function () {
it('renders without crashing ', function () {
@@ -14,7 +14,7 @@ describe('<NewTagPopup/>', 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('<NewTagPopup/>', function () {
const wrapper = shallow(<NewTagPopup/>);
wrapper.setProps({
onHide: () => {
func()
func();
}
});

6
src/elements/PageTitle/PageTitle.js
View File

@@ -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

10
src/elements/PageTitle/PageTitle.test.js
View File

@@ -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('<Preview/>', function () {
it('renders without crashing ', function () {
@@ -13,19 +13,19 @@ describe('<Preview/>', function () {
const wrapper = shallow(<PageTitle>heyimachild</PageTitle>);
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(<PageTitle title='testtitle'/>);
expect(wrapper.find(".pageheader").text()).toBe("testtitle<Line />");
expect(wrapper.find('.pageheader').text()).toBe('testtitle<Line />');
});
it('renders subtitle prop', function () {
const wrapper = shallow(<PageTitle subtitle='testsubtitle'/>);
expect(wrapper.find(".pageheadersubtitle").text()).toBe("testsubtitle");
expect(wrapper.find('.pageheadersubtitle').text()).toBe('testsubtitle');
});
});

12
src/elements/Preview/Preview.js
View File

@@ -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(
<Player

14
src/elements/Preview/Previw.test.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import {shallow} from 'enzyme'
import {shallow} from 'enzyme';
import Preview, {TagPreview} from "./Preview";
import Preview, {TagPreview} from './Preview';
describe('<Preview/>', function () {
it('renders without crashing ', function () {
@@ -23,7 +23,7 @@ describe('<Preview/>', function () {
wrapper.setProps({
viewbinding: {
changeRootElement: () => {
func()
func();
}
}
});
@@ -38,7 +38,7 @@ describe('<Preview/>', 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('<Preview/>', 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('<Preview/>', function () {
const wrapper = shallow(<Preview/>);
// expect load animation to be visible
expect(wrapper.find(".loadAnimation")).toHaveLength(1);
expect(wrapper.find('.loadAnimation')).toHaveLength(1);
});
});
@@ -84,7 +84,7 @@ describe('<TagPreview/>', function () {
const wrapper = shallow(<TagPreview/>);
wrapper.setProps({
categorybinding: () => {
func()
func();
}
});

6
src/elements/SideBar/SideBar.js
View File

@@ -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

14
src/elements/SideBar/SideBar.test.js
View File

@@ -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('<SideBar/>', function () {
it('renders without crashing ', function () {
@@ -12,16 +12,16 @@ describe('<SideBar/>', function () {
it('renders childs correctly', function () {
const wrapper = shallow(<SideBar>test</SideBar>);
expect(wrapper.children().text()).toBe("test");
expect(wrapper.children().text()).toBe('test');
});
it('sidebar Item renders without crashing', function () {
const wrapper = shallow(<SideBarItem>Test</SideBarItem>);
expect(wrapper.children().text()).toBe("Test");
expect(wrapper.children().text()).toBe('Test');
});
it('renderes sidebartitle correctly', function () {
const wrapper = shallow(<SideBarTitle>Test</SideBarTitle>);
expect(wrapper.children().text()).toBe("Test");
expect(wrapper.children().text()).toBe('Test');
});
});

6
src/elements/Tag/Tag.js
View File

@@ -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

16
src/elements/Tag/Tag.test.js
View File

@@ -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('<Tag/>', function () {
it('renders without crashing ', function () {
@@ -12,7 +12,7 @@ describe('<Tag/>', function () {
it('renders childs correctly', function () {
const wrapper = shallow(<Tag>test</Tag>);
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('<Tag/>', function () {
expect(func).toBeCalledTimes(0);
wrapper.simulate("click");
wrapper.simulate('click');
expect(func).toBeCalledTimes(1);
});
@@ -36,11 +36,11 @@ describe('<Tag/>', function () {
const func = jest.fn();
const wrapper = shallow(<Tag
onclick={() => {func()}}>test</Tag>);
onclick={() => {func();}}>test</Tag>);
expect(func).toBeCalledTimes(0);
wrapper.simulate("click");
wrapper.simulate('click');
expect(func).toBeCalledTimes(1);
});

12
src/elements/VideoContainer/VideoContainer.js
View File

@@ -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}
</div>
);
@@ -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;

8
src/elements/VideoContainer/VideoContainer.test.js
View File

@@ -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('<VideoContainer/>', function () {
it('renders without crashing ', function () {
@@ -25,6 +25,6 @@ describe('<VideoContainer/>', function () {
it('no items available', () => {
const wrapper = shallow(<VideoContainer data={[]}/>);
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!');
});
});

36
src/pages/CategoryPage/CategoryPage.js
View File

@@ -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 {
<>
<PageTitle
title='Categories'
subtitle={!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}/>
subtitle={!this.state.selected ? this.state.loadedtags.length + ' different Tags' : this.state.selected}/>
<SideBar>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category)
this.loadTag(e.props.category);
}
}}>All</Tag>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category)
this.loadTag(e.props.category);
}
}}>FullHd</Tag>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category)
this.loadTag(e.props.category);
}
}}>LowQuality</Tag>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category)
this.loadTag(e.props.category);
}
}}>HD</Tag>
<Line/>
<button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
this.setState({popupvisible: true})
this.setState({popupvisible: true});
}}>Add a new Tag!
</button>
</SideBar></>
@@ -98,7 +98,7 @@ class CategoryPage extends React.Component {
viewbinding={this.props.viewbinding}
categorybinding={this.loadTag}/>
)) :
"loading"}
'loading'}
</div>
}
@@ -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');
});
}
}

34
src/pages/CategoryPage/CategoryPage.test.js
View File

@@ -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('<CategoryPage/>', function () {
it('renders without crashing ', function () {
@@ -9,7 +9,7 @@ describe('<CategoryPage/>', function () {
});
it('test tag fetch call', done => {
global.fetch = global.prepareFetchApi(["first", "second"]);
global.fetch = global.prepareFetchApi(['first', 'second']);
const wrapper = shallow(<CategoryPage/>);
@@ -38,7 +38,7 @@ describe('<CategoryPage/>', 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('<CategoryPage/>', function () {
it('test new tag popup', function () {
const wrapper = mount(<CategoryPage/>);
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('<CategoryPage/>', 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('<CategoryPage/>', function () {
const wrapper = shallow(<CategoryPage/>);
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('<CategoryPage/>', 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);

48
src/pages/HomePage/HomePage.js
View File

@@ -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 {
<>
<PageTitle
title='Home Page'
subtitle={this.state.tag + " Videos - " + this.state.selectionnr}>
<form className={"form-inline " + style.searchform} onSubmit={(e) => {
subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
<form className={'form-inline ' + style.searchform} onSubmit={(e) => {
e.preventDefault();
this.searchVideos(this.keyword);
}}>
<input data-testid='searchtextfield' className='form-control mr-sm-2'
type='text' placeholder='Search'
onChange={(e) => {
this.keyword = e.target.value
this.keyword = e.target.value;
}}/>
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
</form>
@@ -149,10 +151,10 @@ class HomePage extends React.Component {
<SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
<Line/>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag viewbinding={this.props.viewbinding}>All</Tag>
<Tag viewbinding={this.props.viewbinding}>FullHd</Tag>
<Tag viewbinding={this.props.viewbinding}>LowQuality</Tag>
<Tag viewbinding={this.props.viewbinding}>HD</Tag>
<Tag onclick={() => this.fetchVideoData('All')}>All</Tag>
<Tag onclick={() => this.fetchVideoData('FullHd')}>FullHd</Tag>
<Tag onclick={() => this.fetchVideoData('LowQuality')}>LowQuality</Tag>
<Tag onclick={() => this.fetchVideoData('HD')}>HD</Tag>
</SideBar>
{this.state.data.length !== 0 ?
<VideoContainer

52
src/pages/HomePage/HomePage.test.js
View File

@@ -1,7 +1,7 @@
import {shallow} from "enzyme";
import React from "react";
import HomePage from "./HomePage";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
import {shallow} from 'enzyme';
import React from 'react';
import HomePage from './HomePage';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
describe('<HomePage/>', function () {
it('renders without crashing ', function () {
@@ -12,7 +12,7 @@ describe('<HomePage/>', function () {
it('test data insertion', function () {
const wrapper = shallow(<HomePage/>);
expect(wrapper.find("VideoContainer")).toHaveLength(0);
expect(wrapper.find('VideoContainer')).toHaveLength(0);
wrapper.setState({
data: [
@@ -21,20 +21,20 @@ describe('<HomePage/>', 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(<HomePage/>);
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('<HomePage/>', function () {
const wrapper = shallow(<HomePage/>);
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('<HomePage/>', function () {
const wrapper = shallow(<HomePage/>);
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('<HomePage/>', function () {
done();
});
});
it('test tag click', done => {
global.fetch = prepareFetchApi(['test1', 'test2']);
const wrapper = shallow(<HomePage/>);
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());
});
});

72
src/pages/Player/Player.js
View File

@@ -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 {
<button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
Video a Tag
</button>
<button className='btn btn-danger' onClick={() => {this.deleteVideo()}}>Delete Video</button>
<button className='btn btn-danger' onClick={() => {this.deleteVideo();}}>Delete Video</button>
</div>
</div>
<button className={style.closebutton} onClick={() => this.closebtn()}>Close</button>
@@ -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);
}
}));

38
src/pages/Player/Player.test.js
View File

@@ -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('<Player/>', function () {
it('renders without crashing ', function () {
@@ -16,11 +16,11 @@ describe('<Player/>', 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('<Player/>', 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('<Player/>', function () {
it('show tag popup', function () {
const wrapper = shallow(<Player/>);
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(<Player viewbinding={{
returnToLastElement: jest.fn()
}}/>);
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('<Player/>', function () {
wrapper.setProps({
viewbinding: {
returnToLastElement: () => {
func()
func();
}
}
});
@@ -115,7 +115,7 @@ describe('<Player/>', function () {
it('inserts Tags correctly', function () {
const wrapper = shallow(<Player/>);
expect(wrapper.find("Tag")).toHaveLength(0);
expect(wrapper.find('Tag')).toHaveLength(0);
wrapper.setState({
tags: [
@@ -124,7 +124,7 @@ describe('<Player/>', function () {
]
});
expect(wrapper.find("Tag")).toHaveLength(2);
expect(wrapper.find('Tag')).toHaveLength(2);
});
it('inserts tag quickadd correctly', function () {
@@ -137,7 +137,7 @@ describe('<Player/>', 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('<Player/>', 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('<Player/>', function () {
function generatetag() {
const wrapper = shallow(<Player/>);
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;
}

14
src/pages/RandomPage/RandomPage.js
View File

@@ -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');
});
}
}

14
src/pages/RandomPage/RandomPage.test.js
View File

@@ -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('<RandomPage/>', function () {
it('renders without crashing ', function () {
@@ -28,7 +28,7 @@ describe('<RandomPage/>', function () {
]
});
wrapper.find(".btnshuffle").simulate("click");
wrapper.find('.btnshuffle').simulate('click');
expect(global.fetch).toBeCalledTimes(2);
});
@@ -38,11 +38,11 @@ describe('<RandomPage/>', 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);
});
});

38
src/pages/SettingsPage/GeneralSettings.js
View File

@@ -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}/>
<InfoHeaderItem backColor='yellow'
text={this.state.dbsize !== undefined ? this.state.dbsize + " MB" : undefined}
text={this.state.dbsize !== undefined ? this.state.dbsize + ' MB' : undefined}
subtext='Database size'
icon={faRulerVertical}/>
<InfoHeaderItem backColor='green'
@@ -83,7 +83,7 @@ class GeneralSettings extends React.Component {
label='Enable Password support'
checked={this.state.passwordsupport}
onChange={() => {
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
}
}));

56
src/pages/SettingsPage/GeneralSettings.test.js
View File

@@ -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('<GeneralSettings/>', function () {
it('renders without crashing ', function () {
@@ -12,10 +12,10 @@ describe('<GeneralSettings/>', function () {
it('test password hide/show switchbutton', function () {
const wrapper = shallow(<GeneralSettings/>);
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('<GeneralSettings/>', 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('<GeneralSettings/>', 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('<GeneralSettings/>', 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('<GeneralSettings/>', function () {
it('test videopath change event', function () {
const wrapper = shallow(<GeneralSettings/>);
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(<GeneralSettings/>);
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(<GeneralSettings/>);
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(<GeneralSettings/>);
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('<GeneralSettings/>', 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(<GeneralSettings/>);
expect(wrapper.find("InfoHeaderItem").length).toBe(4);
expect(wrapper.find('InfoHeaderItem').length).toBe(4);
});
});

28
src/pages/SettingsPage/MovieSettings.js
View File

@@ -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 {
<>
<button disabled={this.state.startbtnDisabled}
className='btn btn-success'
onClick={() => {this.startReindex()}}>Reindex Movie
onClick={() => {this.startReindex();}}>Reindex Movie
</button>
<button className='btn btn-warning'
onClick={() => {this.cleanupGravity()}}>Cleanup Gravity
onClick={() => {this.cleanupGravity();}}>Cleanup Gravity
</button>
<div className={style.indextextarea}>{this.state.text.map(m => (
<div className='textarea-element'>{m}</div>
@@ -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');
});
}
}

28
src/pages/SettingsPage/MovieSettings.test.js
View File

@@ -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('<MovieSettings/>', function () {
it('renders without crashing ', function () {
@@ -13,19 +13,19 @@ describe('<MovieSettings/>', 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(<MovieSettings/>);
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('<MovieSettings/>', function () {
global.fetch = global.prepareFetchApi({success: false});
const wrapper = shallow(<MovieSettings/>);
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('<MovieSettings/>', function () {
it('content available received and in state', done => {
global.fetch = global.prepareFetchApi({
contentAvailable: true,
message: "firstline\nsecondline"
message: 'firstline\nsecondline'
});
const wrapper = shallow(<MovieSettings/>);
wrapper.instance().updateStatus();
@@ -60,8 +60,8 @@ describe('<MovieSettings/>', function () {
process.nextTick(() => {
expect(wrapper.state()).toMatchObject({
text: [
"firstline",
"secondline"
'firstline',
'secondline'
]
});
@@ -70,7 +70,7 @@ describe('<MovieSettings/>', 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('<MovieSettings/>', function () {
});
it('test simulate gravity cleanup', done => {
global.fetch = global.prepareFetchApi("mmi");
global.fetch = global.prepareFetchApi('mmi');
const wrapper = shallow(<MovieSettings/>);
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);

26
src/pages/SettingsPage/SettingsPage.js
View File

@@ -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 <GeneralSettings/>;
case "movies":
case 'movies':
return <MovieSettings/>;
case "tv":
case 'tv':
return <span/>; // todo this page
default:
return "unknown button clicked";
return 'unknown button clicked';
}
}
@@ -40,13 +40,13 @@ class SettingsPage extends React.Component {
<div>
<div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>
<div className={style.SettingsSidebarTitle + ' ' + themestyle.lighttextcolor}>Settings</div>
<div onClick={() => this.setState({currentpage: "general"})}
<div onClick={() => this.setState({currentpage: 'general'})}
className={style.SettingSidebarElement}>General
</div>
<div onClick={() => this.setState({currentpage: "movies"})}
<div onClick={() => this.setState({currentpage: 'movies'})}
className={style.SettingSidebarElement}>Movies
</div>
<div onClick={() => this.setState({currentpage: "tv"})}
<div onClick={() => this.setState({currentpage: 'tv'})}
className={style.SettingSidebarElement}>TV Shows
</div>
</div>

32
src/pages/SettingsPage/SettingsPage.test.js
View File

@@ -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('<RandomPage/>', function () {
it('renders without crashing ', function () {
@@ -11,30 +11,30 @@ describe('<RandomPage/>', function () {
it('simulate topic clicka', function () {
const wrapper = shallow(<SettingsPage/>);
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(<SettingsPage/>);
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');
});
});

6
src/setupTests.js
View File

@@ -21,13 +21,13 @@ global.prepareFetchApi = (response) => {
text: () => mockJsonPromise
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
};
/**
* prepares a failing virtual fetch api call
* @returns {jest.Mock<any, any>} 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));
}
};