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

correct load of categorypage on tag click

Browse Source 
improved failing tests
This commit is contained in:
Lukas Heiligenbrunner
2020-06-24 21:47:22 +02:00
parent e640b36ce4
commit 753ea99693
8 changed files with 64 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/elements/Preview/Preview.js
View File

@@ -1,13 +1,11 @@
import React from "react";
import "./Preview.css";
import Player from "../../pages/Player/Player";
import VideoContainer from "../VideoContainer/VideoContainer";
import {Spinner} from "react-bootstrap";
class Preview extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
this.state = {
previewpicture: null,
@@ -68,37 +66,6 @@ class Preview extends React.Component {
}
export class TagPreview extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
}
fetchVideoData(tag) {
console.log(tag);
const updateRequest = new FormData();
updateRequest.append('action', 'getMovies');
updateRequest.append('tag', tag);
console.log("fetching data");
// fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log(result);
this.props.categorybinding(
<VideoContainer
data={result}
viewbinding={this.props.viewbinding}/>, tag
);
}))
.catch(() => {
console.log("no connection to backend");
});
}
render() {
return (
<div className='videopreview tagpreview' onClick={() => this.itemClick()}>
@@ -110,7 +77,7 @@ export class TagPreview extends React.Component {
}
itemClick() {
this.fetchVideoData(this.props.name);
this.props.categorybinding(this.props.name);
}
}

21
src/elements/Preview/Previw.test.js
View File

@@ -78,14 +78,7 @@ describe('<TagPreview/>', function () {
});
it('click event triggered', done => {
const mockSuccessResponse = {};
const mockJsonPromise = Promise.resolve(mockSuccessResponse);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
it('click event triggered', function () {
const func = jest.fn();
const wrapper = shallow(<TagPreview/>);
@@ -96,19 +89,11 @@ describe('<TagPreview/>', function () {
});
// first call of fetch is getting of available tags
expect(global.fetch).toHaveBeenCalledTimes(0);
expect(func).toHaveBeenCalledTimes(0);
wrapper.find('.videopreview').simulate('click');
// now called 1 times
expect(global.fetch).toHaveBeenCalledTimes(1);
process.nextTick(() => {
//callback to close window should have called
expect(func).toHaveBeenCalledTimes(1);
global.fetch.mockClear();
done();
});
expect(func).toHaveBeenCalledTimes(1);
});
});

29
src/elements/Tag/Tag.js
View File

@@ -1,15 +1,9 @@
import React from "react";
import "./Tag.css"
import VideoContainer from "../VideoContainer/VideoContainer";
import CategoryPage from "../../pages/CategoryPage/CategoryPage";
class Tag extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
}
render() {
return (
<button className='tagbtn' onClick={() => this.TagClick()}
@@ -20,23 +14,10 @@ class Tag extends React.Component {
TagClick() {
const tag = this.props.children.toString().toLowerCase();
const updateRequest = new FormData();
updateRequest.append('action', 'getMovies');
updateRequest.append('tag', tag);
// fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.props.contentbinding(
<VideoContainer
data={result}
viewbinding={this.props.viewbinding}/>, tag
);
}))
.catch(() => {
console.log("no connection to backend");
});
this.props.viewbinding.changeRootElement(
<CategoryPage
category={tag}
viewbinding={this.props.viewbinding}/>);
}
}

17
src/elements/Tag/Tag.test.js
View File

@@ -23,21 +23,20 @@ describe('<Tag/>', function () {
expect(wrapper.children().text()).toBe("test");
});
it('click event triggered and setvideo callback called', done => {
it('click event triggered and setvideo callback called', function () {
global.fetch = prepareFetchApi({});
const func = jest.fn();
const elem = {
changeRootElement: () => func()
};
const wrapper = shallow(<Tag
contentbinding={func}>test</Tag>);
viewbinding={elem}>test</Tag>);
expect(func).toBeCalledTimes(0);
wrapper.simulate("click");
process.nextTick(() => {
// state to be set correctly with response
expect(func).toBeCalledTimes(1);
global.fetch.mockClear();
done();
});
expect(func).toBeCalledTimes(1);
});
});

53
src/pages/CategoryPage/CategoryPage.js
View File

@@ -5,13 +5,12 @@ import Tag from "../../elements/Tag/Tag";
import {TagPreview} from "../../elements/Preview/Preview";
import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
import PageTitle from "../../elements/PageTitle/PageTitle";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
class CategoryPage extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
this.state = {
loadedtags: [],
selected: null
@@ -19,7 +18,12 @@ class CategoryPage extends React.Component {
}
componentDidMount() {
this.loadTags();
// check if predefined category is set
if (this.props.category) {
this.fetchVideoData(this.props.category);
} else {
this.loadTags();
}
}
render() {
@@ -31,10 +35,10 @@ class CategoryPage extends React.Component {
<SideBar>
<div className='sidebartitle'>Default Tags:</div>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>All</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>FullHd</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>LowQuality</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.setPage}>HD</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.loadTag}>All</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.loadTag}>FullHd</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.loadTag}>LowQuality</Tag>
<Tag viewbinding={this.props.viewbinding} contentbinding={this.loadTag}>HD</Tag>
<hr/>
<button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
this.setState({popupvisible: true})
@@ -51,12 +55,12 @@ class CategoryPage extends React.Component {
name={m.tag_name}
tag_id={m.tag_id}
viewbinding={this.props.viewbinding}
categorybinding={this.setPage}/>
categorybinding={this.loadTag}/>
)) :
"loading"}
</div>) :
<>
{this.selectionelements}
{this.selectionelements ? this.selectionelements : null}
<button data-testid='backbtn' className="btn btn-success"
onClick={this.loadCategoryPageDefault}>Back
</button>
@@ -76,12 +80,35 @@ class CategoryPage extends React.Component {
);
}
setPage = (element, tagname) => {
this.selectionelements = element;
this.setState({selected: null}); // todo save this change trigger better
this.setState({selected: tagname});
loadTag = (tagname) => {
// this.selectionelements = element;
// this.setState({selected: null}); // todo save this change trigger better
this.fetchVideoData(tagname);
};
fetchVideoData(tag) {
console.log(tag);
const updateRequest = new FormData();
updateRequest.append('action', 'getMovies');
updateRequest.append('tag', tag);
console.log("fetching data");
// fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.selectionelements =
<VideoContainer
data={result}
viewbinding={this.props.viewbinding}/>;
this.setState({selected: tag});
}))
.catch(() => {
console.log("no connection to backend");
});
}
loadCategoryPageDefault = () => {
this.setState({selected: null});
};

15
src/pages/HomePage/HomePage.test.js
View File

@@ -1,4 +1,4 @@
import {shallow, mount} from "enzyme";
import {shallow} from "enzyme";
import React from "react";
import HomePage from "./HomePage";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
@@ -22,19 +22,6 @@ describe('<HomePage/>', function () {
wrapper.unmount();
});
it('ckeck default tag click events', function () {
// todo mount bad here maybe delete this test
const wrapper = mount(<HomePage/>);
global.fetch = prepareFetchApi({});
expect(global.fetch).toBeCalledTimes(0);
// click every tag button
wrapper.find("Tag").map((i) => {
i.simulate("click");
});
expect(global.fetch).toBeCalledTimes(4);
});
it('test data insertion', function () {
const wrapper = shallow(<HomePage/>);

6
src/pages/Player/Player.js
View File

@@ -21,8 +21,6 @@ class Player extends React.Component {
tags: [],
popupvisible: false
};
this.props = props;
}
options = {
@@ -66,7 +64,9 @@ class Player extends React.Component {
<hr/>
<div className='sidebartitle'>Tags:</div>
{this.state.tags.map((m) => (
<Tag key={m.tag_name}>{m.tag_name}</Tag>
<Tag
key={m.tag_name}
viewbinding={this.props.viewbinding}>{m.tag_name}</Tag>
))}
</SideBar>

4
src/pages/RandomPage/RandomPage.js
View File

@@ -29,7 +29,9 @@ class RandomPage extends React.Component {
<SideBar>
<div className='sidebartitle'>Visible Tags:</div>
{this.state.tags.map((m) => (
<Tag>{m.tag_name}</Tag>
<Tag
key={m.tag_name}
viewbinding={this.props.viewbinding}>{m.tag_name}</Tag>
))}
</SideBar>