first try all tests

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
   env: {
     browser: true,
-    es6: true
+    es6: true,
+    jest: true
   },
   extends: [
     'plugin:react/recommended',

package.json

@@ -18,6 +18,7 @@
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-scripts": "3.4.1",
+    "react-test-renderer": "^16.13.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "reselect": "^4.0.0",
@@ -31,7 +32,7 @@
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
-    "lint": "eslint --ext .jsx,.js ./src/ --fix",
+    "lint": "eslint --ext .tsx, ./src/ --fix",
     "ts-coverage": "typescript-coverage-report"
   },
   "browserslist": {
@@ -47,6 +48,9 @@
     ]
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^3.7.1",
+    "@typescript-eslint/parser": "^3.7.1",
+    "eslint": "^7.6.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-node": "^11.1.0",

src/__test__/App.test.js

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import App from '../App'
+import { act, create } from 'react-test-renderer'
+import { createStore } from 'redux'
+import { rootReducer } from '../store/reducers'
+
+// START STORE
+const params = { rowsAmount: 2, columnsAmount: 2, lightsAmount: 2 }
+const table = ['row1', 'row2']
+const rows = {
+  row1: ['somecell1', 'somecell2'],
+  row2: ['somecell3', 'somecell4']
+}
+
+const cells = {
+  somecell1: { id: 'somecell1', amount: 1 },
+  somecell2: { id: 'somecell2', amount: 2 },
+  somecell3: { id: 'somecell3', amount: 0 },
+  somecell4: { id: 'somecell4', amount: 1 }
+}
+const buttons = true
+const store = createStore(rootReducer, { params, table, rows, cells, buttons })
+// END STORE
+
+it('should correct render with some values', () => {
+  const tree = create(
+    <Provider store={store}>
+      <App />
+    </Provider>
+  )
+    .toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+describe('test cases for buttons', () => {
+  let component
+  let root
+
+  beforeEach(() => {
+    act(() => {
+      component = create(
+        <Provider store={store}>
+          <App />
+        </Provider>
+      )
+    })
+    root = component.root
+  })
+
+  it('click on button delete', () => {
+    const id = 'button-delete'
+
+    const ButtonDelete = root.findByProps({ id })
+
+    act(() => ButtonDelete.props.onClick())
+
+    expect(component.toJSON()).toMatchSnapshot()
+  })
+
+  // it('click on button add', () => {
+  //   const id = 'button-add'
+
+  //   const ButtonAdd = root.findByProps({ id })
+
+  //   act(() => ButtonAdd.props.onClick())
+
+  //   expect(component.toJSON()).toMatchSnapshot()
+  // })
+})

src/__test__/__snapshots__/App.test.js.snap

@@ -0,0 +1,272 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should correct render with some values 1`] = `
+<div
+  className="main"
+>
+  <form
+    className="form"
+    id="form"
+    onSubmit={[Function]}
+  >
+    <input
+      className="form-control false"
+      name="rowsAmount"
+      onChange={[Function]}
+      placeholder="Rows..."
+      type="number"
+      value=""
+    />
+    <input
+      className="form-control false"
+      name="columnsAmount"
+      onChange={[Function]}
+      placeholder="Columns..."
+      type="number"
+      value=""
+    />
+    <input
+      className="form-control false"
+      name="lightsAmount"
+      onChange={[Function]}
+      placeholder="Highlight cells..."
+      type="number"
+      value=""
+    />
+    <button
+      className="btn btn-dark"
+      id="button-generate"
+      type="submit"
+    >
+      Generate
+    </button>
+  </form>
+  <div
+    className="buttons"
+  >
+    <button
+      className="btn btn-dark"
+      id="button-delete"
+      onClick={[Function]}
+      type="button"
+    >
+      Delete row -
+    </button>
+    <button
+      className="btn btn-dark"
+      id="button-add"
+      onClick={[Function]}
+      type="button"
+    >
+      Add row +
+    </button>
+  </div>
+  <table
+    className="table table-dark"
+  >
+    <tbody>
+      <tr
+        id="row1"
+      >
+        <td
+          id="somecell1"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          style={
+            Object {
+              "background": "",
+            }
+          }
+        >
+          1
+        </td>
+        <td
+          id="somecell2"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          style={
+            Object {
+              "background": "",
+            }
+          }
+        >
+          2
+        </td>
+        <td
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          Sum: 
+          3
+        </td>
+      </tr>
+      <tr
+        id="row2"
+      >
+        <td
+          id="somecell3"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          style={
+            Object {
+              "background": "",
+            }
+          }
+        >
+          0
+        </td>
+        <td
+          id="somecell4"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          style={
+            Object {
+              "background": "",
+            }
+          }
+        >
+          1
+        </td>
+        <td
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          Sum: 
+          1
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Average sum: 
+          0
+        </td>
+        <td>
+          Average sum: 
+          1
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
+exports[`test cases for buttons click on button delete 1`] = `
+<div
+  className="main"
+>
+  <form
+    className="form"
+    id="form"
+    onSubmit={[Function]}
+  >
+    <input
+      className="form-control false"
+      name="rowsAmount"
+      onChange={[Function]}
+      placeholder="Rows..."
+      type="number"
+      value=""
+    />
+    <input
+      className="form-control false"
+      name="columnsAmount"
+      onChange={[Function]}
+      placeholder="Columns..."
+      type="number"
+      value=""
+    />
+    <input
+      className="form-control false"
+      name="lightsAmount"
+      onChange={[Function]}
+      placeholder="Highlight cells..."
+      type="number"
+      value=""
+    />
+    <button
+      className="btn btn-dark"
+      id="button-generate"
+      type="submit"
+    >
+      Generate
+    </button>
+  </form>
+  <div
+    className="buttons"
+  >
+    <button
+      className="btn btn-dark"
+      id="button-delete"
+      onClick={[Function]}
+      type="button"
+    >
+      Delete row -
+    </button>
+    <button
+      className="btn btn-dark"
+      id="button-add"
+      onClick={[Function]}
+      type="button"
+    >
+      Add row +
+    </button>
+  </div>
+  <table
+    className="table table-dark"
+  >
+    <tbody>
+      <tr
+        id="row1"
+      >
+        <td
+          id="somecell1"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          style={
+            Object {
+              "background": "",
+            }
+          }
+        >
+          1
+        </td>
+        <td
+          id="somecell2"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          style={
+            Object {
+              "background": "",
+            }
+          }
+        >
+          2
+        </td>
+        <td
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          Sum: 
+          3
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Average sum: 
+          1
+        </td>
+        <td>
+          Average sum: 
+          2
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;