add FormError component to display auth errors
This commit is contained in:
parent
0131183237
commit
ad26f1af3a
8 changed files with 57 additions and 5 deletions
|
@ -14,4 +14,8 @@ $break-points: (
|
|||
"590": "only screen and (min-width: 590px)",
|
||||
"700": "only screen and (min-width: 700px)",
|
||||
"900": "only screen and (min-width: 900px)"
|
||||
)
|
||||
);
|
||||
|
||||
$colors: (
|
||||
"error": #aa3333,
|
||||
);
|
|
@ -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;
|
|
@ -0,0 +1,5 @@
|
|||
@import '../../../public/stylesheets/partials/variables';
|
||||
|
||||
span.FormError {
|
||||
color: map-get($colors, "error");;
|
||||
}
|
|
@ -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);
|
||||
|
||||
})
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './Signup.scss';
|
||||
import authServices from '../../services/authServices';
|
||||
import FormError from '../FormError/FormError';
|
||||
|
||||
const Signup = (props) => {
|
||||
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 (
|
||||
|
||||
<div className="Signup" data-testid="Signup">
|
||||
{formError(props.state.errors)}
|
||||
<form
|
||||
data-testid="Signup__form"
|
||||
onSubmit={e => handleSubmit(e)}
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import Signup from './Signup';
|
||||
import { initState } from '../../reducers/init/stateReducer.init';
|
||||
|
||||
test('renders Signup without crashing', () => {
|
||||
const { getByTestId } = render(<Signup />);
|
||||
const { getByTestId } = render(<Signup state={initState()}/>);
|
||||
const SignupDiv = getByTestId('Signup');
|
||||
expect(SignupDiv).toBeInTheDocument();
|
||||
});
|
||||
|
|
|
@ -4,6 +4,7 @@ import type { state } from '../stateReducer';
|
|||
|
||||
export const initState = (): state => {
|
||||
return {
|
||||
user: null
|
||||
user: null,
|
||||
errors: null
|
||||
};
|
||||
}
|
|
@ -15,7 +15,7 @@ export type action = {
|
|||
|
||||
export const stateReducer = (state: state, action: action): state => {
|
||||
const errorStrippedState = stripErrors({...state});
|
||||
console.log(action)
|
||||
|
||||
switch (action.type) {
|
||||
case 'INIT': return initState();
|
||||
|
||||
|
|
Loading…
Reference in a new issue