correct sort order of css properties

mocking of fetch api only once in setupTests

src/pages/Player/Player.js

@@ -1,28 +1,13 @@
 import React from "react";
 import style from "./Player.module.css"
 import {PlyrComponent} from 'plyr-react';
-import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
+import SideBar, {SideBarItem, SideBarTitle} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
 import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
 import PageTitle from "../../elements/PageTitle/PageTitle";
 
 
 class Player extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-
-        this.state = {
-            sources: null,
-            movie_id: null,
-            movie_name: null,
-            likes: null,
-            quality: null,
-            length: null,
-            tags: [],
-            popupvisible: false
-        };
-    }
-
     options = {
         controls: [
             'play-large', // The large play button in the center
@@ -40,6 +25,21 @@ class Player extends React.Component {
         ]
     };
 
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            sources: null,
+            movie_id: null,
+            movie_name: null,
+            likes: null,
+            quality: null,
+            length: null,
+            tags: [],
+            popupvisible: false
+        };
+    }
+
     componentDidMount() {
         this.fetchMovieData();
     }
@@ -58,7 +58,8 @@ class Player extends React.Component {
                     {this.state.quality !== 0 ?
                         <SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
                     {this.state.length !== 0 ?
-                        <SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem>: null}
+                        <SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of
+                            length!</SideBarItem> : null}
                     <hr/>
                     <SideBarTitle>Tags:</SideBarTitle>
                     {this.state.tags.map((m) => (

src/pages/Player/Player.module.css

@@ -1,19 +1,19 @@
 .closebutton {
-    color: white;
+    background-color: #FF0000;
     border: none;
     border-radius: 10px;
-    padding: 5px 15px 5px 15px;
-    background-color: #FF0000;
-    margin-top: 25px;
+    color: white;
     margin-left: 25px;
+    margin-top: 25px;
+    padding: 5px 15px 5px 15px;
 }
 
 .videowrapper {
-    margin-left: 20px;
     display: block;
     float: left;
-    width: 60%;
+    margin-left: 20px;
     margin-top: 25px;
+    width: 60%;
 }
 
 .videoactions {

src/pages/Player/Player.test.js

@@ -2,14 +2,6 @@ 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/>);
@@ -32,7 +24,7 @@ describe('<Player/>', function () {
     });
 
     it('likebtn click', done => {
-        global.fetch = prepareFetchApi({result: 'success'});
+        global.fetch = global.prepareFetchApi({result: 'success'});
 
         const func = jest.fn();
 
@@ -59,7 +51,7 @@ describe('<Player/>', function () {
     });
 
     it('errored likebtn click', done => {
-        global.fetch = prepareFetchApi({result: 'nosuccess'});
+        global.fetch = global.prepareFetchApi({result: 'nosuccess'});
         const func = jest.fn();
 
         const wrapper = shallow(<Player/>);