[#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

9 files changed, 90 insertions, 82 deletions

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(
-  <App />,
+  <App child={<PageWrapper />} />,
   document.getElementById('root')
 );
diff --git a/web-ui/src/backup_account/app.js b/web-ui/src/common/app.js
index 49fe0712..f6594557 100644
--- a/web-ui/src/backup_account/app.js
+++ b/web-ui/src/common/app.js
@@ -18,17 +18,17 @@
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';
 
-import PageWrapper from './page';
 import internationalization from '../i18n';
 
-const App = ({ i18n = internationalization }) => (
+const App = ({ i18n = internationalization, child }) => (
   <I18nextProvider i18n={i18n}>
-    <PageWrapper />
+    {child}
   </I18nextProvider>
 );
 
 App.propTypes = {
-  i18n: React.PropTypes.object // eslint-disable-line react/forbid-prop-types
+  i18n: React.PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  child: React.PropTypes.element.isRequired
 };
 
 App.defaultProps = {
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/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(
-  <I18nextProvider i18n={i18n}>
-    <AppWrapper authError={hasQueryParameter('auth-error')} error={hasQueryParameter('error')} />
-  </I18nextProvider>,
+  <App
+    child={
+      <PageWrapper
+        authError={hasQueryParameter('auth-error')}
+        error={hasQueryParameter('error')}
+      />
+    }
+  />,
   document.getElementById('root')
 );
diff --git a/web-ui/src/login/app.js b/web-ui/src/login/page.js
index 3259f7b5..f0a7188b 100644
--- a/web-ui/src/login/app.js
+++ b/web-ui/src/login/page.js
@@ -23,7 +23,7 @@ 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';
+import './page.scss';
 
 const errorMessage = (t, authError) => {
   if (authError) return <AuthError />;
@@ -35,7 +35,7 @@ const rightPanel = (t, error) => {
   return <PixelatedWelcome />;
 };
 
-export const App = ({ t, authError, error }) => (
+export const Page = ({ t, authError, error }) => (
   <div className='login'>
     <img
       className={error ? 'logo small-logo' : 'logo'}
@@ -52,10 +52,10 @@ export const App = ({ t, authError, error }) => (
   </div>
 );
 
-App.propTypes = {
+Page.propTypes = {
   t: React.PropTypes.func.isRequired,
   authError: React.PropTypes.bool,
   error: React.PropTypes.bool
 };
 
-export default translate('', { wait: true })(App);
+export default translate('', { wait: true })(Page);
diff --git a/web-ui/src/login/app.scss b/web-ui/src/login/page.scss
index 14e2d131..14e2d131 100644
--- a/web-ui/src/login/app.scss
+++ b/web-ui/src/login/page.scss
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(<App i18n={testI18n} />);
-  });
-
-  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(<App i18n={testI18n} child={<BackupAccountPage />} />);
+      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(<App i18n={testI18n} child={<LoginPage />} />);
+      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(<App t={mockTranslations} />);
-    expect(app.find('form').props().action).toEqual('/login');
-  });
-
-  it('renders welcome message when no error', () => {
-    app = shallow(<App t={mockTranslations} />);
-    expect(app.find(PixelatedWelcome).length).toEqual(1);
-  });
-
-  it('renders auth error message', () => {
-    app = shallow(<App t={mockTranslations} authError />);
-    expect(app.find(AuthError).length).toEqual(1);
-  });
-
-  it('renders generic error message when error', () => {
-    app = shallow(<App t={mockTranslations} error />);
-    expect(app.find(GenericError).length).toEqual(1);
-  });
-
-  it('does not render welcome message when error', () => {
-    app = shallow(<App t={mockTranslations} error />);
-    expect(app.find(PixelatedWelcome).length).toEqual(0);
-  });
-
-  it('does not render error message', () => {
-    app = shallow(<App t={mockTranslations} />);
-    expect(app.find(AuthError).length).toEqual(0);
-    expect(app.find(GenericError).length).toEqual(0);
-  });
-
-  it('adds small logo class when error', () => {
-    app = shallow(<App t={mockTranslations} error />);
-    expect(app.find('.logo').props().className).toEqual('logo small-logo');
-  });
-
-  it('does not add small logo class when no error', () => {
-    app = shallow(<App t={mockTranslations} />);
-    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(<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(PixelatedWelcome).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(PixelatedWelcome).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');
+  });
+});