fix some tests

fix merge issues

src/pages/SettingsPage/GeneralSettings.module.css

@@ -8,7 +8,7 @@
     width: 40%;
 }
 
-.customapiform{
+.customapiform {
     margin-top: 15px;
     width: 40%;
 }

src/pages/SettingsPage/GeneralSettings.test.js

@@ -29,6 +29,13 @@ describe('<GeneralSettings/>', function () {
 
     it('test savesettings', done => {
         const wrapper = shallow(<GeneralSettings/>);
+        wrapper.setState({
+            passwordsupport: true,
+            videopath: '',
+            tvshowpath: '',
+            mediacentername: '',
+            tmdbsupport: true
+        });
 
         global.fetch = global.prepareFetchApi({success: true});
 
@@ -47,6 +54,13 @@ describe('<GeneralSettings/>', function () {
 
     it('test failing savesettings', done => {
         const wrapper = shallow(<GeneralSettings/>);
+        wrapper.setState({
+            passwordsupport: true,
+            videopath: '',
+            tvshowpath: '',
+            mediacentername: '',
+            tmdbsupport: true
+        });
 
         global.fetch = global.prepareFetchApi({success: false});
 

src/pages/SettingsPage/SettingsPage.module.css

@@ -26,6 +26,7 @@
 .SettingSidebarElement {
     background-color: #919fd9;
     border-radius: 7px;
+    color: black;
     font-weight: bold;
     margin: 10px 5px 5px;
     padding: 5px;

src/pages/SettingsPage/SettingsPage.test.js

@@ -7,34 +7,4 @@ describe('<RandomPage/>', function () {
         const wrapper = shallow(<SettingsPage/>);
         wrapper.unmount();
     });
-
-    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('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);
-    });
-
-    function simulateSideBarClick(name, wrapper) {
-        wrapper.find('.SettingSidebarElement').findWhere(it =>
-            it.text() === name &&
-            it.type() === 'div').simulate('click');
-    }
-
-    it('simulate unknown topic', function () {
-        const wrapper = shallow(<SettingsPage/>);
-        wrapper.setState({currentpage: 'unknown'});
-
-        expect(wrapper.find('.SettingsContent').text()).toBe('unknown button clicked');
-
-    });
 });

src/pages/SettingsPage/SettingsPage.tsx

@@ -3,59 +3,44 @@ import MovieSettings from './MovieSettings';
 import GeneralSettings from './GeneralSettings';
 import style from './SettingsPage.module.css';
 import GlobalInfos from '../../utils/GlobalInfos';
-
-type SettingsPageState = {
-    currentpage: string
-}
+import {NavLink, Redirect, Route, Switch} from 'react-router-dom';
 
 /**
  * The Settingspage handles all kinds of settings for the mediacenter
  * and is basically a wrapper for child-tabs
  */
-class SettingsPage extends React.Component<{}, SettingsPageState> {
-    constructor(props: Readonly<{}> | {}, context?: any) {
-        super(props, context);
-
-        this.state = {
-            currentpage: 'general'
-        };
-    }
-
-    /**
-     * load the selected tab
-     * @returns {JSX.Element|string} the jsx element of the selected tab
-     */
-    getContent(): JSX.Element | string {
-        switch (this.state.currentpage) {
-            case 'general':
-                return <GeneralSettings/>;
-            case 'movies':
-                return <MovieSettings/>;
-            case 'tv':
-                return <span/>; // todo this page
-            default:
-                return 'unknown button clicked';
-        }
-    }
-
-    render() : JSX.Element {
+class SettingsPage extends React.Component {
+    render(): JSX.Element {
         const themestyle = GlobalInfos.getThemeStyle();
         return (
             <div>
                 <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>
                     <div className={style.SettingsSidebarTitle + ' ' + themestyle.lighttextcolor}>Settings</div>
-                    <div onClick={() => this.setState({currentpage: 'general'})}
-                         className={style.SettingSidebarElement}>General
-                    </div>
-                    <div onClick={() => this.setState({currentpage: 'movies'})}
-                         className={style.SettingSidebarElement}>Movies
-                    </div>
-                    <div onClick={() => this.setState({currentpage: 'tv'})}
-                         className={style.SettingSidebarElement}>TV Shows
-                    </div>
+                    <NavLink to='/settings/general'>
+                        <div className={style.SettingSidebarElement}>General</div>
+                    </NavLink>
+                    <NavLink to='/settings/movies'>
+                        <div className={style.SettingSidebarElement}>Movies</div>
+                    </NavLink>
+                    <NavLink to='/settings/tv'>
+                        <div className={style.SettingSidebarElement}>TV Shows</div>
+                    </NavLink>
                 </div>
                 <div className={style.SettingsContent}>
-                    {this.getContent()}
+                    <Switch>
+                        <Route path="/settings/general">
+                            <GeneralSettings/>
+                        </Route>
+                        <Route path="/settings/movies">
+                            <MovieSettings/>
+                        </Route>
+                        <Route path="/settings/tv">
+                            <span/>
+                        </Route>
+                        <Route path="/settings">
+                            <Redirect to='/settings/general'/>
+                        </Route>
+                    </Switch>
                 </div>
             </div>
         );