From 7fe1499dfb082045c5d7e3e76363a13e9d8e3618 Mon Sep 17 00:00:00 2001
From: Anike Arni <aarni@thoughtworks.com>
Date: Fri, 10 Feb 2017 18:18:17 -0200
Subject: [#922] Adds integration test for translations

with @tayanefernandes
---
 web-ui/.jshintignore                          |  1 +
 web-ui/package.json                           |  2 ++
 web-ui/src/backup_account/app.js              | 38 +++++++++++++++++++++++++++
 web-ui/src/backup_account/backup_account.html |  2 +-
 web-ui/src/backup_account/backup_account.js   | 10 ++-----
 web-ui/src/backup_account/page.js             |  1 +
 web-ui/test/integration/i18n.js               | 14 ++++++++++
 web-ui/test/integration/setup.js              | 15 +++++++++++
 web-ui/test/integration/translations.spec.js  | 21 +++++++++++++++
 web-ui/webpack.test.config.js                 |  8 ++++++
 10 files changed, 103 insertions(+), 9 deletions(-)
 create mode 100644 web-ui/src/backup_account/app.js
 create mode 100644 web-ui/test/integration/i18n.js
 create mode 100644 web-ui/test/integration/setup.js
 create mode 100644 web-ui/test/integration/translations.spec.js

diff --git a/web-ui/.jshintignore b/web-ui/.jshintignore
index b28da15f..d69450f8 100644
--- a/web-ui/.jshintignore
+++ b/web-ui/.jshintignore
@@ -4,3 +4,4 @@ app/js/lib
 app/js/generated
 src/
 test/unit
+test/integration
diff --git a/web-ui/package.json b/web-ui/package.json
index 06d0abae..c223b88c 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -38,6 +38,7 @@
     "jquery": "^3.1.1",
     "jquery-file-upload": "^4.0.5",
     "jquery-ui": "^1.12.1",
+    "jsdom": "^9.10.0",
     "jshint": "2.9.2",
     "json-loader": "^0.5.4",
     "karma": "0.13.19",
@@ -75,6 +76,7 @@
   "scripts": {
     "test": "npm run lint --silent && npm run build:statics --silent && npm run test:unit",
     "test:unit": "npm run test:coverage && npm run test:karma",
+    "test:integration": "mocha-webpack --webpack-config webpack.test.config.js --require test/integration/setup.js \"test/integration/**/*.spec.js\"",
     "test:coverage": "NODE_ENV=test nyc --check-coverage npm run test:mocha",
     "test:mocha": "mocha-webpack --webpack-config webpack.test.config.js \"test/unit/**/*.spec.js\"",
     "test:karma": "karma start --single-run $GRUNT_OPTS",
diff --git a/web-ui/src/backup_account/app.js b/web-ui/src/backup_account/app.js
new file mode 100644
index 00000000..49fe0712
--- /dev/null
+++ b/web-ui/src/backup_account/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 <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+
+import PageWrapper from './page';
+import internationalization from '../i18n';
+
+const App = ({ i18n = internationalization }) => (
+  <I18nextProvider i18n={i18n}>
+    <PageWrapper />
+  </I18nextProvider>
+);
+
+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.html b/web-ui/src/backup_account/backup_account.html
index ec6213be..fa026e7a 100644
--- a/web-ui/src/backup_account/backup_account.html
+++ b/web-ui/src/backup_account/backup_account.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
-    <title>Pixelated Backup Account</title>
+    <title>Pixelated</title>
   </head>
   <body>
     <div id="root"/>
diff --git a/web-ui/src/backup_account/backup_account.js b/web-ui/src/backup_account/backup_account.js
index d4e0f4e8..fb431cff 100644
--- a/web-ui/src/backup_account/backup_account.js
+++ b/web-ui/src/backup_account/backup_account.js
@@ -18,18 +18,12 @@
 import React from 'react';
 import { render } from 'react-dom';
 import a11y from 'react-a11y';
-import { I18nextProvider } from 'react-i18next';
 
-import 'font-awesome/scss/font-awesome.scss';
-
-import PageWrapper from './page';
-import i18n from '../i18n';
+import App from './app';
 
 if (process.env.NODE_ENV === 'development') a11y(React);
 
 render(
-  <I18nextProvider i18n={i18n}>
-    <PageWrapper />
-  </I18nextProvider>,
+  <App />,
   document.getElementById('root')
 );
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index b5f343a9..c39394e2 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -23,6 +23,7 @@ import InputField from 'src/common/input_field/input_field';
 import Footer from 'src/common/footer/footer';
 import Header from 'src/common/header/header';
 
+import 'font-awesome/scss/font-awesome.scss';
 import './page.scss';
 
 export const Page = ({ t }) => (
diff --git a/web-ui/test/integration/i18n.js b/web-ui/test/integration/i18n.js
new file mode 100644
index 00000000..099df2d7
--- /dev/null
+++ b/web-ui/test/integration/i18n.js
@@ -0,0 +1,14 @@
+import i18n from 'i18next';
+import translations from '../../app/locales/en_US/translation.json';
+
+i18n
+  .init({
+    lng: 'en',
+    resources: {
+      en: {
+        translation: translations
+      }
+    }
+  });
+
+export default i18n;
diff --git a/web-ui/test/integration/setup.js b/web-ui/test/integration/setup.js
new file mode 100644
index 00000000..49cd381e
--- /dev/null
+++ b/web-ui/test/integration/setup.js
@@ -0,0 +1,15 @@
+// Enzyme setup file
+// https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md
+var jsdom = require('jsdom').jsdom;
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js'
+};
diff --git a/web-ui/test/integration/translations.spec.js b/web-ui/test/integration/translations.spec.js
new file mode 100644
index 00000000..1173695d
--- /dev/null
+++ b/web-ui/test/integration/translations.spec.js
@@ -0,0 +1,21 @@
+import { mount } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import App from 'src/backup_account/app';
+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');
+  });
+
+  it('renders translated footer text', () => {
+    expect(app.find('footer').text()).toContain('Product in development. Feedback and issues to team@pixelated-project.org');
+  });
+});
diff --git a/web-ui/webpack.test.config.js b/web-ui/webpack.test.config.js
index d3b245fc..395c3949 100644
--- a/web-ui/webpack.test.config.js
+++ b/web-ui/webpack.test.config.js
@@ -25,6 +25,14 @@ module.exports = {
         test: /\.scss|css$/,
         loader: "css-loader!sass-loader"
       },
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: "url-loader?limit=10000&mimetype=application/font-woff"
+      },
+      {
+        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: "file-loader"
+      },
       {
         test: /\.json$/,
         loader: "json-loader"
-- 
cgit v1.2.3