added several tests to generalsettings view

This commit is contained in:
Lukas Heiligenbrunner 2020-07-13 00:44:16 +02:00
parent 24dac2135c
commit 537d869338
5 changed files with 72 additions and 16 deletions

View File

@ -1,7 +1,6 @@
import {shallow, mount} from "enzyme"; import {mount, shallow} from "enzyme";
import React from "react"; import React from "react";
import CategoryPage from "./CategoryPage"; import CategoryPage from "./CategoryPage";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
function prepareFetchApi(response) { function prepareFetchApi(response) {
const mockJsonPromise = Promise.resolve(response); const mockJsonPromise = Promise.resolve(response);

View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import {Form, Col, Button} from "react-bootstrap"; import {Button, Col, Form} from "react-bootstrap";
import style from "./GeneralSettings.module.css" import style from "./GeneralSettings.module.css"
class GeneralSettings extends React.Component { class GeneralSettings extends React.Component {
@ -42,13 +42,13 @@ class GeneralSettings extends React.Component {
this.saveSettings(); this.saveSettings();
}}> }}>
<Form.Row> <Form.Row>
<Form.Group as={Col} controlId="formGridEmail"> <Form.Group as={Col} data-testid="videpathform">
<Form.Label>Video Path</Form.Label> <Form.Label>Video Path</Form.Label>
<Form.Control type="text" placeholder="/var/www/html/video" value={this.state.videopath} <Form.Control type="text" placeholder="/var/www/html/video" value={this.state.videopath}
onChange={(ee) => this.setState({videopath: ee.target.value})}/> onChange={(ee) => this.setState({videopath: ee.target.value})}/>
</Form.Group> </Form.Group>
<Form.Group as={Col} controlId="formGridPassword"> <Form.Group as={Col} data-testid="tvshowpath">
<Form.Label>TV Show Path</Form.Label> <Form.Label>TV Show Path</Form.Label>
<Form.Control type='text' placeholder="/var/www/html/tvshow" <Form.Control type='text' placeholder="/var/www/html/tvshow"
value={this.state.tvshowpath} value={this.state.tvshowpath}
@ -59,6 +59,7 @@ class GeneralSettings extends React.Component {
<Form.Check <Form.Check
type="switch" type="switch"
id="custom-switch" id="custom-switch"
data-testid='passwordswitch'
label="Enable Password support" label="Enable Password support"
checked={this.state.passwordsupport} checked={this.state.passwordsupport}
onChange={() => { onChange={() => {
@ -67,14 +68,14 @@ class GeneralSettings extends React.Component {
/> />
{this.state.passwordsupport ? {this.state.passwordsupport ?
<Form.Group controlId="passwordfield"> <Form.Group data-testid="passwordfield">
<Form.Label>Password</Form.Label> <Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="**********" value={this.state.password} <Form.Control type="password" placeholder="**********" value={this.state.password}
onChange={(e) => this.setState({password: e.target.value})}/> onChange={(e) => this.setState({password: e.target.value})}/>
</Form.Group> : null </Form.Group> : null
} }
<Form.Group className={style.mediacenternameform} controlId="nameform"> <Form.Group className={style.mediacenternameform} data-testid="nameform">
<Form.Label>The name of the Mediacenter</Form.Label> <Form.Label>The name of the Mediacenter</Form.Label>
<Form.Control type="text" placeholder="Mediacentername" value={this.state.mediacentername} <Form.Control type="text" placeholder="Mediacentername" value={this.state.mediacentername}
onChange={(e) => this.setState({mediacentername: e.target.value})}/> onChange={(e) => this.setState({mediacentername: e.target.value})}/>

View File

@ -19,10 +19,10 @@ describe('<GeneralSettings/>', function () {
it('test password hide/show switchbutton', function () { it('test password hide/show switchbutton', function () {
const wrapper = shallow(<GeneralSettings/>); const wrapper = shallow(<GeneralSettings/>);
expect(wrapper.find("FormGroup").findWhere(it => it.props().controlId === "passwordfield")).toHaveLength(0); expect(wrapper.find("[data-testid='passwordfield']")).toHaveLength(0);
wrapper.find("FormCheck").findWhere(it => it.props().label === "Enable Password support").simulate("change"); wrapper.find("FormCheck").findWhere(it => it.props().label === "Enable Password support").simulate("change");
expect(wrapper.find("FormGroup").findWhere(it => it.props().controlId === "passwordfield")).toHaveLength(1); expect(wrapper.find("[data-testid='passwordfield']")).toHaveLength(1);
}); });
it('test savesettings', done => { it('test savesettings', done => {
@ -31,15 +31,71 @@ describe('<GeneralSettings/>', function () {
global.fetch = prepareFetchApi({success: true}); global.fetch = prepareFetchApi({success: true});
expect(global.fetch).toBeCalledTimes(0); expect(global.fetch).toBeCalledTimes(0);
wrapper.find("[data-testid='mainformsettings']").simulate("submit"); const fakeEvent = {preventDefault: () => console.log('preventDefault')};
wrapper.find("[data-testid='mainformsettings']").simulate("submit", fakeEvent);
expect(global.fetch).toBeCalledTimes(1); expect(global.fetch).toBeCalledTimes(1);
process.nextTick(() => { process.nextTick(() => {
// expect callback to have loaded correct tag // todo 2020-07-13: test popup of error success here
expect(wrapper.state().selected).toBe("testname");
global.fetch.mockClear(); global.fetch.mockClear();
done(); done();
}); });
}); });
it('test failing savesettings', done => {
const wrapper = shallow(<GeneralSettings/>);
global.fetch = prepareFetchApi({success: false});
expect(global.fetch).toBeCalledTimes(0);
const fakeEvent = {preventDefault: () => console.log('preventDefault')};
wrapper.find("[data-testid='mainformsettings']").simulate("submit", fakeEvent);
expect(global.fetch).toBeCalledTimes(1);
process.nextTick(() => {
// todo 2020-07-13: test error popup here!
global.fetch.mockClear();
done();
});
});
it('test videopath change event', function () {
const wrapper = shallow(<GeneralSettings/>);
expect(wrapper.state().videopath).not.toBe("test");
const event = {target: {name: "pollName", value: "test"}};
wrapper.find("[data-testid='videpathform']").find("FormControl").simulate("change", event);
expect(wrapper.state().videopath).toBe("test");
});
it('test tvshowpath change event', function () {
const wrapper = shallow(<GeneralSettings/>);
const event = {target: {name: "pollName", value: "test"}};
expect(wrapper.state().tvshowpath).not.toBe("test");
wrapper.find("[data-testid='tvshowpath']").find("FormControl").simulate("change", event);
expect(wrapper.state().tvshowpath).toBe("test");
});
it('test mediacentername-form change event', function () {
const wrapper = shallow(<GeneralSettings/>);
const event = {target: {name: "pollName", value: "test"}};
expect(wrapper.state().mediacentername).not.toBe("test");
wrapper.find("[data-testid='nameform']").find("FormControl").simulate("change", event);
expect(wrapper.state().mediacentername).toBe("test");
});
it('test password-form change event', function () {
const wrapper = shallow(<GeneralSettings/>);
wrapper.setState({passwordsupport: true});
const event = {target: {name: "pollName", value: "test"}};
expect(wrapper.state().password).not.toBe("test");
wrapper.find("[data-testid='passwordfield']").find("FormControl").simulate("change", event);
expect(wrapper.state().password).toBe("test");
});
}); });