chore: react update

Author: MatthieuJnon

package-lock.json

@@ -21,23 +21,16 @@
   ],
   "dependencies": {
     "@stomp/stompjs": "^5.4.2",
-    "har-validator": "^5.1.3",
-    "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "html-webpack-template": "^6.2.0",
     "immutable": "^3.8.2",
-    "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
-    "react-dom": "^15.6.2",
     "react-immutable-proptypes": "^2.1.0",
     "react-markdown": "^4.2.2",
     "react-redux": "^5.1.1",
     "redux": "^3.7.2",
     "socket.io": "^2.2.0",
     "socket.io-client": "^2.2.0",
-    "sockjs-client": "^1.4.0",
-    "uniqueid": "^1.0.0",
-    "websocket": "^1.0.29"
+    "sockjs-client": "^1.4.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.2.0",
@@ -54,7 +47,8 @@
     "babel-preset-stage-0": "^6.24.1",
     "clean-webpack-plugin": "^0.1.19",
     "css-loader": "^0.28.11",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^4.18.2",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-config-prettier": "^1.6.0",
@@ -66,10 +60,11 @@
     "eslint-plugin-react": "^6.10.3",
     "husky": "^3.0.7",
     "jest": "^20.0.4",
+    "node-sass": "^4.12.0",
     "prettier": "^1.18.2",
     "prettier-eslint": "^5.1.0",
-    "react": "^15.6.2",
-    "react-test-renderer": "^15.6.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "redux-mock-store": "^1.5.3",
     "sass-loader": "^6.0.7",
     "standard-version": "^7.0.0",
@@ -80,14 +75,15 @@
     "webpack-dev-server": "^3.8.0"
   },
   "peerDependencies": {
-    "react": "^15.6.1"
+    "react": "16.x"
   },
   "jest": {
     "verbose": true,
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
       "\\.(css|scss)$": "<rootDir>/mocks/styleMock.js"
-    }
+    },
+    "setupTestFrameworkScriptFile": "<rootDir>/test-setup.js"
   },
   "husky": {
     "hooks": {

package.json

@@ -44,7 +44,11 @@ class Message extends PureComponent {
 
 Message.propTypes = {
   message: PROP_TYPES.MESSAGE,
-  docViewer: PropTypes.bool.isRequired
+  docViewer: PropTypes.bool
+};
+
+Message.defaultTypes = {
+  docViewer: false
 };
 
 const mapStateToProps = state => ({

src/components/Widget/components/Conversation/components/Messages/components/Message/index.js

@@ -55,7 +55,7 @@ class QuickReply extends PureComponent {
       <div className="quickReplies-container">
         <Message message={message} />
         {isLast && (
-        <div className="replies">
+          <div className="replies">
             {message.get('quick_replies').map((reply, index) => {
               if (reply.type === 'web_url') {
                 return (
@@ -108,7 +108,7 @@ const mapDispatchToProps = dispatch => ({
 QuickReply.propTypes = {
   getChosenReply: PropTypes.func,
   chooseReply: PropTypes.func,
-  id: PropTypes.string,
+  id: PropTypes.number,
   isLast: PropTypes.bool,
   message: PROP_TYPES.QUICK_REPLY
 };

src/components/Widget/components/Conversation/components/Messages/components/QuickReply/index.js

@@ -23,7 +23,9 @@ const formatDate = (date) => {
 
 const scrollToBottom = () => {
   const messagesDiv = document.getElementById('messages');
-  messagesDiv.scrollTop = messagesDiv.scrollHeight;
+  if (messagesDiv) {
+    messagesDiv.scrollTop = messagesDiv.scrollHeight;
+  }
 };
 
 class Messages extends Component {
@@ -158,7 +160,11 @@ Messages.propTypes = {
   profileAvatar: PropTypes.string,
   customComponent: PropTypes.func,
   showMessageDate: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  displayTypingIndication: PropTypes.bool.isRequired
+  displayTypingIndication: PropTypes.bool
+};
+
+Message.defaultTypes = {
+  displayTypingIndication: false
 };
 
 export default connect(store => ({

src/components/Widget/components/Conversation/components/Messages/index.js

@@ -20,7 +20,6 @@ import QuickReply from '../components/QuickReply';
 import Snippet from '../components/Snippet';
 
 describe('<Messages />', () => {
-
   const RealDate = Date;
 
   const mockDate = (isoDate) => {
@@ -135,7 +134,7 @@ describe('<Messages />', () => {
       const renderedComponent = createComponent(true, messageToRender);
       const date = renderedComponent.find('.message-date');
       expect(date).toHaveLength(1);
-      expect(date.text()).toEqual(today.toLocaleTimeString());
+      expect(date.text()).toEqual(today.toLocaleTimeString('en-US', { timeStyle: 'short' }));
     });
 
     it('should render date and time', () => {
@@ -146,7 +145,7 @@ describe('<Messages />', () => {
       const renderedComponent = createComponent(true, messageToRender);
       const date = renderedComponent.find('.message-date');
       expect(date).toHaveLength(1);
-      expect(date.text()).toEqual(`${twoDaysAgo.toLocaleDateString()} ${twoDaysAgo.toLocaleTimeString()}`);
+      expect(date.text()).toEqual(`${twoDaysAgo.toLocaleDateString()} ${twoDaysAgo.toLocaleTimeString('en-US', { timeStyle: 'short' })}`);
     });
 
     it('should render custom date', () => {

src/components/Widget/components/Conversation/components/Messages/test/index.test.js

@@ -23,6 +23,12 @@ describe('<Widget />', () => {
       handleNewUserMessage={handleUserMessage}
       profileAvatar={profile}
       dispatch={dispatch}
+      customMessageDelay={() => {}}
+      tooltipSent
+      tooltipDelay={0}
+      socket={{
+        isInitialized: () => true
+      }}
     />
   );
 

src/components/Widget/test/index.test.js

@@ -108,7 +108,7 @@ export function storeLocalSession(storage, key, sid) {
   const cachedSession = storage.getItem(key);
   let session;
   if (cachedSession) {
-      // Found exisiting session in storage
+    // Found exisiting session in storage
     const parsedSession = JSON.parse(cachedSession);
     session = {
       ...parsedSession,

src/store/reducers/helper.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });