Tests for all Components

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

@@ -0,0 +1,77 @@
+import React from "react";
+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) {
+        super(props, context);
+
+        this.state = {
+            videos: [],
+            tags: []
+        };
+    }
+
+    componentDidMount() {
+        this.loadShuffledvideos(4);
+    }
+
+    render() {
+        return (
+            <div>
+                <div className='pageheader'>
+                    <span className='pageheadertitle'>Random Videos</span>
+                    <span className='pageheadersubtitle'>4pc</span>
+                    <hr/>
+                </div>
+                <SideBar>
+                    <div className='sidebartitle'>Visible Tags:</div>
+                    {this.state.tags.map((m) => (
+                        <Tag>{m.tag_name}</Tag>
+                    ))}
+                </SideBar>
+
+                <div className='maincontent'>
+                    {this.state.videos.map(elem => (
+                        <Preview
+                            key={elem.movie_id}
+                            name={elem.movie_name}
+                            movie_id={elem.movie_id}
+                            viewbinding={this.props.viewbinding}/>
+                    ))}
+                    <div className='Shufflebutton'>
+                        <button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    shuffleclick() {
+        this.loadShuffledvideos(4);
+    }
+
+    loadShuffledvideos(nr) {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getRandomMovies');
+        updateRequest.append('number', nr);
+
+        // fetch all videos available
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    console.log(result);
+                    this.setState({
+                        videos: result.rows,
+                        tags: result.tags
+                    });
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    }
+}
+
+export default RandomPage;

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