Merge pull request #990 from pixelated/login-errors

Create full translation integration test

12 files changed, 110 insertions, 88 deletions

diff --git a/web-ui/config/imagemin.js b/web-ui/config/imagemin.js
index 2b2c87e0..a01f1dac 100644
--- a/web-ui/config/imagemin.js
+++ b/web-ui/config/imagemin.js
@@ -16,10 +16,19 @@
  */
 
 const imagemin = require('imagemin');
+const imageminSvgo = require('imagemin-svgo');
+const imageminPngquant = require('imagemin-pngquant');
 
-imagemin(['app/images/*.{gif,jpg,png,svg}'],
-         'dist/images'
-).then(files => {
+imagemin(['app/images/*.{gif,jpg,png,svg}'], 'dist/public/images', {
+  use: [
+    imageminSvgo({
+      plugins: [
+        {removeViewBox: false}
+      ]
+    }),
+    imageminPngquant()
+  ]
+}).then(files => {
   console.log('Images list:')
   files.map(function(file) { console.log(file.path); });
 });
diff --git a/web-ui/package.json b/web-ui/package.json
index 78ef6fdf..63272743 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -33,6 +33,8 @@
     "i18next-xhr-backend": "^1.2.1",
     "iframe-resizer": "^3.5.7",
     "imagemin": "5.2.1",
+    "imagemin-pngquant": "^5.0.0",
+    "imagemin-svgo": "^5.2.0",
     "jasmine-flight": "^4.0.0",
     "jasmine-jquery": "^2.1.1",
     "jquery": "^3.1.1",
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.css b/web-ui/src/login/login.css
index 5116875e..9628932f 100644
--- a/web-ui/src/login/login.css
+++ b/web-ui/src/login/login.css
@@ -25,6 +25,11 @@ body {
   background-repeat: repeat;
 }
 
+#root {
+  margin-top: 3%;
+  margin-bottom: 3%;
+}
+
 .disclaimer {
   display: block;
   width: 90%;
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 32e3b979..14e2d131 100644
--- a/web-ui/src/login/app.scss
+++ b/web-ui/src/login/page.scss
@@ -23,8 +23,6 @@
   margin: auto;
   max-width: 400px;
   padding: 2em 0;
-  margin-top: 3%;
-  margin-bottom: 3%;
   background-color: $white;
   display: flex;
   flex-direction: column;
@@ -84,7 +82,7 @@
       content: '';
       height: 22em;
       position: absolute;
-      margin-top: inherit;
+      margin-top: 3%;
       top: 2.5em;
       left: 50%;
       border: 1px solid $lighter_gray;
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');
+  });
+});