diff options
Diffstat (limited to 'web-ui/src')
25 files changed, 234 insertions, 15 deletions
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js new file mode 100644 index 00000000..ece61336 --- /dev/null +++ b/web-ui/src/backup_account/page.spec.js @@ -0,0 +1,25 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { Page } from 'src/backup_account/page'; + +describe('BackupAccount', () => { + let page; + + beforeEach(() => { + const mockTranslations = key => key; + page = shallow(<Page t={mockTranslations} />); + }); + + it('renders backup email page title', () => { + expect(page.find('h1').text()).toEqual('backup-account.title'); + }); + + it('renders backup account email input field', () => { + expect(page.find('InputField').props().name).toEqual('email'); + }); + + it('renders backup account submit button', () => { + expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.button'); + }); +}); diff --git a/web-ui/src/common/app.js b/web-ui/src/common/app.js index f6594557..03a69fc9 100644 --- a/web-ui/src/common/app.js +++ b/web-ui/src/common/app.js @@ -18,7 +18,7 @@ import React from 'react'; import { I18nextProvider } from 'react-i18next'; -import internationalization from '../i18n'; +import internationalization from 'src/common/i18n'; const App = ({ i18n = internationalization, child }) => ( <I18nextProvider i18n={i18n}> diff --git a/web-ui/src/common/footer/footer.spec.js b/web-ui/src/common/footer/footer.spec.js new file mode 100644 index 00000000..f1247233 --- /dev/null +++ b/web-ui/src/common/footer/footer.spec.js @@ -0,0 +1,17 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { Footer } from 'src/common/footer/footer'; + +describe('Footer', () => { + let footer; + + beforeEach(() => { + const mockTranslations = key => key; + footer = shallow(<Footer t={mockTranslations} />); + }); + + it('renders the footer content', () => { + expect(footer.find('footer').text()).toContain('footer-text'); + }); +}); diff --git a/web-ui/src/common/header/header.spec.js b/web-ui/src/common/header/header.spec.js new file mode 100644 index 00000000..82e29e1c --- /dev/null +++ b/web-ui/src/common/header/header.spec.js @@ -0,0 +1,17 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { Header } from 'src/common/header/header'; + +describe('Header', () => { + let header; + + beforeEach(() => { + const mockTranslations = key => key; + header = shallow(<Header t={mockTranslations} />); + }); + + it('renders the header content', () => { + expect(header.find('header').text()).toContain('logout'); + }); +}); diff --git a/web-ui/src/i18n.js b/web-ui/src/common/i18n.js index db107dc7..db107dc7 100644 --- a/web-ui/src/i18n.js +++ b/web-ui/src/common/i18n.js diff --git a/web-ui/src/common/input_field/input_field.js b/web-ui/src/common/input_field/input_field.js index d4876d9f..a92faeb9 100644 --- a/web-ui/src/common/input_field/input_field.js +++ b/web-ui/src/common/input_field/input_field.js @@ -17,7 +17,7 @@ import React from 'react'; -import './input-field.scss'; +import './input_field.scss'; const InputField = ({ label, name, type = 'text' }) => ( <div className='input-field-group'> diff --git a/web-ui/src/common/input_field/input-field.scss b/web-ui/src/common/input_field/input_field.scss index dd8e8927..dd8e8927 100644 --- a/web-ui/src/common/input_field/input-field.scss +++ b/web-ui/src/common/input_field/input_field.scss diff --git a/web-ui/src/common/input_field/input_field.spec.js b/web-ui/src/common/input_field/input_field.spec.js new file mode 100644 index 00000000..0c044ce1 --- /dev/null +++ b/web-ui/src/common/input_field/input_field.spec.js @@ -0,0 +1,20 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import InputField from 'src/common/input_field/input_field'; + +describe('InputField', () => { + let inputField; + + beforeEach(() => { + inputField = shallow(<InputField label='Email' name='email' />); + }); + + it('renders an input of type text for email', () => { + expect(inputField.find('input[type="text"]').props().name).toEqual('email'); + }); + + it('renders a label for the email', () => { + expect(inputField.find('label').text()).toEqual('Email'); + }); +}); diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js index fb87bf7d..4754e042 100644 --- a/web-ui/src/common/submit_button/submit_button.js +++ b/web-ui/src/common/submit_button/submit_button.js @@ -17,7 +17,7 @@ import React from 'react'; -import './submit-button.scss'; +import './submit_button.scss'; const SubmitButton = ({ buttonText }) => ( <input type='submit' className='submit-button' value={buttonText} /> diff --git a/web-ui/src/common/submit_button/submit-button.scss b/web-ui/src/common/submit_button/submit_button.scss index 13cb7607..13cb7607 100644 --- a/web-ui/src/common/submit_button/submit-button.scss +++ b/web-ui/src/common/submit_button/submit_button.scss diff --git a/web-ui/src/common/submit_button/submit_button.spec.js b/web-ui/src/common/submit_button/submit_button.spec.js new file mode 100644 index 00000000..8279547c --- /dev/null +++ b/web-ui/src/common/submit_button/submit_button.spec.js @@ -0,0 +1,16 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import SubmitButton from 'src/common/submit_button/submit_button'; + +describe('SubmitButton', () => { + let submitButton; + + beforeEach(() => { + submitButton = shallow(<SubmitButton buttonText='Add Email' />); + }); + + it('renders an input of type submit for add email', () => { + expect(submitButton.find('input[type="submit"]').props().value).toEqual('Add Email'); + }); +}); diff --git a/web-ui/src/util.js b/web-ui/src/common/util.js index effb3d9c..effb3d9c 100644 --- a/web-ui/src/util.js +++ b/web-ui/src/common/util.js diff --git a/web-ui/src/common/util.spec.js b/web-ui/src/common/util.spec.js new file mode 100644 index 00000000..805d9dd5 --- /dev/null +++ b/web-ui/src/common/util.spec.js @@ -0,0 +1,20 @@ +import expect from 'expect'; +import Util from 'src/common/util'; + +describe('Utils', () => { + describe('.hasQueryParameter', () => { + global.window = { + location: { + search: '?auth-error&lng=pt-BR' + } + }; + + it('checks if param included in query parameters', () => { + expect(Util.hasQueryParameter('auth-error')).toBe(true); + }); + + it('checks if param not included in query parameters', () => { + expect(Util.hasQueryParameter('error')).toBe(false); + }); + }); +}); diff --git a/web-ui/src/login/about/pixelated_welcome.js b/web-ui/src/login/about/welcome.js index 82a7d7d0..93aae8e1 100644 --- a/web-ui/src/login/about/pixelated_welcome.js +++ b/web-ui/src/login/about/welcome.js @@ -18,10 +18,10 @@ import React from 'react'; import { translate } from 'react-i18next'; -import './pixelated-welcome.scss'; +import './welcome.scss'; -export const PixelatedWelcome = ({ t }) => ( - <div className='pixelated-welcome'> +export const Welcome = ({ t }) => ( + <div className='welcome'> <img className='welcome-logo' src='/public/images/welcome.svg' alt={t('login.welcome-image-alt')} /> <div> <h3>{t('login.welcome-message')}</h3> @@ -29,8 +29,8 @@ export const PixelatedWelcome = ({ t }) => ( </div> ); -PixelatedWelcome.propTypes = { +Welcome.propTypes = { t: React.PropTypes.func.isRequired }; -export default translate('', { wait: true })(PixelatedWelcome); +export default translate('', { wait: true })(Welcome); diff --git a/web-ui/src/login/about/pixelated-welcome.scss b/web-ui/src/login/about/welcome.scss index 17d05f13..1492b154 100644 --- a/web-ui/src/login/about/pixelated-welcome.scss +++ b/web-ui/src/login/about/welcome.scss @@ -17,12 +17,12 @@ @import "~scss/base/colors"; -.pixelated-welcome { +.welcome { display: none; } @media only screen and (min-width : 960px) { - .pixelated-welcome { + .welcome { font-size: 0.9em; color: $medium_grey; display: flex; diff --git a/web-ui/src/login/about/welcome.spec.js b/web-ui/src/login/about/welcome.spec.js new file mode 100644 index 00000000..3e190c0c --- /dev/null +++ b/web-ui/src/login/about/welcome.spec.js @@ -0,0 +1,17 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { Welcome } from 'src/login/about/welcome'; + +describe('Welcome', () => { + let welcome; + const mockTranslations = key => key; + + beforeEach(() => { + welcome = shallow(<Welcome t={mockTranslations} />); + }); + + it('renders welcome component', () => { + expect(welcome.find('.welcome').length).toEqual(1); + }); +}); diff --git a/web-ui/src/login/error/auth_error.js b/web-ui/src/login/error/auth_error.js index ceeaf42b..5dbbc3e7 100644 --- a/web-ui/src/login/error/auth_error.js +++ b/web-ui/src/login/error/auth_error.js @@ -18,7 +18,7 @@ import React from 'react'; import { translate } from 'react-i18next'; -import './auth-error.scss'; +import './auth_error.scss'; export const AuthError = ({ t }) => ( <p className='auth-error'>{t('error.auth')}</p> diff --git a/web-ui/src/login/error/auth-error.scss b/web-ui/src/login/error/auth_error.scss index f6256be4..f6256be4 100644 --- a/web-ui/src/login/error/auth-error.scss +++ b/web-ui/src/login/error/auth_error.scss diff --git a/web-ui/src/login/error/auth_error.spec.js b/web-ui/src/login/error/auth_error.spec.js new file mode 100644 index 00000000..55d8920f --- /dev/null +++ b/web-ui/src/login/error/auth_error.spec.js @@ -0,0 +1,17 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { AuthError } from 'src/login/error/auth_error'; + +describe('AuthError', () => { + let authError; + const mockTranslations = key => key; + + beforeEach(() => { + authError = shallow(<AuthError t={mockTranslations} />); + }); + + it('renders error message', () => { + expect(authError.find('.auth-error').length).toEqual(1); + }); +}); diff --git a/web-ui/src/login/error/generic_error.js b/web-ui/src/login/error/generic_error.js index 023e1bcf..b233d5bb 100644 --- a/web-ui/src/login/error/generic_error.js +++ b/web-ui/src/login/error/generic_error.js @@ -18,7 +18,7 @@ import React from 'react'; import { translate } from 'react-i18next'; -import './generic-error.scss'; +import './generic_error.scss'; export const GenericError = ({ t }) => ( <div className='generic-error'> diff --git a/web-ui/src/login/error/generic-error.scss b/web-ui/src/login/error/generic_error.scss index 5a077f32..5a077f32 100644 --- a/web-ui/src/login/error/generic-error.scss +++ b/web-ui/src/login/error/generic_error.scss diff --git a/web-ui/src/login/error/generic_error.spec.js b/web-ui/src/login/error/generic_error.spec.js new file mode 100644 index 00000000..1ef8349d --- /dev/null +++ b/web-ui/src/login/error/generic_error.spec.js @@ -0,0 +1,17 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { GenericError } from 'src/login/error/generic_error'; + +describe('GenericError', () => { + let genericError; + const mockTranslations = key => key; + + beforeEach(() => { + genericError = shallow(<GenericError t={mockTranslations} />); + }); + + it('renders error message', () => { + expect(genericError.find('.generic-error').length).toEqual(1); + }); +}); diff --git a/web-ui/src/login/login.js b/web-ui/src/login/login.js index c8e08762..39500b9d 100644 --- a/web-ui/src/login/login.js +++ b/web-ui/src/login/login.js @@ -19,9 +19,9 @@ import React from 'react'; import { render } from 'react-dom'; import a11y from 'react-a11y'; +import { hasQueryParameter } from 'src/common/util'; import App from 'src/common/app'; import PageWrapper from './page'; -import { hasQueryParameter } from '../util'; if (process.env.NODE_ENV === 'development') a11y(React); diff --git a/web-ui/src/login/page.js b/web-ui/src/login/page.js index f0a7188b..6be240b2 100644 --- a/web-ui/src/login/page.js +++ b/web-ui/src/login/page.js @@ -21,7 +21,7 @@ import InputField from 'src/common/input_field/input_field'; import SubmitButton from 'src/common/submit_button/submit_button'; import AuthError from 'src/login/error/auth_error'; import GenericError from 'src/login/error/generic_error'; -import PixelatedWelcome from 'src/login/about/pixelated_welcome'; +import Welcome from 'src/login/about/welcome'; import './page.scss'; @@ -32,7 +32,7 @@ const errorMessage = (t, authError) => { const rightPanel = (t, error) => { if (error) return <GenericError />; - return <PixelatedWelcome />; + return <Welcome />; }; export const Page = ({ t, authError, error }) => ( diff --git a/web-ui/src/login/page.spec.js b/web-ui/src/login/page.spec.js new file mode 100644 index 00000000..05607ecb --- /dev/null +++ b/web-ui/src/login/page.spec.js @@ -0,0 +1,53 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { Page } from 'src/login/page'; +import AuthError from 'src/login/error/auth_error'; +import GenericError from 'src/login/error/generic_error'; +import Welcome from 'src/login/about/welcome'; + +describe('Login', () => { + let page; + const mockTranslations = key => key; + + it('renders login form', () => { + page = shallow(<Page t={mockTranslations} />); + expect(page.find('form').props().action).toEqual('/login'); + }); + + it('renders welcome message when no error', () => { + page = shallow(<Page t={mockTranslations} />); + expect(page.find(Welcome).length).toEqual(1); + }); + + it('renders auth error message', () => { + page = shallow(<Page t={mockTranslations} authError />); + expect(page.find(AuthError).length).toEqual(1); + }); + + it('renders generic error message when error', () => { + page = shallow(<Page t={mockTranslations} error />); + expect(page.find(GenericError).length).toEqual(1); + }); + + it('does not render welcome message when error', () => { + page = shallow(<Page t={mockTranslations} error />); + expect(page.find(Welcome).length).toEqual(0); + }); + + it('does not render error message', () => { + page = shallow(<Page t={mockTranslations} />); + expect(page.find(AuthError).length).toEqual(0); + expect(page.find(GenericError).length).toEqual(0); + }); + + it('adds small logo class when error', () => { + page = shallow(<Page t={mockTranslations} error />); + expect(page.find('.logo').props().className).toEqual('logo small-logo'); + }); + + it('does not add small logo class when no error', () => { + page = shallow(<Page t={mockTranslations} />); + expect(page.find('.logo').props().className).toEqual('logo'); + }); +}); |