correct load of categorypage on tag click

improved failing tests

src/elements/Preview/Preview.js

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

src/elements/Preview/Previw.test.js

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

src/elements/Tag/Tag.js

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

src/elements/Tag/Tag.test.js

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