lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'tests' into 'master'

Browse Source 
Tests

See merge request lukas/openmediacenter!3
This commit is contained in:
Lukas Heiligenbrunner 2020-06-12 15:57:31 +00:00
commit 8eb62e6b48
27 changed files with 639 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.js
View File

@ -1,12 +1,12 @@
import React from 'react';
import "./css/App.css"
import HomePage from "./pages/HomePage";
import RandomPage from "./pages/RandomPage";
import HomePage from "./pages/HomePage/HomePage";
import RandomPage from "./pages/RandomPage/RandomPage";
// include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css';
import SettingsPage from "./pages/SettingsPage";
import CategoryPage from "./pages/CategoryPage";
import SettingsPage from "./pages/SettingsPage/SettingsPage";
import CategoryPage from "./pages/CategoryPage/CategoryPage";
class App extends React.Component {
constructor(props, context) {

24
src/App.test.js
View File

@ -3,18 +3,18 @@ import App from './App';
import {shallow} from 'enzyme'
describe('<App/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<App/>);
wrapper.unmount();
});
it('renders without crashing ', function () {
const wrapper = shallow(<App/>);
wrapper.unmount();
});
it('renders title', () => {
const wrapper = shallow(<App/>);
expect(wrapper.find('.navbar-brand').text()).toBe('OpenMediaCenter');
});
it('renders title', () => {
const wrapper = shallow(<App/>);
expect(wrapper.find('.navbar-brand').text()).toBe('OpenMediaCenter');
});
it('are navlinks correct', function () {
const wrapper = shallow(<App/>);
expect(wrapper.find('nav').find('li')).toHaveLength(4);
});
it('are navlinks correct', function () {
const wrapper = shallow(<App/>);
expect(wrapper.find('nav').find('li')).toHaveLength(4);
});
});

7
src/css/index.css
View File

@ -5,9 +5,4 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
}

6
src/elements/NewTagPopup.js → src/elements/NewTagPopup/NewTagPopup.js
View File

@ -26,7 +26,9 @@ class NewTagPopup extends React.Component {
<Modal.Body>
<Form.Group>
<Form.Label>Tag Name:</Form.Label>
<Form.Control id='namefield' type="text" placeholder="Enter Tag name" />
<Form.Control id='namefield' type="text" placeholder="Enter Tag name" onChange={(v) => {
this.value = v.target.value
}}/>
<Form.Text className="text-muted">
This Tag will automatically show up on category page.
</Form.Text>
@ -46,7 +48,7 @@ class NewTagPopup extends React.Component {
storeselection() {
const updateRequest = new FormData();
updateRequest.append('action', 'createTag');
updateRequest.append('tagname', document.getElementById("namefield").value);
updateRequest.append('tagname', this.value);
fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())

41
src/elements/NewTagPopup/NewTagPopup.test.js Normal file
View File

@ -0,0 +1,41 @@
import React from "react";
import {shallow} from 'enzyme'
import "@testing-library/jest-dom"
import NewTagPopup from "./NewTagPopup";
describe('<NewTagPopup/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<NewTagPopup/>);
wrapper.unmount();
});
it('test storeseletion click event', done => {
const mockSuccessResponse = {};
const mockJsonPromise = Promise.resolve(mockSuccessResponse);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
const func = jest.fn();
const wrapper = shallow(<NewTagPopup/>);
wrapper.setProps({
onHide: () => {
func()
}
});
wrapper.find('ModalFooter').find('button').simulate('click');
expect(global.fetch).toHaveBeenCalledTimes(1);
process.nextTick(() => {
//callback to close window should have called
expect(func).toHaveBeenCalledTimes(1);
global.fetch.mockClear();
done();
});
});
});

2
src/css/Preview.css → src/elements/Preview/Preview.css
View File

@ -49,6 +49,6 @@
width: 266px;
}
.tagpreviewtitle{
.tagpreviewtitle {
margin-top: 55px;
}

20
src/elements/Preview.js → src/elements/Preview/Preview.js
View File

@ -1,7 +1,7 @@
import React from "react";
import "../css/Preview.css";
import Player from "../pages/Player";
import VideoContainer from "./VideoContainer";
import "./Preview.css";
import Player from "../../pages/Player/Player";
import VideoContainer from "../VideoContainer/VideoContainer";
class Preview extends React.Component {
constructor(props, context) {
@ -29,18 +29,18 @@ class Preview extends React.Component {
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.text())
.then((result) => {
this.setState(prevState => ({
...prevState.previewpicture, previewpicture: result
.then((response) => response.text()
.then((result) => {
this.setState(prevState => ({
...prevState.previewpicture, previewpicture: result
}));
}));
});
}
render() {
return (
<div className='videopreview' onClick={() => this.itemClick()}>
<div className='previewtitle videopreviewtitle'>{this.state.name}</div>
<div className='previewtitle'>{this.state.name}</div>
<div className='previewpic'>
<img className='previewimage'
src={this.state.previewpicture}
@ -85,7 +85,7 @@ export class TagPreview extends React.Component {
this.props.categorybinding(
<VideoContainer
data={result}
viewbinding={this.props.viewbinding}/>,tag
viewbinding={this.props.viewbinding}/>, tag
);
}))
.catch(() => {

107
src/elements/Preview/Previw.test.js Normal file
View File

@ -0,0 +1,107 @@
import React from 'react';
import {shallow} from 'enzyme'
import Preview, {TagPreview} from "./Preview";
describe('<Preview/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<Preview/>);
wrapper.unmount();
});
// check if preview title renders correctly
it('renders title', () => {
const wrapper = shallow(<Preview name='test'/>);
expect(wrapper.find('.previewtitle').text()).toBe('test');
});
it('click event triggered', () => {
const func = jest.fn();
const wrapper = shallow(<Preview/>);
wrapper.setProps({
viewbinding: {
showVideo: () => {
func()
}
}
});
wrapper.find('.videopreview').simulate('click');
//callback to open player should have called
expect(func).toHaveBeenCalledTimes(1);
});
it('picture rendered correctly', done => {
const mockSuccessResponse = 'testsrc';
const mockJsonPromise = Promise.resolve(mockSuccessResponse);
const mockFetchPromise = Promise.resolve({
text: () => mockJsonPromise,
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
const wrapper = shallow(<Preview/>);
// now called 1 times
expect(global.fetch).toHaveBeenCalledTimes(1);
process.nextTick(() => {
// received picture should be rendered into wrapper
expect(wrapper.find(".previewimage").props().src).not.toBeNull();
global.fetch.mockClear();
done();
});
});
});
describe('<TagPreview/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<TagPreview/>);
wrapper.unmount();
});
// check if preview title renders correctly
it('renders title', () => {
const wrapper = shallow(<TagPreview name='test'/>);
expect(wrapper.find('.tagpreviewtitle').text()).toBe('test');
});
it('click event triggered', done => {
const mockSuccessResponse = {};
const mockJsonPromise = Promise.resolve(mockSuccessResponse);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
const func = jest.fn();
const wrapper = shallow(<TagPreview/>);
wrapper.setProps({
categorybinding: () => {
func()
}
});
// first call of fetch is getting of available tags
expect(global.fetch).toHaveBeenCalledTimes(0);
wrapper.find('.videopreview').simulate('click');
// now called 1 times
expect(global.fetch).toHaveBeenCalledTimes(1);
process.nextTick(() => {
//callback to close window should have called
expect(func).toHaveBeenCalledTimes(1);
global.fetch.mockClear();
done();
});
});
});

3
src/elements/Tag/Tag.js
View File

@ -12,7 +12,8 @@ class Tag extends React.Component {
render() {
// todo onclick events correctlyy
return (
<button className='tagbtn' onClick={this.props.onClick} data-testid="Test-Tag">{this.props.children}</button>
<button className='tagbtn' onClick={this.props.onClick}
data-testid="Test-Tag">{this.props.children}</button>
);
}
}

2
src/elements/VideoContainer.js → src/elements/VideoContainer/VideoContainer.js
View File

@ -1,5 +1,5 @@
import React from "react";
import Preview from "./Preview";
import Preview from "../Preview/Preview";
class VideoContainer extends React.Component {
constructor(props, context) {

30
src/elements/VideoContainer/VideoContainer.test.js Normal file
View File

@ -0,0 +1,30 @@
import {shallow} from "enzyme";
import React from "react";
import VideoContainer from "./VideoContainer";
describe('<VideoContainer/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<VideoContainer data={[]}/>);
wrapper.unmount();
});
it('inserts tiles correctly', () => {
const wrapper = shallow(<VideoContainer data={[
{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
]}/>);
expect(wrapper.find('Preview')).toHaveLength(12);
});
it('inserts tiles correctly if not enough available', () => {
const wrapper = shallow(<VideoContainer data={[
{}, {}, {}, {}
]}/>);
expect(wrapper.find('Preview')).toHaveLength(4);
});
it('no items available', () => {
const wrapper = shallow(<VideoContainer data={[]}/>);
expect(wrapper.find('Preview')).toHaveLength(0);
expect(wrapper.find(".maincontent").text()).toBe("no items to show!");
});
});

6
src/index.js
View File

@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
@ -10,8 +9,3 @@ ReactDOM.render(
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register();

14
src/pages/CategoryPage.js → src/pages/CategoryPage/CategoryPage.js
View File

@ -1,9 +1,9 @@
import React from "react";
import SideBar from "../elements/SideBar/SideBar";
import Tag from "../elements/Tag/Tag";
import SideBar from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import {TagPreview} from "../elements/Preview";
import NewTagPopup from "../elements/NewTagPopup";
import {TagPreview} from "../../elements/Preview/Preview";
import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
class CategoryPage extends React.Component {
constructor(props, context) {
@ -37,7 +37,7 @@ class CategoryPage extends React.Component {
<Tag>LowQuality</Tag>
<Tag>HD</Tag>
<hr/>
<button className='btn btn-success' onClick={() => {
<button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
this.setState({popupvisible: true})
}}>Add a new Tag!
</button>
@ -58,7 +58,9 @@ class CategoryPage extends React.Component {
</div>) :
<>
{this.selectionelements}
<button className="btn btn-success" onClick={this.loadCategoryPageDefault}>Back</button>
<button data-testid='backbtn' className="btn btn-success"
onClick={this.loadCategoryPageDefault}>Back
</button>
</>
}

107
src/pages/CategoryPage/CategoryPage.test.js Normal file
View File

@ -0,0 +1,107 @@
import {shallow, mount} from "enzyme";
import React from "react";
import CategoryPage from "./CategoryPage";
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));
}
describe('<CategoryPage/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<CategoryPage/>);
wrapper.unmount();
});
it('test tag fetch call', done => {
global.fetch = prepareFetchApi(["first", "second"]);
const wrapper = shallow(<CategoryPage/>);
expect(global.fetch).toHaveBeenCalledTimes(1);
process.nextTick(() => {
//callback to close window should have called
expect(wrapper.state().loadedtags.length).toBe(2);
global.fetch.mockClear();
done();
});
});
it('test errored fetch call', done => {
global.fetch = prepareFetchApi({});
let message;
global.console.log = jest.fn((m) => {
message = m;
})
const wrapper = shallow(<CategoryPage/>);
expect(global.fetch).toHaveBeenCalledTimes(1);
process.nextTick(() => {
//callback to close window should have called
expect(message).toBe("no connection to backend");
global.fetch.mockClear();
done();
});
});
it('test new tag popup', function () {
const wrapper = mount(<CategoryPage/>);
expect(wrapper.find("NewTagPopup")).toHaveLength(0);
wrapper.find('[data-testid="btnaddtag"]').simulate('click');
// newtagpopup should be showing now
expect(wrapper.find("NewTagPopup")).toHaveLength(1);
// click close button in modal
wrapper.find(".modal-header").find("button").simulate("click");
expect(wrapper.find("NewTagPopup")).toHaveLength(0);
});
it('test setpage callback', done => {
global.fetch = prepareFetchApi([{}, {}]);
const wrapper = mount(<CategoryPage/>);
wrapper.setState({
loadedtags: [
{
tag_name: "testname",
tag_id: 42
}
]
});
wrapper.find("TagPreview").find("div").first().simulate("click");
process.nextTick(() => {
// expect callback to have loaded correct tag
expect(wrapper.state().selected).toBe("testname");
// expect to receive a videocontainer with simulated data
expect(wrapper.instance().selectionelements).toMatchObject(<VideoContainer data={[{}, {}]}/>);
global.fetch.mockClear();
done();
});
});
it('test back to category view callback', function () {
const wrapper = shallow(<CategoryPage/>);
wrapper.setState({
selected: "test"
});
expect(wrapper.state().selected).not.toBeNull();
wrapper.find('[data-testid="backbtn"]').simulate("click");
expect(wrapper.state().selected).toBeNull();
});
});

0
src/css/HomePage.css → src/pages/HomePage/HomePage.css
View File

14
src/pages/HomePage.js → src/pages/HomePage/HomePage.js
View File

@ -1,10 +1,10 @@
import React from "react";
import SideBar from "../elements/SideBar/SideBar";
import Tag from "../elements/Tag/Tag";
import VideoContainer from "../elements/VideoContainer";
import SideBar from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
import "../css/HomePage.css"
import "../css/DefaultPage.css"
import "./HomePage.css"
import "../../css/DefaultPage.css"
class HomePage extends React.Component {
constructor(props, context) {
@ -25,7 +25,6 @@ class HomePage extends React.Component {
}
componentDidMount() {
// document.addEventListener('scroll', this.trackScrolling);
// initial get of all videos
this.fetchVideoData("all");
this.fetchStartData();
@ -129,7 +128,8 @@ class HomePage extends React.Component {
{this.state.data.length !== 0 ?
<VideoContainer
data={this.state.data}
viewbinding={this.props.viewbinding}/> : null}
viewbinding={this.props.viewbinding}/> :
<div>No Data found!</div>}
<div className='rightinfo'>
</div>

58
src/pages/HomePage/HomePage.test.js Normal file
View File

@ -0,0 +1,58 @@
import {shallow} from "enzyme";
import React from "react";
import HomePage from "./HomePage";
function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
});
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
describe('<HomePage/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<HomePage/>);
wrapper.unmount();
});
it('ckeck default tag click events', function () {
const wrapper = shallow(<HomePage/>);
global.fetch = prepareFetchApi({});
expect(global.fetch).toBeCalledTimes(0);
// click every tag button
wrapper.find("Tag").map((i) => {
i.simulate("click");
});
expect(global.fetch).toBeCalledTimes(4);
});
it('test data insertion', function () {
const wrapper = shallow(<HomePage/>);
expect(wrapper.find("VideoContainer")).toHaveLength(0);
wrapper.setState({
data: [
{}, {}
]
});
// there shoud be loaded the Videocontainer element into dom after fetching videos correctly
expect(wrapper.find("VideoContainer")).toHaveLength(1);
});
it('test title and nr insertions', function () {
const wrapper = shallow(<HomePage/>);
expect(wrapper.find(".pageheadersubtitle").text()).toBe("All Videos - 0");
wrapper.setState({
tag: "testtag",
selectionnr: 42
});
expect(wrapper.find(".pageheadersubtitle").text()).toBe("testtag Videos - 42");
});
});

2
src/css/Player.css → src/pages/Player/Player.css
View File

@ -27,6 +27,6 @@
margin-top: 25px;
}
.videoactions{
.videoactions {
margin-top: 15px;
}

26
src/pages/Player.js → src/pages/Player/Player.js
View File

@ -1,9 +1,9 @@
import React from "react";
import "../css/Player.css"
import "./Player.css"
import {PlyrComponent} from 'plyr-react';
import SideBar from "../elements/SideBar/SideBar";
import Tag from "../elements/Tag/Tag";
import AddTagPopup from "../elements/AddTagPopup/AddTagPopup";
import SideBar from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
class Player extends React.Component {
@ -137,15 +137,15 @@ class Player extends React.Component {
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
if (result.result === "success") {
this.fetchMovieData();
} else {
console.log("an error occured while liking");
console.log(result);
}
});
.then((response) => response.json()
.then((result) => {
if (result.result === "success") {
this.fetchMovieData();
} else {
console.log("an error occured while liking");
console.log(result);
}
}));
}
closebtn() {

128
src/pages/Player/Player.test.js Normal file
View File

@ -0,0 +1,128 @@
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/>);
wrapper.unmount();
});
it('plyr insertion', function () {
const wrapper = shallow(<Player/>);
wrapper.setState({
sources: [
{
src: '/tstvid.mp4',
type: 'video/mp4',
size: 1080,
}
]
});
expect(wrapper.find("r")).toHaveLength(1);
});
it('likebtn click', done => {
global.fetch = prepareFetchApi({result: 'success'});
const func = jest.fn();
const wrapper = shallow(<Player/>);
wrapper.setProps({
onHide: () => {
func()
}
});
// initial fetch for getting movie data
expect(global.fetch).toHaveBeenCalledTimes(1);
wrapper.find('.videoactions').find("button").first().simulate('click');
// fetch for liking
expect(global.fetch).toHaveBeenCalledTimes(2);
process.nextTick(() => {
// refetch is called so fetch called 3 times
expect(global.fetch).toHaveBeenCalledTimes(3);
global.fetch.mockClear();
done();
});
});
it('errored likebtn click', done => {
global.fetch = prepareFetchApi({result: 'nosuccess'});
const func = jest.fn();
const wrapper = shallow(<Player/>);
wrapper.setProps({
onHide: () => {
func()
}
});
// initial fetch for getting movie data
expect(global.fetch).toHaveBeenCalledTimes(1);
wrapper.find('.videoactions').find("button").first().simulate('click');
// fetch for liking
expect(global.fetch).toHaveBeenCalledTimes(2);
process.nextTick(() => {
// refetch is called so fetch called 3 times
expect(global.fetch).toHaveBeenCalledTimes(2);
global.fetch.mockClear();
done();
});
});
it('show tag popup', function () {
const wrapper = shallow(<Player/>);
expect(wrapper.find("AddTagPopup")).toHaveLength(0);
wrapper.find('.videoactions').find("button").last().simulate('click');
// addtagpopup should be showing now
expect(wrapper.find("AddTagPopup")).toHaveLength(1);
});
it('hide click ', function () {
const wrapper = shallow(<Player/>);
const func = jest.fn();
wrapper.setProps({
viewbinding: {
hideVideo: () => {
func()
}
}
});
expect(func).toHaveBeenCalledTimes(0);
wrapper.find('.closebutton').simulate('click');
// addtagpopup should be showing now
expect(func).toHaveBeenCalledTimes(1);
});
it('inserts Tags correctly', function () {
const wrapper = shallow(<Player/>);
expect(wrapper.find("Tag")).toHaveLength(0);
wrapper.setState({
tags: [
{tag_name: 'first'},
{tag_name: 'second'}
]
});
expect(wrapper.find("Tag")).toHaveLength(2);
});
});

4
src/css/RandomPage.css → src/pages/RandomPage/RandomPage.css
View File

@ -3,7 +3,7 @@
align-content: center;
}
.btnshuffle{
.btnshuffle {
background-color: #39a945;
color: white;
@ -16,6 +16,6 @@
font-size: larger;
}
.btnshuffle:focus{
.btnshuffle:focus {
outline: none;
}

8
src/pages/RandomPage.js → src/pages/RandomPage/RandomPage.js
View File

@ -1,8 +1,8 @@
import React from "react";
import Preview from "../elements/Preview";
import "../css/RandomPage.css"
import SideBar from "../elements/SideBar/SideBar";
import Tag from "../elements/Tag/Tag";
import Preview from "../../elements/Preview/Preview";
import "./RandomPage.css"
import SideBar from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
class RandomPage extends React.Component {
constructor(props, context) {

49
src/pages/RandomPage/RandomPage.test.js Normal file
View File

@ -0,0 +1,49 @@
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/>);
wrapper.unmount();
});
it('test shuffleload fetch', function () {
global.fetch = prepareFetchApi({});
const wrapper = shallow(<RandomPage/>);
expect(global.fetch).toBeCalledTimes(1);
});
it('btnshuffle click test', function () {
global.fetch = prepareFetchApi({});
const wrapper = shallow(<RandomPage/>);
wrapper.find(".btnshuffle").simulate("click");
expect(global.fetch).toBeCalledTimes(2);
});
it('test tags in random selection', function () {
const wrapper = shallow(<RandomPage/>);
wrapper.setState({
tags: [
{tag_name: "test1"},
{tag_name: "test2"}
]
});
expect(wrapper.find("Tag")).toHaveLength(2);
});
});

12
src/pages/SettingsPage.js → src/pages/SettingsPage/SettingsPage.js
View File

@ -1,5 +1,5 @@
import React from "react";
import "../css/DefaultPage.css"
import "../../css/DefaultPage.css"
class SettingsPage extends React.Component {
@ -31,7 +31,7 @@ class SettingsPage extends React.Component {
};
componentDidMount() {
if(this.myinterval){
if (this.myinterval) {
clearInterval(this.myinterval);
}
this.myinterval = setInterval(this.updateStatus, 1000);
@ -50,12 +50,12 @@ class SettingsPage extends React.Component {
<hr/>
</div>
<button className='btn btn-success' onClick={() => {
<button className='reindexbtn btn btn-success' onClick={() => {
this.startReindex()
}}>Reindex Movies
</button>
<div>{this.state.text.map(m => (
<div>{m}</div>
<div className='indextextarea'>{this.state.text.map(m => (
<div className='textarea-element'>{m}</div>
))}</div>
</div>
);
@ -73,7 +73,7 @@ class SettingsPage extends React.Component {
.catch(() => {
console.log("no connection to backend");
});
if(this.myinterval){
if (this.myinterval) {
clearInterval(this.myinterval);
}
this.myinterval = setInterval(this.updateStatus, 1000);

41
src/pages/SettingsPage/SettingsPage.test.js Normal file
View File

@ -0,0 +1,41 @@
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/>);
wrapper.unmount();
});
it('received text renders into dom', function () {
const wrapper = shallow(<SettingsPage/>);
wrapper.setState({
text: [
"firstline",
"secline"
]
});
expect(wrapper.find(".indextextarea").find(".textarea-element")).toHaveLength(2);
});
it('test simulate reindex', function () {
global.fetch = prepareFetchApi({});
const wrapper = shallow(<SettingsPage/>);
wrapper.find(".reindexbtn").simulate("click");
// initial send of reindex request to server
expect(global.fetch).toBeCalledTimes(1);
});
});

141
src/serviceWorker.js
View File

@ -1,141 +0,0 @@
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: {'Service-Worker': 'script'},
})
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then(registration => {
registration.unregister();
})
.catch(error => {
console.error(error.message);
});
}
}

4
src/setupTests.js
View File

@ -4,7 +4,7 @@
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
import { configure } from 'enzyme';
import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
configure({adapter: new Adapter()});