Tests for all Components

src/pages/CategoryPage/CategoryPage.js

@@ -1,9 +1,9 @@
 import React from "react";
-import SideBar from "../elements/SideBar/SideBar";
-import Tag from "../elements/Tag/Tag";
+import SideBar from "../../elements/SideBar/SideBar";
+import Tag from "../../elements/Tag/Tag";
 
-import {TagPreview} from "../elements/Preview";
-import NewTagPopup from "../elements/NewTagPopup";
+import {TagPreview} from "../../elements/Preview/Preview";
+import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
 
 class CategoryPage extends React.Component {
     constructor(props, context) {
@@ -37,7 +37,7 @@ class CategoryPage extends React.Component {
                     <Tag>LowQuality</Tag>
                     <Tag>HD</Tag>
                     <hr/>
-                    <button className='btn btn-success' onClick={() => {
+                    <button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
                         this.setState({popupvisible: true})
                     }}>Add a new Tag!
                     </button>
@@ -58,7 +58,9 @@ class CategoryPage extends React.Component {
                     </div>) :
                     <>
                         {this.selectionelements}
-                        <button className="btn btn-success" onClick={this.loadCategoryPageDefault}>Back</button>
+                        <button data-testid='backbtn' className="btn btn-success"
+                                onClick={this.loadCategoryPageDefault}>Back
+                        </button>
                     </>
                 }
 

src/pages/CategoryPage/CategoryPage.test.js

@@ -0,0 +1,107 @@
+import {shallow, mount} from "enzyme";
+import React from "react";
+import CategoryPage from "./CategoryPage";
+import VideoContainer from "../../elements/VideoContainer/VideoContainer";
+
+function prepareFetchApi(response) {
+    const mockJsonPromise = Promise.resolve(response);
+    const mockFetchPromise = Promise.resolve({
+        json: () => mockJsonPromise,
+    });
+    return (jest.fn().mockImplementation(() => mockFetchPromise));
+}
+
+describe('<CategoryPage/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<CategoryPage/>);
+        wrapper.unmount();
+    });
+
+    it('test tag fetch call', done => {
+        global.fetch = prepareFetchApi(["first", "second"]);
+
+        const wrapper = shallow(<CategoryPage/>);
+
+        expect(global.fetch).toHaveBeenCalledTimes(1);
+
+        process.nextTick(() => {
+            //callback to close window should have called
+            expect(wrapper.state().loadedtags.length).toBe(2);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+
+    it('test errored fetch call', done => {
+        global.fetch = prepareFetchApi({});
+
+        let message;
+        global.console.log = jest.fn((m) => {
+            message = m;
+        })
+
+        const wrapper = shallow(<CategoryPage/>);
+
+        expect(global.fetch).toHaveBeenCalledTimes(1);
+
+        process.nextTick(() => {
+            //callback to close window should have called
+            expect(message).toBe("no connection to backend");
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+
+    it('test new tag popup', function () {
+        const wrapper = mount(<CategoryPage/>);
+
+        expect(wrapper.find("NewTagPopup")).toHaveLength(0);
+        wrapper.find('[data-testid="btnaddtag"]').simulate('click');
+        // newtagpopup should be showing now
+        expect(wrapper.find("NewTagPopup")).toHaveLength(1);
+
+        // click close button in modal
+        wrapper.find(".modal-header").find("button").simulate("click");
+        expect(wrapper.find("NewTagPopup")).toHaveLength(0);
+    });
+
+    it('test setpage callback', done => {
+        global.fetch = prepareFetchApi([{}, {}]);
+
+        const wrapper = mount(<CategoryPage/>);
+
+        wrapper.setState({
+            loadedtags: [
+                {
+                    tag_name: "testname",
+                    tag_id: 42
+                }
+            ]
+        });
+
+        wrapper.find("TagPreview").find("div").first().simulate("click");
+
+        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(<VideoContainer data={[{}, {}]}/>);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+
+    it('test back to category view callback', function () {
+        const wrapper = shallow(<CategoryPage/>);
+
+        wrapper.setState({
+            selected: "test"
+        });
+        expect(wrapper.state().selected).not.toBeNull();
+        wrapper.find('[data-testid="backbtn"]').simulate("click");
+        expect(wrapper.state().selected).toBeNull();
+    });
+});

src/pages/HomePage/HomePage.css

@@ -0,0 +1,9 @@
+.maincontent {
+    float: left;
+    width: 70%;
+}
+
+.rightinfo {
+    float: left;
+    width: 10%;
+}

src/pages/HomePage/HomePage.js

@@ -1,10 +1,10 @@
 import React from "react";
-import SideBar from "../elements/SideBar/SideBar";
-import Tag from "../elements/Tag/Tag";
-import VideoContainer from "../elements/VideoContainer";
+import SideBar from "../../elements/SideBar/SideBar";
+import Tag from "../../elements/Tag/Tag";
+import VideoContainer from "../../elements/VideoContainer/VideoContainer";
 
-import "../css/HomePage.css"
-import "../css/DefaultPage.css"
+import "./HomePage.css"
+import "../../css/DefaultPage.css"
 
 class HomePage extends React.Component {
     constructor(props, context) {
@@ -25,7 +25,6 @@ class HomePage extends React.Component {
     }
 
     componentDidMount() {
-        // document.addEventListener('scroll', this.trackScrolling);
         // initial get of all videos
         this.fetchVideoData("all");
         this.fetchStartData();
@@ -129,7 +128,8 @@ class HomePage extends React.Component {
                 {this.state.data.length !== 0 ?
                     <VideoContainer
                         data={this.state.data}
-                        viewbinding={this.props.viewbinding}/> : null}
+                        viewbinding={this.props.viewbinding}/> :
+                    <div>No Data found!</div>}
                 <div className='rightinfo'>
 
                 </div>

src/pages/HomePage/HomePage.test.js

@@ -0,0 +1,58 @@
+import {shallow} from "enzyme";
+import React from "react";
+import HomePage from "./HomePage";
+
+function prepareFetchApi(response) {
+    const mockJsonPromise = Promise.resolve(response);
+    const mockFetchPromise = Promise.resolve({
+        json: () => mockJsonPromise,
+    });
+    return (jest.fn().mockImplementation(() => mockFetchPromise));
+}
+
+describe('<HomePage/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<HomePage/>);
+        wrapper.unmount();
+    });
+
+    it('ckeck default tag click events', function () {
+        const wrapper = shallow(<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/>);
+
+        expect(wrapper.find("VideoContainer")).toHaveLength(0);
+
+        wrapper.setState({
+            data: [
+                {}, {}
+            ]
+        });
+
+        // there shoud be loaded the Videocontainer element into dom after fetching videos correctly
+        expect(wrapper.find("VideoContainer")).toHaveLength(1);
+    });
+
+    it('test title and nr insertions', function () {
+        const wrapper = shallow(<HomePage/>);
+
+        expect(wrapper.find(".pageheadersubtitle").text()).toBe("All Videos - 0");
+
+        wrapper.setState({
+            tag: "testtag",
+            selectionnr: 42
+        });
+
+        expect(wrapper.find(".pageheadersubtitle").text()).toBe("testtag Videos - 42");
+    });
+});

src/pages/Player/Player.css

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

src/pages/Player/Player.js

@@ -1,9 +1,9 @@
 import React from "react";
-import "../css/Player.css"
+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";
+import SideBar from "../../elements/SideBar/SideBar";
+import Tag from "../../elements/Tag/Tag";
+import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
 
 
 class Player extends React.Component {
@@ -137,15 +137,15 @@ class Player extends React.Component {
         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);
-                }
-            });
+            .then((response) => response.json()
+                .then((result) => {
+                    if (result.result === "success") {
+                        this.fetchMovieData();
+                    } else {
+                        console.log("an error occured while liking");
+                        console.log(result);
+                    }
+                }));
     }
 
     closebtn() {

src/pages/Player/Player.test.js

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

src/pages/RandomPage/RandomPage.css

@@ -0,0 +1,21 @@
+.Shufflebutton {
+    width: 100%;
+    align-content: center;
+}
+
+.btnshuffle {
+    background-color: #39a945;
+
+    color: white;
+    margin-top: 20px;
+    margin-left: 45%;
+    border: none;
+    border-radius: 10px;
+    padding: 15px 25px 15px 25px;
+    font-weight: bold;
+    font-size: larger;
+}
+
+.btnshuffle:focus {
+    outline: none;
+}

src/pages/RandomPage/RandomPage.js

@@ -1,8 +1,8 @@
 import React from "react";
-import Preview from "../elements/Preview";
-import "../css/RandomPage.css"
-import SideBar from "../elements/SideBar/SideBar";
-import Tag from "../elements/Tag/Tag";
+import Preview from "../../elements/Preview/Preview";
+import "./RandomPage.css"
+import SideBar from "../../elements/SideBar/SideBar";
+import Tag from "../../elements/Tag/Tag";
 
 class RandomPage extends React.Component {
     constructor(props, context) {

src/pages/RandomPage/RandomPage.test.js

@@ -0,0 +1,49 @@
+import {shallow} from "enzyme";
+import React from "react";
+import RandomPage from "./RandomPage";
+
+function prepareFetchApi(response) {
+    const mockJsonPromise = Promise.resolve(response);
+    const mockFetchPromise = Promise.resolve({
+        json: () => mockJsonPromise,
+    });
+    return (jest.fn().mockImplementation(() => mockFetchPromise));
+}
+
+describe('<RandomPage/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<RandomPage/>);
+        wrapper.unmount();
+    });
+
+    it('test shuffleload fetch', function () {
+        global.fetch = prepareFetchApi({});
+
+        const wrapper = shallow(<RandomPage/>);
+
+        expect(global.fetch).toBeCalledTimes(1);
+    });
+
+    it('btnshuffle click test', function () {
+        global.fetch = prepareFetchApi({});
+
+        const wrapper = shallow(<RandomPage/>);
+
+        wrapper.find(".btnshuffle").simulate("click");
+
+        expect(global.fetch).toBeCalledTimes(2);
+    });
+
+    it('test tags in random selection', function () {
+        const wrapper = shallow(<RandomPage/>);
+
+        wrapper.setState({
+            tags: [
+                {tag_name: "test1"},
+                {tag_name: "test2"}
+            ]
+        });
+
+        expect(wrapper.find("Tag")).toHaveLength(2);
+    });
+});

src/pages/SettingsPage/SettingsPage.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "../css/DefaultPage.css"
+import "../../css/DefaultPage.css"
 
 
 class SettingsPage extends React.Component {
@@ -31,7 +31,7 @@ class SettingsPage extends React.Component {
     };
 
     componentDidMount() {
-        if(this.myinterval){
+        if (this.myinterval) {
             clearInterval(this.myinterval);
         }
         this.myinterval = setInterval(this.updateStatus, 1000);
@@ -50,12 +50,12 @@ class SettingsPage extends React.Component {
                     <hr/>
                 </div>
 
-                <button className='btn btn-success' onClick={() => {
+                <button className='reindexbtn btn btn-success' onClick={() => {
                     this.startReindex()
                 }}>Reindex Movies
                 </button>
-                <div>{this.state.text.map(m => (
-                    <div>{m}</div>
+                <div className='indextextarea'>{this.state.text.map(m => (
+                    <div className='textarea-element'>{m}</div>
                 ))}</div>
             </div>
         );
@@ -73,7 +73,7 @@ class SettingsPage extends React.Component {
             .catch(() => {
                 console.log("no connection to backend");
             });
-        if(this.myinterval){
+        if (this.myinterval) {
             clearInterval(this.myinterval);
         }
         this.myinterval = setInterval(this.updateStatus, 1000);

src/pages/SettingsPage/SettingsPage.test.js

@@ -0,0 +1,41 @@
+import {shallow} from "enzyme";
+import React from "react";
+import SettingsPage from "./SettingsPage";
+
+function prepareFetchApi(response) {
+    const mockJsonPromise = Promise.resolve(response);
+    const mockFetchPromise = Promise.resolve({
+        json: () => mockJsonPromise,
+    });
+    return (jest.fn().mockImplementation(() => mockFetchPromise));
+}
+
+describe('<RandomPage/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<SettingsPage/>);
+        wrapper.unmount();
+    });
+
+    it('received text renders into dom', function () {
+        const wrapper = shallow(<SettingsPage/>);
+
+        wrapper.setState({
+            text: [
+                "firstline",
+                "secline"
+            ]
+        });
+
+        expect(wrapper.find(".indextextarea").find(".textarea-element")).toHaveLength(2);
+    });
+
+    it('test simulate reindex', function () {
+        global.fetch = prepareFetchApi({});
+        const wrapper = shallow(<SettingsPage/>);
+
+        wrapper.find(".reindexbtn").simulate("click");
+
+        // initial send of reindex request to server
+        expect(global.fetch).toBeCalledTimes(1);
+    });
+});