Upgrade to React 16 and latest node.js version (#875)

* Bump to React v16

* Upgrade webpack-config

.travis.yml

@@ -21,7 +21,7 @@ env:
     - COMPOSER_ROOT_VERSION=1.4.x-dev
     - DISPLAY=":99"
     - XVFBARGS=":99 -ac -screen 0 1024x768x16"
-    - TRAVIS_NODE_VERSION="6"
+    - TRAVIS_NODE_VERSION="10"
     - SS_BASE_URL="http://localhost:8080/"
     - SS_ENVIRONMENT_TYPE="dev"
 

client/src/boot/index.js

@@ -15,20 +15,22 @@ document.addEventListener('DOMContentLoaded', () => {
   const sectionConfig = Config.getSection('SilverStripe\\AssetAdmin\\Controller\\AssetAdmin');
 
   reactRouteRegister.add({
-    path: sectionConfig.url,
-    component: AssetAdminRouter,
-    indexRoute: { component: AssetAdminRouter },
-    childRoutes: [
+    path: '/',
+    routes: [
       {
-        path: 'show/:folderId/:viewAction/:fileId',
+        path: `/${sectionConfig.url}/show/:folderId/:viewAction/:fileId`,
         component: AssetAdminRouter,
       },
       {
-        path: 'show/:folderId/:viewAction',
+        path: `/${sectionConfig.url}/show/:folderId/:viewAction`,
         component: AssetAdminRouter,
       },
       {
-        path: 'show/:folderId',
+        path: `/${sectionConfig.url}/show/:folderId`,
+        component: AssetAdminRouter,
+      },
+      {
+        path: `/${sectionConfig.url}`,
         component: AssetAdminRouter,
       },
     ],

client/src/components/AssetDropzone/AssetDropzone.js

@@ -41,7 +41,7 @@ class AssetDropzone extends Component {
 
     // attach the name as a class to the hidden input for easier identification
     const { name } = this.props;
-    if (name) {
+    if (name && this.dropzone.hiddenFileInput) {
       this.dropzone.hiddenFileInput.classList.add(`dz-input-${name}`);
     }
 
@@ -66,22 +66,22 @@ class AssetDropzone extends Component {
       }
     } else {
       // remove dropzone listeners (so it potentially doesn't interrupt other listeners)
-      this.dropzone.disable();
+      this.dropzone.destroy();
     }
   }
 
   componentDidUpdate() {
     // Reattach name to hiddenFileInput as dropzone recreates this element after each upload
     const { name } = this.props;
 
-    if (name) {
+    if (name && this.dropzone.hiddenFileInput) {
       this.dropzone.hiddenFileInput.classList.add(`dz-input-${name}`);
     }
   }
 
   componentWillUnmount() {
     // Remove all dropzone event listeners.
-    this.dropzone.disable();
+    this.dropzone.destroy();
   }
 
   /**

client/src/components/AssetDropzone/tests/AssetDropzone-test.js

@@ -1,7 +1,7 @@
 /* global jest, jasmine, describe, it, expect, beforeEach, FormData */
 
 import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import AssetDropzone from '../AssetDropzone';
 
 describe('AssetDropzone', () => {
@@ -43,7 +43,7 @@ describe('AssetDropzone', () => {
         <AssetDropzone {...props} />
       );
       item.dropzone = {
-        removeFile: jest.genMockFunction(),
+        removeFile: jest.fn(),
       };
       const file = {};
 
@@ -59,7 +59,7 @@ describe('AssetDropzone', () => {
         <AssetDropzone {...props} />
       );
       item.dropzone = {
-        removeFile: jest.genMockFunction(),
+        removeFile: jest.fn(),
       };
       const file = {};
 
@@ -73,7 +73,7 @@ describe('AssetDropzone', () => {
     let item = null;
 
     beforeEach(() => {
-      props.onMaxFilesExceeded = jest.genMockFunction();
+      props.onMaxFilesExceeded = jest.fn();
       props.options.maxFiles = 2;
       item = ReactTestUtils.renderIntoDocument(
         <AssetDropzone {...props} />
@@ -108,7 +108,7 @@ describe('AssetDropzone', () => {
         <AssetDropzone {...props} />
       );
       item.dropzone = {
-        cancelUpload: jest.genMockFunction(),
+        cancelUpload: jest.fn(),
       };
 
       item.handleSending({}, { abort: () => null }, new FormData());
@@ -147,7 +147,7 @@ describe('AssetDropzone', () => {
     });
 
     it('should remove all dropzone listeners', () => {
-      item.dropzone.disable = jest.genMockFunction();
+      item.dropzone.disable = jest.fn();
       item.componentWillUnmount();
 
       expect(item.dropzone.disable).toBeCalled();
@@ -171,8 +171,8 @@ describe('AssetDropzone', () => {
       item = ReactTestUtils.renderIntoDocument(
         <AssetDropzone {...uploadProps} />
       );
-      item.dropzone._errorProcessing = jest.genMockFunction();
-      item.dropzone.addFile({ name: 'test', size: 100, type: 'text/plain' });
+      item.dropzone._errorProcessing = jest.fn();
+      item.dropzone.addFile(new File(['test contents'], 'test.txt', { type: 'text/plain' }));
       // The error gets called asynchronously
       return new Promise(resolve => {
         setTimeout(() => {

client/src/components/BackButton/tests/BackButton-test.js

@@ -1,7 +1,7 @@
 /* global jest, jasmine, describe, it, expect, beforeEach */
 
 import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import { Component as BackButton } from '../BackButton';
 
 describe('BackButton', () => {

client/src/components/BulkActions/tests/BulkActions-test.js

@@ -14,7 +14,7 @@ jest.mock('jquery', () => {
 });
 
 import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import { Component as BulkActions } from '../BulkActions';
 
 describe('BulkActions', () => {
@@ -107,8 +107,8 @@ describe('BulkActions', () => {
         },
       };
 
-      bulkActions.getOptionByValue = jest.genMockFunction();
-      bulkActions.applyAction = jest.genMockFunction();
+      bulkActions.getOptionByValue = jest.fn();
+      bulkActions.applyAction = jest.fn();
     });
 
     it('should return undefined if no valid option is selected', () => {
@@ -119,7 +119,7 @@ describe('BulkActions', () => {
 
 
     it('should use callback if no confirm callback is configured', () => {
-      const callbackMockFn = jest.genMockFunction();
+      const callbackMockFn = jest.fn();
 
       bulkActions.getOptionByValue.mockReturnValueOnce({ confirm: null, callback: callbackMockFn });
       return bulkActions.handleChangeValue(event).then(() => {
@@ -128,7 +128,7 @@ describe('BulkActions', () => {
     });
 
     it('should use callback if confirm is configured and resolved', () => {
-      const callbackMockFn = jest.genMockFunction();
+      const callbackMockFn = jest.fn();
 
       bulkActions.getOptionByValue
         .mockReturnValueOnce({ confirm: Promise.resolve(), callback: callbackMockFn });
@@ -138,7 +138,7 @@ describe('BulkActions', () => {
     });
 
     it('should not use callback if confirm is configured and rejected', () => {
-      const callbackMockFn = jest.genMockFunction();
+      const callbackMockFn = jest.fn();
 
       bulkActions.getOptionByValue
         .mockReturnValueOnce({ confirm: Promise.reject(), callback: callbackMockFn });

client/src/components/GalleryItem/tests/GalleryItem-test.js

@@ -1,7 +1,7 @@
 /* global jest, jasmine, describe, it, expect, beforeEach, Event */
 
 import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import { Component as GalleryItem } from '../GalleryItem';
 import IMAGE_STATUS from 'state/imageLoad/ImageLoadStatus';
 
@@ -41,8 +41,8 @@ describe('GalleryItem', () => {
     const event = new Event('test');
 
     beforeEach(() => {
-      props.onRemoveErroredUpload = jest.genMockFunction();
-      props.onCancelUpload = jest.genMockFunction();
+      props.onRemoveErroredUpload = jest.fn();
+      props.onCancelUpload = jest.fn();
 
       item = ReactTestUtils.renderIntoDocument(
         <GalleryItem {...props} />
@@ -98,8 +98,8 @@ describe('GalleryItem', () => {
       );
 
       event = {
-        stopPropagation: jest.genMockFunction(),
-        preventDefault: jest.genMockFunction(),
+        stopPropagation: jest.fn(),
+        preventDefault: jest.fn(),
       };
     });
 
@@ -128,8 +128,8 @@ describe('GalleryItem', () => {
       );
 
       event = {
-        stopPropagation: jest.genMockFunction(),
-        preventDefault: jest.genMockFunction(),
+        stopPropagation: jest.fn(),
+        preventDefault: jest.fn(),
       };
     });
 
@@ -230,7 +230,7 @@ describe('GalleryItem', () => {
         <GalleryItem {...props} />
       );
 
-      item.isImageSmallerThanThumbnail = jest.genMockFunction();
+      item.isImageSmallerThanThumbnail = jest.fn();
     });
 
     it('should return not return small classes by default', () => {
@@ -325,12 +325,12 @@ describe('GalleryItem', () => {
       );
 
       event = {
-        stopPropagation: jest.genMockFunction(),
-        preventDefault: jest.genMockFunction(),
+        stopPropagation: jest.fn(),
+        preventDefault: jest.fn(),
       };
 
-      item.handleSelect = jest.genMockFunction();
-      item.handleActivate = jest.genMockFunction();
+      item.handleSelect = jest.fn();
+      item.handleActivate = jest.fn();
     });
 
     it('should trigger handleSelect when the space key is pressed', () => {

client/src/components/GalleryToolbar/Buttons/tests/AddFolderButton-test.js

@@ -1,14 +1,14 @@
 /* global jest, describe, it, expect, beforeEach, Event */
 import React from 'react';
 import Component from '../AddFolderButton';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 
 describe('AddFolderButton', () => {
   describe('handleCreateFolder()', () => {
     it('should call onCreateFolder on click', () => {
       const props = {
         canEdit: true,
-        onCreateFolder: jest.genMockFunction()
+        onCreateFolder: jest.fn()
       };
       const button = ReactTestUtils.renderIntoDocument(<Component {...props} />);
       button.handleCreateFolder(new Event('click'));

client/src/components/GalleryToolbar/Buttons/tests/BackButton-test.js

@@ -3,7 +3,7 @@ import React from 'react';
 // mock sub-components, as they could rely on a Redux store context and not necessary for unit test
 jest.mock('components/BackButton/BackButton');
 
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import Component from '../BackButton';
 
 describe('BackButton', () => {
@@ -42,7 +42,7 @@ describe('BackButton', () => {
   describe('handleBackClick()', () => {
     it('should open folder with parentId', () => {
       props.folder.parentId = 15;
-      props.onOpenFolder = jest.genMockFunction();
+      props.onOpenFolder = jest.fn();
       const backbutton = ReactTestUtils.renderIntoDocument(<Component {...props} />);
       backbutton.handleBackClick(new Event('click'));
       expect(props.onOpenFolder).toBeCalledWith(15);

client/src/components/GalleryToolbar/tests/GalleryToolbar-test.js

@@ -20,7 +20,7 @@ jest.mock('jquery', () => {
 });
 
 import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import { Component as GalleryToolbar } from '../GalleryToolbar';
 
 describe('GalleryToolbar', () => {
@@ -81,7 +81,7 @@ describe('GalleryToolbar', () => {
     };
 
     beforeEach(() => {
-      onSort = jest.genMockFunction();
+      onSort = jest.fn();
       const localProps = Object.assign({}, props, { onSort });
       gallerytoolbar = ReactTestUtils.renderIntoDocument(
         <GalleryToolbar {...localProps} />

client/src/components/InsertEmbedModal/tests/InsertEmbedModal-test.js

@@ -5,21 +5,21 @@
 jest.mock('components/FormBuilderModal/FormBuilderModal', () => () => null);
 
 import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import { Component as InsertEmbedModal } from '../InsertEmbedModal';
 
 describe('InsertEmbedModal', () => {
   let props = {};
 
   beforeEach(() => {
     props = {
-      onInsert: jest.genMockFunction(),
-      onCreate: jest.genMockFunction(),
-      onClosed: jest.genMockFunction(),
+      onInsert: jest.fn(),
+      onCreate: jest.fn(),
+      onClosed: jest.fn(),
       schemaUrl: 'test.com/schema',
       actions: {
         schema: {
-          setSchemaStateOverrides: jest.genMockFunction(),
+          setSchemaStateOverrides: jest.fn(),
         },
       },
     };
@@ -50,7 +50,7 @@ describe('InsertEmbedModal', () => {
         },
       };
 
-      component.clearOverrides = jest.genMockFunction();
+      component.clearOverrides = jest.fn();
       component.setOverrides(nextProps);
 
       expect(component.clearOverrides).toBeCalled();
@@ -98,7 +98,7 @@ describe('InsertEmbedModal', () => {
         <InsertEmbedModal {...props} />
       );
       const data = { Name: 'Bob' };
-      const mockSubmit = jest.genMockFunction();
+      const mockSubmit = jest.fn();
 
       component.handleSubmit(data, 'action_addmedia', mockSubmit);
 
@@ -111,7 +111,7 @@ describe('InsertEmbedModal', () => {
         <InsertEmbedModal {...props} />
       );
       const data = { Name: 'Bob' };
-      const mockSubmit = jest.genMockFunction();
+      const mockSubmit = jest.fn();
 
       component.handleSubmit(data, 'action_insertmedia', mockSubmit);
 
@@ -124,7 +124,7 @@ describe('InsertEmbedModal', () => {
         <InsertEmbedModal {...props} />
       );
       const data = { Name: 'Bob' };
-      const mockSubmit = jest.genMockFunction();
+      const mockSubmit = jest.fn();
 
       component.handleSubmit(data, 'action_cancel', mockSubmit);
 

client/src/components/PreviewImageField/tests/PreviewImageField-test.js

@@ -3,7 +3,7 @@
 jest.mock('components/AssetDropzone/AssetDropzone');
 
 import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import { Component as PreviewImageField } from '../PreviewImageField';
 
 describe('PreviewImageField', () => {
@@ -20,7 +20,7 @@ describe('PreviewImageField', () => {
       onAutofill: jest.fn(),
       actions: {
         previewField: {
-          removeFile: jest.genMockFunction(),
+          removeFile: jest.fn(),
         },
       },
     };