correct sort order of css properties

mocking of fetch api only once in setupTests

src/elements/PageTitle/PageTitle.module.css

@@ -1,6 +1,6 @@
 .pageheader {
-    margin-top: 20px;
     margin-bottom: 20px;
+    margin-top: 20px;
     padding-left: 22%;
     padding-right: 12%;
 }
@@ -11,7 +11,7 @@
 }
 
 .pageheadersubtitle {
-    margin-left: 20px;
     font-size: 23pt;
+    margin-left: 20px;
     opacity: 0.6;
 }

src/elements/Preview/Preview.js

@@ -37,7 +37,7 @@ class Preview extends React.Component {
             <div className={style.videopreview} onClick={() => this.itemClick()}>
                 <div className={style.previewtitle}>{this.state.name}</div>
                 <div className={style.previewpic}>
-                    {this.state.previewpicture != null ?
+                    {this.state.previewpicture !== null ?
                         <img className={style.previewimage}
                              src={this.state.previewpicture}
                              alt='Pic loading.'/> :

src/elements/Preview/Preview.module.css

@@ -1,16 +1,16 @@
 .previewtitle {
-    height: 20px;
     color: #3d3d3d;
-    text-align: center;
-    font-weight: bold;
-    max-width: 266px;
     font-size: smaller;
+    font-weight: bold;
+    height: 20px;
+    max-width: 266px;
+    text-align: center;
 }
 
 .previewpic {
-    min-width: 266px;
-    min-height: 150px;
     height: 80%;
+    min-height: 150px;
+    min-width: 266px;
     overflow: hidden;
     text-align: center;
 }
@@ -18,14 +18,14 @@
 .loadAnimation {
     display: inline-block;
     line-height: 150px;
-    vertical-align: center;
+    vertical-align: middle;
 }
 
 .previewimage {
-    min-height: 150px;
     max-height: 400px;
-    min-width: 266px;
     max-width: 410px;
+    min-height: 150px;
+    min-width: 266px;
 }
 
 .previewbottom {
@@ -33,28 +33,28 @@
 }
 
 .videopreview {
+    background-color: #a8c3ff;
+    border-radius: 20px;
+    cursor: pointer;
+    /*background-color: #7F7F7F;*/
     float: left;
     margin-left: 25px;
     margin-top: 25px;
-    /*background-color: #7F7F7F;*/
-    background-color: #a8c3ff;
-    cursor: pointer;
     opacity: 0.85;
-    border-radius: 20px;
 }
 
 .videopreview:hover {
+    box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
     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;
+    font-weight: bolder;
     height: 150px;
+    text-align: center;
+    text-transform: uppercase;
     width: 266px;
 }
 

src/elements/SideBar/SideBar.module.css

@@ -1,24 +1,24 @@
 .sideinfo {
-    width: 20%;
-    float: left;
-    padding: 20px;
-    margin-top: 25px;
-    margin-left: 15px;
     background-color: #b4c7fe;
-    border-radius: 20px;
     border: 2px #3574fe solid;
+    border-radius: 20px;
+    float: left;
+    margin-left: 15px;
+    margin-top: 25px;
     overflow: hidden;
+    padding: 20px;
+    width: 20%;
 }
 
 .sidebartitle {
-    font-weight: bold;
     font-size: larger;
+    font-weight: bold;
 }
 
 .sidebarinfo {
-    margin-top: 5px;
     background-color: #8ca3fc;
     border-radius: 5px;
+    margin-top: 5px;
     padding: 2px 10px 2px 15px;
     width: 220px;
 }

src/elements/Tag/Tag.module.css

@@ -1,12 +1,12 @@
 .tagbtn {
-    color: white;
-    margin: 10px;
     background-color: #3574fe;
     border: none;
     border-radius: 10px;
-    padding: 5px 15px 5px 15px;
-    /*font-weight: bold;*/
+    color: white;
     display: block;
+    margin: 10px;
+    /*font-weight: bold;*/
+    padding: 5px 15px 5px 15px;
 }
 
 .tagbtn:focus {

src/elements/Tag/Tag.test.js

@@ -5,14 +5,6 @@ import "@testing-library/jest-dom"
 import {shallow} from 'enzyme'
 
 describe('<Tag/>', function () {
-    function prepareFetchApi(response) {
-        const mockJsonPromise = Promise.resolve(response);
-        const mockFetchPromise = Promise.resolve({
-            json: () => mockJsonPromise,
-        });
-        return (jest.fn().mockImplementation(() => mockFetchPromise));
-    }
-
     it('renders without crashing ', function () {
         const wrapper = shallow(<Tag>test</Tag>);
         wrapper.unmount();
@@ -24,7 +16,7 @@ describe('<Tag/>', function () {
     });
 
     it('click event triggered and setvideo callback called', function () {
-        global.fetch = prepareFetchApi({});
+        global.fetch = global.prepareFetchApi({});
         const func = jest.fn();
         const elem = {
             changeRootElement: () => func()

src/elements/VideoContainer/VideoContainer.js

@@ -3,6 +3,9 @@ import Preview from "../Preview/Preview";
 import style from "./VideoContainer.module.css"
 
 class VideoContainer extends React.Component {
+    // stores current index of loaded elements
+    loadindex = 0;
+
     constructor(props, context) {
         super(props, context);
 
@@ -14,9 +17,6 @@ class VideoContainer extends React.Component {
         };
     }
 
-    // stores current index of loaded elements
-    loadindex = 0;
-
     componentDidMount() {
         document.addEventListener('scroll', this.trackScrolling);