Merge branch 'xp-login'

2 files changed, 57 insertions, 37 deletions

diff --git a/test/components/AccountInput.spec.js b/test/components/AccountInput.spec.js
index 701a1c243e..a10326bc17 100644
--- a/test/components/AccountInput.spec.js
+++ b/test/components/AccountInput.spec.js
@@ -2,17 +2,15 @@
 import { expect } from 'chai';
 import { createKeyEvent } from '../helpers/dom-events';
 import * as React from 'react';
-import ReactTestUtils, { Simulate } from 'react-dom/test-utils';
+import { shallow } from 'enzyme';
+require('../setup/enzyme');
 import AccountInput from '../../app/components/AccountInput';
 
 import type { AccountInputProps } from '../../app/components/AccountInput';
 
 describe('components/AccountInput', () => {
   const getInputRef = (component) => {
-    const node = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'input');
-    if(!(node instanceof HTMLInputElement)) {
-      throw new Error('Node is expected to be an instance of HTMLInputElement');
-    }
+    const node = getComponent(component, 'AccountInput');
     return node;
   };
 
@@ -23,8 +21,8 @@ describe('components/AccountInput', () => {
       onChange: null
     };
     const props = Object.assign({}, defaultProps, mergeProps);
-    return ReactTestUtils.renderIntoDocument(
-      <AccountInput { ...props } />
+    return shallow(
+      <AccountInput {...props} />
     );
   };
 
@@ -32,7 +30,7 @@ describe('components/AccountInput', () => {
     const component = render({
       onEnter: () => done()
     });
-    Simulate.keyUp(getInputRef(component), createKeyEvent('Enter'));
+    keyPress(getInputRef(component), createKeyEvent('Enter'));
   });
 
   it('should call onChange', (done) => {
@@ -42,7 +40,7 @@ describe('components/AccountInput', () => {
         done();
       }
     });
-    Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
+    keyPress(getInputRef(component), createKeyEvent('1'));
   });
 
   it('should format input properly', () => {
@@ -65,7 +63,7 @@ describe('components/AccountInput', () => {
 
     for(const value of cases) {
       const component = render({ value });
-      expect(getInputRef(component).value).to.be.equal(value);
+      expect(getInputRef(component).prop('value')).to.be.equal(value);
     }
   });
 
@@ -77,7 +75,7 @@ describe('components/AccountInput', () => {
         done();
       }
     });
-    Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
+    keyPress(getInputRef(component), createKeyEvent('Backspace'));
   });
 
   it('should remove first character', (done) => {
@@ -89,7 +87,7 @@ describe('components/AccountInput', () => {
       }
     });
     component.setState({ selectionRange: [1, 1] }, () => {
-      Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
+      keyPress(getInputRef(component), createKeyEvent('Backspace'));
     });
   });
 
@@ -102,7 +100,7 @@ describe('components/AccountInput', () => {
       }
     });
     component.setState({ selectionRange: [0, 8] }, () => {
-      Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
+      keyPress(getInputRef(component), createKeyEvent('Backspace'));
     });
   });
 
@@ -115,7 +113,7 @@ describe('components/AccountInput', () => {
       }
     });
     component.setState({ selectionRange: [4, 8] }, () => {
-      Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
+      keyPress(getInputRef(component), createKeyEvent('Backspace'));
     });
   });
 
@@ -125,11 +123,11 @@ describe('components/AccountInput', () => {
     });
 
     component.setState({ selectionRange: [1, 3] }, () => {
-      Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
+      keyPress(getInputRef(component), createKeyEvent('1'));
 
       component.setState({}, () => {
-        expect(component.state.value).to.be.equal('010');
-        expect(component.state.selectionRange).to.deep.equal([2, 2]);
+        expect(component.state().value).to.be.equal('010');
+        expect(component.state().selectionRange).to.deep.equal([2, 2]);
         done();
       });
     });
@@ -139,12 +137,12 @@ describe('components/AccountInput', () => {
     const component = render({ value: '' });
 
     for(let i = 0; i < 12; i++) {
-      Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
+      keyPress(getInputRef(component), createKeyEvent('1'));
     }
 
     component.setState({}, () => {
-      expect(component.state.value).to.be.equal('111111111111');
-      expect(component.state.selectionRange).to.deep.equal([12, 12]);
+      expect(component.state().value).to.be.equal('111111111111');
+      expect(component.state().selectionRange).to.deep.equal([12, 12]);
       done();
     });
   });
@@ -154,11 +152,11 @@ describe('components/AccountInput', () => {
       value: '0000'
     });
     component.setState({ selectionRange: [1, 1]}, () => {
-      Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
+      keyPress(getInputRef(component), createKeyEvent('1'));
 
       component.setState({}, () => {
-        expect(component.state.value).to.be.equal('01000');
-        expect(component.state.selectionRange).to.deep.equal([2, 2]);
+        expect(component.state().value).to.be.equal('01000');
+        expect(component.state().selectionRange).to.deep.equal([2, 2]);
         done();
       });
     });
@@ -169,14 +167,22 @@ describe('components/AccountInput', () => {
       value: '0000'
     });
     component.setState({ selectionRange: [0, 0] }, () => {
-      Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
+      keyPress(getInputRef(component), createKeyEvent('Backspace'));
 
       component.setState({}, () => {
-        expect(component.state.value).to.be.equal('0000');
-        expect(component.state.selectionRange).to.deep.equal([0, 0]);
+        expect(component.state().value).to.be.equal('0000');
+        expect(component.state().selectionRange).to.deep.equal([0, 0]);
         done();
       });
     });
   });
 
-});
\ No newline at end of file
+});
+
+function getComponent(container, testName) {
+  return container.findWhere( n => n.prop('testName') === testName);
+}
+
+function keyPress(component, key) {
+  component.prop('onKeyPress')(key);
+}
\ No newline at end of file
diff --git a/test/components/Login.spec.js b/test/components/Login.spec.js
index f34d9ea405..f8f4af54de 100644
--- a/test/components/Login.spec.js
+++ b/test/components/Login.spec.js
@@ -1,7 +1,7 @@
 // @flow
 
 import { expect } from 'chai';
-import React from 'react';
+import * as React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 
@@ -33,22 +33,28 @@ describe('components/Login', () => {
 
   it('does not show the footer when logging in', () => {
     const component = renderLoggingIn();
-    const footer = component.find('.login-footer');
-    expect(footer.hasClass('login-footer--invisible')).to.be.true;
+    const visibleFooters = getComponent(component, 'footerVisibility true');
+    const invisibleFooters = getComponent(component, 'footerVisibility false');
+    expect(visibleFooters.length).to.equal(0);
+    expect(invisibleFooters.length).to.equal(1);
   });
 
   it('shows the footer and account input when not logged in', () => {
     const component = renderNotLoggedIn();
-    const footer = component.find('.login-footer');
-    expect(footer.hasClass('login-footer--invisible')).to.be.false;
-    expect(component.find(AccountInput).exists()).to.be.true;
+    const visibleFooters = getComponent(component, 'footerVisibility true');
+    const invisibleFooters = getComponent(component, 'footerVisibility false');
+    expect(visibleFooters.length).to.equal(1);
+    expect(invisibleFooters.length).to.equal(0);
+    expect(getComponent(component, 'AccountInput').length).to.be.above(0);
   });
 
   it('does not show the footer nor account input when logged in', () => {
     const component = renderLoggedIn();
-    const footer = component.find('.login-footer');
-    expect(footer.hasClass('login-footer--invisible')).to.be.true;
-    expect(component.find('.login-form__fields')).to.have.length(0);
+    const visibleFooters = getComponent(component, 'footerVisibility true');
+    const invisibleFooters = getComponent(component, 'footerVisibility false');
+    expect(visibleFooters.length).to.equal(0);
+    expect(invisibleFooters.length).to.equal(1);
+    expect(getComponent(component, 'AccountInput').length).to.equal(0);
   });
 
   it('logs in with the entered account number when clicking the login icon', (done) => {
@@ -67,7 +73,7 @@ describe('components/Login', () => {
       },
     });
 
-    component.find('.login-form__account-input-button').simulate('click');
+    click(getComponent(component, 'account-input-button'));
   });
 });
 
@@ -118,3 +124,11 @@ function renderWithProps(customProps) {
   const props = Object.assign({}, defaultProps, customProps);
   return shallow( <Login { ...props } /> );
 }
+
+function getComponent(container, testName) {
+  return container.findWhere( n => n.prop('testName') === testName);
+}
+
+function click(component) {
+  component.prop('onPress')();
+}