WIP

src/components/passphraseInput/index.js

@@ -166,4 +166,6 @@ class PassphraseInput extends React.Component {
   }
 }
 
+export { PassphraseInput };
+// eslint-disable-next-line import/no-named-as-default
 export default translate()(PassphraseInput);

src/components/passphraseInput/index.test.js

@@ -2,25 +2,41 @@ import React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { mount } from 'enzyme';
+import PropTypes from 'prop-types';
 
 import accounts from '../../../test/constants/accounts';
 import i18n from '../../i18n';
-import PassphraseInput from './index';
+import { PassphraseInput } from './index';
 
 describe('PassphraseInput', () => {
   let wrapper;
   let props;
   let onChangeSpy;
+  const keyCodes = {
+    arrowRight: 39,
+    arrowLeft: 37,
+    space: 32,
+    delete: 8,
+  };
 
   beforeEach('', () => {
     props = {
       error: '',
       value: '',
       onChange: () => {},
       i18n,
+      t: key => key,
     };
     onChangeSpy = spy(props, 'onChange');
-    wrapper = mount(<PassphraseInput {...props} />);
+
+    const options = {
+      context: { i18n },
+      childContextTypes: {
+        i18n: PropTypes.object.isRequired,
+      },
+    };
+
+    wrapper = mount(<PassphraseInput {...props} />, options);
   });
 
   afterEach('', () => {
@@ -53,6 +69,7 @@ describe('PassphraseInput', () => {
     expect(wrapper.props().onChange).to.not.have.been.calledWith(passphrase, errorMessage);
     passphrase = 'wagonn stock borrow episode laundry kitten salute link globe zero feed marble';
     wrapper.find('input').first().simulate('change', { target: { value: passphrase } });
+    expect(wrapper.state('partialPassphraseError')[0]).to.equal(true);
     expect(wrapper.props().onChange).to.have.been.calledWith(passphrase, errorMessage);
   });
 
@@ -71,4 +88,73 @@ describe('PassphraseInput', () => {
     wrapper.find('.show-passphrase-toggle').simulate('click');
     expect(wrapper.find('input').first().props().type).to.equal('password');
   });
+
+  it('should focus input on click', () => {
+    expect(wrapper.find('input')).to.have.length(1);
+    expect(wrapper.state('isFocused')).to.equal(false);
+    wrapper.find('input').first().simulate('click');
+    expect(wrapper.state('isFocused')).to.equal(true);
+    expect(wrapper.find('input')).to.have.length(12);
+  });
+
+  it('should handle paste a passphrase', () => {
+    expect(wrapper.state('isFocused')).to.equal(false);
+    expect(wrapper.find('input')).to.have.length(1);
+    const passphrase = 'stock wagon borrow episode laundry kitten salute link globe zero feed marble';
+    wrapper.find('input').first().simulate('change', { target: { value: passphrase } });
+    expect(wrapper.state('isFocused')).to.equal(true);
+    expect(wrapper.find('input')).to.have.length(12);
+    expect(wrapper.props().onChange).to.have.been.calledWith(passphrase);
+  });
+
+  it('should focus next element on space press', () => {
+    expect(wrapper.state('focus')).to.equal(0);
+    wrapper.find('input').first().simulate('click');
+    wrapper.find('input').first().simulate('keyDown', {
+      keyCode: keyCodes.space,
+      which: keyCodes.space,
+    });
+    expect(wrapper.state('focus')).to.equal(1);
+  });
+
+  it('should focus next element on arrow right and previous element on left press', () => {
+    expect(wrapper.state('focus')).to.equal(0);
+    wrapper.find('input').first().simulate('click');
+    wrapper.find('input').first().simulate('keyDown', {
+      keyCode: keyCodes.arrowRight,
+      which: keyCodes.arrowRight,
+    });
+    expect(wrapper.state('focus')).to.equal(1);
+    wrapper.find('input').at(1).simulate('keyDown', {
+      keyCode: keyCodes.arrowLeft,
+      which: keyCodes.arrowLeft,
+    });
+    expect(wrapper.state('focus')).to.equal(0);
+  });
+
+  it.only('should focus previous element on backspace press only when input is empty', () => {
+    expect(wrapper.state('focus')).to.equal(0);
+    wrapper.find('input').first().simulate('click');
+    wrapper.find('input').first().simulate('keyDown', {
+      keyCode: keyCodes.arrowRight,
+      which: keyCodes.arrowRight,
+    });
+    expect(wrapper.state('focus')).to.equal(1);
+
+    const testPassphrase = 'test';
+    wrapper.find('input').at(1).simulate('change', { target: { value: testPassphrase } });
+    wrapper.setProps({ value: testPassphrase });
+    wrapper.find('input').at(1).simulate('keyDown', {
+      keyCode: keyCodes.delete,
+      which: keyCodes.delete,
+    });
+    expect(wrapper.state('focus')).to.equal(1);
+    wrapper.find('input').at(1).simulate('change', { target: { value: '' } });
+    wrapper.setProps({ value: '' });
+    wrapper.find('input').at(1).simulate('keyDown', {
+      keyCode: keyCodes.delete,
+      which: keyCodes.delete,
+    });
+    expect(wrapper.state('focus')).to.equal(0);
+  });
 });

src/components/passphrasePartial/index.js

@@ -20,6 +20,7 @@ class PassphrasePartial extends React.Component {
       onBlur={typeof this.props.onBlur === 'function' ? this.props.onBlur : undefined}
       onChange={this.handleValueChange.bind(this)}
       onKeyDown={(event) => {
+        console.log('this.props.partialValue', this.props.partialValue);
         this.props.keyAction({ event, value: this.props.partialValue, index: this.props.index });
       }}
     />);