reformattings

no redirect on tagclick on homepage
no multiple add of same tag possible
This commit is contained in:
2020-10-25 18:48:23 +00:00
parent 812c45cb13
commit 777cc2a712
43 changed files with 493 additions and 448 deletions

View File

@ -1,12 +1,12 @@
import React from "react";
import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import videocontainerstyle from "../../elements/VideoContainer/VideoContainer.module.css"
import React from 'react';
import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
import Tag from '../../elements/Tag/Tag';
import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
import {TagPreview} from "../../elements/Preview/Preview";
import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
import {TagPreview} from '../../elements/Preview/Preview';
import NewTagPopup from '../../elements/NewTagPopup/NewTagPopup';
import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
/**
* Component for Category Page
@ -40,33 +40,33 @@ class CategoryPage extends React.Component {
<>
<PageTitle
title='Categories'
subtitle={!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}/>
subtitle={!this.state.selected ? this.state.loadedtags.length + ' different Tags' : this.state.selected}/>
<SideBar>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category)
this.loadTag(e.props.category);
}
}}>All</Tag>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category)
this.loadTag(e.props.category);
}
}}>FullHd</Tag>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category)
this.loadTag(e.props.category);
}
}}>LowQuality</Tag>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category)
this.loadTag(e.props.category);
}
}}>HD</Tag>
<Line/>
<button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
this.setState({popupvisible: true})
this.setState({popupvisible: true});
}}>Add a new Tag!
</button>
</SideBar></>
@ -98,7 +98,7 @@ class CategoryPage extends React.Component {
viewbinding={this.props.viewbinding}
categorybinding={this.loadTag}/>
)) :
"loading"}
'loading'}
</div>
}
@ -133,7 +133,7 @@ class CategoryPage extends React.Component {
updateRequest.append('action', 'getMovies');
updateRequest.append('tag', tag);
console.log("fetching data");
console.log('fetching data');
// fetch all videos available
fetch('/api/video.php', {method: 'POST', body: updateRequest})
@ -144,7 +144,7 @@ class CategoryPage extends React.Component {
this.setState({selected: tag});
}))
.catch(() => {
console.log("no connection to backend");
console.log('no connection to backend');
});
}
@ -170,7 +170,7 @@ class CategoryPage extends React.Component {
this.setState({loadedtags: result});
}))
.catch(() => {
console.log("no connection to backend");
console.log('no connection to backend');
});
}
}

View File

@ -1,6 +1,6 @@
import {mount, shallow} from "enzyme";
import React from "react";
import CategoryPage from "./CategoryPage";
import {mount, shallow} from 'enzyme';
import React from 'react';
import CategoryPage from './CategoryPage';
describe('<CategoryPage/>', function () {
it('renders without crashing ', function () {
@ -9,7 +9,7 @@ describe('<CategoryPage/>', function () {
});
it('test tag fetch call', done => {
global.fetch = global.prepareFetchApi(["first", "second"]);
global.fetch = global.prepareFetchApi(['first', 'second']);
const wrapper = shallow(<CategoryPage/>);
@ -38,7 +38,7 @@ describe('<CategoryPage/>', function () {
process.nextTick(() => {
//callback to close window should have called
expect(message).toBe("no connection to backend");
expect(message).toBe('no connection to backend');
global.fetch.mockClear();
done();
@ -48,14 +48,14 @@ describe('<CategoryPage/>', function () {
it('test new tag popup', function () {
const wrapper = mount(<CategoryPage/>);
expect(wrapper.find("NewTagPopup")).toHaveLength(0);
expect(wrapper.find('NewTagPopup')).toHaveLength(0);
wrapper.find('[data-testid="btnaddtag"]').simulate('click');
// newtagpopup should be showing now
expect(wrapper.find("NewTagPopup")).toHaveLength(1);
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);
wrapper.find('.modal-header').find('button').simulate('click');
expect(wrapper.find('NewTagPopup')).toHaveLength(0);
});
it('test setpage callback', done => {
@ -66,17 +66,17 @@ describe('<CategoryPage/>', function () {
wrapper.setState({
loadedtags: [
{
tag_name: "testname",
tag_name: 'testname',
tag_id: 42
}
]
});
wrapper.find("TagPreview").find("div").first().simulate("click");
wrapper.find('TagPreview').find('div').first().simulate('click');
process.nextTick(() => {
// expect callback to have loaded correct tag
expect(wrapper.state().selected).toBe("testname");
expect(wrapper.state().selected).toBe('testname');
global.fetch.mockClear();
done();
@ -87,10 +87,10 @@ describe('<CategoryPage/>', function () {
const wrapper = shallow(<CategoryPage/>);
wrapper.setState({
selected: "test"
selected: 'test'
});
expect(wrapper.state().selected).not.toBeNull();
wrapper.find('[data-testid="backbtn"]').simulate("click");
wrapper.find('[data-testid="backbtn"]').simulate('click');
expect(wrapper.state().selected).toBeNull();
});
@ -112,9 +112,9 @@ describe('<CategoryPage/>', function () {
console.log(wrapper.debug());
expect(func).toBeCalledTimes(0);
wrapper.find("SideBar").find("Tag").forEach(e => {
e.simulate("click");
})
wrapper.find('SideBar').find('Tag').forEach(e => {
e.simulate('click');
});
expect(func).toBeCalledTimes(4);