web: Components: Re-written old ErrorContainer

This commit is contained in:
Alexey Safronov 2020-01-24 16:54:41 +03:00
parent f776054b35
commit cfc4de538f
6 changed files with 1407 additions and 60 deletions

View File

@ -11,7 +11,7 @@ const Error404Container = ({language}) => {
i18n.changeLanguage(language);
}, [language]);
return <ErrorContainer>{t("Error401Text")}</ErrorContainer>;
return <ErrorContainer headerText={t("Error401Text")} />;
};
function mapStateToProps(state) {

View File

@ -11,7 +11,7 @@ const Error404Container = ({language}) => {
i18n.changeLanguage(language);
}, [language]);
return <ErrorContainer>{t("Error404Text")}</ErrorContainer>;
return <ErrorContainer headerText={t("Error404Text")} />;
};
function mapStateToProps(state) {

View File

@ -11,7 +11,7 @@ const ErrorOfflineContainer = ({language}) => {
i18n.changeLanguage(language);
}, [language]);
return <ErrorContainer>{t("ErrorOfflineText")}</ErrorContainer>;
return <ErrorContainer headerText={t("ErrorOfflineText")} />;
};
function mapStateToProps(state) {

View File

@ -3,16 +3,16 @@ import { storiesOf } from '@storybook/react'
import withReadme from 'storybook-readme/with-readme'
import Readme from './README.md'
import { withKnobs, text } from '@storybook/addon-knobs/react';
import Text from '../text';
import Heading from '../heading';
import ErrorContainer from '.';
storiesOf('Components| ErrorContainer', module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add('base', () => (
<ErrorContainer>
<Heading level={2} size='medium' isInline>{text("Headline text", "Some error has happened")}</Heading>
<Text as="span">{text("Body text", "Try again later")}</Text>
</ErrorContainer>
<ErrorContainer
headerText={text("headerText", "Error 404. Page not found")}
bodyText={text("bodyText", "This page was removed, renamed or doesnt exist anymore.")}
returnText={text("buttonText", "Return to homepage")}
returnUrl={text("buttonUrl", "/")}
/>
));

View File

@ -5,12 +5,28 @@ import ErrorContainer from '.';
describe('<ErrorContainer />', () => {
it('renders without error', () => {
const wrapper = mount(
<ErrorContainer>Some error has happened</ErrorContainer>
<ErrorContainer />
);
expect(wrapper).toExist();
});
it('renders with props', () => {
const wrapper = mount(
<ErrorContainer
headerText="Some error has happened"
bodyText="Try again later"
buttonText="Go back"
buttonUrl="/page" />
);
expect(wrapper).toExist();
expect(wrapper.prop('headerText')).toEqual('Some error has happened');
expect(wrapper.prop('bodyText')).toEqual('Try again later');
expect(wrapper.prop('buttonText')).toEqual('Go back');
expect(wrapper.prop('buttonUrl')).toEqual('/page');
});
it('accepts id', () => {
const wrapper = mount(
<ErrorContainer id="testId" />

File diff suppressed because one or more lines are too long