Tests setup

frontend-redux/jestsetup.js

@@ -0,0 +1,8 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+// eslint-disable-next-line no-console
+console.error = message => {
+  throw new Error(message);
+};

frontend-redux/package.json

@@ -21,6 +21,8 @@
     "css-loader": "1.0.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.12.1",
     "eslint": "5.12.0",
     "eslint-config-react-app": "^3.0.7",
     "eslint-loader": "2.1.1",
@@ -39,7 +41,7 @@
     "jest": "23.6.0",
     "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",
-    "jest-watch-typeahead": "^0.2.1",
+    "jest-watch-typeahead": "^0.3.0",
     "jss": "^9.8.7",
     "lodash": "^4.17.11",
     "mini-css-extract-plugin": "0.5.0",
@@ -62,13 +64,15 @@
     "react-redux": "^6.0.1",
     "react-router": "^4.3.1",
     "react-swipeable-views": "^0.13.1",
+    "react-test-renderer": "^16.8.6",
     "react-world-flags": "^1.3.0",
     "redux": "^4.0.1",
     "redux-actions": "^2.6.4",
     "redux-form": "^8.1.0",
     "redux-immutable": "^4.0.0",
     "redux-localstorage": "^0.4.1",
     "redux-saga": "^1.0.1",
+    "redux-saga-test-plan": "^4.0.0-beta.2",
     "reselect": "^4.0.0",
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
@@ -89,7 +93,8 @@
     "storybook": "start-storybook -p 9009 -s public",
     "lint": "./node_modules/.bin/eslint ./src/.",
     "pre-commit-test": "CI=true node scripts/test.js --env=jsdom",
-    "aws-deploy": "yarn build && ./scripts/aws_deploy.sh"
+    "aws-deploy": "yarn build && ./scripts/aws_deploy.sh",
+    "testcafe": "testcafe chrome testCafe/*.js"
   },
   "husky": {
     "hooks": {
@@ -112,7 +117,8 @@
     ],
     "resolver": "jest-pnp-resolver",
     "setupFiles": [
-      "react-app-polyfill/jsdom"
+      "react-app-polyfill/jsdom",
+      "./jestsetup.js"
     ],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
@@ -146,8 +152,8 @@
       "node"
     ],
     "watchPlugins": [
-      "/Users/qwerty/job/projects/starter/starters/frontend-redux/node_modules/jest-watch-typeahead/filename.js",
-      "/Users/qwerty/job/projects/starter/starters/frontend-redux/node_modules/jest-watch-typeahead/testname.js"
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
     ]
   },
   "devDependencies": {

frontend-redux/src/components/TestButton/TestButton.spec.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Button from './TestButton';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import TestComponent from 'helpers/testHelper';
+
+it('renders correctly', () => {
+  const tree = renderer
+    .create(
+      <TestComponent>
+        <Button type='button'>Button</Button>
+      </TestComponent>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('Button receive type and class', () => {
+  const button = shallow(
+    <TestComponent>
+      <Button className='test' type='button'>Button</Button>
+    </TestComponent>
+  );
+  expect(button.children().props().type).toEqual('button');
+  expect(button.children().props().className).toEqual('test');
+});

frontend-redux/src/components/TestButton/__snapshots__/TestButton.spec.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<button
+  className="MuiButtonBase-root-27 MuiButton-root-1 MuiButton-text-3 MuiButton-flat-6 TestButton-button-0-2-1"
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onContextMenu={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+  tabIndex="0"
+  type="button"
+>
+  <span
+    className="MuiButton-label-2"
+  >
+    Button
+  </span>
+  <span
+    className="MuiTouchRipple-root-30"
+  />
+</button>
+`;

frontend-redux/src/helpers/testHelper.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import theme from 'theme';
+import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
+import { createMuiTheme } from '@material-ui/core/styles';
+
+const TestComponent = ({ children }) => (
+  <MuiThemeProvider theme={createMuiTheme(theme)}>
+    {children}
+  </MuiThemeProvider>
+);
+
+export default TestComponent;

frontend-redux/src/index.js

@@ -2,13 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import registerServiceWorker from './services/registerServiceWorker';
-import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
 import { I18nextProvider } from 'react-i18next';
 import i18n from 'config/i18next';
 
 import JssProvider from 'react-jss/lib/JssProvider';
 import { create } from 'jss';
 import theme from './theme';
+import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
 import { createGenerateClassName, createMuiTheme, jssPreset } from '@material-ui/core/styles';
 
 import { Provider } from 'react-redux';

frontend-redux/src/sagas/initialize.spec.js

@@ -0,0 +1,26 @@
+import { expectSaga, testSaga } from 'redux-saga-test-plan';
+import initializeSaga from './initialize';
+import {
+  startLoading,
+  stopLoading,
+} from 'actionCreators/loading';
+
+test('exact order with redux-saga-test-plan', () => {
+  testSaga(initializeSaga)
+  .next()
+  .put(startLoading())
+  .next()
+  .delay(3000)
+  .next()
+  .put(stopLoading())
+  .next()
+  .isDone();
+});
+
+test('start loading effect', () => {
+  return expectSaga(initializeSaga)
+    .put(startLoading())
+    .delay(3000)
+    .put(stopLoading())
+    .run(false);
+});

frontend-redux/testCafe/Test.testcafe.js

@@ -0,0 +1,17 @@
+import { Selector } from 'testcafe';
+
+fixture `Test page`
+    .page `http://localhost:3000/test`;
+
+test('buttons and form test', async t => {
+    await t
+        .click(Selector('button').withText('Open modal'))
+        .click(Selector('span').withText('CLOSE MODAL'))
+        .typeText(Selector('#name'), '123')
+        .typeText(Selector('#age'), '123')
+        .click(Selector('button').withText('Create'))
+        .click(Selector('button').withText('Imitate loading'))
+        .click(Selector('button').withText('Imitate loading'))
+        .click(Selector('button').withText('Open modal'))
+        .click(Selector('.ModalsPortal--content-26'));
+});

frontend-redux/testCafe/Test2.testcafe.js

@@ -0,0 +1,15 @@
+import { Selector } from 'testcafe';
+
+fixture `Test Page`
+    .page `http://localhost:3000/test`;
+
+test('buttons and form test', async t => {
+    await t
+        .click(Selector('button').withText('Open modal'))
+        .click(Selector('span').withText('CLOSE MODAL'))
+        .typeText(Selector('#name'), '123')
+        .typeText(Selector('#age'), '123')
+        .click(Selector('button').withText('Create'))
+        .click(Selector('button').withText('Open modal'))
+        .click(Selector('.ModalsPortal--content-26'));
+});