correct naming of Generalinfos and added tests

This commit is contained in:
Lukas Heiligenbrunner 2020-08-05 22:00:55 +02:00
parent 5970e4d19e
commit f87c02c276
10 changed files with 57 additions and 24 deletions

View File

@ -1,7 +1,7 @@
import React from 'react';
import HomePage from "./pages/HomePage/HomePage";
import RandomPage from "./pages/RandomPage/RandomPage";
import StaticInfos from "./GlobalInfos";
import GlobalInfos from "./GlobalInfos";
// include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css';
@ -33,7 +33,7 @@ class App extends React.Component {
.then((response) => response.json()
.then((result) => {
// set theme
StaticInfos.enableDarkTheme(result.DarkMode);
GlobalInfos.enableDarkTheme(result.DarkMode);
this.setState({
generalSettingsLoaded: true,
@ -83,7 +83,7 @@ class App extends React.Component {
}
render() {
const themeStyle = StaticInfos.getThemeStyle();
const themeStyle = GlobalInfos.getThemeStyle();
// add the main theme to the page body
document.body.className = themeStyle.backgroundcolor;
return (

View File

@ -1,7 +1,7 @@
import darktheme from "./AppDarkTheme.module.css";
import lighttheme from "./AppLightTheme.module.css";
class GlobalInfos {
class StaticInfos {
#darktheme = true;
isDarkTheme() {
@ -17,7 +17,7 @@ class GlobalInfos {
}
}
const StaticInfos = new GlobalInfos();
const GlobalInfos = new StaticInfos();
//Object.freeze(StaticInfos);
export default StaticInfos;
export default GlobalInfos;

24
src/GlobalInfos.test.js Normal file
View 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();
});
});

View File

@ -1,6 +1,6 @@
import React from "react";
import style from "./PageTitle.module.css"
import StaticInfos from "../../GlobalInfos";
import GlobalInfos from "../../GlobalInfos";
class PageTitle extends React.Component {
constructor(props) {
@ -11,7 +11,7 @@ class PageTitle extends React.Component {
}
render() {
const themeStyle = StaticInfos.getThemeStyle();
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
<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 {
render() {
const themeStyle = StaticInfos.getThemeStyle();
const themeStyle = GlobalInfos.getThemeStyle();
return (
<>
<hr className={themeStyle.hrcolor}/>

View File

@ -2,7 +2,7 @@ import React from "react";
import style from "./Preview.module.css";
import Player from "../../pages/Player/Player";
import {Spinner} from "react-bootstrap";
import StaticInfos from "../../GlobalInfos";
import GlobalInfos from "../../GlobalInfos";
class Preview extends React.Component {
constructor(props, context) {
@ -34,7 +34,7 @@ class Preview extends React.Component {
}
render() {
const themeStyle = StaticInfos.getThemeStyle();
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
<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 {
render() {
const themeStyle = StaticInfos.getThemeStyle();
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>

View File

@ -42,7 +42,6 @@
.videopreview:hover {
opacity: 1;
/*box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;*/
transition: all 300ms;
}

View File

@ -1,10 +1,10 @@
import React from "react";
import style from "./SideBar.module.css"
import StaticInfos from "../../GlobalInfos";
import GlobalInfos from "../../GlobalInfos";
class SideBar extends React.Component {
render() {
const themeStyle = StaticInfos.getThemeStyle();
const themeStyle = GlobalInfos.getThemeStyle();
return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}>
{this.props.children}
</div>);
@ -13,7 +13,7 @@ class SideBar extends React.Component {
export class SideBarTitle extends React.Component {
render() {
const themeStyle = StaticInfos.getThemeStyle();
const themeStyle = GlobalInfos.getThemeStyle();
return (
<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 {
render() {
const themeStyle = StaticInfos.getThemeStyle();
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
);

View File

@ -1,7 +1,7 @@
import React from "react";
import {Button, Col, Form} from "react-bootstrap";
import style from "./GeneralSettings.module.css"
import StaticInfos from "../../GlobalInfos";
import GlobalInfos from "../../GlobalInfos";
class GeneralSettings extends React.Component {
constructor(props) {
@ -38,7 +38,7 @@ class GeneralSettings extends React.Component {
}
render() {
const themeStyle = StaticInfos.getThemeStyle();
const themeStyle = GlobalInfos.getThemeStyle();
return (
<>
<div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
@ -96,9 +96,9 @@ class GeneralSettings extends React.Component {
id="custom-switch-3"
data-testid='darktheme-switch'
label="Enable Dark-Theme"
checked={StaticInfos.isDarkTheme()}
checked={GlobalInfos.isDarkTheme()}
onChange={() => {
StaticInfos.enableDarkTheme(!StaticInfos.isDarkTheme());
GlobalInfos.enableDarkTheme(!GlobalInfos.isDarkTheme());
this.forceUpdate();
// todo initiate rerender
}}
@ -128,7 +128,7 @@ class GeneralSettings extends React.Component {
updateRequest.append('tvshowpath', this.state.tvshowpath);
updateRequest.append('mediacentername', this.state.mediacentername);
updateRequest.append("tmdbsupport", this.state.tmdbsupport);
updateRequest.append("darkmodeenabled", StaticInfos.isDarkTheme());
updateRequest.append("darkmodeenabled", GlobalInfos.isDarkTheme());
fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()

View File

@ -1,6 +1,7 @@
import {shallow} from "enzyme";
import React from "react";
import GeneralSettings from "./GeneralSettings";
import GlobalInfos from "../../GlobalInfos";
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
@ -25,6 +26,15 @@ describe('<GeneralSettings/>', function () {
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 => {
const wrapper = shallow(<GeneralSettings/>);

View File

@ -2,7 +2,7 @@ import React from "react";
import MovieSettings from "./MovieSettings";
import GeneralSettings from "./GeneralSettings";
import style from "./SettingsPage.module.css"
import StaticInfos from "../../GlobalInfos";
import GlobalInfos from "../../GlobalInfos";
class SettingsPage extends React.Component {
@ -28,7 +28,7 @@ class SettingsPage extends React.Component {
}
render() {
const themestyle = StaticInfos.getThemeStyle();
const themestyle = GlobalInfos.getThemeStyle();
return (
<div>
<div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>