Merge pull request Wolox#253 from Wolox/update-test

Update test

.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": [
     ["@babel/preset-env", {
-      "modules": false,
       "targets": {
         "browsers": ["last 2 versions", "safari >= 7"]
       }

package.json

@@ -30,10 +30,10 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.13.16",
+    "@babel/core": "^7.14.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
-    "@babel/preset-env": "^7.8.7",
+    "@babel/preset-env": "^7.14.1",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.8.3",
     "@toycode/markdown-it-class": "^1.2.3",
@@ -44,14 +44,15 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-redux": "^7.1.7",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "autoprefixer": "^8.2.0",
     "babel-jest": "^19.0.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.0.0",
     "caniuse-lite": "^1.0.30001219",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "css-loader": "^5.2.4",
-    "enzyme": "^3.3.0",
+    "enzyme": "^3.11.0",
     "eslint": "^6.8.0",
     "eslint-config-wolox": "^4.0.0",
     "eslint-loader": "^3.0.3",
@@ -62,7 +63,7 @@
     "file-loader": "^0.11.2",
     "html-webpack-plugin": "^5.3.1",
     "husky": "^4.2.3",
-    "jest": "^25.1.0",
+    "jest": "^25.5.4",
     "mini-css-extract-plugin": "^1.5.1",
     "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
@@ -73,6 +74,7 @@
     "prettier-eslint": "^9.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "redux-mock-store": "^1.5.4",
     "sass-loader": "^11.0.1",
     "source-map-loader": "^2.0.1",
     "style-loader": "^2.0.0",
@@ -92,7 +94,8 @@
   "jest": {
     "verbose": true,
     "transform": {
-      "^.+\\.tsx?$": "ts-jest"
+      "^.+\\.tsx?$": "ts-jest",
+      "^.+\\.(js|jsx)$": "babel-jest"
     },
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
     "moduleFileExtensions": [

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

@@ -1,7 +1,7 @@
 import { shallow, configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
-import { createNewMessage } from '@utils/messages';
+import { createNewMessage } from '../../../../../../../../../utils/messages';
 import Message from '../index';
 
 configure({ adapter: new Adapter() });

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

@@ -1,8 +1,9 @@
-import { List } from 'immutable';
-import { shallow, configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { mount, configure } from 'enzyme';
+import { Provider } from 'react-redux'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
-import { createNewMessage, createLinkSnippet, createComponentMessage } from '@utils/messages';
+import { createNewMessage, createLinkSnippet, createComponentMessage } from '../../../../../../../utils/messages';
+import { createMockStore } from '../../../../../../../utils/store';
 
 import Messages from '../index';
 import Message from '../components/Message';
@@ -11,19 +12,19 @@ import Snippet from '../components/Snippet';
 configure({ adapter: new Adapter() });
 
 describe('<Messages />', () => {
-  const message = createNewMessage('Response message 1');
-  const linkSnippet = createLinkSnippet({ title: 'link', link: 'link' });
+
   /* eslint-disable react/prop-types */
   const Dummy = ({ text }) => <div>{text}</div>;
   /* eslint-enable */
   const customComp = createComponentMessage(Dummy, { text: 'This is a Dummy Component!' });
+  const message = createNewMessage('Response message 1');
+  const linkSnippet = createLinkSnippet({ title: 'link', link: 'link' });
+  const mockStore =  createMockStore({ messages: {messages: [message, linkSnippet, customComp], badgeCount: 0 }})
 
-  const responseMessages = List([message, linkSnippet, customComp]);
-
-  const messagesComponent = shallow(
-    <Messages.WrappedComponent
-      messages={responseMessages}
-    />
+  const messagesComponent = mount(
+    <Provider store={ mockStore }>
+       <Messages />
+    </Provider>
   );
 
   it('should render a Message component', () => {
@@ -34,7 +35,7 @@ describe('<Messages />', () => {
     expect(messagesComponent.find(Snippet)).toHaveLength(1);
   });
 
-  it('should reder a custom component', () => {
+  it('should render a custom component', () => {
     expect(messagesComponent.find(Dummy)).toHaveLength(1);
   });
 });

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

@@ -1,18 +1,29 @@
-import { shallow, configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { configure, mount } from 'enzyme';
+import { Provider } from 'react-redux'
+import configureMockStore from 'redux-mock-store'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 import Launcher from '../index';
 import Badge from '../components/Badge';
 
 configure({ adapter: new Adapter() });
+const mockStore =  configureMockStore()
 
 describe('<Launcher />', () => {
-  const createMessageComponent = ({ toggle, chatOpened, badge = 0 }) =>
-    shallow(<Launcher.WrappedComponent
-      toggle={toggle}
-      chatOpened={chatOpened}
-      badge={badge}
-    />);
+  const createMessageComponent = ({ toggle, chatOpened, badge = 0 }) => {
+    const store = mockStore({
+      behavior: { showChat: chatOpened },
+      messages: { badgeCount: badge }
+    });
+
+    return mount(
+      <Provider store={store}>
+        <Launcher
+          toggle={toggle}
+        />
+      </Provider>
+    );
+  }
 
   it('should call toggle prop when clicked', () => {
     const toggle = jest.fn();

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

@@ -1,12 +1,16 @@
-import { shallow, configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { configure, mount } from 'enzyme';
+import { Provider } from 'react-redux'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
-import assetMock from '@tests-mocks/fileMock';
+import assetMock from '../../../../mocks/fileMock';
+import { createMockStore } from '../../../utils/store'
 import Widget from '../index';
 import WidgetLayout from '../layout';
 
 configure({ adapter: new Adapter() });
 
+const mockStore =  createMockStore()
+
 describe('<Widget />', () => {
   const profile = assetMock;
   const handleUserMessage = jest.fn();
@@ -18,33 +22,31 @@ describe('<Widget />', () => {
     },
     preventDefault() {}
   };
-  const dispatch = jest.fn();
 
-  const widgetComponent = shallow(
-    <Widget.WrappedComponent
-      handleNewUserMessage={handleUserMessage}
-      profileAvatar={profile}
-      dispatch={dispatch}
-    />
-  );
+  const widgetComponent = mount(
+    <Provider store={ mockStore }>
+      <Widget handleNewUserMessage={handleUserMessage} profileAvatar={profile} />
+    </Provider>
+  )
 
   it('should render WidgetLayout', () => {
     expect(widgetComponent.find(WidgetLayout)).toHaveLength(1);
   });
 
   it('should prevent events default behavior', () => {
     const spyPreventDefault = jest.spyOn(newMessageEvent, 'preventDefault');
-    widgetComponent.instance().handleMessageSubmit(newMessageEvent);
-    expect(spyPreventDefault).toHaveBeenCalled();
+    widgetComponent.find(WidgetLayout).prop('onSendMessage')(newMessageEvent)
+    expect(spyPreventDefault).toHaveBeenCalled()
+
   });
 
   it('should call prop when calling newMessageEvent', () => {
-    widgetComponent.instance().handleMessageSubmit(newMessageEvent);
+    widgetComponent.find(WidgetLayout).prop('onSendMessage')(newMessageEvent);
     expect(handleUserMessage).toBeCalled();
   });
 
   it('should clear the message input when newMessageEvent', () => {
-    widgetComponent.instance().handleMessageSubmit(newMessageEvent);
+    widgetComponent.find(WidgetLayout).prop('onSendMessage')(newMessageEvent);
     expect(newMessageEvent.target.message.value).toBe('');
   });
 });

src/utils/store.ts

@@ -0,0 +1,9 @@
+import configureMockStore from 'redux-mock-store'
+
+export const createMockStore = (state = {}) =>  
+  configureMockStore()({
+    behavior: { showChat: false, disabledInput: false },
+    messages: { messages: [], badgeCount: 0 },
+    preview: { visible: false },
+    ...state
+  })