add some unit tests

pretify episodepage

src/elements/DynamicContentContainer/DynamicContentContainer.module.css

@@ -1,4 +1,5 @@
 .maincontent {
     float: left;
     width: 70%;
+    flex: 1;
 }

src/elements/DynamicContentContainer/DynamicContentContainer.test.js

@@ -27,4 +27,11 @@ describe('<DynamicContentContainer/>', function () {
         expect(wrapper.find('a')).toHaveLength(0);
         expect(wrapper.find('.maincontent').text()).toBe('no items to show!');
     });
+
+    it('test clean', function () {
+        const wrapper = shallow(<DynamicContentContainer data={[{}, {}, {}]} renderElement={(el) => (<a/>)}/>);
+        expect(wrapper.find('a')).toHaveLength(3);
+        wrapper.instance().clean();
+        expect(wrapper.find('a')).toHaveLength(0);
+    });
 });

src/pages/TVShowPage/EpisodePage.test.js

@@ -0,0 +1,43 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import {EpisodePage, EpisodeTile} from './EpisodePage';
+
+describe('<EpisodePage/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<EpisodePage  history={{}} location={{}} match={{params: {id: 42}}}/>);
+        wrapper.unmount();
+    });
+
+    it('content showing when loaded', function () {
+        const wrapper = shallow(<EpisodePage  history={{}} location={{}} match={{params: {id: 42}}}/>);
+
+        expect(wrapper.find('DynamicContentContainer')).toHaveLength(0)
+
+        wrapper.setState({loaded: true});
+
+        expect(wrapper.find('DynamicContentContainer')).toHaveLength(1)
+    });
+});
+
+describe('<EpisodeTile/>', () => {
+    it('renders without crashing', function () {
+        const wrapper = shallow(<EpisodeTile  episode={{
+            ID: 0,
+            Name: 'testname',
+            Season: 0,
+            Episode: 0
+        }}/>);
+        wrapper.unmount();
+    });
+
+    it('renders text', function () {
+        const wrapper = shallow(<EpisodeTile  episode={{
+            ID: 0,
+            Name: 'testname',
+            Season: 0,
+            Episode: 0
+        }}/>);
+
+        expect(wrapper.findWhere(e => e.text() === 'testname')).toHaveLength(1)
+    });
+})

src/pages/TVShowPage/EpisodePage.tsx

@@ -4,6 +4,12 @@ import {withRouter} from 'react-router-dom';
 import {APINode, callAPI} from '../../utils/Api';
 import {Link} from 'react-router-dom';
 import DynamicContentContainer from '../../elements/DynamicContentContainer/DynamicContentContainer';
+import tileStyle from './EpisodeTile.module.css';
+import GlobalInfos from '../../utils/GlobalInfos';
+import {faPlay} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
+import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
 
 interface Props extends RouteComponentProps<{id: string}> {}
 
@@ -18,7 +24,7 @@ interface Episode {
     Episode: number;
 }
 
-class EpisodePage extends React.Component<Props, State> {
+export class EpisodePage extends React.Component<Props, State> {
     episodes: Episode[] = [];
 
     state = {
@@ -39,6 +45,14 @@ class EpisodePage extends React.Component<Props, State> {
 
         return (
             <>
+                <PageTitle title='TV Shows' subtitle='' />
+                <SideBar>
+                    <SideBarTitle>Infos:</SideBarTitle>
+                    <Line />
+                    <SideBarItem>
+                        <b>{this.episodes.length}</b> Episodes Total!
+                    </SideBarItem>
+                </SideBar>
                 <DynamicContentContainer
                     renderElement={(el): JSX.Element => <EpisodeTile key={el.ID} episode={el} />}
                     data={this.episodes}
@@ -49,11 +63,19 @@ class EpisodePage extends React.Component<Props, State> {
     }
 }
 
-const EpisodeTile = (props: {episode: Episode}): JSX.Element => {
+export const EpisodeTile = (props: {episode: Episode}): JSX.Element => {
+    const themestyle = GlobalInfos.getThemeStyle();
     return (
         <Link to={'/tvplayer/' + props.episode.ID}>
-            <div>
+            <div className={tileStyle.tile + ' ' + themestyle.secbackground + ' ' + themestyle.textcolor}>
-                Season:{props.episode.Season} Episode:{props.episode.Episode} {props.episode.Name}
+                <FontAwesomeIcon
+                    style={{
+                        marginRight: '10px'
+                    }}
+                    icon={faPlay}
+                    size='1x'
+                />
+                Season: {props.episode.Season} Episode: {props.episode.Episode} {props.episode.Name}
             </div>
         </Link>
     );

src/pages/TVShowPage/EpisodeTile.module.css

@@ -0,0 +1,15 @@
+.tile {
+    margin: 15px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    width: 50%;
+    padding-left: 15px;
+}
+
+.tile:hover {
+    opacity: 0.7;
+}
+
+.tile:hover svg {
+    color: dodgerblue;
+}

src/pages/TVShowPage/TVShowPage.tsx

@@ -5,6 +5,8 @@ import {TVShow} from '../../types/ApiTypes';
 import DynamicContentContainer from '../../elements/DynamicContentContainer/DynamicContentContainer';
 import {Route, Switch, useRouteMatch} from 'react-router-dom';
 import EpisodePage from './EpisodePage';
+import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
+import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
 
 interface State {
     loading: boolean;
@@ -28,27 +30,39 @@ class TVShowPage extends React.Component<Props, State> {
 
     render(): JSX.Element {
         return (
-            <DynamicContentContainer
+            <>
-                renderElement={(elem): JSX.Element => (
+                <PageTitle title='TV Shows' subtitle='' />
-                    <Preview
+                <SideBar>
-                        key={elem.Id}
+                    <SideBarTitle>Infos:</SideBarTitle>
-                        name={elem.Name}
+                    <Line />
-                        picLoader={(callback: (pic: string) => void): void => {
+                    <SideBarItem>
-                            callAPIPlain(
+                        <b>{this.data.length}</b> TV-Shows Total!
-                                APINode.TVShow,
+                    </SideBarItem>
-                                {
+                </SideBar>
-                                    action: 'readThumbnail',
+                <div>
-                                    Id: elem.Id
+                    <DynamicContentContainer
-                                },
+                        renderElement={(elem): JSX.Element => (
-                                (result) => callback(result)
+                            <Preview
-                            );
+                                key={elem.Id}
-                        }}
+                                name={elem.Name}
-                        linkPath={'/tvshows/' + elem.Id}
+                                picLoader={(callback: (pic: string) => void): void => {
+                                    callAPIPlain(
+                                        APINode.TVShow,
+                                        {
+                                            action: 'readThumbnail',
+                                            Id: elem.Id
+                                        },
+                                        (result) => callback(result)
+                                    );
+                                }}
+                                linkPath={'/tvshows/' + elem.Id}
+                            />
+                        )}
+                        data={this.state.loading ? [] : this.data}
+                        initialLoadNr={20}
                     />
-                )}
+                </div>
-                data={this.state.loading ? [] : this.data}
+            </>
-                initialLoadNr={20}
-            />
         );
     }
 }