add FormError component to display auth errors

This commit is contained in:
Sorrel Bri 2020-01-17 14:27:31 -08:00 committed by sorrelbri
parent 8c6e38ec66
commit c2a0ad2ff2
8 changed files with 57 additions and 5 deletions

View file

@ -14,4 +14,8 @@ $break-points: (
"590": "only screen and (min-width: 590px)", "590": "only screen and (min-width: 590px)",
"700": "only screen and (min-width: 700px)", "700": "only screen and (min-width: 700px)",
"900": "only screen and (min-width: 900px)" "900": "only screen and (min-width: 900px)"
) );
$colors: (
"error": #aa3333,
);

View file

@ -0,0 +1,13 @@
import React from 'react';
import './FormError.scss';
const FormError = (props) => {
const errorMessage = props.error;
return (
<span data-testid="FormError" className="FormError">
{errorMessage}
</span>
);
}
export default FormError;

View file

@ -0,0 +1,5 @@
@import '../../../public/stylesheets/partials/variables';
span.FormError {
color: map-get($colors, "error");;
}

View file

@ -0,0 +1,17 @@
import React from 'react';
import { render } from '@testing-library/react';
import FormError from './FormError';
test('renders FormError without crashing', () => {
const { getByTestId } = render(<FormError />);
const FormErrorSpan = getByTestId('FormError');
expect(FormErrorSpan).toBeInTheDocument();
});
test('renders FormError with error message', () => {
const errorMessage = "User already exists!";
const { getByTestId } = render(<FormError error={errorMessage}/>);
const FormErrorSpan = getByTestId('FormError');
expect(FormErrorSpan).toHaveTextContent(errorMessage);
})

View file

@ -1,6 +1,7 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import './Signup.scss'; import './Signup.scss';
import authServices from '../../services/authServices'; import authServices from '../../services/authServices';
import FormError from '../FormError/FormError';
const Signup = (props) => { const Signup = (props) => {
const [ username, setUsername ] = useState(''); const [ username, setUsername ] = useState('');
@ -23,8 +24,18 @@ const Signup = (props) => {
}) })
} }
const formError = errors => {
if(!errors) return <></>;
if (errors.auth) {
return <FormError error={errors.auth}/>
}
}
return ( return (
<div className="Signup" data-testid="Signup"> <div className="Signup" data-testid="Signup">
{formError(props.state.errors)}
<form <form
data-testid="Signup__form" data-testid="Signup__form"
onSubmit={e => handleSubmit(e)} onSubmit={e => handleSubmit(e)}

View file

@ -1,9 +1,10 @@
import React from 'react'; import React from 'react';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import Signup from './Signup'; import Signup from './Signup';
import { initState } from '../../reducers/init/stateReducer.init';
test('renders Signup without crashing', () => { test('renders Signup without crashing', () => {
const { getByTestId } = render(<Signup />); const { getByTestId } = render(<Signup state={initState()}/>);
const SignupDiv = getByTestId('Signup'); const SignupDiv = getByTestId('Signup');
expect(SignupDiv).toBeInTheDocument(); expect(SignupDiv).toBeInTheDocument();
}); });

View file

@ -4,6 +4,7 @@ import type { state } from '../stateReducer';
export const initState = (): state => { export const initState = (): state => {
return { return {
user: null user: null,
errors: null
}; };
} }

View file

@ -15,7 +15,7 @@ export type action = {
export const stateReducer = (state: state, action: action): state => { export const stateReducer = (state: state, action: action): state => {
const errorStrippedState = stripErrors({...state}); const errorStrippedState = stripErrors({...state});
console.log(action)
switch (action.type) { switch (action.type) {
case 'INIT': return initState(); case 'INIT': return initState();