From 4ae9f279024d31f1707b58eb14892bd4c6578746 Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Wed, 28 Apr 2021 17:31:38 +0200
Subject: [PATCH] add some unit tests pretify episodepage

---
 .../DynamicContentContainer.module.css        |  1 +
 .../DynamicContentContainer.test.js           |  7 +++
 src/pages/TVShowPage/EpisodePage.test.js      | 43 +++++++++++++++
 src/pages/TVShowPage/EpisodePage.tsx          | 30 +++++++++--
 src/pages/TVShowPage/EpisodeTile.module.css   | 15 ++++++
 src/pages/TVShowPage/TVShowPage.tsx           | 54 ++++++++++++-------
 6 files changed, 126 insertions(+), 24 deletions(-)
 create mode 100644 src/pages/TVShowPage/EpisodePage.test.js
 create mode 100644 src/pages/TVShowPage/EpisodeTile.module.css

diff --git a/src/elements/DynamicContentContainer/DynamicContentContainer.module.css b/src/elements/DynamicContentContainer/DynamicContentContainer.module.css
index ee66207..0278419 100644
--- a/src/elements/DynamicContentContainer/DynamicContentContainer.module.css
+++ b/src/elements/DynamicContentContainer/DynamicContentContainer.module.css
@@ -1,4 +1,5 @@
 .maincontent {
     float: left;
     width: 70%;
+    flex: 1;
 }
diff --git a/src/elements/DynamicContentContainer/DynamicContentContainer.test.js b/src/elements/DynamicContentContainer/DynamicContentContainer.test.js
index 176fd4f..2792ce3 100644
--- a/src/elements/DynamicContentContainer/DynamicContentContainer.test.js
+++ b/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);
+    });
 });
diff --git a/src/pages/TVShowPage/EpisodePage.test.js b/src/pages/TVShowPage/EpisodePage.test.js
new file mode 100644
index 0000000..2dce8c0
--- /dev/null
+++ b/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)
+    });
+})
diff --git a/src/pages/TVShowPage/EpisodePage.tsx b/src/pages/TVShowPage/EpisodePage.tsx
index be58dcc..99405a1 100644
--- a/src/pages/TVShowPage/EpisodePage.tsx
+++ b/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>
-                Season:{props.episode.Season} Episode:{props.episode.Episode} {props.episode.Name}
+            <div className={tileStyle.tile + ' ' + themestyle.secbackground + ' ' + themestyle.textcolor}>
+                <FontAwesomeIcon
+                    style={{
+                        marginRight: '10px'
+                    }}
+                    icon={faPlay}
+                    size='1x'
+                />
+                Season: {props.episode.Season} Episode: {props.episode.Episode} {props.episode.Name}
             </div>
         </Link>
     );
diff --git a/src/pages/TVShowPage/EpisodeTile.module.css b/src/pages/TVShowPage/EpisodeTile.module.css
new file mode 100644
index 0000000..d2af5e7
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/TVShowPage/TVShowPage.tsx b/src/pages/TVShowPage/TVShowPage.tsx
index fa005c6..4e14191 100644
--- a/src/pages/TVShowPage/TVShowPage.tsx
+++ b/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 => (
-                    <Preview
-                        key={elem.Id}
-                        name={elem.Name}
-                        picLoader={(callback: (pic: string) => void): void => {
-                            callAPIPlain(
-                                APINode.TVShow,
-                                {
-                                    action: 'readThumbnail',
-                                    Id: elem.Id
-                                },
-                                (result) => callback(result)
-                            );
-                        }}
-                        linkPath={'/tvshows/' + elem.Id}
+            <>
+                <PageTitle title='TV Shows' subtitle='' />
+                <SideBar>
+                    <SideBarTitle>Infos:</SideBarTitle>
+                    <Line />
+                    <SideBarItem>
+                        <b>{this.data.length}</b> TV-Shows Total!
+                    </SideBarItem>
+                </SideBar>
+                <div>
+                    <DynamicContentContainer
+                        renderElement={(elem): JSX.Element => (
+                            <Preview
+                                key={elem.Id}
+                                name={elem.Name}
+                                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}
                     />
-                )}
-                data={this.state.loading ? [] : this.data}
-                initialLoadNr={20}
-            />
+                </div>
+            </>
         );
     }
 }