Finalize second passphrase registration feature - Closes #626

src/components/mainMenu/mainMenu.js

@@ -154,7 +154,7 @@ class MainMenu extends React.Component {
                 </ToolboxTabs>
               </div>
               <Setting showSetting={this.state.setting}
-                menuToggle={this.menuToggle.bind(this)}
+                toggleMenu={this.menuToggle.bind(this)}
                 startOnboarding={this.props.startOnboarding}
               />
             </Drawer>

src/components/setting/setting.js

@@ -1,14 +1,14 @@
 import React from 'react';
-// import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import ReactSwipe from 'react-swipe';
 import styles from './setting.css';
 import Checkbox from '../toolbox/sliderCheckbox';
 import i18n from '../../i18n';
 import accountConfig from '../../constants/account';
 import breakpoints from './../../constants/breakpoints';
 // TODO: will be re-enabled when the functionality is updated
-// import routes from '../../constants/routes';
-// import { FontIcon } from '../fontIcon';
+import routes from '../../constants/routes';
+import { FontIcon } from '../fontIcon';
 // import languageSwitcherTheme from './languageSwitcher.css';
 
 class Setting extends React.Component {
@@ -50,7 +50,8 @@ class Setting extends React.Component {
   render() {
     this.language = (i18n.language === 'de');
     const showSetting = this.props.showSetting ? styles.active : '';
-    const { t, settings, settingsUpdated } = this.props;
+    const { t, settings, settingsUpdated, hasSecondPassphrase, toggleMenu,
+      startOnboarding } = this.props;
     return <footer className={`${styles.wrapper} ${showSetting}`}>
       <ReactSwipe
         className={styles.carousel}
@@ -91,8 +92,8 @@ class Setting extends React.Component {
         {this.showOnboardingSetting()
           ? <div>
             <button className={styles.settingsButton} onClick={() => {
-              this.props.menuToggle();
-              this.props.startOnboarding();
+              toggleMenu();
+              startOnboarding();
             }
             }>{t('Start')}</button>
             <article>
@@ -102,12 +103,12 @@ class Setting extends React.Component {
           </div>
           : null
         }
-        {/* TODO: will be re-enabled when the functionality is updated
         <div>
           {!hasSecondPassphrase ?
             <Link
               className={`register-second-passphrase ${styles.secondPassphrase}`}
-              to={`${routes.main.path}${routes.secondPassphrase.path}`}>
+              to={`${routes.main.path}${routes.secondPassphrase.path}`}
+              onClick={toggleMenu}>
               {t('Add')}
             </Link> :
             <span
@@ -120,6 +121,8 @@ class Setting extends React.Component {
             <p>{t('Register 2nd passphrase')}</p>
           </article>
         </div>
+        {/* TODO: will be re-enabled when the functionality is updated
+        {/* TODO: will be re-enabled when the functionality is updated
         <div>
           <Checkbox
             theme={languageSwitcherTheme}
@@ -144,7 +147,7 @@ class Setting extends React.Component {
         */}
       </ReactSwipe>
       <ul className={ styles.carouselNav } id='carouselNav'>
-        {[...Array(this.showOnboardingSetting() ? 3 : 2)].map((x, i) =>
+        {[...Array(this.showOnboardingSetting() ? 4 : 3)].map((x, i) =>
           <li
             key={i}
             className={(i === this.state.activeSlide) ? styles.activeSlide : ''}

src/components/setting/setting.test.js

@@ -4,6 +4,7 @@ import { mount } from 'enzyme';
 import sinon from 'sinon';
 import configureMockStore from 'redux-mock-store';
 import PropTypes from 'prop-types';
+import { MemoryRouter as Router } from 'react-router-dom';
 import Setting from './setting';
 import accounts from '../../../test/constants/accounts';
 import i18n from '../../i18n';
@@ -51,18 +52,19 @@ describe('Setting', () => {
     accountUpdated: sinon.spy(),
     settings,
     t,
-    menuToggle: sinon.spy(),
+    toggleMenu: sinon.spy(),
     startOnboarding: sinon.spy(),
     isAuthenticated: true,
   };
 
   beforeEach(() => {
     window.innerWidth = breakpoints.l;
 
-    wrapper = mount(
+    wrapper = mount(<Router>
       <Setting
         store={store}
-        {...props}/>, options);
+        {...props}/>
+    </Router>, options);
 
     clock = sinon.useFakeTimers({
       toFake: ['setTimeout', 'clearTimeout', 'Date', 'setInterval'],
@@ -92,22 +94,30 @@ describe('Setting', () => {
   });
 
   it('should show the onboarding setting when authenticated and not on mobile', () => {
-    expect(wrapper.find('#carouselNav li')).to.have.length(3);
+    expect(wrapper.find('#carouselNav li')).to.have.length(4);
     wrapper.find('button').props().onClick();
-    expect(props.menuToggle).to.have.been.calledWith();
+    expect(props.toggleMenu).to.have.been.calledWith();
     expect(props.startOnboarding).to.have.been.calledWith();
   });
 
   it('should not show the onboarding setting when on mobile', () => {
     window.innerWidth = breakpoints.m;
-    wrapper = mount(<Setting store={store} {...props}/>, options);
-    expect(wrapper.find('#carouselNav li')).to.have.length(2);
+    wrapper = mount(<Router>
+      <Setting
+        {...props}
+      />
+    </Router>, options);
+    expect(wrapper.find('#carouselNav li')).to.have.length(3);
   });
 
   it('should not show the onboarding setting when not authenticated', () => {
     props.isAuthenticated = false;
-    wrapper = mount(<Setting store={store} {...props}/>, options);
-    expect(wrapper.find('#carouselNav li')).to.have.length(2);
+    wrapper = mount(<Router>
+      <Setting
+        {...props}
+      />
+    </Router>, options);
+    expect(wrapper.find('#carouselNav li')).to.have.length(3);
   });
 
   it.skip('should click on .autoLog update the setting', () => {
@@ -137,8 +147,14 @@ describe('Setting', () => {
     const settingsToExpireTime = { ...settings };
     settingsToExpireTime.autoLog = false;
     accountToExpireTime.passphrase = accounts.genesis.passphrase;
-    wrapper.setProps({ account: accountToExpireTime, settings: settingsToExpireTime });
-    wrapper.update();
+    wrapper = mount(<Router>
+      <Setting
+        {...props}
+        store={store}
+        account={accountToExpireTime}
+        settings={settingsToExpireTime}
+      />
+    </Router>, options);
 
     wrapper.find('.autoLog').at(0).find('input').simulate('change', { target: { checked: true, value: true } });
     clock.tick(300);