lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

add some unit tests

Browse Source 
pretify episodepage
This commit is contained in:
lukas 2021-04-28 17:31:38 +02:00
parent 8c44a931de
commit 4ae9f27902
6 changed files with 126 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/elements/DynamicContentContainer/DynamicContentContainer.module.css
View File

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

7
src/elements/DynamicContentContainer/DynamicContentContainer.test.js
View File

@ -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);
});
});

43
src/pages/TVShowPage/EpisodePage.test.js Normal file
View File

@ -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)
});
})

30
src/pages/TVShowPage/EpisodePage.tsx
View File

@ -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>
);

15
src/pages/TVShowPage/EpisodeTile.module.css Normal file
View File

@ -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;
}

54
src/pages/TVShowPage/TVShowPage.tsx
View File

@ -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>
</>
);
}
}