Refactor Connect props and first disconnected test

3 files changed, 66 insertions, 8 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index 064873f581..c67e72f696 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -10,14 +10,12 @@ import Map from './Map';
 
 import type { ServerInfo } from '../lib/backend';
 import type { HeaderBarStyle } from './HeaderBar';
-import type { AccountReduxState } from '../redux/account/reducers';
 import type { ConnectionReduxState } from '../redux/connection/reducers';
-import type { SettingsReduxState } from '../redux/settings/reducers';
 
 export type ConnectProps = {
-  account: AccountReduxState,
+  accountPaidUntil: string,
   connection: ConnectionReduxState,
-  settings: SettingsReduxState,
+  preferredServer: string,
   onSettings: () => void,
   onSelectLocation: () => void,
   onConnect: (address: string) => void,
@@ -96,7 +94,7 @@ export default class Connect extends Component {
   }
 
   renderMap(): React.Element<*> {
-    const preferredServer = this.props.settings.preferredServer;
+    const preferredServer = this.props.preferredServer;
     const serverInfo = this.props.getServerInfo(preferredServer);
     if(!serverInfo) {
       throw new Error('Server info cannot be null.');
@@ -296,7 +294,7 @@ export default class Connect extends Component {
   // Handlers
 
   onConnect() {
-    const { preferredServer } = this.props.settings;
+    const preferredServer = this.props.preferredServer;
     const serverInfo = this.props.getServerInfo(preferredServer);
     if(serverInfo) {
       this.props.onConnect(serverInfo.address);
@@ -369,7 +367,7 @@ export default class Connect extends Component {
     }
 
     // No credit?
-    const { paidUntil } = this.props.account;
+    const paidUntil = this.props.accountPaidUntil;
     if(paidUntil && moment(paidUntil).isSameOrBefore(moment())) {
       return new BackendError('NO_CREDIT');
     }
diff --git a/app/containers/ConnectPage.js b/app/containers/ConnectPage.js
index ab288bd0e3..495d1c6672 100644
--- a/app/containers/ConnectPage.js
+++ b/app/containers/ConnectPage.js
@@ -7,7 +7,11 @@ import Connect from '../components/Connect';
 import connectActions from '../redux/connection/actions';
 
 const mapStateToProps = (state) => {
-  return state;
+  return {
+    accountPaidUntil: state.account.paidUntil,
+    connection: state.connection,
+    preferredServer: state.settings.preferredServer,
+  };
 };
 
 const mapDispatchToProps = (dispatch, props) => {
diff --git a/test/components/Connect.spec.js b/test/components/Connect.spec.js
new file mode 100644
index 0000000000..13700e8cca
--- /dev/null
+++ b/test/components/Connect.spec.js
@@ -0,0 +1,56 @@
+// @flow
+
+import { expect } from 'chai';
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Connect from '../../app/components/Connect';
+import Header from '../../app/components/HeaderBar';
+
+describe('components/Connect', () => {
+
+  it('shows unsecured hints when not connected', () => {
+    const component = mount( <Connect {...defaultProps} /> );
+
+    const header = component.find(Header);
+    const securityMessage = component.find('.connect__status-security--unsecured');
+    const connectButton = component.find('.button .button--positive');
+
+    expect(header.prop('style')).to.equal('error');
+    expect(securityMessage.text().toLowerCase()).to.contain('unsecured');
+    expect(connectButton.text()).to.equal('Secure my connection');
+  });
+});
+
+const noop = () => {};
+const defaultServer = {
+  address: '',
+  name: '',
+  city: '',
+  country: '',
+  location: [0, 0],
+};
+const defaultConnection = {
+  status: 'disconnected',
+  isOnline: true,
+  serverAddress: null,
+  clientIp: null,
+  location: null,
+  country: null,
+  city: null,
+};
+
+const defaultProps = {
+  onSettings: noop,
+  onSelectLocation: noop,
+  onConnect: noop,
+  onCopyIP: noop,
+  onDisconnect: noop,
+  onExternalLink: noop,
+  getServerInfo: (_) => { return defaultServer; },
+
+  accountPaidUntil: '',
+  preferredServer: '',
+  connection: defaultConnection,
+};
+