add FormActionGroup error message test

This commit is contained in:
Keith Grant 2020-02-05 11:26:05 -08:00
parent b7f3852ef9
commit 44e4263bee
3 changed files with 21 additions and 8 deletions

View File

@ -5,11 +5,6 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { ActionGroup as PFActionGroup, Button } from '@patternfly/react-core';
const ErrorMessage = styled('div')`
color: var(--pf-global--danger-color--200);
font-weight: var(--pf-global--FontWeight--bold);
`;
const ActionGroup = styled(PFActionGroup)`
display: flex;
justify-content: flex-end;
@ -34,7 +29,7 @@ const FormActionGroup = ({
i18n,
}) => (
<ActionGroup>
{errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : null}
{errorMessage}
<Button
aria-label={i18n._(t`Save`)}
variant="primary"

View File

@ -4,10 +4,21 @@ import { mountWithContexts } from '@testUtils/enzymeHelpers';
import FormActionGroup from './FormActionGroup';
describe('FormActionGroup', () => {
test('renders the expected content', () => {
test('should render the expected content', () => {
const wrapper = mountWithContexts(
<FormActionGroup onSubmit={() => {}} onCancel={() => {}} />
);
expect(wrapper).toHaveLength(1);
});
test('should display error message if given', () => {
const wrapper = mountWithContexts(
<FormActionGroup
onSubmit={() => {}}
onCancel={() => {}}
errorMessage={<div className="error">oh noes</div>}
/>
);
expect(wrapper.find('.error').text()).toEqual('oh noes');
});
});

View File

@ -1,5 +1,12 @@
import React, { useState, useEffect } from 'react';
import { useFormikContext } from 'formik';
import styled from 'styled-components';
const ErrorMessage = styled('div')`
color: var(--pf-global--danger-color--200);
font-weight: var(--pf-global--FontWeight--bold);
`;
ErrorMessage.displayName = 'ErrorMessage';
function FormSubmitError({ error }) {
const [formError, setFormError] = useState(null);
@ -24,7 +31,7 @@ function FormSubmitError({ error }) {
return null;
}
return <span>{formError.message}</span>;
return <ErrorMessage>{formError.message}</ErrorMessage>;
}
export default FormSubmitError;