Fixed tests for redux

This commit is contained in:
Claudio Maggioni (maggicl) 2020-04-12 17:49:29 +02:00
parent 0805d9d4d0
commit 76d10ba431
14 changed files with 64 additions and 59 deletions

View file

@ -1,2 +1 @@
# frontend

View file

@ -3,12 +3,16 @@ import { render } from "@testing-library/react";
import { Router } from "react-router";
import { createMemoryHistory } from "history";
import App from "./App";
import { Provider } from "react-redux";
import smartHutStore from "./store";
test("redirects to homepage", () => {
const history = createMemoryHistory();
render(
<Router history={history}>
<App />
<Provider store={smartHutStore}>
<App />
</Provider>
</Router>
);
expect(history.location.pathname).toBe("/");

View file

@ -48,7 +48,9 @@ const mapStateToProps = (state, _) => ({
if (state.active.activeRoom === -1) {
return Object.values(state.devices);
} else {
const deviceArray = [...state.rooms[state.active.activeRoom].devices].sort();
const deviceArray = [
...state.rooms[state.active.activeRoom].devices,
].sort();
return deviceArray.map((id) => state.devices[id]);
}
},

View file

@ -56,19 +56,21 @@ class Device extends React.Component {
return (
<Segment>
<Grid columns={2}>
<Grid.Column>
{this.renderDeviceComponent()}
</Grid.Column>
<Grid.Column textAlign='center'>
<Header as='h3'>{this.props.device.name}</Header>
<Button color='blue' icon onClick={this.edit} labelPosition='left'>
<Icon name='pencil' />
<Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
<Grid.Column textAlign="center">
<Header as="h3">{this.props.device.name}</Header>
<Button color="blue" icon onClick={this.edit} labelPosition="left">
<Icon name="pencil" />
Edit
</Button>
{this.props.device.kind === "smartPlug" ? (
<Button color='orange' icon onClick={this.resetSmartPlug}
labelPosition='left'>
<Icon name='undo' />
<Button
color="orange"
icon
onClick={this.resetSmartPlug}
labelPosition="left"
>
<Icon name="undo" />
Reset
</Button>
) : null}

View file

@ -65,7 +65,7 @@ export class KnobDimmerComponent extends Component {
this.state = {
intensity: this.props.device.intensity || 0,
timeout: null
timeout: null,
};
this.saveIntensity = this.saveIntensity.bind(this);
@ -74,20 +74,20 @@ export class KnobDimmerComponent extends Component {
setIntensity(intensity) {
intensity *= 100;
if (this.state.timeout) {
clearTimeout(this.state.timeout);
}
this.setState({
this.setState({
intensity,
timeout: setTimeout(() => {
this.saveIntensity();
this.setState({
intensity: this.state.intensity,
timeout: null
timeout: null,
});
}, 100)
}, 100),
});
}
@ -96,7 +96,7 @@ export class KnobDimmerComponent extends Component {
this.props
.knobDimmerDimTo(this.props.id, val)
.catch((err) => console.error("knob dimmer set intensity error", err));
};
}
render() {
return (

View file

@ -65,20 +65,20 @@ class Light extends Component {
setIntensity(intensity) {
intensity *= 100;
if (this.state.timeout) {
clearTimeout(this.state.timeout);
}
this.setState({
this.setState({
intensity,
timeout: setTimeout(() => {
this.saveIntensity();
this.setState({
intensity: this.state.intensity,
timeout: null
timeout: null,
});
}, 100)
}, 100),
});
}

View file

@ -5,10 +5,7 @@
The user can reset this value.
**/
import React, { Component } from "react";
import {
BottomPanel,
StyledDiv
} from "./styleComponents";
import { BottomPanel, StyledDiv } from "./styleComponents";
import { Image } from "semantic-ui-react";
import {
energyConsumedStyle,
@ -36,8 +33,9 @@ class SmartPlug extends Component {
onClickDevice = () => {
const on = !this.turnedOn;
this.props.saveDevice({ ...this.props.device, on })
.catch((err) => console.error('smart plug update error', err));
this.props
.saveDevice({ ...this.props.device, on })
.catch((err) => console.error("smart plug update error", err));
};
getIcon = () => {
@ -48,9 +46,7 @@ class SmartPlug extends Component {
return (
<StyledDiv onClick={this.onClickDevice}>
<Image src={this.getIcon()} style={imageStyle} />
<span style={nameStyle}>
Smart Plug
</span>
<span style={nameStyle}>Smart Plug</span>
<BottomPanel
style={

View file

@ -30,17 +30,16 @@ class Switch extends Component {
onClickDevice = () => {
const newOn = !this.turnedOn;
const type = newOn ? "ON" : "OFF";
this.props.switchOperate(this.props.id, type)
.catch(err => console.error('switch operate failed', err))
this.props
.switchOperate(this.props.id, type)
.catch((err) => console.error("switch operate failed", err));
};
render() {
return (
<StyledDiv onClick={this.onClickDevice}>
<Image src={this.getIcon()} style={imageStyle} />
<span style={nameStyle}>
Switch
</span>
<span style={nameStyle}>Switch</span>
<BottomPanel
style={
@ -49,9 +48,7 @@ class Switch extends Component {
: { backgroundColor: "#1a2849" }
}
>
<span style={turnedOnStyle}>
{this.turnedOn ? "ON" : "OFF"}
</span>
<span style={turnedOnStyle}>{this.turnedOn ? "ON" : "OFF"}</span>
</BottomPanel>
</StyledDiv>
);

View file

@ -14,7 +14,6 @@ export function socketURL(token) {
const protocol = isSecure ? "wss:" : "ws:";
const port = httpURL.port || (isSecure ? 443 : 80);
const url = `${protocol}//${httpURL.hostname}:${port}/sensor-socket?token=${token}`;
console.log('socket url: ', url);
console.log("socket url: ", url);
return url;
}

View file

@ -4,7 +4,6 @@ import axios from "axios";
import { endpointURL, socketURL } from "./endpoint";
import { connect, disconnect } from "@giantmachines/redux-websocket";
/**
* An object returned by promise rejections in remoteservice
* @typedef {Error} RemoteError
@ -170,8 +169,8 @@ export const RemoteService = {
return (dispatch) => {
return Endpoint.login(usernameOrEmail, password)
.then((token) => {
dispatch(actions.loginSuccess(token))
dispatch(connect(socketURL(token)))
dispatch(actions.loginSuccess(token));
dispatch(connect(socketURL(token)));
})
.catch((err) => {
console.warn("login error", err);
@ -190,8 +189,8 @@ export const RemoteService = {
logout: () => {
return (dispatch) =>
Endpoint.logout().then(() => {
dispatch(disconnect())
dispatch(actions.logout())
dispatch(disconnect());
dispatch(actions.logout());
});
},

View file

@ -237,14 +237,14 @@ function reducer(previousState, action) {
newState = reducer(previousState, {
type: "DEVICES_UPDATE",
partial: true,
devices
devices,
});
break;
default:
console.warn(`Action type ${action.type} unknown`, action);
return previousState;
}
return newState;
}
@ -284,10 +284,11 @@ function createSmartHutStore() {
initialState.login.token = null;
}
const store = createStore(reducer, initialState,
compose(
applyMiddleware(thunk),
applyMiddleware(reduxWebSocket())));
const store = createStore(
reducer,
initialState,
compose(applyMiddleware(thunk), applyMiddleware(reduxWebSocket()))
);
if (initialState.login.loggedIn) {
store.dispatch(connect(socketURL(token)));
}

View file

@ -43,8 +43,11 @@ export default class ChangePass extends Component {
Forms.submitResetPassword(this.props.query.token, this.state.password)
.then(() => this.setState({ success: true }))
.catch((err) => this.setState({ error:
{ state: true, message: err.messages.join(' - ') }}));
.catch((err) =>
this.setState({
error: { state: true, message: err.messages.join(" - ") },
})
);
};
render() {

View file

@ -35,7 +35,9 @@ export default class ForgotPass extends Component {
Forms.submitInitResetPassword(this.state.user)
.then(() => this.setState({ success: true }))
.catch((err) => this.setState({ error: { state: true, message: err.messages }}));
.catch((err) =>
this.setState({ error: { state: true, message: err.messages } })
);
};
render() {

View file

@ -34,10 +34,11 @@ export default class Signup extends Component {
username: this.state.username,
};
Forms
.submitRegistration(params)
Forms.submitRegistration(params)
.then(() => this.setState({ success: true }))
.catch((err) => this.setState({ error: { state: true, message: err.messages }}));
.catch((err) =>
this.setState({ error: { state: true, message: err.messages } })
);
};
onChangeHandler = (event) => {