Tests for all Components

src/elements/NewTagPopup/NewTagPopup.js

@@ -26,7 +26,9 @@ class NewTagPopup extends React.Component {
                     <Modal.Body>
                         <Form.Group>
                             <Form.Label>Tag Name:</Form.Label>
-                            <Form.Control id='namefield' type="text" placeholder="Enter Tag name" />
+                            <Form.Control id='namefield' type="text" placeholder="Enter Tag name" onChange={(v) => {
+                                this.value = v.target.value
+                            }}/>
                             <Form.Text className="text-muted">
                                 This Tag will automatically show up on category page.
                             </Form.Text>
@@ -46,7 +48,7 @@ class NewTagPopup extends React.Component {
     storeselection() {
         const updateRequest = new FormData();
         updateRequest.append('action', 'createTag');
-        updateRequest.append('tagname', document.getElementById("namefield").value);
+        updateRequest.append('tagname', this.value);
 
         fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json())

src/elements/NewTagPopup/NewTagPopup.test.js

@@ -0,0 +1,41 @@
+import React from "react";
+
+import {shallow} from 'enzyme'
+import "@testing-library/jest-dom"
+import NewTagPopup from "./NewTagPopup";
+
+describe('<NewTagPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<NewTagPopup/>);
+        wrapper.unmount();
+    });
+
+    it('test storeseletion click event', 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(<NewTagPopup/>);
+        wrapper.setProps({
+            onHide: () => {
+                func()
+            }
+        });
+
+        wrapper.find('ModalFooter').find('button').simulate('click');
+        expect(global.fetch).toHaveBeenCalledTimes(1);
+
+        process.nextTick(() => {
+            //callback to close window should have called
+            expect(func).toHaveBeenCalledTimes(1);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+});

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

@@ -1,7 +1,7 @@
 import React from "react";
-import "../css/Preview.css";
-import Player from "../pages/Player";
-import VideoContainer from "./VideoContainer";
+import "./Preview.css";
+import Player from "../../pages/Player/Player";
+import VideoContainer from "../VideoContainer/VideoContainer";
 
 class Preview extends React.Component {
     constructor(props, context) {
@@ -29,18 +29,18 @@ class Preview extends React.Component {
         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
+            .then((response) => response.text()
+                .then((result) => {
+                    this.setState(prevState => ({
+                        ...prevState.previewpicture, previewpicture: result
+                    }));
                 }));
-            });
     }
 
     render() {
         return (
             <div className='videopreview' onClick={() => this.itemClick()}>
-                <div className='previewtitle videopreviewtitle'>{this.state.name}</div>
+                <div className='previewtitle'>{this.state.name}</div>
                 <div className='previewpic'>
                     <img className='previewimage'
                          src={this.state.previewpicture}
@@ -85,7 +85,7 @@ export class TagPreview extends React.Component {
                     this.props.categorybinding(
                         <VideoContainer
                             data={result}
-                            viewbinding={this.props.viewbinding}/>,tag
+                            viewbinding={this.props.viewbinding}/>, tag
                     );
                 }))
             .catch(() => {

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

src/elements/Tag/Tag.js

@@ -12,7 +12,8 @@ class Tag extends React.Component {
     render() {
         // todo onclick events correctlyy
         return (
-            <button className='tagbtn' onClick={this.props.onClick} data-testid="Test-Tag">{this.props.children}</button>
+            <button className='tagbtn' onClick={this.props.onClick}
+                    data-testid="Test-Tag">{this.props.children}</button>
         );
     }
 }

src/elements/VideoContainer/VideoContainer.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Preview from "./Preview";
+import Preview from "../Preview/Preview";
 
 class VideoContainer extends React.Component {
     constructor(props, context) {

src/elements/VideoContainer/VideoContainer.test.js

@@ -0,0 +1,30 @@
+import {shallow} from "enzyme";
+import React from "react";
+import VideoContainer from "./VideoContainer";
+
+describe('<VideoContainer/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<VideoContainer data={[]}/>);
+        wrapper.unmount();
+    });
+
+    it('inserts tiles correctly', () => {
+        const wrapper = shallow(<VideoContainer data={[
+            {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
+        ]}/>);
+        expect(wrapper.find('Preview')).toHaveLength(12);
+    });
+
+    it('inserts tiles correctly if not enough available', () => {
+        const wrapper = shallow(<VideoContainer data={[
+            {}, {}, {}, {}
+        ]}/>);
+        expect(wrapper.find('Preview')).toHaveLength(4);
+    });
+
+    it('no items available', () => {
+        const wrapper = shallow(<VideoContainer data={[]}/>);
+        expect(wrapper.find('Preview')).toHaveLength(0);
+        expect(wrapper.find(".maincontent").text()).toBe("no items to show!");
+    });
+});