Electron4 changes

.npmrc

@@ -1,5 +1,18 @@
 runtime = electron
-target = 2.0.7
+target = 5.0.0
 target_arch = x64
+config_arch=x64
 disturl = https://atom.io/download/atom-shell
 tag-version-prefix=""
+build_from_source=true
+
+
+# npm_config_target=1.2.3
+# The architecture of Electron, see https://electronjs.org/docs/tutorial/support#supported-platforms
+# for supported architectures.
+# m_config_target_arch=x64
+# Download headers for Electron.
+# export npm_config_disturl=https://atom.io/download/electron
+# Tell node-pre-gyp that we are building for Electron.
+# export npm_config_runtime=electron
+# Tell node-pre-gyp to build module from source code.

.nvmrc

@@ -1 +1 @@
-v8.9.0
+v10.15.0

.travis.yml

@@ -4,18 +4,13 @@ matrix:
   include:
     - os: osx
       language: node_js
-      node_js:
-          # Must use node 8 while on electron 2.x (for safe.spec tests.)
-        - 8
       env:
         - ELECTRON_CACHE=$HOME/.cache/electron
         - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
         - NODE_ENV=dev
 
     - os: linux
       language: node_js
-      node_js:
-        - 8
       env:
         - NODE_ENV=dev
       addons:
@@ -89,8 +84,8 @@ script:
     fi
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then xdg-open --version;
     fi
-  - travis_retry eval "pkill -f electron || pkill -f jest || yarn run test-peruse --forceExit"
-  - travis_retry eval "pkill -f electron || pkill -f jest || yarn run test-exts --forceExit"
+  - travis_retry yarn run test-peruse --forceExit
+  - travis_retry yarn run test-exts --forceExit
   - yarn build-e2e
   - travis_retry yarn cross-env NODE_ENV=test TEST_CAFE=true IS_UNPACKED=true testcafe electron:. ./__testcafe__/peruse.spec.ts
   - travis_retry yarn cross-env NODE_ENV=test TEST_CAFE=true IS_UNPACKED=true testcafe electron:. ./__testcafe__/navigation.spec.ts

__tests__/components/AddressBar.spec.tsx

@@ -14,7 +14,7 @@ jest.mock( 'extensions/safe/ffi/refs/parsers', () => ( {} ) );
 
 jest.mock( 'ref-array', () => jest.fn() );
 //
-jest.mock( 'ffi', () => jest.fn() );
+jest.mock( 'ffi-napi', () => jest.fn() );
 jest.mock( 'extensions/safe/ffi/authenticator', () => jest.fn() );
 
 jest.mock( '@maidsafe/safe-node-app', () => jest.fn() );
@@ -23,11 +23,11 @@ jest.mock( 'extensions/safe/actions/safeBrowserApplication_actions' );
 describe( 'AddressBar', () => {
     let wrapper;
     let instance;
-    let props;
+    let properties;
     let store;
 
     beforeEach( () => {
-        props = {
+        properties = {
             windowId: 1,
             address: 'about:blank',
             isSelected: false,
@@ -50,11 +50,11 @@ describe( 'AddressBar', () => {
 
     describe( 'constructor( props )', () => {
         beforeEach( () => {
-            store = mockStore( props );
+            store = mockStore( properties );
 
             wrapper = shallow(
                 <Provider store={store}>
-                    <AddressBar {...props} />
+                    <AddressBar {...properties} />
                 </Provider>
             ).dive();
 

__tests__/components/AddressBarButtonsLHS.spec.tsx

@@ -15,7 +15,7 @@ jest.mock( 'extensions/safe/ffi/refs/parsers', () => ( {} ) );
 
 jest.mock( 'ref-array', () => jest.fn() );
 //
-jest.mock( 'ffi', () => jest.fn() );
+jest.mock( 'ffi-napi', () => jest.fn() );
 jest.mock( 'extensions/safe/ffi/authenticator', () => jest.fn() );
 
 jest.mock( '@maidsafe/safe-node-app', () => jest.fn() );
@@ -27,11 +27,11 @@ jest.mock( '$Utils/extendComponent' );
 describe( 'AddressBarButtonsLHS', () => {
     let wrapper;
     let instance;
-    let props;
+    let properties;
     let store;
 
     beforeEach( () => {
-        props = {
+        properties = {
             windowId: 1,
             address: 'about:blank',
             isSelected: false,
@@ -50,11 +50,11 @@ describe( 'AddressBarButtonsLHS', () => {
 
     describe( 'constructor( props )', () => {
         beforeEach( () => {
-            store = mockStore( props );
+            store = mockStore( properties );
 
             wrapper = shallow(
                 <Provider store={store}>
-                    <AddressBarButtonsLHS {...props} />
+                    <AddressBarButtonsLHS {...properties} />
                 </Provider>
             ).dive();
             instance = wrapper.instance();

__tests__/components/AddressBarButtonsRHS.spec.tsx

@@ -15,7 +15,7 @@ jest.mock( 'extensions/safe/ffi/refs/parsers', () => ( {} ) );
 
 jest.mock( 'ref-array', () => jest.fn() );
 //
-jest.mock( 'ffi', () => jest.fn() );
+jest.mock( 'ffi-napi', () => jest.fn() );
 jest.mock( 'extensions/safe/ffi/authenticator', () => jest.fn() );
 
 jest.mock( '@maidsafe/safe-node-app', () => jest.fn() );
@@ -26,11 +26,11 @@ jest.mock( '$Utils/extendComponent' );
 describe( 'AddressBarButtonsRHS', () => {
     let wrapper;
     let instance;
-    let props;
+    let properties;
     let store;
 
     beforeEach( () => {
-        props = {
+        properties = {
             windowId: 1,
             address: 'about:blank',
             isSelected: false,
@@ -48,11 +48,11 @@ describe( 'AddressBarButtonsRHS', () => {
 
     describe( 'constructor( props )', () => {
         beforeEach( () => {
-            store = mockStore( props );
+            store = mockStore( properties );
 
             wrapper = shallow(
                 <Provider store={store}>
-                    <AddressBarButtonsRHS {...props} />
+                    <AddressBarButtonsRHS {...properties} />
                 </Provider>
             ).dive();
             instance = wrapper.instance();

__tests__/components/AddressBarInput.spec.tsx

@@ -13,7 +13,7 @@ jest.mock( 'extensions/safe/ffi/refs/parsers', () => ( {} ) );
 
 jest.mock( 'ref-array', () => jest.fn() );
 //
-jest.mock( 'ffi', () => jest.fn() );
+jest.mock( 'ffi-napi', () => jest.fn() );
 jest.mock( 'extensions/safe/ffi/authenticator', () => jest.fn() );
 
 jest.mock( '@maidsafe/safe-node-app', () => jest.fn() );
@@ -22,11 +22,11 @@ jest.mock( 'extensions/safe/actions/safeBrowserApplication_actions' );
 describe( 'AddressBarInput', () => {
     let wrapper;
     let instance;
-    let props;
+    let properties;
     let store;
 
     beforeEach( () => {
-        props = {
+        properties = {
             windowId: 1,
             address: 'about:blank',
             isSelected: false,
@@ -46,11 +46,11 @@ describe( 'AddressBarInput', () => {
 
     describe( 'constructor( props )', () => {
         beforeEach( () => {
-            store = mockStore( props );
+            store = mockStore( properties );
 
             wrapper = shallow(
                 <Provider store={store}>
-                    <AddressBarInput {...props} />
+                    <AddressBarInput {...properties} />
                 </Provider>
             ).dive();
             instance = wrapper.instance();
@@ -63,11 +63,11 @@ describe( 'AddressBarInput', () => {
 
     describe( 'events', () => {
         beforeEach( () => {
-            store = mockStore( props );
+            store = mockStore( properties );
 
             wrapper = mount(
                 <Provider store={store}>
-                    <AddressBarInput {...props} />
+                    <AddressBarInput {...properties} />
                 </Provider>
             );
             instance = wrapper.instance();
@@ -81,7 +81,7 @@ describe( 'AddressBarInput', () => {
             const handleBlur = jest.fn();
             wrapper = mount(
                 <Provider store={store}>
-                    <AddressBarInput {...props} onBlur={handleBlur} />
+                    <AddressBarInput {...properties} onBlur={handleBlur} />
                 </Provider>
             );
             const input = wrapper.find( 'Input' );
@@ -92,14 +92,14 @@ describe( 'AddressBarInput', () => {
         it( 'check on onBlur,onBlur() is called', () => {
             const input = wrapper.find( 'Input' );
             input.simulate( 'blur' );
-            expect( props.onBlur ).toHaveBeenCalled();
+            expect( properties.onBlur ).toHaveBeenCalled();
         } );
 
         it( 'check on onFocus,handleFocus is called', () => {
             const handleFocus = jest.fn();
             wrapper = mount(
                 <Provider store={store}>
-                    <AddressBarInput {...props} onFocus={handleFocus} />
+                    <AddressBarInput {...properties} onFocus={handleFocus} />
                 </Provider>
             );
             instance = wrapper.instance();
@@ -111,25 +111,25 @@ describe( 'AddressBarInput', () => {
         it( 'check on onFocus,onFocus() is called', () => {
             wrapper = mount(
                 <Provider store={store}>
-                    <AddressBarInput {...props} />
+                    <AddressBarInput {...properties} />
                 </Provider>
             );
             instance = wrapper.instance();
             const input = wrapper.find( 'Input' );
             input.simulate( 'focus' );
-            expect( props.onFocus ).toHaveBeenCalled();
+            expect( properties.onFocus ).toHaveBeenCalled();
         } );
 
         it( 'check on onKeyPress if updateTab is called', () => {
             const input = wrapper.find( 'Input' );
             input.simulate( 'keyPress', { key: 'Enter', keyCode: 13, which: 13 } );
-            expect( props.updateTab ).toHaveBeenCalled();
+            expect( properties.updateTab ).toHaveBeenCalled();
         } );
 
         it( 'check on onKeyPress if updateTab is called with params', () => {
             const input = wrapper.find( 'Input' );
             input.simulate( 'keyPress', { key: 'Enter', keyCode: 13, which: 13 } );
-            expect( props.updateTab ).toHaveBeenCalledWith( {
+            expect( properties.updateTab ).toHaveBeenCalledWith( {
                 url: 'about:blank',
                 windowId: 1
             } );
@@ -139,7 +139,7 @@ describe( 'AddressBarInput', () => {
             const input = wrapper.find( 'Input' );
             input.value = '123456';
             input.simulate( 'change' );
-            expect( props.onSelect ).toHaveBeenCalled();
+            expect( properties.onSelect ).toHaveBeenCalled();
         } );
     } );
 } );

__tests__/components/TabBar.spec.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import TabBar from '$Components/TabBar';
-import MdClose from 'react-icons/lib/md/close';
-import MdAdd from 'react-icons/lib/md/add';
+import { Icon } from 'antd';
 import { CLASSES } from '$Constants';
-import { Spinner } from 'nessie-ui';
 
 describe( 'TabBar', () => {
     let wrapper;
@@ -54,12 +52,9 @@ describe( 'TabBar', () => {
             expect( wrapper.find( '#favicon-img' ).length ).toBe( 1 );
         } );
 
-        it( 'should have exactly 1 MdAdd component', () => {
-            expect( wrapper.find( MdAdd ).length ).toBe( 1 );
-        } );
-
-        it( 'should have exactly 1 MdClose component', () => {
-            expect( wrapper.find( MdClose ).length ).toBe( 1 );
+        it( 'should have exactly 2 Button components', () => {
+            // add and close
+            expect( wrapper.find( Icon ).length ).toBe( 2 );
         } );
     } );
 
@@ -80,7 +75,7 @@ describe( 'TabBar', () => {
         } );
 
         it( 'should have exactly 1 tab with loading indicator', () => {
-            expect( wrapper.find( Spinner ).length ).toBe( 1 );
+            expect( wrapper.find( Icon ).length ).toBe( 3 );
         } );
     } );
 

app/components/PerusePages/Bookmarks/Bookmarks.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-// import { Link } from 'react-router';
 import { ipcRenderer, remote } from 'electron';
 import { Page, H1, PageHeader } from 'nessie-ui';
 import UrlList from '$Components/UrlList';
@@ -19,7 +18,7 @@ export default class Bookmarks extends Component<BookmarksProps, {}> {
 
     render() {
         const { bookmarks, isActiveTab, addTab } = this.props;
-        const bookmarkList = bookmarks.map( bookmark => bookmark.url );
+        const bookmarkList = bookmarks.map( ( bookmark ) => bookmark.url );
         let moddedClass = styles.tab;
         if ( isActiveTab ) {
             moddedClass = styles.activeTab;