From 1997c401a5e67b76663d3996ec085eb6782c34e9 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Thu, 23 Feb 2017 11:34:14 -0300 Subject: [#907] Adds integration test for translations For this test, we refactored the way translations were done for backup account and login, concentrating them in the common/app.js component. with @thaissiqueira --- web-ui/src/backup_account/app.js | 38 ---------- web-ui/src/backup_account/backup_account.js | 5 +- web-ui/src/common/app.js | 38 ++++++++++ web-ui/src/i18n.js | 1 + web-ui/src/login/app.js | 61 ---------------- web-ui/src/login/app.scss | 103 --------------------------- web-ui/src/login/login.js | 16 +++-- web-ui/src/login/page.js | 61 ++++++++++++++++ web-ui/src/login/page.scss | 103 +++++++++++++++++++++++++++ web-ui/test/integration/translations.spec.js | 28 ++++---- web-ui/test/unit/login/app.spec.js | 53 -------------- web-ui/test/unit/login/page.spec.js | 53 ++++++++++++++ 12 files changed, 284 insertions(+), 276 deletions(-) delete mode 100644 web-ui/src/backup_account/app.js create mode 100644 web-ui/src/common/app.js delete mode 100644 web-ui/src/login/app.js delete mode 100644 web-ui/src/login/app.scss create mode 100644 web-ui/src/login/page.js create mode 100644 web-ui/src/login/page.scss delete mode 100644 web-ui/test/unit/login/app.spec.js create mode 100644 web-ui/test/unit/login/page.spec.js (limited to 'web-ui') diff --git a/web-ui/src/backup_account/app.js b/web-ui/src/backup_account/app.js deleted file mode 100644 index 49fe0712..00000000 --- a/web-ui/src/backup_account/app.js +++ /dev/null @@ -1,38 +0,0 @@ -/* - * Copyright (c) 2017 ThoughtWorks, Inc. - * - * Pixelated is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * Pixelated is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with Pixelated. If not, see . - */ - -import React from 'react'; -import { I18nextProvider } from 'react-i18next'; - -import PageWrapper from './page'; -import internationalization from '../i18n'; - -const App = ({ i18n = internationalization }) => ( - - - -); - -App.propTypes = { - i18n: React.PropTypes.object // eslint-disable-line react/forbid-prop-types -}; - -App.defaultProps = { - i18n: internationalization -}; - -export default App; diff --git a/web-ui/src/backup_account/backup_account.js b/web-ui/src/backup_account/backup_account.js index fb431cff..ac218a39 100644 --- a/web-ui/src/backup_account/backup_account.js +++ b/web-ui/src/backup_account/backup_account.js @@ -19,11 +19,12 @@ import React from 'react'; import { render } from 'react-dom'; import a11y from 'react-a11y'; -import App from './app'; +import App from 'src/common/app'; +import PageWrapper from './page'; if (process.env.NODE_ENV === 'development') a11y(React); render( - , + } />, document.getElementById('root') ); diff --git a/web-ui/src/common/app.js b/web-ui/src/common/app.js new file mode 100644 index 00000000..f6594557 --- /dev/null +++ b/web-ui/src/common/app.js @@ -0,0 +1,38 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see . + */ + +import React from 'react'; +import { I18nextProvider } from 'react-i18next'; + +import internationalization from '../i18n'; + +const App = ({ i18n = internationalization, child }) => ( + + {child} + +); + +App.propTypes = { + i18n: React.PropTypes.object, // eslint-disable-line react/forbid-prop-types + child: React.PropTypes.element.isRequired +}; + +App.defaultProps = { + i18n: internationalization +}; + +export default App; diff --git a/web-ui/src/i18n.js b/web-ui/src/i18n.js index 64c7b8a1..db107dc7 100644 --- a/web-ui/src/i18n.js +++ b/web-ui/src/i18n.js @@ -31,6 +31,7 @@ i18n .use(detector) .init({ fallbackLng: 'en_US', + parseMissingKeyHandler: key => (`"${key} untranslated"`), backend: { loadPath: 'public/locales/{{lng}}/{{ns}}.json' } diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js deleted file mode 100644 index 3259f7b5..00000000 --- a/web-ui/src/login/app.js +++ /dev/null @@ -1,61 +0,0 @@ -/* - * Copyright (c) 2017 ThoughtWorks, Inc. - * - * Pixelated is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * Pixelated is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with Pixelated. If not, see . - */ - -import React from 'react'; -import { translate } from 'react-i18next'; -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 './app.scss'; - -const errorMessage = (t, authError) => { - if (authError) return ; - return
; -}; - -const rightPanel = (t, error) => { - if (error) return ; - return ; -}; - -export const App = ({ t, authError, error }) => ( -
- Pixelated logo - {rightPanel(t, error)} -
- {errorMessage(t, authError)} - - - - -
-); - -App.propTypes = { - t: React.PropTypes.func.isRequired, - authError: React.PropTypes.bool, - error: React.PropTypes.bool -}; - -export default translate('', { wait: true })(App); diff --git a/web-ui/src/login/app.scss b/web-ui/src/login/app.scss deleted file mode 100644 index 14e2d131..00000000 --- a/web-ui/src/login/app.scss +++ /dev/null @@ -1,103 +0,0 @@ -/* - * Copyright (c) 2017 ThoughtWorks, Inc. - * - * Pixelated is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * Pixelated is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with Pixelated. If not, see . - */ - -@import "~scss/base/colors"; - -.login { - display: block; - width: 90%; - margin: auto; - max-width: 400px; - padding: 2em 0; - background-color: $white; - display: flex; - flex-direction: column; - align-items: center; -} - -#login_form { - width: 70%; - display: flex; - align-items: center; - flex-direction: column; - - .input-field-group { - width: 100%; - margin: 0 0 1.5em 0; - } - - .submit-button { - width: 100%; - } -} - -.logo { - width: 70%; - margin-bottom: 2em; -} - -.small-logo { - width: 50%; - margin-bottom: 1em; -} - -@media only screen and (min-width : 500px) { - #login_form { - margin-top: 1em; - } - - .login { - width: 60%; - } -} - -@media only screen and (min-width : 960px) { - .content { - font-size: 0.9em; - } - - .login { - display: flex; - align-items: flex-start; - width: 70%; - max-width: 700px; - padding: 2.5em 0; - height: 22em; - - &:after { - content: ''; - height: 22em; - position: absolute; - margin-top: 3%; - top: 2.5em; - left: 50%; - border: 1px solid $lighter_gray; - transform: scaleX(0.5); - } - } - - .logo { - height: 6em; - margin-bottom: 1em; - margin-top: 1.5em; - } - - .logo, #login_form { - width: 34%; - margin-left: 8%; - } -} diff --git a/web-ui/src/login/login.js b/web-ui/src/login/login.js index b1d895ae..c8e08762 100644 --- a/web-ui/src/login/login.js +++ b/web-ui/src/login/login.js @@ -18,17 +18,21 @@ import React from 'react'; import { render } from 'react-dom'; import a11y from 'react-a11y'; -import { I18nextProvider } from 'react-i18next'; -import AppWrapper from './app'; -import i18n from '../i18n'; +import App from 'src/common/app'; +import PageWrapper from './page'; import { hasQueryParameter } from '../util'; if (process.env.NODE_ENV === 'development') a11y(React); render( - - - , + + } + />, document.getElementById('root') ); diff --git a/web-ui/src/login/page.js b/web-ui/src/login/page.js new file mode 100644 index 00000000..f0a7188b --- /dev/null +++ b/web-ui/src/login/page.js @@ -0,0 +1,61 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see . + */ + +import React from 'react'; +import { translate } from 'react-i18next'; +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 './page.scss'; + +const errorMessage = (t, authError) => { + if (authError) return ; + return
; +}; + +const rightPanel = (t, error) => { + if (error) return ; + return ; +}; + +export const Page = ({ t, authError, error }) => ( +
+ Pixelated logo + {rightPanel(t, error)} +
+ {errorMessage(t, authError)} + + + + +
+); + +Page.propTypes = { + t: React.PropTypes.func.isRequired, + authError: React.PropTypes.bool, + error: React.PropTypes.bool +}; + +export default translate('', { wait: true })(Page); diff --git a/web-ui/src/login/page.scss b/web-ui/src/login/page.scss new file mode 100644 index 00000000..14e2d131 --- /dev/null +++ b/web-ui/src/login/page.scss @@ -0,0 +1,103 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see . + */ + +@import "~scss/base/colors"; + +.login { + display: block; + width: 90%; + margin: auto; + max-width: 400px; + padding: 2em 0; + background-color: $white; + display: flex; + flex-direction: column; + align-items: center; +} + +#login_form { + width: 70%; + display: flex; + align-items: center; + flex-direction: column; + + .input-field-group { + width: 100%; + margin: 0 0 1.5em 0; + } + + .submit-button { + width: 100%; + } +} + +.logo { + width: 70%; + margin-bottom: 2em; +} + +.small-logo { + width: 50%; + margin-bottom: 1em; +} + +@media only screen and (min-width : 500px) { + #login_form { + margin-top: 1em; + } + + .login { + width: 60%; + } +} + +@media only screen and (min-width : 960px) { + .content { + font-size: 0.9em; + } + + .login { + display: flex; + align-items: flex-start; + width: 70%; + max-width: 700px; + padding: 2.5em 0; + height: 22em; + + &:after { + content: ''; + height: 22em; + position: absolute; + margin-top: 3%; + top: 2.5em; + left: 50%; + border: 1px solid $lighter_gray; + transform: scaleX(0.5); + } + } + + .logo { + height: 6em; + margin-bottom: 1em; + margin-top: 1.5em; + } + + .logo, #login_form { + width: 34%; + margin-left: 8%; + } +} diff --git a/web-ui/test/integration/translations.spec.js b/web-ui/test/integration/translations.spec.js index 1173695d..fe17838b 100644 --- a/web-ui/test/integration/translations.spec.js +++ b/web-ui/test/integration/translations.spec.js @@ -1,21 +1,23 @@ import { mount } from 'enzyme'; import expect from 'expect'; import React from 'react'; -import App from 'src/backup_account/app'; -import testI18n from './i18n' +import App from 'src/common/app'; +import BackupAccountPage from 'src/backup_account/page'; +import LoginPage from 'src/login/page'; +import testI18n from './i18n'; -describe('App', () => { - let app; - - beforeEach(() => { - app = mount(); - }); - - it('renders translated header logout text', () => { - expect(app.find('header').text()).toContain('Logout'); +describe('Translations', () => { + context('Backup Account Page', () => { + it('translates all key', () => { + const app = mount(} />); + expect(app.text()).toNotContain('untranslated', 'Unstranslated message found in the text: ' + app.text()); + }); }); - it('renders translated footer text', () => { - expect(app.find('footer').text()).toContain('Product in development. Feedback and issues to team@pixelated-project.org'); + context('Login Page', () => { + it('translates all key', () => { + const app = mount(} />); + expect(app.text()).toNotContain('untranslated', 'Unstranslated message found in the text: ' + app.text()); + }); }); }); diff --git a/web-ui/test/unit/login/app.spec.js b/web-ui/test/unit/login/app.spec.js deleted file mode 100644 index 39d21f04..00000000 --- a/web-ui/test/unit/login/app.spec.js +++ /dev/null @@ -1,53 +0,0 @@ -import { shallow } from 'enzyme'; -import expect from 'expect'; -import React from 'react'; -import { App } from 'src/login/app'; -import AuthError from 'src/login/error/auth_error'; -import GenericError from 'src/login/error/generic_error'; -import PixelatedWelcome from 'src/login/about/pixelated_welcome'; - -describe('App', () => { - let app; - const mockTranslations = key => key; - - it('renders login form', () => { - app = shallow(); - expect(app.find('form').props().action).toEqual('/login'); - }); - - it('renders welcome message when no error', () => { - app = shallow(); - expect(app.find(PixelatedWelcome).length).toEqual(1); - }); - - it('renders auth error message', () => { - app = shallow(); - expect(app.find(AuthError).length).toEqual(1); - }); - - it('renders generic error message when error', () => { - app = shallow(); - expect(app.find(GenericError).length).toEqual(1); - }); - - it('does not render welcome message when error', () => { - app = shallow(); - expect(app.find(PixelatedWelcome).length).toEqual(0); - }); - - it('does not render error message', () => { - app = shallow(); - expect(app.find(AuthError).length).toEqual(0); - expect(app.find(GenericError).length).toEqual(0); - }); - - it('adds small logo class when error', () => { - app = shallow(); - expect(app.find('.logo').props().className).toEqual('logo small-logo'); - }); - - it('does not add small logo class when no error', () => { - app = shallow(); - expect(app.find('.logo').props().className).toEqual('logo'); - }); -}); diff --git a/web-ui/test/unit/login/page.spec.js b/web-ui/test/unit/login/page.spec.js new file mode 100644 index 00000000..b4063222 --- /dev/null +++ b/web-ui/test/unit/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 PixelatedWelcome from 'src/login/about/pixelated_welcome'; + +describe('Page', () => { + let page; + const mockTranslations = key => key; + + it('renders login form', () => { + page = shallow(); + expect(page.find('form').props().action).toEqual('/login'); + }); + + it('renders welcome message when no error', () => { + page = shallow(); + expect(page.find(PixelatedWelcome).length).toEqual(1); + }); + + it('renders auth error message', () => { + page = shallow(); + expect(page.find(AuthError).length).toEqual(1); + }); + + it('renders generic error message when error', () => { + page = shallow(); + expect(page.find(GenericError).length).toEqual(1); + }); + + it('does not render welcome message when error', () => { + page = shallow(); + expect(page.find(PixelatedWelcome).length).toEqual(0); + }); + + it('does not render error message', () => { + page = shallow(); + expect(page.find(AuthError).length).toEqual(0); + expect(page.find(GenericError).length).toEqual(0); + }); + + it('adds small logo class when error', () => { + page = shallow(); + expect(page.find('.logo').props().className).toEqual('logo small-logo'); + }); + + it('does not add small logo class when no error', () => { + page = shallow(); + expect(page.find('.logo').props().className).toEqual('logo'); + }); +}); -- cgit v1.2.3