this.itemClick()}>
@@ -109,7 +77,7 @@ export class TagPreview extends React.Component {
}
itemClick() {
- this.fetchVideoData(this.props.name);
+ this.props.categorybinding(this.props.name);
}
}
diff --git a/src/elements/Preview/Previw.test.js b/src/elements/Preview/Previw.test.js
index 1631d94..e1f68ed 100644
--- a/src/elements/Preview/Previw.test.js
+++ b/src/elements/Preview/Previw.test.js
@@ -22,7 +22,7 @@ describe('
', function () {
const wrapper = shallow(
);
wrapper.setProps({
viewbinding: {
- showVideo: () => {
+ changeRootElement: () => {
func()
}
}
@@ -78,14 +78,7 @@ describe('
', 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(
);
@@ -96,19 +89,11 @@ describe('
', 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);
});
});
diff --git a/src/elements/Tag/Tag.js b/src/elements/Tag/Tag.js
index 40e3ffb..db6a6b5 100644
--- a/src/elements/Tag/Tag.js
+++ b/src/elements/Tag/Tag.js
@@ -1,21 +1,24 @@
import React from "react";
import "./Tag.css"
+import CategoryPage from "../../pages/CategoryPage/CategoryPage";
class Tag extends React.Component {
- constructor(props, context) {
- super(props, context);
-
- this.props = props;
- }
-
render() {
- // todo onclick events correctlyy
return (
-
);
}
+
+ TagClick() {
+ const tag = this.props.children.toString().toLowerCase();
+
+ this.props.viewbinding.changeRootElement(
+
);
+ }
}
export default Tag;
diff --git a/src/elements/Tag/Tag.test.js b/src/elements/Tag/Tag.test.js
index 4ee9886..f0ea51d 100644
--- a/src/elements/Tag/Tag.test.js
+++ b/src/elements/Tag/Tag.test.js
@@ -5,6 +5,14 @@ import "@testing-library/jest-dom"
import {shallow} from 'enzyme'
describe('', function () {
+ function prepareFetchApi(response) {
+ const mockJsonPromise = Promise.resolve(response);
+ const mockFetchPromise = Promise.resolve({
+ json: () => mockJsonPromise,
+ });
+ return (jest.fn().mockImplementation(() => mockFetchPromise));
+ }
+
it('renders without crashing ', function () {
const wrapper = shallow(test);
wrapper.unmount();
@@ -14,4 +22,21 @@ describe('', function () {
const wrapper = shallow(test);
expect(wrapper.children().text()).toBe("test");
});
+
+ it('click event triggered and setvideo callback called', function () {
+ global.fetch = prepareFetchApi({});
+ const func = jest.fn();
+ const elem = {
+ changeRootElement: () => func()
+ };
+
+ const wrapper = shallow(test);
+
+ expect(func).toBeCalledTimes(0);
+
+ wrapper.simulate("click");
+
+ expect(func).toBeCalledTimes(1);
+ });
});
diff --git a/src/pages/CategoryPage/CategoryPage.js b/src/pages/CategoryPage/CategoryPage.js
index c584295..59d37f8 100644
--- a/src/pages/CategoryPage/CategoryPage.js
+++ b/src/pages/CategoryPage/CategoryPage.js
@@ -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,26 @@ class CategoryPage extends React.Component {
Default Tags:
- All
- FullHd
- LowQuality
- HD
+ {
+ this.loadTag(e.props.category)
+ }
+ }}>All
+ {
+ this.loadTag(e.props.category)
+ }
+ }}>FullHd
+ {
+ this.loadTag(e.props.category)
+ }
+ }}>LowQuality
+ {
+ this.loadTag(e.props.category)
+ }
+ }}>HD
- {!this.state.selected ?
- (
+ {this.state.selected ?
+ <>
+ {this.videodata ?
+
: null}
+
+ > :
+
{this.state.loadedtags ?
this.state.loadedtags.map((m) => (
+ categorybinding={this.loadTag}/>
)) :
"loading"}
-
) :
- <>
- {this.selectionelements}
-
- >
+
}
{this.state.popupvisible ?
@@ -76,14 +99,34 @@ class CategoryPage extends React.Component {
);
}
- setPage = (element, tagname) => {
- this.selectionelements = element;
-
- this.setState({selected: tagname});
+ loadTag = (tagname) => {
+ 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.videodata = result;
+ this.setState({selected: null}); // needed to trigger the state reload correctly
+ this.setState({selected: tag});
+ }))
+ .catch(() => {
+ console.log("no connection to backend");
+ });
+ }
+
loadCategoryPageDefault = () => {
this.setState({selected: null});
+ this.loadTags();
};
/**
diff --git a/src/pages/CategoryPage/CategoryPage.test.js b/src/pages/CategoryPage/CategoryPage.test.js
index 9a50b09..1821c1e 100644
--- a/src/pages/CategoryPage/CategoryPage.test.js
+++ b/src/pages/CategoryPage/CategoryPage.test.js
@@ -86,8 +86,6 @@ describe('', function () {
process.nextTick(() => {
// expect callback to have loaded correct tag
expect(wrapper.state().selected).toBe("testname");
- // expect to receive a videocontainer with simulated data
- expect(wrapper.instance().selectionelements).toMatchObject();
global.fetch.mockClear();
done();
@@ -104,4 +102,13 @@ describe('', function () {
wrapper.find('[data-testid="backbtn"]').simulate("click");
expect(wrapper.state().selected).toBeNull();
});
+
+ it('load categorypage with predefined tag', function () {
+ const func = jest.fn();
+ CategoryPage.prototype.fetchVideoData = func;
+
+ const wrapper = shallow();
+
+ expect(func).toBeCalledTimes(1);
+ });
});
diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js
index bd96175..d95a511 100644
--- a/src/pages/HomePage/HomePage.js
+++ b/src/pages/HomePage/HomePage.js
@@ -146,26 +146,10 @@ class HomePage extends React.Component {
{this.state.sideinfo.tagnr} different Tags!
Default Tags:
- {
- this.setState({tag: "All"});
- this.fetchVideoData("all");
- }}>All
-
- {
- this.setState({tag: "Full HD"});
- this.fetchVideoData("fullhd");
- }}>FullHd
-
- {
- this.setState({tag: "Low Quality"});
- this.fetchVideoData("lowquality");
- }}>LowQuality
-
- {
- this.setState({tag: "HD"});
- this.fetchVideoData("hd");
- }}>HD
-
+ All
+ FullHd
+ LowQuality
+ HD
{this.state.data.length !== 0 ?
', function () {
wrapper.unmount();
});
- it('ckeck default tag click events', function () {
- const wrapper = shallow();
- 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();
diff --git a/src/pages/Player/Player.js b/src/pages/Player/Player.js
index 5de08da..1883160 100644
--- a/src/pages/Player/Player.js
+++ b/src/pages/Player/Player.js
@@ -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 {
Tags:
{this.state.tags.map((m) => (
- {m.tag_name}
+ {m.tag_name}
))}
@@ -149,7 +149,7 @@ class Player extends React.Component {
}
closebtn() {
- this.props.viewbinding.hideVideo();
+ this.props.viewbinding.returnToLastElement();
}
}
diff --git a/src/pages/Player/Player.test.js b/src/pages/Player/Player.test.js
index ec21940..2ac02e2 100644
--- a/src/pages/Player/Player.test.js
+++ b/src/pages/Player/Player.test.js
@@ -99,7 +99,7 @@ describe('', function () {
wrapper.setProps({
viewbinding: {
- hideVideo: () => {
+ returnToLastElement: () => {
func()
}
}
diff --git a/src/pages/RandomPage/RandomPage.js b/src/pages/RandomPage/RandomPage.js
index 27eaa0c..3261aa5 100644
--- a/src/pages/RandomPage/RandomPage.js
+++ b/src/pages/RandomPage/RandomPage.js
@@ -29,7 +29,9 @@ class RandomPage extends React.Component {
Visible Tags:
{this.state.tags.map((m) => (
- {m.tag_name}
+ {m.tag_name}
))}