Translating Loader component

This commit is contained in:
Jeff Avallone 2019-01-15 21:57:43 -05:00
parent d48b48bffc
commit 325f01f034
6 changed files with 23 additions and 9 deletions

View File

@ -113,7 +113,7 @@ exports[`App rendering an expression 2`] = `
] ]
} }
/> />
<Loader /> <LoadNamespace(Loader) />
</Fragment> </Fragment>
`; `;
@ -248,7 +248,7 @@ exports[`App rendering with an invalid syntax 2`] = `
] ]
} }
/> />
<Loader /> <LoadNamespace(Loader) />
</Fragment> </Fragment>
`; `;

View File

@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Loader rendering 1`] = ` exports[`Loader rendering 1`] = `
<Loader> <Loader
t={[Function]}
>
<div <div
className="loader" className="loader"
> >
@ -73,7 +75,7 @@ exports[`Loader rendering 1`] = `
<div <div
className="message" className="message"
> >
Loading... TRANSLATE(Loading...)
</div> </div>
</div> </div>
</Loader> </Loader>

View File

@ -1,14 +1,21 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import { withNamespaces } from 'react-i18next';
import LoaderIcon from 'react-feather/dist/icons/loader'; import LoaderIcon from 'react-feather/dist/icons/loader';
import style from './style.module.css'; import style from './style.module.css';
const Loader = () => ( const Loader = ({ t }) => (
<div className={ style.loader }> <div className={ style.loader }>
<LoaderIcon /> <LoaderIcon />
<div className={ style.message }>Loading...</div> <div className={ style.message }>{ t('Loading...') }</div>
</div> </div>
); );
export default Loader; Loader.propTypes = {
t: PropTypes.func.isRequired
};
export { Loader };
export default withNamespaces()(Loader);

View File

@ -1,14 +1,15 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import Loader from 'components/Loader'; import { mockT } from 'i18n';
import { Loader } from 'components/Loader';
describe('Loader', () => { describe('Loader', () => {
test('rendering', () => { test('rendering', () => {
// Using full rendering here since styles for this depend on the structure // Using full rendering here since styles for this depend on the structure
// of the SVG. // of the SVG.
const component = mount( const component = mount(
<Loader /> <Loader t={ mockT } />
); );
expect(component).toMatchSnapshot(); expect(component).toMatchSnapshot();
}); });

View File

@ -63,3 +63,5 @@
DOWNLOAD SVG DOWNLOAD SVG
"Download PNG": | "Download PNG": |
DOWNLOAD PNG DOWNLOAD PNG
"Loading...": |
LOADING...

View File

@ -63,3 +63,5 @@
Download SVG Download SVG
"Download PNG": | "Download PNG": |
Download PNG Download PNG
"Loading...": |
Loading...