build electron app

implement new fetch api calls
use typescript

src/elements/Popups/AddActorPopup/AddActorPopup.js

@@ -3,6 +3,7 @@ import React from 'react';
 import ActorTile from '../../ActorTile/ActorTile';
 import style from './AddActorPopup.module.css';
 import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
+import {callAPI} from '../../../utils/Api';
 
 /**
  * Popup for Adding a new Actor to a Video
@@ -69,33 +70,21 @@ class AddActorPopup extends React.Component {
      */
     tileClickHandler(actorid) {
         // fetch the available actors
-        const req = new FormData();
-        req.append('action', 'addActorToVideo');
-        req.append('actorid', actorid);
-        req.append('videoid', this.props.movie_id);
-
-        fetch('/api/actor.php', {method: 'POST', body: req})
-            .then((response) => response.json()
-                .then((result) => {
-                    if (result.result === 'success') {
-                        // return back to player page
-                        this.props.onHide();
-                    } else {
-                        console.error('an error occured while fetching actors');
-                        console.error(result);
-                    }
-                }));
+        callAPI('actor.php', {action: 'addActorToVideo', actorid: actorid, videoid: this.props.movie_id}, result => {
+            if (result.result === 'success') {
+                // return back to player page
+                this.props.onHide();
+            } else {
+                console.error('an error occured while fetching actors');
+                console.error(result);
+            }
+        });
     }
 
     loadActors() {
-        const req = new FormData();
-        req.append('action', 'getAllActors');
-
-        fetch('/api/actor.php', {method: 'POST', body: req})
-            .then((response) => response.json()
-                .then((result) => {
-                    this.setState({actors: result});
-                }));
+        callAPI('actor.php', {action: 'getAllActors'}, result => {
+            this.setState({actors: result});
+        });
     }
 }
 

src/elements/Popups/AddActorPopup/AddActorPopup.test.js

@@ -1,6 +1,7 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 import AddActorPopup from './AddActorPopup';
+import {callAPI} from '../../../utils/Api';
 
 describe('<AddActorPopup/>', function () {
     it('renders without crashing ', function () {
@@ -8,12 +9,63 @@ describe('<AddActorPopup/>', function () {
         wrapper.unmount();
     });
 
-    // it('simulate change to other page', function () {
-    //     const wrapper = shallow(<AddActorPopup/>);
-    //
-    //     console.log(wrapper.find('PopupBase').dive().debug());
-    //
-    //
-    //     console.log(wrapper.debug());
-    // });
+    it('simulate change to other page', function () {
+        const wrapper = shallow(<AddActorPopup/>);
+
+        expect(wrapper.find('NewActorPopupContent')).toHaveLength(0);
+        wrapper.find('PopupBase').props().banner.props.onClick();
+
+        // check if new content is showing
+        expect(wrapper.find('NewActorPopupContent')).toHaveLength(1);
+    });
+
+    it('hide new actor page', function () {
+        const wrapper = shallow(<AddActorPopup/>);
+        wrapper.find('PopupBase').props().banner.props.onClick();
+
+        // call onhide event listener manually
+        wrapper.find('NewActorPopupContent').props().onHide();
+
+        // expect other page to be hidden again
+        expect(wrapper.find('NewActorPopupContent')).toHaveLength(0);
+    });
+
+    it('test api call and insertion of actor tiles', function () {
+        global.callAPIMock([{id: 1, actorname: 'test'}, {id: 2, actorname: 'test2'}]);
+
+        const wrapper = shallow(<AddActorPopup/>);
+
+        expect(wrapper.find('ActorTile')).toHaveLength(2);
+    });
+
+    it('simulate actortile click', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<AddActorPopup onHide={() => {func()}}/>);
+
+        global.callAPIMock({result: 'success'});
+
+        wrapper.setState({actors: [{id: 1, actorname: 'test'}]}, () => {
+            wrapper.find('ActorTile').props().onClick();
+
+            expect(callAPI).toHaveBeenCalledTimes(1);
+
+            expect(func).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    it('test failing actortile click', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<AddActorPopup onHide={() => {func()}}/>);
+
+        global.callAPIMock({result: 'nosuccess'});
+
+        wrapper.setState({actors: [{id: 1, actorname: 'test'}]}, () => {
+            wrapper.find('ActorTile').props().onClick();
+
+            expect(callAPI).toHaveBeenCalledTimes(1);
+
+            // hide funtion should not have been called on error!
+            expect(func).toHaveBeenCalledTimes(0);
+        });
+    });
 });