Merge branch 'gitlabcineeds' into 'master'

Gitlabcineeds

See merge request lukas/openmediacenter!10
This commit is contained in:
Lukas Heiligenbrunner 2020-08-05 17:55:52 +00:00
commit 72a652f5f3
26 changed files with 155 additions and 195 deletions

View File

@ -4,6 +4,7 @@ stages:
- prepare
- build
- test
- deploy
cache:
paths:
@ -11,6 +12,7 @@ cache:
include:
- template: SAST.gitlab-ci.yml
- template: Code-Quality.gitlab-ci.yml
variables:
SAST_DISABLE_DIND: "true"
@ -28,6 +30,7 @@ build:
expire_in: 7 days
paths:
- build/
needs: ["prepare"]
test:
stage: test
@ -37,6 +40,7 @@ test:
reports:
junit:
- ./junit.xml
needs: ["prepare"]
coverage:
stage: test
@ -46,3 +50,20 @@ coverage:
reports:
cobertura:
- ./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'
- ssh root@192.168.0.42 "cd /var/www/html/ && git fetch origin && git rebase origin/master && exit"

View File

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

View File

@ -2,14 +2,6 @@ import React from 'react';
import App from './App';
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 () {
it('renders without crashing ', function () {
const wrapper = shallow(<App/>);
@ -92,7 +84,7 @@ describe('<App/>', function () {
});
it('test initial fetch from api', done => {
global.fetch = prepareFetchApi({
global.fetch = global.prepareFetchApi({
generalSettingsLoaded: true,
passwordsupport: true,
mediacentername: "testname"

View File

@ -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;
}

View File

@ -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.'/> :

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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 {

View File

@ -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()

View File

@ -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);

View File

@ -1,8 +1,8 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
margin: 0;
-moz-osx-font-smoothing: grayscale;
}
}

View File

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

View File

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

View File

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

View File

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

View File

@ -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) => (

View File

@ -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 {

View File

@ -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/>);

View File

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

View File

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

View File

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

View File

@ -1,13 +1,13 @@
.indextextarea {
margin-top: 15px;
padding: 10px;
overflow-y: scroll;
overflow-x: auto;
min-height: 100px;
max-height: 300px;
width: 50%;
background-color: #c2c2c2;
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 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 () {
it('renders without crashing ', function () {
const wrapper = shallow(<MovieSettings/>);
@ -30,7 +22,7 @@ describe('<MovieSettings/>', function () {
});
it('test simulate reindex', function () {
global.fetch = prepareFetchApi({});
global.fetch = global.prepareFetchApi({});
const wrapper = shallow(<MovieSettings/>);
wrapper.find(".reindexbtn").simulate("click");
@ -40,7 +32,7 @@ describe('<MovieSettings/>', function () {
});
it('content available received and in state', done => {
global.fetch = prepareFetchApi({
global.fetch = global.prepareFetchApi({
contentAvailable: true,
message: "firstline\nsecondline"
});

View File

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

View File

@ -2,14 +2,6 @@ import {shallow} from "enzyme";
import React from "react";
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 () {
it('renders without crashing ', function () {
const wrapper = shallow(<SettingsPage/>);

View File

@ -8,3 +8,16 @@ import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
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));
}