Tests for all Components

src/elements/Preview/Preview.css

@@ -0,0 +1,54 @@
+.previewtitle {
+    height: 20px;
+    color: #3d3d3d;
+    text-align: center;
+    font-weight: bold;
+    max-width: 266px;
+    font-size: smaller;
+}
+
+.previewpic {
+    height: 80%;
+    overflow: hidden;
+}
+
+.previewimage {
+    min-height: 150px;
+    max-height: 400px;
+    min-width: 266px;
+    max-width: 410px;
+}
+
+.previewbottom {
+    height: 20px;
+}
+
+.videopreview {
+    float: left;
+    margin-left: 25px;
+    margin-top: 25px;
+    /*background-color: #7F7F7F;*/
+    background-color: #a8c3ff;
+    cursor: pointer;
+    opacity: 0.85;
+    border-radius: 20px;
+}
+
+.videopreview:hover {
+    opacity: 1;
+    box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px;
+    transition: all 300ms;
+}
+
+.tagpreview {
+    text-transform: uppercase;
+    font-weight: bolder;
+    font-size: x-large;
+    text-align: center;
+    height: 150px;
+    width: 266px;
+}
+
+.tagpreviewtitle {
+    margin-top: 55px;
+}

src/elements/Preview/Preview.js

@@ -0,0 +1,112 @@
+import React from "react";
+import "./Preview.css";
+import Player from "../../pages/Player/Player";
+import VideoContainer from "../VideoContainer/VideoContainer";
+
+class Preview extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.props = props;
+
+        this.state = {
+            previewpicture: null,
+            name: null
+        };
+    }
+
+    componentWillUnmount() {
+        this.setState({});
+    }
+
+    componentDidMount() {
+        this.setState({
+            previewpicture: null,
+            name: this.props.name
+        });
+
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'readThumbnail');
+        updateRequest.append('movieid', this.props.movie_id);
+
+        fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.text()
+                .then((result) => {
+                    this.setState(prevState => ({
+                        ...prevState.previewpicture, previewpicture: result
+                    }));
+                }));
+    }
+
+    render() {
+        return (
+            <div className='videopreview' onClick={() => this.itemClick()}>
+                <div className='previewtitle'>{this.state.name}</div>
+                <div className='previewpic'>
+                    <img className='previewimage'
+                         src={this.state.previewpicture}
+                         alt='Pic loading.'/>
+                </div>
+                <div className='previewbottom'>
+
+                </div>
+            </div>
+        );
+    }
+
+    itemClick() {
+        console.log("item clicked!" + this.state.name);
+
+        this.props.viewbinding.showVideo(<Player
+            viewbinding={this.props.viewbinding}
+            movie_id={this.props.movie_id}/>);
+    }
+}
+
+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()}>
+                <div className='tagpreviewtitle'>
+                    {this.props.name}
+                </div>
+            </div>
+        );
+    }
+
+    itemClick() {
+        this.fetchVideoData(this.props.name);
+    }
+}
+
+export default Preview;

src/elements/Preview/Previw.test.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import {shallow} from 'enzyme'
+
+import Preview, {TagPreview} from "./Preview";
+
+describe('<Preview/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<Preview/>);
+        wrapper.unmount();
+    });
+
+    // check if preview title renders correctly
+    it('renders title', () => {
+        const wrapper = shallow(<Preview name='test'/>);
+        expect(wrapper.find('.previewtitle').text()).toBe('test');
+    });
+
+
+    it('click event triggered', () => {
+        const func = jest.fn();
+
+        const wrapper = shallow(<Preview/>);
+        wrapper.setProps({
+            viewbinding: {
+                showVideo: () => {
+                    func()
+                }
+            }
+        });
+
+        wrapper.find('.videopreview').simulate('click');
+
+        //callback to open player should have called
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+
+    it('picture rendered correctly', done => {
+        const mockSuccessResponse = 'testsrc';
+        const mockJsonPromise = Promise.resolve(mockSuccessResponse);
+        const mockFetchPromise = Promise.resolve({
+            text: () => mockJsonPromise,
+        });
+        global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
+
+        const wrapper = shallow(<Preview/>);
+
+        // now called 1 times
+        expect(global.fetch).toHaveBeenCalledTimes(1);
+
+        process.nextTick(() => {
+            // received picture should be rendered into wrapper
+            expect(wrapper.find(".previewimage").props().src).not.toBeNull();
+
+            global.fetch.mockClear();
+            done();
+        });
+
+    });
+});
+
+describe('<TagPreview/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<TagPreview/>);
+        wrapper.unmount();
+    });
+
+    // check if preview title renders correctly
+    it('renders title', () => {
+        const wrapper = shallow(<TagPreview name='test'/>);
+        expect(wrapper.find('.tagpreviewtitle').text()).toBe('test');
+    });
+
+
+    it('click event triggered', done => {
+        const mockSuccessResponse = {};
+        const mockJsonPromise = Promise.resolve(mockSuccessResponse);
+        const mockFetchPromise = Promise.resolve({
+            json: () => mockJsonPromise,
+        });
+        global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
+
+        const func = jest.fn();
+
+        const wrapper = shallow(<TagPreview/>);
+        wrapper.setProps({
+            categorybinding: () => {
+                func()
+            }
+        });
+
+        // first call of fetch is getting of available tags
+        expect(global.fetch).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();
+        });
+    });
+});
+