Merge branch 'master' into csstheming

# Conflicts:
#	src/elements/PageTitle/PageTitle.module.css
#	src/elements/Preview/Preview.module.css
#	src/elements/SideBar/SideBar.module.css
#	src/index.css
#	src/pages/Player/Player.js
#	src/pages/Player/Player.module.css
#	src/pages/SettingsPage/SettingsPage.module.css
This commit is contained in:
Lukas Heiligenbrunner 2020-08-05 22:55:03 +02:00
commit e14d485a07
24 changed files with 147 additions and 185 deletions

View File

@ -4,6 +4,7 @@ stages:
- prepare - prepare
- build - build
- test - test
- deploy
cache: cache:
paths: paths:
@ -11,6 +12,7 @@ cache:
include: include:
- template: SAST.gitlab-ci.yml - template: SAST.gitlab-ci.yml
- template: Code-Quality.gitlab-ci.yml
variables: variables:
SAST_DISABLE_DIND: "true" SAST_DISABLE_DIND: "true"
@ -28,6 +30,7 @@ build:
expire_in: 7 days expire_in: 7 days
paths: paths:
- build/ - build/
needs: ["prepare"]
test: test:
stage: test stage: test
@ -37,6 +40,7 @@ test:
reports: reports:
junit: junit:
- ./junit.xml - ./junit.xml
needs: ["prepare"]
coverage: coverage:
stage: test stage: test
@ -46,3 +50,21 @@ coverage:
reports: reports:
cobertura: cobertura:
- ./coverage/cobertura-coverage.xml - ./coverage/cobertura-coverage.xml
needs: ["prepare"]
deploy_test1:
stage: deploy
image: luki42/alpineopenssh:latest
needs:
- test
- build
only:
- master
script:
- eval $(ssh-agent -s)
- ssh-add <(echo "$SSH_PRIVATE_KEY")
- mkdir -p ~/.ssh
- '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
- scp -r build/* root@192.168.0.42:/var/www/html/
- scp -r api/ root@192.168.0.42:/var/www/html/

View File

@ -11,6 +11,8 @@ import SettingsPage from "./pages/SettingsPage/SettingsPage";
import CategoryPage from "./pages/CategoryPage/CategoryPage"; import CategoryPage from "./pages/CategoryPage/CategoryPage";
class App extends React.Component { class App extends React.Component {
newElement = null;
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.state = { this.state = {
@ -45,8 +47,6 @@ class App extends React.Component {
})); }));
} }
newElement = null;
constructViewBinding() { constructViewBinding() {
return { return {
changeRootElement: this.changeRootElement, changeRootElement: this.changeRootElement,

View File

@ -2,14 +2,6 @@ import React from 'react';
import App from './App'; import App from './App';
import {shallow} from 'enzyme' import {shallow} from 'enzyme'
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<App/>', function () { describe('<App/>', function () {
it('renders without crashing ', function () { it('renders without crashing ', function () {
const wrapper = shallow(<App/>); const wrapper = shallow(<App/>);
@ -92,7 +84,7 @@ describe('<App/>', function () {
}); });
it('test initial fetch from api', done => { it('test initial fetch from api', done => {
global.fetch = prepareFetchApi({ global.fetch = global.prepareFetchApi({
generalSettingsLoaded: true, generalSettingsLoaded: true,
passwordsupport: true, passwordsupport: true,
mediacentername: "testname" mediacentername: "testname"

View File

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

View File

@ -1,15 +1,17 @@
.previewtitle { .previewtitle {
height: 20px; height: 20px;
text-align: center; text-align: center;
font-weight: bold;
max-width: 266px;
font-size: smaller; font-size: smaller;
font-weight: bold;
height: 20px;
max-width: 266px;
text-align: center;
} }
.previewpic { .previewpic {
min-width: 266px;
min-height: 150px;
height: 80%; height: 80%;
min-height: 150px;
min-width: 266px;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
} }
@ -17,14 +19,14 @@
.loadAnimation { .loadAnimation {
display: inline-block; display: inline-block;
line-height: 150px; line-height: 150px;
vertical-align: center; vertical-align: middle;
} }
.previewimage { .previewimage {
min-height: 150px;
max-height: 400px; max-height: 400px;
min-width: 266px;
max-width: 410px; max-width: 410px;
min-height: 150px;
min-width: 266px;
} }
.previewbottom { .previewbottom {
@ -32,12 +34,12 @@
} }
.videopreview { .videopreview {
border-radius: 20px;
cursor: pointer;
float: left; float: left;
margin-left: 25px; margin-left: 25px;
margin-top: 25px; margin-top: 25px;
cursor: pointer;
opacity: 0.85; opacity: 0.85;
border-radius: 20px;
} }
.videopreview:hover { .videopreview:hover {
@ -46,11 +48,11 @@
} }
.tagpreview { .tagpreview {
text-transform: uppercase;
font-weight: bolder;
font-size: x-large; font-size: x-large;
text-align: center; font-weight: bolder;
height: 150px; height: 150px;
text-align: center;
text-transform: uppercase;
width: 266px; width: 266px;
} }

View File

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

View File

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

View File

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

View File

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

View File

@ -2,14 +2,6 @@ import {mount, shallow} from "enzyme";
import React from "react"; import React from "react";
import CategoryPage from "./CategoryPage"; import CategoryPage from "./CategoryPage";
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<CategoryPage/>', function () { describe('<CategoryPage/>', function () {
it('renders without crashing ', function () { it('renders without crashing ', function () {
const wrapper = shallow(<CategoryPage/>); const wrapper = shallow(<CategoryPage/>);
@ -17,7 +9,7 @@ describe('<CategoryPage/>', function () {
}); });
it('test tag fetch call', done => { it('test tag fetch call', done => {
global.fetch = prepareFetchApi(["first", "second"]); global.fetch = global.prepareFetchApi(["first", "second"]);
const wrapper = shallow(<CategoryPage/>); const wrapper = shallow(<CategoryPage/>);
@ -33,14 +25,14 @@ describe('<CategoryPage/>', function () {
}); });
it('test errored fetch call', done => { it('test errored fetch call', done => {
global.fetch = prepareFetchApi({}); global.fetch = global.prepareFetchApi({});
let message; let message;
global.console.log = jest.fn((m) => { global.console.log = jest.fn((m) => {
message = m; message = m;
}); });
const wrapper = shallow(<CategoryPage/>); shallow(<CategoryPage/>);
expect(global.fetch).toHaveBeenCalledTimes(1); expect(global.fetch).toHaveBeenCalledTimes(1);
@ -67,7 +59,7 @@ describe('<CategoryPage/>', function () {
}); });
it('test setpage callback', done => { it('test setpage callback', done => {
global.fetch = prepareFetchApi([{}, {}]); global.fetch = global.prepareFetchApi([{}, {}]);
const wrapper = mount(<CategoryPage/>); const wrapper = mount(<CategoryPage/>);
@ -106,7 +98,7 @@ describe('<CategoryPage/>', function () {
const func = jest.fn(); const func = jest.fn();
CategoryPage.prototype.fetchVideoData = func; CategoryPage.prototype.fetchVideoData = func;
const wrapper = shallow(<CategoryPage category="fullhd"/>); shallow(<CategoryPage category="fullhd"/>);
expect(func).toBeCalledTimes(1); expect(func).toBeCalledTimes(1);
}); });

View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar"; import SideBar, {SideBarItem, SideBarTitle} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag"; import Tag from "../../elements/Tag/Tag";
import VideoContainer from "../../elements/VideoContainer/VideoContainer"; import VideoContainer from "../../elements/VideoContainer/VideoContainer";
@ -7,6 +7,9 @@ import style from "./HomePage.module.css"
import PageTitle, {Line} from "../../elements/PageTitle/PageTitle"; import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
class HomePage extends React.Component { class HomePage extends React.Component {
/** keyword variable needed temporary store search keyword */
keyword = "";
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
@ -24,9 +27,6 @@ class HomePage extends React.Component {
}; };
} }
/** keyword variable needed temporary store search keyword */
keyword = "";
componentDidMount() { componentDidMount() {
// initial get of all videos // initial get of all videos
this.fetchVideoData("all"); this.fetchVideoData("all");

View File

@ -4,6 +4,6 @@
} }
.searchform { .searchform {
margin-top: 25px;
float: right; float: right;
margin-top: 25px;
} }

View File

@ -3,19 +3,6 @@ import React from "react";
import HomePage from "./HomePage"; import HomePage from "./HomePage";
import VideoContainer from "../../elements/VideoContainer/VideoContainer"; import VideoContainer from "../../elements/VideoContainer/VideoContainer";
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
function prepareFailingFetchApi() {
const mockFetchPromise = Promise.reject("myreason");
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<HomePage/>', function () { describe('<HomePage/>', function () {
it('renders without crashing ', function () { it('renders without crashing ', function () {
const wrapper = shallow(<HomePage/>); const wrapper = shallow(<HomePage/>);
@ -51,7 +38,7 @@ describe('<HomePage/>', function () {
}); });
it('test search field', done => { it('test search field', done => {
global.fetch = prepareFetchApi([{}, {}]); global.fetch = global.prepareFetchApi([{}, {}]);
const wrapper = shallow(<HomePage/>); const wrapper = shallow(<HomePage/>);
@ -68,7 +55,7 @@ describe('<HomePage/>', function () {
}); });
it('test form submit', done => { it('test form submit', done => {
global.fetch = prepareFetchApi([{}, {}]); global.fetch = global.prepareFetchApi([{}, {}]);
const wrapper = shallow(<HomePage/>); const wrapper = shallow(<HomePage/>);
@ -88,14 +75,14 @@ describe('<HomePage/>', function () {
it('test no backend connection behaviour', done => { it('test no backend connection behaviour', done => {
// this test assumes a console.log within every connection fail // this test assumes a console.log within every connection fail
global.fetch = prepareFailingFetchApi(); global.fetch = global.prepareFailingFetchApi();
let count = 0; let count = 0;
global.console.log = jest.fn((m) => { global.console.log = jest.fn(() => {
count++; count++;
}); });
const wrapper = shallow(<HomePage/>); shallow(<HomePage/>);
process.nextTick(() => { process.nextTick(() => {
// state to be set correctly with response // state to be set correctly with response

View File

@ -2,28 +2,13 @@ import React from "react";
import style from "./Player.module.css" import style from "./Player.module.css"
import {PlyrComponent} from 'plyr-react'; 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 Tag from "../../elements/Tag/Tag";
import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup"; import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
import PageTitle, {Line} from "../../elements/PageTitle/PageTitle"; import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
class Player extends React.Component { 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 = { options = {
controls: [ controls: [
'play-large', // The large play button in the center 'play-large', // The large play button in the center
@ -41,6 +26,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() { componentDidMount() {
this.fetchMovieData(); this.fetchMovieData();
} }

View File

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

View File

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

View File

@ -1,19 +1,19 @@
.Shufflebutton { .Shufflebutton {
width: 100%;
align-content: center; align-content: center;
width: 100%;
} }
.btnshuffle { .btnshuffle {
background-color: #39a945; background-color: #39a945;
color: white;
margin-top: 20px;
margin-left: 45%;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
padding: 15px 25px 15px 25px; color: white;
font-weight: bold;
font-size: larger; font-size: larger;
font-weight: bold;
margin-left: 45%;
margin-top: 20px;
padding: 15px 25px 15px 25px;
} }
.btnshuffle:focus { .btnshuffle:focus {

View File

@ -2,14 +2,6 @@ import {shallow} from "enzyme";
import React from "react"; import React from "react";
import RandomPage from "./RandomPage"; import RandomPage from "./RandomPage";
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<RandomPage/>', function () { describe('<RandomPage/>', function () {
it('renders without crashing ', function () { it('renders without crashing ', function () {
const wrapper = shallow(<RandomPage/>); const wrapper = shallow(<RandomPage/>);
@ -17,22 +9,24 @@ describe('<RandomPage/>', function () {
}); });
it('test shuffleload fetch', function () { it('test shuffleload fetch', function () {
global.fetch = prepareFetchApi({}); global.fetch = global.prepareFetchApi({});
const wrapper = shallow(<RandomPage/>); shallow(<RandomPage/>);
expect(global.fetch).toBeCalledTimes(1); expect(global.fetch).toBeCalledTimes(1);
}); });
it('btnshuffle click test', function () { it('btnshuffle click test', function () {
global.fetch = prepareFetchApi({}); global.fetch = global.prepareFetchApi({});
const wrapper = shallow(<RandomPage/>); const wrapper = shallow(<RandomPage/>);
// simulate at least one existing element // simulate at least one existing element
wrapper.setState({videos: [ wrapper.setState({
videos: [
{} {}
]}); ]
});
wrapper.find(".btnshuffle").simulate("click"); wrapper.find(".btnshuffle").simulate("click");

View File

@ -3,14 +3,6 @@ import React from "react";
import GeneralSettings from "./GeneralSettings"; import GeneralSettings from "./GeneralSettings";
import GlobalInfos from "../../GlobalInfos"; import GlobalInfos from "../../GlobalInfos";
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<GeneralSettings/>', function () { describe('<GeneralSettings/>', function () {
it('renders without crashing ', function () { it('renders without crashing ', function () {
const wrapper = shallow(<GeneralSettings/>); const wrapper = shallow(<GeneralSettings/>);
@ -38,7 +30,7 @@ describe('<GeneralSettings/>', function () {
it('test savesettings', done => { it('test savesettings', done => {
const wrapper = shallow(<GeneralSettings/>); const wrapper = shallow(<GeneralSettings/>);
global.fetch = prepareFetchApi({success: true}); global.fetch = global.prepareFetchApi({success: true});
expect(global.fetch).toBeCalledTimes(0); expect(global.fetch).toBeCalledTimes(0);
const fakeEvent = {preventDefault: () => console.log('preventDefault')}; const fakeEvent = {preventDefault: () => console.log('preventDefault')};
@ -56,7 +48,7 @@ describe('<GeneralSettings/>', function () {
it('test failing savesettings', done => { it('test failing savesettings', done => {
const wrapper = shallow(<GeneralSettings/>); const wrapper = shallow(<GeneralSettings/>);
global.fetch = prepareFetchApi({success: false}); global.fetch = global.prepareFetchApi({success: false});
expect(global.fetch).toBeCalledTimes(0); expect(global.fetch).toBeCalledTimes(0);
const fakeEvent = {preventDefault: () => console.log('preventDefault')}; const fakeEvent = {preventDefault: () => console.log('preventDefault')};

View File

@ -1,13 +1,13 @@
.indextextarea { .indextextarea {
margin-top: 15px;
padding: 10px;
overflow-y: scroll;
overflow-x: auto;
min-height: 100px;
max-height: 300px;
width: 50%;
background-color: #c2c2c2; background-color: #c2c2c2;
border-radius: 5px; border-radius: 5px;
margin-top: 15px;
max-height: 300px;
min-height: 100px;
overflow-x: auto;
overflow-y: scroll;
padding: 10px;
width: 50%;
} }

View File

@ -2,14 +2,6 @@ import {shallow} from "enzyme";
import React from "react"; import React from "react";
import MovieSettings from "./MovieSettings"; import MovieSettings from "./MovieSettings";
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<MovieSettings/>', function () { describe('<MovieSettings/>', function () {
it('renders without crashing ', function () { it('renders without crashing ', function () {
const wrapper = shallow(<MovieSettings/>); const wrapper = shallow(<MovieSettings/>);
@ -30,7 +22,7 @@ describe('<MovieSettings/>', function () {
}); });
it('test simulate reindex', function () { it('test simulate reindex', function () {
global.fetch = prepareFetchApi({}); global.fetch = global.prepareFetchApi({});
const wrapper = shallow(<MovieSettings/>); const wrapper = shallow(<MovieSettings/>);
wrapper.find(".reindexbtn").simulate("click"); wrapper.find(".reindexbtn").simulate("click");
@ -40,7 +32,7 @@ describe('<MovieSettings/>', function () {
}); });
it('content available received and in state', done => { it('content available received and in state', done => {
global.fetch = prepareFetchApi({ global.fetch = global.prepareFetchApi({
contentAvailable: true, contentAvailable: true,
message: "firstline\nsecondline" message: "firstline\nsecondline"
}); });

View File

@ -1,42 +1,41 @@
.SettingsSidebar { .SettingsSidebar {
padding-top: 20px; border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
float: left; float: left;
width: 10%;
min-height: calc(100vh - 62px); min-height: calc(100vh - 62px);
min-width: 110px; min-width: 110px;
padding-top: 20px;
border-top-right-radius: 10px; width: 10%;
border-bottom-right-radius: 10px;
} }
.SettingsSidebarTitle { .SettingsSidebarTitle {
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: larger; font-size: larger;
font-weight: bold;
margin-bottom: 25px; margin-bottom: 25px;
text-align: center;
text-transform: uppercase;
} }
.SettingsContent { .SettingsContent {
float: left; float: left;
width: 80%;
padding-left: 30px; padding-left: 30px;
padding-top: 30px; padding-top: 30px;
width: 80%;
} }
.SettingSidebarElement { .SettingSidebarElement {
background-color: #919fd9;
border-radius: 7px;
font-weight: bold;
margin: 10px 5px 5px; margin: 10px 5px 5px;
padding: 5px; padding: 5px;
background-color: #919fd9;
text-align: center; text-align: center;
font-weight: bold;
border-radius: 7px;
} }
.SettingSidebarElement:hover { .SettingSidebarElement:hover {
font-weight: bolder;
background-color: #7d8dd4; background-color: #7d8dd4;
box-shadow: #7d8dd4 0 0 0 5px; box-shadow: #7d8dd4 0 0 0 5px;
transition: all 300ms;
cursor: pointer; cursor: pointer;
font-weight: bolder;
transition: all 300ms;
} }

View File

@ -2,14 +2,6 @@ import {shallow} from "enzyme";
import React from "react"; import React from "react";
import SettingsPage from "./SettingsPage"; import SettingsPage from "./SettingsPage";
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<RandomPage/>', function () { describe('<RandomPage/>', function () {
it('renders without crashing ', function () { it('renders without crashing ', function () {
const wrapper = shallow(<SettingsPage/>); const wrapper = shallow(<SettingsPage/>);

View File

@ -8,3 +8,16 @@ import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'; import Adapter from 'enzyme-adapter-react-16';
configure({adapter: new Adapter()}); configure({adapter: new Adapter()});
global.prepareFetchApi = (response) => {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
global.prepareFailingFetchApi = () => {
const mockFetchPromise = Promise.reject("myreason");
return (jest.fn().mockImplementation(() => mockFetchPromise));
}