Tests for all Components
This commit is contained in:
32
src/pages/Player/Player.css
Normal file
32
src/pages/Player/Player.css
Normal file
@ -0,0 +1,32 @@
|
||||
.closebutton {
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 5px 15px 5px 15px;
|
||||
background-color: #FF0000;
|
||||
margin-top: 25px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.likefield {
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
height: 30px;
|
||||
background-color: #9e5353;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.videowrapper {
|
||||
margin-left: 20px;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 60%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.videoactions {
|
||||
margin-top: 15px;
|
||||
}
|
||||
156
src/pages/Player/Player.js
Normal file
156
src/pages/Player/Player.js
Normal file
@ -0,0 +1,156 @@
|
||||
import React from "react";
|
||||
import "./Player.css"
|
||||
import {PlyrComponent} from 'plyr-react';
|
||||
import SideBar from "../../elements/SideBar/SideBar";
|
||||
import Tag from "../../elements/Tag/Tag";
|
||||
import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
|
||||
|
||||
|
||||
class Player extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
sources: null,
|
||||
movie_id: null,
|
||||
movie_name: null,
|
||||
likes: null,
|
||||
quality: null,
|
||||
length: null,
|
||||
tags: [],
|
||||
popupvisible: false
|
||||
};
|
||||
|
||||
this.props = props;
|
||||
}
|
||||
|
||||
options = {
|
||||
controls: [
|
||||
'play-large', // The large play button in the center
|
||||
'play', // Play/pause playback
|
||||
'progress', // The progress bar and scrubber for playback and buffering
|
||||
'current-time', // The current time of playback
|
||||
'duration', // The full duration of the media
|
||||
'mute', // Toggle mute
|
||||
'volume', // Volume control
|
||||
'captions', // Toggle captions
|
||||
'settings', // Settings menu
|
||||
'airplay', // Airplay (currently Safari only)
|
||||
'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
|
||||
'fullscreen', // Toggle fullscreen
|
||||
]
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchMovieData();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id='videocontainer'>
|
||||
<div className='pageheader'>
|
||||
<span className='pageheadertitle'>Watch</span>
|
||||
<span className='pageheadersubtitle'>{this.state.movie_name}</span>
|
||||
<hr/>
|
||||
</div>
|
||||
<SideBar>
|
||||
<div className='sidebartitle'>Infos:</div>
|
||||
<hr/>
|
||||
<div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
|
||||
{this.state.quality !== 0 ?
|
||||
<div className='sidebarinfo'><b>{this.state.quality}p</b> Quality!
|
||||
</div> : null}
|
||||
{this.state.length !== 0 ?
|
||||
<div className='sidebarinfo'><b>{Math.round(this.state.length / 60)}</b> Minutes of length!
|
||||
</div> : null}
|
||||
<hr/>
|
||||
<div className='sidebartitle'>Tags:</div>
|
||||
{this.state.tags.map((m) => (
|
||||
<Tag key={m.tag_name}>{m.tag_name}</Tag>
|
||||
))}
|
||||
</SideBar>
|
||||
|
||||
<div className="videowrapper">
|
||||
{/* video component is added here */}
|
||||
{this.state.sources ? <PlyrComponent
|
||||
className='myvideo'
|
||||
sources={this.state.sources}
|
||||
options={this.options}/> :
|
||||
<div>not loaded yet</div>}
|
||||
<div className='videoactions'>
|
||||
<button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
|
||||
<button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
|
||||
Video a Tag
|
||||
</button>
|
||||
{this.state.popupvisible ?
|
||||
<AddTagPopup show={this.state.popupvisible}
|
||||
onHide={() => {
|
||||
this.setState({popupvisible: false});
|
||||
this.fetchMovieData();
|
||||
}}
|
||||
movie_id={this.state.movie_id}/> :
|
||||
null
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button className="closebutton" onClick={() => this.closebtn()}>Close</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
fetchMovieData() {
|
||||
const updateRequest = new FormData();
|
||||
updateRequest.append('action', 'loadVideo');
|
||||
updateRequest.append('movieid', this.props.movie_id);
|
||||
|
||||
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
|
||||
.then((response) => response.json())
|
||||
.then((result) => {
|
||||
this.setState({
|
||||
sources: {
|
||||
type: 'video',
|
||||
sources: [
|
||||
{
|
||||
src: result.movie_url,
|
||||
type: 'video/mp4',
|
||||
size: 1080,
|
||||
}
|
||||
],
|
||||
poster: result.thumbnail
|
||||
},
|
||||
movie_id: result.movie_id,
|
||||
movie_name: result.movie_name,
|
||||
likes: result.likes,
|
||||
quality: result.quality,
|
||||
length: result.length,
|
||||
tags: result.tags
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/* Click Listener */
|
||||
likebtn() {
|
||||
const updateRequest = new FormData();
|
||||
updateRequest.append('action', 'addLike');
|
||||
updateRequest.append('movieid', this.props.movie_id);
|
||||
|
||||
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
|
||||
.then((response) => response.json()
|
||||
.then((result) => {
|
||||
if (result.result === "success") {
|
||||
this.fetchMovieData();
|
||||
} else {
|
||||
console.log("an error occured while liking");
|
||||
console.log(result);
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
closebtn() {
|
||||
this.props.viewbinding.hideVideo();
|
||||
}
|
||||
}
|
||||
|
||||
export default Player;
|
||||
128
src/pages/Player/Player.test.js
Normal file
128
src/pages/Player/Player.test.js
Normal file
@ -0,0 +1,128 @@
|
||||
import {shallow} from "enzyme";
|
||||
import React from "react";
|
||||
import Player from "./Player";
|
||||
|
||||
function prepareFetchApi(response) {
|
||||
const mockJsonPromise = Promise.resolve(response);
|
||||
const mockFetchPromise = Promise.resolve({
|
||||
json: () => mockJsonPromise,
|
||||
});
|
||||
return (jest.fn().mockImplementation(() => mockFetchPromise));
|
||||
}
|
||||
|
||||
describe('<Player/>', function () {
|
||||
it('renders without crashing ', function () {
|
||||
const wrapper = shallow(<Player/>);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
it('plyr insertion', function () {
|
||||
const wrapper = shallow(<Player/>);
|
||||
|
||||
wrapper.setState({
|
||||
sources: [
|
||||
{
|
||||
src: '/tstvid.mp4',
|
||||
type: 'video/mp4',
|
||||
size: 1080,
|
||||
}
|
||||
]
|
||||
});
|
||||
expect(wrapper.find("r")).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('likebtn click', done => {
|
||||
global.fetch = prepareFetchApi({result: 'success'});
|
||||
|
||||
const func = jest.fn();
|
||||
|
||||
const wrapper = shallow(<Player/>);
|
||||
wrapper.setProps({
|
||||
onHide: () => {
|
||||
func()
|
||||
}
|
||||
});
|
||||
|
||||
// initial fetch for getting movie data
|
||||
expect(global.fetch).toHaveBeenCalledTimes(1);
|
||||
wrapper.find('.videoactions').find("button").first().simulate('click');
|
||||
// fetch for liking
|
||||
expect(global.fetch).toHaveBeenCalledTimes(2);
|
||||
|
||||
process.nextTick(() => {
|
||||
// refetch is called so fetch called 3 times
|
||||
expect(global.fetch).toHaveBeenCalledTimes(3);
|
||||
|
||||
global.fetch.mockClear();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('errored likebtn click', done => {
|
||||
global.fetch = prepareFetchApi({result: 'nosuccess'});
|
||||
const func = jest.fn();
|
||||
|
||||
const wrapper = shallow(<Player/>);
|
||||
wrapper.setProps({
|
||||
onHide: () => {
|
||||
func()
|
||||
}
|
||||
});
|
||||
|
||||
// initial fetch for getting movie data
|
||||
expect(global.fetch).toHaveBeenCalledTimes(1);
|
||||
wrapper.find('.videoactions').find("button").first().simulate('click');
|
||||
// fetch for liking
|
||||
expect(global.fetch).toHaveBeenCalledTimes(2);
|
||||
|
||||
process.nextTick(() => {
|
||||
// refetch is called so fetch called 3 times
|
||||
expect(global.fetch).toHaveBeenCalledTimes(2);
|
||||
|
||||
global.fetch.mockClear();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('show tag popup', function () {
|
||||
const wrapper = shallow(<Player/>);
|
||||
|
||||
expect(wrapper.find("AddTagPopup")).toHaveLength(0);
|
||||
wrapper.find('.videoactions').find("button").last().simulate('click');
|
||||
// addtagpopup should be showing now
|
||||
expect(wrapper.find("AddTagPopup")).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('hide click ', function () {
|
||||
const wrapper = shallow(<Player/>);
|
||||
const func = jest.fn();
|
||||
|
||||
wrapper.setProps({
|
||||
viewbinding: {
|
||||
hideVideo: () => {
|
||||
func()
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
expect(func).toHaveBeenCalledTimes(0);
|
||||
wrapper.find('.closebutton').simulate('click');
|
||||
// addtagpopup should be showing now
|
||||
expect(func).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('inserts Tags correctly', function () {
|
||||
const wrapper = shallow(<Player/>);
|
||||
|
||||
expect(wrapper.find("Tag")).toHaveLength(0);
|
||||
|
||||
wrapper.setState({
|
||||
tags: [
|
||||
{tag_name: 'first'},
|
||||
{tag_name: 'second'}
|
||||
]
|
||||
});
|
||||
|
||||
expect(wrapper.find("Tag")).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user