12 files changed, 116 insertions, 12 deletions

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');
+  });
+});