correct naming of Generalinfos and added tests
This commit is contained in:
parent
5970e4d19e
commit
f87c02c276
@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import HomePage from "./pages/HomePage/HomePage";
|
import HomePage from "./pages/HomePage/HomePage";
|
||||||
import RandomPage from "./pages/RandomPage/RandomPage";
|
import RandomPage from "./pages/RandomPage/RandomPage";
|
||||||
import StaticInfos from "./GlobalInfos";
|
import GlobalInfos from "./GlobalInfos";
|
||||||
|
|
||||||
// include bootstraps css
|
// include bootstraps css
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
@ -33,7 +33,7 @@ class App extends React.Component {
|
|||||||
.then((response) => response.json()
|
.then((response) => response.json()
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
// set theme
|
// set theme
|
||||||
StaticInfos.enableDarkTheme(result.DarkMode);
|
GlobalInfos.enableDarkTheme(result.DarkMode);
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
generalSettingsLoaded: true,
|
generalSettingsLoaded: true,
|
||||||
@ -83,7 +83,7 @@ class App extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const themeStyle = StaticInfos.getThemeStyle();
|
const themeStyle = GlobalInfos.getThemeStyle();
|
||||||
// add the main theme to the page body
|
// add the main theme to the page body
|
||||||
document.body.className = themeStyle.backgroundcolor;
|
document.body.className = themeStyle.backgroundcolor;
|
||||||
return (
|
return (
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import darktheme from "./AppDarkTheme.module.css";
|
import darktheme from "./AppDarkTheme.module.css";
|
||||||
import lighttheme from "./AppLightTheme.module.css";
|
import lighttheme from "./AppLightTheme.module.css";
|
||||||
|
|
||||||
class GlobalInfos {
|
class StaticInfos {
|
||||||
#darktheme = true;
|
#darktheme = true;
|
||||||
|
|
||||||
isDarkTheme() {
|
isDarkTheme() {
|
||||||
@ -17,7 +17,7 @@ class GlobalInfos {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const StaticInfos = new GlobalInfos();
|
const GlobalInfos = new StaticInfos();
|
||||||
//Object.freeze(StaticInfos);
|
//Object.freeze(StaticInfos);
|
||||||
|
|
||||||
export default StaticInfos;
|
export default GlobalInfos;
|
||||||
|
24
src/GlobalInfos.test.js
Normal file
24
src/GlobalInfos.test.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import React from "react";
|
||||||
|
import GlobalInfos from "./GlobalInfos";
|
||||||
|
|
||||||
|
describe('<GlobalInfos/>', function () {
|
||||||
|
it('always same instance ', function () {
|
||||||
|
GlobalInfos.enableDarkTheme(true);
|
||||||
|
|
||||||
|
expect(GlobalInfos.isDarkTheme()).toBe(true);
|
||||||
|
|
||||||
|
GlobalInfos.enableDarkTheme(false);
|
||||||
|
|
||||||
|
expect(GlobalInfos.isDarkTheme()).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('test default theme', function () {
|
||||||
|
expect(GlobalInfos.isDarkTheme()).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('test receive of stylesheet', function () {
|
||||||
|
const style = GlobalInfos.getThemeStyle();
|
||||||
|
|
||||||
|
expect(style.navitem).not.toBeNull();
|
||||||
|
});
|
||||||
|
});
|
@ -1,6 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import style from "./PageTitle.module.css"
|
import style from "./PageTitle.module.css"
|
||||||
import StaticInfos from "../../GlobalInfos";
|
import GlobalInfos from "../../GlobalInfos";
|
||||||
|
|
||||||
class PageTitle extends React.Component {
|
class PageTitle extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -11,7 +11,7 @@ class PageTitle extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const themeStyle = StaticInfos.getThemeStyle();
|
const themeStyle = GlobalInfos.getThemeStyle();
|
||||||
return (
|
return (
|
||||||
<div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
|
<div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
|
||||||
<span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
|
<span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
|
||||||
@ -31,7 +31,7 @@ class PageTitle extends React.Component {
|
|||||||
*/
|
*/
|
||||||
export class Line extends React.Component {
|
export class Line extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const themeStyle = StaticInfos.getThemeStyle();
|
const themeStyle = GlobalInfos.getThemeStyle();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<hr className={themeStyle.hrcolor}/>
|
<hr className={themeStyle.hrcolor}/>
|
||||||
|
@ -2,7 +2,7 @@ import React from "react";
|
|||||||
import style from "./Preview.module.css";
|
import style from "./Preview.module.css";
|
||||||
import Player from "../../pages/Player/Player";
|
import Player from "../../pages/Player/Player";
|
||||||
import {Spinner} from "react-bootstrap";
|
import {Spinner} from "react-bootstrap";
|
||||||
import StaticInfos from "../../GlobalInfos";
|
import GlobalInfos from "../../GlobalInfos";
|
||||||
|
|
||||||
class Preview extends React.Component {
|
class Preview extends React.Component {
|
||||||
constructor(props, context) {
|
constructor(props, context) {
|
||||||
@ -34,7 +34,7 @@ class Preview extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const themeStyle = StaticInfos.getThemeStyle();
|
const themeStyle = GlobalInfos.getThemeStyle();
|
||||||
return (
|
return (
|
||||||
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
|
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
|
||||||
<div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
|
<div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
|
||||||
@ -65,7 +65,7 @@ class Preview extends React.Component {
|
|||||||
|
|
||||||
export class TagPreview extends React.Component {
|
export class TagPreview extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const themeStyle = StaticInfos.getThemeStyle();
|
const themeStyle = GlobalInfos.getThemeStyle();
|
||||||
return (
|
return (
|
||||||
<div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
|
<div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
|
||||||
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
|
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
|
||||||
|
@ -42,7 +42,6 @@
|
|||||||
|
|
||||||
.videopreview:hover {
|
.videopreview:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
/*box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;*/
|
|
||||||
transition: all 300ms;
|
transition: all 300ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import style from "./SideBar.module.css"
|
import style from "./SideBar.module.css"
|
||||||
import StaticInfos from "../../GlobalInfos";
|
import GlobalInfos from "../../GlobalInfos";
|
||||||
|
|
||||||
class SideBar extends React.Component {
|
class SideBar extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const themeStyle = StaticInfos.getThemeStyle();
|
const themeStyle = GlobalInfos.getThemeStyle();
|
||||||
return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}>
|
return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</div>);
|
</div>);
|
||||||
@ -13,7 +13,7 @@ class SideBar extends React.Component {
|
|||||||
|
|
||||||
export class SideBarTitle extends React.Component {
|
export class SideBarTitle extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const themeStyle = StaticInfos.getThemeStyle();
|
const themeStyle = GlobalInfos.getThemeStyle();
|
||||||
return (
|
return (
|
||||||
<div className={style.sidebartitle + ' '+ themeStyle.subtextcolor}>{this.props.children}</div>
|
<div className={style.sidebartitle + ' '+ themeStyle.subtextcolor}>{this.props.children}</div>
|
||||||
);
|
);
|
||||||
@ -22,7 +22,7 @@ export class SideBarTitle extends React.Component {
|
|||||||
|
|
||||||
export class SideBarItem extends React.Component {
|
export class SideBarItem extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const themeStyle = StaticInfos.getThemeStyle();
|
const themeStyle = GlobalInfos.getThemeStyle();
|
||||||
return (
|
return (
|
||||||
<div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
|
<div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
|
||||||
);
|
);
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import {Button, Col, Form} from "react-bootstrap";
|
import {Button, Col, Form} from "react-bootstrap";
|
||||||
import style from "./GeneralSettings.module.css"
|
import style from "./GeneralSettings.module.css"
|
||||||
import StaticInfos from "../../GlobalInfos";
|
import GlobalInfos from "../../GlobalInfos";
|
||||||
|
|
||||||
class GeneralSettings extends React.Component {
|
class GeneralSettings extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -38,7 +38,7 @@ class GeneralSettings extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const themeStyle = StaticInfos.getThemeStyle();
|
const themeStyle = GlobalInfos.getThemeStyle();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
|
<div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
|
||||||
@ -96,9 +96,9 @@ class GeneralSettings extends React.Component {
|
|||||||
id="custom-switch-3"
|
id="custom-switch-3"
|
||||||
data-testid='darktheme-switch'
|
data-testid='darktheme-switch'
|
||||||
label="Enable Dark-Theme"
|
label="Enable Dark-Theme"
|
||||||
checked={StaticInfos.isDarkTheme()}
|
checked={GlobalInfos.isDarkTheme()}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
StaticInfos.enableDarkTheme(!StaticInfos.isDarkTheme());
|
GlobalInfos.enableDarkTheme(!GlobalInfos.isDarkTheme());
|
||||||
this.forceUpdate();
|
this.forceUpdate();
|
||||||
// todo initiate rerender
|
// todo initiate rerender
|
||||||
}}
|
}}
|
||||||
@ -128,7 +128,7 @@ class GeneralSettings extends React.Component {
|
|||||||
updateRequest.append('tvshowpath', this.state.tvshowpath);
|
updateRequest.append('tvshowpath', this.state.tvshowpath);
|
||||||
updateRequest.append('mediacentername', this.state.mediacentername);
|
updateRequest.append('mediacentername', this.state.mediacentername);
|
||||||
updateRequest.append("tmdbsupport", this.state.tmdbsupport);
|
updateRequest.append("tmdbsupport", this.state.tmdbsupport);
|
||||||
updateRequest.append("darkmodeenabled", StaticInfos.isDarkTheme());
|
updateRequest.append("darkmodeenabled", GlobalInfos.isDarkTheme());
|
||||||
|
|
||||||
fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
|
fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
|
||||||
.then((response) => response.json()
|
.then((response) => response.json()
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import {shallow} from "enzyme";
|
import {shallow} from "enzyme";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import GeneralSettings from "./GeneralSettings";
|
import GeneralSettings from "./GeneralSettings";
|
||||||
|
import GlobalInfos from "../../GlobalInfos";
|
||||||
|
|
||||||
function prepareFetchApi(response) {
|
function prepareFetchApi(response) {
|
||||||
const mockJsonPromise = Promise.resolve(response);
|
const mockJsonPromise = Promise.resolve(response);
|
||||||
@ -25,6 +26,15 @@ describe('<GeneralSettings/>', function () {
|
|||||||
expect(wrapper.find("[data-testid='passwordfield']")).toHaveLength(1);
|
expect(wrapper.find("[data-testid='passwordfield']")).toHaveLength(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('test theme switchbutton', function () {
|
||||||
|
const wrapper = shallow(<GeneralSettings/>);
|
||||||
|
|
||||||
|
GlobalInfos.enableDarkTheme(false);
|
||||||
|
expect(GlobalInfos.isDarkTheme()).toBe(false);
|
||||||
|
wrapper.find("[data-testid='darktheme-switch']").simulate("change");
|
||||||
|
expect(GlobalInfos.isDarkTheme()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
it('test savesettings', done => {
|
it('test savesettings', done => {
|
||||||
const wrapper = shallow(<GeneralSettings/>);
|
const wrapper = shallow(<GeneralSettings/>);
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@ import React from "react";
|
|||||||
import MovieSettings from "./MovieSettings";
|
import MovieSettings from "./MovieSettings";
|
||||||
import GeneralSettings from "./GeneralSettings";
|
import GeneralSettings from "./GeneralSettings";
|
||||||
import style from "./SettingsPage.module.css"
|
import style from "./SettingsPage.module.css"
|
||||||
import StaticInfos from "../../GlobalInfos";
|
import GlobalInfos from "../../GlobalInfos";
|
||||||
|
|
||||||
|
|
||||||
class SettingsPage extends React.Component {
|
class SettingsPage extends React.Component {
|
||||||
@ -28,7 +28,7 @@ class SettingsPage extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const themestyle = StaticInfos.getThemeStyle();
|
const themestyle = GlobalInfos.getThemeStyle();
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>
|
<div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>
|
||||||
|
Loading…
Reference in New Issue
Block a user