test support for react component

sergey.volkov · sergey.volkov · commit 2f29f504cae1 · 2018-10-08T18:22:43.000+03:00
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,21 @@
 {
-  "plugins": ["wildcard", "transform-decorators-legacy"],
-  "presets": ["env", "react", "es2015", "stage-0"]  
+  "plugins": ["wildcard", "transform-decorators-legacy", "syntax-dynamic-import", "transform-es2015-modules-commonjs"],
+  "presets": ["env", "react", "es2016", "stage-0"],  
+  
+  "env": {
+    "test": {
+      "presets":[
+        "env", 
+		"es2016",		
+        "react",
+		"stage-0"
+      ],
+      "plugins": [
+		"wildcard",
+		"transform-decorators-legacy",
+		"transform-es2015-modules-commonjs"
+      ]
+    }
+  }
+
 }
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -24,6 +24,30 @@
             "webRoot": "${workspaceRoot}/src",
 
             "sourceMaps": true
-        }
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Jest All",
+            "program": "${workspaceFolder}/node_modules/.bin/jest",
+            "args": ["--runInBand"],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen",
+            "windows": {
+              "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+            }
+          },
+          {
+            "type": "node",
+            "request": "launch",
+            "name": "Jest Current File",
+            "program": "${workspaceFolder}/node_modules/.bin/jest",
+            "args": ["${relativeFile}"],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen",
+            "windows": {
+              "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+            }
+          }
     ]
 }
diff --git a/config/setupTests.js b/config/setupTests.js
@@ -0,0 +1,15 @@
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { shallow, render, mount, configure } from 'enzyme';
+
+configure({ 'adapter': new Adapter() });
+
+global.shallow = shallow;
+global.render = render;
+global.mount = mount;
+
+//mock store for redux
+import configureMockStore from "redux-mock-store";
+global.mockStore = function (store) { const mock = configureMockStore(); return mock(store); };
+
+
diff --git a/package.json b/package.json
@@ -17,11 +17,19 @@
   "jest": {
     "verbose": true,
     "testEnvironment": "<rootDir>/__mocks__/setupEnvironment.js",
-    "collectCoverage": true,
+	"setupTestFrameworkScriptFile": "<rootDir>/config/setupTests.js",
+    "collectCoverage": false,
     "collectCoverageFrom": [
       "src/**/*.{js,jsx}",
       "!**/node_modules/**"
     ],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.jsx$": "babel-jest"
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!(react-native|react-native-button|redux)/)"
+    ],
     "globals": {
       "__DEV__": true
     },
@@ -32,23 +40,29 @@
     "moduleDirectories": [
       "node_modules"
     ],
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/react"
+    ],
     "modulePaths": [
       "src",
       "config"
     ],
     "testPathIgnorePatterns": [
-      "<rootDir>/node_modules/"
+      "<rootDir>/node_modules/",
+      "<rootDir>/config/",
+      "<rootDir>/webpack/"
     ],
     "moduleNameMapper": {
+      "^config$": "<rootDir>/config/config.common.js",
+      "ress|css-loading": "<rootDir>/__mocks__/fileMock.js",
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+      "\\.(css|less|styl)$": "<rootDir>/__mocks__/styleMock.js"
     }
   },
   "dependencies": {
     "autoprefixer": "^6.7.7",
     "axios": "^0.17.0",
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
     "babel-jest": "^23.6.0",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-class-properties": "^6.10.2",
@@ -57,11 +71,8 @@
     "babel-plugin-transform-object-assign": "^6.5.0",
     "babel-plugin-transform-runtime": "^6.5.2",
     "babel-plugin-wildcard": "^5.0.0",
-    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.0.14",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.26.0",
     "classnames": "^2.2.5",
     "config": "^1.29.2",
@@ -152,21 +163,33 @@
     "zenscroll": "^4.0.2"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.0.0",
     "@types/react": "^16.4.14",
+    "babel": "^6.23.0",
+    "babel-core": "^6.26.3",
     "babel-minify-webpack-plugin": "^0.2.0",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-dynamic-import-node": "^2.1.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
     "babel-plugin-transform-es2015-block-scoping": "^6.26.0",
     "babel-plugin-transform-es2015-for-of": "^6.23.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-wildcard": "^5.0.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2016": "^6.24.1",
     "babel-preset-minify": "^0.2.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
     "clean-webpack-plugin": "^0.1.19",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.6.0",
     "gh-pages": "^1.2.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "react-addons-test-utils": "^15.6.2",
     "redux-devtools-extension": "^2.13.5",
-    "rollup-plugin-commonjs": "^8.3.0",
+    "redux-mock-store": "^1.5.3",
+    "rollup-plugin-commonjs": "^8.4.1",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^3.0.0",
     "style-loader": "^0.19.1",
diff --git a/src/Services/CacheService/index.js b/src/Services/CacheService/index.js
@@ -25,6 +25,10 @@ class CacheServiceClass {
             return value;
         }
     }
+
+    clearCache = () => {
+        this.cache = {};
+    }
     
 }
 
diff --git a/src/components/GlobalNotification/globalNotification.test.js b/src/components/GlobalNotification/globalNotification.test.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { call, put } from 'redux-saga/effects';
+import assert from 'assert';
+
+import {LoaderComponent } from './Loader/component';
+
+
+const mockNotifications = {
+    showLoader: false,
+    message: '',
+    progressTick: 0,
+    notifications: []
+};
+
+
+test( 'GlobalNotifaction, test Loader hide', () => {
+    
+    const store = mockStore({
+        notifications: mockNotifications
+    });
+
+    const wrapper = mount(
+        <LoaderComponent
+            store={store}
+        />
+    );
+
+    expect(wrapper.exists('.loader')).toEqual(false);
+
+} );
+
+test( 'GlobalNotifaction, test Loader show', () => {
+    
+    const store = mockStore({
+        notifications: {
+            ...mockNotifications,
+            showLoader: true
+        }
+    });
+
+    const wrapper = mount(
+        <LoaderComponent
+            store={store}
+        />
+    );
+
+    const p = wrapper.find('.loader');
+    expect(p.length).toBe(1);
+
+} );
+
diff --git a/src/components/SecuritySelector/securitySelector.test.js b/src/components/SecuritySelector/securitySelector.test.js
@@ -4,36 +4,105 @@ import { call, put } from 'redux-saga/effects';
 import assert from 'assert';
 
 import { securitySearchFunc } from './sagas';
-import { SecurityService } from 'Services';
+import { SecurityService, CacheService } from 'Services';
+import {SecuritySelectorComponent } from './component';
 import { ACTIONS } from './actions';
+import {Map} from 'immutable';
 
 
-test( 'test secirity search OK', () => {
+const mockSuggestions = {
+    suggestions: {
+		securitiesSuggestionsList: [{
+				id: 76089,
+				securityId: 'GBPRUB_TOM',
+				shortName: 'GBPRUB_TOM',
+				regNumber: null,
+				name: 'GBP/RUB_TOM - GBP/РУБ',
+				isin: null,
+				isTraded: 1,
+				type: 'currency',
+				group: 'currency_selt',
+				primaryBoardId: 'CETS',
+				marketPriceBoardId: null,
+				providerCode: 'MOEX',
+				currency: 'RUB'
+            }]
+        },
+    suggestionList: [],
+    references: {
+		securityTypes: [{
+				id: 3,
+				engineId: 1,
+				engineName: 'stock',
+				engineTitle: 'Фондовый рынок и рынок депозитов',
+				typeName: 'common_share',
+				typeTitle: 'Акция обыкновенная'
+            }],
+            securityGroups: [{
+				id: 12,
+				name: 'stock_index',
+				title: 'Индексы',
+				isHidden: 0
+			}, {
+				id: 4,
+				name: 'stock_shares',
+				title: 'Акции',
+				isHidden: 0
+			}]
+        }
+};
+
+
+test( 'securitySelector component', () => {
+    
+    const store = mockStore({
+        ...mockSuggestions
+    });
+
+    const wrapper = mount(
+        <SecuritySelectorComponent
+            store={store}
+        />
+    );
+
+    const p = wrapper.find(".react-autosuggest");
+    expect(p.length).toBe(1);
+
+} );
+
+test( 'securitySelector search OK', () => {
+
+    CacheService.clearCache();
+
     const iterator = securitySearchFunc( { text: 'ind' } );
+    //expect(iterator.next()).toEqual(call(CacheService.getOrAdd));
 
     iterator.next();
     iterator.next();
 
     // expects a call instruction
     assert.deepEqual(
         iterator.next().value,
-        call( SecurityService.findSecurity, 'ind' ),
+        put( {data: {suggestionsList: undefined}, type: ACTIONS.SECURITY_SEARCH_SUCCEEDED} ),
         'securitySearchFunc should yield an Effect findSecurity'
     );
 
 } );
 
-test( 'test secirity search FAIL', () => {
+test( 'securitySelector search FAIL', () => {
     const iterator = securitySearchFunc( { text: 'ind' } );
 
+    iterator.next();
     iterator.next();
     
     // create a fake error
     const error = {};
 
+    iterator.throw( error );
+
     // expects a dispatch instruction
     assert.deepEqual(
-        iterator.throw( error ).value,
+        iterator.next().value, // skip loader action
         put( { type: ACTIONS.SECURITY_SEARCH_FAILED, error } ),
         `securitySearchFunc should yield an Effect put({ type: '${ ACTIONS.SECURITY_SEARCH_FAILED }', error })`
     );

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,10 @@ class CacheServiceClass {`
`25`	`25`	`return value;`
`26`	`26`	`}`
`27`	`27`	`}`
	`28`	`+`
	`29`	`+ clearCache = () => {`
	`30`	`+ this.cache = {};`
	`31`	`+ }`
`28`	`32`
`29`	`33`	`}`
`30`	`34`